Case Studies

Problem

Needed a polished, browser-based presentation that explains AI concepts to non-technical audiences — small business owners, community groups, local employers — without requiring a slide-deck app.

Approach

Custom single-file HTML (no framework, no bundler). State machine navigation with localStorage save so presenters can resume mid-deck; overflow: hidden locks the viewport to slide height; multi-radial gradient background for a cinematic dark-tech feel.

Deliverables

• Interactive slide deck (index.html, 187KB)
• AI-generated imagery (Nano Banana 2 + Krea)
• 9 vertical business-category slide breakdowns
• Embedded in portfolio via Netlify subdirectory

Results

Traffic, engagement, and consulting-lead attribution — pending data.

Problem

Demonstrate engineering depth and interactive-app capability to technical clients and employers — prove shipping production-quality interactive software is in scope, not just marketing sites.

Approach

Custom architecture — no scaffold, no engine. Four-layer canvas stack: bg-canvas, game-canvas, fx-canvas, ui-overlay-canvas. Game loop, waves, enemies, towers, projectiles, and game-over logic all hand-built.

Deliverables

• Full tower defense game with waves, enemies, towers, projectiles
• HUD, battlefield canvas stack, control rail, wave/selection overlays
• Compact mobile layout with Build + Buy deterministic grid
• WebGL stable / fallback badge on renderer

Results

Gameplay telemetry, completion rate, and employer/client engagement — pending data.

Problem

Ship a live technical showcase that proves depth in real-time 3D rendering, audio-reactive visuals, and progressive renderer adoption (WebGPU behind hard adapter/device gates, WebGL as the stable fallback).

Approach

Stable production entrypoint at index.html (WebGL). Experimental beta isolated behind index-webgpu.html — gates adapter availability, device creation, and isWebGPUBackend === true before loading; redirects to stable page with fallback reason in the query string on any gate failure. Renderer state always visible in UI.

Deliverables

• Stable WebGL voxel engine
• WebGPU beta build behind feature gates
• Audio-reactive particle system with Web Audio API
• Renderer-state badge (WebGL Stable / WebGL Fallback / WebGPU Beta)

Results

WebGPU adoption rate on representative hardware and session telemetry — pending data.

Problem

Existing site audited in April 2026 and flagged for architecture improvements, mobile experience, and brand-consistent visual assets.

Approach

Departed from the static CSS-first scaffold used on other demos. Moved to a React 19 SPA with TypeScript and Vite build (tsc && vite build). Wrapped the full homepage in an AgeGate component — required for alcohol-serving businesses.

Deliverables

• React 19 SPA with TypeScript + Vite pipeline
• Age-gate component wrapping homepage
• Brand-aligned taproom photography / generated imagery
• Preview deploy pending; previous Netlify preview is currently offline

Results

Taproom traffic attribution and event-page engagement — pending data.

Problem

A family-law practice needs a credibility-first online presence for sensitive matters (divorce, custody, adoption, estate planning). Trust is the primary conversion driver, not design flash.

Approach

Archetype 3 playbook — serif heading pair (Merriweather) + sans body (Open Sans), navy #1b2d4f with warm cream surface and gold accent. Dedicated navy trust bar with stat blocks (20+ years · 500+ families · 98% satisfaction · free consultations). Split hero with attorney portrait placeholder and inline badge row.

Deliverables

• 5 pages: index, practice-areas, attorneys, resources, contact
• JSON-LD LegalService structured data
• Dual hero CTAs (primary consultation + secondary practice areas)
• Trust-bar + practice-area grid + reveal scroll animations

Results

Standalone demo URL, consultation conversion rate, GMB optimization status — pending.

Problem

A classic barbershop needs walk-ins and phone calls, not a trust-heavy institutional site. Archetype 1 (lead-gen), minimum friction, phone prominent.

Approach

CSS-first single-page pattern (demo-site-scaffold). Barber portrait, shop interior, services, pricing, hours — all on one scroll. No nav complexity.

Deliverables

• Single-page index.html
• Hero interior image, barber portrait, gallery set
• OG social image for share previews
• Local demo deployable from 04_projects/demos/iron-oak-barbershop/

Results

Live traffic and conversion data — pending.

Problem

A handyman service with real geographic coverage (Petersburg, Athens, Tallula, Greenview, Oakford, Springfield) and real service breadth (plumbing, drywall, electrical, decks, trim) needs more than a starter-tier single-page business card.

Approach

Storefront tier — explicitly positioned in-page copy as a "growth tier" demo above starter. Service-area logic surfaces the correct coverage list; dedicated service surfaces allow deeper SEO per category.

Deliverables

• 5 pages: index, services, service-areas, reviews, contact
• Hero main photo + support-truck photo + service-category imagery
• Service-areas map photo
• OG social image

Results

Standalone deploy URL and estimate-form conversion — pending.

Problem

Needed to communicate a warm editorial brand and give customers multiple low-friction entry points — browse by flower style, shop by occasion, inquire for weddings, find the studio.

Approach

Cormorant Garamond display + Manrope body; cream background #f6efe9 with dusty rose #8f4f60, sage green #697a67, gold #b68e5e. "This Week in the Cooler" annotation card supplies a freshness / seasonal signal. Large border radii (16–40px) reinforce soft boutique feel.

Deliverables

• 7 pages: Home, Flowers, Occasions, Weddings, About, Visit, Contact
• AI-generated hero imagery (Nano Banana) across product, studio, wedding
• Occasion-based collection cards with starting prices
• Dedicated wedding consultation flow

Results

Traffic and consultation-booking data — pending Google Analytics / Search Console setup.

Problem

Hospitality prospects need to see a cinematic, reservation-forward site that feels a step above basic local-restaurant templates.

Approach

Dark wine palette (#1c1118 bg, #8b2252 wine, #c87941 copper, #f2ebe3 cream). Georgia serif heads with system-ui body. Full-viewport hero with copper-tinted radial glow; transparent nav that solidifies on scroll.

Deliverables

• 5 pages: index, menu, events, about (Our Story), contact (Reservations)
• Cinematic full-viewport hero
• Transparent-to-solid navigation behavior
• Reservation-forward call-to-action hierarchy

Results

Reservation-inquiry and event-inquiry telemetry — pending data.

Problem

Needed a destination site that communicates seasonal programming clearly, drives family visits, and supports the farm store as a secondary revenue channel.

Approach

Warm agritourism palette — barn red #8b2500, green #3d6b35, brown #6b4c2a, harvest gold #c8952e, cream #faf8f5. Georgia display + system sans body. Experience cards with photo placeholders for seasonal programming.

Deliverables

• 5 pages: Home, Experiences, Farm Store, Plan Your Visit, Contact
• Seasonal experience cards
• Farm-store product surface
• Visit-planning information architecture

Results

Actual hero photography, deploy URL, and visit-booking conversion — pending.

Problem

Needed to communicate brand identity (craft, local, tactile), surface the current tap list, and drive taproom visits and event attendance.

Approach

Dark tactile palette — bg #151210, surface #221e1a, amber primary #d4a029, rust secondary #a0522d, hop green #5d8a3c, warm cream text #f0ece4. System sans across the stack for a workshop/tactile feel.

Deliverables

• 5 pages: Home, Our Beers, Taproom & Events, Our Story, Contact
• Tap-list surface
• Taproom hours + events calendar
• Brand-identity treatment (craft / local / tactile)

Results

Real taproom photography, deploy URL, and visit-driven conversion — pending.