VERVAR
A portfolio site with lead capture for a workshop that builds staircases. The work has to behave like a gallery and still produce an enquiry, so the home page is a horizontal snap-scrolling rail of completed projects and the only form is at the end of it. No database and no external services — the catalogue is typed data in the repository.
Complete and deployable, but not launched: the contacts, the headline numbers and every photograph are still placeholders, and each one is labelled as such in the code.
- Role
- Visual design and design system · Frontend development · Content model · Lead routing
- Year
- 2026
- Industry
- Construction · Bespoke joinery
- Technologies
- Next.js 15 · React 19 · TypeScript · Tailwind CSS v4 · Telegram Bot API · Resend · Vercel
The challenge
A workshop like this sells on craftsmanship, which means the site has to behave like a gallery — but a gallery that never asks for anything produces no work.
The catalogue grows: every completed staircase should be addable without touching a component, a route or a sitemap.
There was no appetite for a database, an admin panel or a monthly bill for either.
The approach
A warm paper palette — bone, sand, clay — with a single oak accent, so photographs of timber and steel sit on the page instead of fighting it.
The home page leads with a horizontal rail of featured work rather than a grid. Scroll-snap turns it into a deliberate, one-at-a-time browse and reads as a gesture on a phone rather than a desktop pattern squeezed down.
One form, at the end, after the work has made its case.
The process
- 01
Catalogue as the schema
Slug, title, material category, location, year, duration, materials, summary, description, images, featured flag. Everything on the site is derived from that shape.
- 02
Generated stand-ins
A script produces labelled placeholder artwork for every project so the layout could be designed, reviewed and tested at full length before a single photograph existed.
- 03
Rail, then grid
The snap rail was built first because it is the riskiest interaction; the filterable grid followed as the complete view.
- 04
Lead routing last
Two delivery channels and a guarantee that the lead survives even when neither is configured.
The solution
A home page with services, stages, pricing questions and the featured rail; a filterable portfolio; and a project page per staircase with a full-screen gallery.
Adding work is one object in the catalogue file — the card, the filter entry, the sitemap URL and the project page all appear on their own.
A lead form that reaches the workshop through whichever channel it has.
The design system
The tokens this site is written in. Every colour below is a value from its stylesheet, not an impression of it.
- Bone#f7f5f1Page
- Sand#ece6dcSurfaces
- Clay#ddd4c6Hairlines
- Ink#1a1816Text
- Oak#b5813fAccent
- ManropeDisplay and body
Technical perspective
The decisions worth defending. Written to be readable by someone who will never open the repository.
A lead is never lost
The form posts to one route that fans out to Telegram and email depending on which environment variables exist. Both can be on at once. If neither is configured the submission is written to the server log rather than dropped, and the visitor still sees a normal confirmation — a silent failure at the exact moment someone is trying to hire you is the worst bug this site could have.
The rail is CSS
Scroll snapping, contained overscroll and hidden scrollbars, with no carousel library and no JavaScript in the scroll path. It keeps native momentum on touch, stays keyboard-scrollable, and costs nothing to load.
No database on purpose
The catalogue lives in the repository as typed data. For a workshop that adds a handful of projects a year, a database would have added a bill, a backup policy and an admin panel to maintain in exchange for nothing.
Reveals that respect the setting
Section reveals are a single keyframe with an ease-out curve, and the whole set is disabled under prefers-reduced-motion along with smooth scrolling.
Outcome
- Projects in the catalogue
- 8
- External services required to run
- 0
- Independent lead channels
- 2
Built and deployable on Vercel with no configuration. It is deliberately not launched: the phone number, the email, the headline statistics and every photograph are placeholders, and the pre-launch checklist in the repository lists each one.
What it still needs
Every project here ships with the list of what is still missing. Hiding placeholders would make the rest of this page harder to believe.
- Real photography for all eight projects — the current images are generated placeholders.
- Real contacts: phone, email, WhatsApp, Telegram, Instagram, address.
- Confirmation of the headline numbers — years in business, projects completed, warranty length.
- Indicative prices in the questions block, which currently carry example figures.