Overview
A real brand built from nothing but a bare Booksy listing.
A one-page site for a working barbershop that had no site before this, only a bare Booksy listing. Built in plain HTML, CSS, and JavaScript, loading fast with no framework or build step in the way, and designed to read as the shop's real brand rather than a template with a logo swapped in.
Proof of conceptBuilt as a proof of concept. The shop chose not to move forward with it.
Key features
- 01
Custom brand system
Wordmark, roundel logo, and a masked-icon technique so the scissors mark renders identically in every browser.
- 02
Direct Booksy booking
Every button links straight to Booksy. No contact form standing in the way.
- 03
Real review data
Per-barber ratings pulled from a Booksy scraper, cross-checked against Booksy's own numbers.
- 04
Instagram Reels gallery
Scroll-snap carousel, one video playing at a time, tap-to-pause on mobile.
- 05
Responsive photography
Three width variants via srcset, so a phone isn't downloading a desktop-sized image.
- 06
Full Lighthouse pass
Contrast fixes, fonts off the critical render path, images sized to their real display dimensions.
Mobile
Built to feel native on a phone
Scroll over the screen above to see the full page.
A closer look
01
A brand, not a colour scheme
Forest green and brass gold, a custom wordmark, and a masked-icon technique that keeps the scissors mark consistent across every browser.