Spacefolio

Screenshot of our website

Inspiration

We aimed for a portfolio beyond static pages, creating an engaging 3D galaxy where celestial bodies represent our work and info, inspired by space exploration.

What it does

Spacefolio is an interactive 3D portfolio. Users navigate a solar system, click/tap the sun (About Me), planets (Projects), or a rocket (Contact Me) to view details in modals via smooth camera zooms.

How we built it

Built with HTML, CSS, JS, and Three.js. We set up a 3D scene, created planets/sun programmatically, loaded a GLTF rocket, implemented OrbitControls and raycasting for interaction, linked 3D objects to HTML modals, added mobile touch support, styled it, and hosted on GitHub Pages.

Challenges we ran into

Key challenges were accurate raycasting (especially on the rocket model), smooth camera animations, handling both mouse and touch events correctly, and synchronizing the 3D scene with UI modal displays.

Accomplishments that we're proud of

Successfully building an interactive 3D portfolio, integrating and animating a loaded model, creating seamless transitions between 3D views and UI modals, and ensuring usability on both desktop and mobile.

What we learned

We gained practical experience with Three.js (scene, objects, materials), GLTF loading, raycasting for 3D interaction, camera animation, combining 3D canvas with HTML UI, and handling mobile touch events.