Mane's Barbershop

Context

The shop takes appointments by phone and messages, which means breaking off mid-haircut and keeping the schedule in your head. The site had to do two things: show the work and the feel of the place to someone deciding where to go for the first time, and move booking out of the phone call.

Two years later we came back to the project. The content was doing its job, but the first screen said nothing another shop could not have put on its own site, and booking had moved to Instagram in the meantime. The redesign had to change the first impression and bring the site in line with how the shop actually works.

What we delivered

The first version delivered a service overview, an about section, a work gallery and a booking form with a service, date and time. The redesign kept that structure and changed the register: alternating dark and light sections, large type and a hero built around a three-dimensional pair of scissors that visitors can take apart and put back together.

The scissors are not an image or a model downloaded from a library. The geometry is written in code with Three.js: blades, rings and the pivot are extruded from contours and profiles, the parts assemble into a whole while the page loads, the scene follows the pointer and makes an occasional cut. Nothing ships a model file alongside the page, and the shape changes in code rather than through another export from a 3D tool.

The scene is deliberately fenced in. It loads as a separate code chunk, and only on desktop machines with enough cores and memory. It is skipped when reduced motion or data saver is on, it stops when the hero leaves the viewport or the tab goes to the background. Phones and devices without WebGL get a still image of the same scissors, so they never download Three.js.

Booking now goes straight into Instagram messages, because that is how the shop works. Services with prices and categories, the work gallery and the figures in the about section live in a Sanity studio the owner edits directly; if the CMS does not answer, the site renders values written into the code instead of empty fields. The first screen shows whether the shop is open right now and until when, the price list shows a photo of the selected service, and gallery work opens full screen. A contact form, a map and opening hours sit at the bottom of the page. We handled design, copy, the 3D scene and hosting.

How it works today

The site runs at manemuskifrizer.com in Serbian. It shows services split into cuts, beard and other work, an about section, a work gallery, opening hours and contact details, and the booking button opens the shop's Instagram profile. It remains on our hosting and maintenance.