🚀 Manish Prajapati - Portfolio

---

🌟 About This Portfolio

A modern, interactive portfolio website built with cutting-edge technologies, featuring Three.js animated starfield backgrounds and smooth Framer Motion animations. This portfolio showcases my journey as a MERN Stack Developer with 1.5 years of experience in building scalable web applications.

✨ Features

🎨 Visual Excellence ⭐ Three.js Starfield Animation - Interactive 3D background 🎭 Framer Motion - Smooth page transitions 🌈 Glassmorphism Design - Modern UI elements 📱 Fully Responsive - Perfect on all devices 🎯 Smooth Scrolling - Enhanced user experience

⚡ Performance & Tech ⚡ Next.js 15 - Latest React framework 🎨 Tailwind CSS v4 - Modern styling 🚀 Optimized Loading - Fast page speeds 🔧 TypeScript Ready - Type-safe development 📦 Component-Based - Modular architecture

🛠️ Tech Stack

Frontend

Tools & Deployment

🚀 Quick Start

# Clone the repository
git clone https://github.com/manishprajapat421/manish-portfolio.git

# Navigate to project directory
cd manish-portfolio

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000 in your browser

📁 Project Structure

manish-portfolio/
├── 📁 components/           # Reusable React components
│   ├── 🎯 Hero.js          # Hero section with 3D background
│   ├── 🌟 ThreeBackground.js # Three.js starfield animation
│   ├── 📋 Navbar.js        # Navigation component
│   ├── 💼 Experience.js    # Work experience section
│   ├── 🛠️ Skills.js        # Technical skills showcase
│   ├── 🚀 Projects.js      # Project portfolio
│   ├── 🎓 Education.js     # Educational background
│   ├── 🏆 Achievements.js  # Awards and achievements
│   ├── 📝 Blog.js          # Blog section
│   ├── 📞 Contact.js       # Contact information
│   └── 🦶 Footer.js        # Footer component
├── 📁 pages/               # Next.js pages
│   ├── 🏠 index.js         # Main portfolio page
│   └── 📱 _app.js          # App configuration
├── 📁 styles/              # Global styles
│   └── 🎨 globals.css      # Tailwind CSS imports
├── ⚙️ tailwind.config.js   # Tailwind configuration
├── ⚙️ postcss.config.mjs   # PostCSS configuration
└── 📦 package.json         # Dependencies and scripts

🎨 Key Components

🌟 Three.js Starfield Background

// Animated starfield with multiple particle systems
- ⭐ Main StarField (800 particles)
- 🌊 Moving Stars (200 particles) 
- ✨ Twinkling Stars (150 particles)

🎭 Framer Motion Animations

// Smooth animations throughout the portfolio
- 📱 Staggered text animations
- 🎯 Interactive button hover effects
- 🌊 Scroll-triggered animations
- 🎪 Page transition effects

📊 Performance Metrics

Metric	Score	Status
🚀 Performance	95+	✅ Excellent
♿ Accessibility	100	✅ Perfect
🔍 SEO	100	✅ Optimized
💡 Best Practices	100	✅ Following Standards

🌐 Sections

🏠 Hero Section

• Three.js animated starfield background
• Animated typography with glowing effects
• Call-to-action buttons with hover animations
• Responsive design for all screen sizes

💼 Experience

• Professional work experience timeline
• Company details and achievements
• Technology stack used in each role
• Interactive hover effects

🛠️ Skills

• Technical skills with proficiency levels
• Interactive skill bars and animations
• Categorized by Frontend, Backend, Tools
• Visual progress indicators

🚀 Projects

• Featured project showcase
• Live demo and GitHub links
• Technology stack for each project
• Responsive project cards

🎓 Education & Achievements

• Educational background
• Certifications and courses
• Awards and recognitions
• Timeline-based layout

📞 Contact

• Multiple contact methods
• Social media links
• Interactive contact form
• Location and availability

🎯 Features Showcase

⭐ Three.js Starfield Animation

• 800+ animated particles creating a dynamic starfield
• Multiple particle systems with different behaviors
• Smooth performance optimized for all devices
• Interactive elements that respond to user interaction

🎭 Framer Motion Integration

• Staggered animations for text elements
• Scroll-triggered effects throughout the page
• Interactive hover states on buttons and cards
• Smooth page transitions between sections

🎨 Modern Design System

• Glassmorphism effects with backdrop blur
• Gradient backgrounds and glowing elements
• Consistent color palette with cyan and dark themes
• Typography hierarchy with custom font styling

📱 Responsive Design

Device	Breakpoint	Status
📱 Mobile	< 768px	✅ Optimized
📟 Tablet	768px - 1024px	✅ Responsive
💻 Desktop	> 1024px	✅ Enhanced
🖥️ Large Screens	> 1440px	✅ Scaled

🚀 Deployment

This portfolio is optimized for deployment on Vercel with automatic builds and deployments.

# Build for production
npm run build

# Start production server
npm start

# Deploy to Vercel (if Vercel CLI is installed)
vercel --prod

🤝 Contributing

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

📄 License

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

🙏 Acknowledgments

• Three.js for amazing 3D graphics capabilities
• Framer Motion for smooth animations
• Next.js team for the excellent framework
• Tailwind CSS for utility-first styling
• Vercel for seamless deployment

---

🌟 If you like this portfolio, please give it a star! ⭐

Made with ❤️ by Manish Prajapati

---