Solar System Portfolio

The brief

The 3D experiment that started this build, live at solarsystem.nabinghimire23.com.np: every section is a planet orbiting a sun, driven by React Three Fiber, Drei and Zustand, with camera fly-throughs plus scroll and touch navigation.

Problem

Portfolios all make the same promise and all look the same: a hero, a grid of cards, a contact form. I wanted to answer a harder question, which was whether an entire site could be spatial without becoming unusable. That meant real 3D navigation on the web, on phones, without a loading spinner longer than a visitor's patience, and without hiding the content behind WebGL, which is what most 3D portfolio sites get wrong.

My role

This was a solo build. I designed the spatial model, wrote the React Three Fiber scene graph, wired the camera transitions, built the Zustand store that coordinates which section is active, and handled the fallback path for devices that cannot run WebGL.

Process

• Modelled each portfolio section as a planet with its own orbit, so navigation became a camera move instead of a page load
• Kept copy as real DOM text layered over the canvas, so the content stays readable and crawlable without JavaScript
• Drove camera transitions from one Zustand store shared by keyboard, scroll, swipe and pointer input, so every control path moves the same camera
• Budgeted draw calls and texture sizes per planet, then capped the device pixel ratio so mid-range phones stay near 60fps
• Shipped a reduced-motion and no-WebGL fallback that renders the same sections as a plain vertical list

Result

A live 3D portfolio at solarsystem.nabinghimire23.com.np where nine planet objects map to nine sections and the camera flies between them on scroll, swipe or keyboard. The measurement that matters here is the frame budget: the scene was tuned down until it held a steady frame rate on mid-range Android hardware, and the fallback exists for everything below that line. It is also the experiment that produced the animation primitives this site reuses. If I rebuilt it today, one thing would change: the camera logic belongs in a small state machine rather than in a shared store that four different input handlers read from. That coupling is the part that took the longest to debug, and it is the reason this site keeps motion state local to each section instead.

What it had to do

• Nine explorable planets mapped to portfolio sections
• Scroll, swipe and keyboard navigation between sections
• Realistic textures, orbital rings and starfield lighting

Stack

• Next.js
• Three.js
• React Three Fiber
• Drei
• Zustand
• TypeScript