Cuts & Shavez— a Bahrain barbershop, designed and shipped solo.
A self-initiated design-and-build for Cuts & Shavez Salon, a real barbershop in Manama, Bahrain. Designed end-to-end in Figma at fifteen, then hand-coded in raw HTML, CSS, and vanilla JavaScript — no framework, no CMS, no build step. Not a paid engagement — a real shop, a real address, real services and pricing used as design constraints. Still hosted on Vercel three years later, unchanged.
"Most barbershop sites look like Wix templates — stock photos, beige palette, generic copy. I wanted to design something that looked like a real boutique business, using a real shop in Bahrain as the brief."
— Self-initiated · age 15 · 2023
- 01Most barbershop sites in the region looked like directory listings — stock imagery, default templates, no point of view. The brief we set ourselves was the opposite: make it look like a boutique business worth visiting, not a listing entry.
- 02No framework experience yet. Every interaction — the nav, the gallery, the scroll behaviour — had to be hand-rolled in vanilla JavaScript. No React, no Next.js, no component library to lean on.
- 03Designing end-to-end for the first time. Hero, services, gallery, reviews, contact — each section had its own visual conventions to learn before we could put a personal stamp on them.
The calls that meaningfully moved the outcome. Not the cosmetic stuff.
Built the entire visual system in Figma before writing a line of code. Components for buttons, cards, section headers, pricing rows. Forced the design to think about reuse before commit, not after — a habit that still runs the studio today.
Picked a real barbershop in Manama with a real address, real services, real BD pricing. Designing against actual constraints — three services, a tight price list, an exact location — produces a different result to lorem ipsum and stock prices.
No framework, no build step, no dependencies. Three years before adopting Next.js. Every animation, every interaction, every layout shift hand-rolled in plain HTML/CSS/JS. Forced a deep understanding of the platform before reaching for abstractions.
First project using Tailwind. Skipped the BEM-vs-OOCSS debate entirely and learned the utility-first model from scratch — a pattern that's stayed in every project since.
Static deploy on Vercel — same platform the studio still uses in 2026. The original 2023 build is still live at barbershop-design.vercel.app, untouched, as a fixed point against the rest of the portfolio.
Screens, not mockups. The actual product—annotated.
