Portfolio Website

A Modern, Interactive Portfolio Built with React & Three.js

View Live Demo • Report Bug • Request Feature

---

🎯 About

A premium, modern portfolio website showcasing professional experience, projects, skills, certifications, and achievements. Built with cutting-edge technologies and featuring stunning 3D visualizations, smooth animations, and a refined glassmorphic design inspired by Apple's aesthetic.

🌟 Featured Work: Career Forge AI

Career Forge AI - Intelligent Career Assistant

An advanced AI-powered platform designed to accelerate career growth.

ATS Optimization	Smart Resume Builder	Career Roadmap
Real-time analysis of resume compatibility with job descriptions	AI-driven content suggestions and formatting	Personalized learning paths and milestone tracking

✨ Features

🎨 Premium Design Glassmorphic UI elements Dark/Light theme toggle Smooth animations with Framer Motion Responsive across all devices	🚀 Interactive Elements 3D canvas animations with Three.js Interactive bento grid layout Smooth scroll effects Dynamic theme switching
📱 Sections Hero with animated taglines Professional Experience Featured Projects Technical Skills Certifications & Achievements Contact Form	⚡ Performance Vite for lightning-fast builds Optimized bundle size Lazy loading components ESLint for code quality

🛠️ Tech Stack

{
  "frontend": ["React 19.2", "Vite 7.x"],
  "3d_graphics": ["Three.js", "@react-three/fiber", "@react-three/drei"],
  "animations": ["Framer Motion"],
  "styling": ["CSS3", "Glassmorphism"],
  "icons": ["Lucide React"],
  "routing": ["React Router DOM 7.x"],
  "development": ["ESLint", "Hot Module Replacement"]
}

📦 Project Structure

Portfolio/
├── 📁 public/              # Static assets
├── 📁 src/
│   ├── 📁 components/      # React components
│   │   ├── Navbar.jsx      # Navigation bar
│   │   ├── Hero.jsx        # Hero section with animations
│   │   ├── Experience.jsx  # Work experience timeline
│   │   ├── Projects.jsx    # Project showcase
│   │   ├── BentoGrid.jsx   # Interactive grid layout
│   │   ├── Canvas3D.jsx    # 3D Three.js canvas
│   │   ├── Skills.jsx      # Technical skills
│   │   ├── Certifications.jsx  # Professional certifications
│   │   ├── Achievements.jsx    # Awards and achievements
│   │   └── Contact.jsx     # Contact form
│   ├── 📁 context/
│   │   └── ThemeContext.jsx    # Theme management
│   ├── App.jsx             # Main application
│   ├── main.jsx            # Entry point
│   └── index.css           # Global styles
├── index.html
├── package.json
└── vite.config.js

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

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

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser

   Navigate to http://localhost:5173 🎉

Build for Production

# Create optimized production build
npm run build

# Preview production build locally
npm run preview

🎨 Customization

1. Theme Colors

Edit src/index.css to customize the color palette:

:root {
  --primary-color: your-color;
  --accent-color: your-color;
  /* ... more variables */
}

2. Personal Information

Update the following components with your information:

• src/components/Hero.jsx - Name, tagline, description
• src/components/Experience.jsx - Work history
• src/components/Projects.jsx - Your projects
• src/components/Skills.jsx - Technical skills
• src/components/Contact.jsx - Contact details

3. 3D Canvas

Customize the 3D scene in src/components/Canvas3D.jsx using Three.js and React Three Fiber.

📝 Available Scripts

Command	Description
npm run dev	Start development server with HMR
npm run build	Build for production
npm run preview	Preview production build locally
npm run lint	Run ESLint for code quality

🎯 Key Components

Hero Section

Features animated taglines with smooth transitions, professional introduction, and call-to-action buttons.

BentoGrid

Modern grid layout showcasing various aspects of your profile with interactive hover effects.

Canvas3D

Immersive 3D background animations powered by Three.js, adding depth and visual interest.

Theme Toggle

Seamless dark/light mode switching with persistent user preferences.

🔧 Configuration

Vite Config

// vite.config.js
export default {
  // Your Vite configuration
}

ESLint Config

// eslint.config.js
export default {
  // Your ESLint rules
}

🌟 Highlights

• ⚡ Lightning Fast: Built with Vite for instant HMR and optimized builds
• 🎨 Modern Design: Clean, professional aesthetic with glassmorphism
• 📱 Fully Responsive: Perfect on desktop, tablet, and mobile
• ♿ Accessible: Semantic HTML and ARIA labels
• 🎭 Animated: Smooth, performant animations with Framer Motion
• 🌓 Theme Support: Dark and light modes
• 🎯 SEO Optimized: Proper meta tags and semantic structure

📄 License

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

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

💬 Contact

Have questions or want to collaborate? Reach out through the contact form on the website or connect on social media!

---

⬆ Back to Top

Made with ❤️ using React & Three.js