This Portfolio
The site you're on — a bespoke dark design system, a 3D robot hero modeled and rendered in Blender, and one typed file that drives every page.
Role
Design & development
Stack
- Next.js 16
- TypeScript
- Tailwind CSS v4
- Framer Motion
- Lenis
- Blender (3D)
- Resend
What it is
The site you're reading. Designed and built from scratch as a fast, fully responsive experience with cinematic case-study pages. It runs on a custom "Night Studio" design system (Tailwind v4 tokens), with Framer Motion and Lenis driving restrained, reduced-motion-aware movement. The hero is a 3D robot coding inside a glass cube — modeled and rendered in Blender, then served as a lightweight looping video instead of a heavy WebGL runtime, so it plays everywhere. Every page reads from a single typed content file.
The ask
A developer portfolio has one job: make the work feel as considered as the work itself. Most are templates — generic dark mode, a stock font, default everything, no point of view — and the flashy ones ship megabytes of WebGL that crawl on a phone.
The answer
A bespoke "Night Studio" design system — a warm-black room lit by two colour temperatures, a custom type scale, and editorial serif detailing — built around one confident 3D centrepiece: a robot coding in a glass cube, made in Blender and exported as a tiny looping video so it stays fast everywhere. Motion is deliberate (editorial headlines, scroll reveals, a scroll-tracking nav) and fully reduced-motion and mobile aware.
Notes from the build
I designed and built this end to end — the design system, the motion, the 3D, and the content layer. The hero is the showpiece: rather than ship a heavy 3D runtime, I modeled and posed a robot in Blender, rendered it coding at a four-monitor desk inside a glass cube, and served the result as a short intro clip that hands off to a seamless loop — cinematic on desktop, still light on a phone. The rest is a deliberately small, fast stack: a Next.js App Router app with a typed content file as the single source of truth, a hand-built Tailwind v4 token system, Framer Motion + Lenis for motion that respects reduced-motion, and a Resend-backed contact form. I tuned it across the whole device range and gated the expensive effects off on phones so it stays smooth.
What it does
- Custom "Night Studio" design system on Tailwind v4 tokens
- 3D robot hero modeled & rendered in Blender, served as a lightweight video — no WebGL runtime
- Scroll-tracking nav with a sliding active underline
- Editorial display type, scroll reveals, a light-probe cursor & one live Riyadh clock
- Working contact form via Resend (honeypot-protected, domain-verified sender)
- Cinematic "build notes" case-study pages
- A single typed content file drives every page
- Fully responsive (phone to large desktop) and mobile-perf tuned; reduced-motion aware
Prints
