Portfolio-React

Modern React portfolio website with Firebase integration, smooth animations, and responsive design.

🚀 Features

• ⚡ Vite - Lightning-fast development
• ⚛️ React 18 - Latest React features
• 🎨 Vibrant Animations - Smooth transitions and effects
• 🔥 Firebase - Real-time analytics
• 📱 Fully Responsive - Mobile-first design
• 🎭 Interactive Effects - Lens cursor, marquee, hover states
• 🔍 SEO Optimized - React Helmet integration
• 🎯 Project Filtering - Multi-tag filtering system

📦 Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

🌐 Environment Variables

Create a .env file in the root directory:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

🎨 Key Components

• Hero Section - Lens aberration cursor effect with Swiper carousel
• Personal Section - Profile, skills, and social links with hover reveals
• Skills Marquee - Infinite scrolling skill pills with 3 rows
• Projects Section - Filterable project cards with Firebase tracking
• SEO Component - Dynamic meta tags for better search visibility

🔧 Tech Stack

• React 18.3.1
• Vite 6.0.3
• React Router DOM 6.22.0
• Firebase 10.11.0
• Swiper 11.0.0
• React Helmet Async 2.0.4

📱 Responsive Breakpoints

• Desktop: > 968px
• Tablet: 600px - 968px
• Mobile: < 600px

🎯 Performance

• Lazy loading images
• Code splitting with React Router
• Optimized animations
• Efficient Firebase queries

📄 License

MIT © Ananay Dubey

🤝 Contributing

Contributions, issues, and feature requests are welcome!

---

Built with ❤️ using React and Vite