├── .gitignore ├── Images ├── Portfolio_img.png └── readme_img.png ├── LICENSE ├── README.md ├── SECURITY.md ├── package-lock.json ├── package.json ├── public ├── favicon.png ├── index.html ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── Assets ├── Avatar.png ├── Projects │ ├── ExpenseTracker.png │ ├── Portfolio.png │ ├── PrivateChat.png │ └── ecart.png ├── about.png ├── chevron-up-solid.svg ├── homeicons.svg ├── logoDark.png ├── logoLight.png └── pre.svg ├── Context └── theme.jsx ├── components ├── About │ ├── About.js │ ├── AboutCard.js │ ├── Github.js │ ├── Techstack.js │ ├── Toolstack.js │ └── about.css ├── Home │ ├── Home.js │ ├── Home2.js │ ├── Type.js │ └── home.css ├── Projects │ ├── ProjectCards.js │ ├── Projects.js │ └── project.css ├── ScrollToTop │ ├── ScrollToTop.jsx │ └── scroll.css ├── footer │ ├── Footer.jsx │ └── footer.css ├── navbar │ ├── Navbar.js │ └── navbar.css └── preloader │ ├── Preloader.js │ └── preloader.css ├── index.css ├── index.js ├── reportWebVitals.js └── setupTests.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # dependencies 3 | node_modules 4 | /.pnp 5 | .pnp.js 6 | 7 | # testing 8 | /coverage 9 | 10 | # production 11 | /build 12 | 13 | # misc 14 | .DS_Store 15 | .env 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .eslintcache 26 | 27 | Server/node_modules 28 | Server/config.js 29 | -------------------------------------------------------------------------------- /Images/Portfolio_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/Images/Portfolio_img.png -------------------------------------------------------------------------------- /Images/readme_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/Images/readme_img.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Rahul Jha 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 |

2 | Rahul Jha | Portfolio Website
3 | rahul jha 4 |

5 |
6 | Demo 7 |
8 | 9 |
10 | 11 |
12 | 13 | ![GitHub Repo stars](https://img.shields.io/github/stars/rahuljha4171/Portfolio-Website?color=red&logo=github&style=for-the-badge)   14 | ![GitHub forks](https://img.shields.io/github/forks/rahuljha4171/Portfolio-Website?color=red&logo=github&style=for-the-badge) 15 | 16 |
17 | 18 | You can fork this repo to modify and make changes according to your need. Please give me proper credit by linking back to [Rahuljha4171](https://github.com/rahuljha4171/Portfolio-Website). Thanks in Advance😍! 19 | 20 | ## Built With 21 | 22 | My personal portfolio website rahul jha which features some of my github projects as well as my resume and technical skills.
23 | 24 | This project is built using these technologies. 25 | 26 | - React.js 27 | - CSS3 28 | - VsCode 29 | - Vercel 30 | 31 | ## Features 32 | 33 | **Multi-Page Layout** 34 | 35 | **Styled with React-Bootstrap and Css** 36 | 37 | **Fully Responsive** 38 | 39 | **Dark and Light Theme** 40 | 41 | ## Getting Started 42 | 43 | Clone this repository. You will need `node.js` and `git` installed globally on your machine. 44 | 45 | ## 🛠 Installation and Setup Instructions 46 | 47 | 1. Installation: `npm install` 48 | 49 | 2. In the project directory, you can run: `npm start` 50 | 51 | Runs the app in the development mode.\ 52 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 53 | The page will reload if you make edits. 54 | 55 | ## Usage Instructions 56 | 57 | Open the project folder and Navigate to `/src/components/`.
58 | You will find all the components used and you can edit your information accordingly. 59 | 60 | ### Show your support 61 | 62 |

63 | 🔹 64 | Report A Bug     65 | 🔹 66 | Request A Feature 67 | 68 |

69 | 70 |

71 | Give a ⭐ if you like this website! 72 |

73 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@react-pdf/renderer": "^3.1.12", 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^14.0.0", 9 | "@testing-library/user-event": "^14.4.3", 10 | "axios": "^1.4.0", 11 | "bootstrap": "^5.3.0", 12 | "prop-types": "^15.8.1", 13 | "react": "^18.2.0", 14 | "react-bootstrap": "^2.8.0", 15 | "react-dom": "^18.2.0", 16 | "react-github-calendar": "^4.0.1", 17 | "react-icons": "^4.10.1", 18 | "react-parallax-tilt": "^1.7.151", 19 | "react-router-dom": "^6.14.1", 20 | "react-scripts": "^5.0.1", 21 | "typewriter-effect": "^2.20.1", 22 | "web-vitals": "^3.3.2" 23 | }, 24 | "scripts": { 25 | "start": "react-scripts start", 26 | "build": "react-scripts build", 27 | "test": "react-scripts test", 28 | "eject": "react-scripts eject" 29 | }, 30 | "eslintConfig": { 31 | "extends": [ 32 | "react-app", 33 | "react-app/jest" 34 | ] 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.2%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Rahul Jha - Full Stack Web Developer 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 27 | 28 | 29 | 30 | 31 | 32 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /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 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); 2 | .app { 3 | font-family: "Roboto", sans-serif; 4 | text-align: center; 5 | line-height: 1.5; 6 | color: var(--clr-txt); 7 | background-color: var(--clr-bg); 8 | } 9 | 10 | .light { 11 | --clr-bg: #ffffff; 12 | --clr-bg-alt: #f6f4f4; 13 | 14 | --clr-txt: #000000ca; 15 | --clr-primary: #03467a; 16 | 17 | --clr-border: #919090; 18 | 19 | --clr-nav: #fefefe; 20 | 21 | --shadow: rgb(100, 100, 111) 0px 7px 29px 0px; 22 | } 23 | 24 | .dark { 25 | --clr-bg: #202523; 26 | --clr-bg-alt: #1d2120; 27 | 28 | --clr-txt: #eeeeee; 29 | --clr-primary: #83c9ff; 30 | --clr-border: #eeeeee7c; 31 | --clr-nav: #272f2b; 32 | --shadow: rgba(0, 0, 0, 0.558) 0px 10px 36px 0px, 33 | rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; 34 | } 35 | 36 | main { 37 | max-width: 1100px; 38 | width: 95%; 39 | margin: 0 auto; 40 | } 41 | 42 | /* Scrollbar */ 43 | ::-webkit-scrollbar { 44 | width: 7px; 45 | } 46 | 47 | ::-webkit-scrollbar-track { 48 | background: #2978b595; 49 | } 50 | 51 | ::-webkit-scrollbar-thumb { 52 | background: #1d80cd; 53 | border-radius: 12px; 54 | } 55 | 56 | ::-webkit-scrollbar-thumb:hover { 57 | background: #03467a; 58 | border-radius: 12px; 59 | } 60 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import Preloader from "../src/components/preloader/Preloader"; 3 | import Navbar from "./components/navbar/Navbar"; 4 | import Home from "./components/Home/Home"; 5 | import About from "./components/About/About"; 6 | import Projects from "./components/Projects/Projects"; 7 | import Footer from "./components/footer/Footer"; 8 | import { ThemeContext } from "./Context/theme"; 9 | import { 10 | BrowserRouter as Router, 11 | Route, 12 | Routes, 13 | Navigate, 14 | } from "react-router-dom"; 15 | import ScrollToTop from "./components/ScrollToTop/ScrollToTop"; 16 | import "./App.css"; 17 | import "bootstrap/dist/css/bootstrap.min.css"; 18 | 19 | function App() { 20 | const [load, upadateLoad] = useState(true); 21 | const [{ themename }] = React.useContext(ThemeContext); 22 | 23 | useEffect(() => { 24 | const timer = setTimeout(() => { 25 | upadateLoad(false); 26 | }, 1200); 27 | 28 | return () => clearTimeout(timer); 29 | }, []); 30 | 31 | return ( 32 |
33 | 34 | 35 |
36 | 37 | 38 | 39 | } /> 40 | } /> 41 | } /> 42 | } /> 43 | 44 |
46 | 47 |
48 | ); 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Assets/Avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/src/Assets/Avatar.png -------------------------------------------------------------------------------- /src/Assets/Projects/ExpenseTracker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/src/Assets/Projects/ExpenseTracker.png -------------------------------------------------------------------------------- /src/Assets/Projects/Portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/src/Assets/Projects/Portfolio.png -------------------------------------------------------------------------------- /src/Assets/Projects/PrivateChat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/src/Assets/Projects/PrivateChat.png -------------------------------------------------------------------------------- /src/Assets/Projects/ecart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/src/Assets/Projects/ecart.png -------------------------------------------------------------------------------- /src/Assets/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/src/Assets/about.png -------------------------------------------------------------------------------- /src/Assets/chevron-up-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Assets/logoDark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/src/Assets/logoDark.png -------------------------------------------------------------------------------- /src/Assets/logoLight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahuljha4171/Portfolio-Website/b7a867f7c1172f0cc584557108156605ca58572c/src/Assets/logoLight.png -------------------------------------------------------------------------------- /src/Assets/pre.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/Context/theme.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | const ThemeContext = React.createContext(); 5 | 6 | const ThemeProvider = ({ children }) => { 7 | const [themename, setthemename] = useState("light"); 8 | const toggeltheme = () => { 9 | themename === "light" ? setthemename("dark") : setthemename("light"); 10 | }; 11 | 12 | return ( 13 | 14 | {children} 15 | 16 | ); 17 | }; 18 | 19 | ThemeProvider.propTypes = { 20 | children: PropTypes.node.isRequired, 21 | }; 22 | 23 | export { ThemeProvider, ThemeContext }; 24 | -------------------------------------------------------------------------------- /src/components/About/About.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import Github from "./Github"; 4 | import Techstack from "./Techstack"; 5 | import Aboutcard from "./AboutCard"; 6 | import laptopImg from "../../Assets/about.png"; 7 | import Toolstack from "./Toolstack"; 8 | import ScrollToTop from "../ScrollToTop/ScrollToTop"; 9 | 10 | import "./about.css"; 11 | 12 | function About() { 13 | return ( 14 | 15 | 16 | 17 | 25 |

29 | Who I'M 30 |

31 |
32 | 33 |
34 | 35 | 40 | about 46 | 47 | 48 |

49 | Skillset I Work With 50 |

51 | 52 |
53 | 54 |
55 | 56 |

57 | Tools I use 58 |

59 |
60 | 61 |
62 | 63 | 64 | 65 | 66 | 67 | ); 68 | } 69 | 70 | export default About; 71 | -------------------------------------------------------------------------------- /src/components/About/AboutCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "react-bootstrap/Card"; 3 | import { AiOutlineArrowRight } from "react-icons/ai"; 4 | 5 | function AboutCard() { 6 | return ( 7 | 8 | 9 |
10 |

11 | Hi Everyone, I am Rahul Jha from Darbhanga, Bihar, India. I am a computer science graduate and a passionate programmer. 12 |
13 |
14 | In addition to coding, here are some other things I enjoy doing! 15 |

16 |
    17 |
  • 18 | Writing Tech Blogs 19 |
    • 20 |
  • 21 | Reading Books 22 |
    • 23 |
  • 24 | Playing Games 25 |
    • 26 |
  • 27 | Traveling 28 |
    • 29 |
30 |
31 | 32 | 33 | ); 34 | } 35 | 36 | export default AboutCard; 37 | -------------------------------------------------------------------------------- /src/components/About/Github.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import GitHubCalendar from "react-github-calendar"; 3 | import { Row } from "react-bootstrap"; 4 | 5 | function Github() { 6 | return ( 7 | 8 |

9 | How much Code I Write 10 |

11 |
12 | 19 |
20 | 21 | ); 22 | } 23 | 24 | export default Github; 25 | -------------------------------------------------------------------------------- /src/components/About/Techstack.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Col, Row } from "react-bootstrap"; 3 | import { 4 | DiJavascript1, 5 | DiReact, 6 | DiNodejs, 7 | DiMongodb, 8 | DiGit, 9 | } from "react-icons/di"; 10 | import { 11 | SiFirebase, 12 | SiNextdotjs, 13 | SiTailwindcss, 14 | SiRedux, 15 | SiMui, 16 | } from "react-icons/si"; 17 | 18 | function Techstack() { 19 | return ( 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | } 54 | 55 | export default Techstack; 56 | -------------------------------------------------------------------------------- /src/components/About/Toolstack.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Col, Row } from "react-bootstrap"; 3 | import { 4 | SiLinux, 5 | SiVisualstudiocode, 6 | SiPostman, 7 | 8 | SiVercel, 9 | 10 | SiGithub, 11 | } from "react-icons/si"; 12 | 13 | function Toolstack() { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | } 34 | 35 | export default Toolstack; 36 | -------------------------------------------------------------------------------- /src/components/About/about.css: -------------------------------------------------------------------------------- 1 | .about-section { 2 | position: relative !important; 3 | padding-top: 150px !important; 4 | padding-bottom: 30px !important; 5 | background-color: var(--clr-bg) !important; 6 | 7 | } 8 | 9 | .tech-icons { 10 | font-size: 4.5em !important; 11 | margin: 15px !important; 12 | padding: 10px !important; 13 | opacity: 0.93 !important; 14 | color: var(--clr-primary); 15 | vertical-align: middle !important; 16 | text-align: center !important; 17 | background: transparent !important; 18 | box-shadow: var(--shadow) !important; 19 | border-radius: 5px !important; 20 | display: table !important; 21 | overflow: hidden !important; 22 | transition: all 0.4s ease 0s !important; 23 | } 24 | .quote-card-view { 25 | background: transparent !important; 26 | border: none !important; 27 | color: var(--clr-txt) !important; 28 | box-shadow: var(--shadow); 29 | } 30 | .gitContainer { 31 | padding: 15px; 32 | background: transparent !important; 33 | box-shadow: var(--shadow); 34 | font-size: 30px !important; 35 | color: var(--clr-txt); 36 | border-radius: 5px; 37 | display: flex; 38 | justify-content: center; 39 | } 40 | @media (max-width: 767px) { 41 | .tech-icons { 42 | margin: 10px !important; 43 | } 44 | } 45 | 46 | .tech-icons:hover { 47 | transform: scale(1.08) !important; 48 | overflow: hidden !important; 49 | } 50 | .tech-icon-images { 51 | padding: 20px !important; 52 | line-height: 1.6 !important; 53 | } 54 | .primary-header { 55 | color: var(--clr-primary) !important; 56 | } 57 | .about-activity { 58 | list-style: none !important; 59 | text-align: left !important; 60 | padding-left: 1px !important; 61 | } 62 | 63 | @media (max-width: 767px) { 64 | .about-img { 65 | padding-top: 0 !important; 66 | } 67 | } 68 | .git { 69 | color: var(--clr-primary); 70 | } 71 | -------------------------------------------------------------------------------- /src/components/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import homeIcon from "../../Assets/homeicons.svg"; 4 | import ScrollToTop from "../ScrollToTop/ScrollToTop"; 5 | 6 | import Home2 from "./Home2"; 7 | import Type from "./Type"; 8 | import "./home.css"; 9 | 10 | function Home() { 11 | return ( 12 |
13 | 14 | 15 | 16 | 17 |

18 | Hi There!{" "} 19 | 20 | 👋🏻 21 | {" "} 22 | I'M 23 |

24 | 25 |

26 | Rahul Jha 27 |

28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | home pic 41 | 42 | 43 | 44 | 45 | 46 | 47 |
48 | ); 49 | } 50 | 51 | export default Home; 52 | -------------------------------------------------------------------------------- /src/components/Home/Home2.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import myImg from "../../Assets/Avatar.png"; 4 | import Tilt from "react-parallax-tilt"; 5 | import { 6 | AiFillGithub, 7 | AiOutlineTwitter, 8 | AiFillInstagram, 9 | AiOutlineMail, 10 | } from "react-icons/ai"; 11 | import { FaLinkedinIn } from "react-icons/fa"; 12 | 13 | function Home2() { 14 | return ( 15 | 16 | 17 | 18 | 19 |

20 | ABOUT ME 21 |

22 |

23 |
24 | I'm a 25 | Self-Taught Web Developer 26 | {" "} 27 | who loves solving problems and building Websites. 28 |
29 |
I am passionate about{" "} 30 | technologies and love to learn 31 | new things. 32 |
33 |
I am more interested in building new 34 | 35 | Web Technologies and Products. 36 | 37 |
38 |
I always apply my experience in developing products with{" "} 39 | Node.js and Modern Javascript 40 | Library and Framework like 41 | React.js. 42 |
43 |
44 | Currently expanding my portfolio by building more{" "} 45 | projects projects that I can add 46 | here. 47 |

48 | 49 | 50 | 51 | avatar 57 | 58 | 59 | 60 | 61 | 62 |

63 | CONNECT WITH ME 64 |

65 |

Feel free to connect with me

66 | 123 | 124 | 125 | 126 | 127 | ); 128 | } 129 | export default Home2; 130 | -------------------------------------------------------------------------------- /src/components/Home/Type.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Typewriter from "typewriter-effect"; 3 | 4 | function Type() { 5 | return ( 6 | 18 | ); 19 | } 20 | 21 | export default Type; 22 | -------------------------------------------------------------------------------- /src/components/Home/home.css: -------------------------------------------------------------------------------- 1 | .wave { 2 | animation-name: wave-animation; /* Refers to the name of your @keyframes element below */ 3 | animation-duration: 2.1s; /* Change to speed up or slow down */ 4 | animation-iteration-count: infinite; /* Never stop waving :) */ 5 | transform-origin: 70% 70%; /* Pivot around the bottom-left palm */ 6 | display: inline-block; 7 | } 8 | 9 | @keyframes wave-animation { 10 | 0% { 11 | transform: rotate(0deg); 12 | } 13 | 10% { 14 | transform: rotate(14deg); 15 | } /* The following five values can be played with to make the waving more or less extreme */ 16 | 20% { 17 | transform: rotate(-8deg); 18 | } 19 | 30% { 20 | transform: rotate(14deg); 21 | } 22 | 40% { 23 | transform: rotate(-4deg); 24 | } 25 | 50% { 26 | transform: rotate(10deg); 27 | } 28 | 60% { 29 | transform: rotate(0deg); 30 | } /* Reset for the last half to pause */ 31 | 100% { 32 | transform: rotate(0deg); 33 | } 34 | } 35 | 36 | .home-header { 37 | padding-top: 80px !important; 38 | } 39 | 40 | .home-section { 41 | position: relative; 42 | z-index: 1; 43 | background-color: var(--clr-bg); 44 | padding-bottom: 30px !important; 45 | padding-top: 30px !important; 46 | } 47 | 48 | .home-content { 49 | padding: 9rem 2rem !important; 50 | color: var(--clr-txt); 51 | text-align: left; 52 | } 53 | 54 | .heading { 55 | font-size: 2.4em !important; 56 | padding-left: 50px !important; 57 | } 58 | 59 | .heading-name { 60 | font-size: 5em !important; 61 | padding-left: 45px !important; 62 | } 63 | 64 | .main-name { 65 | color: var(--clr-primary) !important; 66 | } 67 | 68 | .Typewriter__wrapper { 69 | font-size: 2em !important; 70 | color: var(--clr-primary) !important; 71 | font-weight: 600 !important; 72 | padding-left: 25px; 73 | } 74 | .Typewriter__cursor { 75 | font-size: 2.4em !important; 76 | color: var(--clr-primary) !important; 77 | } 78 | 79 | @media (max-width: 991px) { 80 | .heading { 81 | font-size: 2.3em !important; 82 | padding-left: 0px !important; 83 | text-align: left !important; 84 | } 85 | 86 | .heading-name { 87 | font-size: 4em !important; 88 | padding-left: 0px !important; 89 | text-align: left !important; 90 | } 91 | .type{ 92 | padding-left: 0px; 93 | } 94 | .Typewriter__wrapper { 95 | font-size: 1.3em !important; 96 | padding: 0px !important; 97 | } 98 | .Typewriter__cursor { 99 | font-size: 1.5em !important; 100 | } 101 | } 102 | @media (max-width: 767px) { 103 | .heading { 104 | font-size: 2.2em !important; 105 | padding-left: 20px !important; 106 | text-align: left !important; 107 | } 108 | 109 | .heading-name { 110 | font-size: 3em !important; 111 | padding-left: 20px !important; 112 | text-align: left !important; 113 | } 114 | .type{ 115 | text-align: left !important; 116 | } 117 | .Typewriter__wrapper { 118 | text-align: center !important; 119 | font-size: 1.2em !important; 120 | font-weight: 400 !important; 121 | position: absolute; 122 | } 123 | 124 | .Typewriter__cursor { 125 | display: none !important; 126 | } 127 | } 128 | 129 | .myAvtar { 130 | justify-content: center !important; 131 | padding-top: 9em !important; 132 | } 133 | 134 | @media (max-width: 767px) { 135 | .myAvtar { 136 | padding-top: 2em !important; 137 | padding-bottom: 2em !important; 138 | } 139 | } 140 | 141 | .home-about-section { 142 | position: relative; 143 | padding-bottom: 70px !important; 144 | padding-top: 70px !important; 145 | background-color: var(--clr-bg-alt); 146 | } 147 | 148 | .home-about-description { 149 | color: var(--clr-txt) !important; 150 | padding-top: 100px !important; 151 | padding-bottom: 20px !important; 152 | text-align: center !important; 153 | } 154 | 155 | .home-about-body { 156 | padding-top: 50px; 157 | font-size: 1.2em !important; 158 | text-align: left; 159 | } 160 | 161 | .home-about-social { 162 | text-align: center !important; 163 | padding-top: 25px; 164 | color: var(--clr-txt) !important; 165 | } 166 | 167 | .home-about-social-links { 168 | justify-content: center !important; 169 | padding-top: 15px !important; 170 | display: inline-block !important; 171 | position: relative !important; 172 | padding-inline-start: 0 !important; 173 | } 174 | 175 | .home-social-icons { 176 | position: relative !important; 177 | display: inline-block !important; 178 | width: 40px !important; 179 | height: 40px !important; 180 | text-align: center !important; 181 | font-size: 1.2em !important; 182 | line-height: 2em !important; 183 | background: var(--clr-bg) !important; 184 | box-shadow: var(--shadow) !important; 185 | border-radius: 50% !important; 186 | transition: 0.5s !important; 187 | } 188 | 189 | .home-social-icons::before { 190 | content: ""; 191 | position: absolute; 192 | top: 0; 193 | left: 0; 194 | width: 100%; 195 | height: 100%; 196 | border-radius: 50%; 197 | background: var(--clr-primary); 198 | transition: 0.5s; 199 | transform: scale(0.9); 200 | z-index: -1; 201 | } 202 | 203 | .home-social-icons:hover::before { 204 | transform: scale(1.1); 205 | box-shadow: 0 0 15px var(--clr-primary); 206 | } 207 | 208 | .home-social-icons:hover { 209 | color: var(--clr-primary); 210 | box-shadow: 0 0 5px var(--clr-primary); 211 | text-shadow: 0 0 2px var(--clr-primary); 212 | } 213 | 214 | .social-icons { 215 | display: inline-block !important; 216 | padding-right: 10px; 217 | padding-left: 10px; 218 | color: var(--clr-primary); 219 | } 220 | 221 | .icon-colour { 222 | color: var(--clr-primary) !important; 223 | } 224 | -------------------------------------------------------------------------------- /src/components/Projects/ProjectCards.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "react-bootstrap/Card"; 3 | import Button from "react-bootstrap/Button"; 4 | import { CgWebsite } from "react-icons/cg"; 5 | import { BsGithub } from "react-icons/bs"; 6 | 7 | function ProjectCards(props) { 8 | return ( 9 | 10 | 11 | 12 | {props.title} 13 | 14 | {props.description} 15 | 16 | 20 | {"\n"} 21 | {"\n"} 22 | 23 | {/* If the component contains Demo link and if it's not a Blog then, it will render the below component */} 24 | 25 | {!props.isBlog && props.demoLink && ( 26 | 35 | )} 36 | 37 | 38 | 39 | ); 40 | } 41 | export default ProjectCards; 42 | -------------------------------------------------------------------------------- /src/components/Projects/Projects.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import ScrollToTop from "../ScrollToTop/ScrollToTop"; 4 | import ProjectCard from "./ProjectCards"; 5 | 6 | import PrivateChat from "../../Assets/Projects/PrivateChat.png"; 7 | import Portfolio from "../../Assets/Projects/Portfolio.png"; 8 | import Ecart from "../../Assets/Projects/ecart.png"; 9 | import ExpenseTracker from "../../Assets/Projects/ExpenseTracker.png"; 10 | 11 | import "./project.css"; 12 | 13 | function Projects() { 14 | return ( 15 | 16 | 17 |

18 | My Recent Works 19 |

20 |

Here are a few projects I've worked on recently.

21 | 22 | 23 | 30 | 31 | 32 | 33 | 40 | 41 | 42 | 49 | 50 | 51 | 52 | 59 | 60 | 61 | 62 | 63 | 64 | ); 65 | } 66 | 67 | export default Projects; 68 | -------------------------------------------------------------------------------- /src/components/Projects/project.css: -------------------------------------------------------------------------------- 1 | .project-section { 2 | position: relative !important; 3 | padding-top: 150px !important; 4 | padding-bottom: 30px !important; 5 | background-color: var(--clr-bg) !important; 6 | } 7 | 8 | .project-card { 9 | padding-top: 50px !important; 10 | padding-bottom: 50px !important; 11 | 12 | padding-left: 25px !important; 13 | padding-right: 25px !important; 14 | height: auto !important; 15 | } 16 | 17 | .project-card-view { 18 | background: transparent !important; 19 | color: var(--clr-txt) !important; 20 | box-shadow: var(--shadow) !important; 21 | transition: all 0.5s ease 0s !important; 22 | height: 100% !important; 23 | } 24 | .project-card-view:hover { 25 | transform: scale(1.05) !important; 26 | overflow: hidden !important; 27 | } 28 | 29 | .blog-card { 30 | padding-top: 50px !important; 31 | padding-bottom: 50px !important; 32 | padding-left: 25px !important; 33 | padding-right: 25px !important; 34 | height: auto !important; 35 | } 36 | 37 | .blog-card-view { 38 | background-color: transparent !important; 39 | box-shadow: 0 3px 3px 2px #0bebefa0 !important; 40 | color: white !important; 41 | transition: all 0.5s ease 0s !important; 42 | height: 100% !important; 43 | } 44 | 45 | .blog-link { 46 | color: white !important; 47 | text-decoration: none !important; 48 | } 49 | 50 | .blog-link:hover { 51 | cursor: pointer !important; 52 | } 53 | 54 | .blog-card-view:hover { 55 | transform: scale(1.02) !important; 56 | overflow: hidden !important; 57 | box-shadow: 0 3px 3px 5px #0bebef !important; 58 | } 59 | 60 | .card-img-top { 61 | padding: 20px !important; 62 | opacity: 0.8 !important; 63 | border-radius: 10px !important; 64 | } 65 | 66 | .blog-img { 67 | padding: 0px !important; 68 | opacity: 0.8 !important; 69 | border-radius: 0px !important; 70 | } 71 | 72 | .btn-primary { 73 | color: var(--clr-txt) !important; 74 | background: transparent !important; 75 | border-color: var(--clr-primary) !important; 76 | } 77 | 78 | .btn-primary:hover { 79 | color: var(--clr-bg) !important; 80 | background-color: var(--clr-primary) !important; 81 | } 82 | .btn:focus { 83 | outline: none !important; 84 | box-shadow: none !important; 85 | } 86 | .project-heading { 87 | color: var(--clr-txt) !important; 88 | font-size: 2.3em !important; 89 | font-weight: 500 !important; 90 | padding-top: 10px !important; 91 | } 92 | -------------------------------------------------------------------------------- /src/components/ScrollToTop/ScrollToTop.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useEffect, useState } from "react"; 3 | import "./scroll.css"; 4 | import { AiOutlineArrowUp } from "react-icons/ai"; 5 | 6 | const ScrollToTop = () => { 7 | const [backToTopButtom, setBackTopButton] = useState(false); 8 | 9 | useEffect(() => { 10 | window.addEventListener("scroll", () => { 11 | if (window.scrollY > 100) { 12 | setBackTopButton(true); 13 | } else { 14 | setBackTopButton(false); 15 | } 16 | }); 17 | }, []); 18 | 19 | const scrollUp = () => { 20 | window.scrollTo({ 21 | top: 0, 22 | behavior: "smooth", 23 | }); 24 | }; 25 | 26 | return ( 27 |
28 | {backToTopButtom && ( 29 | 32 | )} 33 |
34 | ); 35 | }; 36 | 37 | export default ScrollToTop; 38 | -------------------------------------------------------------------------------- /src/components/ScrollToTop/scroll.css: -------------------------------------------------------------------------------- 1 | .scroll-up { 2 | position: fixed; 3 | bottom: 75px; 4 | right: 30px; 5 | border: none; 6 | font-size: 1.8rem; 7 | cursor: pointer; 8 | z-index: 100; 9 | color: var(--clr-txt); 10 | background: transparent !important; 11 | transition: 0.5s; 12 | } 13 | 14 | .scroll-up:hover { 15 | color: var(--clr-primary); 16 | } 17 | 18 | @media (max-width: 570px) { 19 | .scroll-up { 20 | height: 40px; 21 | width: 40px; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import { 4 | AiFillGithub, 5 | AiOutlineTwitter, 6 | AiFillInstagram, 7 | AiOutlineMail, 8 | } from "react-icons/ai"; 9 | import { FaLinkedinIn } from "react-icons/fa"; 10 | import "./footer.css"; 11 | 12 | function Footer() { 13 | return ( 14 | 15 | 16 | 17 | 18 | 19 | Designed and Developed by{" "} 20 | Rahul Jha 21 | 22 | 23 | 24 | 86 | 87 | 88 | 89 | ); 90 | } 91 | 92 | export default Footer; 93 | -------------------------------------------------------------------------------- /src/components/footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | background: transparent; 3 | border-top: 1px solid var(--clr-border); 4 | padding-top: 10px !important; 5 | padding-bottom: 8px !important ; 6 | } 7 | .footer-copywright { 8 | text-align: center !important; 9 | } 10 | 11 | .footer-body { 12 | z-index: 1; 13 | text-align: center !important; 14 | } 15 | 16 | @media (max-width: 767px) { 17 | .footer-copywright { 18 | text-align: center !important; 19 | } 20 | 21 | .footer-body { 22 | text-align: center !important; 23 | } 24 | } 25 | 26 | .footer span { 27 | font-size: 1em; 28 | color: var(--clr-txt) !important; 29 | margin-top: 0.5em !important; 30 | margin-bottom: 0.5em !important; 31 | } 32 | .footer-icons { 33 | margin-top: 0.5em !important; 34 | margin-bottom: 0.5em !important; 35 | padding: 0 !important; 36 | color: var(--clr-txt) !important; 37 | } 38 | .social-icons:hover { 39 | transform: scale(1.3) !important; 40 | transition: all 0.3s ease-in-out 0s !important; 41 | } 42 | .github:hover { 43 | color: black !important; 44 | } 45 | .email:hover { 46 | color: #d93025 !important; 47 | } 48 | .instagram:hover { 49 | color: #E1306C !important; 50 | } 51 | .linkedin:hover { 52 | color: #0a66c2 !important; 53 | } 54 | .twitter:hover { 55 | color: #1d9bf0 !important; 56 | } 57 | -------------------------------------------------------------------------------- /src/components/navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useState } from "react"; 2 | import Navbar from "react-bootstrap/Navbar"; 3 | import Nav from "react-bootstrap/Nav"; 4 | import { ThemeContext } from "../../Context/theme"; 5 | 6 | import Container from "react-bootstrap/Container"; 7 | import logoLight from "../../Assets/logoLight.png"; 8 | import logoDark from "../../Assets/logoDark.png"; 9 | 10 | import { Link } from "react-router-dom"; 11 | import "./navbar.css"; 12 | 13 | function NavBar() { 14 | const [expand, updateExpanded] = useState(false); 15 | const [navColour, updateNavbar] = useState(false); 16 | const [{ themename, toggeltheme }] = useContext(ThemeContext); 17 | 18 | function scrollHandler() { 19 | if (window.scrollY >= 20) { 20 | updateNavbar(true); 21 | } else { 22 | updateNavbar(false); 23 | } 24 | } 25 | useEffect(() => { 26 | const body = document.body; 27 | const toggle = document.querySelector(".toggle-inner"); 28 | if (themename === "dark") { 29 | body.classList.add("dark-mode"); 30 | toggle.classList.add("toggle-active"); 31 | } else { 32 | body.classList.remove("dark-mode"); 33 | toggle.classList.remove("toggle-active"); 34 | } 35 | }, [themename]); 36 | 37 | window.addEventListener("scroll", scrollHandler); 38 | 39 | return ( 40 | 46 | 47 | 48 | brand 54 | 55 | 56 | { 59 | updateExpanded(expand ? false : "expanded"); 60 | }} 61 | > 62 |
63 | 64 | 65 | 66 |
67 | 68 | 69 | 70 | 106 | 107 | 108 |
109 |
110 |
111 |
112 |
113 | 114 | 115 | 116 | 117 | ); 118 | } 119 | 120 | export default NavBar; 121 | -------------------------------------------------------------------------------- /src/components/navbar/navbar.css: -------------------------------------------------------------------------------- 1 | .sticky { 2 | transition: all 0.5s ease-out 0s !important; 3 | box-shadow: 0px 2px 2px 0px var(--clr-border) !important; 4 | backdrop-filter: blur(250px) !important; 5 | } 6 | 7 | .navbar { 8 | position: fixed !important; 9 | transition: all 0.5s ease-out 0s !important; 10 | padding: 0.3rem 2rem !important; 11 | } 12 | 13 | .navbar-toggler { 14 | position: relative !important; 15 | background-color: transparent !important; 16 | border: none !important; 17 | outline: none !important; 18 | } 19 | 20 | .navbar-toggler span { 21 | display: block !important; 22 | background-color: var(--clr-txt) !important; 23 | height: 4px !important; 24 | width: 27px !important; 25 | outline: none !important; 26 | margin-top: 5px !important; 27 | margin-bottom: 5px !important; 28 | transform: rotate(0deg) !important; 29 | left: 0 !important; 30 | opacity: 1 !important; 31 | } 32 | 33 | .navbar-toggler:focus, 34 | .navbar-toggler:active { 35 | box-shadow: none !important; 36 | outline: none !important; 37 | } 38 | 39 | .navbar-toggler span:nth-child(1), 40 | .navbar-toggler span:nth-child(3) { 41 | transition: transform 0.35s ease-in-out !important; 42 | transition: transform 0.35s ease-in-out !important; 43 | } 44 | 45 | .navbar-toggler:not(.collapsed) span:nth-child(1) { 46 | position: absolute !important; 47 | left: 12px !important; 48 | top: 10px !important; 49 | transform: rotate(135deg) !important; 50 | opacity: 0.9 !important; 51 | } 52 | 53 | .navbar-toggler:not(.collapsed) span:nth-child(2) { 54 | height: 12px !important; 55 | visibility: hidden !important; 56 | background-color: transparent !important; 57 | } 58 | 59 | .navbar-toggler:not(.collapsed) span:nth-child(3) { 60 | position: absolute !important; 61 | left: 12px !important; 62 | top: 10px !important; 63 | transform: rotate(-135deg) !important; 64 | opacity: 0.9 !important; 65 | } 66 | 67 | @media (max-width: 768px) { 68 | .navbar { 69 | font-size: 1.2rem !important; 70 | transition: all 0.5s ease-out 0s !important; 71 | box-shadow: 0px 2px 2px 0px var(--clr-border) !important; 72 | 73 | backdrop-filter: blur(250px) !important; 74 | } 75 | } 76 | .navbar-brand { 77 | color: var(--clr-txt) !important; 78 | } 79 | 80 | .logo { 81 | height: 2.5em; 82 | width: 3em; 83 | } 84 | 85 | .navbar-nav .nav-link { 86 | color: var(--clr-txt) !important; 87 | padding-right: 0.5rem !important; 88 | padding-left: 0.5rem !important; 89 | } 90 | .nav-link { 91 | padding: 0.8rem 1rem !important; 92 | } 93 | 94 | .theme-switch { 95 | padding-left: 20px; 96 | } 97 | 98 | @media (max-width: 768px) { 99 | .nav-link { 100 | padding: 0.7rem 1rem !important; 101 | } 102 | .logo { 103 | height: 1.9em !important; 104 | width: 2.5em !important; 105 | } 106 | .theme-switch { 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | } 111 | } 112 | 113 | .navbar-nav .nav-item { 114 | position: relative; 115 | margin-left: 20px; 116 | } 117 | 118 | .navbar-nav .nav-item a { 119 | font-weight: 400; 120 | transition: all 0.3s ease-out 0s; 121 | position: relative; 122 | z-index: 1; 123 | } 124 | 125 | .navbar-nav .nav-item a::after { 126 | content: ""; 127 | position: relative; 128 | display: block; 129 | height: 5px; 130 | width: 0; 131 | border-radius: 16px; 132 | background-color: var(--clr-primary); 133 | bottom: 1px; 134 | left: 0; 135 | z-index: -1; 136 | transition: all 0.3s ease-out 0s; 137 | } 138 | 139 | .navbar-nav .nav-item a:hover::after { 140 | width: 100%; 141 | } 142 | 143 | /* theme Switch */ 144 | #toggle { 145 | width: 50px; 146 | display: flex; 147 | padding: 5px; 148 | background-color: #202523; 149 | display: block; 150 | border-radius: 1000px; 151 | cursor: pointer; 152 | box-shadow: 0px 5px 20px -10px var(--shadow); 153 | transition: background-color 0.3s ease-in; 154 | } 155 | #toggle .toggle-inner { 156 | width: 20px; 157 | height: 15px; 158 | background-color: var(--clr-bg); 159 | border-radius: 1000px; 160 | transition: margin-left 0.3s ease-in, background-color 0.3s ease-in; 161 | } 162 | #toggle .toggle-inner.toggle-active { 163 | margin-left: 20px; 164 | } 165 | .dark-mode #toggle { 166 | background-color: var(--clr-txt); 167 | } 168 | .dark-mode #toggle .toggle-inner { 169 | background-color: #202523; 170 | } 171 | -------------------------------------------------------------------------------- /src/components/preloader/Preloader.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./preloader.css"; 3 | function Pre(props) { 4 | return
; 5 | } 6 | 7 | export default Pre; 8 | -------------------------------------------------------------------------------- /src/components/preloader/preloader.css: -------------------------------------------------------------------------------- 1 | #preloader { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | z-index: 999999; 8 | background-color: var(--clr-bg); 9 | background-image: url(../../Assets/pre.svg); 10 | background-repeat: no-repeat; 11 | background-position: center; 12 | } 13 | 14 | #preloader-none { 15 | opacity: 0; 16 | } 17 | 18 | #no-scroll { 19 | overflow: hidden; 20 | height: 100vh; 21 | } 22 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); 2 | body { 3 | margin: 0; 4 | font-family: "Roboto", serif !important; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | background-image: linear-gradient( 8 | 90deg, 9 | hsla(153, 9%, 19%, 1) 0%, 10 | hsla(153, 9%, 19%, 1) 100% 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import { ThemeProvider } from "./Context/theme"; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById("root")); 9 | 10 | root.render( 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | 18 | // If you want to start measuring performance in your app, pass a function 19 | // to log results (for example: reportWebVitals(console.log)) 20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 21 | reportWebVitals(); 22 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------