Aditya Portfolio

A modern, interactive portfolio website for Aditya Gupta, built with React, TypeScript, Framer Motion, and more. This portfolio showcases projects, skills, education, volunteering, and contact information in a visually engaging and user-friendly way.

🚀 Features

• Animated Hero Section that shrinks on scroll
• About Me section with Education, Volunteering, and Hobbies
• Skills Matrix and technology highlights
• 3D Project Gallery with carousel and detailed modal views (media slider, image/video support, lightbox)
• Contact Form with email, phone, and LinkedIn
• Responsive Design for all devices
• Modern Navigation in both header and footer
• Glassmorphism and animated UI effects

📁 Folder Structure

src/
  components/
    AboutMe.tsx           # About Me section (Education, Volunteering, Hobbies)
    Contact.tsx           # Contact form and info
    Hero.tsx              # Animated hero section
    Layout/
      Header.tsx          # Top navigation bar
      Footer.tsx          # Footer with navigation
    ProjectGallery/
      index.tsx           # Project gallery section (id="projectgallery")
      ProjectCard.tsx     # Individual project card
      ProjectCardViewer.tsx # Modal for project details
    SkillsGrid/
      index.tsx           # Skills section
      SkillMatrixCard.tsx # Skills matrix card
    ui/                   # Reusable UI components (button, badge, dialog, etc.)
  App.tsx                 # Main app layout

🛠️ Getting Started

1. Clone the repository:

   git clone https://github.com/code-epic-adi/Aditya-Portfolio.git
   cd Aditya-Portfolio-main

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser: Visit http://localhost:5173 (or the port shown in your terminal).

📝 Customization

• Projects: Edit src/components/ProjectGallery/index.tsx to update your projects, images, and videos.
• Skills: Edit src/components/SkillsGrid/index.tsx and SkillMatrixCard.tsx.
• About Me: Edit src/components/AboutMe.tsx for education, volunteering, and hobbies.
• Contact Info: Edit src/components/Contact.tsx.
• Navigation: Update Header.tsx and Footer.tsx for menu items and social links.

🧩 Tech Stack

• React, TypeScript, Framer Motion, Lucide Icons
• Tailwind CSS (utility-first styling)
• Modern UI/UX patterns (glassmorphism, animated carousels, modals)

📣 Credits

• Designed and developed by Aditya Gupta
• Inspired by modern portfolio and dashboard UI trends

📄 License

This project is for personal/educational use. Contact the author for other uses.