Opening page…
← All work
Case study / 07
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
Next case study
Mallath