About me
Creative frontend engineer with 6+ years of experience building high-performance, visually engaging web applications, with a strong focus on user experience, interaction and modern frontend architecture. Specialised in React, Next.js, TypeScript, Tailwind CSS, GraphQL, and component-driven development with Storybook.
Experienced in delivering design-focused digital products from concept to production — animation-rich interfaces, scalable design systems, advanced search experiences, and performant ecommerce and CMS platforms. Strong eye for detail, with a proven ability to translate complex Figma designs into polished, responsive and accessible user interfaces.
Collaborative and product-minded, working across frontend, backend, design and client teams to deliver reliable, maintainable, customer-focused solutions. Passionate about immersive digital experiences where design, motion and engineering intersect.
Approach
How I work
Four things I keep coming back to, and what they cost in practice.
Build the primitives first
Shared components and tokens before features. It costs more on day one and far less every day after, because the next screen becomes assembly rather than invention.
Motion is information
Animation should tell you where you are, what changed, and what is loading. If it does none of those, it is decoration — and decoration gets a reduced-motion switch.
Types at the edges
Validate API responses and authored content at the boundary so the rest of the app can trust its data. Most UI bugs I have chased turned out to be shape bugs in disguise.
Optimise for the next maintainer
Fast to ship and fast to change are the same goal at different timescales. I keep the code boring and obvious, and save the cleverness for the interaction design.
Work & experience
What I have built
Client platforms, personal infra, side projects, and the roles behind them — newest first, each case study leading with the problem, approach, and outcome.
Client work

2025 — Present
Parfetts
Cash & Carry digital platform for independent retailers
- Problem
- Parfetts is an employee-owned Cash & Carry wholesaler whose customers are independent retailers — corner shops and forecourts running on thin margins and thinner time.
- Outcome
- Both properties are live and maintained in parallel — the marketing site at parfetts.co.uk and the ordering platform at online.parfetts.co.uk — on a shared component and token layer, with lint, formatting, unit tests and component review enforced on every commit rather than left to good intentions.
- Next.js 16
- React 19
- TypeScript
- Chakra UI 3
- Zod
Read the case study

2022 — 2024
Kubrick CMS & component library
E-learning platform, internal CMS, and the Storybook library between them
- Problem
- Kubrick ran an e-learning platform and an internal CMS that were built by different people at different times, in different frameworks.
- Outcome
- A component library both applications could draw on, with Storybook as the place design and engineering met.
- React
- Next.js
- Vue
- Nuxt
- Storybook
Read the case study
Personal projects

2026 — Present
Immich — self-hosted image server
Private family photo platform on always-on home hardware
- Problem
- Family photos were spread across Google Photos and iCloud, with storage costs rising and no real control over where any of it lived.
- Outcome
- A production-grade self-hosted alternative to Google and Apple Photos, running on hardware I own, reachable at gallery.ryankwan.dev.
- Docker
- Immich
- cloudflared
- Cloudflare DNS
- Tailscale
Read the case study

2026 — Present
Maria — personal AI assistant
Obsidian vault memory, Slack conversations, and disciplined agent loops in Cursor
- Problem
- Useful conversations disappear when a chat window closes, and coding agents are fast at producing plausible work while staying indifferent to your conventions.
- Outcome
- A working personal assistant I use daily: it remembers preferences and project state across sessions, routes captures into the right folders, commits vault updates to main, and integrates with Google Calendar through a self-hosted MCP server.
- Obsidian
- Markdown
- Cursor
- Project rules
- Slack
Read the case study

2023 — Present
Portfolio experiments lab
Where interaction ideas get tested before they reach client work
- Problem
- Interaction ideas are cheap to describe and expensive to discover halfway through a client build.
- Outcome
- A working set of judgements rather than opinions: which effects are worth their cost, which need capability gating, and which need to be switched off entirely when someone has asked for reduced motion.
- Next.js
- React Three Fiber
- three.js
- Motion
- Canvas 2D
Read the case study

2021 — 2022
Gymism Club
A coach-matching platform built solo during COVID
- Problem
- During COVID, gyms were closed and people who wanted to keep training had no easy way to find a personal trainer, while coaches across a range of sports had no easy way to find clients.
- Outcome
- A working two-sided marketplace connecting people with personal trainers across a range of sports.
- Nuxt
- Vue
- Firebase
- Apollo GraphQL
- Stripe
Read the case study
Where I have worked
Most recent first. Live links where the work is public.
Stack
What I build with
Grouped by the job it does rather than by how fashionable it is.
Core
- Next.js
- React
- TypeScript
- GraphQL
- App Router
- Expo
Styling & design systems
- Chakra UI 3
- Tailwind CSS
- Semantic tokens
- Storybook
- Figma
Data & state
- REST APIs
- Zod
- Zustand
- Apollo GraphQL
Backend & APIs
- GraphQL
- Laravel
- MySQL
- Firebase
- Stripe
- Docker
Motion
- Motion
- GSAP
- React Three Fiber
- three.js
Search & product analytics
- Algolia
- PostHog
Tooling & quality
- Bun
- Biome
- Vitest
- Lefthook
- ESLint
- GitHub Actions
Infrastructure
- Vercel
- Docker
- Cloudflare Tunnel
- Firebase
- Cloud Run
- Tailscale
Contact
Get in touch
Open to frontend engineering roles in London or remote across the UK. Send a message or email me directly — whichever you prefer.