After Five Years: A New React Three Fiber Portfolio Build

Showcase
1

Hi everyone!

I made a new version of my portfolio site after almost five years since my first three.js portfolio I posted here.

This time I went with a simpler 3D model viewer, but focused more on visual composition, shaders, and animation (space shuttle staging) rather than interaction-heavy gameplay.

The site features a duotone shader with stencil box masking. The model’s true colors are revealed only inside the stencil frame, along with another rendering pass of dither shader that scales dot grid based on brightness. I also added blob tracking and glitch-style animations, where the stencil box serves as both the main visual anchor and motion tracker.

About and Works consist of camera rig that follows a predefined list of camera angles linked to scrolling.

The overall design mixes brutalism-inspired layout with minimalism (yes, I know it sounds a bit contradictory, I tried mixing Pinterest-style brutalist posters and minimalism).

I placed a link to my 2021 portfolio at the bottom right corner as a small nod. If you’re curious, you can check the old version here (it’s buggy):

I am also experimenting with game development in my free time using React Three Fiber, which is listed in my Works page.

Cheers!

6 Likes
2

Nice work. The stencil box reveal with the duotone and dither pass is a clever visual idea. It feels controlled and intentional instead of the usual “throw everything interactive on the page” approach a lot of 3D portfolios take. The shuttle staging animation also adds a good sense of narrative while scrolling.

The decision to simplify the model viewer and focus more on composition and shaders makes the site feel more like a designed piece rather than just a tech demo.

Out of curiosity, how are you handling performance on lower end devices with the multiple passes and shaders?