├── public
    ├── HeroImage.jpg
    └── index.html
├── src
    ├── images
    │   └── HeroImage.jpg
    ├── components
    │   ├── About
    │   │   ├── index.js
    │   │   └── AboutStyle.js
    │   ├── HeroBgAnimation
    │   │   ├── HeroBgAnimationStyle.js
    │   │   └── index.js
    │   ├── HeroSection
    │   │   ├── index.js
    │   │   └── HeroStyle.js
    │   ├── Projects
    │   │   ├── index.js
    │   │   └── ProjectsStyle.js
    │   ├── Navbar
    │   │   ├── index.js
    │   │   └── NavbarStyledComponent.js
    │   ├── Experience
    │   │   └── index.js
    │   ├── Education
    │   │   └── index.js
    │   ├── Footer
    │   │   └── index.js
    │   ├── Cards
    │   │   ├── EducationCard.jsx
    │   │   ├── ProjectCards.jsx
    │   │   └── ExperienceCard.jsx
    │   ├── Skills
    │   │   └── index.js
    │   ├── Contact
    │   │   └── index.js
    │   └── ProjectDetails
    │   │   └── index.jsx
    ├── index.js
    ├── utils
    │   └── Themes.js
    ├── themes
    │   └── default.js
    ├── App.css
    ├── App.js
    └── data
    │   └── constants.js
├── .gitignore
├── package.json
└── README.md


/public/HeroImage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rishavchanda/Portfolio-Youtube/HEAD/public/HeroImage.jpg


--------------------------------------------------------------------------------
/src/images/HeroImage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rishavchanda/Portfolio-Youtube/HEAD/src/images/HeroImage.jpg


--------------------------------------------------------------------------------
/src/components/About/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | const About = () => {
4 |   return (
5 |     <div>About</div>
6 |   )
7 | }
8 | 
9 | export default About;


--------------------------------------------------------------------------------
/src/components/HeroBgAnimation/HeroBgAnimationStyle.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | 
3 | 
4 | export const Div = styled.div`
5 |     width:600px;
6 |     height: 500px;
7 | `


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


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/components/About/AboutStyle.js:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | import _default from '../../themes/default';
 3 | 
 4 | 
 5 | export const SocialMediaIcons = styled.div`
 6 |   display: flex;
 7 |   margin-top: 1rem;
 8 | `;
 9 | 
10 | export const SocialMediaIcon = styled.a`
11 |   display: inline-block;
12 |   margin: 0 1rem;
13 |   font-size: 1.5rem;
14 |   color: ${({ theme }) => theme.text_primary};
15 |   transition: color 0.2s ease-in-out;
16 |   &:hover {
17 |     color: ${({ theme }) => theme.primary};
18 |   }
19 | `;


--------------------------------------------------------------------------------
/src/utils/Themes.js:
--------------------------------------------------------------------------------
 1 | export const darkTheme = {
 2 |     bg:"#1C1C27",
 3 |     bgLight: "#1C1E27",
 4 |     primary:"#854CE6",
 5 |     text_primary:"#F2F3F4",
 6 |     text_secondary:"#b1b2b3",
 7 |     card:"#171721",
 8 |     card_light: '#191924',
 9 |     button:"#854CE6",
10 |     white:"#FFFFFF",
11 |     black:"#000000",
12 | }
13 | 
14 | export const lightTheme = {
15 |     bg:"#FFFFFF",
16 |     bgLight: "#f0f0f0",
17 |     primary:"#be1adb",
18 |     text_primary:"#111111",
19 |     text_secondary:"#48494a",
20 |     card:"#FFFFFF",
21 |     button:"#5c5b5b",
22 | }


--------------------------------------------------------------------------------
/src/themes/default.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     // Temp fonts
 3 |     fonts: {
 4 |       title: "Space Grotesk, sans-serif",
 5 |       main: "Space Grotesk, sans-serif"
 6 |     },
 7 |     // Colors for layout
 8 |     colors: {
 9 |       primary1: "#854CE6",
10 |       background1: "#222A35",
11 |       button: "#854CE6",
12 |       background2: "#19212C",
13 |       text: "#C8CFD8",
14 |       text1: "#F2F5F7",
15 |       text2: "#626970",
16 |       text3: "#575C66",
17 |       footerBackground: "#00012B"
18 |     },
19 |     // Breakpoints for responsive design
20 |     breakpoints: {
21 |       sm: 'screen and (max-width: 640px)',
22 |       md: 'screen and (max-width: 768px)',
23 |       lg: 'screen and (max-width: 1024px)',
24 |       xl: 'screen and (max-width: 1280px)'
25 |     },
26 |   }


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 2 | 
 3 | *{
 4 |     box-sizing: border-box;
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     font-family: 'Poppins', sans-serif;
 8 |     
 9 | }
10 | 
11 | html{
12 |   scroll-behavior: smooth;
13 | }
14 | 
15 | body{
16 |   margin: 0px !important;
17 |   padding: 0;
18 |   font-family: 'Montserrat', sans-serif;
19 | }
20 | 
21 | /* width */
22 | ::-webkit-scrollbar {
23 |     width: 4px;
24 |     height: 80px;
25 |   }
26 |   
27 |   /* Track */
28 |   ::-webkit-scrollbar-track {
29 |     background:#222A35;
30 |   }
31 |   
32 |   /* Handle */
33 |   ::-webkit-scrollbar-thumb {
34 |     background: #575C66;
35 |     border-radius: 6px;
36 |   }
37 |   
38 |   /* Handle on hover */
39 |   ::-webkit-scrollbar-thumb:hover {
40 |     background: #626970;
41 |   }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rishav-chanda-portfolio",
 3 |   "version": "0.1.0",
 4 |   "homepage": "https://rishavchanda.github.io",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@emailjs/browser": "^3.11.0",
 8 |     "@emotion/react": "^11.11.0",
 9 |     "@emotion/styled": "^11.11.0",
10 |     "@mui/icons-material": "^5.11.16",
11 |     "@mui/lab": "^5.0.0-alpha.130",
12 |     "@mui/material": "^5.13.1",
13 |     "@testing-library/jest-dom": "^5.16.4",
14 |     "@testing-library/react": "^13.1.1",
15 |     "@testing-library/user-event": "^13.5.0",
16 |     "emailjs": "^4.0.2",
17 |     "gh-pages": "^3.2.3",
18 |     "react": "^18.0.0",
19 |     "react-dom": "^18.0.0",
20 |     "react-icons": "^4.3.1",
21 |     "react-router-dom": "^6.3.0",
22 |     "react-scripts": "5.0.1",
23 |     "react-scroll": "^1.8.7",
24 |     "styled-components": "^5.3.5",
25 |     "typewriter-effect": "^2.19.0",
26 |     "web-vitals": "^2.1.4"
27 |   },
28 |   "scripts": {
29 |     "start": "react-scripts start",
30 |     "build": "react-scripts build",
31 |     "test": "react-scripts test",
32 |     "eject": "react-scripts eject",
33 |     "predeploy" : "npm run build",
34 |     "deploy" : "gh-pages -d build"
35 |   },
36 |   "eslintConfig": {
37 |     "extends": [
38 |       "react-app",
39 |       "react-app/jest"
40 |     ]
41 |   },
42 |   "browserslist": {
43 |     "production": [
44 |       ">0.2%",
45 |       "not dead",
46 |       "not op_mini all"
47 |     ],
48 |     "development": [
49 |       "last 1 chrome version",
50 |       "last 1 firefox version",
51 |       "last 1 safari version"
52 |     ]
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/HeroImage.jpg" />
 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="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/HeroImage.jpg" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Rishav Chanda</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/components/HeroSection/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import HeroBgAnimation from '../HeroBgAnimation'
 3 | import { HeroContainer, HeroBg, HeroLeftContainer, Img, HeroRightContainer, HeroInnerContainer, TextLoop, Title, Span, SubTitle,SocialMediaIcons,SocialMediaIcon, ResumeButton } from './HeroStyle'
 4 | import HeroImg from '../../images/HeroImage.jpg'
 5 | import Typewriter from 'typewriter-effect';
 6 | import { Bio } from '../../data/constants';
 7 | 
 8 | const HeroSection = () => {
 9 |     return (
10 |         <div id="about">
11 |             <HeroContainer>
12 |                 <HeroBg>
13 |                     <HeroBgAnimation />
14 |                 </HeroBg>
15 |                 <HeroInnerContainer >
16 |                     <HeroLeftContainer id="Left">
17 |                         <Title>Hi, I am <br /> {Bio.name}</Title>
18 |                         <TextLoop>
19 |                             I am a
20 |                             <Span>
21 |                                 <Typewriter
22 |                                     options={{
23 |                                         strings: Bio.roles,
24 |                                         autoStart: true,
25 |                                         loop: true,
26 |                                     }}
27 |                                 />
28 |                             </Span>
29 |                         </TextLoop>
30 |                         <SubTitle>{Bio.description}</SubTitle>
31 |                         <ResumeButton href={Bio.resume} target='display'>Check Resume</ResumeButton>
32 |                     </HeroLeftContainer>
33 | 
34 |                     <HeroRightContainer id="Right">
35 | 
36 |                         <Img src={HeroImg} alt="hero-image" />
37 |                     </HeroRightContainer>
38 |                 </HeroInnerContainer>
39 | 
40 |             </HeroContainer>
41 |         </div>
42 |     )
43 | }
44 | 
45 | export default HeroSection


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { ThemeProvider } from "styled-components";
 2 | import { useState, useEffect } from "react";
 3 | import { darkTheme, lightTheme } from './utils/Themes.js'
 4 | import Navbar from "./components/Navbar";
 5 | import './App.css';
 6 | import { BrowserRouter as Router } from 'react-router-dom';
 7 | import HeroSection from "./components/HeroSection";
 8 | import About from "./components/About";
 9 | import Skills from "./components/Skills";
10 | import Projects from "./components/Projects";
11 | import Contact from "./components/Contact";
12 | import Footer from "./components/Footer";
13 | import Experience from "./components/Experience";
14 | import Education from "./components/Education";
15 | import ProjectDetails from "./components/ProjectDetails";
16 | import styled from "styled-components";
17 | 
18 | const Body = styled.div`
19 |   background-color: ${({ theme }) => theme.bg};
20 |   width: 100%;
21 |   overflow-x: hidden;
22 | `
23 | 
24 | const Wrapper = styled.div`
25 |   background: linear-gradient(38.73deg, rgba(204, 0, 187, 0.15) 0%, rgba(201, 32, 184, 0) 50%), linear-gradient(141.27deg, rgba(0, 70, 209, 0) 50%, rgba(0, 70, 209, 0.15) 100%);
26 |   width: 100%;
27 |   clip-path: polygon(0 0, 100% 0, 100% 100%,30% 98%, 0 100%);
28 | `
29 | function App() {
30 |   const [darkMode, setDarkMode] = useState(true);
31 |   const [openModal, setOpenModal] = useState({ state: false, project: null });
32 |   console.log(openModal)
33 |   return (
34 |     <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
35 |       <Router >
36 |         <Navbar />
37 |         <Body>
38 |           <HeroSection />
39 |           <Wrapper>
40 |             <Skills />
41 |             <Experience />
42 |           </Wrapper>
43 |           <Projects openModal={openModal} setOpenModal={setOpenModal} />
44 |           <Wrapper>
45 |             <Education />
46 |             <Contact />
47 |           </Wrapper>
48 |           <Footer />
49 |           {openModal.state &&
50 |             <ProjectDetails openModal={openModal} setOpenModal={setOpenModal} />
51 |           }
52 |         </Body>
53 |       </Router>
54 |     </ThemeProvider>
55 |   );
56 | }
57 | 
58 | export default App;
59 | 


--------------------------------------------------------------------------------
/src/components/Projects/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useState } from 'react'
 3 | import { Container, Wrapper, Title, Desc, CardContainer, ToggleButtonGroup, ToggleButton, Divider } from './ProjectsStyle'
 4 | import ProjectCard from '../Cards/ProjectCards'
 5 | import { projects } from '../../data/constants'
 6 | 
 7 | 
 8 | const Projects = ({openModal,setOpenModal}) => {
 9 |   const [toggle, setToggle] = useState('all');
10 |   return (
11 |     <Container id="projects">
12 |       <Wrapper>
13 |         <Title>Projects</Title>
14 |         <Desc>
15 |           I have worked on a wide range of projects. From web apps to android apps. Here are some of my projects.
16 |         </Desc>
17 |         <ToggleButtonGroup >
18 |           {toggle === 'all' ?
19 |             <ToggleButton active value="all" onClick={() => setToggle('all')}>All</ToggleButton>
20 |             :
21 |             <ToggleButton value="all" onClick={() => setToggle('all')}>All</ToggleButton>
22 |           }
23 |           <Divider />
24 |           {toggle === 'web app' ?
25 |             <ToggleButton active value="web app" onClick={() => setToggle('web app')}>WEB APP'S</ToggleButton>
26 |             :
27 |             <ToggleButton value="web app" onClick={() => setToggle('web app')}>WEB APP'S</ToggleButton>
28 |           }
29 |           <Divider />
30 |           {toggle === 'android app' ?
31 |             <ToggleButton active value="android app" onClick={() => setToggle('android app')}>ANDROID APP'S</ToggleButton>
32 |             :
33 |             <ToggleButton value="android app" onClick={() => setToggle('android app')}>ANDROID APP'S</ToggleButton>
34 |           }
35 |           <Divider />
36 |           {toggle === 'machine learning' ?
37 |             <ToggleButton active value="machine learning" onClick={() => setToggle('machine learning')}>MACHINE LEARNING</ToggleButton>
38 |             :
39 |             <ToggleButton value="machine learning" onClick={() => setToggle('machine learning')}>MACHINE LEARNING</ToggleButton>
40 |           }
41 |         </ToggleButtonGroup>
42 |         <CardContainer>
43 |           {toggle === 'all' && projects
44 |             .map((project) => (
45 |               <ProjectCard project={project} openModal={openModal} setOpenModal={setOpenModal}/>
46 |             ))}
47 |           {projects
48 |             .filter((item) => item.category == toggle)
49 |             .map((project) => (
50 |               <ProjectCard project={project} openModal={openModal} setOpenModal={setOpenModal}/>
51 |             ))}
52 |         </CardContainer>
53 |       </Wrapper>
54 |     </Container>
55 |   )
56 | }
57 | 
58 | export default Projects


--------------------------------------------------------------------------------
/src/components/Navbar/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Nav, NavLink, NavbarContainer, Span, NavLogo, NavItems, GitHubButton, ButtonContainer, MobileIcon, MobileMenu, MobileNavLogo, MobileLink } from './NavbarStyledComponent'
 3 | import { DiCssdeck } from 'react-icons/di';
 4 | import { FaBars } from 'react-icons/fa';
 5 | import { Bio } from '../../data/constants';
 6 | import { Close, CloseRounded } from '@mui/icons-material';
 7 | import { useTheme } from 'styled-components';
 8 | 
 9 | const Navbar = () => {
10 |   const [isOpen, setIsOpen] = React.useState(false);
11 |   const theme = useTheme()
12 |   return (
13 |     <Nav>
14 |       <NavbarContainer>
15 |         <NavLogo to='/'>
16 |           <a style={{ display: "flex", alignItems: "center", color: "white", marginBottom: '20;', cursor: 'pointer' }}>
17 |             <DiCssdeck size="3rem" /> <Span>Portfolio</Span>
18 |           </a>
19 |         </NavLogo>
20 |         <MobileIcon>
21 |           <FaBars onClick={() => {
22 |             setIsOpen(!isOpen)
23 |           }} />
24 |         </MobileIcon>
25 |         <NavItems>
26 |           <NavLink href="#about">About</NavLink>
27 |           <NavLink href='#skills'>Skills</NavLink>
28 |           <NavLink href='#experience'>Experience</NavLink>
29 |           <NavLink href='#projects'>Projects</NavLink>
30 |           <NavLink href='#education'>Education</NavLink>
31 |         </NavItems>
32 |         <ButtonContainer>
33 |           <GitHubButton href={Bio.github} target="_blank">Github Profile</GitHubButton>
34 |         </ButtonContainer>
35 |         {
36 |           isOpen &&
37 |           <MobileMenu isOpen={isOpen}>
38 |             <MobileLink href="#about" onClick={() => {
39 |               setIsOpen(!isOpen)
40 |             }}>About</MobileLink>
41 |             <MobileLink href='#skills' onClick={() => {
42 |               setIsOpen(!isOpen)
43 |             }}>Skills</MobileLink>
44 |             <MobileLink href='#experience' onClick={() => {
45 |               setIsOpen(!isOpen)
46 |             }}>Experience</MobileLink>
47 |             <MobileLink href='#projects' onClick={() => {
48 |               setIsOpen(!isOpen)
49 |             }}>Projects</MobileLink>
50 |             <MobileLink href='#education' onClick={() => {
51 |               setIsOpen(!isOpen)
52 |             }}>Education</MobileLink>
53 |             <GitHubButton style={{padding: '10px 16px',background: `${theme.primary}`, color: 'white',width: 'max-content'}} href={Bio.github} target="_blank">Github Profile</GitHubButton>
54 |           </MobileMenu>
55 |         }
56 |       </NavbarContainer>
57 |     </Nav>
58 |   )
59 | }
60 | 
61 | export default Navbar


--------------------------------------------------------------------------------
/src/components/Projects/ProjectsStyle.js:
--------------------------------------------------------------------------------
  1 | import styled from 'styled-components';
  2 | import _default from '../../themes/default';
  3 | 
  4 | export const Container = styled.div`
  5 |     background: linear-gradient(343.07deg, rgba(132, 59, 206, 0.06) 5.71%, rgba(132, 59, 206, 0) 64.83%);
  6 |     display: flex;
  7 |     flex-direction: column;
  8 |     justify-content: center;
  9 |     position: relative;
 10 |     z-index: 1;
 11 |     align-items: center;
 12 |     clip-path: polygon(0 0, 100% 0, 100% 100%,100% 98%, 0 100%);
 13 | `;
 14 | 
 15 | export const Wrapper = styled.div`
 16 |     position: relative;
 17 |     display: flex;
 18 |     justify-content: space-between;
 19 |     align-items: center;
 20 |     flex-direction: column;
 21 |     width: 100%;
 22 |     max-width: 1350px;
 23 |     padding: 10px 0px 100px 0;
 24 |     gap: 12px;
 25 |     @media (max-width: 960px) {
 26 |         flex-direction: column;
 27 |     }
 28 | `;
 29 | 
 30 | export const Title = styled.div`
 31 | font-size: 42px;
 32 | text-align: center;
 33 | font-weight: 600;
 34 | margin-top: 20px;
 35 |   color: ${({ theme }) => theme.text_primary};
 36 |   @media (max-width: 768px) {
 37 |       margin-top: 12px;
 38 |       font-size: 32px;
 39 |   }
 40 | `;
 41 | 
 42 | export const Desc = styled.div`
 43 |     font-size: 18px;
 44 |     text-align: center;
 45 |     max-width: 600px;
 46 |     color: ${({ theme }) => theme.text_secondary};
 47 |     @media (max-width: 768px) {
 48 |         margin-top: 12px;
 49 |         font-size: 16px;
 50 |     }
 51 | `;
 52 | 
 53 | export const ToggleButtonGroup = styled.div`
 54 |     display: flex;
 55 |     border: 1.5px solid ${({ theme }) => theme.primary};
 56 |     color: ${({ theme }) => theme.primary};
 57 |     font-size: 16px;
 58 |     border-radius: 12px;
 59 |     font-weight: 500;
 60 |     margin: 22px 0px;
 61 |     @media (max-width: 768px) {
 62 |         font-size: 12px;
 63 |     }
 64 | `
 65 | 
 66 | export const ToggleButton = styled.div`
 67 |     padding: 8px 18px;
 68 |     border-radius: 6px;
 69 |     cursor: pointer;
 70 |     ${({ active, theme }) =>
 71 |         active && `
 72 |     background: ${theme.primary + 20};
 73 |     `
 74 |     }
 75 |     &:hover {
 76 |         background: ${({ theme }) => theme.primary + 8};
 77 |     }
 78 |     @media (max-width: 768px) {
 79 |         padding: 6px 8px;
 80 |         border-radius: 4px;
 81 |     }
 82 | `
 83 | export const Divider = styled.div`
 84 |     width: 1.5px;
 85 |     background: ${({ theme }) => theme.primary};
 86 | `
 87 | 
 88 | 
 89 | export const CardContainer = styled.div`
 90 |     display: flex;
 91 |     justify-content: center;
 92 |     align-items: center;
 93 |     gap: 28px;
 94 |     flex-wrap: wrap;
 95 |     // display: grid;
 96 |     // grid-template-columns: repeat(3, 1fr);
 97 |     // grid-gap: 32px;
 98 |     // grid-auto-rows: minmax(100px, auto);
 99 |     // @media (max-width: 960px) {
100 |     //     grid-template-columns: repeat(2, 1fr);
101 |     // }
102 |     // @media (max-width: 640px) {
103 |     //     grid-template-columns: repeat(1, 1fr);
104 |     // }
105 | `;
106 | 


--------------------------------------------------------------------------------
/src/components/Experience/index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import React from 'react'
  3 | import styled from 'styled-components'
  4 | import Timeline from '@mui/lab/Timeline';
  5 | import TimelineItem from '@mui/lab/TimelineItem';
  6 | import TimelineSeparator from '@mui/lab/TimelineSeparator';
  7 | import TimelineConnector from '@mui/lab/TimelineConnector';
  8 | import TimelineContent from '@mui/lab/TimelineContent';
  9 | import TimelineDot from '@mui/lab/TimelineDot';
 10 | import ExperienceCard from '../Cards/ExperienceCard';
 11 | import { experiences } from '../../data/constants';
 12 | 
 13 | const Container = styled.div`
 14 |     display: flex;
 15 |     flex-direction: column;
 16 |     justify-content: center;
 17 |     position: relative;
 18 |     z-index: 1;
 19 |     align-items: center;
 20 |     padding: 40px 0px 80px 0px;
 21 |     @media (max-width: 960px) {
 22 |         padding: 0px;
 23 |     }
 24 | `;
 25 | 
 26 | const Wrapper = styled.div`
 27 |     position: relative;
 28 |     display: flex;
 29 |     justify-content: space-between;
 30 |     align-items: center;
 31 |     flex-direction: column;
 32 |     width: 100%;
 33 |     max-width: 1350px;
 34 |     padding: 80px 0;
 35 |     gap: 12px;
 36 |     @media (max-width: 960px) {
 37 |         flex-direction: column;
 38 |     }
 39 | `;
 40 | 
 41 | const Title = styled.div`
 42 | font-size: 42px;
 43 | text-align: center;
 44 | font-weight: 600;
 45 | margin-top: 20px;
 46 |   color: ${({ theme }) => theme.text_primary};
 47 |   @media (max-width: 768px) {
 48 |       margin-top: 12px;
 49 |       font-size: 32px;
 50 |   }
 51 | `;
 52 | 
 53 | const Desc = styled.div`
 54 |     font-size: 18px;
 55 |     text-align: center;
 56 |     max-width: 600px;
 57 |     color: ${({ theme }) => theme.text_secondary};
 58 |     @media (max-width: 768px) {
 59 |         margin-top: 12px;
 60 |         font-size: 16px;
 61 |     }
 62 | `;
 63 | 
 64 | const TimelineSection = styled.div`
 65 |     width: 100%;
 66 |     max-width: 1000px;
 67 |     margin-top: 10px;
 68 |     display: flex;
 69 |     flex-direction: column;
 70 |     align-items: center;
 71 |     justify-content: center;
 72 |     gap: 12px;
 73 | `;
 74 | 
 75 | 
 76 | 
 77 | const index = () => {
 78 |     return (
 79 |         <Container id="experience">
 80 |             <Wrapper>
 81 |                 <Title>Experience</Title>
 82 |                 <Desc>
 83 |                     My work experience as a software engineer and working on different companies and projects.
 84 |                 </Desc>
 85 |                 <TimelineSection>
 86 |                     <Timeline>
 87 |                         {experiences.map((experience,index) => (
 88 |                             <TimelineItem>
 89 |                                 <TimelineSeparator>
 90 |                                     <TimelineDot variant="outlined" color="secondary" />
 91 |                                     {index !== experiences.length - 1 && <TimelineConnector style={{ background: '#854CE6' }} />}
 92 |                                 </TimelineSeparator>
 93 |                                 <TimelineContent sx={{ py: '12px', px: 2 }}>
 94 |                                     <ExperienceCard experience={experience}/>
 95 |                                 </TimelineContent>
 96 |                             </TimelineItem>
 97 |                         ))}
 98 |                     </Timeline>
 99 | 
100 |                 </TimelineSection>
101 |             </Wrapper>
102 |         </Container>
103 |     )
104 | }
105 | 
106 | export default index


--------------------------------------------------------------------------------
/src/components/Education/index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import React from 'react'
  3 | import styled from 'styled-components'
  4 | import Timeline from '@mui/lab/Timeline';
  5 | import TimelineItem from '@mui/lab/TimelineItem';
  6 | import TimelineSeparator from '@mui/lab/TimelineSeparator';
  7 | import TimelineConnector from '@mui/lab/TimelineConnector';
  8 | import TimelineContent from '@mui/lab/TimelineContent';
  9 | import TimelineDot from '@mui/lab/TimelineDot';
 10 | import { education, experiences } from '../../data/constants';
 11 | import EducationCard from '../Cards/EducationCard';
 12 | 
 13 | const Container = styled.div`
 14 |     display: flex;
 15 |     flex-direction: column;
 16 |     justify-content: center;
 17 |     position: relative;
 18 |     z-index: 1;
 19 |     align-items: center;
 20 |     padding: 0px 0px 60px 0px;
 21 |     @media (max-width: 960px) {
 22 |         padding: 0px;
 23 |     }
 24 | `;
 25 | 
 26 | const Wrapper = styled.div`
 27 |     position: relative;
 28 |     display: flex;
 29 |     justify-content: space-between;
 30 |     align-items: center;
 31 |     flex-direction: column;
 32 |     width: 100%;
 33 |     max-width: 1350px;
 34 |     padding: 40px 0px 0px 0px;
 35 |     gap: 12px;
 36 |     @media (max-width: 960px) {
 37 |         flex-direction: column;
 38 |     }
 39 | `;
 40 | 
 41 | const Title = styled.div`
 42 | font-size: 42px;
 43 | text-align: center;
 44 | font-weight: 600;
 45 | margin-top: 20px;
 46 |   color: ${({ theme }) => theme.text_primary};
 47 |   @media (max-width: 768px) {
 48 |       margin-top: 12px;
 49 |       font-size: 32px;
 50 |   }
 51 | `;
 52 | 
 53 | const Desc = styled.div`
 54 |     font-size: 18px;
 55 |     text-align: center;
 56 |     max-width: 600px;
 57 |     color: ${({ theme }) => theme.text_secondary};
 58 |     @media (max-width: 768px) {
 59 |         margin-top: 12px;
 60 |         font-size: 16px;
 61 |     }
 62 | `;
 63 | 
 64 | const TimelineSection = styled.div`
 65 |     width: 100%;
 66 |     max-width: 1000px;
 67 |     margin-top: 10px;
 68 |     display: flex;
 69 |     flex-direction: column;
 70 |     align-items: center;
 71 |     justify-content: center;
 72 |     gap: 12px;
 73 |     @media (max-width: 660px) {
 74 |         align-items: end;
 75 |     }
 76 | `;
 77 | 
 78 | 
 79 | 
 80 | const index = () => {
 81 |     return (
 82 |         <Container id="education">
 83 |             <Wrapper>
 84 |                 <Title>Education</Title>
 85 |                 <Desc>
 86 |                     My education has been a journey of self-discovery and growth. My educational details are as follows.
 87 |                 </Desc>
 88 |                 <TimelineSection>
 89 |                     <Timeline>
 90 |                         {education.map((education,index) => (
 91 |                             <TimelineItem >
 92 |                                 <TimelineContent sx={{ py: '12px', px: 2 }}>
 93 |                                     <EducationCard education={education}/>
 94 |                                 </TimelineContent>
 95 |                                 <TimelineSeparator>
 96 |                                     <TimelineDot variant="outlined" color="secondary" />
 97 |                                     {index !== experiences.length  && <TimelineConnector style={{ background: '#854CE6' }} />}
 98 |                                 </TimelineSeparator>
 99 |                             </TimelineItem>
100 |                         ))}
101 |                     </Timeline>
102 | 
103 |                 </TimelineSection>
104 |             </Wrapper>
105 |         </Container>
106 |     )
107 | }
108 | 
109 | export default index


--------------------------------------------------------------------------------
/src/components/Footer/index.js:
--------------------------------------------------------------------------------
  1 | import styled from 'styled-components';
  2 | import FacebookIcon from '@mui/icons-material/Facebook';
  3 | import TwitterIcon from '@mui/icons-material/Twitter';
  4 | import LinkedInIcon from '@mui/icons-material/LinkedIn';
  5 | import InstagramIcon from '@mui/icons-material/Instagram';
  6 | import { Bio } from '../../data/constants';
  7 | 
  8 | const FooterContainer = styled.div`
  9 |   width: 100%;
 10 |   padding: 2rem 0;
 11 |   display: flex;
 12 |   justify-content: center;
 13 |   //background: linear-gradient(100.26deg, rgba(0, 102, 255, 0.05) 42.33%, rgba(150, 0, 225, 0.05) 127.07%);
 14 | `;
 15 | 
 16 | 
 17 | const FooterWrapper = styled.footer`
 18 |   width: 100%;
 19 |   max-width: 1200px;
 20 |   display: flex;
 21 |   flex-direction: column;
 22 |   gap: 14px;
 23 |   align-items: center;
 24 |   padding: 1rem;
 25 |   color: ${({ theme }) => theme.text_primary};
 26 | `;
 27 | 
 28 | const Logo = styled.h1`
 29 |   font-weight: 600;
 30 |   font-size: 20px;
 31 |   color: ${({ theme }) => theme.primary};
 32 | `;
 33 | 
 34 | const Nav = styled.nav`
 35 |   width: 100%;
 36 |   max-width: 800px;
 37 |   margin-top: 0.5rem;
 38 |   display: flex;
 39 |   flex-direction: row;
 40 |   gap: 2rem;
 41 |   justify-content: center;
 42 |   @media (max-width: 768px) {
 43 |     flex-wrap: wrap;
 44 |     gap: 1rem;
 45 |     justify-content: center;
 46 |     text-align: center;
 47 |     font-size: 12px;
 48 |   }
 49 | `;
 50 | 
 51 | const NavLink = styled.a`
 52 | color: ${({ theme }) => theme.text_primary};
 53 |   text-decoration: none;
 54 |   font-size: 1.2rem;
 55 |   transition: color 0.2s ease-in-out;
 56 |   &:hover {
 57 |     color: ${({ theme }) => theme.primary};
 58 |   }
 59 |   @media (max-width: 768px) {
 60 |     font-size: 1rem;
 61 |   }
 62 | `;
 63 | 
 64 | const SocialMediaIcons = styled.div`
 65 |   display: flex;
 66 |   margin-top: 1rem;
 67 | `;
 68 | 
 69 | const SocialMediaIcon = styled.a`
 70 |   display: inline-block;
 71 |   margin: 0 1rem;
 72 |   font-size: 1.5rem;
 73 |   color: ${({ theme }) => theme.text_primary};
 74 |   transition: color 0.2s ease-in-out;
 75 |   &:hover {
 76 |     color: ${({ theme }) => theme.primary};
 77 |   }
 78 | `;
 79 | 
 80 | const Copyright = styled.p`
 81 |   margin-top: 1.5rem;
 82 |   font-size: 0.9rem;
 83 |   color: ${({ theme }) => theme.soft2};
 84 |   text-align: center;
 85 | `;
 86 | 
 87 | function Footer() {
 88 |   return (
 89 |     <FooterContainer>
 90 |       <FooterWrapper>
 91 |         <Logo>Rishav Chanda</Logo>
 92 |         <Nav>
 93 |           <NavLink href="#about">About</NavLink>
 94 |           <NavLink href="#skills">Skills</NavLink>
 95 |           <NavLink href="#experience">Experience</NavLink>
 96 |           <NavLink href="#projects">Projects</NavLink>
 97 |           <NavLink href="#education">Education</NavLink>
 98 |         </Nav>
 99 |         <SocialMediaIcons>
100 |           <SocialMediaIcon href={Bio.facebook} target="display"><FacebookIcon /></SocialMediaIcon>
101 |           <SocialMediaIcon href={Bio.twitter} target="display"><TwitterIcon /></SocialMediaIcon>
102 |           <SocialMediaIcon href={Bio.linkedin} target="display"><LinkedInIcon /></SocialMediaIcon>
103 |           <SocialMediaIcon href={Bio.insta} target="display"><InstagramIcon /></SocialMediaIcon>
104 |         </SocialMediaIcons>
105 |         <Copyright>
106 |           &copy; 2023 Rishav Chanda. All rights reserved.
107 |         </Copyright>
108 | 
109 |       </FooterWrapper>
110 |     </FooterContainer>
111 |   );
112 | }
113 | 
114 | export default Footer;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # My Portfolio
 2 | Welcome to my portfolio! This project showcases my skills, projects, and experiences as a web developer.
 3 | 
 4 | ### Weblink: [Live Website](https://rishavchanda.netlify.app)
 5 | ## Some Images:
 6 | <img width="450px;" src="https://github.com/rishavchanda/rishav-chanda-portfolio/assets/64485885/4774dc30-1c1c-4c6c-b23b-019f3481713e"/>
 7 | <img width="450px;" src="https://github.com/rishavchanda/rishav-chanda-portfolio/assets/64485885/0a33349f-262d-4720-afed-7afc0dfd85a5"/>
 8 | <img width="450px;" src="https://github.com/rishavchanda/rishav-chanda-portfolio/assets/64485885/92f2622f-0a7f-444a-8f60-6edeae7508dd"/>
 9 | <img width="450px;" src="https://github.com/rishavchanda/rishav-chanda-portfolio/assets/64485885/0e984e85-cbd9-487b-bf91-166009b39319"/>
10 | <img width="450px;" src="https://github.com/rishavchanda/rishav-chanda-portfolio/assets/64485885/6ad7b63b-4c51-4c98-bd21-847e5d48d559"/>
11 | <img width="450px;" src="https://github.com/rishavchanda/rishav-chanda-portfolio/assets/64485885/10647898-7154-434c-84e6-edee6679ca92"/>
12 | 
13 | 
14 | ## Table of Contents
15 | - [Introduction](#introduction)
16 | - [Features](#features)
17 | - [Technologies Used](#technologies-used)
18 | - [Installation](#installation)
19 | - [Usage](#usage)
20 | - [Contributing](#contributing)
21 | - [License](#license)
22 | 
23 | ## Introduction
24 | My Portfolio is a React.js application that serves as an online portfolio to showcase my work, skills, and achievements. It provides an overview of my background, displays my projects, and offers a way to contact me.
25 | 
26 | ## Features
27 | - About Me: An overview of my background, skills, and experiences.
28 | - Projects: A collection of my notable projects with descriptions, screenshots, and links.
29 | - Skills: A list of my technical skills and proficiencies.
30 | - Resume: A link to download my resume.
31 | - Contact: A form to send me messages or inquiries.
32 | 
33 | ## Technologies Used
34 | - React.js: A JavaScript library for building user interfaces.
35 | - HTML5 & CSS3: Markup and styling languages for building web pages.
36 | - JavaScript: A programming language for adding interactivity to web applications.
37 | - Style-Components: A CSS framework for creating responsive and mobile-first designs.
38 | - Git: A version control system for tracking changes and collaborating on projects.
39 | - GitHub Pages: A platform for hosting and deploying web applications.
40 | 
41 | ## Installation
42 | To run this portfolio locally, follow these steps:
43 | 
44 | 1. Clone the repository: `git clone https://github.com/rishavchanda/rishav-chanda-portfolio.git`
45 | 2. Navigate to the project directory: `cd rishav-chanda-portfolio`
46 | 3. Install the dependencies: `npm install`
47 | 4. Start the development server: `npm start`
48 | 5. Open your browser and visit: `http://localhost:3000`
49 | 
50 | ## Usage
51 | After installing and running the project locally, you can navigate through the different sections of the portfolio using the navigation menu. Explore the About Me section to learn more about my background and skills. Visit the Projects section to see detailed information about my projects, including descriptions and screenshots. Use the Contact section to send me a message or inquiry.
52 | 
53 | ## Contributing
54 | Contributions are welcome! If you'd like to contribute to My Portfolio, please follow these steps:
55 | 
56 | 1. Fork the repository.
57 | 2. Create a new branch for your feature or bug fix: `git checkout -b my-feature`
58 | 3. Commit your changes: `git commit -m 'Add some feature'`
59 | 4. Push to the branch: `git push origin my-feature`
60 | 5. Open a pull request.
61 | 
62 | ## License
63 | This project is licensed under the [MIT License](LICENSE).
64 | 


--------------------------------------------------------------------------------
/src/components/Cards/EducationCard.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import styled from 'styled-components'
  3 | 
  4 | const Document = styled.img`
  5 |     display: none;
  6 |     height: 70px;
  7 |     width: fit-content;
  8 |     background-color: #000;
  9 |     border-radius: 10px;
 10 |     &:hover{
 11 |         cursor: pointer;
 12 |         opacity: 0.8;
 13 |     }
 14 | `
 15 | 
 16 | const Description = styled.div`
 17 |     width: 100%;
 18 |     font-size: 15px;
 19 |     font-weight: 400;
 20 |     color: ${({ theme }) => theme.text_primary + 99};
 21 |     margin-bottom: 10px;
 22 |     @media only screen and (max-width: 768px){
 23 |         font-size: 12px;
 24 |     }
 25 | `
 26 | 
 27 | const Span = styled.span`
 28 | overflow: hidden;
 29 | display: -webkit-box;
 30 | max-width: 100%;
 31 | -webkit-line-clamp: 4;
 32 | -webkit-box-orient: vertical;
 33 | text-overflow: ellipsis;
 34 | `
 35 | 
 36 | const Card = styled.div`
 37 |     width: 650px;
 38 |     border-radius: 10px;
 39 |     box-shadow: rgba(23, 92, 230, 0.15) 0px 4px 24px;
 40 |     padding: 12px 16px;
 41 |     justify-content: space-between;
 42 |     position: relative;
 43 |     overflow: hidden;
 44 |     display: flex;
 45 |     flex-direction: column;
 46 |     gap: 12px;
 47 |     transition: all 0.3s ease-in-out;
 48 |     &:hover{
 49 |         box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
 50 |         transform: translateY(-5px);
 51 |     }
 52 |     @media only screen and (max-width: 768px){
 53 |         padding: 10px;
 54 |         gap: 8px;
 55 |         width: 300px;
 56 |     }
 57 | 
 58 |     &:hover ${Document}{
 59 |         display: flex;
 60 |     }
 61 | 
 62 |     &:hover ${Span}{
 63 |         overflow: visible;
 64 |         -webkit-line-clamp: unset;
 65 | 
 66 |     }
 67 |     border: 0.1px solid #854CE6;
 68 | `
 69 | 
 70 | const Top = styled.div`
 71 |     width: 100%;
 72 |     display: flex;
 73 |     gap: 12px
 74 | `
 75 | 
 76 | const Image = styled.img`
 77 |     height: 50px;
 78 |     background-color: #000;
 79 |     border-radius: 10px;
 80 |     margin-top: 4px;
 81 |     @media only screen and (max-width: 768px){
 82 |         height: 40px;
 83 |     }
 84 | `
 85 | 
 86 | const Body = styled.div`
 87 |     width: 100%;
 88 |     display: flex;
 89 |     flex-direction: column; 
 90 | `
 91 | 
 92 | 
 93 | const Name = styled.div`
 94 |     font-size: 18px;
 95 |     font-weight: 600;
 96 |     color: ${({ theme }) => theme.text_primary + 99};
 97 |     @media only screen and (max-width: 768px){
 98 |         font-size: 14px;
 99 |     }
100 | `
101 | 
102 | const Degree = styled.div`
103 |     font-size: 14px;
104 |     font-weight: 500;
105 |     color: ${({ theme }) => theme.text_secondary + 99};
106 |     @media only screen and (max-width: 768px){
107 |         font-size: 12px;
108 |     }
109 | `
110 | 
111 | const Date = styled.div`
112 |     font-size: 12px;
113 |     font-weight: 400;
114 |     color: ${({ theme }) => theme.text_secondary + 80};
115 |     @media only screen and (max-width: 768px){
116 |         font-size: 10px;
117 |     }
118 | `
119 | 
120 | const Grade = styled.div`
121 |     font-size: 14px;
122 |     font-weight: 500;
123 |     color: ${({ theme }) => theme.text_secondary + 99};
124 |     @media only screen and (max-width: 768px){
125 |         font-size: 12px;
126 |     }
127 | `
128 | 
129 | 
130 | 
131 | const EducationCard = ({ education }) => {
132 |     return (
133 |         <Card>
134 |             <Top>
135 |                 <Image src={education.img} />
136 |                 <Body>
137 |                     <Name>{education.school}</Name>
138 |                     <Degree>{education.degree}</Degree>
139 |                     <Date>{education.date}</Date>
140 |                 </Body>
141 |             </Top>
142 |             <Grade><b>Grade: </b>{education.grade}</Grade>
143 |             <Description>
144 |                 <Span>{education.desc}</Span>
145 |             </Description>
146 |         </Card>
147 |     )
148 | }
149 | 
150 | export default EducationCard


--------------------------------------------------------------------------------
/src/components/Skills/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import styled from 'styled-components'
  3 | import { skills } from '../../data/constants'
  4 | 
  5 | const Container = styled.div`
  6 | display: flex;
  7 | flex-direction: column;
  8 | justify-content: center;
  9 | position: relative;
 10 | z-index: 1;
 11 | align-items: center;
 12 | `
 13 | 
 14 | const Wrapper = styled.div`
 15 | position: relative;
 16 | display: flex;
 17 | justify-content: space-between;
 18 | align-items: center;
 19 | flex-direction: column;
 20 | width: 100%;
 21 | max-width: 1100px;
 22 | gap: 12px;
 23 | @media (max-width: 960px) {
 24 |     flex-direction: column;
 25 | }
 26 | `
 27 | 
 28 | export const Title = styled.div`
 29 | font-size: 42px;
 30 | text-align: center;
 31 | font-weight: 600;
 32 | margin-top: 20px;
 33 |   color: ${({ theme }) => theme.text_primary};
 34 |   @media (max-width: 768px) {
 35 | margin-top: 12px;
 36 |       font-size: 32px;
 37 |   }
 38 | `;
 39 | 
 40 | export const Desc = styled.div`
 41 |     font-size: 18px;
 42 |     text-align: center;
 43 |     max-width: 600px;
 44 |     color: ${({ theme }) => theme.text_secondary};
 45 |     @media (max-width: 768px) {
 46 |         font-size: 16px;
 47 |     }
 48 | `;
 49 | 
 50 | const SkillsContainer = styled.div`
 51 |   width: 100%;
 52 |   display: flex;
 53 |   flex-wrap: wrap;
 54 |   margin-top: 30px;
 55 |   gap: 30px;
 56 |   justify-content: center;
 57 | `
 58 | 
 59 | const Skill = styled.div`
 60 |   width: 100%;
 61 |   max-width: 500px;
 62 |   background: ${({ theme }) => theme.card};
 63 |   border: 0.1px solid #854CE6;
 64 |   box-shadow: rgba(23, 92, 230, 0.15) 0px 4px 24px;
 65 |   border-radius: 16px;
 66 |   padding: 18px 36px;
 67 |   @media (max-width: 768px) {
 68 |     max-width: 400px;
 69 |     padding: 10px 36px;
 70 |   }
 71 |   @media (max-width: 500px) {
 72 |     max-width: 330px;
 73 |     padding: 10px 36px;
 74 |   }
 75 | 
 76 | 
 77 | `
 78 | 
 79 | const SkillTitle = styled.h2`
 80 |   font-size: 28px;
 81 |   font-weight: 600;
 82 |   color: ${({ theme }) => theme.text_secondary};
 83 |   margin-bottom: 20px;
 84 |   text-align: center;
 85 | `
 86 | 
 87 | const SkillList = styled.div`
 88 |   display: flex;
 89 |   justify-content: center; 
 90 |   flex-wrap: wrap;
 91 |   gap: 12px;
 92 |   margin-bottom: 20px;
 93 | `
 94 | 
 95 | const SkillItem = styled.div`
 96 |   font-size: 16px;
 97 |   font-weight: 400;
 98 |   color: ${({ theme }) => theme.text_primary + 80};
 99 |   border: 1px solid ${({ theme }) => theme.text_primary + 80};
100 |   border-radius: 12px;
101 |   padding: 12px 16px;
102 |   display: flex;
103 |   align-items: center;
104 |   justify-content: center;
105 |   gap: 8px;
106 |   @media (max-width: 768px) {
107 |     font-size: 14px;
108 |     padding: 8px 12px;
109 |   }
110 |   @media (max-width: 500px) {
111 |     font-size: 14px;
112 |     padding: 6px 12px;
113 |   }
114 | `
115 | 
116 | const SkillImage = styled.img`
117 |   width: 24px;
118 |   height: 24px;
119 | `
120 | 
121 | 
122 | const Skills = () => {
123 |   return (
124 |     <Container id="skills">
125 |       <Wrapper>
126 |         <Title>Skills</Title>
127 |         <Desc>Here are some of my skills on which I have been working on for the past 2 years.
128 |         </Desc>
129 |         <SkillsContainer>
130 |           {skills.map((skill) => (
131 |             <Skill>
132 |               <SkillTitle>{skill.title}</SkillTitle>
133 |               <SkillList>
134 |                 {skill.skills.map((item) => (
135 |                   <SkillItem>
136 |                     <SkillImage src={item.image}/>
137 |                     {item.name}
138 |                   </SkillItem>
139 |                 ))}
140 |               </SkillList>
141 |             </Skill>
142 |           ))}
143 | 
144 |         </SkillsContainer>
145 |       </Wrapper>
146 |     </Container>
147 |   )
148 | }
149 | 
150 | export default Skills


--------------------------------------------------------------------------------
/src/components/Cards/ProjectCards.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import styled from 'styled-components'
  3 | 
  4 | 
  5 | const Button = styled.button`
  6 |     display: none;
  7 |     width: 100%;
  8 |     padding: 10px;
  9 |     background-color: ${({ theme }) => theme.white};
 10 |     color: ${({ theme }) => theme.text_black};
 11 |     font-size: 14px;
 12 |     font-weight: 700;
 13 |     border: none;
 14 |     border-radius: 10px;
 15 |     cursor: pointer;
 16 |     transition: all 0.8s ease-in-out;
 17 | `
 18 | const Card = styled.div`
 19 |     width: 330px;
 20 |     height: 490px;
 21 |     background-color: ${({ theme }) => theme.card};
 22 |     cursor: pointer;
 23 |     border-radius: 10px;
 24 |     box-shadow: 0 0 12px 4px rgba(0,0,0,0.4);
 25 |     overflow: hidden;
 26 |     padding: 26px 20px;
 27 |     display: flex;
 28 |     flex-direction: column;
 29 |     gap: 14px;
 30 |     transition: all 0.5s ease-in-out;
 31 |     &:hover {
 32 |         transform: translateY(-10px);
 33 |         box-shadow: 0 0 50px 4px rgba(0,0,0,0.6);
 34 |         filter: brightness(1.1);
 35 |     }
 36 |     &:hover ${Button} {
 37 |         display: block;
 38 |     }
 39 | `
 40 | 
 41 | const Image = styled.img`
 42 |     width: 100%;
 43 |     height: 180px;
 44 |     background-color: ${({ theme }) => theme.white};
 45 |     border-radius: 10px;
 46 |     box-shadow: 0 0 16px 2px rgba(0,0,0,0.3);
 47 | `
 48 | 
 49 | const Tags = styled.div`
 50 |     width: 100%;
 51 |     display: flex;
 52 |     align-items: center;
 53 |     flex-wrap: wrap;
 54 |     gap: 8px;
 55 |     margin-top: 4px;
 56 | `
 57 | 
 58 | const Tag = styled.span`
 59 |     font-size: 12px;
 60 |     font-weight: 400;
 61 |     color: ${({ theme }) => theme.primary};
 62 |     background-color: ${({ theme }) => theme.primary + 15};
 63 |     padding: 2px 8px;
 64 |     border-radius: 10px;
 65 | `
 66 | 
 67 | const Details = styled.div`
 68 |     width: 100%;
 69 |     display: flex;
 70 |     flex-direction: column;
 71 |     gap: 0px;
 72 |     padding: 0px 2px;
 73 | `
 74 | const Title = styled.div`
 75 |     font-size: 20px;
 76 |     font-weight: 600;
 77 |     color: ${({ theme }) => theme.text_secondary};
 78 |     overflow: hidden;
 79 |     display: -webkit-box;
 80 |     max-width: 100%;
 81 |     -webkit-line-clamp: 2;
 82 |     -webkit-box-orient: vertical;
 83 |     overflow: hidden;
 84 |     text-overflow: ellipsis;
 85 | `
 86 | 
 87 | const Date = styled.div`
 88 |     font-size: 12px;
 89 |     margin-left: 2px;
 90 |     font-weight: 400;
 91 |     color: ${({ theme }) => theme.text_secondary + 80};
 92 |     @media only screen and (max-width: 768px){
 93 |         font-size: 10px;
 94 |     }
 95 | `
 96 | 
 97 | 
 98 | const Description = styled.div`
 99 |     font-weight: 400;
100 |     color: ${({ theme }) => theme.text_secondary + 99};
101 |     overflow: hidden;
102 |     margin-top: 8px;
103 |     display: -webkit-box;
104 |     max-width: 100%;
105 |     -webkit-line-clamp: 3;
106 |     -webkit-box-orient: vertical;
107 |     text-overflow: ellipsis;
108 | `
109 | 
110 | const Members = styled.div`
111 |     display: flex;
112 |     align-items: center;
113 |     padding-left: 10px;
114 | `
115 | const Avatar = styled.img`
116 |     width: 38px;
117 |     height: 38px;
118 |     border-radius: 50%;
119 |     margin-left: -10px;
120 |     background-color: ${({ theme }) => theme.white};
121 |     box-shadow: 0 0 10px rgba(0,0,0,0.2);
122 |     border: 3px solid ${({ theme }) => theme.card};
123 | `
124 | 
125 | const ProjectCards = ({project,setOpenModal}) => {
126 |     return (
127 |         <Card onClick={() => setOpenModal({state: true, project: project})}>
128 |             <Image src={project.image}/>
129 |             <Tags>
130 |                 {project.tags?.map((tag, index) => (
131 |                 <Tag>{tag}</Tag>
132 |                 ))}
133 |             </Tags>
134 |             <Details>
135 |                 <Title>{project.title}</Title>
136 |                 <Date>{project.date}</Date>
137 |                 <Description>{project.description}</Description>
138 |             </Details>
139 |             <Members>
140 |                 {project.member?.map((member) => (
141 |                     <Avatar src={member.img}/>
142 |                 ))}
143 |             </Members>
144 |             {/* <Button>View Project</Button> */}
145 |         </Card>
146 |     )
147 | }
148 | 
149 | export default ProjectCards


--------------------------------------------------------------------------------
/src/components/Cards/ExperienceCard.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import styled from 'styled-components'
  3 | 
  4 | const Document = styled.img`
  5 |     display: none;
  6 |     height: 70px;
  7 |     width: fit-content;
  8 |     background-color: #000;
  9 |     border-radius: 10px;
 10 |     &:hover{
 11 |         cursor: pointer;
 12 |         opacity: 0.8;
 13 |     }
 14 | `
 15 | 
 16 | const Description = styled.div`
 17 |     width: 100%;
 18 |     font-size: 15px;
 19 |     font-weight: 400;
 20 |     color: ${({ theme }) => theme.text_primary + 99};
 21 |     margin-bottom: 10px;
 22 |     @media only screen and (max-width: 768px){
 23 |         font-size: 12px;
 24 |     }
 25 | `
 26 | 
 27 | const Span = styled.span`
 28 | overflow: hidden;
 29 | display: -webkit-box;
 30 | max-width: 100%;
 31 | -webkit-line-clamp: 4;
 32 | -webkit-box-orient: vertical;
 33 | text-overflow: ellipsis;
 34 | `
 35 | 
 36 | const Card = styled.div`
 37 |     width: 650px;
 38 |     border-radius: 10px;
 39 |     box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
 40 |     padding: 12px 16px;
 41 |     justify-content: space-between;
 42 |     position: relative;
 43 |     overflow: hidden;
 44 |     display: flex;
 45 |     flex-direction: column;
 46 |     gap: 12px;
 47 |     transition: all 0.3s ease-in-out;
 48 |     &:hover{
 49 |         box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
 50 |         transform: translateY(-5px);
 51 |     }
 52 |     @media only screen and (max-width: 768px){
 53 |         padding: 10px;
 54 |         gap: 8px;
 55 |         width: 300px;
 56 |     }
 57 | 
 58 |     &:hover ${Document}{
 59 |         display: flex;
 60 |     }
 61 | 
 62 |     &:hover ${Span}{
 63 |         overflow: visible;
 64 |         -webkit-line-clamp: unset;
 65 | 
 66 |     }
 67 | 
 68 |     border: 0.1px solid #306EE8;
 69 |     box-shadow: rgba(23, 92, 230, 0.15) 0px 4px 24px;
 70 | `
 71 | 
 72 | const Top = styled.div`
 73 |     width: 100%;
 74 |     display: flex;
 75 |     gap: 12px
 76 | `
 77 | 
 78 | const Image = styled.img`
 79 |     height: 50px;
 80 |     background-color: #000;
 81 |     border-radius: 10px;
 82 |     margin-top: 4px;
 83 |     @media only screen and (max-width: 768px){
 84 |         height: 40px;
 85 |     }
 86 | `
 87 | 
 88 | const Body = styled.div`
 89 |     width: 100%;
 90 |     display: flex;
 91 |     flex-direction: column; 
 92 | `
 93 | 
 94 | 
 95 | const Role = styled.div`
 96 |     font-size: 18px;
 97 |     font-weight: 600;
 98 |     color: ${({ theme }) => theme.text_primary + 99};
 99 |     @media only screen and (max-width: 768px){
100 |         font-size: 14px;
101 |     }
102 | `
103 | 
104 | const Company = styled.div`
105 |     font-size: 14px;
106 |     font-weight: 500;
107 |     color: ${({ theme }) => theme.text_secondary + 99};
108 |     @media only screen and (max-width: 768px){
109 |         font-size: 12px;
110 |     }
111 | `
112 | 
113 | const Date = styled.div`
114 |     font-size: 12px;
115 |     font-weight: 400;
116 |     color: ${({ theme }) => theme.text_secondary + 80};
117 |     @media only screen and (max-width: 768px){
118 |         font-size: 10px;
119 |     }
120 | `
121 | 
122 | 
123 | const Skills = styled.div`
124 |     width: 100%;
125 |     display: flex;
126 |     gap: 12px;
127 |     margin-top: -10px;
128 | `
129 | 
130 | const ItemWrapper = styled.div`
131 |     display: flex;
132 |     flex-wrap: wrap;
133 |     gap: 8px;
134 | `
135 | 
136 | const Skill = styled.div`
137 |     font-size: 15px;
138 |     font-weight: 400;
139 |     color: ${({ theme }) => theme.text_primary + 99};
140 |     @media only screen and (max-width: 768px){
141 |         font-size: 12px;
142 |     }
143 | `
144 | 
145 | 
146 | 
147 | const ExperienceCard = ({ experience }) => {
148 |     return (
149 |         <Card>
150 |             <Top>
151 |                 <Image src={experience.img} />
152 |                 <Body>
153 |                     <Role>{experience.role}</Role>
154 |                     <Company>{experience.company}</Company>
155 |                     <Date>{experience.date}</Date>
156 |                 </Body>
157 |             </Top>
158 |             <Description>
159 |                 {experience?.desc &&
160 |                     <Span>{experience?.desc}</Span>
161 | 
162 |                 }
163 |                 {experience?.skills &&
164 |                     <>
165 |                         <br />
166 |                         <Skills>
167 |                             <b>Skills:</b>
168 |                             <ItemWrapper>
169 |                                 {experience?.skills?.map((skill, index) => (
170 |                                     <Skill>• {skill}</Skill>
171 |                                 ))}
172 |                             </ItemWrapper>
173 |                         </Skills>
174 |                     </>
175 |                 }
176 |             </Description>
177 |             {experience.doc &&
178 |                 <a href={experience.doc} target="new">
179 |                     <Document src={experience.doc} />
180 |                 </a>
181 |             }
182 |         </Card>
183 |     )
184 | }
185 | 
186 | export default ExperienceCard


--------------------------------------------------------------------------------
/src/components/Contact/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import styled from 'styled-components'
  3 | import { useRef } from 'react';
  4 | import emailjs from '@emailjs/browser';
  5 | import { Snackbar } from '@mui/material';
  6 | 
  7 | const Container = styled.div`
  8 | display: flex;
  9 | flex-direction: column;
 10 | justify-content: center;
 11 | position: relative;
 12 | z-index: 1;
 13 | align-items: center;
 14 | @media (max-width: 960px) {
 15 |     padding: 0px;
 16 | }
 17 | `
 18 | 
 19 | const Wrapper = styled.div`
 20 | position: relative;
 21 | display: flex;
 22 | justify-content: space-between;
 23 | align-items: center;
 24 | flex-direction: column;
 25 | width: 100%;
 26 | max-width: 1350px;
 27 | padding: 0px 0px 80px 0px;
 28 | gap: 12px;
 29 | @media (max-width: 960px) {
 30 |     flex-direction: column;
 31 | }
 32 | `
 33 | 
 34 | const Title = styled.div`
 35 | font-size: 42px;
 36 | text-align: center;
 37 | font-weight: 600;
 38 | margin-top: 20px;
 39 |   color: ${({ theme }) => theme.text_primary};
 40 |   @media (max-width: 768px) {
 41 |       margin-top: 12px;
 42 |       font-size: 32px;
 43 |   }
 44 | `;
 45 | 
 46 | const Desc = styled.div`
 47 |     font-size: 18px;
 48 |     text-align: center;
 49 |     max-width: 600px;
 50 |     color: ${({ theme }) => theme.text_secondary};
 51 |     @media (max-width: 768px) {
 52 |         margin-top: 12px;
 53 |         font-size: 16px;
 54 |     }
 55 | `;
 56 | 
 57 | 
 58 | const ContactForm = styled.form`
 59 |   width: 95%;
 60 |   max-width: 600px;
 61 |   display: flex;
 62 |   flex-direction: column;
 63 |   background-color: ${({ theme }) => theme.card};
 64 |   padding: 32px;
 65 |   border-radius: 16px;
 66 |   box-shadow: rgba(23, 92, 230, 0.15) 0px 4px 24px;
 67 |   margin-top: 28px;
 68 |   gap: 12px;
 69 | `
 70 | 
 71 | const ContactTitle = styled.div`
 72 |   font-size: 24px;
 73 |   margin-bottom: 6px;
 74 |   font-weight: 600;
 75 |   color: ${({ theme }) => theme.text_primary};
 76 | `
 77 | 
 78 | const ContactInput = styled.input`
 79 |   flex: 1;
 80 |   background-color: transparent;
 81 |   border: 1px solid ${({ theme }) => theme.text_secondary};
 82 |   outline: none;
 83 |   font-size: 18px;
 84 |   color: ${({ theme }) => theme.text_primary};
 85 |   border-radius: 12px;
 86 |   padding: 12px 16px;
 87 |   &:focus {
 88 |     border: 1px solid ${({ theme }) => theme.primary};
 89 |   }
 90 | `
 91 | 
 92 | const ContactInputMessage = styled.textarea`
 93 |   flex: 1;
 94 |   background-color: transparent;
 95 |   border: 1px solid ${({ theme }) => theme.text_secondary};
 96 |   outline: none;
 97 |   font-size: 18px;
 98 |   color: ${({ theme }) => theme.text_primary};
 99 |   border-radius: 12px;
100 |   padding: 12px 16px;
101 |   &:focus {
102 |     border: 1px solid ${({ theme }) => theme.primary};
103 |   }
104 | `
105 | 
106 | const ContactButton = styled.input`
107 |   width: 100%;
108 |   text-decoration: none;
109 |   text-align: center;
110 |   background: hsla(271, 100%, 50%, 1);
111 |   background: linear-gradient(225deg, hsla(271, 100%, 50%, 1) 0%, hsla(294, 100%, 50%, 1) 100%);
112 |   background: -moz-linear-gradient(225deg, hsla(271, 100%, 50%, 1) 0%, hsla(294, 100%, 50%, 1) 100%);
113 |   background: -webkit-linear-gradient(225deg, hsla(271, 100%, 50%, 1) 0%, hsla(294, 100%, 50%, 1) 100%);
114 |   padding: 13px 16px;
115 |   margin-top: 2px;
116 |   border-radius: 12px;
117 |   border: none;
118 |   color: ${({ theme }) => theme.text_primary};
119 |   font-size: 18px;
120 |   font-weight: 600;
121 | `
122 | 
123 | 
124 | 
125 | const Contact = () => {
126 | 
127 |   //hooks
128 |   const [open, setOpen] = React.useState(false);
129 |   const form = useRef();
130 | 
131 |   const handleSubmit = (e) => {
132 |     e.preventDefault();
133 |     emailjs.sendForm('service_tox7kqs', 'template_nv7k7mj', form.current, 'SybVGsYS52j2TfLbi')
134 |       .then((result) => {
135 |         setOpen(true);
136 |         form.current.reset();
137 |       }, (error) => {
138 |         console.log(error.text);
139 |       });
140 |   }
141 | 
142 | 
143 | 
144 |   return (
145 |     <Container>
146 |       <Wrapper>
147 |         <Title>Contact</Title>
148 |         <Desc>Feel free to reach out to me for any questions or opportunities!</Desc>
149 |         <ContactForm ref={form} onSubmit={handleSubmit}>
150 |           <ContactTitle>Email Me 🚀</ContactTitle>
151 |           <ContactInput placeholder="Your Email" name="from_email" />
152 |           <ContactInput placeholder="Your Name" name="from_name" />
153 |           <ContactInput placeholder="Subject" name="subject" />
154 |           <ContactInputMessage placeholder="Message" rows="4" name="message" />
155 |           <ContactButton type="submit" value="Send" />
156 |         </ContactForm>
157 |         <Snackbar
158 |           open={open}
159 |           autoHideDuration={6000}
160 |           onClose={()=>setOpen(false)}
161 |           message="Email sent successfully!"
162 |           severity="success"
163 |         />
164 |       </Wrapper>
165 |     </Container>
166 |   )
167 | }
168 | 
169 | export default Contact


--------------------------------------------------------------------------------
/src/components/HeroSection/HeroStyle.js:
--------------------------------------------------------------------------------
  1 | import styled from "styled-components";
  2 | import _default from "../../themes/default";
  3 | 
  4 | export const HeroContainer = styled.div`
  5 |   background: ${({ theme }) => theme.card_light};
  6 |   display: flex;
  7 |   justify-content: center;
  8 |   position: relative;
  9 |   padding: 80px 30px;
 10 |   @media (max-width: 960px) {
 11 |     padding: 66px 16px;
 12 |   }
 13 |   @media (max-width: 640) {
 14 |     padding: 32px 16px;
 15 |   }
 16 |   z-index: 1;
 17 | 
 18 |   clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 95%, 0 100%);
 19 | `;
 20 | 
 21 | export const HeroBg = styled.div`
 22 |   position: absolute;
 23 |   display: flex;
 24 |   justify-content: end;
 25 |   top: 0;
 26 |   right: 0;
 27 |   bottom: 0;
 28 |   left: 0;
 29 |   width: 100%;
 30 |   height: 100%;
 31 |   max-width: 1360px;
 32 |   overflow: hidden;
 33 |   padding: 0 30px;
 34 |   top: 50%;
 35 |   left: 50%;
 36 |   -webkit-transform: translateX(-50%) translateY(-50%);
 37 |   transform: translateX(-50%) translateY(-50%);
 38 | 
 39 |   @media (max-width: 960px) {
 40 |     justify-content: center;
 41 |     padding: 0 0px;
 42 |   }
 43 | `;
 44 | 
 45 | export const HeroInnerContainer = styled.div`
 46 |   position: relative;
 47 |   display: flex;
 48 |   justify-content: space-between;
 49 |   align-items: center;
 50 |   width: 100%;
 51 |   max-width: 1100px;
 52 | 
 53 |   @media (max-width: 960px) {
 54 |     flex-direction: column;
 55 |   }
 56 | `;
 57 | export const HeroLeftContainer = styled.div`
 58 |   width: 100%;
 59 |   order: 1;
 60 |   @media (max-width: 960px) {
 61 |     order: 2;
 62 |     margin-bottom: 30px;
 63 |     display: flex;
 64 |     flex-direction: column;
 65 |     align-items: center;
 66 |   }
 67 | 
 68 |   @media (max-width: 640px) {
 69 |     order: 2;
 70 |     margin-bottom: 30px;
 71 |     display: flex;
 72 |     flex-direction: column;
 73 |     align-items: center;
 74 |   }
 75 | `;
 76 | 
 77 | export const HeroRightContainer = styled.div`
 78 |   width: 100%;
 79 |   display: flex;
 80 |   order: 2;
 81 |   justify-content: end;
 82 |   gap: 12px;
 83 |   @media (max-width: 960px) {
 84 |     order: 1;
 85 |     justify-content: center;
 86 |     align-items: center;
 87 |     margin-bottom: 80px;
 88 |   }
 89 | 
 90 |   @media (max-width: 640px) {
 91 |     margin-bottom: 30px;
 92 |   }
 93 | `;
 94 | 
 95 | export const Img = styled.img`
 96 |   position: relative;
 97 |   width: 100%;
 98 |   height: 100%;
 99 |   max-width: 400px;
100 |   max-height: 400px;
101 |   border-radius: 50%;
102 |   border: 2px solid ${({ theme }) => theme.primary};
103 | 
104 |   @media (max-width: 768px) {
105 |     max-width: 400px;
106 |     max-height: 400px;
107 |   }
108 | 
109 |   @media (max-width: 640px) {
110 |     max-width: 280px;
111 |     max-height: 280px;
112 |   }
113 | `;
114 | 
115 | export const Title = styled.div`
116 |   font-weight: 700;
117 |   font-size: 50px;
118 |   color: ${({ theme }) => theme.text_primary};
119 |   line-height: 68px;
120 |   @media (max-width: 960px) {
121 |     text-align: center;
122 |   }
123 | 
124 |   @media (max-width: 640px) {
125 |     font-size: 40px;
126 |     line-height: 48px;
127 |     margin-bottom: 8px;
128 |   }
129 | `;
130 | 
131 | export const TextLoop = styled.div`
132 |   font-weight: 600;
133 |   font-size: 32px;
134 |   display: flex;
135 |   gap: 12px;
136 |   color: ${({ theme }) => theme.text_primary};
137 |   line-height: 68px;
138 |   @media (max-width: 960px) {
139 |     text-align: center;
140 |   }
141 |   @media (max-width: 640px) {
142 |     font-size: 22px;
143 |     line-height: 48px;
144 |     margin-bottom: 16px;
145 |   }
146 | `;
147 | 
148 | export const Span = styled.span`
149 |   color: ${({ theme }) => theme.primary};
150 |   cursor: pointer;
151 | `;
152 | 
153 | export const SubTitle = styled.div`
154 |   font-size: 20px;
155 |   line-height: 32px;
156 |   margin-bottom: 42px;
157 |   color: ${({ theme }) => theme.text_primary + 95};
158 | 
159 |   @media (max-width: 960px) {
160 |     text-align: center;
161 |   }
162 | 
163 |   @media (max-width: 640px) {
164 |     font-size: 16px;
165 |     line-height: 32px;
166 |   }
167 | `;
168 | 
169 | export const ResumeButton = styled.a`
170 |     -webkit-appearance: button;
171 |     -moz-appearance: button;
172 |     appearance: button;
173 |     text-decoration: none;
174 |     width: 95%;
175 |     max-width: 300px;
176 |     text-align: center;
177 |     padding: 16px 0;
178 |     color:${({ theme }) => theme.white};
179 |     border-radius: 20px;
180 |     cursor: pointer;
181 |     font-size: 20px;
182 |     font-weight: 600;
183 |     transition: all 0.2s ease-in-out !important;
184 |     background: hsla(271, 100%, 50%, 1);
185 |     background: linear-gradient(225deg, hsla(271, 100%, 50%, 1) 0%, hsla(294, 100%, 50%, 1) 100%);
186 |     background: -moz-linear-gradient(225deg, hsla(271, 100%, 50%, 1) 0%, hsla(294, 100%, 50%, 1) 100%);
187 |     background: -webkit-linear-gradient(225deg, hsla(271, 100%, 50%, 1) 0%, hsla(294, 100%, 50%, 1) 100%);
188 |     box-shadow:  20px 20px 60px #1F2634,
189 |     -20px -20px 60px #1F2634;
190 |     &:hover {
191 |         transform: scale(1.05);
192 |     transition: all 0.4s ease-in-out;
193 |     box-shadow:  20px 20px 60px #1F2634,
194 |     filter: brightness(1);
195 |     }    
196 |     
197 |     
198 |     @media (max-width: 640px) {
199 |         padding: 12px 0;
200 |         font-size: 18px;
201 |     } 
202 | 
203 | `;
204 | 


--------------------------------------------------------------------------------
/src/components/Navbar/NavbarStyledComponent.js:
--------------------------------------------------------------------------------
  1 | import { Link as LinkR } from 'react-router-dom';
  2 | import styled from 'styled-components';
  3 | import _default from '../../themes/default';
  4 | 
  5 | export const Nav = styled.div`
  6 |     background-color: ${({theme}) => theme.card_light};
  7 |     height: 80px;
  8 |     display: flex;
  9 |     align-items: center;
 10 |     justify-content: center;
 11 |     font-size: 1rem;
 12 |     position: sticky;
 13 |     top: 0;
 14 |     z-index: 10;
 15 |     @media (max-width: 960px) {
 16 |         trastion: 0.8s all ease;
 17 |     }
 18 | `;
 19 | export const NavbarContainer = styled.div`
 20 |   display: flex;
 21 |   justify-content: space-between;
 22 |   align-items: center;
 23 |   height: 60px;
 24 |   z-index: 1;
 25 |   width: 100%;
 26 |   padding: 0 24px;
 27 |   max-width: 1200px;
 28 | `;
 29 | 
 30 | export const NavLogo = styled(LinkR)`
 31 |     width: 80%;    
 32 |     padding: 0 6px;
 33 |     display: flex;
 34 |     justify-content: start;
 35 |     align-items: center;
 36 |     text-decoration: none;
 37 |     @media (max-width: 640px) {
 38 |       padding: 0 0px;
 39 |   }
 40 | `;
 41 | export const Span = styled.div`
 42 |     padding: 0 4px;
 43 |     font-weight: bold;
 44 |     font-size: 18px;
 45 | `;
 46 | export const NavItems = styled.ul`
 47 |     width: 100%;
 48 |     display: flex;
 49 |     align-items: center;
 50 |     justify-content:center;
 51 |     gap: 32px;
 52 |     padding: 0 6px;
 53 |     list-style: none;
 54 | 
 55 |     @media screen and (max-width: 768px) {
 56 |       display: none;
 57 |     }
 58 | `;
 59 | 
 60 | export const NavLink = styled.a`
 61 |     color: ${({ theme }) => theme.text_primary};
 62 |     font-weight: 500;
 63 |     cursor: pointer;
 64 |     transition: all 0.2s ease-in-out;
 65 |     text-decoration: none;
 66 |     :hover {
 67 |       color: ${({ theme }) => theme.primary};
 68 |     }
 69 | 
 70 |     &.active {
 71 |       border-bottom: 2px solid ${({ theme }) => theme.primary};
 72 |     }
 73 | `;
 74 | 
 75 | 
 76 | export const GitHubButton = styled.a`
 77 |   border: 1.8px solid ${({ theme }) => theme.primary};
 78 |   justify-content: center;
 79 |   display: flex;
 80 |   align-items: center;
 81 |   height: 70%;
 82 |   border-radius: 20px;
 83 |   color: ${({ theme }) => theme.primary};
 84 |   cursor: pointer;
 85 |   padding: 0 20px;
 86 |   font-weight: 500;
 87 |   text-decoration: none;
 88 |   font-size: 16px;
 89 |   transition: all 0.6s ease-in-out;
 90 |     :hover {
 91 |       background: ${({ theme }) => theme.primary};
 92 |       color: ${({ theme }) => theme.white};     
 93 |     }
 94 |     @media screen and (max-width: 768px) { 
 95 |     font-size: 14px;
 96 |     }
 97 | `;
 98 | 
 99 | export const ButtonContainer = styled.div`
100 |   width: 80%;  
101 |   height: 100%;
102 |   display: flex;
103 |   justify-content: end;
104 |   align-items: center;
105 |   padding: 0 6px;
106 |   @media screen and (max-width: 768px) {
107 |     display: none;
108 |   }
109 | `;
110 | 
111 | 
112 | export const MobileIcon = styled.div`
113 |   display: none;
114 |   @media screen and (max-width: 768px) {
115 |     display: block;
116 |     position: absolute;
117 |     top: 0;
118 |     right: 0;
119 |     transform: translate(-100%, 60%);
120 |     font-size: 1.5rem;
121 |     cursor: pointer;
122 |     color: ${({ theme }) => theme.text_primary};
123 |   }
124 | `
125 | 
126 | export const MobileMenu = styled.div`
127 |     display: flex;
128 |     flex-direction: column;
129 |     justify-content: center;
130 |     gap: 16px;
131 |     position: absolute;
132 |     top: 80px;
133 |     right: 0;
134 |     width: 100%;
135 |     padding: 12px 40px 24px 40px;
136 |     background: ${({ theme }) => theme.card_light+99};
137 |     transition: all 0.6s ease-in-out;
138 |     transform: ${({ isOpen }) => (isOpen ? 'translateY(0)' : 'translateY(-100%)')};
139 |     border-radius: 0 0 20px 20px;
140 |     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
141 |     opacity: ${({ isOpen }) => (isOpen ? '100%' : '0')};
142 |     z-index: ${({ isOpen }) => (isOpen ? '1000' : '-1000')};
143 | 
144 | `
145 | 
146 | export const MobileMenuItems = styled.ul`
147 |   display: flex;
148 |   flex-direction: column;
149 |   align-items: center;
150 |   justify-content: center;
151 |   gap: 32px;
152 |   list-style: none;
153 |   width: 100%;
154 |   height: 100%;
155 | `
156 | 
157 | export const MobileMenuLink = styled(LinkR)`
158 |   color: ${({ theme }) => theme.text_primary};
159 |   font-weight: 500;
160 |   cursor: pointer;
161 |   transition: all 0.2s ease-in-out;
162 |   text-decoration: none;
163 |   :hover {
164 |     color: ${({ theme }) => theme.primary};
165 |   }
166 | 
167 |   &.active {
168 |     border-bottom: 2px solid ${({ theme }) => theme.primary};
169 |   }
170 | `;
171 | 
172 | export const MobileMenuButton = styled.a`
173 |   border: 1.8px solid ${({ theme }) => theme.primary};
174 |   justify-content: center;
175 |   display: flex;
176 |   align-items: center;
177 |   height: 70%;
178 |   border-radius: 20px;
179 |   color: ${({ theme }) => theme.primary};
180 |   cursor: pointer;
181 |   padding: 0 20px;
182 |   font-weight: 500;
183 |   text-decoration: none;
184 |   font-size: 16px;
185 |   transition: all 0.6s ease-in-out;
186 | 
187 |   :hover {
188 |     background: ${({ theme }) => theme.primary};
189 |     color: ${({ theme }) => theme.white};
190 |   }
191 | `;
192 | 
193 | export  const MobileLink = styled.a`
194 |   color: ${({ theme }) => theme.text_primary};
195 |   font-weight: 500;
196 |   cursor: pointer;
197 |   transition: all 0.2s ease-in-out;
198 |   text-decoration: none;
199 |   :hover {
200 |     color: ${({ theme }) => theme.primary};
201 |   }
202 | 
203 |   &.active {
204 |     border-bottom: 2px solid ${({ theme }) => theme.primary};
205 |   }
206 | `;
207 | 
208 | export const MobileNavLogo = styled(LinkR)`
209 |   width: 80%;
210 |   padding: 0 6px;
211 |   display: flex;
212 |   justify-content: start;
213 |   align-items: center;
214 |   text-decoration: none;
215 |   @media (max-width: 640px) {
216 |     padding: 0 0px;
217 |   }
218 | `;


--------------------------------------------------------------------------------
/src/components/ProjectDetails/index.jsx:
--------------------------------------------------------------------------------
  1 | import { CloseRounded, GitHub, LinkedIn } from '@mui/icons-material';
  2 | import { Modal } from '@mui/material';
  3 | import React from 'react'
  4 | import styled from 'styled-components'
  5 | 
  6 | const Container = styled.div`
  7 | width: 100%;
  8 | height: 100%;
  9 | position: absolute;
 10 | top: 0;
 11 | left: 0;
 12 | background-color: #000000a7;
 13 | display: flex;
 14 | align-items: top;
 15 | justify-content: center;
 16 | overflow-y: scroll;
 17 | transition: all 0.5s ease;
 18 | `;
 19 | 
 20 | const Wrapper = styled.div`
 21 | max-width: 800px;
 22 | width: 100%;
 23 | border-radius: 16px;
 24 | margin: 50px 12px;
 25 | height: min-content;
 26 | background-color: ${({ theme }) => theme.card};
 27 | color: ${({ theme }) => theme.text_primary};
 28 | padding: 20px;
 29 | display: flex;
 30 | flex-direction: column;
 31 | position: relative;
 32 | `;
 33 | 
 34 | const Title = styled.div`
 35 |   font-size: 28px;
 36 |   font-weight: 600;
 37 |   color: ${({ theme }) => theme.text_primary};
 38 |   margin: 8px 6px 0px 6px;
 39 |   @media only screen and (max-width: 600px) {
 40 |       font-size: 24px;
 41 |       margin: 6px 6px 0px 6px;
 42 |   }
 43 | `;
 44 | 
 45 | const Date = styled.div`
 46 |     font-size: 16px;
 47 |     margin: 2px 6px;
 48 |     font-weight: 400;
 49 |     color: ${({ theme }) => theme.text_secondary};
 50 |     @media only screen and (max-width: 768px){
 51 |         font-size: 12px;
 52 |     }
 53 | `
 54 | 
 55 | 
 56 | 
 57 | const Desc = styled.div`
 58 |     font-size: 16px;
 59 |     font-weight: 400;
 60 |     color: ${({ theme }) => theme.text_primary};
 61 |     margin: 8px 6px;
 62 |     @media only screen and (max-width: 600px) {
 63 |         font-size: 14px;
 64 |         margin: 6px 6px;
 65 |     }
 66 | `;
 67 | 
 68 | const Image = styled.img`
 69 |     width: 100%;
 70 |     object-fit: cover;
 71 |     border-radius: 12px;
 72 |     margin-top: 30px;
 73 |     box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
 74 | `;
 75 | 
 76 | const Label = styled.div`
 77 |     font-size: 20px;
 78 |     font-weight: 600;
 79 |     color: ${({ theme }) => theme.text_primary};
 80 |     margin: 8px 6px;
 81 |     @media only screen and (max-width: 600px) {
 82 |         font-size: 16px;
 83 |         margin: 8px 6px;
 84 |     }
 85 | `;
 86 | 
 87 | const Tags = styled.div`
 88 |     display: flex;
 89 |     flex-wrap: wrap;
 90 |     margin: 8px 0px;
 91 |     @media only screen and (max-width: 600px) {
 92 |         margin: 4px 0px;
 93 |     }
 94 | `;
 95 | 
 96 | const Tag = styled.div`
 97 |     font-size: 14px;
 98 |     font-weight: 400;
 99 |     color: ${({ theme }) => theme.primary};
100 |     margin: 4px;
101 |     padding: 4px 8px;
102 |     border-radius: 8px;
103 |     background-color: ${({ theme }) => theme.primary + 20};
104 |     @media only screen and (max-width: 600px) {
105 |         font-size: 12px;
106 |     }
107 | `;
108 | 
109 | const Members = styled.div`
110 |     display: flex;
111 |     flex-direction: column;
112 |     gap: 6px;
113 |     flex-wrap: wrap;
114 |     margin: 12px 6px;
115 |     @media only screen and (max-width: 600px) {
116 |         margin: 4px 6px;
117 |     }
118 | `;
119 | 
120 | const Member = styled.div`
121 |     display: flex;
122 |     align-items: center;
123 |     gap: 12px;
124 | `;
125 | 
126 | const MemberImage = styled.img`
127 |     width: 50px;
128 |     height: 50px;
129 |     object-fit: cover;
130 |     border-radius: 50%;
131 |     margin-bottom: 4px;
132 |     box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
133 |     @media only screen and (max-width: 600px) {
134 |         width: 32px;
135 |         height: 32px;
136 |     }
137 | `;
138 | 
139 | const MemberName = styled.div`
140 |     font-size: 16px;
141 |     font-weight: 500;
142 |     width: 200px;
143 |     color: ${({ theme }) => theme.text_primary};
144 |     @media only screen and (max-width: 600px) {
145 |         font-size: 14px;
146 |     }
147 | `;
148 | 
149 | 
150 | const ButtonGroup = styled.div`
151 |     display: flex;
152 |     justify-content: flex-end;
153 |     margin: 12px 0px;
154 |     gap: 12px;
155 | `;
156 | 
157 | const Button = styled.a`
158 |     width: 100%;
159 |     text-align: center;
160 |     font-size: 16px;
161 |     font-weight: 600;
162 |     color: ${({ theme }) => theme.text_primary};
163 |     padding: 12px 16px;
164 |     border-radius: 8px;
165 |     background-color: ${({ theme }) => theme.primary};
166 |     ${({ dull, theme }) => dull && `
167 |         background-color: ${theme.bgLight};
168 |         color: ${theme.text_secondary};
169 |         &:hover {
170 |             background-color: ${({ theme }) => theme.bg + 99};
171 |         }
172 |     `}
173 |     cursor: pointer;
174 |     text-decoration: none;
175 |     transition: all 0.5s ease;
176 |     &:hover {
177 |         background-color: ${({ theme }) => theme.primary + 99};
178 |     }
179 |     @media only screen and (max-width: 600px) {
180 |         font-size: 12px;
181 |     }
182 | `;
183 | 
184 | 
185 | const index = ({ openModal, setOpenModal }) => {
186 |     const project = openModal?.project;
187 |     return (
188 |         <Modal open={true} onClose={() => setOpenModal({ state: false, project: null })}>
189 |             <Container>
190 |                 <Wrapper>
191 |                     <CloseRounded
192 |                         style={{
193 |                             position: "absolute",
194 |                             top: "10px",
195 |                             right: "20px",
196 |                             cursor: "pointer",
197 |                         }}
198 |                         onClick={() => setOpenModal({ state: false, project: null })}
199 |                     />
200 |                     <Image src={project?.image} />
201 |                     <Title>{project?.title}</Title>
202 |                     <Date>{project.date}</Date>
203 |                     <Tags>
204 |                         {project?.tags.map((tag) => (
205 |                             <Tag>{tag}</Tag>
206 |                         ))}
207 |                     </Tags>
208 |                     <Desc>{project?.description}</Desc>
209 |                     {project.member && (
210 |                         <>
211 |                             <Label>Members</Label>
212 |                             <Members>
213 |                                 {project?.member.map((member) => (
214 |                                     <Member>
215 |                                         <MemberImage src={member.img} />
216 |                                         <MemberName>{member.name}</MemberName>
217 |                                         <a href={member.github} target="new" style={{textDecoration: 'none', color: 'inherit'}}>
218 |                                             <GitHub />
219 |                                         </a>
220 |                                         <a href={member.linkedin} target="new" style={{textDecoration: 'none', color: 'inherit'}}>
221 |                                             <LinkedIn />
222 |                                         </a>
223 |                                     </Member>
224 |                                 ))}
225 |                             </Members>
226 |                         </>
227 |                     )}
228 |                     <ButtonGroup>
229 |                         <Button dull href={project?.github} target='new'>View Code</Button>
230 |                         <Button href={project?.webapp} target='new'>View Live App</Button>
231 |                     </ButtonGroup>
232 |                 </Wrapper>
233 |             </Container>
234 | 
235 |         </Modal>
236 |     )
237 | }
238 | 
239 | export default index


--------------------------------------------------------------------------------
/src/components/HeroBgAnimation/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Div } from './HeroBgAnimationStyle';
  3 | const HeroBgAnimation = () => (
  4 |   <Div>
  5 |     <svg
  6 |       className="BgAnimation__svg"
  7 |       viewBox="0 0 602 602"
  8 |       fill="none"
  9 |       xmlns="http://www.w3.org/2000/svg"
 10 |     >
 11 |       <g opacity="0.15">
 12 |         <path
 13 |           fillRule="evenodd"
 14 |           clipRule="evenodd"
 15 |           d="M201.337 87.437C193.474 79.5738 180.725 79.5738 172.862 87.437L87.437 172.862C79.5739 180.725 79.5739 193.474 87.437 201.337L400.663 514.563C408.526 522.426 421.275 522.426 429.138 514.563L514.563 429.138C522.426 421.275 522.426 408.526 514.563 400.663L201.337 87.437ZM30.4869 115.912C-8.82897 155.228 -8.82897 218.972 30.4869 258.287L343.713 571.513C383.028 610.829 446.772 610.829 486.088 571.513L571.513 486.088C610.829 446.772 610.829 383.028 571.513 343.713L258.287 30.4869C218.972 -8.82896 155.228 -8.82896 115.912 30.4869L30.4869 115.912Z"
 16 |           stroke="url(#paint0_radial)"
 17 |           id="path_0"
 18 |         />
 19 |         <path
 20 |           d="M514.563 201.337C522.426 193.474 522.426 180.725 514.563 172.862L429.138 87.437C421.275 79.5738 408.526 79.5739 400.663 87.437L358.098 130.002L301.148 73.0516L343.713 30.4869C383.028 -8.82896 446.772 -8.82896 486.088 30.4869L571.513 115.912C610.829 155.228 610.829 218.972 571.513 258.287L357.802 471.999L300.852 415.049L514.563 201.337Z"
 21 |           stroke="url(#paint1_radial)"
 22 |           id="path_1"
 23 |         />
 24 |         <path
 25 |           d="M243.901 471.999L201.337 514.563C193.474 522.426 180.725 522.426 172.862 514.563L87.437 429.138C79.5739 421.275 79.5739 408.526 87.437 400.663L301.148 186.952L244.198 130.002L30.4869 343.713C-8.82897 383.028 -8.82897 446.772 30.4869 486.088L115.912 571.513C155.228 610.829 218.972 610.829 258.287 571.513L300.852 528.949L243.901 471.999Z"
 26 |           stroke="url(#paint2_radial)"
 27 |           id="path_2"
 28 |         />
 29 |       </g>
 30 |       <ellipse
 31 |         cx="295.027"
 32 |         cy="193.118"
 33 |         transform="translate(-295.027 -193.118)"
 34 |         rx="1.07306"
 35 |         ry="1.07433"
 36 |         fill="#945DD6"
 37 |       >
 38 |         <animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
 39 |           <mpath xlinkHref="#path_2" />
 40 |         </animateMotion>
 41 |       </ellipse>
 42 |       <path
 43 |         d="M294.685 193.474L268.932 219.258"
 44 |         transform="translate(-294.685 -193.474) rotate(45 294.685 193.474)"
 45 |         stroke="url(#paint3_linear)"
 46 |       >
 47 |         <animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
 48 |           <mpath xlinkHref="#path_2" />
 49 |         </animateMotion>
 50 |       </path>
 51 |       <ellipse
 52 |         cx="295.027"
 53 |         cy="193.118"
 54 |         transform="translate(-295.027 -193.118)"
 55 |         rx="1.07306"
 56 |         ry="1.07433"
 57 |         fill="#46737"
 58 |       >
 59 |         <animateMotion
 60 |           dur="5s"
 61 |           begin="1"
 62 |           repeatCount="indefinite"
 63 |           rotate="auto"
 64 |         >
 65 |           <mpath xlinkHref="#path_2" />
 66 |         </animateMotion>
 67 |       </ellipse>
 68 |       <path
 69 |         d="M294.685 193.474L268.932 219.258"
 70 |         transform="translate(-294.685 -193.474) rotate(45 294.685 193.474)"
 71 |         stroke="url(#paint7_linear)"
 72 |       >
 73 |         <animateMotion
 74 |           dur="5s"
 75 |           begin="1"
 76 |           repeatCount="indefinite"
 77 |           rotate="auto"
 78 |         >
 79 |           <mpath xlinkHref="#path_2" />
 80 |         </animateMotion>
 81 |       </path>
 82 |       <ellipse
 83 |         cx="476.525"
 84 |         cy="363.313"
 85 |         rx="1.07433"
 86 |         ry="1.07306"
 87 |         transform="translate(-476.525 -363.313) rotate(90 476.525 363.313)"
 88 |         fill="#945DD6"
 89 |       >
 90 |         <animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
 91 |           <mpath xlinkHref="#path_0" />
 92 |         </animateMotion>
 93 |       </ellipse>
 94 |       <path
 95 |         d="M476.171 362.952L450.417 337.168"
 96 |         transform="translate(-476.525 -363.313) rotate(-45 476.171 362.952)"
 97 |         stroke="url(#paint4_linear)"
 98 |       >
 99 |         <animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
100 |           <mpath xlinkHref="#path_0" />
101 |         </animateMotion>
102 |       </path>
103 |       <ellipse
104 |         cx="382.164"
105 |         cy="155.029"
106 |         rx="1.07433"
107 |         ry="1.07306"
108 |         transform="translate(-382.164 -155.029) rotate(90 382.164 155.029)"
109 |         fill="#F46737"
110 |       >
111 |         <animateMotion
112 |           dur="10s"
113 |           begin="1"
114 |           repeatCount="indefinite"
115 |           rotate="auto"
116 |         >
117 |           <mpath xlinkHref="#path_0" />
118 |         </animateMotion>
119 |       </ellipse>
120 |       <path
121 |         d="M381.81 154.669L356.057 128.885"
122 |         transform="translate(-381.81 -154.669) rotate(-45 381.81 154.669)"
123 |         stroke="url(#paint5_linear)"
124 |       >
125 |         <animateMotion
126 |           dur="10s"
127 |           begin="1"
128 |           repeatCount="indefinite"
129 |           rotate="auto"
130 |         >
131 |           <mpath xlinkHref="#path_0" />
132 |         </animateMotion>
133 |       </path>
134 |       <ellipse
135 |         cx="333.324"
136 |         cy="382.691"
137 |         rx="1.07306"
138 |         ry="1.07433"
139 |         transform="translate(-333.324 -382.691) rotate(-180 333.324 382.691)"
140 |         fill="#F46737"
141 |       >
142 |         <animateMotion
143 |           dur="5s"
144 |           begin="0"
145 |           repeatCount="indefinite"
146 |           rotate="auto"
147 |         >
148 |           <mpath xlinkHref="#path_1" />
149 |         </animateMotion>
150 |       </ellipse>
151 |       <path
152 |         d="M333.667 382.335L359.42 356.551"
153 |         transform="scale(-1 1) translate(-333.667 -382.335) rotate(45 333.667 382.335)"
154 |         stroke="url(#paint6_linear)"
155 |       >
156 |         <animateMotion
157 |           dur="5s"
158 |           begin="0"
159 |           repeatCount="indefinite"
160 |           rotate="auto"
161 |         >
162 |           <mpath xlinkHref="#path_1" />
163 |         </animateMotion>
164 |       </path>
165 |       <ellipse
166 |         cx="165.524"
167 |         cy="93.9596"
168 |         rx="1.07306"
169 |         ry="1.07433"
170 |         transform="translate(-165.524 -93.9596)"
171 |         fill="#F46737"
172 |       >
173 |         <animateMotion
174 |           dur="10s"
175 |           begin="3"
176 |           repeatCount="indefinite"
177 |           rotate="auto"
178 |         >
179 |           <mpath xlinkHref="#path_0" />
180 |         </animateMotion>
181 |       </ellipse>
182 |       <path
183 |         d="M165.182 94.3159L139.429 120.1"
184 |         transform="translate(-165.182 -94.3159) rotate(45 165.182 94.3159)"
185 |         stroke="url(#paint7_linear)"
186 |       >
187 |         <animateMotion
188 |           dur="10s"
189 |           begin="3"
190 |           repeatCount="indefinite"
191 |           rotate="auto"
192 |         >
193 |           <mpath xlinkHref="#path_0" />
194 |         </animateMotion>
195 |       </path>
196 |       <ellipse
197 |         cx="476.525"
198 |         cy="363.313"
199 |         rx="1.07433"
200 |         ry="1.07306"
201 |         transform="translate(-476.525 -363.313) rotate(90 476.525 363.313)"
202 |         fill="#13ADC7"
203 |       >
204 |         <animateMotion
205 |           dur="12s"
206 |           begin="4"
207 |           repeatCount="indefinite"
208 |           rotate="auto"
209 |         >
210 |           <mpath xlinkHref="#path_0" />
211 |         </animateMotion>
212 |       </ellipse>
213 |       <path
214 |         d="M476.171 362.952L450.417 337.168"
215 |         transform="translate(-476.525 -363.313) rotate(-45 476.171 362.952)"
216 |         stroke="url(#paint11_linear)"
217 |       >
218 |         <animateMotion
219 |           dur="12s"
220 |           begin="4"
221 |           repeatCount="indefinite"
222 |           rotate="auto"
223 |         >
224 |           <mpath xlinkHref="#path_0" />
225 |         </animateMotion>
226 |       </path>
227 |       <defs>
228 |         <radialGradient
229 |           id="paint0_radial"
230 |           cx="0"
231 |           cy="0"
232 |           r="1"
233 |           gradientUnits="userSpaceOnUse"
234 |           gradientTransform="translate(301 301) rotate(90) scale(300)"
235 |         >
236 |           <stop offset="0.333333" stopColor="#FBFBFB" />
237 |           <stop offset="1" stopColor="white" stopOpacity="0" />
238 |         </radialGradient>
239 |         <radialGradient
240 |           id="paint1_radial"
241 |           cx="0"
242 |           cy="0"
243 |           r="1"
244 |           gradientUnits="userSpaceOnUse"
245 |           gradientTransform="translate(301 301) rotate(90) scale(300)"
246 |         >
247 |           <stop offset="0.333333" stopColor="#FBFBFB" />
248 |           <stop offset="1" stopColor="white" stopOpacity="0" />
249 |         </radialGradient>
250 |         <radialGradient
251 |           id="paint2_radial"
252 |           cx="0"
253 |           cy="0"
254 |           r="1"
255 |           gradientUnits="userSpaceOnUse"
256 |           gradientTransform="translate(301 301) rotate(90) scale(300)"
257 |         >
258 |           <stop offset="0.333333" stopColor="#FBFBFB" />
259 |           <stop offset="1" stopColor="white" stopOpacity="0" />
260 |         </radialGradient>
261 |         <linearGradient
262 |           id="paint3_linear"
263 |           x1="295.043"
264 |           y1="193.116"
265 |           x2="269.975"
266 |           y2="218.154"
267 |           gradientUnits="userSpaceOnUse"
268 |         >
269 |           <stop stopColor="#945DD6" />
270 |           <stop offset="1" stopColor="#945DD6" stopOpacity="0" />
271 |         </linearGradient>
272 |         <linearGradient
273 |           id="paint4_linear"
274 |           x1="476.529"
275 |           y1="363.31"
276 |           x2="451.461"
277 |           y2="338.272"
278 |           gradientUnits="userSpaceOnUse"
279 |         >
280 |           <stop stopColor="#945DD6" />
281 |           <stop offset="1" stopColor="#945DD6" stopOpacity="0" />
282 |         </linearGradient>
283 |         <linearGradient
284 |           id="paint5_linear"
285 |           x1="382.168"
286 |           y1="155.027"
287 |           x2="357.1"
288 |           y2="129.989"
289 |           gradientUnits="userSpaceOnUse"
290 |         >
291 |           <stop stopColor="#F46737" />
292 |           <stop offset="1" stopColor="#F46737" stopOpacity="0" />
293 |         </linearGradient>
294 |         <linearGradient
295 |           id="paint6_linear"
296 |           x1="333.309"
297 |           y1="382.693"
298 |           x2="358.376"
299 |           y2="357.655"
300 |           gradientUnits="userSpaceOnUse"
301 |         >
302 |           <stop stopColor="#F46737" />
303 |           <stop offset="1" stopColor="#F46737" stopOpacity="0" />
304 |         </linearGradient>
305 |         <linearGradient
306 |           id="paint7_linear"
307 |           x1="165.54"
308 |           y1="93.9578"
309 |           x2="140.472"
310 |           y2="118.996"
311 |           gradientUnits="userSpaceOnUse"
312 |         >
313 |           <stop stopColor="#F46737" />
314 |           <stop offset="1" stopColor="#F46737" stopOpacity="0" />
315 |         </linearGradient>
316 |         <linearGradient
317 |           id="paint8_linear"
318 |           x1="414.367"
319 |           y1="301.156"
320 |           x2="439.435"
321 |           y2="276.118"
322 |           gradientUnits="userSpaceOnUse"
323 |         >
324 |           <stop stopColor="#13ADC7" />
325 |           <stop offset="1" stopColor="#13ADC7" stopOpacity="0" />
326 |         </linearGradient>
327 |         <linearGradient
328 |           id="paint9_linear"
329 |           x1="515.943"
330 |           y1="288.238"
331 |           x2="541.339"
332 |           y2="291.454"
333 |           gradientUnits="userSpaceOnUse"
334 |         >
335 |           <stop stopColor="#13ADC7" />
336 |           <stop offset="1" stopColor="#13ADC7" stopOpacity="0" />
337 |         </linearGradient>
338 |         <linearGradient
339 |           id="paint10_linear"
340 |           x1="117.001"
341 |           y1="230.619"
342 |           x2="117.36"
343 |           y2="258.193"
344 |           gradientUnits="userSpaceOnUse"
345 |         >
346 |           <stop stopColor="#945DD6" />
347 |           <stop offset="1" stopColor="#945DD6" stopOpacity="0" />
348 |         </linearGradient>
349 |         <linearGradient
350 |           id="paint11_linear"
351 |           x1="476.529"
352 |           y1="363.31"
353 |           x2="451.461"
354 |           y2="338.272"
355 |           gradientUnits="userSpaceOnUse"
356 |         >
357 |           <stop stopColor="#13ADC7" />
358 |           <stop offset="1" stopColor="#13ADC7" stopOpacity="0" />
359 |         </linearGradient>
360 |       </defs>
361 |     </svg>
362 |   </Div>
363 | );
364 | 
365 | export default HeroBgAnimation;


--------------------------------------------------------------------------------
/src/data/constants.js:
--------------------------------------------------------------------------------
  1 | export const Bio = {
  2 |   name: "Rishav Chanda",
  3 |   roles: [
  4 |     "Full Stack Developer",
  5 |     "Android Developer",
  6 |     "UI/UX Designer",
  7 |     "Programmer",
  8 |   ],
  9 |   description:
 10 |     "I am a motivated and versatile individual, always eager to take on new challenges. With a passion for learning I am dedicated to delivering high-quality results. With a positive attitude and a growth mindset, I am ready to make a meaningful contribution and achieve great things.",
 11 |   github: "https://github.com/rishavchanda",
 12 |   resume:
 13 |     "https://drive.google.com/file/d/1ffZrcMcn8UatXGIaautbbqpV7ADNaETA/view?usp=sharing",
 14 |   linkedin: "https://www.linkedin.com/in/rishav-chanda-b89a791b3/",
 15 |   twitter: "https://twitter.com/RishavChanda",
 16 |   insta: "https://www.instagram.com/rishav_chanda/",
 17 |   facebook: "https://www.facebook.com/rishav.chanda.165/",
 18 | };
 19 | 
 20 | export const skills = [
 21 |   {
 22 |     title: "Frontend",
 23 |     skills: [
 24 |       {
 25 |         name: "React Js",
 26 |         image:
 27 |           "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K",
 28 |       },
 29 |       {
 30 |         name: "Redux",
 31 |         image:
 32 |           "https://d33wubrfki0l68.cloudfront.net/0834d0215db51e91525a25acf97433051f280f2f/c30f5/img/redux.svg",
 33 |       },
 34 |       {
 35 |         name: "Next Js",
 36 |         image:
 37 |           "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACTklEQVR4Ab1XAaQqURB9DyohSykREpRIQSAlBCoECKUFCSRCBBEAaSEABQEoCIEASCwAUICALgCo83do0//9v819XX845O7VnDkzOzP7JWGaBd3C3IJpQVjAHeJ+Rs9a97vKLGrBsB1KgMhEP3FMUUwt4ENMfxr1yQIU4SSjRkbeOZtERmHk6pXQVDlnkHh9S+QLTm1hkiz4n/gzFQuny9FoFLquE+i34x+n02k0m00UCoV3BIzn3MMJrVYLtp1OJ0cS/X4f5/MZhmG8IyDsWtDfEaDIn2232/3zbrvdxuFwwGg04qRBt+VnETBNE0IIkE2n07/erdfrWK/X6Ha73Hb9ZXII3G43ivy3dNRqtZe7lUoFs9mM6oBDwCQCgquALT1FT3a5XF7qIZ/PYzgcolqtcggIIgBZAgRKB6lCRalp2uM8k8mAVMrlchwC+DEBipycE4n5fP44j8ViKJVKSCaTbAJCpgaez4vFIsjoWa/XA50FAgEkEgmEw2F2CkxZBZ5Br5tt1ITcbjd8Ph88Hg+7CBefECCsVitS4aVJcV9D/VMCVITk/Hq9YrPZyBBo2a1YMGvAcQYcj0cCtWMugcdYNhjDiBrP25mx3++x3W6RzWZZ8isfxzQLlsslJpMJpYY5jhkqcOH1ejEYDDAej9FoNOByuZxGsfqVzC7KTqcDSkkqleKsZOqX0mAwiHK5DGrJfr+fs5SqX8sjkQji8ThCoRC+v78Za7l6JagrUh3YkUuZpqgwDaecc9VYSDoV5Fg+at7n+eLN57kuE/EvzHr/Kvs31aYAAAAASUVORK5CYII=",
 38 |       },
 39 |       {
 40 |         name: "HTML",
 41 |         image: "https://www.w3.org/html/logo/badge/html5-badge-h-solo.png",
 42 |       },
 43 |       {
 44 |         name: "CSS",
 45 |         image:
 46 |           "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1452px-CSS3_logo_and_wordmark.svg.png",
 47 |       },
 48 |       {
 49 |         name: "JavaScript",
 50 |         image:
 51 |           "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/800px-JavaScript-logo.png",
 52 |       },
 53 |       {
 54 |         name: "Bootstrap",
 55 |         image:
 56 |           "https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png",
 57 |       },
 58 |       {
 59 |         name: "Material UI",
 60 |         image:
 61 |           "data:image/png;base64,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",
 62 |       },
 63 |       {
 64 |         name: "Flutter",
 65 |         image:
 66 |           "https://cdn-images-1.medium.com/max/1200/1*5-aoK8IBmXve5whBQM90GA.png",
 67 |       },
 68 |     ],
 69 |   },
 70 |   {
 71 |     title: "Backend",
 72 |     skills: [
 73 |       {
 74 |         name: "Node Js",
 75 |         image: "https://nodejs.org/static/images/logo.svg",
 76 |       },
 77 |       {
 78 |         name: "Express Js",
 79 |         image:
 80 |           "data:image/png;base64,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",
 81 |       },
 82 |       {
 83 |         name: "Graph Ql",
 84 |         image: "https://www.vectorlogo.zone/logos/graphql/graphql-icon.svg",
 85 |       },
 86 |       {
 87 |         name: "Python",
 88 |         image:
 89 |           "https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg",
 90 |       },
 91 |       {
 92 |         name: "MySQL",
 93 |         image:
 94 |           "https://raw.githubusercontent.com/devicons/devicon/master/icons/mysql/mysql-original-wordmark.svg",
 95 |       },
 96 |       {
 97 |         name: "Postgresql",
 98 |         image: "https://www.postgresql.org/media/img/about/press/elephant.png",
 99 |       },
100 |       {
101 |         name: "MongoDB",
102 |         image:
103 |           "https://raw.githubusercontent.com/devicons/devicon/master/icons/mongodb/mongodb-original-wordmark.svg",
104 |       },
105 |       {
106 |         name: "Firebase",
107 |         image: "https://www.vectorlogo.zone/logos/firebase/firebase-icon.svg",
108 |       },
109 |     ],
110 |   },
111 |   {
112 |     title: "Android",
113 |     skills: [
114 |       {
115 |         name: "Java",
116 |         image:
117 |           "https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg",
118 |       },
119 |       {
120 |         name: "Kotlin",
121 |         image:
122 |           "https://www.vectorlogo.zone/logos/kotlinlang/kotlinlang-icon.svg",
123 |       },
124 |       {
125 |         name: "XML",
126 |         image:
127 |           "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBMw6_RdwKQ9bDFfnKDX1iwMl4bVJEvd9PP53XuIw&s",
128 |       },
129 |       {
130 |         name: "Android Studio",
131 |         image:
132 |           "https://developer.android.com/static/studio/images/new-studio-logo-1_1920.png",
133 |       },
134 |     ],
135 |   },
136 |   {
137 |     title: "Others",
138 |     skills: [
139 |       {
140 |         name: "Git",
141 |         image:
142 |           "https://camo.githubusercontent.com/fbfcb9e3dc648adc93bef37c718db16c52f617ad055a26de6dc3c21865c3321d/68747470733a2f2f7777772e766563746f726c6f676f2e7a6f6e652f6c6f676f732f6769742d73636d2f6769742d73636d2d69636f6e2e737667",
143 |       },
144 |       {
145 |         name: "GitHub",
146 |         image:
147 |           "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
148 |       },
149 |       {
150 |         name: "Docker",
151 |         image:
152 |           "https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg",
153 |       },
154 |       {
155 |         name: "Netlify",
156 |         image:
157 |           "https://seeklogo.com/images/N/netlify-logo-BD8F8A77E2-seeklogo.com.png",
158 |       },
159 |       {
160 |         name: "VS Code",
161 |         image:
162 |           "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/512px-Visual_Studio_Code_1.35_icon.svg.png?20210804221519",
163 |       },
164 |       {
165 |         name: "Postman",
166 |         image:
167 |           "https://camo.githubusercontent.com/93b32389bf746009ca2370de7fe06c3b5146f4c99d99df65994f9ced0ba41685/68747470733a2f2f7777772e766563746f726c6f676f2e7a6f6e652f6c6f676f732f676574706f73746d616e2f676574706f73746d616e2d69636f6e2e737667",
168 |       },
169 |       {
170 |         name: "Adobe XD",
171 |         image:
172 |           "https://camo.githubusercontent.com/c205ecbe12500177d102169d97bc1c17c545155fdf5ec78c08d54ac53e5b38c1/68747470733a2f2f63646e2e776f726c64766563746f726c6f676f2e636f6d2f6c6f676f732f61646f62652d78642e737667",
173 |       },
174 |       {
175 |         name: "Figma",
176 |         image:
177 |           "https://camo.githubusercontent.com/ed93c2b000a76ceaad1503e7eb9356591b885227e82a36a005b9d3498b303ba5/68747470733a2f2f7777772e766563746f726c6f676f2e7a6f6e652f6c6f676f732f6669676d612f6669676d612d69636f6e2e737667",
178 |       },
179 |     ],
180 |   },
181 | ];
182 | 
183 | export const experiences = [
184 |   {
185 |     id: 0,
186 |     img: "https://firebasestorage.googleapis.com/v0/b/flexi-coding.appspot.com/o/flipr.jpeg?alt=media&token=1d72532a-45eb-4c1a-a81a-c9bed9fec543",
187 |     role: "DevOps & Fullstack Engineering Intern",
188 |     company: "Flipr Inovations Pvt. Ltd.",
189 |     date: "Aug 2023 - July 2023",
190 |     desc: "Working on Flipr Platforms, managing DevOps, and streamlining the process with automation.",
191 |     skills: [
192 |       "Docker",
193 |       "Terraform",
194 |       "AWS",
195 |       "EC2",
196 |       "Portainer",
197 |       "Nginx",
198 |       "JavaScript",
199 |       "TypeScript",
200 |       "Node Js",
201 |       " Next Js",
202 |     ],
203 |     doc: "https://media.licdn.com/dms/image/D4D2DAQFlp60ZqHuaFQ/profile-treasury-image-shrink_1280_1280/0/1691180828512?e=1692381600&v=beta&t=mM5Y_NE5EPlQhez5FAN6NLVSKcO_Ojt_9Gq3mnFGkAQ",
204 |   },
205 |   {
206 |     id: 0,
207 |     img: "https://firebasestorage.googleapis.com/v0/b/flexi-coding.appspot.com/o/neurobit.jpeg?alt=media&token=1cacbb7b-e5ea-4efb-9b3d-f5a31b9564ad",
208 |     role: "Frontend Engineer Intern",
209 |     company: "Neurobit",
210 |     date: "June 2023 - Present",
211 |     desc: "Working on the frontend of the web application using ReactJS, Redux, and Material UI.",
212 |     skills: [
213 |       "ReactJS",
214 |       "Redux",
215 |       "NodeJs",
216 |       "Material UI",
217 |       "HTML",
218 |       "CSS",
219 |       "JavaScript",
220 |     ],
221 |     doc: "https://firebasestorage.googleapis.com/v0/b/buckoid-917cf.appspot.com/o/Screenshot%20from%202023-05-28%2023-20-46.png?alt=media&token=5570f995-e8f4-4f12-bb2f-73bcf4b20730",
222 |   },
223 |   {
224 |     id: 1,
225 |     img: "https://firebasestorage.googleapis.com/v0/b/flexi-coding.appspot.com/o/flipr.jpeg?alt=media&token=1d72532a-45eb-4c1a-a81a-c9bed9fec543",
226 |     role: "Fullstack Externship",
227 |     company: "Flipr",
228 |     date: "June 2023 - July 2023",
229 |     desc: "Built an employee management full stack web app used Docker and deployed on AWS ec2. I was the top performer in the program.",
230 |     skills: [
231 |       "ReactJS",
232 |       "Redux",
233 |       "NodeJs",
234 |       "Material UI",
235 |       "HTML",
236 |       "CSS",
237 |       "JavaScript",
238 |       "Docker",
239 |       "AWS",
240 |       "MongoDB",
241 |     ],
242 |   },
243 |   {
244 |     id: 2,
245 |     img: "https://firebasestorage.googleapis.com/v0/b/flexi-coding.appspot.com/o/girlScript.jpeg?alt=media&token=e656a621-cf3c-4230-bf0f-e74b4cec6035",
246 |     role: "Open Source Contributor ",
247 |     company: "GirlScript Summer of Code",
248 |     date: "May 2023 - Present",
249 |     desc: "Contributing to different open-source projects and learn from industry experts",
250 |     doc: "https://media.licdn.com/dms/image/D4D22AQGzSpgFaR4hsQ/feedshare-shrink_800/0/1684079632872?e=1687996800&v=beta&t=i0xWn_k32Oj9SxKfc6rARSbOghXD9Ge6WyEb2p2vvrc",
251 |   },
252 |   {
253 |     id: 3,
254 |     img: "https://firebasestorage.googleapis.com/v0/b/flexi-coding.appspot.com/o/gdsc.jpeg?alt=media&token=c162329c-efaa-4be8-a173-8d3f4c48ea70",
255 |     role: "Android Developer",
256 |     company: "DSC KIIT",
257 |     date: "Nov2021 - Present",
258 |     desc: "As an Android developer at the Google Developers Student Club (GDCS), I have had the opportunity to work on exciting projects and collaborate with talented developers who share my passion for technology. Through my involvement with GDCS, I have also had the opportunity to host and participate in numerous events, including hackathons, study jams, and workshops.",
259 |     skills: [
260 |       "Leadership",
261 |       "Mobile Application Development",
262 |       "Kotlin",
263 |       "XML",
264 |       "Figma",
265 |     ],
266 |   },
267 |   {
268 |     id: 4,
269 |     img: "https://firebasestorage.googleapis.com/v0/b/flexi-coding.appspot.com/o/Rudraksha.jpeg?alt=media&token=8f83f41e-d0a1-486f-9c7f-dd4cd1d09e8d",
270 |     role: "Android Developer Intern",
271 |     company: "Rudraksha Welffare Foundation",
272 |     date: "June 2021 - Oct 2021",
273 |     desc: "As an Android Developer Intern at Rudraksha Welfare Foundation from June 2021 to October 2021, I gained valuable hands-on experience in application development. During my tenure, I contributed to the development of the application's back-end cloud functions using Firebase and implemented a front-end with the MVVM structure, which was designed using Figma. I also added a one-to-one video call feature, conceptualized new features, and optimized app performance. This internship helped me enhance my skills in Android development and gave me an opportunity to work in a collaborative team environment.",
274 |     skills: [
275 |       "Android",
276 |       "Java",
277 |       "Kotlin",
278 |       "XML",
279 |       "Node Js",
280 |       "Cloud Firestore",
281 |       "Firebase",
282 |       "Figma",
283 |     ],
284 |     doc: "https://firebasestorage.googleapis.com/v0/b/buckoid-917cf.appspot.com/o/WhatsApp%20Image%202023-05-05%20at%2012.07.39%20AM.jpeg?alt=media&token=9f0e1648-568b-422d-bd0b-1f125f722245",
285 |   },
286 | ];
287 | 
288 | export const education = [
289 |   {
290 |     id: 0,
291 |     img: "https://firebasestorage.googleapis.com/v0/b/flexi-coding.appspot.com/o/Kiit.jpeg?alt=media&token=3839d520-c59d-4341-ad8f-0980c98de4dd",
292 |     school: "Kalinga Institute of Industrial Technology, Bhubaneswar",
293 |     date: "Oct 2021 - Sep 2025",
294 |     grade: "8.71 CGPA",
295 |     desc: "I am currently pursuing a Bachelor's degree in Computer Science and Engineering at Kalinga Institute of Industrial Technology, Bhubaneswar. I have completed 4 semesters and have a CGPA of 8.71. I have taken courses in Data Structures, Algorithms, Object-Oriented Programming, Database Management Systems, Operating Systems, and Computer Networks, among others. I am also a member of the Google Developers Student Club (GDSC) at KIIT, where I am learning and working on exciting projects with a team of talented developers.",
296 |     degree: "Bachelor of Technology - BTech, Computer Science and Engineering",
297 |   },
298 |   {
299 |     id: 1,
300 |     img: "https://firebasestorage.googleapis.com/v0/b/flexi-coding.appspot.com/o/methodist.png?alt=media&token=018a1b18-e2dd-4f34-8855-cff1b6b69fd3",
301 |     school: "Methodist School, Dankuni",
302 |     date: "Apr 2019 - Apr 2025",
303 |     grade: "88.2%",
304 |     desc: "I completed my class 12 high school education at Methodist School, Dankuni, where I studied Science with Computer Science.",
305 |     degree: "ISC(XII), Science with Computer",
306 |   },
307 |   {
308 |     id: 2,
309 |     img: "https://firebasestorage.googleapis.com/v0/b/flexi-coding.appspot.com/o/methodist.png?alt=media&token=018a1b18-e2dd-4f34-8855-cff1b6b69fd3",
310 |     school: "Methodist School, Dankuni",
311 |     date: "Apr 2017 - Apr 2019",
312 |     grade: "92.3%",
313 |     desc: "I completed my class 10 education at Methodist School, Dankuni, where I studied Science with Computer Application.",
314 |     degree: "ICSC(X), Science with Computer",
315 |   },
316 | ];
317 | 
318 | export const projects = [
319 |   {
320 |     id: 9,
321 |     title: "Trackify",
322 |     date: "Jun 2023 - Jul 2023",
323 |     description:
324 |       "Trackify is a web application designed to streamline task management and enhance productivity in the workplace. It provides a user-friendly interface for employers to keep track of their employees' daily work activities and empowers employees to log their tasks efficiently. \nAdmin Credentials: # Email: testadmin@gmail.com #Password- 123@testadmin, Employee Credentials:	#Email: testemployee@gmail.com	#Password- 123@Testemployee",
325 |     image:
326 |       "https://user-images.githubusercontent.com/64485885/255202416-e1f89b04-2788-45b0-abc2-9dec616669e2.png",
327 |     tags: [
328 |       "Docker",
329 |       "AWS",
330 |       "DuckDNS",
331 |       "Eslint",
332 |       "Husky",
333 |       "CI/CD",
334 |       "React Js",
335 |       "MongoDb",
336 |       "Node Js",
337 |       "Express Js",
338 |       "Redux",
339 |     ],
340 |     category: "web app",
341 |     github: "https://github.com/rishavchanda/Trackify",
342 |     webapp: "https://trackify.duckdns.org",
343 |   },
344 |   {
345 |     id: 0,
346 |     title: "Podstream",
347 |     date: "Apr 2023 - May 2023",
348 |     description:
349 |       "Developed a full-stack web application that allows users to search for, play, and pause their favorite podcasts on demand and create podcasts. Implemented user authentication using Google Auth and Jwt Auth, made responsive user interface with React JS that provides users with a seamless experience across all devices. Practiced agile methodologies to optimize team efficiency and communication.",
350 |     image:
351 |       "https://user-images.githubusercontent.com/64485885/234602896-a1bd8bcc-b72b-4821-83d6-8ad885bf435e.png",
352 |     tags: ["React Js", "MongoDb", "Node Js", "Express Js", "Redux"],
353 |     category: "web app",
354 |     github: "https://github.com/rishavchanda/Podstream",
355 |     webapp: "https://podstream.netlify.app/",
356 |     member: [
357 |       {
358 |         name: "Rishav Chanda",
359 |         img: "https://avatars.githubusercontent.com/u/64485885?v=4",
360 |         linkedin: "https://www.linkedin.com/in/rishav-chanda-b89a791b3/",
361 |         github: "https://github.com/rishavchanda/",
362 |       },
363 |       {
364 |         name: "Upasana Chaudhuri",
365 |         img: "https://avatars.githubusercontent.com/u/100614635?v=4",
366 |         linkedin: "https://www.linkedin.com/in/upasana-chaudhuri-2a2bb5231/",
367 |         github: "https://github.com/upasana0710",
368 |       },
369 |     ],
370 |   },
371 |   {
372 |     id: 1,
373 |     title: "Vexa",
374 |     date: "Oct 2022 - Present",
375 |     description:
376 |       "Designed and developed the Vexa project, a project management app that helps users and teams stay organized and on track. Implemented key features such as task tracking, team collaboration, and time tracking to improve productivity and project outcomes and also invite team/project members. The plan is to add a community of users where they can find developers and other team members and chat system implementation.",
377 |     image:
378 |       "https://user-images.githubusercontent.com/64485885/234916413-96296f13-fe4b-4cc4-b215-e72bd7c27928.png",
379 |     tags: [
380 |       "React Js",
381 |       "MongoDb",
382 |       "Node Js",
383 |       "Express Js",
384 |       "Redux",
385 |       "NodeMailer",
386 |     ],
387 |     category: "web app",
388 |     github: "https://github.com/rishavchanda/Project-Management-App",
389 |     webapp: "https://vexa-app.netlify.app/",
390 |   },
391 |   {
392 |     id: 2,
393 |     title: "Brain Tumor Detection",
394 |     date: "Jan 2023 - Mar 2023",
395 |     description:
396 |       "Preprocessed and augmented the dataset to improve model accuracy, trained the model, created API using model and Python, and used React web app for the project's front end. Achievements: Achieved an accuracy of 99.2% to accurately detect brain tumors from medical images.",
397 |     image:
398 |       "https://github.com/rishavchanda/Brain-Tumor-Detection/raw/main/Readme_resource/Image2.png",
399 |     tags: ["Python", "Keras", "TensorFlow", "VGG16", "Pickle", "React"],
400 |     category: "machine learning",
401 |     github: "https://github.com/rishavchanda/Brain-Tumor-Detection",
402 |     webapp: "https://brain-tumor.netlify.app/",
403 |     member: [
404 |       {
405 |         name: "Rishav Chanda",
406 |         img: "https://avatars.githubusercontent.com/u/64485885?v=4",
407 |         linkedin: "https://www.linkedin.com/in/rishav-chanda-b89a791b3/",
408 |         github: "https://github.com/rishavchanda/",
409 |       },
410 |       {
411 |         name: "Upasana Chaudhuri",
412 |         img: "https://avatars.githubusercontent.com/u/100614635?v=4",
413 |         linkedin: "https://www.linkedin.com/in/upasana-chaudhuri-2a2bb5231/",
414 |         github: "https://github.com/upasana0710",
415 |       },
416 |     ],
417 |   },
418 |   {
419 |     id: 3,
420 |     title: "Buckoid",
421 |     date: "Dec 2021 - Apr 2022",
422 |     description:
423 |       "App Is Currently In Playstore 100+ Downloads. This Project proposes an “Expense Tracking App”. Keep track of your personal expenses and compare them to your monthly income with the budget planner. It has Google Drive Cloud API for Backup of User Room Database. Made with Kotlin in MVVM Architecture & Live Data.",
424 |     image:
425 |       "https://camo.githubusercontent.com/fbf405040ae86b5d4a40f24e4ac034982cb8c0e2d850560ba64527997b258be8/68747470733a2f2f666972656261736573746f726167652e676f6f676c65617069732e636f6d2f76302f622f6c6f67696e2d65613565322e61707073706f742e636f6d2f6f2f4255434b4f49442532302831292e706e673f616c743d6d6564696126746f6b656e3d32653735376235372d323964372d346263612d613562322d653164346538313432373435",
426 |     tags: ["Kotlin", "MVVM", "Room Database", "Google Drive Cloud API"],
427 |     category: "android app",
428 |     github: "https://github.com/rishavchanda/Buckoid-Android-App",
429 |     webapp: "https://play.google.com/store/apps/details?id=com.rishav.buckoid",
430 |   },
431 |   {
432 |     id: 10,
433 |     title: "Job Finding App",
434 |     date: "Jun 2023 - Jul 2023",
435 |     description:
436 |       "A Job Finding App made with React Native, Axios. Users can search for any job coming from API and apply there.",
437 |     image:
438 |       "https://user-images.githubusercontent.com/64485885/255237090-cf798a2c-1b41-4bb7-b904-b5353a1f08e8.png",
439 |     tags: ["React Native", "JavaScript", "Axios"],
440 |     category: "android app",
441 |     github: "https://github.com/rishavchanda/Job-finder-App",
442 |     webapp: "https://github.com/rishavchanda/Job-finder-App",
443 |   },
444 |   {
445 |     id: 4,
446 |     title: "Whatsapp Clone",
447 |     date: "Jul 2021",
448 |     description:
449 |       "A WhatsApp clone made with React JS, Firebase, and Material UI. It has Phone Authentication, Real-time Database. It has a chat room where users can chat with each other. It has a sidebar where users can see all the chat rooms and can create a new chat room. It has a login page where users can log in with their Google account.",
450 |     image:
451 |       "https://firebasestorage.googleapis.com/v0/b/whatsapp-clone-rishav.appspot.com/o/Screenshot%20(151).png?alt=media&token=48391593-1ef0-4a8c-a92a-eb82bdf38e89",
452 |     tags: ["React Js", "Firebase", "Firestore", "Node JS"],
453 |     category: "web app",
454 |     github: "https://github.com/rishavchanda/Whatsapp-Clone-React-Js",
455 |     webapp: "https://whatsapp-clone-rishav.web.app",
456 |   },
457 |   {
458 |     id: 5,
459 |     title: "Todo Web App",
460 |     date: "Jun 2021",
461 |     description:
462 |       " A Todo Web App made with React JS, Redux, and Material UI. It has a login page where users can log in with their Google account. It has a sidebar where users can see all the tasks and can create a new task. It has a calendar where users can see all the tasks on a particular date. It has a search bar where users can search for a particular task.",
463 |     image:
464 |       "https://camo.githubusercontent.com/a328255ad96f861f57d25096d28018ab2656c689a1456b0d145764009bed2d1a/68747470733a2f2f666972656261736573746f726167652e676f6f676c65617069732e636f6d2f76302f622f746f646f2d6170702d63386331392e61707073706f742e636f6d2f6f2f53637265656e73686f74253230283938292e706e673f616c743d6d6564696126746f6b656e3d33643335646366322d626666322d343730382d393031632d343232383866383332386633",
465 |     tags: ["React Js", "Local Storage", "AWS Auth", "Node JS"],
466 |     category: "web app",
467 |     github: "https://github.com/rishavchanda/Todo-Web-App",
468 |     webapp: "https://rishav-react-todo.netlify.app/",
469 |   },
470 |   {
471 |     id: 6,
472 |     title: "Breaking Bad",
473 |     date: "Jun 2021",
474 |     description:
475 |       "A simple react app that shows the characters of the famous TV series Breaking Bad. It uses the Breaking Bad API to fetch the data. It also has a search bar to search for a particular character.",
476 |     image:
477 |       "https://camo.githubusercontent.com/cd07010cbeb90cb1b43a5d6162784326aef02210ef7d41a0f9ae043b3e392378/68747470733a2f2f666972656261736573746f726167652e676f6f676c65617069732e636f6d2f76302f622f746f646f2d6170702d63386331392e61707073706f742e636f6d2f6f2f53637265656e73686f7425323028313534292e706e673f616c743d6d6564696126746f6b656e3d65613439383630632d303435362d343333342d616435372d336239346663303333363263",
478 |     tags: ["React Js", "API", "Axios", "Node JS"],
479 |     category: "web app",
480 |     github: "https://github.com/rishavchanda/Breaking-Bad",
481 |     webapp: "https://breaking-bad-webapp.netlify.app",
482 |   },
483 |   {
484 |     id: 7,
485 |     title: "Quiz App",
486 |     date: "Dec 2020 - Jan 2021",
487 |     description:
488 |       "A android quiz app made with Java and Firebase. It has a login page where users can log in with their Google account. It has a sidebar where users can see all the quiz categories and can create a new quiz. It has a leaderboard where users can see the top 10 scorers. It has a search bar where users can search for a particular quiz.",
489 |     image:
490 |       "https://github-production-user-asset-6210df.s3.amazonaws.com/64485885/239726262-c1b061d1-d9d0-42ef-9f1c-0412d14bc4f6.gif",
491 |     tags: ["Java", "Android Studio", "Firebase", "Google Auth"],
492 |     category: "android app",
493 |     github: "https://github.com/rishavchanda/Quiz-Earn",
494 |     webapp: "https://github.com/rishavchanda/Quiz-Earn",
495 |   },
496 |   {
497 |     id: 8,
498 |     title: "Face Recognition",
499 |     date: "Jan 2021",
500 |     description:
501 |       "A Face recognition python app made with OpenCV. It uses face_recognition library to detect faces. It uses the webcam to detect faces. It also has a search bar to search for a particular face.",
502 |     image:
503 |       "https://camo.githubusercontent.com/a8b3e1ebf26d4c95f75bc6671189a3590eb67eb8332d7c7452492990e731efb9/68747470733a2f2f77617265686f7573652d63616d6f2e696e67726573732e636d68312e707366686f737465642e6f72672f356137383335396561323762643261633232336437656662306639303831306437373930383436312f363837343734373037333361326632663633366336663735363432653637363937343638373536323735373336353732363336663665373436353665373432653633366636643266363137333733363537343733326633383339333633363339333232663332333433343333333033333339333832663333333636363330363533333636333032643331333336333632326433313331363533373264333833323335333832643334363433303633333936333635333136353334333133393265363736393636",
504 |     tags: ["Python", "Keras", "TensorFlow", "VGG16", "Pickle", "React"],
505 |     category: "machine learning",
506 |     github: "https://github.com/rishavchanda/Face-Recodnition-AI-with-Python",
507 |     webapp: "https://github.com/rishavchanda/Face-Recodnition-AI-with-Python",
508 |   },
509 | ];
510 | 
511 | export const TimeLineData = [
512 |   { year: 2017, text: "Started my journey" },
513 |   { year: 2018, text: "Worked as a freelance developer" },
514 |   { year: 2019, text: "Founded JavaScript Mastery" },
515 |   { year: 2020, text: "Shared my projects with the world" },
516 |   { year: 2021, text: "Started my own platform" },
517 | ];
518 | 


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