🌐 Modern Portfolio

🚀 Showcasing my tech journey, projects, and professional milestones.
Built with React.js and Vite, this portfolio is sleek, fast, and fully responsive.

---

🧩 Tech Stack

Modern Features

• ⚡ Vite - Lightning-fast build tool and dev server
• ⚛️ React 18 - Latest React with concurrent features
• 🎨 Styled Components 6 - Modern CSS-in-JS
• 🔒 Error Boundaries - Graceful error handling
• 🚀 Code Splitting - Lazy loading for optimal performance
• 📦 Modern Dependencies - All packages updated to latest versions

---

📸 Preview

⚠️ Replace this with a real image

---

💡 Features

• 🎨 Fully responsive UI with modern design
• 🧠 Dynamic content with modular architecture
• 🖼️ Optimized assets for fast loading
• 💼 Experience, Skills, and Bio sections
• ⚙️ Clean React components with reusable structure
• 🛡️ Error boundaries for better UX
• ⚡ Lazy loading and code splitting
• 🎯 Performance optimized with React 18 features

---

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm/yarn/pnpm

Installation

1. Clone the repository

git clone https://github.com/nilansh-07/my-portfolio.git
cd my-portfolio

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install

3. Start the development server

npm run dev
# or
yarn dev
# or
pnpm dev

4. Build for production

npm run build
# or
yarn build
# or
pnpm build

5. Preview production build

npm run preview
# or
yarn preview
# or
pnpm preview

---

🗂️ Folder Structure

my-portfolio/
├── public/
│   ├── favicon.ico
│   ├── HeroImage.jpeg
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── components/     
│   │   ├── About/
│   │   ├── Cards/
│   │   ├── Contact/
│   │   ├── Education/
│   │   ├── ErrorBoundary.js
│   │   ├── Experience/
│   │   ├── Footer/
│   │   ├── HeroBgAnimation/
│   │   ├── HeroSection/
│   │   ├── Navbar/
│   │   ├── ProjectDetails/
│   │   ├── Projects/
│   │   └── Skills/
│   ├── data/
│   │   └── constants.js
│   ├── images/
│   ├── utils/
│   │   └── Themes.js
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── index.html
├── vite.config.js
├── package.json
├── .eslintrc.cjs
├── .prettierrc.json
└── README.md

---

🛠️ Development

Code Quality

• ESLint - Code linting
• Prettier - Code formatting

Run linting:

npm run lint

Format code:

npm run format

---

📝 Modernization Highlights

This project has been modernized with:

1. ✅ Migrated from CRA to Vite - 10x faster builds
2. ✅ Updated to React 18 - Latest React features
3. ✅ Error Boundaries - Better error handling
4. ✅ Lazy Loading - Code splitting for performance
5. ✅ Modern Dependencies - All packages updated
6. ✅ ESLint & Prettier - Code quality tools
7. ✅ Modern React Patterns - Hooks, Suspense, etc.

---

📄 License

This project is open source and available under the MIT License.

---

👤 Author

Nilansh Kumar

• GitHub: @nilansh-07
• LinkedIn: nilansh07
• Email: nilanshkumar7500@gmail.com

---

🙏 Acknowledgments

• React Team
• Vite Team
• Styled Components
• All contributors and open-source libraries used