←All projects
Frontend / 3D
This portfolio
A 3D portfolio built on Next.js 16, React Three Fiber and GSAP.
- Year
- 2026
- Status
- Live
- Focus
- Product, Deployment
- Role
- Frontend / 3D
An interactive portfolio built around a shader-lit globe with the projects in orbit, a 3D career timeline, GSAP scroll choreography and Lenis smooth scrolling — all kept inside a performance budget.
The interesting constraint here was making a WebGL-heavy page stay fast. The globe blends a day and a night texture in a custom GLSL shader against a moving light direction, so the terminator line is computed rather than baked. Textures are WebP and total around 220 KB. The whole 3D layer is client-only and code-split behind next/dynamic, the render loop pauses when the canvas leaves the viewport, and every scene checks prefers-reduced-motion before it animates.
What was built
- Custom GLSL shader blending day and night earth textures along a moving terminator.
- Project satellites on authored orbits rather than index-derived ones.
- GSAP ScrollTrigger choreography layered over Lenis smooth scrolling.
- Render loop suspended when the canvas is offscreen; motion disabled under prefers-reduced-motion.
At a glance
- Textures
- ~220 KB
- Renderer
- WebGL / R3F
Stack
Next.js 16TypeScriptReact Three FiberThree.jsGSAPTailwind CSS 4