← Selected work

Practice

Everything else I built

Selected Work is what shipped. This is where it came from — a database assessment with two backends, a pixel-matched clone, a DOM clicker, a live API pull, a product page for my own bike, a café-discovery concept, a terminal game, and a team booking flow still in draft. Not production work. Practice, on purpose.

01 / 08

Chrome & Burger

A full-stack database assessment: one live menu, sourced from two different databases at once, to see the same data modelled two ways.

Node.jsExpressPostgreSQL (Supabase)MongoDBTailwind CSSCloudflare PagesRender

Chrome & Burger — the landing page
The menu page, sourced from Supabase
The same menu, sourced from MongoDB
The landing page on mobile
The contact section with a video embed
02 / 08

Colmar Academy, cloned

A pixel-matched front-end clone exercise — reproducing a real design's typography, spacing and layout instead of inventing my own.

HTML5CSS3

Colmar Academy — the hero section
Orientation, campus and guest lecture cards
The course category grid
The thesis exhibits section
The page on mobile
03 / 08

WTFast Equipment

A Specialized S-Works product page, built from scratch — because I ride, and wanted to see if I could design for it: feature copy, spec breakdowns, a pricing grid.

HTML5CSS3

WTFast Equipment — the hero section
A feature breakdown — the Flow Fork
The engineering outcome section with stats
The frameset pricing grid
The contact form
04 / 08

Clicker Game

A DOM-manipulation exercise that turned into an idle clicker — upgrades, an auto-clicker, and a character I drew myself standing in for the "click me" target.

JavaScriptDOM

Clicker Game — the stats panel at zero
The hand-drawn character to click
Stats after fifteen clicks
The counter and auto-click rate
The upgrade shop, with a fake terminal log
05 / 08

Pokédex

One button, one live call to PokéAPI — pulls a random Pokémon's sprite, name and type every time, and keeps every card you've drawn on screen.

JavaScriptPokéAPIDOM

Pokédex — the empty starting state
The first card drawn
Two cards drawn
Three cards drawn
Four cards drawn, including Pikachu
06 / 08

BrewMap AI

A café-discovery concept that started as a week-three e-commerce exercise and ended up somewhere else entirely: a taste-matching engine, a filterable café list, and editorial copy written to sound like a real product.

Next.jsTypeScriptTailwind CSSFramer Motion

BrewMap AI — the hero and match engine card
The numbered feature list
The signals grid and How It Works header
A dark editorial pull-quote section
The café listing page
07 / 08

Find My Hat

A classic terminal exercise — a 2D field, hidden holes, one hat, and a class written to explain its own reasoning in comments as it goes.

JavaScriptNode.js

Find My Hat — the field at the start of a run
A few moves in
Further into the run, trail visible
Closing in on the hat
The winning message
08 / 08

GoThailand

A team project, Sprint 2, still a working draft — a luxury travel-booking flow for Thailand. Search, a filtered listing, a property page with live pricing, and a full booking journey through to a confirmed reservation.

ReactViteReact RouterContext APICSS design tokens

GoThailand — the home page search
The filtered accommodation listing
A property page with live pricing
The checkout form and order summary
A confirmed booking