Case study / 05

This Portfolio

Role: Design & development
Year: 2026
Stack: Next.js 16 / TypeScript / Three.js / R3F / Tailwind CSS v4 / Framer Motion / Lenis / Resend

The overview

The site you're reading. A complete identity and front-end system designed around one memorable object: a live black-chrome operator built from geometry in Three.js. The rest stays deliberately calm — oversized editorial typography, sharp project proof, a single amber signal color, and motion that always gets out of the content's way. Every page reads from one typed source of truth.

01 / The challenge

A developer portfolio has to prove taste and engineering at the same time. Most choose one: a generic template that says nothing, or an effects demo that makes the actual work hard to find.

02 / The response

A refined technical identity with one controlled spectacle: the Three.js operator. Everything after the hero becomes quieter and more useful — large project imagery, honest build notes, compact interaction, and clear routes to the work and contact. WebGL is isolated, dynamically loaded, resolution-capped, and backed by a static fallback.

What shipped

01Custom Signal 01 identity on a compact Tailwind v4 token system
02Live Three.js operator assembled from custom geometry and physically based materials
03Dynamic WebGL loading with a poster fallback and capped pixel density
04Editorial typography, restrained scroll reveals, and a live Riyadh clock
05Working contact form via Resend (honeypot-protected, domain-verified sender)
06Purpose-built case-study pages with asymmetrical project galleries
07A single typed content file drives every page
08Responsive from phone to large desktop and fully reduced-motion aware

This Portfolio — About — the operator — About — the operator

This Portfolio — Work — a pinned project scene — Work — a pinned project scene

This Portfolio — Contact — the lamp is on — Contact — the lamp is on

Next case study

Mallath