Skip to content

Commit 6c88475

Browse files
ar1603ar1603
committed
feat(): Adding the contact and about section
1 parent 522146d commit 6c88475

27 files changed

Lines changed: 596 additions & 108 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"i18next-browser-languagedetector": "^7.2.1",
4848
"immer": "^10.0.4",
4949
"lodash": "^4.17.21",
50+
"matter-js": "^0.20.0",
5051
"react": "^18.2.0",
5152
"react-dom": "^18.2.0",
5253
"react-helmet-async": "^2.0.5",
@@ -94,6 +95,7 @@
9495
"@testing-library/react": "^13.4.0",
9596
"@testing-library/user-event": "^13.5.0",
9697
"@types/jest": "^29.5.12",
98+
"@types/matter-js": "^0.19.8",
9799
"@types/react-test-renderer": "^18.3.0",
98100
"@types/three": "^0.172.0",
99101
"babel-jest": "^29.7.0",

‎src/assets/icons/Chips/Css.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { SVGProps } from 'react';
2+
3+
export function Css(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 128 128"
8+
width="1em"
9+
height="1em"
10+
{...props}
11+
>
12+
<path
13+
fill="#1572B6"
14+
d="M18.814 114.123L8.76 1.352h110.48l-10.064 112.754l-45.243 12.543l-45.119-12.526z"
15+
></path>
16+
<path
17+
fill="#33A9DC"
18+
d="m64.001 117.062l36.559-10.136l8.601-96.354h-45.16v106.49z"
19+
></path>
20+
<path
21+
fill="#fff"
22+
d="M64.001 51.429h18.302l1.264-14.163H64.001V23.435h34.682l-.332 3.711l-3.4 38.114h-30.95V51.429z"
23+
></path>
24+
<path
25+
fill="#EBEBEB"
26+
d="m64.083 87.349l-.061.018l-15.403-4.159l-.985-11.031H33.752l1.937 21.717l28.331 7.863l.063-.018v-14.39z"
27+
></path>
28+
<path
29+
fill="#fff"
30+
d="m81.127 64.675l-1.666 18.522l-15.426 4.164v14.39l28.354-7.858l.208-2.337l2.406-26.881H81.127z"
31+
></path>
32+
<path
33+
fill="#EBEBEB"
34+
d="M64.048 23.435v13.831H30.64l-.277-3.108l-.63-7.012l-.331-3.711h34.646zm-.047 27.996v13.831H48.792l-.277-3.108l-.631-7.012l-.33-3.711h16.447z"
35+
></path>
36+
</svg>
37+
);
38+
}

‎src/assets/icons/Chips/Git.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { SVGProps } from 'react';
2+
3+
export function Git(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 128 128"
8+
width="1em"
9+
height="1em"
10+
{...props}
11+
>
12+
<path
13+
fill="#F34F29"
14+
d="M124.737 58.378L69.621 3.264c-3.172-3.174-8.32-3.174-11.497 0L46.68 14.71l14.518 14.518c3.375-1.139 7.243-.375 9.932 2.314c2.703 2.706 3.461 6.607 2.294 9.993l13.992 13.993c3.385-1.167 7.292-.413 9.994 2.295c3.78 3.777 3.78 9.9 0 13.679a9.673 9.673 0 0 1-13.683 0a9.677 9.677 0 0 1-2.105-10.521L68.574 47.933l-.002 34.341a9.708 9.708 0 0 1 2.559 1.828c3.778 3.777 3.778 9.898 0 13.683c-3.779 3.777-9.904 3.777-13.679 0c-3.778-3.784-3.778-9.905 0-13.683a9.65 9.65 0 0 1 3.167-2.11V47.333a9.581 9.581 0 0 1-3.167-2.111c-2.862-2.86-3.551-7.06-2.083-10.576L41.056 20.333L3.264 58.123a8.133 8.133 0 0 0 0 11.5l55.117 55.114c3.174 3.174 8.32 3.174 11.499 0l54.858-54.858a8.135 8.135 0 0 0-.001-11.501z"
15+
></path>
16+
</svg>
17+
);
18+
}

‎src/assets/icons/Chips/Html.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { SVGProps } from 'react';
2+
3+
export const Html = (props: SVGProps<SVGSVGElement>) => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 128 128"
8+
width="1em"
9+
height="1em"
10+
{...props}
11+
>
12+
<path
13+
fill="#E44D26"
14+
d="M19.037 113.876L9.032 1.661h109.936l-10.016 112.198l-45.019 12.48z"
15+
></path>
16+
<path fill="#F16529" d="m64 116.8l36.378-10.086l8.559-95.878H64z"></path>
17+
<path
18+
fill="#EBEBEB"
19+
d="M64 52.455H45.788L44.53 38.361H64V24.599H29.489l.33 3.692l3.382 37.927H64zm0 35.743l-.061.017l-15.327-4.14l-.979-10.975H33.816l1.928 21.609l28.193 7.826l.063-.017z"
20+
></path>
21+
<path
22+
fill="#fff"
23+
d="M63.952 52.455v13.763h16.947l-1.597 17.849l-15.35 4.143v14.319l28.215-7.82l.207-2.325l3.234-36.233l.335-3.696h-3.708zm0-27.856v13.762h33.244l.276-3.092l.628-6.978l.329-3.692z"
24+
></path>
25+
</svg>
26+
);
27+
};

‎src/assets/icons/Chips/Jest.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { SVGProps } from 'react';
2+
3+
export const Jest = (props: SVGProps<SVGSVGElement>) => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 256 256"
8+
width="1em"
9+
height="1em"
10+
{...props}
11+
>
12+
<g fill="none">
13+
<rect width="256" height="256" fill="#99424F" rx="60"></rect>
14+
<path
15+
fill="#fff"
16+
d="M213.353 126.495c0-12.045-8.28-22.178-19.397-25.073L218.854 28H95.461l24.957 73.654c-10.771 3.127-18.703 13.086-18.703 24.898c0 8.686 4.342 16.387 10.943 21.135c-2.605 3.706-5.616 7.123-9.033 10.365c-6.427 6.022-13.549 10.654-21.25 13.723c-6.949-4.69-9.96-12.97-7.238-20.382c10.596-3.242 18.297-13.144 18.297-24.783c0-14.302-11.638-25.883-25.883-25.883c-14.302 0-25.94 11.639-25.94 25.941c0 7.064 2.895 13.55 7.527 18.182c-.405.811-.81 1.621-1.216 2.49c-3.88 7.991-8.28 17.024-9.96 27.157c-3.358 20.266 2.143 36.537 15.403 45.744c7.47 5.153 15.692 7.759 24.551 7.759c15.229 0 30.689-7.643 45.628-15.055c10.655-5.269 21.656-10.77 32.484-13.434c3.996-.984 8.165-1.563 12.566-2.2c8.917-1.274 18.124-2.606 26.404-7.412c9.67-5.616 16.271-14.997 18.182-25.767c1.447-8.28 0-16.618-3.706-23.914c2.49-3.996 3.879-8.686 3.879-13.723m-11.291 0c0 8.048-6.543 14.591-14.592 14.591s-14.591-6.543-14.591-14.591c0-2.606.694-5.096 1.91-7.238a16.6 16.6 0 0 1 1.622-2.317c.579-.694 1.274-1.331 2.026-1.91l.058-.058c.463-.348.985-.695 1.506-1.043c0 0 .058 0 .058-.058c.231-.115.463-.289.694-.405c.058 0 .116-.058.174-.058c.232-.116.521-.231.811-.347c.289-.116.579-.232.81-.348c.058 0 .116-.058.174-.058c.232-.057.463-.173.695-.231c.058 0 .174-.058.232-.058c.289-.058.521-.116.81-.174h.058l.869-.173c.058 0 .173 0 .231-.058c.232 0 .464-.058.695-.058h.29c.289 0 .579-.058.926-.058h.753c.232 0 .405 0 .637.058h.116c.463.058.926.116 1.389.231c6.601 1.39 11.639 7.296 11.639 14.361m-90.446-86.914h91.083l-20.903 61.667c-.869.174-1.737.464-2.606.753l-22.003-44.875l-22.062 44.586c-.868-.29-1.795-.464-2.721-.637zm41.401 81.876c-1.1-5.443-3.879-10.307-7.817-13.897l11.987-24.204l12.101 24.725c-3.59 3.59-6.195 8.165-7.238 13.376zm-29.009-9.149c.289-.058.521-.116.81-.174h.174c.232-.058.463-.058.695-.115h.231c.232 0 .406-.058.637-.058h2.259c.231 0 .405.058.579.058c.116 0 .173 0 .289.057c.232.058.406.058.637.116c.058 0 .116 0 .232.058c.289.058.579.116.81.174h.058c.232.058.464.116.695.231c.058 0 .116.058.232.058c.174.058.405.116.579.232c.058 0 .116.058.174.058c.231.116.463.174.694.289h.058c.29.116.521.232.753.406h.058c.232.116.463.289.695.405c.058 0 .058.058.116.058c.231.116.405.289.637.405l.057.058c.695.521 1.332 1.1 1.969 1.679l.058.058c.579.637 1.158 1.332 1.621 2.085a14.55 14.55 0 0 1 2.374 7.991c0 8.048-6.543 14.591-14.591 14.591c-8.049 0-14.592-6.543-14.592-14.591c-.058-6.775 4.632-12.508 11.002-14.129m-56.978-.405c8.049 0 14.592 6.543 14.592 14.592s-6.543 14.591-14.592 14.591s-14.592-6.543-14.592-14.591c0-8.049 6.544-14.592 14.592-14.592m134.685 50.202c-1.274 7.412-5.849 13.897-12.566 17.777c-6.311 3.648-14.07 4.806-22.235 5.964c-4.458.637-9.148 1.332-13.665 2.432c-12.044 2.953-23.625 8.743-34.858 14.302c-14.36 7.122-27.91 13.839-40.475 13.839c-6.543 0-12.391-1.853-17.95-5.732c-12.739-8.802-12.102-25.304-10.596-34.337c1.39-8.454 5.269-16.387 8.975-23.972c.231-.464.405-.869.637-1.332a22.5 22.5 0 0 0 3.995 1.042c-2.2 12.276 4.053 24.957 16.213 31.21l2.2 1.158l2.374-.868c10.134-3.59 19.514-9.439 27.794-17.256c4.691-4.4 8.686-9.148 12.044-14.302c1.332.232 2.664.29 3.996.29c12.044 0 22.177-8.281 25.072-19.398h9.728c2.895 11.175 13.028 19.398 25.072 19.398c4.806 0 9.265-1.332 13.087-3.59c1.505 4.342 1.968 8.859 1.158 13.375"
17+
></path>
18+
</g>
19+
</svg>
20+
);
21+
};

‎src/assets/icons/Chips/Tanstack.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@ import { SVGProps } from 'react';
22

33
export function Tanstack(props: SVGProps<SVGSVGElement>) {
44
return (
5-
<svg xmlns="http://www.w3.org/2000/svg" width={24} height={22} {...props}>
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width={24}
8+
height={22}
9+
viewBox="0 0 24 22"
10+
{...props}
11+
>
612
<path
713
d="m14.813 13.629-.461.816a.782.782 0 0 1-.676.399h-3.528a.775.775 0 0 1-.671-.399l-.461-.816Zm1.285-2.281-.809 1.437H8.54l-.812-1.437Zm-.782-2.235.786 1.387H7.727l.785-1.387Zm-1.64-2.11c.277 0 .535.15.676.395l.488.872H8.988l.489-.872a.772.772 0 0 1 .671-.394Zm0 0"
814
style={{

‎src/assets/icons/Chips/Zustand.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
export function Zustand(props: React.SVGProps<SVGSVGElement>) {
22
return (
3-
<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} {...props}>
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width={24}
6+
height={24}
7+
viewBox="0 0 24 24"
8+
{...props}
9+
>
410
<path
511
d="M18.512.914c.39.203.687.508.894.914-.039-.016-.047.004-.027.059.105.308.172.629.191.96 0 .012-.004.036-.008.071a.111.111 0 0 0 .012.074.091.091 0 0 1-.012.09c-.046.055-.062.11-.05.168.02.066.031.137.043.203.008.05-.016.067-.078.04l-.106-.048c-.086-.023-.129-.074-.129-.152.004-.117.016-.238.035-.363a.168.168 0 0 0 0-.063 9.712 9.712 0 0 0-.187-.828.386.386 0 0 0-.117-.187.292.292 0 0 0-.082-.153.168.168 0 0 0-.07-.094.198.198 0 0 0-.153-.128.135.135 0 0 0-.047-.047l-.176-.227a.108.108 0 0 0-.035-.027 1.902 1.902 0 0 0-.726-.063 1.52 1.52 0 0 0-.579.125 6.458 6.458 0 0 0-.515.278c-.266.16-.496.355-.7.593l-.433.434a1.27 1.27 0 0 0-.344.36c-.011.019-.027.058-.05.117l-.086.25a1.21 1.21 0 0 0-.125.343c-.012.051-.036.059-.075.02-.027-.028-.066-.04-.117-.035h-.012c.04-.02.067-.051.079-.098.011-.063.023-.125.039-.184a.433.433 0 0 1 .058-.144.586.586 0 0 0 .059-.149.68.68 0 0 1 .183-.332.088.088 0 0 1 .043-.02c.02-.003.028-.019.02-.046-.004-.016-.004-.031.004-.04.137-.222.297-.429.48-.612.188-.168.38-.34.567-.512.156-.086.308-.18.46-.274.204-.125.36-.207.47-.25a2.23 2.23 0 0 1 .988-.14c.148.012.285.05.414.117Zm0 0"
612
style={{

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
export { ChakraUI } from './ChakraUI';
2+
export { Css } from './Css';
23
export { Python } from './Python';
34
export { Express } from './Express';
4-
export { Typescript } from './Typescript';
5+
export { Html } from './Html';
56
export { I18next } from './I18next';
7+
export { Git } from './Git';
8+
export { Jest } from './Jest';
69
export { Mysql } from './Mysql';
710
export { React } from './React';
811
export { NodeJs } from './NodeJs';
912
export { Supabase } from './Supabase';
13+
export { Typescript } from './Typescript';
1014
export { Tanstack } from './Tanstack';
1115
export { Zustand } from './Zustand';

‎src/components/Chip/Chip.tsx‎

Lines changed: 78 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import { HStack, Text } from '@chakra-ui/react';
2-
import { ChipProps, Language } from './types';
2+
import { ChipProps, Skills } from './types';
33
import {
44
ChakraUI,
5+
Css,
56
Express,
7+
Git,
8+
Html,
69
I18next,
10+
Jest,
711
Mysql,
812
NodeJs,
913
Python,
@@ -13,20 +17,79 @@ import {
1317
Typescript,
1418
Zustand,
1519
} from '@assets/icons/Chips';
20+
import { SVGProps } from 'react';
1621

17-
const ChipMap: Record<Language, { title: string; Icon: React.ReactNode }> = {
18-
[Language.python]: { title: 'Python', Icon: <Python /> },
19-
[Language.typescript]: { title: 'Typescript', Icon: <Typescript /> },
20-
[Language.chakra]: { title: 'Chakra UI', Icon: <ChakraUI /> },
21-
[Language.react]: { title: 'React', Icon: <React /> },
22-
[Language.node]: { title: 'NodeJs', Icon: <NodeJs /> },
23-
[Language.express]: { title: 'Express', Icon: <Express /> },
24-
[Language.mysql]: { title: 'MySql', Icon: <Mysql /> },
25-
[Language.i18n]: { title: 'I18next', Icon: <I18next /> },
26-
[Language.supabase]: { title: 'Supabase', Icon: <Supabase /> },
27-
[Language.tanstack]: { title: 'Tanstack', Icon: <Tanstack /> },
28-
[Language.zustand]: { title: 'Zustand', Icon: <Zustand /> },
29-
[Language.more]: { title: 'More...', Icon: <Python /> },
22+
export const ChipMap: Record<
23+
Skills,
24+
{
25+
title: string;
26+
Icon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
27+
}
28+
> = {
29+
[Skills.python]: {
30+
title: 'Python',
31+
Icon: (props: SVGProps<SVGSVGElement>) => <Python {...props} />,
32+
},
33+
[Skills.typescript]: {
34+
title: 'Typescript',
35+
Icon: (props: SVGProps<SVGSVGElement>) => <Typescript {...props} />,
36+
},
37+
[Skills.chakra]: {
38+
title: 'Chakra UI',
39+
Icon: (props: SVGProps<SVGSVGElement>) => <ChakraUI {...props} />,
40+
},
41+
[Skills.react]: {
42+
title: 'React',
43+
Icon: (props: SVGProps<SVGSVGElement>) => <React {...props} />,
44+
},
45+
[Skills.node]: {
46+
title: 'NodeJs',
47+
Icon: (props: SVGProps<SVGSVGElement>) => <NodeJs {...props} />,
48+
},
49+
[Skills.express]: {
50+
title: 'Express',
51+
Icon: (props: SVGProps<SVGSVGElement>) => <Express {...props} />,
52+
},
53+
[Skills.mysql]: {
54+
title: 'MySql',
55+
Icon: (props: SVGProps<SVGSVGElement>) => <Mysql {...props} />,
56+
},
57+
[Skills.i18n]: {
58+
title: 'I18next',
59+
Icon: (props: SVGProps<SVGSVGElement>) => <I18next {...props} />,
60+
},
61+
[Skills.supabase]: {
62+
title: 'Supabase',
63+
Icon: (props: SVGProps<SVGSVGElement>) => <Supabase {...props} />,
64+
},
65+
[Skills.tanstack]: {
66+
title: 'Tanstack',
67+
Icon: (props: SVGProps<SVGSVGElement>) => <Tanstack {...props} />,
68+
},
69+
[Skills.zustand]: {
70+
title: 'Zustand',
71+
Icon: (props: SVGProps<SVGSVGElement>) => <Zustand {...props} />,
72+
},
73+
[Skills.git]: {
74+
title: 'Git',
75+
Icon: (props: SVGProps<SVGSVGElement>) => <Git {...props} />,
76+
},
77+
[Skills.jest]: {
78+
title: 'Jest',
79+
Icon: (props: SVGProps<SVGSVGElement>) => <Jest {...props} />,
80+
},
81+
[Skills.html]: {
82+
title: 'HTML',
83+
Icon: (props: SVGProps<SVGSVGElement>) => <Html {...props} />,
84+
},
85+
[Skills.css]: {
86+
title: 'CSS',
87+
Icon: (props: SVGProps<SVGSVGElement>) => <Css {...props} />,
88+
},
89+
[Skills.more]: {
90+
title: 'More...',
91+
Icon: (_props: SVGProps<SVGSVGElement>) => <></>,
92+
},
3093
};
3194

3295
const Chip = ({ type, size = 'md' }: ChipProps) => {
@@ -41,7 +104,7 @@ const Chip = ({ type, size = 'md' }: ChipProps) => {
41104
color="white"
42105
>
43106
<Text fontSize="sm">{ChipMap[type].title}</Text>
44-
{ChipMap[type].Icon}
107+
{ChipMap[type].Icon({})}
45108
</HStack>
46109
);
47110
};

‎src/components/Chip/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { default as Chip } from './Chip';
2-
export { Language } from './types';
2+
export { ChipMap } from './Chip';
3+
export { Skills as Language } from './types';

0 commit comments

Comments
 (0)