Merge pull request #22 from tig-github/21-add-experience-section

Add Experience Section

Author: tig-github

package-lock.json

@@ -22,6 +22,7 @@
     "react-router-dom": "^6.8.2",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "^5.0.1",
+    "react-vertical-timeline-component": "^3.6.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package.json

@@ -8,23 +8,26 @@ const Navbar = () => {
   return (
     <>
       <Box bg="#281b3d" w="100%" p={4} position="fixed" zIndex="sticky">
-        <Flex 
-          align="left" 
-          overflowX="scroll" 
-          overflowY="hidden" 
-          style = {{scrollbarWidth: "none"}}
-          sx={
-              { 
-              '::-webkit-scrollbar': {display:'none'}
-              }
-          }
+        <Flex
+          align="left"
+          overflowX="scroll"
+          overflowY="hidden"
+          style={{ scrollbarWidth: "none" }}
+          sx={{
+            "::-webkit-scrollbar": { display: "none" },
+          }}
         >
           <ButtonGroup gap={3}>
             <HashLink smooth to="/#">
               <Button colorScheme="blackAlpha" size="lg">
                 Home
               </Button>
             </HashLink>
+            <HashLink smooth to="/#experience">
+              <Button colorScheme="blackAlpha" size="lg">
+                Experience
+              </Button>{" "}
+            </HashLink>
             <HashLink smooth to="/#skills">
               <Button colorScheme="blackAlpha" size="lg">
                 Skills
@@ -42,12 +45,17 @@ const Navbar = () => {
             </HashLink>
           </ButtonGroup>
           <Spacer />
-          <Link href="https://www.linkedin.com/in/rayantig/" isExternal mr={3} ml={6}>
-              <FaLinkedin size={40} color="#0072b1"/>
+          <Link
+            href="https://www.linkedin.com/in/rayantig/"
+            isExternal
+            mr={3}
+            ml={6}
+          >
+            <FaLinkedin size={40} color="#0072b1" />
           </Link>
           <Link href="https://github.com/tig-github" isExternal>
             <Box bg="white" borderRadius="full">
-              <AiFillGithub size={40}/>
+              <AiFillGithub size={40} />
             </Box>
           </Link>
         </Flex>