MY GALAXY - 3D Portfolio

Links

Live Demo: https://www.maeljerome.dev Source Code: github.com/Mid0o03/portfolio2.0

About The Project

An immersive 3D portfolio experience that takes users on a journey through a digital galaxy. Built with React Three Fiber, this project explores the intersection of creative coding and web development.

This project helped me improve especially on 3D scene management, smooth camera transitions using GSAP and building interactive environments with Three.js.

Key Features

• 3D Universe Exploration: A fully interactive space environment with stars and custom 3D models.
• Interactive Planets: Clickable planetary systems that lead to different "worlds" or sections of the portfolio.
• Cinematic Transitions: Smooth camera movements and lerping for a premium "traveling" sensation.
• Dual Experience: Choice between a full 3D immersive journey and a classic, optimized portfolio.

Built With

• Front-end: React, Vite, Three.js (React Three Fiber & Drei)
• Animations: GSAP (GreenSock Animation Platform)
• Tools: ESLint, JavaScript

What I Learned

Managing a complex 3D scene in React required a solid understanding of the render loop and performance optimization.

• 3D State Management: Using React state to control coordinate-based transitions and camera positioning.
• Spatial Awareness: Implementing interactive elements within a 3D space and handling raycasting/click events effectively.
• Experience Flow: Designing a multi-stage intro (Initial choice -> Star travel -> Galaxy view) to build engagement.

Getting Started

Clone the project

git clone https://github.com/Mid0o03/portfolio2.0.git

Enter the project folder

cd portfolio2.0

Run the project

npm install
npm run dev