Revenants had four chairs, a five-star reputation across hundreds of Google reviews, and nowhere to send anyone. Bookings arrived as Instagram DMs and phone calls, which meant the shop was answering its phone mid-cut and losing the people who would not wait for a reply. Saint-Eustache is a French-speaking town with an English-speaking half, so the site had to work in both languages without turning into two sites — and it had to feel like the room it represents: low light, warm brass, leather, quiet.
/02
The approach
One page, hand-written. No framework, no CMS, no build step — a static HTML, CSS and JavaScript site that a barbershop can keep running for years without a dependency upgrade. The brand's script wordmark draws itself on once at load, then docks into the header and never performs again. Language is a single toggle that swaps every string in place and remembers the choice, so both audiences share one URL and one set of links. Booking bypasses the studio entirely: each of the four barbers gets a direct link into their own Square calendar, so choosing a chair and choosing a time is one decision instead of two.
/03
The outcome
The site went live at revenants.ca as a single static page that loads in roughly 35 kB of markup, styles and script. Every service, price, portrait and opening hour lives in the page itself, marked up as LocalBusiness structured data so the shop's address, hours and rating surface directly in search. The phone stopped being the booking system.
The room, translated
The brief was easier to feel than to write down: the shop is dark, warm and unhurried, and a bright, busy website would have misrepresented it before anyone read a word. So the page is built almost entirely out of black, bone and a single brass accent, with film grain and a vignette over the whole thing. Photography carries the weight — the type gets out of its way.
The ritual reel and the menu. Prices sit on the page rather than behind a booking flow, because the first question is always what it costs.
Four chairs, four links
People do not book a barbershop. They book a barber. Each of the four is photographed the same way, given the same amount of room, and linked straight into their own Square calendar — so the site's job ends at the moment the client has already chosen who is cutting their hair.
The booking page is the only second page on the site, and it exists to ask one question.
Two languages, one page
Every translatable string carries its French and English text as data attributes, and the FR/EN toggle rewrites them in place before storing the preference. It keeps the shop on one URL with one canonical page to rank, and it means adding a service means writing it twice in one file rather than maintaining two parallel sites that drift apart by the second update.
Most visits arrive from an Instagram bio on a phone, so the phone layout was drawn first and the desktop one grew out of it.The retail line gets the one white section on an otherwise black site, so the packaging reads as product rather than atmosphere.
Found before it is clicked
Address, phone number and every opening hour are written into the page and mirrored in LocalBusiness structured data, alongside the shop's rating and review count. For a business whose customers search the name of their town and the word barbier, the search result is the first page of the site — so it was designed like one.
The gallery is the shop's own work, curated down until every frame earns its place in the grid.
35 kB
of HTML, CSS and JavaScript on first load
0
frameworks, plugins or build steps to maintain
2
languages sharing one URL and one canonical page
4
barbers, each with a direct link into their own calendar
