Personal Portfolio

A modern, responsive personal portfolio website built with React and Vite, featuring smooth animations and interactive elements.

Live Demo

🚀 Features

• Responsive Design: Looks great on all devices
• Modern UI: Clean, professional interface with smooth animations
• Interactive Sections: Hero, About, Skills, Projects, and Contact sections
• Theme Support: Light and dark mode toggle
• Performance Optimized: Fast loading and smooth scrolling

🛠️ Technologies

• React: UI library for building the interface
• Vite: Fast build tool and development server
• Framer Motion: For smooth animations and transitions
• GSAP: Advanced animations
• Three.js: For 3D elements and effects
• React Router: For navigation
• React Intersection Observer: For scroll-based animations

🏁 Getting Started

Prerequisites

• Node.js (v18+)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/yourusername/portfolio.git
   cd portfolio

2. Install dependencies

   npm install
   # or
   yarn

3. Start the development server

   npm run dev
   # or
   yarn dev

4. Open your browser and visit http://localhost:5173

📦 Scripts

• npm run dev - Start the development server
• npm run build - Build for production
• npm run preview - Preview the production build
• npm run lint - Run ESLint to check code quality

📂 Project Structure

portfolio/
├── public/          # Static assets
├── src/
│   ├── assets/      # Images, fonts, etc.
│   ├── components/  # Reusable components
│   │   ├── layout/  # Layout components
│   │   └── sections/ # Page sections
│   ├── contexts/    # React context providers
│   ├── hooks/       # Custom React hooks
│   ├── styles/      # CSS and styling files
│   ├── App.jsx      # Main application component
│   └── main.jsx     # Entry point
└── ...config files

🚢 Deployment

Build the project for production:

npm run build
# or
yarn build

The built files will be in the dist directory, ready to be deployed to any static site hosting service like Netlify, Vercel, or GitHub Pages.

👤 Author

Your Name: Dev Sharma

• Instagram: @imDevSharma
• GitHub: @imDevSharma
• LinkedIn: @imDevSharma