Portfolio Site
This website. Custom design system, scroll-triggered animations, self-hosted typography.
I built this portfolio from scratch — no template, no page builder — because it doubles as a sandbox. Everything you see is an excuse to try an idea: a design system, an animation, a way of organising content.
The look is a custom system I call "Obsidian & Amber" — warm copper accents on a near-black ground, self-hosted Syne for headings and Plus Jakarta Sans for body. Reveals are driven by IntersectionObserver, and page changes use the View Transitions API so navigation feels continuous rather than a hard cut.
Most recently I moved all the content into Sanity, so the projects, the homepage copy, and this very writeup are edited in a CMS rather than hard-coded — which is what made pages like this one possible in the first place.
Under the hood
- Next.js (App Router) on Vercel, with image optimisation handled automatically
- Sanity for content, with typed GROQ queries and draft previews
- A hand-rolled contact form with honeypot, rate limiting, and a minimum interaction time to deter spam
- Self-hosted variable fonts for fast, consistent rendering
Key features
- Custom design system with CSS variables and Tailwind integration
- Scroll-triggered reveal animations using IntersectionObserver
- Self-hosted typography for performance and consistency
- Contact form with honeypot, rate limiting, and interaction-time spam protection
- View transitions for smooth page navigation