Voorbeeldzaak · Personal trainer · Amsterdam

Een website voor een personal trainer: voorbeeldzaak KADANS

Website personal trainer, van dossier tot live. KADANS is een voorbeeldzaak: een studio in Amsterdam-Zuid. De site had in zeven dagen vier keer een ander licht.

Licht gevraagd, donker geworden.

Eerlijk antwoord: KADANS bestaat niet. De site wel. Alles hieronder is echt gebouwd en echt gemeten. De reviews, aantallen, keurmerken en trainers óp de demo zijn opvulling. De trainers zijn met AI gemaakt.

Bekijk de site zelf

0116-07 Licht Zandkleur, een serif-kop, een afgeronde studiofoto. De eerste versie online.
0217-07 Donker boven Oplevering van de bouwlus: een donkere studiofoto in de kop, daaronder een lichte pagina.
0319-07 Licht, in tweeën Links de kop, rechts één staand beeld. Er kwam een knop voor donker bij.
0422-07 Nocturne Warm-zwart, serif-koppen, een video in de kop. Zo staat hij nu live.

Het dossier en de keuze

Het dossier vroeg rust en aardetinten.

Licht zand, warme inkt, een taupe accent. Het ontwerpplan zei het in twee woorden. Later lagen er drie richtingen op tafel, en ik koos de donkere: Nocturne.

Het ontwerpplan · vr 17-07 · 06:20
Warm-aards LICHT
Mijn keuze voor Nocturne · WERK-STAND.md
Gekozen boven 'Atelier (licht)' en 'Beton & zweet'

De eerste versie van KADANS op een telefoon: lichte zandkleur, de serif-kop Kracht met ritme. en een donkere knop — De bovenkant van de home op een telefoon, eerste tegen laatste. Schuif om te vergelijken.

KADANS zoals hij nu live staat, op een telefoon: warm-zwart met een grote lichte serif-kop over een donkere studio — De bovenkant van de home op een telefoon, eerste tegen laatste. Schuif om te vergelijken.

Wat de site moet doen

Website voor personal trainer: drie dingen die moeten werken.

Mooi is niet genoeg. Wie een trainer zoekt, wil weten wat het kost, welk traject past en hoe je begint.

De prijs staat er gewoon

Drie trajecten, elk met een vaste prijs en wat erin zit. Geen "vraag een offerte aan". Wie twijfelt, hoeft niet eerst te bellen.
Een keuzehulp van drie vragen

Doel, ritme, begeleiding. Daarna zie je welk traject past. De hulp rekent in de pagina zelf en verstuurt niets.
1. 01Je vult het formulier in
2. 02Een serverfunctie controleert het en weert spam
3. 03Je komt op de bedankpagina, ook zonder JavaScript
Een formulier dat echt iets doet

Van SNIT, KADANS en FORM is KADANS de enige met een formulier dat echt aankomt: twee serverfuncties, bij de oplevering van begin tot eind getest. Eerlijk: er hangt nog geen mailbox aan. Wat binnenkomt, staat alleen in de logboeken.

Van dossier tot klaar

Ruim zes uur, daarna rondes.

Deze lus had van SNIT geleerd. De rechten gingen er vóór beurt 1 op, dus hij maakte zijn eigen beelden en schreef per pagina een eigen stap weg. Om 01:28 was hij klaar. Daarna kwamen de rondes waarin ik bijstuurde.

do 16-07 · 19:08 Het dossier gaat erin Tien pagina’s gevraagd, rust en aardetinten.
19:46 Eerst de rechten goed De lus mag nu zelf beelden maken. Bij SNIT liep hij daar nog op vast.
20:24 tot 22:03 Elke pagina een eigen stap De lus schrijft per pagina een eigen commit, van intake tot beelden.
vr 17-07 · 01:27 Formulieren getest Allebei van begin tot eind: antwoord 200.
01:28 BUILD-COMPLEET Ruim zes uur na het dossier. Eén avond en nacht.
vr 17-07 · 06:50 Eerste ronde met mij Keuzehulp, dag en nacht, trainersportretten.
zo 19-07 · 00:08 Gedaante-ronde Split-screen, een ademende tijdlijn, een meetlijn.
di 21-07 · 21:01 Nocturne Donker eerst, champagne-brons, serif-koppen.
wo 22-07 · 06:42 De laatste fix Geen flits meer van het open menu bij verversen. Dit staat nu live.

Wat misging

De deploy die nergens landde.

Vrijdagavond, negen versies achter elkaar. Eén ging naar de voorvertoning in plaats van naar de echte site. Wie keek, zag de oude versie. Een minuut later stond hij goed.

22:39 Zo ging hij
- Voorvertoning tak master nieuwe versie landde hier
- De echte site tak main bleef de oude versie
22:40 Opnieuw, nu goed
- Voorvertoning tak master niets
- De echte site tak main nieuwe versie live

De les werd een vaste regel voor elke demo: --branch=main, altijd.

De lus liep eerst vast op rechten. Die gingen er vóór de eerste beurt op.
Lange woorden als "lichaamstransformatie" duwden kolommen uit het scherm en braken verkeerd af. Nu breken ze op de goede plek.
Bij verversen flitste het open menu met blauwe standaardlinks. Een klein stukje stijl dat eerst laadt, loste het op.

Werkbon Voorbeeldzaak KADANS · personal trainer, Amsterdam

Gebouwd met: Claude Code
Beurten: ongeveer 23 22 met een eigen commit, in 2 runs van de bouwlus
Taken: 13 van 13 allemaal groen
Dossier tot klaar: ruim 6 uur do 16-07 19:08 tot vr 17-07 01:28
Bouwdagen: 16-07 t/m 22-07 6 van 7 dagen gewerkt, 20-07 stil
Online gezet: 42 34 keer live, 8 keer als voorvertoning
Pagina's: 11
Formulieren: 2 met een echte serverfunctie, getest bij oplevering
Wat misging: deploy op de verkeerde plek vr 17-07 22:39: voorvertoning in plaats van live
Prestaties: 99 mobiel, alle 3 de runs, 02-10
Toegankelijkheid: 100 · 100 mobiel en desktop; desktop was 96 (kleurcontrast)
Prijs: n.v.t. voorbeeldzaak, geen opdracht

Gemeten met Lighthouse 13.5.0 op de live site, 02-10-2026. Tijden uit de git-log en de deploy-geschiedenis.

De werkbon

Alles op één bon.

Beurten, taken, dagen en wat misging. Op een laptop haalde de toegankelijkheid eerst 96, door te weinig kleurcontrast. Gerepareerd: sinds 02-10 is het 100.

De etalage