✨ MyPortfolio

Interactive React + Vite Portfolio Experience

A stunning, animation-rich portfolio built with modern web technologies and creative UI components

View Demo • Report Bug • Request Feature

---

🎨 Features

⚡ Performance Lightning-fast Vite dev server Optimized production builds Code-splitting & lazy loading Minimal bundle size 🎭 Animations GSAP-powered smooth transitions Framer Motion integration Interactive click effects Scroll-triggered animations

🎯 Interactive Components WebGL-powered 3D gallery Circular rotating gallery Bento grid layouts Flowing navigation menus Dock-style navigation 🎨 Visual Effects Gradient blur effects Shiny text animations Star border elements Card hover effects Pressure-sensitive text

---

🚀 Quick Start

Prerequisites

Make sure you have Node.js (v16+) and npm installed on your system.

Installation

# Clone the repository
git clone https://github.com/Mayank-iitj/MyPortfolio.git

# Navigate to project directory
cd MyPortfolio

# Install dependencies
npm install

# Start development server
npm run dev

Build for Production

# Create optimized production build
npm run build

# Preview production build locally
npm run preview

---

📦 Tech Stack

Technology	Purpose	Version
React	UI Framework	18.3.1
Vite	Build Tool	5.4.2
GSAP	Animation Engine	3.13.0
Framer Motion	React Animations	12.23.24
OGL	WebGL Library	1.0.6
Math.js	Mathematical Expressions	12.4.3

---

🧩 Component Architecture

src/
├── App.jsx                  # Main application component
├── App.css                  # Global styles
├── main.jsx                 # Application entry point
│
├── Interactive Components
│   ├── CircularGallery.jsx  # 3D rotating image gallery
│   ├── Galaxy.jsx           # WebGL particle system
│   ├── MagicBento.jsx       # Dynamic bento grid layout
│   ├── PillNav.jsx          # Pill-style navigation
│   ├── Dock.jsx             # macOS-style dock menu
│   └── FlowingMenu.jsx      # Animated menu system
│
├── Visual Effects
│   ├── GradualBlur.jsx      # Progressive blur effect
│   ├── ShinyText.jsx        # Metallic text shimmer
│   ├── StarBorder.jsx       # Animated star borders
│   ├── GlareHover.jsx       # Card glare on hover
│   ├── CardShine.jsx        # Shine effect for cards
│   └── TiltedCard.jsx       # 3D tilt interactions
│
└── Text Animations
    ├── RotatingText.jsx     # Rotating text carousel
    ├── TextPressure.jsx     # Pressure-sensitive text
    ├── ClickSpark.jsx       # Click particle effects
    └── LogoLoop.jsx         # Infinite logo carousel

---

🎯 Key Highlights

🌌 WebGL Gallery

Immersive 3D gallery powered by OGL (Openly-Graphical-Library) for stunning visual experiences

🎬 GSAP Animations

Professional-grade animations using GreenSock Animation Platform for buttery-smooth transitions

🎨 Modern Design

Clean, contemporary UI with attention to detail and user experience

📱 Responsive Layout

Seamlessly adapts to all screen sizes and devices

⚡ Optimized Performance

Built with Vite for instant HMR and optimized production builds

---

🛠️ Development

# Development mode with HMR
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Environment Setup

This project uses ES modules. Ensure your package.json includes:

{
  "type": "module"
}

---

📄 Project Structure

MyPortfolio/
├── public/              # Static assets
├── src/                 # Source files
│   ├── components/      # React components
│   ├── styles/          # CSS modules
│   └── main.jsx         # Entry point
├── index.html           # HTML template
├── vite.config.js       # Vite configuration
├── vercel.json          # Vercel deployment config
└── package.json         # Project dependencies

---

🚀 Deployment

Vercel (Recommended)

This project is optimized for Vercel deployment with included configuration:

1. Push your code to GitHub
2. Import project in Vercel dashboard
3. Deploy with one click! 🎉

Manual Deployment

npm run build
# Upload dist/ folder to your hosting service

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📝 License

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

---

👨‍💻 Author

Mayank Sharma

• GitHub: @Mayank-iitj
• Portfolio: View Live Demo

---

🌟 Show Your Support

Give a ⭐️ if this project helped you!

---

Built with ❤️ using React, Vite, and modern web technologies

⬆ Back to Top