Pirate Barber website case study

The project

Pirate Barber is a client in the Cache Valley area of Utah. When the project started, the business existed as an Instagram handle and nothing else. The brief was the core job of a local small-business site: make it obvious what the business is, when it’s open, and how to reach it, fast and mobile-first, with clean structured data so it can rank for nearby searches.

The build

A single page, built on Astro and Tailwind. The 2026 rebuild moved it off the original three hand-written files and expanded it past the first three sections, but the shape of the work stayed the same. Get the business data into one place, then let it drive both the page and the schema.

Key technical decisions:

• Single source of truth for business data. One data structure holds the details, and both the visible markup and the JSON-LD render from it. The page and the structured data can’t drift apart, and there is exactly one place to edit.
• Zero JavaScript bundles. The nav and the FAQ are native details elements, so both open and close with no script, and the page is fully usable with JavaScript off. What’s left is two small inline snippets, one to close the menu on Escape or an outside tap and one to highlight today’s row in the hours table.
• Structured data for local search. A BarberShop schema block with real hours, a priced offer catalog, and the towns served, built from the same data as the visible page.
• Native, accessible interactions. Handing the open state, keyboard handling, and accessibility semantics to details/summary replaced the hand-written mobile-nav JavaScript the first version shipped.

Design

The identity is the barber pole, unrolled. A striped helix in red, bone, and dark teal runs the full width above the nav and along the bottom of the footer, climbing slowly on a loop and holding still for anyone who asks for reduced motion. Everything else stays flat and quiet so that one element carries the theme.

The palette is a deep teal-navy (#0c1b22) rather than the near-black of the first version, with warm bone text (#f0eadd), brass for anything actionable (#c9922e), and the pole’s red (#c4392c) held back as a flash. Type is Big Shoulders Display, a tall condensed poster face, over IBM Plex Sans, with IBM Plex Mono handling the small caps labels and figures like a ledger.

Visit Pirate Barber