Back to Home
Portfolio

Selected Work

A collection of projects I have designed and built. Each one crafted with attention to detail, performance, and user experience.

Pluto — Digital Marketing Agency
Website2026

Pluto — Digital Marketing Agency

Client: Pluto Agency (concept / spec project)

Pluto is a bespoke, production-grade marketing site built around a single promise — marketing that compounds. The site pairs an editorial design language (Fraunces display + Inter Tight) with a custom motion system: mask-up headlines, word-by-word reveals, scale / blur / slide variants per section, parallax imagery inside rounded frames, and a scroll-progress bar driven by the page scroll. Architecture is Next.js 16 App Router with server components by default, dynamic case-study routes (/work/[slug]), a single-source-of-truth data layer (lib/data.ts), and Tailwind CSS v4 using CSS-first @theme tokens. Every interaction respects prefers-reduced-motion, navigation is keyboard-accessible with a visible skip-link, colour contrast meets WCAG 2.2 AA, and images are served through next/image with remote patterns. The result is a site that reads like a magazine and scrolls like an app.

Next.js 16React 19TypeScriptTailwind CSS v4Lucide Iconsnext/font (Fraunces · Inter Tight · JetBrains Mono)IntersectionObserverrAF parallax

Key Results

  • 11 routes shipped
  • 9 bespoke motion variants
  • WCAG 2.2 AA colour-contrast compliant throughout
  • 0 runtime CSS frameworks beyond Tailwind v4
  • 100% TypeScript
Luxton Solicitors
Website2026

Luxton Solicitors

Client: Luxton Solicitors (concept / portfolio build)

Luxton Solicitors is a full marketing site for a concept independent UK law firm serving private clients, founders and established companies across seven practice areas. The brief was to reject the generic "navy + stock gavel photography" cliché of legal web design and instead build something that signals heritage, restraint, and contemporary credibility in equal measure. The site is architected around an editorial design system: a Fraunces serif display face paired with Inter for UI, an asymmetric 12-column grid, and a signature cubic-bezier(0.16, 1, 0.3, 1) ease that runs through every interaction. Framer Motion drives scroll-linked parallax, staggered word-by-word mask reveals on the hero headline, a rotating SVG textPath credential badge, and micro-interactions on CTAs and list rows. Seven individually addressable practice-area pages are statically generated at build time, each with tailored capabilities, a three-step engagement process, and an onward link to the next discipline. A bespoke contact form, complimentary-consultation flow, compliant privacy/terms pages with sticky TOC, and a branded 404 complete the experience. The palette — midnight forest-green #0E1A14, champagne ivory #F3EEE2, and muted champagne gold #B8985C — was chosen specifically to feel British, heritage-inflected, and memorable against a sea of interchangeable navy competitors.

Next.js 16.2 (App Router)UI — React 19.2TypeScriptTailwind CSS v4.2Framer MotionIcons - Lucide ReactHosting ready for — Vercel / any static hostTooling — PostCSS 8.5

Key Results

  • Performance ~102 kB shared First Load JS, sub-second TTFB on static hosts.
  • Build output 17 static pages prerendered, zero runtime rendering cost.
  • Delivery Full design system, 7 practice areas, legal pages and deployment shipped in a single session.

Have a Project in Mind?

I would love to hear about your next project. Whether it is a website, web app, or something entirely new — let us build it together.

Start a Conversation