🌌 Cosmic Portfolio

Modern 3D Portfolio with Three.js & Next.js

✨ Features

• 🌟 Interactive 3D Experiences - Stunning Three.js visualizations including:

  • Dynamic starry background
  • Interactive solar system skills visualization
  • Animated floating elements

• 💼 Comprehensive Portfolio Sections

  • 🚀 Hero with animated 3D background
  • 📱 Projects with interactive hover effects
  • 🛠️ Skills visualized as a 3D solar system
  • 👤 About with timeline layout
  • 📬 Contact with validated form

• 🎨 Modern Design Elements

  • Gradient text effects
  • Backdrop blur components
  • Responsive layouts for all devices
  • Dark/Light theme toggle

• ⚡ Technical Excellence

  • Built with Next.js 15 and App Router
  • TypeScript for type safety
  • Optimized 3D rendering
  • Error boundaries and fallbacks

🚀 Getting Started

Prerequisites

• Node.js 16+
• NPM or Yarn

Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

4. Open http://localhost:3000 in your browser

🧪 Technologies

This portfolio showcases skills with modern web technologies:

• Frontend: React 19, Next.js 15, TypeScript
• 3D Rendering: Three.js, React Three Fiber, Drei
• Animation: Framer Motion
• Styling: Tailwind CSS, CSS variables
• Authentication: NextAuth.js
• Form Validation: React Hook Form, Zod

📁 Project Structure

src/
├── app/                 # Next.js app router pages
├── components/          # UI components
│   ├── hero.tsx         # Main hero with 3D background
│   ├── StarryBackground.tsx  # 3D animated star field
│   ├── CategorySolarSystems.tsx # Interactive skills visualization
│   └── ...              # Other UI components
├── lib/                 # Utility functions and contexts
└── public/              # Static assets

🎯 Key Features Explained

3D Solar System Skills Visualization

The portfolio features a unique skills visualization that represents different skill categories as planetary systems, with:

• Sun at the center representing core expertise
• Planets sized by skill proficiency
• Orbital distance indicating experience level
• Interactive tooltips with detailed information
• Full 3D controls (rotate, zoom, pan)

Customizable Portfolio

The portfolio is designed to be easily customizable with:

• Modifiable project data
• Customizable skills section
• Adaptable personal information
• Editable contact details

🔧 Customization

You can easily adapt this portfolio for your own use by:

1. Updating skills data in page.tsx and skills-context.tsx
2. Adding your projects directly in projects-section.tsx
3. Modifying theme colors in Tailwind config
4. Editing personal information in about-section.tsx and contact-section.tsx

📱 Responsive Design

The portfolio is fully responsive with:

• Mobile-first approach
• Tailored 3D performance for mobile devices
• Adaptive layouts for all screen sizes
• Touch-friendly interactions

🌐 Deployment

Deploy your own version on Vercel:

📄 License

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

🙏 Acknowledgements

• Three.js community for 3D rendering inspiration
• Next.js team for the incredible framework
• All open-source contributors who make projects like this possible