Personal Portfolio

A modern, responsive, and interactive personal portfolio website built with React, TypeScript, and Tailwind CSS. This portfolio showcases my projects, skills, and provides a way to get in touch.

🚀 Features

• Modern UI/UX with smooth animations using Framer Motion
• Responsive Design that works on all devices
• Contact Form with form validation and submission handling
• Interactive Elements including animated icons and typewriter effects
• Dark/Light Mode support (if implemented)
• Performance Optimized with code splitting and lazy loading

🛠️ Technologies Used

• Frontend Framework: React 19
• Language: TypeScript
• Styling: Tailwind CSS
• Animation: Framer Motion
• Form Handling: React Hook Form with Yup validation
• Icons: Lucide React
• Notifications: React Hot Toast
• Typewriter Effect: typewriter-effect

📦 Prerequisites

• Node.js (v14 or later)
• npm or yarn

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/your-username/portfolio.git
   cd portfolio

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm start
   # or
   yarn start

   Open http://localhost:3000 to view it in your browser.

4. Build for production

   npm run build
   # or
   yarn build

   Builds the app for production to the build folder.

📁 Project Structure

modern-portfolio/
├── public/
│   ├── favicon.ico
│   ├── logo192.png
│   ├── logo512.png
│   └── manifest.json
├── src/
│   ├── _components/
│   │   ├── FloatingIcons.tsx
│   │   ├── HeroSection.tsx
│   │   ├── Navigation.tsx
│   │   ├── AboutSection.tsx
│   │   ├── ExperienceSection.tsx
│   │   ├── SkillsSection.tsx
│   │   ├── ProjectsSection.tsx
│   │   ├── ContactSection.tsx
│   │   └── Footer.tsx
│   ├── assets/
│   │   ├── images/
│   │   └── icons/
│   ├── pages/
│   │   └── index.tsx
│   ├── App.tsx
│   ├── index.css
│   └── index.tsx
├── .env
├── .gitignore
├── package.json
├── README.md
└── tsconfig.json

🎨 Customization

• Update your personal information in the respective component files
• Modify the color scheme in tailwind.config.js
• Add/remove projects in the data files

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📬 Contact

• Email: ranjitkairi@gmail.com
• LinkedIn: Ranjit Kairi
• GitHub: @ranjitkairi

---

Made with ❤️ by Ranjit Kairi (Self) - Feel free to use this template!