├── .eslintrc.cjs ├── .gitignore ├── How to user this project.txt ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── App.jsx ├── Components │ ├── About │ │ └── About.jsx │ ├── Experience │ │ └── Experience.jsx │ ├── Footer │ │ └── Footer.jsx │ ├── Home │ │ └── Home.jsx │ ├── Navbar │ │ └── Navbar.jsx │ ├── Projects │ │ ├── ProjectCard.jsx │ │ └── Projects.jsx │ └── TextChange.jsx ├── assets │ ├── 7358602-removebg-preview.png │ ├── 7358653-removebg-preview.png │ └── photo-C8q0KQHG.webp ├── index.css └── main.jsx ├── tailwind.config.js └── vite.config.js /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /How to user this project.txt: -------------------------------------------------------------------------------- 1 | 1. Clone or download this GitHub repo 2 | 2. then open terminal in your vs code -> type 'npm i' -> then type 'npm run dev' 3 | 3. Boom! your project is not running on you localhost:5173 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio_react", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@remixicon/react": "^4.2.0", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-icons": "^5.2.1" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.3.3", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react": "^4.3.1", 22 | "autoprefixer": "^10.4.20", 23 | "eslint": "^8.57.0", 24 | "eslint-plugin-react": "^7.34.3", 25 | "eslint-plugin-react-hooks": "^4.6.2", 26 | "eslint-plugin-react-refresh": "^0.4.7", 27 | "postcss": "^8.4.40", 28 | "tailwindcss": "^3.4.7", 29 | "vite": "^5.3.4" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import About from "./Components/About/About"; 2 | import Experience from "./Components/Experience/Experience"; 3 | import Footer from "./Components/Footer/Footer"; 4 | import Home from "./Components/Home/Home"; 5 | import Navbar from "./Components/Navbar/Navbar"; 6 | import Projects from "./Components/Projects/Projects"; 7 | 8 | function App() { 9 | return ( 10 |
11 | 12 | 13 | 14 | 15 | 16 |
18 | ); 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /src/Components/About/About.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AboutImg from "../../assets/7358653-removebg-preview.png"; 3 | import { IoArrowForward } from "react-icons/io5"; 4 | const About = () => { 5 | return ( 6 |
10 |
11 |

About

12 |
13 | About img 14 | 15 |
    16 |
    17 | 18 | 19 | 20 |

    21 | Frontend developer 22 |

    23 |

    24 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 25 | Maiores explicabo deserunt asperiores quasi, vitae blanditiis 26 | perferendis quos consectetur ea harum! Libero aut qui 27 | similique recusandae provident consectetur sed itaque alias 28 | sint ipsa? 29 |

    30 |     31 |
    32 |
    33 | 34 | 35 | 36 |

    37 | Database developer 38 |

    39 |

    40 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 41 | Maiores 42 |

    43 |     44 |
    45 |
    46 | 47 | 48 | 49 |

    50 | Backend developer 51 |

    52 |

    53 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 54 | Maiores explicabo deserunt asperiores quasi, vitae blanditiis 55 | perferendis 56 |

    57 |     58 |
    59 |
60 |
61 |
62 |
63 | ); 64 | }; 65 | 66 | export default About; 67 | -------------------------------------------------------------------------------- /src/Components/Experience/Experience.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaCss3, FaFigma, FaHtml5, FaJs, FaReact } from "react-icons/fa"; 3 | import { SiRedis } from "react-icons/si"; 4 | import { FaGoogle } from "react-icons/fa"; 5 | import { SiMongodb } from "react-icons/si"; 6 | import { RiNetflixFill } from "react-icons/ri"; 7 | import { FaAmazon } from "react-icons/fa"; 8 | const Experience = () => { 9 | return ( 10 |
11 |

Experience

12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 |
37 |
38 | 39 | 40 |

Software Engineer , Google

41 |

42 | Sept 2023 - Present 43 |

44 |
    45 |
  • - Work as software developer
    • 46 |
  • - Senior SDE-developer
    • 47 |
48 | 49 |
50 |
51 | 52 | 53 |

Software Engineer, Google

54 |

55 | Sept 2023 - Present 56 |

57 |
    58 |
  • - Work as software developer.
    • 59 |
  • - Senior SDE-developer
    • 60 |
61 | 62 |
63 |
64 | 65 | 66 |

Software Engineer, Google

67 |

68 | Sept 2023 - Present 69 |

70 |
    71 |
  • - Work as software developer.
    • 72 |
  • - Senior SDE-developer
    • 73 |
74 | 75 |
76 |
77 |
78 |
79 | ); 80 | }; 81 | 82 | export default Experience; 83 | -------------------------------------------------------------------------------- /src/Components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MdOutlineEmail } from "react-icons/md"; 3 | import { CiLinkedin } from "react-icons/ci"; 4 | import { FaGithub } from "react-icons/fa"; 5 | 6 | const Footer = () => { 7 | return ( 8 | 34 | ); 35 | }; 36 | 37 | export default Footer; 38 | -------------------------------------------------------------------------------- /src/Components/Home/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import avatarImg from "../../assets/7358602-removebg-preview.png"; 3 | import TextChange from "../TextChange"; 4 | 5 | const Home = () => { 6 | return ( 7 |
8 |
9 |

10 | 11 |

12 |

13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, 14 | doloremque? 15 |

16 | 19 |
20 |
21 | 22 |
23 |
24 | ); 25 | }; 26 | 27 | export default Home; 28 | -------------------------------------------------------------------------------- /src/Components/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { RiCloseLine, RiMenu2Line } from "@remixicon/react"; 3 | const Navbar = () => { 4 | const [menu, openMenu] = useState(false); 5 | const [showMenu, setShowmenu] = useState(true); 6 | return ( 7 | 52 | ); 53 | }; 54 | 55 | export default Navbar; 56 | -------------------------------------------------------------------------------- /src/Components/Projects/ProjectCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import bannerImg from "../../assets/photo-C8q0KQHG.webp"; 3 | const ProjectCard = ({ title, main }) => { 4 | return ( 5 |
6 | 7 |

8 | {title} 9 |

10 |

{main}

11 |
12 | 15 | 18 |
19 |
20 | ); 21 | }; 22 | 23 | export default ProjectCard; 24 | -------------------------------------------------------------------------------- /src/Components/Projects/Projects.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ProjectCard from "./ProjectCard"; 3 | 4 | const Projects = () => { 5 | return ( 6 |
7 |

Projects

8 |
9 | 13 | 17 | 21 |
22 |
23 | ); 24 | }; 25 | 26 | export default Projects; 27 | -------------------------------------------------------------------------------- /src/Components/TextChange.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState, useEffect } from "react"; 3 | const TextChange = () => { 4 | const texts = ["Hi, I'm Aditi", "Hi, I'm Aditi", "Hi, I'm Aditi"]; 5 | const [currenText, setCurrentText] = useState(""); 6 | const [endValue, setendValue] = useState(true); 7 | const [isForward, setIsForward] = useState(true); 8 | const [index, setIndex] = useState(0); 9 | 10 | useEffect(() => { 11 | const intervalId = setInterval(() => { 12 | setCurrentText(texts[index].substring(0, endValue)); 13 | if (isForward) { 14 | setendValue((prev) => prev + 1); 15 | } else { 16 | setendValue((prev) => prev - 1); 17 | } 18 | if (endValue > texts[index].length + 10) { 19 | setIsForward(false); 20 | } 21 | if (endValue < 2.1) { 22 | setIsForward(true); 23 | setIndex((prev) => prev & texts.length); 24 | } 25 | }, 50); 26 | 27 | return () => clearInterval(intervalId); 28 | }, [endValue, isForward, index, texts]); 29 | 30 | return
{currenText}
; 31 | }; 32 | 33 | export default TextChange; 34 | -------------------------------------------------------------------------------- /src/assets/7358602-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironcodingofficial/portfolio-website/5aba9c0f17579a53fb10b4c7c970d7248d36e190/src/assets/7358602-removebg-preview.png -------------------------------------------------------------------------------- /src/assets/7358653-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironcodingofficial/portfolio-website/5aba9c0f17579a53fb10b4c7c970d7248d36e190/src/assets/7358653-removebg-preview.png -------------------------------------------------------------------------------- /src/assets/photo-C8q0KQHG.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironcodingofficial/portfolio-website/5aba9c0f17579a53fb10b4c7c970d7248d36e190/src/assets/photo-C8q0KQHG.webp -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | * { 6 | scroll-behavior: smooth; 7 | } 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | --------------------------------------------------------------------------------