eleven

The shop had a logo and an Instagram account. It did not have a website. Every appointment was made by phone, and the phone rang while there were hands in somebody’s hair.

That costs twice. The barber stops cutting to answer, and the caller who does not get through goes to whoever picks up. Nothing on the internet could take a booking.

We looked at how people reach the shop today: a Google Maps listing, an Instagram profile, and word of mouth. Nearly all of it on a phone, most of it in the evening, a good part of it in summer when the town fills up.

Two facts came out of that and shaped everything after. The traffic is mobile on a seaside connection in August, so weight is a constraint rather than an audit at the end. And the customers here read Bulgarian, English and Russian, so the site has to as well.

The visitor is deciding, not researching. They want to know that the cuts are good and that they can get a slot on Thursday. They will give the page a few seconds on a bad connection, and they will not call to ask.

The barber is the second user, and he is holding clippers. Anything that needs his attention during the day is a failure. So the site had to take a booking without him, and stay correct without him editing it.

Somebody in Burgas finds the shop on a phone and books a chair without calling. Everything else on the page is in service of that, and anything that was not got cut.

Three constraints came with it: it loads fast on a phone, it runs in three languages, and it looks like a shop worth sitting in. The last one is why there is a design system at all.

The design system was written as a document before it existed as a stylesheet. Colours, type scale, spacing, radii, worked up from a Cron Calendar style reference into a brief the build then followed literally. The first six lines of the stylesheet say so. Nothing in there is a value somebody eyeballed at two in the morning.

The wordmark was the only thing that already existed. The dark canvas, the ember accent and the whole token set are ours. Ember paints the booking button and the mark, and nothing else on the site is allowed to be orange, because one accent used once is what makes a single button read as the thing to press.

The other idea out of this stage is the opening. Instead of putting the wordmark on the page, put the page behind the wordmark, and let the mark fly up and become the navigation.

Three tall tracks with sticky stages: the opening, the barber slice, the closing film. Scroll progress inside a track maps onto the animation, and everything runs from one damped requestAnimationFrame loop.

The loop moves the animation toward the scroll position instead of onto it, cur += (target - cur) * 0.16. Bound one to one, a flick on a phone snaps the reveal to its end frame and reads like dragging a slider. Chased, the same flick carries weight and settles. That is the entire feel of the page and it is one line.

Motion also finishes before the track does. The progress curve compresses the animation into the first 82% of the track, so the last stretch of scroll is a beat on a finished frame instead of dead travel. It is what stops a long reveal feeling long. The easing is in and out rather than ease out, which front loads the trip: two thirds of the distance goes in the first quarter and the wordmark is off the top of the frame before you have read it.

The barber slice is one photograph, clipped open from the top while it settles out of a slow push in. The version before it shredded the picture into fourteen sliding bands, and because each band carried its own residual offset the seams never landed flush. The photograph read as torn. A single element cannot tear.

The headline walked into the header. Sized off viewport width alone, the display clamp grew to the full height of a 16:9 laptop and collided with the nav, which is how it shipped once. The fix is a vh term inside the clamp, and a habit of testing at 1920x841 rather than 1440x900.

The photograph read as torn. An earlier version of the barber slice shredded the picture into fourteen sliding bands, and because each band carried its own residual offset the seams never landed flush. It is now one element clipped open from the top. A single element cannot tear.

The booking panel took ten seconds, which is its own section above, because the fix was a timing change rather than a size one.

With motion turned off, prefers-reduced-motion skips the loop and paints the same end state. Copy outside a track is revealed by CSS scoped to a js class, so nothing is trapped invisible when JavaScript does not run, and the language list only collapses once the script runs, so a visit without JavaScript keeps all three languages reachable.

Checked on every pass, in all three languages: exactly one h1, the heading line counts, the booking button count, no horizontal overflow from 360px to 1920px, console errors, and both JSON-LD blocks.

Astro 5, static output, deployed on Vercel from main. The dependency list is astro, the sitemap integration and sharp. There is no framework runtime on the page because there is no framework on the page. Bulgarian sits at the root, English and Russian under /en/ and /ru/, on Astro’s own routing.

One content module is the only place anything factual is written down: all three languages, the address, the phone, the hours, the prices, the links. The pages, the structured data and the footer all read from it, so a fact changes once and changes in six places. Six indexable URLs, with canonical and hreflang built off one path value, so the gallery pages point at each other rather than at the home page.

Every photograph is graded to black and white in the file rather than with a CSS filter, by a small sharp script, so it is the same picture everywhere it is used. Images ship as AVIF. Caching is a year and immutable on the hashed assets, with the same headers written a second time in the format other hosts read, so the site can change hosts without quietly losing them.

Eleven commits, three days, 28 to 30 August 2026.