├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── screenshots
    ├── s1.png
    ├── s2.png
    ├── s3.png
    ├── s4.png
    └── s5.png
├── src
    ├── images
    │   └── logo.png
    ├── components
    │   ├── utils
    │   │   ├── ToolTag.js
    │   │   ├── CustomSkillTag.js
    │   │   └── FrameworkTag.js
    │   ├── Footer.js
    │   ├── Freelancer.js
    │   ├── CTA.js
    │   ├── SkillsProjects.js
    │   ├── Banner.js
    │   ├── Education.js
    │   ├── Projects.js
    │   └── Header.js
    ├── index.js
    ├── index.css
    ├── data
    │   └── skill.js
    └── App.js
├── README.md
├── .gitignore
└── package.json


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/princepatelcodes/react_chakra_portfolio/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/princepatelcodes/react_chakra_portfolio/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/princepatelcodes/react_chakra_portfolio/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/screenshots/s1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/princepatelcodes/react_chakra_portfolio/HEAD/screenshots/s1.png


--------------------------------------------------------------------------------
/screenshots/s2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/princepatelcodes/react_chakra_portfolio/HEAD/screenshots/s2.png


--------------------------------------------------------------------------------
/screenshots/s3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/princepatelcodes/react_chakra_portfolio/HEAD/screenshots/s3.png


--------------------------------------------------------------------------------
/screenshots/s4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/princepatelcodes/react_chakra_portfolio/HEAD/screenshots/s4.png


--------------------------------------------------------------------------------
/screenshots/s5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/princepatelcodes/react_chakra_portfolio/HEAD/screenshots/s5.png


--------------------------------------------------------------------------------
/src/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/princepatelcodes/react_chakra_portfolio/HEAD/src/images/logo.png


--------------------------------------------------------------------------------
/src/components/utils/ToolTag.js:
--------------------------------------------------------------------------------
1 | import { Tag } from '@chakra-ui/react'
2 | import React from 'react'
3 | 
4 | export default function ToolTag({ skill }) {
5 |     return (
6 |         <Tag colorScheme='teal' fontSize='md' px={4} py={1.5}> {skill}</Tag>
7 |     )
8 | }
9 | 


--------------------------------------------------------------------------------
/src/components/utils/CustomSkillTag.js:
--------------------------------------------------------------------------------
1 | import { Tag } from '@chakra-ui/react'
2 | import React from 'react'
3 | 
4 | export default function CustomSkillTag({ skill }) {
5 |   return (
6 |     <Tag colorScheme='purple' fontSize='md' px={4} py={1.5}> {skill}</Tag>
7 |   )
8 | }
9 | 


--------------------------------------------------------------------------------
/src/components/utils/FrameworkTag.js:
--------------------------------------------------------------------------------
1 | import { Tag } from '@chakra-ui/react'
2 | import React from 'react'
3 | 
4 | export default function FrameworkTag({ skill }) {
5 |     return (
6 |         <Tag colorScheme='blue' fontSize='md' px={4} py={1.5}> {skill}</Tag>
7 |     )
8 | }
9 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>
11 | );
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Portfolio
 2 | 
 3 | Trying to get better with chakra UI by making a portfolio kind of website with aos.
 4 | 
 5 | ## Devicons
 6 | 
 7 | Add more devicons from [here](https://www.npmjs.com/package/devicon-react-svg).
 8 | 
 9 | ## Screenshots
10 | 
11 | ![Image 1](screenshots/s1.png)
12 | ![Image 2](screenshots/s2.png)
13 | ![Image 3](screenshots/s3.png)
14 | ![Image 4](screenshots/s4.png)
15 | ![Image 5](screenshots/s5.png)
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | package.lock-json


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
 2 | 
 3 | html {
 4 |   scroll-behavior: smooth;
 5 | }
 6 | 
 7 | body {
 8 |   margin: 0;
 9 |   font-family: 'DM Sans' !important;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 |   scroll-behavior: smooth;
13 | }
14 | 
15 | code {
16 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
17 |     monospace;
18 | }


--------------------------------------------------------------------------------
/src/data/skill.js:
--------------------------------------------------------------------------------
 1 | import { DiAndroid, DiDart, DiNodejs, DiReact } from "react-icons/di";
 2 | 
 3 | const data = [
 4 |     { icon: DiAndroid, title: "Android", },
 5 |     { icon: DiDart, title: "Dart", },
 6 |     { icon: DiNodejs, title: "Node ", },
 7 |     { icon: DiReact, title: "React Js", },
 8 |     { icon: DiAndroid, title: "Android", },
 9 |     { icon: DiDart, title: "Dart", },
10 |     { icon: DiNodejs, title: "Node ", },
11 |     { icon: DiReact, title: "React Js", },
12 | ];
13 | 
14 | export default data;
15 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="A Simple portfolio created using react js"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14 |     <title>Prince Patel | Portfolio</title>
15 |   </head>
16 |   <body>
17 |     <noscript>You need to enable JavaScript to run this app.</noscript>
18 |     <div id="root"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react_charka_portfolio",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@chakra-ui/icons": "^2.0.4",
 7 |     "@chakra-ui/react": "^2.2.4",
 8 |     "@emotion/react": "^11.9.3",
 9 |     "@emotion/styled": "^11.9.3",
10 |     "@testing-library/jest-dom": "^5.16.4",
11 |     "@testing-library/react": "^13.3.0",
12 |     "@testing-library/user-event": "^13.5.0",
13 |     "aos": "^2.3.4",
14 |     "devicon-react-svg": "^0.2.3",
15 |     "framer-motion": "^6.5.1",
16 |     "react": "^18.2.0",
17 |     "react-dom": "^18.2.0",
18 |     "react-icons": "^4.4.0",
19 |     "react-scripts": "5.0.1",
20 |     "web-vitals": "^2.1.4"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import { ButtonGroup, Container, IconButton, Stack, Text } from '@chakra-ui/react'
 2 | import * as React from 'react'
 3 | import { FaFacebook,   FaInstagram,   FaTwitter } from 'react-icons/fa'
 4 | 
 5 | 
 6 | export const Footer = () => (
 7 |   <Container maxW={'100%'} as="footer" role="contentinfo" py={{ base: '8', md: '8' }} bg='white' color={'primary.800'}>
 8 |     <Stack justify="center" spacing={{ base: '4', md: '5' }}>
 9 |       <Stack justify="center" direction="row" align="center">
10 |         <ButtonGroup justifyContent={'center'} alignItems={'center'} variant='ghost' spacing={1.9}>
11 |           <IconButton _hover={{ color: 'primary.700', bgColor: 'primary.50', border: '1px solid', borderColor: 'primary.700' }}><FaFacebook size={24} /></IconButton>
12 |           <IconButton _hover={{ color: 'primary.700', bgColor: 'primary.50', border: '1px solid', borderColor: 'primary.700' }}><FaInstagram size={24} /></IconButton>
13 |           <IconButton _hover={{ color: 'primary.700', bgColor: 'primary.50', border: '1px solid', borderColor: 'primary.700' }}><FaTwitter size={24} /></IconButton>
14 |         </ButtonGroup>
15 |       </Stack>
16 |       <Text textAlign={'center'} fontSize='20px' fontWeight={'bold'} color='gray.600'>Prince Patel</Text>
17 |     </Stack>
18 |   </Container>
19 | )


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { useEffect } from 'react';
 3 | import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 4 | import Header from './components/Header';
 5 | import Aos from 'aos';
 6 | import 'aos/dist/aos.css';
 7 | import CTA from './components/CTA';
 8 | import { Footer } from './components/Footer';
 9 | import Banner from './components/Banner';
10 | import SkillsProjects from './components/SkillsProjects';
11 | 
12 | 
13 | function App() {
14 |   const theme = extendTheme({
15 |     styles: {
16 |       global: {
17 |         // styles for the `body`
18 |         body: {
19 |           bg: '#dbd6e7',
20 |           color: 'white',
21 |         },
22 |         // styles for the `a`
23 |         a: {
24 |           color: 'teal.500',
25 |           _hover: {
26 |             textDecoration: 'underline',
27 |           },
28 |         },
29 |       },
30 |     },
31 |     colors: {
32 |        primary : {
33 |         "50": "#f5f7fe",
34 |         "100": "#d9dffa",
35 |         "200": "#b8c4f5",
36 |         "300": "#8fa2ef",
37 |         "400": "#788fec",
38 |         "500": "#5874e7",
39 |         "600": "#3a5ce3",
40 |         "700": "#163ede",
41 |         "800": "#002ad2",
42 |         "900": "#001f9b"
43 |       }
44 |     },
45 |     fonts: {
46 |       heading: `'DM Sans', sans-serif`,
47 |       body: `'DM Sans', sans-serif`,
48 |     },
49 |   })
50 | 
51 |   useEffect(() => {
52 |     Aos.init({
53 |       duration: 300,
54 |       once: true,
55 |     });
56 |   }, []);
57 | 
58 |   return (
59 |     <ChakraProvider theme={theme}>
60 |       <Header />
61 |       <Banner />
62 |       <SkillsProjects />
63 |       <CTA />
64 |       <Footer />
65 |     </ChakraProvider>
66 |   );
67 | }
68 | 
69 | export default App;
70 | 


--------------------------------------------------------------------------------
/src/components/Freelancer.js:
--------------------------------------------------------------------------------
 1 | import { Box, Button, Container, Heading, Stack, Text, useBreakpointValue } from '@chakra-ui/react'
 2 | import * as React from 'react'
 3 | 
 4 | export default function Freelancer() {
 5 |     return (
 6 | 
 7 |         <Box id='freelance' as="section" >
 8 |             <Container py={{ base: '16', md: '24' }}>
 9 |                 <Stack spacing={{ base: '8', md: '10' }}>
10 |                     <Stack spacing={{ base: '4', md: '5' }} align="center">
11 |                         <Heading size={useBreakpointValue({ base: 'sm', md: 'lg' })} color={'primary.800'}>Looking For Freelancer ?</Heading>
12 |                         <Text color="gray.500" maxW="2xl" textAlign="center" fontSize="xl">
13 |                             I have spent enough time with simple and complex full fleged projects. I have created apps, website, scripts and have also coded and deployed admin panels and database/backend on cloud.I love to take on new challenges and work on experimental projects.
14 |                             <br/>
15 |                             Let us discuss more about your work.
16 |                         </Text>
17 |                     </Stack>
18 |                     <Stack spacing="3" direction={{ base: 'column', sm: 'row' }} justify="center">
19 | 
20 |                         <Button variant={'primary'} size='lg' bg={'primary.700'}
21 |                             href={'#'}
22 |                             _hover={{
23 |                                 bg: 'primary.900',
24 |                             }}>
25 |                             Send an Email                        
26 |                             </Button>
27 |                     </Stack>
28 |                 </Stack>
29 |             </Container>
30 |         </Box>
31 |     );
32 | }


--------------------------------------------------------------------------------
/src/components/CTA.js:
--------------------------------------------------------------------------------
 1 | import { Button, Container, Heading, Stack, Text, useBreakpointValue } from '@chakra-ui/react'
 2 | import * as React from 'react'
 3 | 
 4 | export default function CTA() {
 5 |     return (
 6 | 
 7 |         <Container id='freelance' as="section" maxW='7xl' py={{ base: '10', md: '12' }} my={{ base: '10', md: '12' }} bg='white' borderRadius='20' alignItems='center'>
 8 |             <Stack spacing={{ base: '8', md: '10' }}>
 9 |                 <Stack spacing={{ base: '4', md: '5' }} align="center">
10 |                     <Heading size={useBreakpointValue({ base: 'lg', md: 'xl' , lg : '2xl' })} fontWeight='800' color={'primary.800'}>Looking For Freelancer ?</Heading>
11 |                     <Text color="gray.700" maxW="2xl" textAlign="center" fontSize="md">
12 |                         I have spent enough time with simple and complex full fleged projects. I have created apps, website, scripts and have also coded and deployed admin panels and database/backend on cloud.I love to take on new challenges and work on experimental projects.
13 |                         <br />
14 |                         Let us discuss more about your work.
15 |                     </Text>
16 |                 </Stack>
17 |                 <Stack spacing="3" direction={{ base: 'column', sm: 'row' }} justify="center">
18 |                     <Button as='a' variant={'ghost'} size='lg' bg={'primary.800'} color='white'
19 |                         href={'mailto:iprincepatel22@gmail.com'}
20 |                         transition='all ease-in 200ms'
21 |                         _hover={{
22 |                             bg: 'primary.900',
23 |                             textDecoration: 'none',
24 |                             px: '10',
25 |                             transition: 'all ease-in 200ms'
26 |                         }}>
27 |                         Send an Email
28 |                     </Button>
29 |                 </Stack>
30 |             </Stack>
31 |         </Container>
32 | 
33 |     );
34 | }


--------------------------------------------------------------------------------
/src/components/SkillsProjects.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Box, Container, Flex, Heading, Text, Wrap } from '@chakra-ui/react'
 3 | import Projects from './Projects'
 4 | import CustomSkillTag from './utils/CustomSkillTag'
 5 | import FrameworkTag from './utils/FrameworkTag'
 6 | import ToolTag from './utils/ToolTag'
 7 | 
 8 | export default function SkillsProjects() {
 9 |     return (
10 |         <Container maxW={'7xl'} alignItems='center' my={5}>
11 | 
12 |             <Flex width={'100%'} maxW={['full', 'full', '7xl']} justifyContent='center' alignItems={'center'} flexDir={['column', 'column', 'row', 'row']}>
13 | 
14 |                 <Box me={['0', '0', '8']} flexDir={'column'} justifyContent='space-between' bgColor={'white'} color='black' maxHeight='4xl' scrollBehavior={'smooth'} minHeight={'4xl'} borderRadius='3xl' p='10' mb={10}>
15 |                     <Heading>
16 |                         Projects
17 |                     </Heading>
18 |                     <Projects />
19 |                 </Box>
20 | 
21 | 
22 |                 <Flex id='skills' width={['md', 'md', 'md']} flexDir={'column'} justifyContent='start' bgColor={'white'} color='black' maxHeight='2xl' minHeight={'4xl'} borderRadius='3xl' p='10' mb={10}>
23 | 
24 |                     <Heading textAlign={'start'}>Skills</Heading>
25 | 
26 |                     <Text fontSize={'sm'} textAlign='start'>
27 |                         My skills, which I constantly keep improving.
28 |                     </Text>
29 | 
30 |                     <Box my={5}>
31 |                         <Heading textAlign={'start'} as='h4' fontSize={'lg'}> Programming Languages</Heading>
32 | 
33 |                         <Box orientation='horizontal' bgColor='gray.300' my={3} height={0.2} />
34 |                         {/* Icons  */}
35 | 
36 |                         <Wrap>
37 |                             <CustomSkillTag skill={'Python'} />
38 |                             <CustomSkillTag skill={'Javascript'} />
39 |                             <CustomSkillTag skill={'Dart'} />
40 |                             <CustomSkillTag skill={'HTML'} />
41 |                             <CustomSkillTag skill={'CSS'} />
42 |                         </Wrap>
43 |                     </Box>
44 |                     <Box my={2}>
45 |                         <Heading textAlign={'start'} as='h4' fontSize={'lg'}> Frameworks</Heading>
46 |                         <Box orientation='horizontal' bgColor='gray.300' my={3} height={0.2} />
47 |                         <Wrap>
48 |                             <FrameworkTag skill={'Express JS'} />
49 |                             <FrameworkTag skill={'React JS'} />
50 |                             <FrameworkTag skill={'Flutter'} />
51 |                             <FrameworkTag skill={'Next JS'} />
52 |                             <FrameworkTag skill={'Django'} />
53 |                             <FrameworkTag skill={'Fastify'} />
54 |                         </Wrap>
55 | 
56 |                     </Box>
57 |                     <Box my={5}>
58 |                         <Heading textAlign={'start'} as='h4' fontSize={'lg'}> Other Tools</Heading>
59 | 
60 |                         <Box orientation='horizontal' bgColor='gray.300' my={2} height={0.2} />
61 | 
62 |                         <Wrap>
63 |                             <ToolTag skill={'Postman'} />
64 |                             <ToolTag skill={'VS Code'} />
65 |                             <ToolTag skill={'Insomnia'} />
66 |                             <ToolTag skill={'Git'} />
67 |                             <ToolTag skill={'Github'} />
68 |                             <ToolTag skill={'Bitbucket'} />
69 |                             <ToolTag skill={'Scrum'} />
70 |                         </Wrap>
71 | 
72 |                     </Box>
73 |                 </Flex>
74 |             </Flex>
75 |         </Container>
76 |     )
77 | }
78 | 


--------------------------------------------------------------------------------
/src/components/Banner.js:
--------------------------------------------------------------------------------
  1 | import { Box, ButtonGroup, Container, Flex, Heading, HStack, IconButton, Image, Tag, Text, VStack } from '@chakra-ui/react'
  2 | import React from 'react'
  3 | import { FaEnvelope, FaFacebook, FaGithub, FaInstagram, FaLinkedin, FaPhone, FaTwitter } from 'react-icons/fa'
  4 | import Education from './Education'
  5 |  
  6 | 
  7 | export default function Banner() {
  8 |     return (
  9 |         <Container maxW={'7xl'} alignItems='center' my={5}>
 10 |             <Flex width={'100%'} maxW={['full', 'full', '7xl']} justifyContent='center' alignItems={'center'} flexDir={['column', 'column', 'row', 'row']}>
 11 |                 <Flex width={['md', 'md', '2xl']} flexDir={'column'} justifyContent='space-between' bgColor={'white'} color='black' maxHeight='2xl' minHeight={'4xl'} borderRadius='3xl' p='10' mb={10}>
 12 |                     <Box>
 13 |                         <Flex alignItems={'center'} justifyContent='center'>
 14 |                             <Image borderColor={'gray.100'} src='https://www.getillustrations.com/photos/pack/3d-avatar-male_lg.png' width='32' />
 15 |                         </Flex>
 16 | 
 17 |                         <Heading textAlign={'center'}>Prince Patel</Heading>
 18 | 
 19 |                         <Text fontSize={'sm'} textAlign='center'>
 20 |                             I am currently pursuing MCA form College of Engineering, Anna university, Tamil Nadu. I am looking for <Tag variant={'solid'}>internship</Tag> and <br /> <Tag mt={1} variant={'solid'}> Job Opportunities</Tag><br /> (Degree Completion in 2023).
 21 |                         </Text>
 22 | 
 23 |                         <VStack my={4}>
 24 |                             <Tag px={5} variant={'subtle'} colorScheme='primary'>Full Stack Developer</Tag>
 25 |                             <Tag px={5} variant={'subtle'} colorScheme='primary'>App Developer</Tag>
 26 |                         </VStack>
 27 |                         <Box orientation='horizontal' bgColor='gray.300' my={4} height={0.2} />
 28 |                         {/* Icons  */}
 29 |                         <VStack spacing={6} alignItems='start'>
 30 |                             <HStack>
 31 |                                 <Box me={2}>
 32 |                                     <IconButton shadow={'md'} variant={'ghost'} border='1px solid' borderColor={'gray.300'}><FaEnvelope /></IconButton>
 33 |                                 </Box>
 34 |                                 <VStack alignItems={'start'} spacing={0.1}>
 35 |                                     <Text fontSize={'sm'}>Email</Text>
 36 |                                     <Text fontWeight={'600'}>princepatelcodes</Text>
 37 |                                 </VStack>
 38 |                             </HStack>
 39 | 
 40 | 
 41 |                             <HStack>
 42 |                                 <Box me={2} >
 43 |                                     <IconButton shadow={'md'} variant={'ghost'} border='1px solid' borderColor={'gray.300'}><FaPhone /></IconButton>
 44 |                                 </Box>
 45 |                                 <VStack alignItems={'start'} spacing={0.1}>
 46 |                                     <Text fontSize={'sm'}>Phone</Text>
 47 |                                     <Text fontWeight={'600'}>princepatelcodes</Text>
 48 |                                 </VStack>
 49 |                             </HStack>
 50 | 
 51 | 
 52 |                             <HStack>
 53 |                                 <Box me={2}>
 54 |                                     <IconButton shadow={'md'} variant={'ghost'} border='1px solid' borderColor={'gray.300'}><FaGithub /></IconButton>
 55 |                                 </Box>
 56 |                                 <VStack alignItems={'start'} spacing={0.1}>
 57 |                                     <Text fontSize={'sm'}>Github</Text>
 58 |                                     <Text fontWeight={'600'}>princepatelcodes</Text>
 59 |                                 </VStack>
 60 |                             </HStack>
 61 | 
 62 |                             <HStack>
 63 |                                 <Box me={2}>
 64 |                                     <IconButton shadow={'md'} variant={'ghost'} border='1px solid' borderColor={'gray.300'}><FaLinkedin /></IconButton>
 65 |                                 </Box>
 66 |                                 <VStack alignItems={'start'} spacing={0.1}>
 67 |                                     <Text fontSize={'sm'}>Linkedin</Text>
 68 |                                     <Text fontWeight={'600'}>princepatell</Text>
 69 |                                 </VStack>
 70 |                             </HStack>
 71 | 
 72 |                             <HStack>
 73 |                                 <Box me={2}>
 74 |                                     <IconButton shadow={'md'} variant={'ghost'} border='1px solid' borderColor={'gray.300'}><FaTwitter /></IconButton>
 75 |                                 </Box>
 76 |                                 <VStack alignItems={'start'} spacing={0.1}>
 77 |                                     <Text fontSize={'sm'}>Twitter</Text>
 78 |                                     <Text fontWeight={'600'}>princepatelt</Text>
 79 |                                 </VStack>
 80 |                             </HStack>
 81 | 
 82 |                         </VStack>
 83 |                     </Box>
 84 | 
 85 |                     <ButtonGroup justifyContent={'center'} alignItems={'center'} variant='ghost' spacing={1.9}>
 86 |                         <IconButton _hover={{ color: 'primary.700', bgColor: 'primary.50', border: '1px solid', borderColor: 'primary.700' }}><FaFacebook size={24} /></IconButton>
 87 |                         <IconButton _hover={{ color: 'primary.700', bgColor: 'primary.50', border: '1px solid', borderColor: 'primary.700' }}><FaInstagram size={24} /></IconButton>
 88 |                         <IconButton _hover={{ color: 'primary.700', bgColor: 'primary.50', border: '1px solid', borderColor: 'primary.700' }}><FaTwitter size={24} /></IconButton>
 89 |                     </ButtonGroup>
 90 |                 </Flex>
 91 |                 <Box ms={['0', '0', '8']} flexDir={'column'} justifyContent='space-between' bgColor={'white'} color='black' maxHeight='4xl' scrollBehavior={'smooth'} minHeight={'4xl'} borderRadius='3xl' p='10' mb={10}>
 92 |                     <Heading>
 93 |                         Education
 94 |                     </Heading>
 95 |                     <Education />
 96 |                 </Box>
 97 |             </Flex>
 98 |         </Container>
 99 |     )
100 | }
101 | 


--------------------------------------------------------------------------------
/src/components/Education.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import {
  3 |     Box,
  4 |     chakra,
  5 |     Container,
  6 |     Text,
  7 |     HStack,
  8 |     VStack,
  9 |     Flex,
 10 |     useColorModeValue,
 11 |     useBreakpointValue
 12 | } from '@chakra-ui/react';
 13 | 
 14 | const milestones = [
 15 |     {
 16 |         id: 1,
 17 |         date: 'MARCH, 2015',
 18 |         title: 'Completed 10th',
 19 |         description: `fames ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est.`
 20 |     },
 21 |     {
 22 |         id: 2,
 23 |         date: 'Feb, 2017',
 24 |         title: 'Completed 12th',
 25 |         description: `fames ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est.`
 26 |     },
 27 |     {
 28 |         id: 3,
 29 |         date: 'July 30, 2020',
 30 |         title: 'Completed Graduation',
 31 |         description:
 32 |             'fames ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est.'
 33 |     },
 34 |     {
 35 |         id: 4,
 36 |         date: 'July 30, 2022',
 37 |         title: 'Post Grad Ongoing',
 38 |         description:
 39 |             'fames ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est.'
 40 |     }
 41 | ];
 42 | 
 43 | const Education = () => {
 44 |     const isMobile = useBreakpointValue({ base: true, md: false });
 45 |     const isDesktop = useBreakpointValue({ base: false, md: true });
 46 | 
 47 |     return (
 48 |         <Container maxWidth="7xl" maxHeight={'3xl'} overflowX={'auto'} p={{ base: 2, sm: 10 }}
 49 |             mt={3}
 50 |             css={{
 51 |                 '&::-webkit-scrollbar': {
 52 |                     marginTop: '8px',
 53 |                     width: '8px',
 54 |                     height: '8px',
 55 |                 },
 56 |                 '&::-webkit-scrollbar-track': {
 57 |                     marginTop: '8px',
 58 |                     width: '2px',
 59 |                     height: '4px',
 60 |                 },
 61 |                 '&::-webkit-scrollbar-thumb': {
 62 |                     marginTop: '8px',
 63 |                     background: '#121212',
 64 |                     borderRadius: '12px',
 65 |                 },
 66 |             }}
 67 |         >
 68 | 
 69 |             {milestones.map((milestone) => (
 70 |                 <Flex key={milestone.id} mb="10px">
 71 |                     {/* Desktop view(left card) */}
 72 |                     {isDesktop && milestone.id % 2 === 0 && (
 73 |                         <>
 74 |                             <EmptyCard />
 75 |                             <LineWithDot />
 76 |                             <Card {...milestone} />
 77 |                         </>
 78 |                     )}
 79 | 
 80 |                     {/* Mobile view */}
 81 |                     {isMobile && (
 82 |                         <>
 83 |                             <LineWithDot />
 84 |                             <Card {...milestone} />
 85 |                         </>
 86 |                     )}
 87 | 
 88 |                     {/* Desktop view(right card) */}
 89 |                     {isDesktop && milestone.id % 2 !== 0 && (
 90 |                         <>
 91 |                             <Card {...milestone} />
 92 | 
 93 |                             <LineWithDot />
 94 |                             <EmptyCard />
 95 |                         </>
 96 |                     )}
 97 |                 </Flex>
 98 |             ))}
 99 |         </Container>
100 |     );
101 | };
102 | 
103 | 
104 | 
105 | const Card = ({ id, title, description, date }) => {
106 |     // For even id show card on left side
107 |     // For odd id show card on right side
108 |     const isEvenId = id % 2 === 0;
109 |     let borderWidthValue = isEvenId ? '15px 15px 15px 0' : '15px 0 15px 15px';
110 |     let leftValue = isEvenId ? '-15px' : 'unset';
111 |     let rightValue = isEvenId ? 'unset' : '-15px';
112 | 
113 |     const isMobile = useBreakpointValue({ base: true, md: false });
114 |     if (isMobile) {
115 |         leftValue = '-15px';
116 |         rightValue = 'unset';
117 |         borderWidthValue = '15px 15px 15px 0';
118 |     }
119 | 
120 |     return (
121 |         <HStack
122 |             flex={1}
123 |             p={{ base: 3, sm: 6 }}
124 |             bg={useColorModeValue('gray.300', 'gray.800')}
125 |             spacing={5}
126 |             rounded="lg"
127 |             alignItems="center"
128 |             pos="relative"
129 |             _before={{
130 |                 content: `""`,
131 |                 w: '0',
132 |                 h: '0',
133 |                 borderColor: `transparent ${useColorModeValue('#edf2f6', '#1a202c')} transparent`,
134 |                 borderStyle: 'solid',
135 |                 borderWidth: borderWidthValue,
136 |                 position: 'absolute',
137 |                 left: leftValue,
138 |                 right: rightValue,
139 |                 display: 'block'
140 |             }}
141 |         >
142 |             <Box>
143 |                 <Text fontSize="md" color={isEvenId ? 'primary.800' : 'blue.700'}>
144 |                     {date}
145 |                 </Text>
146 | 
147 |                 <VStack spacing={2} mb={3} textAlign="left">
148 |                     <chakra.h1 fontSize="xl" lineHeight={1.2} fontWeight="bold" w="100%">
149 |                         {title}
150 |                     </chakra.h1>
151 |                     <Text fontSize="sm">{description}</Text>
152 |                 </VStack>
153 |             </Box>
154 |         </HStack>
155 |     );
156 | };
157 | 
158 | const LineWithDot = () => {
159 |     return (
160 |         <Flex
161 |             pos="relative"
162 |             alignItems="center"
163 |             mr={{ base: '40px', md: '40px' }}
164 |             ml={{ base: '0', md: '40px' }}
165 |         >
166 |             <chakra.span
167 |                 position="absolute"
168 |                 left="50%"
169 |                 height="calc(100% + 10px)"
170 |                 border="1px solid"
171 |                 borderColor={useColorModeValue('gray.400', 'gray.700')}
172 |                 top="0px"
173 |             ></chakra.span>
174 |             <Box pos="relative" p="10px">
175 |                 <Box
176 |                     pos="absolute"
177 |                     top="0"
178 |                     left="0"
179 |                     bottom="0"
180 |                     right="0"
181 |                     width="100%"
182 |                     height="100%"
183 |                     backgroundSize="cover"
184 |                     backgroundRepeat="no-repeat"
185 |                     backgroundPosition="center center"
186 |                     bg={useColorModeValue('primary.800', 'gray.200')}
187 |                     borderRadius="100px"
188 |                     backgroundImage="none"
189 |                     opacity={1}
190 |                 ></Box>
191 |             </Box>
192 |         </Flex>
193 |     );
194 | };
195 | 
196 | const EmptyCard = () => {
197 |     return <Box flex={{ base: 0, md: 1 }} p={{ base: 0, md: 6 }} bg="transparent"></Box>;
198 | };
199 | 
200 | export default Education;


--------------------------------------------------------------------------------
/src/components/Projects.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import {
  3 |     Box,
  4 |     chakra,
  5 |     Container,
  6 |     Text,
  7 |     HStack,
  8 |     VStack,
  9 |     Flex,
 10 |     useColorModeValue,
 11 |     useBreakpointValue,
 12 |     Tag
 13 | } from '@chakra-ui/react';
 14 | 
 15 | const milestones = [
 16 |     {
 17 |         id: 1,
 18 |         date: '2020',
 19 |         title: 'Simple e-Commerce Website',
 20 |         description: `There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.`
 21 |     },
 22 |     {
 23 |         id: 2,
 24 |         date: 'Feb, 2021',
 25 |         title: 'A React Medical Application',
 26 |         description: `There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.`
 27 |     },
 28 |     {
 29 |         id: 3,
 30 |         date: '2022',
 31 |         title: 'E-Learning App (Ongoing)',
 32 |         description:
 33 |             'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.'
 34 |     }
 35 | ];
 36 | 
 37 | const Projects = () => {
 38 |     const isMobile = useBreakpointValue({ base: true, md: false });
 39 |     const isDesktop = useBreakpointValue({ base: false, md: true });
 40 | 
 41 |     return (
 42 |         <Container maxWidth="7xl" maxHeight={'3xl'} overflowX={'auto'} p={{ base: 2, sm: 10 }}
 43 |             my={2}
 44 |             css={{
 45 |                 '&::-webkit-scrollbar': {
 46 |                     marginTop: '8px',
 47 |                     width: '8px',
 48 |                     height: '8px',
 49 |                 },
 50 |                 '&::-webkit-scrollbar-track': {
 51 |                     marginTop: '8px',
 52 |                     width: '2px',
 53 |                     height: '4px',
 54 |                 },
 55 |                 '&::-webkit-scrollbar-thumb': {
 56 |                     marginTop: '8px',
 57 |                     background: '#121212',
 58 |                     borderRadius: '12px',
 59 |                 },
 60 |             }}
 61 |         >
 62 | 
 63 |             {milestones.map((milestone) => (
 64 |                 <Flex key={milestone.id} mb="10px">
 65 |                     {/* Desktop view(left card) */}
 66 |                     {isDesktop && milestone.id % 2 === 0 && (
 67 |                         <>
 68 |                             <EmptyCard />
 69 |                             <LineWithDot />
 70 |                             <Card {...milestone} />
 71 |                         </>
 72 |                     )}
 73 | 
 74 |                     {/* Mobile view */}
 75 |                     {isMobile && (
 76 |                         <>
 77 |                             <LineWithDot />
 78 |                             <Card {...milestone} />
 79 |                         </>
 80 |                     )}
 81 | 
 82 |                     {/* Desktop view(right card) */}
 83 |                     {isDesktop && milestone.id % 2 !== 0 && (
 84 |                         <>
 85 |                             <Card {...milestone} />
 86 | 
 87 |                             <LineWithDot />
 88 |                             <EmptyCard />
 89 |                         </>
 90 |                     )}
 91 |                 </Flex>
 92 |             ))}
 93 |         </Container>
 94 |     );
 95 | };
 96 | 
 97 | 
 98 | 
 99 | const Card = ({ id, title, description, date }) => {
100 |     // For even id show card on left side
101 |     // For odd id show card on right side
102 |     const isEvenId = id % 2 === 0;
103 |     let borderWidthValue = isEvenId ? '15px 15px 15px 0' : '15px 0 15px 15px';
104 |     let leftValue = isEvenId ? '-15px' : 'unset';
105 |     let rightValue = isEvenId ? 'unset' : '-15px';
106 | 
107 |     const isMobile = useBreakpointValue({ base: true, md: false });
108 |     if (isMobile) {
109 |         leftValue = '-15px';
110 |         rightValue = 'unset';
111 |         borderWidthValue = '15px 15px 15px 0';
112 |     }
113 | 
114 |     return (
115 |         <HStack
116 |             flex={1}
117 |             p={{ base: 3, sm: 6 }}
118 |             bg={useColorModeValue('gray.300', 'gray.800')}
119 |             spacing={5}
120 |             rounded="lg"
121 |             alignItems="center"
122 |             pos="relative"
123 |             _before={{
124 |                 content: `""`,
125 |                 w: '0',
126 |                 h: '0',
127 |                 borderColor: `transparent ${useColorModeValue('#edf2f6', '#1a202c')} transparent`,
128 |                 borderStyle: 'solid',
129 |                 borderWidth: borderWidthValue,
130 |                 position: 'absolute',
131 |                 left: leftValue,
132 |                 right: rightValue,
133 |                 display: 'block'
134 |             }}
135 |         >
136 |             <Box>
137 |                 <Text fontSize="md" color={isEvenId ? 'primary.800' : 'blue.700'}>
138 |                     {date}
139 |                 </Text>
140 | 
141 |                 <VStack spacing={2} mb={3} textAlign="left">
142 |                     <chakra.h1 fontSize="xl" lineHeight={1.2} fontWeight="bold" w="100%">
143 |                         {title}
144 |                     </chakra.h1>
145 |                     <Text fontSize="sm">{description}</Text>
146 |                 </VStack>
147 | 
148 |                 <HStack>
149 |                     <Tag variant={'subtle'}>Flutter</Tag>
150 |                     <Tag variant={'subtle'}>React</Tag>
151 |                 </HStack>
152 |             </Box>
153 |         </HStack>
154 |     );
155 | };
156 | 
157 | const LineWithDot = () => {
158 |     return (
159 |         <Flex
160 |             pos="relative"
161 |             alignItems="center"
162 |             mr={{ base: '40px', md: '40px' }}
163 |             ml={{ base: '0', md: '40px' }}
164 |         >
165 |             <chakra.span
166 |                 position="absolute"
167 |                 left="50%"
168 |                 height="calc(100% + 10px)"
169 |                 border="1px solid"
170 |                 borderColor={useColorModeValue('gray.400', 'gray.700')}
171 |                 top="0px"
172 |             ></chakra.span>
173 |             <Box pos="relative" p="10px">
174 |                 <Box
175 |                     pos="absolute"
176 |                     top="0"
177 |                     left="0"
178 |                     bottom="0"
179 |                     right="0"
180 |                     width="100%"
181 |                     height="100%"
182 |                     backgroundSize="cover"
183 |                     backgroundRepeat="no-repeat"
184 |                     backgroundPosition="center center"
185 |                     bg={useColorModeValue('primary.800', 'gray.200')}
186 |                     borderRadius="100px"
187 |                     backgroundImage="none"
188 |                     opacity={1}
189 |                 ></Box>
190 |             </Box>
191 |         </Flex>
192 |     );
193 | };
194 | 
195 | const EmptyCard = () => {
196 |     return <Box flex={{ base: 0, md: 1 }} p={{ base: 0, md: 6 }} bg="transparent"></Box>;
197 | };
198 | 
199 | export default Projects;


--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Box,
  3 |   Flex,
  4 |   Text,
  5 |   IconButton,
  6 |   Button,
  7 |   Stack,
  8 |   Collapse,
  9 |   Icon,
 10 |   Link,
 11 |   Popover,
 12 |   PopoverTrigger,
 13 |   PopoverContent,
 14 |   useColorModeValue,
 15 |   useDisclosure,
 16 |   Image,
 17 | } from "@chakra-ui/react";
 18 | import {
 19 |   HamburgerIcon,
 20 |   CloseIcon,
 21 |   ChevronDownIcon,
 22 |   ChevronRightIcon,
 23 | } from "@chakra-ui/icons";
 24 | import logo from '../images/logo.png'
 25 | 
 26 | export default function Header() {
 27 |   const { isOpen, onToggle } = useDisclosure();
 28 | 
 29 |   return (
 30 |     <Box>
 31 |       <Flex
 32 |         bg={useColorModeValue("white", "gray.800")}
 33 |         color={useColorModeValue("gray.600", "white")}
 34 |         minH={"60px"}
 35 |         py={{ base: 2 }}
 36 |         px={{ base: 4 }}
 37 |         borderBottom={1}
 38 |         borderStyle={"solid"}
 39 |         borderColor={useColorModeValue("gray.200", "gray.900")}
 40 |         align={"center"}
 41 |       >
 42 |         <Flex
 43 |           flex={{ base: 1, md: "auto" }}
 44 |           ml={{ base: -2 }}
 45 |           display={{ base: "flex", md: "none" }}
 46 |         >
 47 |           <IconButton
 48 |             onClick={onToggle}
 49 |             icon={
 50 |               isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />
 51 |             }
 52 |             variant={"ghost"}
 53 |             aria-label={"Toggle Navigation"}
 54 |           />
 55 |         </Flex>
 56 |         <Flex flex={{ base: 1 }} justify={{ base: "center", md: "start" }} alignItems='center'>
 57 |           <Image p={2} src={logo} height='20' />
 58 | 
 59 |           <Flex display={{ base: "none", md: "flex" }} ml={10}>
 60 |             <DesktopNav />
 61 |           </Flex>
 62 |         </Flex>
 63 | 
 64 |         <Stack
 65 |           flex={{ base: 1, md: 0 }}
 66 |           justify={"flex-end"}
 67 |           direction={"row"}
 68 |           spacing={6}
 69 |         >
 70 |           <Button
 71 |             display={{ base: "inline-flex", md: "inline-flex" }}
 72 |             fontSize={"sm"}
 73 |             fontWeight={600}
 74 |             color={"white"}
 75 |             bg={"primary.700"}
 76 |             href={"#"}
 77 |             _hover={{
 78 |               bg: "primary.900",
 79 |             }}
 80 |           >
 81 |             View Resume
 82 |           </Button>
 83 |         </Stack>
 84 |       </Flex>
 85 | 
 86 |       <Collapse in={isOpen} animateOpacity>
 87 |         <MobileNav />
 88 |       </Collapse>
 89 |     </Box>
 90 |   );
 91 | }
 92 | 
 93 | const DesktopNav = () => {
 94 |   const linkColor = useColorModeValue("gray.600", "gray.200");
 95 |   const linkHoverColor = useColorModeValue("gray.800", "white");
 96 |   const popoverContentBgColor = useColorModeValue("white", "gray.800");
 97 | 
 98 |   return (
 99 |     <Stack direction={"row"} spacing={4}>
100 |       {NAV_ITEMS.map((navItem) => (
101 |         <Box key={navItem.label}>
102 |           <Popover trigger={"hover"} placement={"bottom-start"}>
103 |             <PopoverTrigger>
104 |               <Link
105 |                 px={3}
106 |                 py={3}
107 |                 href={navItem.href ?? "#"}
108 |                 fontSize={"md"}
109 |                 fontWeight={500}
110 |                 color={linkColor}
111 |                 _hover={{
112 |                   bg: "gray.200",
113 |                   borderRadius: 6,
114 |                   textDecoration: "none",
115 |                   color: linkHoverColor,
116 |                 }}
117 |               >
118 |                 {navItem.label}
119 |               </Link>
120 |             </PopoverTrigger>
121 | 
122 |             {navItem.children && (
123 |               <PopoverContent
124 |                 border={0}
125 |                 boxShadow={"xl"}
126 |                 bg={popoverContentBgColor}
127 |                 p={4}
128 |                 rounded={"xl"}
129 |                 minW={"sm"}
130 |               >
131 |                 <Stack>
132 |                   {navItem.children.map((child) => (
133 |                     <DesktopSubNav key={child.label} {...child} />
134 |                   ))}
135 |                 </Stack>
136 |               </PopoverContent>
137 |             )}
138 |           </Popover>
139 |         </Box>
140 |       ))}
141 |     </Stack>
142 |   );
143 | };
144 | 
145 | const DesktopSubNav = ({ label, href, subLabel }) => {
146 |   return (
147 |     <Link
148 |       href={href}
149 |       role={"group"}
150 |       display={"block"}
151 |       p={3}
152 |       rounded={"md"}
153 |       _hover={{
154 |         bg: useColorModeValue("primary.700", "gray.900"),
155 |         textDecoration: "none",
156 |       }}
157 |     >
158 |       <Stack direction={"row"} align={"center"}>
159 |         <Box>
160 |           <Text
161 |             transition={"all .3s ease"}
162 |             _groupHover={{ color: "white", textDecoration: "none" }}
163 |             _hover={{
164 |               textDecoration: "none",
165 |             }}
166 |             fontWeight={500}
167 |           >
168 |             {label}
169 |           </Text>
170 |           <Text _groupHover={{ color: "gray.400" }} fontSize={"sm"}>
171 |             {subLabel}
172 |           </Text>
173 |         </Box>
174 |         <Flex
175 |           transition={"all .3s ease"}
176 |           transform={"translateX(-10px)"}
177 |           opacity={0}
178 |           _groupHover={{ opacity: "100%", transform: "translateX(0)" }}
179 |           justify={"flex-end"}
180 |           align={"center"}
181 |           flex={1}
182 |         >
183 |           <Icon color={"white"} w={8} h={8} as={ChevronRightIcon} />
184 |         </Flex>
185 |       </Stack>
186 |     </Link>
187 |   );
188 | };
189 | 
190 | const MobileNav = () => {
191 |   return (
192 |     <Stack
193 |       bg={useColorModeValue("white", "gray.800")}
194 |       p={4}
195 |       display={{ md: "none" }}
196 |     >
197 |       {NAV_ITEMS.map((navItem) => (
198 |         <MobileNavItem key={navItem.label} {...navItem} />
199 |       ))}
200 |     </Stack>
201 |   );
202 | };
203 | 
204 | const MobileNavItem = ({ label, children, href }) => {
205 |   const { isOpen, onToggle } = useDisclosure();
206 | 
207 |   return (
208 |     <Stack spacing={4} onClick={children && onToggle}>
209 |       <Flex
210 |         py={2}
211 |         as={Link}
212 |         href={href ?? "#"}
213 |         justify={"space-between"}
214 |         align={"center"}
215 |         _hover={{
216 |           textDecoration: "none",
217 |         }}
218 |       >
219 |         <Text
220 |           fontWeight={600}
221 |           color={useColorModeValue("primary.600", "gray.200")}
222 |         >
223 |           {label}
224 |         </Text>
225 |         {children && (
226 |           <Icon
227 |             as={ChevronDownIcon}
228 |             transition={"all .25s ease-in-out"}
229 |             transform={isOpen ? "rotate(180deg)" : ""}
230 |             w={6}
231 |             h={6}
232 |           />
233 |         )}
234 |       </Flex>
235 | 
236 |       <Collapse in={isOpen} animateOpacity style={{ marginTop: "0!important" }}>
237 |         <Stack
238 |           mt={2}
239 |           pl={4}
240 |           borderLeft={1}
241 |           borderStyle={"solid"}
242 |           borderColor={useColorModeValue("gray.700", "gray.700")}
243 |           align={"start"}
244 |         >
245 |           {children &&
246 |             children.map((child) => (
247 |               <Link key={child.label} py={2} href={child.href} color='gray.700'>
248 |                 {child.label}
249 |               </Link>
250 |             ))}
251 |         </Stack>
252 |       </Collapse>
253 |     </Stack>
254 |   );
255 | };
256 | 
257 | const NAV_ITEMS = [
258 |   // {
259 |   //   label: "Find Work",
260 |   //   children: [
261 |   //     {
262 |   //       label: "Job Board",
263 |   //       subLabel: "Find your dream design job",
264 |   //       href: "#",
265 |   //     },
266 |   //     {
267 |   //       label: "Freelance Projects",
268 |   //       subLabel: "An exclusive list for contract work",
269 |   //       href: "#",
270 |   //     },
271 |   //   ],
272 |   // },
273 |   {
274 |     label: "Skills",
275 |     href: "#skills",
276 |   },
277 |   {
278 |     label: "Projects",
279 |     href: "#",
280 |   },
281 |   {
282 |     label: "Freelance",
283 |     href: "#freelance",
284 |   },
285 | ];
286 | 


--------------------------------------------------------------------------------