Stellar Portfolio | Space-Themed Personal Website

🌌 Overview

This repository contains the source code for my personal portfolio website with an immersive, space-themed design. The site features stunning visual effects powered by Three.js, including a realistic black hole simulation, interactive star fields, and dynamic nebula effects.

✨ Features

• Immersive Space Visuals: Custom Three.js animations including:

  • Realistic black hole with accretion disk and gravitational lensing
  • Dynamic starfield backgrounds with parallax effects
  • Nebula effects with custom shaders
  • Shooting stars and particle systems

• Interactive UI Elements:

  • Retro TV-style video player for vlogs
  • Interactive project carousel
  • Experience timeline with smooth transitions
  • Featured publications section

• Responsive Design:

  • Adapts to different screen sizes
  • Maintains visual quality across devices

Tech Stack

• React/Next.js: Frontend framework for efficient rendering and routing
• Three.js: 3D graphics library for immersive visual effects
• JavaScript/ES6+: Core programming language
• CSS-in-JS: Styling approach for component-based design

🛠️ Main Components

• BlackHole.jsx: Realistic black hole simulation with gravitational effects
• ThreeBackground.jsx: Advanced star background with nebula effects
• EventsPage.jsx: Retro TV-style video player for showcasing vlogs
• ExperiencePage.jsx: Interactive timeline of professional experiences
• ProjectsPage.jsx: Showcase of personal and professional projects
• FeaturedPage.jsx: Publications and features section

Prerequisites

• Next.js
• npm or yarn

📱 Deployment

This website can be easily deployed using Vercel:

🧪 Performance Optimizations

• Lazy loading for heavy Three.js components
• Optimized particle systems for smooth animations
• Efficient canvas rendering

🎨 Customization

You can easily customize the website:

1. Update the project data in the respective page files
2. Modify the space themes and colors in the style objects
3. Add or remove sections as needed

🔧 Troubleshooting

If you experience performance issues:

• Reduce the number of particles in the space effects
• Adjust the rendering quality in the Three.js components
• Ensure your browser supports WebGL

🙏 Acknowledgements

• Three.js community for examples and inspiration
• Next.js documentation
• Space imagery that inspired the visual effects