Portfolio Website

Welcome to my personal portfolio website, built using React + Vite! This project showcases my skills, projects, and experiences as a Front-End Developer.

🖥️ Live Demo

🔗 **[Check it out on Vercel]# Portfolio Website

Welcome to my personal portfolio website, built using React + Vite! This project showcases my skills, projects, and experiences as a Front-End Developer.

🖥️ Live Demo

🔗 Check it out on Vercel

---

📌 Features

• Modern & Minimal Design 🎨
• Fully Responsive 📱
• React with Vite for fast performance ⚡
• SEO Optimized with Meta Tags 🔍
• Customizable Theme with CSS Variables 🎨
• Scroll Animations using Framer Motion ✨

---

🚀 Tech Stack

• Front-End: React (Vite), JavaScript, HTML, CSS
• Styling: Tailwind CSS / Custom CSS
• Icons & Animations: Lucide React, Framer Motion
• Deployment: Vercel

---

📂 Folder Structure

portfolio/
│── public/             # Static assets (images, favicon, resume)
│── src/
│   ├── components/     # Reusable React components (Navbar, Footer, Hero, About, etc.)
│   ├── pages/          # Main pages (Home, About, Projects, Contact)
│   ├── assets/         # Images, icons, fonts
│   ├── styles/         # Global styles & CSS variables
│   ├── main.jsx        # Root entry file
│── .gitignore          # Files to ignore in GitHub
│── README.md           # Documentation
│── vite.config.js      # Vite configuration
│── package.json        # Dependencies and scripts

---

⚙️ Installation & Setup

1. Clone the Repository

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

2. Install Dependencies

   npm install

3. Run the Development Server

   npm run dev

4. Open in Browser The site will be running at http://localhost:5173/

---

🚀 Deployment on Vercel

1. Install Vercel CLI:

   npm install -g vercel

2. Deploy the project:

   vercel

3. Follow the CLI instructions, and your site will be live!

---

🛠️ Customization

• Update Logo & Favicon: Place your logo in the /public folder and update index.html:

  <link rel="icon" type="image/png" href="/logo.png" />

• Edit Resume Download: Place your resume.docx in /public and update:

  <a href="/resume.docx" download="Harshdeep_Singh_Resume.docx">Download Resume</a>

• Modify Theme Colors: Edit CSS variables in styles.css:

  :root {
    --primary-color: #0e0e0e;
    --secondary-color: #4E31AA;
    --accent-color: #3795BD;
  }

---

📬 Contact

📧 Email: [email protected]
🔗 Portfolio: your-portfolio-link.com
💼 LinkedIn: linkedin.com/in/your-profile
📂 GitHub: github.com/your-username

---

⭐ If you like this project, feel free to star this repository! ⭐