Skip to content

Commit 605d68d

Browse files
ar1603ar1603
committed
feat(): Adding the robot icon and footer
1 parent de78950 commit 605d68d

11 files changed

Lines changed: 646 additions & 95 deletions

File tree

‎src/assets/icons/Common/Robot.tsx‎

Lines changed: 482 additions & 0 deletions
Large diffs are not rendered by default.

‎src/assets/icons/Common/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export { SearchIcon } from './Search';
22
export { ThreeDIcon } from './3D';
33
export { TwoDIcon } from './2D';
44
export { default as ArrowIcon } from './ArrowIcon';
5+
export { default as RobotIcon } from './Robot';
56
export { default as LinkedInIcon } from './LinkedInIcon';
67
export { default as GithubIcon } from './GithubIcon';
78
export { default as MediumIcon } from './MediumIcon';

‎src/components/Cursor/Cursor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const FollowCursor = () => {
3636
style={{
3737
x: top === 0 ? x : left,
3838
y: top === 0 ? y : top,
39-
backgroundColor: '#fff',
39+
backgroundColor: '#FFFFFFC5',
4040
mixBlendMode: 'difference',
4141
zIndex: 999,
4242
position: 'fixed',

‎src/components/Tooltip/Tooltip.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import {
2+
AnimatePresence,
3+
motion,
4+
useMotionValue,
5+
useSpring,
6+
useTransform,
7+
} from 'framer-motion';
8+
9+
const ToolTip = ({
10+
children,
11+
tooltipComponent,
12+
}: {
13+
children: React.ReactNode;
14+
tooltipComponent: React.ReactNode;
15+
}) => {
16+
const springConfig = { stiffness: 100, damping: 5 };
17+
const x = useMotionValue(0); // going to set this value on mouse move
18+
19+
const rotate = useSpring(
20+
useTransform(x, [-100, 100], [-45, 45]),
21+
springConfig,
22+
);
23+
// translate the tooltip
24+
const translateX = useSpring(
25+
useTransform(x, [-100, 100], [-50, 50]),
26+
springConfig,
27+
);
28+
const handleMouseMove = (event: any) => {
29+
const halfWidth = event.target.offsetWidth / 4;
30+
x.set(event.nativeEvent.offsetX - halfWidth); // set the x value, which is then used in transform and rotate
31+
};
32+
33+
return (
34+
<div className="-mr-4 relative group">
35+
<AnimatePresence mode="popLayout">
36+
<motion.div
37+
initial={{ opacity: 0, y: 20, scale: 0.6 }}
38+
animate={{
39+
opacity: 1,
40+
y: 0,
41+
scale: 1,
42+
transition: {
43+
type: 'spring',
44+
stiffness: 260,
45+
damping: 10,
46+
},
47+
}}
48+
exit={{ opacity: 0, y: 20, scale: 0.6 }}
49+
style={{
50+
translateX: translateX,
51+
rotate: rotate,
52+
whiteSpace: 'nowrap',
53+
}}
54+
className="absolute -top-16 -left-1/2 translate-x-1/2 flex text-xs flex-col items-center justify-center rounded-md bg-black z-50 shadow-xl px-4 py-2"
55+
>
56+
<div className="absolute inset-x-10 z-30 w-[20%] -bottom-px bg-gradient-to-r from-transparent via-emerald-500 to-transparent h-px " />
57+
<div className="absolute left-10 w-[40%] z-30 -bottom-px bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px " />
58+
<div>{tooltipComponent}</div>
59+
</motion.div>
60+
</AnimatePresence>
61+
<div onMouseMove={handleMouseMove}>{children}</div>
62+
</div>
63+
);
64+
};
65+
66+
export default ToolTip;

‎src/components/Tooltip/index.ts‎

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

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@ export * from './Lights';
55
export * from './MeteorEffect';
66
export * from './Theme';
77
export * from './TitleBox';
8+
export * from './Tooltip';
89
export * from './3dPin';
910
export * from './TypeWriterText';

‎src/screens/mainFlow/MainScreen.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ const MainScreen = () => {
2121
>
2222
<MeteorsEffect number={30} />
2323
<RobotScene type={characterType} />
24-
<Lights />
25-
<NavigationBar
24+
{/* <Lights /> */}
25+
<NavigationBar />
26+
<SocialNavigation
2627
handleCharacterClick={(type: 'adam' | 'lieutenant') => {
2728
setCharacterType(type);
2829
}}
2930
/>
30-
<SocialNavigation />
3131
<Contents />
3232
<Footer />
3333
</TitleBoxContainer>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Box, Text } from '@chakra-ui/react';
2+
import { HoverBorderGradient } from '@components';
23
import { Link } from 'react-router-dom';
34

45
const FooterEndText = () => (
@@ -14,17 +15,18 @@ const FooterEndText = () => (
1415
const Footer = () => {
1516
return (
1617
<Box
17-
display={'flex'}
18-
bottom={0}
18+
display={'absolute'}
1919
flexDirection={'column'}
20-
alignItems={'center'}
21-
justifyContent={'center'}
2220
width={'100%'}
21+
height={'220px'}
22+
overflowY={'hidden'}
2323
p={2}
2424
bg={'black'}
2525
color={'white'}
2626
>
27-
<FooterEndText />
27+
<HoverBorderGradient>
28+
<FooterEndText />
29+
</HoverBorderGradient>
2830
</Box>
2931
);
3032
};

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

Lines changed: 2 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,7 @@
1-
import {
2-
Button,
3-
HStack,
4-
Menu,
5-
MenuButton,
6-
MenuItem,
7-
MenuList,
8-
Text,
9-
} from '@chakra-ui/react';
1+
import { HStack } from '@chakra-ui/react';
102
import { LinkButton } from '@components';
113

12-
const NavigationBar = ({
13-
handleCharacterClick: handlerCharacterClick,
14-
}: {
15-
handleCharacterClick: (type: 'adam' | 'lieutenant') => void;
16-
}) => {
4+
const NavigationBar = () => {
175
return (
186
<HStack
197
position={'fixed'}
@@ -52,36 +40,6 @@ const NavigationBar = ({
5240
fontSize={'xl'}
5341
animationOnHover
5442
/>
55-
<Menu>
56-
<MenuButton>
57-
<LinkButton
58-
key={'more'}
59-
text={'Character'}
60-
href={'#more'}
61-
fontSize={'xl'}
62-
withUnderline
63-
/>
64-
</MenuButton>
65-
<MenuList
66-
style={{
67-
backgroundColor: 'transparent',
68-
color: 'violet',
69-
padding: '0px',
70-
boxShadow: '0px 0px 20px 8px violet',
71-
}}
72-
>
73-
<MenuItem onClick={() => handlerCharacterClick('adam')}>
74-
<Text key={'adam'} fontSize={'xl'}>
75-
Adam
76-
</Text>
77-
</MenuItem>
78-
<MenuItem onClick={() => handlerCharacterClick('lieutenant')}>
79-
<Text key={'Lieutenant'} fontSize={'xl'}>
80-
Lieutenant
81-
</Text>
82-
</MenuItem>
83-
</MenuList>
84-
</Menu>
8543
</HStack>
8644
</HStack>
8745
);

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

Lines changed: 82 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,21 @@ import {
33
InstagramIcon,
44
LinkedInIcon,
55
MediumIcon,
6+
RobotIcon,
67
SunIcon,
78
} from '@assets';
8-
import { IconButton, transition, VStack } from '@chakra-ui/react';
9+
import {
10+
Box,
11+
IconButton,
12+
Menu,
13+
MenuButton,
14+
MenuItem,
15+
MenuList,
16+
Text,
17+
VStack,
18+
} from '@chakra-ui/react';
919
import { useCursor } from '@components';
10-
import { useRef } from 'react';
20+
import { RefObject, useRef } from 'react';
1121

1222
const IconProps = {
1323
variant: 'ghost',
@@ -19,43 +29,82 @@ const IconProps = {
1929
},
2030
};
2131

22-
const SocialNavigation = () => {
32+
const SocialNavigation = ({
33+
handleCharacterClick: handlerCharacterClick,
34+
}: {
35+
handleCharacterClick: (type: 'adam' | 'lieutenant') => void;
36+
}) => {
2337
const ref = useRef<HTMLDivElement>(null);
38+
const menuButtonRef = useRef<HTMLDivElement>(null);
2439
const { setCursorInsets } = useCursor();
25-
const onMouseEnter = () => {
26-
const { width, height, top, left } =
27-
ref.current?.getBoundingClientRect() || {
28-
width: 56,
29-
height: 56,
30-
top: 0,
31-
left: 0,
32-
};
33-
setCursorInsets(undefined);
34-
setTimeout(() => {
35-
setCursorInsets({ height, width, top, left, borderRadius: '30px' });
36-
}, 0);
37-
};
40+
const onMouseEnter =
41+
(ref: RefObject<HTMLDivElement>, radius: string) => () => {
42+
const { width, height, top, left } =
43+
ref.current?.getBoundingClientRect() || {
44+
width: 56,
45+
height: 56,
46+
top: 0,
47+
left: 0,
48+
};
49+
setCursorInsets(undefined);
50+
setTimeout(() => {
51+
setCursorInsets({ height, width, top, left, borderRadius: radius });
52+
}, 0);
53+
};
3854
const onMouseLeave = () => {
3955
setCursorInsets(undefined);
4056
};
4157
return (
42-
<VStack
43-
ref={ref}
44-
position={'fixed'}
45-
bottom={20}
46-
right={10}
47-
px={2}
48-
py={5}
49-
border={'1px solid white'}
50-
borderRadius={'30px'}
51-
outline={'1px solid violet'}
52-
onMouseEnter={onMouseEnter}
53-
onMouseLeave={onMouseLeave}
54-
>
55-
<IconButton aria-label="" icon={<GithubIcon />} {...IconProps} />
56-
<IconButton icon={<LinkedInIcon />} aria-label="" {...IconProps} />
57-
<IconButton icon={<MediumIcon />} aria-label="" {...IconProps} />
58-
<IconButton icon={<InstagramIcon />} aria-label="" {...IconProps} />
58+
<VStack position={'fixed'} bottom={20} right={10} rowGap={10}>
59+
<Box
60+
ref={menuButtonRef}
61+
onMouseEnter={onMouseEnter(menuButtonRef, '6px')}
62+
onMouseLeave={onMouseLeave}
63+
>
64+
<Menu isLazy placement="top-start" closeOnBlur closeOnSelect={true}>
65+
<MenuButton>
66+
<IconButton
67+
variant={'outline'}
68+
aria-label="Options"
69+
icon={<RobotIcon height={'2em'} width={'2em'} />}
70+
/>
71+
</MenuButton>
72+
<MenuList
73+
style={{
74+
backgroundColor: 'transparent',
75+
color: 'violet',
76+
padding: '0px',
77+
boxShadow: '0px 0px 20px 8px violet',
78+
}}
79+
>
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>
90+
</MenuList>
91+
</Menu>
92+
</Box>
93+
<VStack
94+
ref={ref}
95+
px={2}
96+
py={5}
97+
border={'1px solid white'}
98+
borderRadius={'30px'}
99+
outline={'1px solid violet'}
100+
onMouseEnter={onMouseEnter(ref, '30px')}
101+
onMouseLeave={onMouseLeave}
102+
>
103+
<IconButton aria-label="" icon={<GithubIcon />} {...IconProps} />
104+
<IconButton icon={<LinkedInIcon />} aria-label="" {...IconProps} />
105+
<IconButton icon={<MediumIcon />} aria-label="" {...IconProps} />
106+
<IconButton icon={<InstagramIcon />} aria-label="" {...IconProps} />
107+
</VStack>
59108
</VStack>
60109
);
61110
};

0 commit comments

Comments
 (0)