├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── manifest.json
    ├── mockup.png
    └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── Assets
        ├── logo.png
        ├── scroll-down.svg
        └── wave1.svg
    ├── components
        ├── About
        │   ├── About.js
        │   └── AboutElements.js
        ├── Contact
        │   ├── Contact.js
        │   └── ContactElements.js
        ├── Dropdown
        │   └── Dropdown.js
        ├── Footer
        │   └── Footer.js
        ├── Header
        │   ├── Header.js
        │   └── HeaderElements.js
        ├── Hero
        │   ├── Hero.js
        │   └── HeroElements.js
        ├── Projects
        │   ├── ProjectCard
        │   │   ├── ProjectCard.js
        │   │   └── ProjectCardElements.js
        │   └── Projects.js
        └── SocialIcon
        │   ├── FixSocialIcon.js
        │   └── SocialIcon.js
    ├── data
        └── ProjectData.js
    ├── index.css
    ├── index.js
    └── pages
        └── Home.js


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


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Gurushesh Pawar
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | **Portfolio**
 2 | Live Preview - [Click Here](https://gurusheshp.vercel.app/)
 3 | 
 4 | <br/>
 5 | <div align="center">
 6 |   <img alt="Demo" src="public/mockup.png" />
 7 | </div>
 8 | <br/>
 9 | <br/>
10 | 
11 | # 🛠 Installation and Setup Instructions
12 | 
13 | Clone down this repository. You will need node.js and git installed globally on your machine..
14 | 
15 | Installation: `npm install`
16 | 
17 | In the project directory, you can run: `npm start`
18 | 
19 | Runs the app in the development mode.\
20 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
21 | 
22 | # Usage Instructions
23 | 
24 | Open the project folder and Navigate to `/src/data/ProjectData` and add your projects details.
25 | 
26 | You will find all the components used and you can edit your information accordingly.
27 | 
28 | ## Contribute
29 | 
30 | Pull Requests are welcome. :)
31 | 
32 | ## Show your support
33 | 
34 | Give a ⭐ if you like this website!
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "portfolio-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.14.1",
 7 |     "@testing-library/react": "^11.2.7",
 8 |     "@testing-library/user-event": "^12.8.3",
 9 |     "react": "^17.0.2",
10 |     "react-dom": "^17.0.2",
11 |     "react-icons": "^4.2.0",
12 |     "react-router-dom": "^5.2.1",
13 |     "react-scripts": "4.0.3",
14 |     "react-scroll": "^1.8.4",
15 |     "styled-components": "^5.3.1",
16 |     "web-vitals": "^1.1.2"
17 |   },
18 |   "scripts": {
19 |     "start": "react-scripts start",
20 |     "build": "react-scripts build",
21 |     "test": "react-scripts test",
22 |     "eject": "react-scripts eject"
23 |   },
24 |   "eslintConfig": {
25 |     "extends": [
26 |       "react-app",
27 |       "react-app/jest"
28 |     ]
29 |   },
30 |   "browserslist": {
31 |     "production": [
32 |       ">0.2%",
33 |       "not dead",
34 |       "not op_mini all"
35 |     ],
36 |     "development": [
37 |       "last 1 chrome version",
38 |       "last 1 firefox version",
39 |       "last 1 safari version"
40 |     ]
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gurupawar/portfolio-react/740799e9fc9bc2b388c0dccd3182b49b90a789f4/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
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 |     <!--
20 |       Notice the use of %PUBLIC_URL% in the tags above.
21 |       It will be replaced with the URL of the `public` folder during the build.
22 |       Only files inside the `public` folder can be referenced from the HTML.
23 | 
24 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
25 |       work correctly both with client-side routing and a non-root public URL.
26 |       Learn how to configure a non-root public URL by running `npm run build`.
27 |     -->
28 |     <title>Gurushesh</title>
29 |   </head>
30 |   <body>
31 |     <noscript>You need to enable JavaScript to run this app.</noscript>
32 |     <div id="root"></div>
33 |     <!--
34 |       This HTML file is a template.
35 |       If you open it directly in the browser, you will see an empty page.
36 | 
37 |       You can add webfonts, meta tags, or analytics to this file.
38 |       The build step will place the bundled scripts into the <body> tag.
39 | 
40 |       To begin the development, run `npm start` or `yarn start`.
41 |       To create a production bundle, use `npm run build` or `yarn build`.
42 |     -->
43 |   </body>
44 | </html>
45 | 


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


--------------------------------------------------------------------------------
/public/mockup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gurupawar/portfolio-react/740799e9fc9bc2b388c0dccd3182b49b90a789f4/public/mockup.png


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


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gurupawar/portfolio-react/740799e9fc9bc2b388c0dccd3182b49b90a789f4/src/App.css


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import "./App.css";
 2 | import { BrowserRouter as Router } from "react-router-dom";
 3 | import Home from "./pages/Home";
 4 | 
 5 | function App() {
 6 |   return (
 7 |     <Router>
 8 |       <Home />
 9 |     </Router>
10 |   );
11 | }
12 | 
13 | export default App;
14 | 


--------------------------------------------------------------------------------
/src/Assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gurupawar/portfolio-react/740799e9fc9bc2b388c0dccd3182b49b90a789f4/src/Assets/logo.png


--------------------------------------------------------------------------------
/src/Assets/scroll-down.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 79.37 122.88" style="enable-background:new 0 0 79.37 122.88" xml:space="preserve"><g><path d="M50.2,121.63c6.71-1.85,12.72-5.44,17.51-10.23c7.19-7.19,11.65-17.11,11.65-28.03V39.68c0-10.92-4.46-20.84-11.65-28.03 C60.52,4.46,50.6,0,39.68,0C28.77,0,18.84,4.46,11.65,11.65C4.46,18.84,0,28.77,0,39.68v43.68c0,10.92,4.46,20.84,11.65,28.03 c5.59,5.59,12.82,9.53,20.89,11.01C37.42,123.3,45.7,122.87,50.2,121.63L50.2,121.63L50.2,121.63z M39.23,92.06 c4.15,0,7.55-3.4,7.55-7.55v-7.78c0-4.15-3.4-7.55-7.55-7.55c-4.15,0-7.55,3.4-7.55,7.55v7.78C31.68,88.66,35.07,92.06,39.23,92.06 L39.23,92.06z M61.08,104.77c-5.49,5.49-13.07,8.91-21.4,8.91c-8.33,0-15.9-3.41-21.4-8.91c-5.49-5.49-8.91-13.07-8.91-21.4V39.68 c0-8.33,3.41-15.9,8.91-21.4c5.49-5.49,13.07-8.91,21.4-8.91c8.33,0,15.9,3.41,21.4,8.91c5.49,5.49,8.91,13.07,8.91,21.4v43.68 C69.99,91.7,66.58,99.27,61.08,104.77L61.08,104.77L61.08,104.77z"/></g></svg>


--------------------------------------------------------------------------------
/src/Assets/wave1.svg:
--------------------------------------------------------------------------------
1 |  <svg class="transition duration-300 ease-in-out delay-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 400" id="svg" width="100%" height="100%">
2 |         <path transform="rotate(-180 720 200)" class="transition-all duration-300 ease-in-out delay-150" fill="#151418ff" stroke-width="0" stroke="none" d="M 0,400 C 0,400 0,200 0,200 C 109.28571428571428,173 218.57142857142856,146 327,141 C 435.42857142857144,136 542.9999999999999,153 686,185 C 829.0000000000001,217 1007.4285714285713,264 1139,269 C 1270.5714285714287,274 1355.2857142857142,237 1440,200 C 1440,200 1440,400 1440,400 Z"></path>
3 |       </svg>


--------------------------------------------------------------------------------
/src/components/About/About.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { stackList } from "../../data/ProjectData";
 3 | import {
 4 |   Image,
 5 |   Technologies,
 6 |   Tech,
 7 |   TechImg,
 8 |   TechName,
 9 |   ContactWrapper,
10 | } from "./AboutElements";
11 | function About() {
12 |   return (
13 |     <ContactWrapper id="about">
14 |       <div className="Container">
15 |         <div className="SectionTitle">About Me</div>
16 |         <div className="BigCard">
17 |           <Image
18 |             src="https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/man-svgrepo-com.svg"
19 |             alt="man-svgrepo"
20 |           />
21 |           <div className="AboutBio">
22 |             Hello! My name is <strong>Your Name</strong> Lorem Ipsum is simply
23 |             dummy text of the printing and typesetting industry. Lorem Ipsum has
24 |             been the industry's standard dummy text ever since the 1500s, when
25 |             an unknown printer took a galley of type and scrambled it to make a
26 |             type specimen book. It has survived not only five centuries, but
27 |             also the leap into electronic typesetting, remaining essentially
28 |             unchanged.
29 |           </div>
30 |           <div className="AboutBio tagline2">
31 |             I have become confident using the following technologies.
32 |           </div>
33 |           <Technologies>
34 |             {stackList.map((stack, index) => (
35 |               <Tech key={index} className="tech">
36 |                 <TechImg src={stack.img} alt={stack.name} />
37 |                 <TechName>{stack.name}</TechName>
38 |               </Tech>
39 |             ))}
40 |           </Technologies>
41 |         </div>
42 |       </div>
43 |     </ContactWrapper>
44 |   );
45 | }
46 | 
47 | export default About;
48 | 


--------------------------------------------------------------------------------
/src/components/About/AboutElements.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | export const ContactWrapper = styled.div`
 4 |   margin-top: 5rem;
 5 | `;
 6 | 
 7 | export const Image = styled.img`
 8 |   max-width: 120px;
 9 |   margin: 0 auto;
10 |   margin-bottom: 1rem;
11 | `;
12 | 
13 | export const Technologies = styled.div`
14 |   display: flex;
15 |   flex-wrap: wrap;
16 |   justify-content: center;
17 |   margin-right: auto;
18 |   margin-left: auto;
19 |   margin-bottom: -2rem;
20 | `;
21 | 
22 | export const Tech = styled.div`
23 |   display: flex;
24 |   flex-direction: column;
25 |   align-items: center;
26 |   max-width: 100px;
27 |   min-width: 100px;
28 |   margin-bottom: 2rem;
29 | `;
30 | 
31 | export const TechImg = styled.img`
32 |   height: 50px;
33 |   width: 50px;
34 | `;
35 | 
36 | export const TechName = styled.div`
37 |   font-size: 14px;
38 | `;
39 | 


--------------------------------------------------------------------------------
/src/components/Contact/Contact.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import SocialIcon from "../SocialIcon/SocialIcon";
 3 | import { ContactWrapper, Email } from "./ContactElements";
 4 | function Contact() {
 5 |   return (
 6 |     <ContactWrapper id="contact">
 7 |       <div className="Container">
 8 |         <div className="SectionTitle">Get In Touch</div>
 9 |         <div className="BigCard">
10 |           <Email>
11 |             <span>your_email@gmail.com</span>
12 |             <a
13 |               className="btn PrimaryBtn"
14 |               href="mailto:your_email@gmail.com"
15 |               target="_blank"
16 |               rel="noopener noreferrer"
17 |             >
18 |               Send Mail
19 |             </a>
20 |           </Email>
21 |         </div>
22 |         <SocialIcon />
23 |       </div>
24 |     </ContactWrapper>
25 |   );
26 | }
27 | 
28 | export default Contact;
29 | 


--------------------------------------------------------------------------------
/src/components/Contact/ContactElements.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | export const ContactWrapper = styled.div`
 4 |   margin: 5rem 0;
 5 | `;
 6 | 
 7 | export const Email = styled.div`
 8 |   display: flex;
 9 |   align-items: center;
10 |   flex-direction: column;
11 |   justify-content: space-around;
12 | 
13 |   span {
14 |     font-size: 1rem;
15 |     font-weight: 500;
16 |     margin-bottom: 1rem;
17 |   }
18 | 
19 |   @media (min-width: 576px) {
20 |     span {
21 |       font-size: 1.5rem;
22 |     }
23 |   }
24 |   @media (min-width: 992px) {
25 |     flex-direction: row;
26 |     span {
27 |       margin-bottom: 0;
28 |       font-size: 3rem;
29 |     }
30 |   }
31 | `;
32 | 


--------------------------------------------------------------------------------
/src/components/Dropdown/Dropdown.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { FaTimes } from "react-icons/fa";
  3 | import styled from "styled-components";
  4 | import { Link as ScrollLink } from "react-scroll";
  5 | 
  6 | const SiderBar = styled.div`
  7 |   background: #151418;
  8 |   position: fixed;
  9 |   height: 100%;
 10 |   width: 100%;
 11 |   /* top: 0; */
 12 |   left: 0;
 13 |   z-index: 999;
 14 |   transition: 0.3s ease-in-out;
 15 |   display: flex;
 16 |   justify-content: center;
 17 |   flex-direction: column;
 18 |   align-items: center;
 19 |   opacity: ${({ isOpen }) => (isOpen ? "100%" : "0")};
 20 |   top: ${({ isOpen }) => (isOpen ? "0" : "-100%")};
 21 | `;
 22 | 
 23 | const CloseIcon = styled(FaTimes)`
 24 |   font-size: 2rem;
 25 |   color: #fff;
 26 |   position: absolute;
 27 |   right: 2rem;
 28 |   top: 2rem;
 29 |   cursor: pointer;
 30 | `;
 31 | export const NavMenu = styled.div`
 32 |   display: flex;
 33 |   justify-content: center;
 34 |   align-items: center;
 35 |   flex-direction: column;
 36 | 
 37 |   .menu-item + .menu-item {
 38 |     margin-top: 2rem;
 39 |   }
 40 | `;
 41 | 
 42 | export const NavLink = styled(ScrollLink)`
 43 |   color: #fff;
 44 |   cursor: pointer;
 45 |   font-size: 1.7rem;
 46 | 
 47 |   &:hover {
 48 |     color: rgb(119, 119, 121);
 49 |   }
 50 | `;
 51 | 
 52 | export const NavBtn = styled.div`
 53 |   display: flex;
 54 |   justify-content: center;
 55 |   margin-top: 5rem;
 56 |   font-size: 1.7rem;
 57 | `;
 58 | 
 59 | function Dropdown({ isOpen, toggle }) {
 60 |   return (
 61 |     <SiderBar isOpen={isOpen} onClick={toggle}>
 62 |       <CloseIcon onClick={toggle} />
 63 |       <NavMenu>
 64 |         <NavLink
 65 |           onClick={toggle}
 66 |           className="menu-item"
 67 |           to="projects"
 68 |           smooth={true}
 69 |         >
 70 |           Projects
 71 |         </NavLink>
 72 |         <NavLink
 73 |           onClick={toggle}
 74 |           className="menu-item"
 75 |           to="about"
 76 |           smooth={true}
 77 |         >
 78 |           About
 79 |         </NavLink>
 80 |         <NavLink
 81 |           onClick={toggle}
 82 |           className="menu-item"
 83 |           to="contact"
 84 |           smooth={true}
 85 |         >
 86 |           Contact
 87 |         </NavLink>
 88 |       </NavMenu>
 89 |       <NavBtn onClick={toggle}>
 90 |         <a
 91 |           className="btn PrimaryBtn"
 92 |           href="https://github.com/gurupawar/"
 93 |           target="_blank"
 94 |           rel="noopener noreferrer"
 95 |         >
 96 |           Resume
 97 |         </a>
 98 |       </NavBtn>
 99 |     </SiderBar>
100 |   );
101 | }
102 | 
103 | export default Dropdown;
104 | 


--------------------------------------------------------------------------------
/src/components/Footer/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | 
 4 | const FooterSection = styled.div`
 5 |   background-image: url(https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/footer_wave.svg);
 6 |   background-repeat: no-repeat;
 7 |   background-size: cover;
 8 |   width: 100%;
 9 |   height: 250px;
10 |   position: relative;
11 | 
12 |   span {
13 |     position: absolute;
14 |     bottom: 4rem;
15 |     color: #fff;
16 | 
17 |     a {
18 |       text-decoration: underline;
19 |     }
20 |   }
21 | `;
22 | function Footer() {
23 |   return (
24 |     <FooterSection>
25 |       <div className="Container">
26 |         <span>
27 |           Coded with 💙 by{" "}
28 |           <a
29 |             href="https://github.com/gurupawar/"
30 |             target="_blank"
31 |             rel="noopener noreferrer"
32 |           >
33 |             @gurupawar
34 |           </a>{" "}
35 |         </span>
36 |       </div>
37 |     </FooterSection>
38 |   );
39 | }
40 | 
41 | export default Footer;
42 | 


--------------------------------------------------------------------------------
/src/components/Header/Header.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Nav, Logo, NavLink, Bars, NavMenu, NavBtn } from "./HeaderElements";
 3 | 
 4 | const Header = ({ toggle }) => {
 5 |   return (
 6 |     <div className="Container">
 7 |       <Nav>
 8 |         <Logo to="/">
 9 |           <img
10 |             src="https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/logo.png"
11 |             alt="logo"
12 |           />
13 |         </Logo>
14 |         <NavMenu>
15 |           <NavLink className="menu-item" to="projects" smooth={true}>
16 |             Projects
17 |           </NavLink>
18 |           <NavLink className="menu-item" to="about" smooth={true}>
19 |             About
20 |           </NavLink>
21 |           <NavLink className="menu-item" to="contact" smooth={true}>
22 |             Contact
23 |           </NavLink>
24 |         </NavMenu>
25 |         <NavBtn>
26 |           <a
27 |             className="btn PrimaryBtn"
28 |             href="https://github.com/gurupawar/"
29 |             target="_blank"
30 |             rel="noopener noreferrer"
31 |           >
32 |             Resume
33 |           </a>
34 |         </NavBtn>
35 |         <Bars onClick={toggle} />
36 |       </Nav>
37 |     </div>
38 |   );
39 | };
40 | 
41 | export default Header;
42 | 


--------------------------------------------------------------------------------
/src/components/Header/HeaderElements.js:
--------------------------------------------------------------------------------
 1 | import { FaBars } from "react-icons/fa";
 2 | import { Link as LinkRouter } from "react-router-dom";
 3 | import { Link as ScrollLink } from "react-scroll";
 4 | import styled from "styled-components";
 5 | 
 6 | export const Nav = styled.nav`
 7 |   background: transparent;
 8 |   height: 100px;
 9 |   display: flex;
10 |   align-items: center;
11 |   justify-content: space-between;
12 |   z-index: 10;
13 | `;
14 | 
15 | export const NavLink = styled(ScrollLink)`
16 |   color: rgb(119, 119, 121);
17 |   display: flex;
18 |   font-size: 1.2rem;
19 |   align-items: center;
20 |   height: 100%;
21 |   cursor: pointer;
22 |   &:hover {
23 |     color: #f6f6f6;
24 |   }
25 | `;
26 | export const Logo = styled(LinkRouter)`
27 |   img {
28 |     width: 47px;
29 |     height: 47px;
30 |   }
31 | `;
32 | 
33 | export const Bars = styled(FaBars)`
34 |   display: none;
35 |   color: #fff;
36 |   font-size: 1.8rem;
37 |   cursor: pointer;
38 |   @media screen and (max-width: 768px) {
39 |     display: block;
40 |   }
41 | `;
42 | 
43 | export const NavMenu = styled.div`
44 |   display: flex;
45 |   align-items: center;
46 |   margin-right: -24px;
47 | 
48 |   .menu-item + .menu-item {
49 |     margin-left: 1rem;
50 |   }
51 |   @media screen and (max-width: 768px) {
52 |     display: none;
53 |   }
54 | `;
55 | 
56 | export const NavBtn = styled.nav`
57 |   display: flex;
58 |   align-items: center;
59 |   margin-right: 24px;
60 | 
61 |   @media screen and (max-width: 768px) {
62 |     display: none;
63 |   }
64 | `;
65 | 


--------------------------------------------------------------------------------
/src/components/Hero/Hero.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import Dropdown from "../Dropdown/Dropdown";
 3 | import Header from "../Header/Header";
 4 | import {
 5 |   HeroContainer,
 6 |   HeroWrapper,
 7 |   HeroLeft,
 8 |   HeroRight,
 9 |   Image,
10 |   ScrollDown,
11 |   ScrollLink,
12 | } from "./HeroElements";
13 | function Hero() {
14 |   const [isOpen, setIsOpen] = useState(false);
15 | 
16 |   const toggle = () => {
17 |     setIsOpen(!isOpen);
18 |   };
19 |   return (
20 |     <main>
21 |       <Dropdown isOpen={isOpen} toggle={toggle} />
22 |       <Header toggle={toggle} />
23 |       <HeroContainer>
24 |         <HeroWrapper>
25 |           <HeroLeft>
26 |             <h1>Hi, I'm YourName</h1>
27 |             <h5>Frontend Developer</h5>
28 |             <p>
29 |               I design and code beautifully simple things, and I love what I do.
30 |             </p>
31 |           </HeroLeft>
32 |           <HeroRight>
33 |             <Image
34 |               src="https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/man-svgrepo-com.svg"
35 |               alt="man-svgrepo"
36 |             />
37 |           </HeroRight>
38 |         </HeroWrapper>
39 |         <ScrollDown to="projects">
40 |           <ScrollLink>
41 |             Scroll down
42 |             <img
43 |               src="https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/scroll-down.svg"
44 |               alt="scroll-down"
45 |             />
46 |           </ScrollLink>
47 |         </ScrollDown>
48 |       </HeroContainer>
49 |     </main>
50 |   );
51 | }
52 | 
53 | export default Hero;
54 | 


--------------------------------------------------------------------------------
/src/components/Hero/HeroElements.js:
--------------------------------------------------------------------------------
  1 | import styled, { keyframes } from "styled-components";
  2 | import { Link as LinkScroll } from "react-scroll";
  3 | 
  4 | export const HeroContainer = styled.div`
  5 |   padding-bottom: 2rem;
  6 |   padding-top: 4rem;
  7 |   padding-right: 1rem;
  8 |   padding-left: 1rem;
  9 |   margin-right: auto;
 10 |   margin-left: auto;
 11 |   display: flex;
 12 |   flex-direction: column;
 13 | 
 14 |   @media (min-width: 576px) {
 15 |     max-width: 540px;
 16 |   }
 17 |   @media (min-width: 768px) {
 18 |     max-width: 720px;
 19 |   }
 20 |   @media (min-width: 992px) {
 21 |     max-width: 960px;
 22 |   }
 23 |   @media (min-width: 1200px) {
 24 |     max-width: 1000px;
 25 |   }
 26 | `;
 27 | 
 28 | export const HeroWrapper = styled.div`
 29 |   display: flex;
 30 |   flex-direction: row;
 31 | 
 32 |   @media screen and (max-width: 992px) {
 33 |     flex-direction: column;
 34 |   }
 35 | `;
 36 | 
 37 | export const HeroLeft = styled.div`
 38 |   display: flex;
 39 |   flex-direction: column;
 40 |   justify-content: center;
 41 |   align-items: flex-start;
 42 |   text-align: left;
 43 |   flex: 1;
 44 | 
 45 |   h1 {
 46 |     font-size: 2.8rem;
 47 |     color: #f6f6f6;
 48 |     opacity: 0.98;
 49 |     font-weight: 400;
 50 |   }
 51 | 
 52 |   h5 {
 53 |     font-size: 1.6rem;
 54 |     color: rgb(119, 119, 121);
 55 |     margin-bottom: 1rem;
 56 |     font-weight: 400;
 57 |   }
 58 | 
 59 |   p {
 60 |     font-size: 17px;
 61 |     color: #f6f6f6;
 62 |     opacity: 0.85;
 63 |   }
 64 | 
 65 |   @media screen and (max-width: 992px) {
 66 |     text-align: center;
 67 |     align-items: center;
 68 |     margin-bottom: 2rem;
 69 |   }
 70 | `;
 71 | 
 72 | export const HeroRight = styled.div`
 73 |   flex: 1;
 74 |   justify-content: center;
 75 |   display: flex;
 76 | `;
 77 | 
 78 | export const Image = styled.img`
 79 |   height: 300px;
 80 |   width: auto;
 81 | `;
 82 | 
 83 | const ScrollAnimation = keyframes`
 84 |   0%,
 85 |   20%,
 86 |   50%,
 87 |   80%,
 88 |   100% {
 89 |     transform: translateY(0);
 90 |   }
 91 |   40% {
 92 |     transform: translateY(-20px);
 93 |   }
 94 |   60% {
 95 |     transform: translateY(-10px);
 96 |   }
 97 | `;
 98 | 
 99 | export const ScrollDown = styled(LinkScroll)`
100 |   margin-top: 3rem;
101 |   display: flex;
102 |   justify-content: flex-start;
103 |   cursor: pointer;
104 | 
105 |   animation: ${ScrollAnimation} 2s linear 0s infinite;
106 |   @media screen and (max-width: 992px) {
107 |     justify-content: center;
108 |   }
109 | `;
110 | 
111 | export const ScrollLink = styled.div`
112 |   display: flex;
113 |   align-items: center;
114 |   font-size: 1.3rem;
115 |   color: #f6f6f6;
116 | 
117 |   img {
118 |     height: 35px;
119 |     width: 35px;
120 |     margin-left: 6px;
121 |   }
122 | `;
123 | 


--------------------------------------------------------------------------------
/src/components/Projects/ProjectCard/ProjectCard.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { ProjectList } from "../../../data/ProjectData";
 3 | import {
 4 |   Card,
 5 |   CardLeft,
 6 |   CardRight,
 7 |   Stack,
 8 |   BtnGroup,
 9 | } from "./ProjectCardElements";
10 | function ProjectCard() {
11 |   return (
12 |     <>
13 |       {ProjectList.map((list, index) => (
14 |         <Card key={index}>
15 |           <CardLeft>
16 |             <img src={list.img} alt={list.name} />
17 |           </CardLeft>
18 |           <CardRight>
19 |             <h4>{list.title}</h4>
20 |             <p>{list.description}</p>
21 |             <Stack>
22 |               <span className="stackTitle">Tech Stack -</span>
23 |               <span className="tags">{list.tech_stack}</span>
24 |             </Stack>
25 |             <BtnGroup>
26 |               <a
27 |                 className="btn btn2 SecondarBtn"
28 |                 href={list.github_url}
29 |                 target="_blank"
30 |                 rel="noopener noreferrer"
31 |               >
32 |                 Github
33 |               </a>
34 |               <a
35 |                 className="btn PrimaryBtn"
36 |                 href={list.demo_url}
37 |                 target="_blank"
38 |                 rel="noopener noreferrer"
39 |               >
40 |                 Demo ➜
41 |               </a>
42 |             </BtnGroup>
43 |           </CardRight>
44 |         </Card>
45 |       ))}
46 |     </>
47 |   );
48 | }
49 | 
50 | export default ProjectCard;
51 | 


--------------------------------------------------------------------------------
/src/components/Projects/ProjectCard/ProjectCardElements.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | export const Card = styled.div`
 4 |   display: grid;
 5 |   grid-gap: 2rem;
 6 |   margin-bottom: 4rem;
 7 |   grid-template-columns: 1fr;
 8 |   border-bottom: 1px solid rgb(0, 0, 0);
 9 |   padding-bottom: 2rem;
10 |   @media (min-width: 992px) {
11 |     grid-template-columns: 1fr 1fr;
12 |     border-bottom: 0;
13 |     padding-bottom: 0;
14 |   }
15 | `;
16 | 
17 | export const CardLeft = styled.div`
18 |   background: #151418;
19 |   border-radius: 5px;
20 |   padding: 5px;
21 |   justify-self: center;
22 | 
23 |   img {
24 |     border-radius: 3px;
25 |     height: auto;
26 |   }
27 | `;
28 | 
29 | export const CardRight = styled.div`
30 |   display: flex;
31 |   flex-direction: column;
32 |   justify-content: center;
33 |   align-items: center;
34 | 
35 |   h4 {
36 |     font-size: 1.5rem;
37 |     font-weight: 400;
38 |   }
39 | 
40 |   p {
41 |     font-weight: 400;
42 |     max-width: 400px;
43 |     margin-top: 10px;
44 |     margin-bottom: 1rem;
45 |     color: rgba(0, 0, 0, 0.815);
46 |     text-align: center;
47 | 
48 |     @media (min-width: 992px) {
49 |       text-align: start;
50 |     }
51 |   }
52 |   @media (min-width: 992px) {
53 |     align-items: flex-start;
54 |     margin-top: 1rem;
55 |   }
56 | `;
57 | 
58 | export const Stack = styled.div`
59 |   display: flex;
60 |   align-items: center;
61 |   margin-bottom: 5px;
62 | 
63 |   .stackTitle {
64 |     font-weight: 500;
65 |     margin-right: 10px;
66 |     font-size: 17px;
67 |   }
68 | 
69 |   .tags {
70 |     font-size: 15px;
71 |     font-weight: 400;
72 |   }
73 | `;
74 | 
75 | export const BtnGroup = styled.div`
76 |   height: 70px;
77 |   display: flex;
78 |   align-items: center;
79 | `;
80 | 


--------------------------------------------------------------------------------
/src/components/Projects/Projects.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ProjectCard from "./ProjectCard/ProjectCard";
 3 | function Projects() {
 4 |   return (
 5 |     <>
 6 |       <svg
 7 |         height="100%"
 8 |         width="100%"
 9 |         id="svg"
10 |         viewBox="0 0 1440 400"
11 |         xmlns="http://www.w3.org/2000/svg"
12 |         class="transition duration-300 ease-in-out delay-150"
13 |       >
14 |         <path
15 |           d="M 0,400 C 0,400 0,200 0,200 C 114.35714285714289,156.53571428571428 228.71428571428578,113.07142857142858 351,131 C 473.2857142857142,148.92857142857142 603.4999999999998,228.25 713,248 C 822.5000000000002,267.75 911.2857142857144,227.92857142857142 1029,210 C 1146.7142857142856,192.07142857142858 1293.3571428571427,196.03571428571428 1440,200 C 1440,200 1440,400 1440,400 Z"
16 |           stroke="none"
17 |           stroke-width="0"
18 |           fill="#151418ff"
19 |           class="transition-all duration-300 ease-in-out delay-150"
20 |           transform="rotate(-180 720 200)"
21 |         ></path>
22 |       </svg>
23 |       <div className="ProjectWrapper" id="projects">
24 |         <div className="Container">
25 |           <div className="SectionTitle">Projects</div>
26 |           <ProjectCard />
27 |         </div>
28 |       </div>
29 |     </>
30 |   );
31 | }
32 | 
33 | export default Projects;
34 | 


--------------------------------------------------------------------------------
/src/components/SocialIcon/FixSocialIcon.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { FaLinkedin, FaInstagram, FaGithub } from "react-icons/fa";
 3 | import styled from "styled-components";
 4 | 
 5 | const Social = styled.div`
 6 |   display: block;
 7 |   position: fixed;
 8 |   top: 48%;
 9 |   left: 1.5rem;
10 |   transform: translateY(-50%);
11 | 
12 |   ul {
13 |     display: block;
14 |   }
15 | 
16 |   .item + .item {
17 |     margin-top: 1rem;
18 |   }
19 | 
20 |   a {
21 |     font-size: 2rem;
22 |     color: rgb(119, 119, 121);
23 |     transition: 0.2s ease-in;
24 |     &:hover {
25 |       color: rgb(57, 134, 250);
26 |     }
27 |   }
28 | 
29 |   @media screen and (max-width: 768px) {
30 |     display: none;
31 |   }
32 | `;
33 | function FixSocialIcon() {
34 |   return (
35 |     <Social>
36 |       <ul>
37 |         <li className="item">
38 |           <a
39 |             href="https://www.linkedin.com/in/your_username/"
40 |             target="_blank"
41 |             rel="noopener noreferrer"
42 |           >
43 |             <FaLinkedin />
44 |           </a>
45 |         </li>
46 |         <li className="item">
47 |           <a
48 |             href="https://github.com/your_username/"
49 |             target="_blank"
50 |             rel="noopener noreferrer"
51 |           >
52 |             <FaGithub />
53 |           </a>
54 |         </li>
55 |         <li className="item">
56 |           <a
57 |             href="https://github.com/your_username/"
58 |             target="_blank"
59 |             rel="noopener noreferrer"
60 |           >
61 |             <FaInstagram />
62 |           </a>
63 |         </li>
64 |       </ul>
65 |     </Social>
66 |   );
67 | }
68 | 
69 | export default FixSocialIcon;
70 | 


--------------------------------------------------------------------------------
/src/components/SocialIcon/SocialIcon.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { FaLinkedin, FaInstagram, FaGithub } from "react-icons/fa";
 3 | 
 4 | import styled from "styled-components";
 5 | 
 6 | export const SocialDiv = styled.div`
 7 |   margin-top: 2rem;
 8 |   display: none;
 9 |   ul {
10 |     display: flex;
11 |     justify-content: center;
12 |     align-items: center;
13 |     list-style: none;
14 |   }
15 | 
16 |   a {
17 |     font-size: 2.5rem;
18 |     color: #151418;
19 |     transition: 0.2s ease-in;
20 |     &:hover {
21 |       color: rgb(57, 134, 250);
22 |     }
23 |   }
24 | 
25 |   .item + .item {
26 |     margin-left: 2rem;
27 |   }
28 | 
29 |   @media screen and (max-width: 768px) {
30 |     display: block;
31 |   }
32 | `;
33 | 
34 | function SocialIcon() {
35 |   return (
36 |     <SocialDiv>
37 |       <ul>
38 |         <li className="item">
39 |           <a
40 |             href="https://www.linkedin.com/in/your_username/"
41 |             target="_blank"
42 |             rel="noopener noreferrer"
43 |           >
44 |             <FaLinkedin />
45 |           </a>
46 |         </li>
47 |         <li className="item">
48 |           <a
49 |             href="https://github.com/your_username/"
50 |             target="_blank"
51 |             rel="noopener noreferrer"
52 |           >
53 |             <FaGithub />
54 |           </a>
55 |         </li>
56 |         <li className="item">
57 |           <a
58 |             href="https://github.com/your_username/"
59 |             target="_blank"
60 |             rel="noopener noreferrer"
61 |           >
62 |             <FaInstagram />
63 |           </a>
64 |         </li>
65 |       </ul>
66 |     </SocialDiv>
67 |   );
68 | }
69 | 
70 | export default SocialIcon;
71 | 


--------------------------------------------------------------------------------
/src/data/ProjectData.js:
--------------------------------------------------------------------------------
 1 | // --------------------------------------- Project List
 2 | export const ProjectList = [
 3 |   {
 4 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/project_1.png",
 5 |     title: "Spense",
 6 |     description: "Codewell challenge, Spense is a landing page for writers.",
 7 |     tech_stack: "Html, Css, Javascript",
 8 |     github_url: "https://your_project_github_link",
 9 |     demo_url: "https://your_project_demo_link",
10 |   },
11 |   {
12 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/project_2.png",
13 |     title: "Fiber",
14 |     description:
15 |       "An online portfolio generator. Great to practice flex/grid layouts, absolute positioning and sliders.",
16 |     tech_stack: "Html, Css, Javascript",
17 |     github_url: "https://your_project_github_link",
18 |     demo_url: "https://your_project_demo_link",
19 |   },
20 |   {
21 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/portfolio.png",
22 |     title: "Portfolio",
23 |     description: "Ofcourse i made my own personal portfolio website.",
24 |     tech_stack: "Reactjs, Css",
25 |     github_url: "https://your_project_github_link",
26 |     demo_url: "https://your_project_demo_link/",
27 |   },
28 |   {
29 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/project_3.png",
30 |     title: "Ecommerce website",
31 |     description:
32 |       "Created simple ecommerce website using reactjs and react-use-cart plugin.",
33 |     tech_stack: "Reactjs, Css",
34 |     github_url: "https://your_project_github_link",
35 |     demo_url: "https://your_project_demo_link",
36 |   },
37 | ];
38 | 
39 | // --------------------------------------- Skills
40 | 
41 | export const stackList = [
42 |   {
43 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/skill/html5.svg",
44 |     name: "HTML",
45 |   },
46 |   {
47 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/skill/css3.svg",
48 |     name: "CSS",
49 |   },
50 |   {
51 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/skill/javascript.svg",
52 |     name: "JavaScript",
53 |   },
54 |   {
55 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/skill/react.svg",
56 |     name: "ReactJS",
57 |   },
58 |   {
59 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/skill/bootstrap.svg",
60 |     name: "Bootstrap",
61 |   },
62 |   {
63 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/skill/sass.svg",
64 |     name: "Scss",
65 |   },
66 |   {
67 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/skill/git.svg",
68 |     name: "Git",
69 |   },
70 |   {
71 |     img: "https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/skill/responsive.svg",
72 |     name: "Responsive",
73 |   },
74 | ];
75 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&display=swap");
  2 | *,
  3 | *::before,
  4 | *::after {
  5 |   margin: 0;
  6 |   padding: 0;
  7 |   box-sizing: border-box;
  8 |   scroll-behavior: smooth;
  9 | }
 10 | body {
 11 |   font-family: "Poppins", sans-serif;
 12 |   -webkit-font-smoothing: antialiased;
 13 |   -moz-osx-font-smoothing: grayscale;
 14 |   background: #fafaff;
 15 |   font-weight: 400;
 16 | }
 17 | 
 18 | main {
 19 |   background: #151418;
 20 |   background-image: url(https://raw.githubusercontent.com/gurupawar/website/main/src/Assets/blob-haikei.svg);
 21 |   background-repeat: no-repeat;
 22 |   background-size: cover;
 23 |   width: 100%;
 24 | }
 25 | 
 26 | a {
 27 |   text-decoration: none;
 28 |   color: inherit;
 29 |   background-color: transparent;
 30 | }
 31 | 
 32 | ul,
 33 | ol {
 34 |   list-style: none;
 35 | }
 36 | 
 37 | article,
 38 | aside,
 39 | details,
 40 | figcaption,
 41 | figure,
 42 | footer,
 43 | header,
 44 | hgroup,
 45 | menu,
 46 | nav,
 47 | section {
 48 |   display: block;
 49 | }
 50 | 
 51 | h1,
 52 | h2,
 53 | h3,
 54 | h4,
 55 | h5,
 56 | h6 {
 57 |   font-size: 100%;
 58 |   font-weight: normal;
 59 | }
 60 | 
 61 | img,
 62 | video {
 63 |   display: block;
 64 |   max-width: 100%;
 65 | }
 66 | 
 67 | .btn {
 68 |   border: 2px solid rgb(57, 134, 250);
 69 |   padding: 10px 1rem;
 70 |   border-radius: 5px;
 71 |   cursor: pointer;
 72 |   transition: all 0.2s ease-in-out;
 73 |   font-weight: 400;
 74 |   outline: none;
 75 | }
 76 | 
 77 | .PrimaryBtn {
 78 |   background: rgb(57, 134, 250);
 79 |   color: #f6f6f6;
 80 | }
 81 | 
 82 | .PrimaryBtn:hover {
 83 |   background: #fff;
 84 |   color: #010606;
 85 | }
 86 | 
 87 | .SecondarBtn:hover {
 88 |   background: rgb(57, 134, 250);
 89 |   color: #fff;
 90 | }
 91 | 
 92 | .btn2 {
 93 |   margin-right: 1rem;
 94 | }
 95 | 
 96 | .Container {
 97 |   width: 100%;
 98 |   padding-right: 1rem;
 99 |   padding-left: 1rem;
100 |   margin-right: auto;
101 |   margin-left: auto;
102 | }
103 | 
104 | .BigCard {
105 |   padding-top: 3rem;
106 |   padding-bottom: 3rem;
107 |   padding-right: 2rem;
108 |   padding-left: 2rem;
109 |   border-radius: 1rem;
110 |   display: flex;
111 |   flex-direction: column;
112 |   background: #fff;
113 |   box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 10px;
114 |   /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
115 |     0 4px 6px -2px rgba(0, 0, 0, 0.05); */
116 | }
117 | 
118 | .AboutBio,
119 | .tagline2 {
120 |   text-align: center;
121 |   max-width: 650px;
122 |   margin: 0 auto;
123 |   color: #151418;
124 |   line-height: 1.6;
125 | }
126 | 
127 | .tagline2 {
128 |   margin-top: 1rem;
129 |   margin-bottom: 2rem;
130 | }
131 | 
132 | .SectionTitle {
133 |   font-size: 28px;
134 |   color: #151418;
135 |   font-weight: 700;
136 |   margin-bottom: 3.5rem;
137 | }
138 | .ProjectWrapper {
139 |   margin-top: -1rem;
140 | }
141 | 
142 | /* ------------------------------------ Media for Container */
143 | @media (min-width: 576px) {
144 |   .Container {
145 |     max-width: 540px;
146 |   }
147 | }
148 | @media (min-width: 768px) {
149 |   .Container {
150 |     max-width: 720px;
151 |   }
152 |   .ProjectWrapper {
153 |     margin-top: -5rem;
154 |   }
155 | }
156 | @media (min-width: 992px) {
157 |   .Container {
158 |     max-width: 960px;
159 |   }
160 | }
161 | @media (min-width: 1200px) {
162 |   .Container {
163 |     max-width: 1000px;
164 |   }
165 | }
166 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 | 
6 | ReactDOM.render(<App />, document.getElementById("root"));
7 | 


--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Hero from "../components/Hero/Hero";
 3 | import Projects from "../components/Projects/Projects";
 4 | import About from "../components/About/About";
 5 | import Contact from "../components/Contact/Contact";
 6 | import Footer from "../components/Footer/Footer";
 7 | import FixSocialIcon from "../components/SocialIcon/FixSocialIcon";
 8 | function Home() {
 9 |   return (
10 |     <>
11 |       <Hero />
12 |       <Projects />
13 |       <About />
14 |       <Contact />
15 |       <Footer />
16 |       <FixSocialIcon />
17 |     </>
18 |   );
19 | }
20 | 
21 | export default Home;
22 | 


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