Building a 3D Portfolio with React Three Fiber

I wanted my portfolio to feel like something, not just read like a résumé. The goal was an atmospheric hero — the sense of drifting through pressurized air — without tanking performance or accessibility.

Why React Three Fiber

Three.js is powerful but imperative. React Three Fiber wraps it in declarative JSX components, which means the 3D scene lives in the same mental model as the rest of the app. State, props, and cleanup all work the way you'd expect in React.

Moving the work to the GPU

The particle field is thousands of points. Animating each one on the CPU every frame would stutter. Instead, the motion — forward flight, noise-driven sway, depth fade — is computed in a vertex shader. The CPU just advances a single time uniform.

What I'd tell my past self

Start with the feeling, then optimize. Prototype the look, then pull the heavy math onto the GPU, then add the reduced-motion fallback. Doing it in that order kept the project fun instead of a pile of premature abstractions.