Skip to content

Commit 3927941

Browse files
ar1603ar1603
committed
feat(): Adding other component having the waves and model fix
1 parent 605d68d commit 3927941

17 files changed

Lines changed: 241 additions & 43 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"react-scripts": "5.0.1",
5252
"react-social-icons": "^6.16.0",
5353
"react-type-animation": "^3.2.0",
54+
"simplex-noise": "^4.0.3",
5455
"three": "^0.172.0",
5556
"typescript": "^4.9.5",
5657
"web-vitals": "^2.1.4",

‎public/copernicus.glb‎

4.08 MB
Binary file not shown.

‎src/components/Lights/Lights.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ const Lights = () => {
77
position={'fixed'}
88
top={0}
99
right={0}
10-
boxShadow={'0 0 40px 10px violet, 0 0 100px 40px violet'}
10+
boxShadow={
11+
'0 0 40px 10px blue, 0 0 100px 40px blue, 0 0 140px 60px blue'
12+
}
1113
/>
1214
<Box
1315
position={'fixed'}

‎src/components/WavyBackground/WavyBackground.tsx‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import { useEffect, useRef, useState } from 'react';
2+
import { createNoise3D } from 'simplex-noise';
3+
4+
const WavyBackground = ({
5+
children,
6+
className,
7+
containerClassName,
8+
colors,
9+
waveWidth,
10+
backgroundFill,
11+
blur = 10,
12+
speed = 'fast',
13+
waveOpacity = 0.5,
14+
...props
15+
}: {
16+
children?: any;
17+
className?: string;
18+
containerClassName?: string;
19+
colors?: string[];
20+
waveWidth?: number;
21+
backgroundFill?: string;
22+
blur?: number;
23+
speed?: 'slow' | 'fast';
24+
waveOpacity?: number;
25+
[key: string]: any;
26+
}) => {
27+
const noise = createNoise3D();
28+
let w: number,
29+
h: number,
30+
nt: number,
31+
i: number,
32+
x: number,
33+
ctx: any,
34+
canvas: any;
35+
const canvasRef = useRef<HTMLCanvasElement>(null);
36+
const getSpeed = () => {
37+
switch (speed) {
38+
case 'slow':
39+
return 0.001;
40+
case 'fast':
41+
return 0.002;
42+
default:
43+
return 0.001;
44+
}
45+
};
46+
47+
const init = () => {
48+
canvas = canvasRef.current;
49+
ctx = canvas.getContext('2d');
50+
w = ctx.canvas.width = window.innerWidth;
51+
h = ctx.canvas.height = window.innerHeight;
52+
ctx.filter = `blur(${blur}px)`;
53+
nt = 0;
54+
window.onresize = function () {
55+
w = ctx.canvas.width = window.innerWidth;
56+
h = ctx.canvas.height = window.innerHeight;
57+
ctx.filter = `blur(${blur}px)`;
58+
};
59+
render();
60+
};
61+
62+
const waveColors = colors ?? [
63+
'#38bdf8',
64+
'#818cf8',
65+
'#c084fc',
66+
'#e879f9',
67+
'#22d3ee',
68+
];
69+
const drawWave = (n: number) => {
70+
nt += getSpeed();
71+
for (i = 0; i < n; i++) {
72+
ctx.beginPath();
73+
ctx.lineWidth = waveWidth || 50;
74+
ctx.strokeStyle = waveColors[i % waveColors.length];
75+
for (x = 0; x < w; x += 5) {
76+
const y = noise(x / 600, 0.3 * i, nt) * 100;
77+
ctx.lineTo(x, y + h * 0.5); // adjust for height, currently at 50% of the container
78+
}
79+
ctx.stroke();
80+
ctx.closePath();
81+
}
82+
};
83+
84+
let animationId: number;
85+
const render = () => {
86+
ctx.fillStyle = backgroundFill || 'black';
87+
ctx.color = backgroundFill || 'black';
88+
ctx.globalAlpha = waveOpacity || 0.5;
89+
ctx.fillRect(0, 0, w, h);
90+
drawWave(8);
91+
animationId = requestAnimationFrame(render);
92+
};
93+
94+
useEffect(() => {
95+
init();
96+
return () => {
97+
cancelAnimationFrame(animationId);
98+
};
99+
}, []);
100+
101+
const [isSafari, setIsSafari] = useState(false);
102+
useEffect(() => {
103+
// I'm sorry but i have got to support it on safari.
104+
setIsSafari(
105+
typeof window !== 'undefined' &&
106+
navigator.userAgent.includes('Safari') &&
107+
!navigator.userAgent.includes('Chrome'),
108+
);
109+
}, []);
110+
111+
return (
112+
<div
113+
className={
114+
'h-screen flex flex-col items-center justify-center mx-auto pb-20'
115+
}
116+
style={{
117+
zIndex: 0,
118+
overflowX: 'clip',
119+
marginTop: '-25vh',
120+
mixBlendMode: 'lighten',
121+
}}
122+
>
123+
<canvas
124+
className="inset-0 z-0"
125+
ref={canvasRef}
126+
id="canvas"
127+
style={{
128+
...(isSafari ? { filter: `blur(${blur}px)` } : {}),
129+
}}
130+
></canvas>
131+
<div className={'z-0'} {...props}>
132+
{children}
133+
</div>
134+
</div>
135+
);
136+
};
137+
138+
export default WavyBackground;

‎src/components/WavyBackground/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as WavyBackground } from './WavyBackground';

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@ export * from './TitleBox';
88
export * from './Tooltip';
99
export * from './3dPin';
1010
export * from './TypeWriterText';
11+
export * from './WavyBackground';

‎src/screens/mainFlow/MainScreen.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
import { Text } from '@chakra-ui/react';
21
import { TitleBoxContainer, Lights, MeteorsEffect } from '@components';
32
import { Footer, NavigationBar, SocialNavigation } from './components';
4-
import { RobotScene } from './scene';
3+
import { CharacterType, RobotScene } from './scene';
54
import { useState } from 'react';
65
import { Contents } from './contents';
76

87
const MainScreen = () => {
9-
const [characterType, setCharacterType] = useState<'adam' | 'lieutenant'>(
10-
'lieutenant',
11-
);
8+
const [characterType, setCharacterType] =
9+
useState<CharacterType>('copernicus');
1210
return (
1311
<TitleBoxContainer
1412
title={'Amit Raikwar | Portfolio'}
@@ -21,10 +19,10 @@ const MainScreen = () => {
2119
>
2220
<MeteorsEffect number={30} />
2321
<RobotScene type={characterType} />
24-
{/* <Lights /> */}
22+
<Lights />
2523
<NavigationBar />
2624
<SocialNavigation
27-
handleCharacterClick={(type: 'adam' | 'lieutenant') => {
25+
handleCharacterClick={(type) => {
2826
setCharacterType(type);
2927
}}
3028
/>

‎src/screens/mainFlow/components/Footer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const Footer = () => {
2323
p={2}
2424
bg={'black'}
2525
color={'white'}
26+
marginTop={24}
2627
>
2728
<HoverBorderGradient>
2829
<FooterEndText />

‎src/screens/mainFlow/components/SocialNavigation.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
} from '@chakra-ui/react';
1919
import { useCursor } from '@components';
2020
import { RefObject, useRef } from 'react';
21+
import { CharacterType } from '../scene';
2122

2223
const IconProps = {
2324
variant: 'ghost',
@@ -32,7 +33,7 @@ const IconProps = {
3233
const SocialNavigation = ({
3334
handleCharacterClick: handlerCharacterClick,
3435
}: {
35-
handleCharacterClick: (type: 'adam' | 'lieutenant') => void;
36+
handleCharacterClick: (type: CharacterType) => void;
3637
}) => {
3738
const ref = useRef<HTMLDivElement>(null);
3839
const menuButtonRef = useRef<HTMLDivElement>(null);
@@ -55,7 +56,7 @@ const SocialNavigation = ({
5556
setCursorInsets(undefined);
5657
};
5758
return (
58-
<VStack position={'fixed'} bottom={20} right={10} rowGap={10}>
59+
<VStack position={'fixed'} bottom={20} right={10} rowGap={10} zIndex={10}>
5960
<Box
6061
ref={menuButtonRef}
6162
onMouseEnter={onMouseEnter(menuButtonRef, '6px')}
@@ -77,16 +78,16 @@ const SocialNavigation = ({
7778
boxShadow: '0px 0px 20px 8px violet',
7879
}}
7980
>
80-
<MenuItem onClick={() => handlerCharacterClick('adam')}>
81-
<Text key={'adam'} fontSize={'xl'}>
82-
Adam
83-
</Text>
84-
</MenuItem>
85-
<MenuItem onClick={() => handlerCharacterClick('lieutenant')}>
86-
<Text key={'Lieutenant'} fontSize={'xl'}>
87-
Lieutenant
88-
</Text>
89-
</MenuItem>
81+
{(['adam', 'lieutenant', 'copernicus'] as CharacterType[]).map(
82+
(character: CharacterType) => (
83+
<MenuItem
84+
key={character}
85+
onClick={() => handlerCharacterClick(character)}
86+
>
87+
<Text fontSize={'xl'}>{character.toUpperCase()}</Text>
88+
</MenuItem>
89+
),
90+
)}
9091
</MenuList>
9192
</Menu>
9293
</Box>

‎src/screens/mainFlow/contents/Contents.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Box, HStack, Text } from '@chakra-ui/react';
2-
import { Card, HoverBorderGradient, ThreeDPin } from '@components';
2+
import { Card, ThreeDPin, WavyBackground } from '@components';
33
import HeroText from './HeroText';
4+
import { zIndices } from 'src/components/Theme/fonts';
45

56
const Contents = () => {
67
return (
@@ -17,7 +18,14 @@ const Contents = () => {
1718
bg={'black'}
1819
color={'white'}
1920
>
20-
<HeroText />
21+
<WavyBackground
22+
style={{
23+
position: 'absolute',
24+
zIndices: -1,
25+
}}
26+
>
27+
<HeroText />
28+
</WavyBackground>
2129
<HStack>
2230
<Card
2331
centerText="Hourcoding"

0 commit comments

Comments
 (0)