Portfolio

A modern, interactive portfolio website built with React and Vite, featuring stunning animations, custom UI components, and smooth user experiences.

✨ Features

🎨 Custom UI Components

• MagicBento - Dynamic bento grid layout for showcasing projects
• Carousel - Smooth image/content carousel with navigation
• CardSwap - Interactive card flipping animations
• ScrollStack - Stacked cards with scroll-based reveals
• TiltedCard - 3D tilt effect on hover
• TechCurve - Curved technology showcase component

🌟 Text Animations

• BlurText - Text reveal with blur effects
• DecryptedText - Matrix-style text decryption animation
• ScrollReveal - Text animations triggered by scroll
• ShinyText - Glossy text effect with highlights
• SplitText - Character-by-character text animations
• TextType - Typewriter effect

🎭 Background Effects

• Aurora - Northern lights inspired gradient background
• DarkVeil - Dark, atmospheric overlay effects
• LightRays - Dynamic light ray animations

📱 Pages

• Landing Page - Hero section with featured projects
• About - Personal information and skills
• Projects - Detailed project showcase
• 404 Page - Custom not found page

🛠️ Tech Stack

Core

Technology	Purpose
	UI library (v19.1.1)
	Build tool & dev server (v7.1.0)
	Client-side routing (v7.6.0)

Styling

Technology	Purpose
	Utility-first CSS framework (v4.1.11)
	CSS transformation tool
	CSS vendor prefixing

Animation Libraries

Technology	Purpose
	Production-ready animations (v12.10.5)
	Professional-grade animations (v3.13.0)
	Smooth scroll library
	WebGL framework

Services & Integration

Technology	Purpose
	HTTP client
	Email service integration
	Icon library (v5.5.0)

---

🚀 Getting Started

Prerequisites

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

Installation

1. Clone the repository:

git clone https://github.com/prathampmp23/portfolio
cd Portfolio

2. Install dependencies:

npm install

3. Set up environment variables:

# Create a .env file in the root directory
# Add your configuration (Firebase, EmailJS, etc.)

4. Start the development server:

npm run dev

5. Open http://localhost:5173 in your browser

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📁 Project Structure

Portfolio/
├── public/
│   └── images/          # Static images
├── src/
│   ├── blocks/
│   │   ├── Backgrounds/ # Background effect components
│   │   ├── Components/  # Reusable UI components
│   │   └── TextAnimations/ # Text animation components
│   ├── pages/           # Route pages
│   ├── assets/          # Additional assets
│   ├── App.jsx          # Main app component
│   └── main.jsx         # Entry point
├── package.json
└── vite.config.js

🎯 Key Features

• ⚡ Lightning Fast - Built with Vite for optimal performance
• 🎨 Modern Design - Clean, professional UI with smooth animations
• 📱 Responsive - Fully responsive across all devices
• ♿ Accessible - Built with accessibility in mind
• 🔥 Hot Module Replacement - Instant updates during development
• 🎭 Rich Animations - Engaging user experience with Framer Motion & GSAP

🤝 Contributing

Contributions, issues, and feature requests are welcome!

🙏 Acknowledgments

• React team for the amazing framework
• Vite team for the blazing-fast build tool
• All the open-source libraries used in this project

---

Made with ❤️ and React