Gentleman's Blade Barbershop

Heritage-forward barbershop site with a booking-first flow

Client

Role

Motion Design, UI/UX Design, Front-End Development

Live

Visit site

Built with (for the curious)

React + TypeScript, Three.js/WebGL, GSAP ScrollTrigger +1 more

Summary

Built a heritage-inspired barbershop website with an editorial layout, tactile interactions, and a booking-first flow. Service sections stay scannable, barber profiles feel premium, and CTAs stay clear.

The Challenge

Gentleman's Blade wanted a website that honored classic barbershop heritage while feeling modern and confident. Standard service-listing sites felt generic—they needed something with real character that still books easily.

The Solution

Built a 'Cinematic Americana' site with editorial hierarchy, tactile motion, and a booking-first flow. Services stay scannable, barber profiles feel premium, and CTAs stay clear throughout.

Project Snapshot

Goals

Honor classic barbershop heritage with modern confidence
Create a cinematic, editorial experience that stands out
Showcase services and barbers in memorable, interactive ways
Drive bookings while reinforcing the premium craft brand

Constraints / Requirements

Red, Navy, Beige color palette with vintage typography
3D effects must perform well on all devices
Horizontal scroll pinned sections for services and barbers
Film grain overlay for consistent vintage aesthetic

Deliverables & Rationale

What I Delivered

Hero that sets tone fast with a strong booking CTA
Services layout designed for quick scanning and confident selection
Barber gallery that highlights personality and craft
Testimonials + social proof styled to match the brand tone
Contact/booking section designed for mobile
Subtle motion + texture for a cinematic feel
Reduced-motion support and accessible focus states

Why This Works

Cinematic motion creates a premium, confident brand feeling
Heritage elements (vinyl, neon, blueprints) reinforce tradition
3D effects add depth and modernity without losing the classic vibe
Clear booking CTAs are integrated naturally throughout

Client approved the design direction and granted permission to feature this project in my portfolio.

Process

Split-Blade Hero

Bold, asymmetrical hero with depth and restrained motion—built to feel cinematic while keeping booking front-and-center.

Accordion Deck Services

Services presented as a physical stack of cards that fan out horizontally on scroll. Each card lifts and dims others on hover, with shutter-wipe description reveals.