Skip to content
Rob Boirun

Design portfolio

Sites and games

I set the concept, the type and the system, then ship it in code myself with AI coding tools. Here that means a product site that unboxes a kitchen in 11 scroll chapters, two browser games and two editorial sites. Every image is a capture of the live site.

01

backyard.kitchen

Web Design ·
Astro, GSAP, Lenis, React

A portable outdoor kitchen is hard to picture from a spec sheet; a buyer needs to see it go from a crate to a working bar. I structured the homepage like a phone launch, a cinematic product reveal in numbered chapters, so the scroll itself is the demo. An amber-on-black palette keeps the whole page in the evening, where the product gets used.

Project pageVisit backyard.kitchen

Homepage hero at night: a black outdoor kitchen cart with teak wings, a sink, an ice bowl of bottles and a platter of food on a patio under string lights, beside the headline The Best Backyard Kitchen Is Portable with Portable in large gold letters, YBI Shark Tank 1st Place (2023) and Official Reseller badges, and a Sound off toggle at top right.
The hero on a phone: badges, the headline with Portable in gold, a gold Buy the Banger button and the cart on the patio below.
On a phone.
  • Chapter 01 of 11: a cardboard crate printed Backyard Banger strapped to a pallet on a sidewalk, with the line It shows up crated, on a pallet. and a progress rail of eleven ticks on the left edge.
    Chapter 01 of 11.
  • Chapter 02 of 11 on a black stage: the unit out of its crate, packed down with a flat teak top and the wings folded against its sides, captioned Out of the crate it's packed down.
    Chapter 02, the unboxing.
  • Chapter 03 of 11: a man by a pool lifting one teak wing of the black cart by hand while two guests watch, captioned Flip the teak wings up by hand.
    Chapter 03, the wings unfold.
  • The scroll from the hero into the first section, headed Unbox it. Flip it up. Pour one., with the crate photo rising into view below it.
02

CrowdSurfer

Game · Graphic Design ·
JavaScript, Matter.js, Vercel

A physics puzzle game has to sound loud before anyone presses play. I gave it a punk gig-poster identity, a neon gradient wordmark over a dark club, so the page reads like a show flyer rather than a game menu. The key art is AI-generated to my direction, and the page says so.

Project pageVisit stage-dive.vercel.app

Game homepage on a dark purple club background: the CrowdSurfer wordmark in a gradient from mauve to hot pink, the line Dive In in cyan, a yellow Play Free button, and square key art of a cartoon punk singer with purple and pink spiked hair shouting into a microphone under a graffiti CrowdSurfer Garage Sessions logo.
The key art is AI-generated to my direction.
The game homepage on a phone: gradient wordmark, Play Free button and the punk singer key art filling the width.
On a phone.
  • How it plays: three numbered cards, Aim and throw, Win the crowd, Dive in, in pink, cyan and white type, above a What's inside section with cards for genre albums, power-ups and collectible picks.
03

H2OInsider

Web Design ·
Next.js, MDX, Tailwind CSS

A review site has to look like it answers to the reader before anyone reads a word of it. I gave it an editorial front page instead of a shop window, with large high-contrast serif headlines, a red italic standfirst, and deep water blue behind them.

Project pageVisit h2oinsider.com

Homepage hero: the headline Independent water answers. in very large white serif type over a dimmed blue photo of a kitchen sink, with Tested, not sponsored. below it in red italic serif, and a red Find your filter button.
The hero on a phone: the serif headline stacked over three lines, the red italic standfirst, and the two buttons.
On a phone.
  • A white stats strip above a pale blue section headed What's your situation? in navy serif, with three white cards for City Water, Private Well and Renters, each with a faint large numeral behind it.
04

BoozeMakers

Web Design ·
Next.js, Supabase, Tailwind CSS

A spirits magazine should feel like a good bar after dark, not a price-comparison table. I set it in a dark editorial look, with a serif wordmark and one amber accent carrying the buttons, rules and highlights.

Project pageVisit boozemakers.com

Homepage hero: the BoozeMakers wordmark in large white serif capitals over a dim photo of two men in suits holding glasses of whiskey, with A Gentleman's Lifestyle in amber small capitals, a short amber rule above, and an amber Explore Reviews button.
The hero on a phone: an amber banner, the serif wordmark, A Gentleman's Lifestyle in amber, and an amber Explore Reviews button.
On a phone.
  • Trail guide section: the headline Every Distillery, Every State, Every Pour. in white serif with Every Pour. in amber, and the tops of a featured trail photo and a trail guide card below.
  • The end of the dark trail section with guide cards for the Pacific Northwest and rising American whiskey trails, then a light section headed Buying Guides and Best-Of Rankings in serif with an amber rule.
05

RocketCity.cc

Game ·
Vite, JavaScript, Three.js, 3DTilesRendererJS, Vercel

Flight games are either expensive simulators or generic arcade titles set in invented places. Neither lets someone fly over the streets they actually know. Photorealistic 3D city data makes that possible in a browser, with no install and nothing to buy.

Project pageVisit rocketcity.cc

Homepage hero: Rocket City CC in large bright green letters over a photorealistic 3D aerial view of downtown Huntsville, with a white rocket in the middle of the scene and the line Free, in your browser, no install.
The hero on a phone: the green Rocket City CC title over the 3D city with the rocket behind it.
On a phone.
  • City sections stacked down the page over darkened 3D aerial views: Huntsville, then Chattanooga with a baseball stadium, then Knoxville by the river, each with a green Fly Over button and a count of mapped cameras.