Van token tot laatste pixel, gebouwd als één systeem

Mijn vorige portfolio had ik na mijn bootcamp zelf gebouwd, met HTML, CSS en JavaScript. Daar ben ik nog steeds blij mee, want ik heb er veel van geleerd. Maar het was ook duidelijk de site van iemand die net begonnen was: een donkere sterrenhemel, "Junior Web Developer" eronder en een raster met oefenprojecten waar de lorem ipsum nog in stond.

Het probleem was niet dat hij lelijk was. Het probleem was dat hij niet meer klopte met wat ik inmiddels doe. Hij liet vooral zien dat ik kon coderen, terwijl mijn werk in de jaren daarna steeds meer richting ontwerp, UX en complete digitale producten was verschoven.

Voor deze versie draaide ik het proces daarom om. Eerst bepalen hoe de site eruit moet zien, hoe hij moet voelen en welke regels eronder liggen. Daarna pas uitwerken wat technisch nodig is om dat mogelijk te maken.

Daarom hoort deze website voor mij ook in het Creative Lab. Niet alleen als verpakking rond mijn andere werk, maar als project op zichzelf.

De site draait op Angular, met standalone componenten en signals. Alle routes worden vooraf gerenderd, waardoor tekst en paginastructuur al als HTML beschikbaar zijn voordat client-side JavaScript iets hoeft op te bouwen. Dat helpt bij snelheid, stabiliteit en vindbaarheid.

Er zit geen UI-bibliotheek in. Geen Bootstrap, Tailwind of kant-en-klaar componentenpakket. Knoppen, kaarten, navigatie, contentblokken en interacties zijn specifiek voor deze site opgebouwd.

Dat kost meer werk, maar hier was dat een bewuste keuze. Als juist de vorm, typografie, interactie en sfeer onderdeel van mijn portfolio zijn, wil ik niet dat de basis al wordt bepaald door een externe componentenbibliotheek.

Alle teksten, beeldverwijzingen, metadata en onderlinge links van projecten staan in TypeScript-bestanden bij elkaar. Niet verspreid door templates en ook niet in een extern CMS.

Dat het TypeScript is en geen losse JSON heeft een praktisch voordeel. Vergeet ik een verplicht veld, dan krijg ik tijdens development of bij het bouwen een foutmelding in plaats van pas later een kapotte pagina te ontdekken.

Voor beelden geldt iets vergelijkbaars. Verwijs ik naar een bronbestand dat niet bestaat, dan moet dat tijdens het bouwproces zichtbaar worden en niet pas wanneer iemand de betreffende pagina opent.

Ik gebruik daarnaast bewust herhaalbare contentblokken. De inhoudsopgave boven een case, galerijen, vergelijkingen, quotes en de navigatie tussen projecten zijn steeds dezelfde onderliggende componenten met andere inhoud. Eén systeem, veel verschillende verhalen.

De teksten die een zoekmachine gebruikt en het beeld dat verschijnt als iemand een pagina deelt in een chat, staan per pagina op dezelfde plek in de content als de rest. Titel, samenvatting en deelbeeld horen bij de pagina zelf, niet in een los bestand dat ik apart moet bijhouden.

Omdat alle pagina’s vooraf worden gerenderd, zit die informatie al in de HTML voordat er JavaScript draait. Een zoekmachine, of een linkvoorbeeld in WhatsApp of Slack, hoeft dus niet te wachten tot de pagina zichzelf heeft opgebouwd.

De samenvatting die in een zoekresultaat komt te staan, wordt opgebouwd uit hele zinnen van de pagina zelf. Er worden zoveel mogelijk complete zinnen gepakt die samen onder de lengtegrens blijven, in plaats van een regel er middenin af te kappen.

Er gaat ook wat gestructureerde data mee, in een vorm die machines kunnen lezen: wie ik ben en wat elke case is. Daar staat alleen in wat ook gewoon op de site staat.

De canonical van een pagina, het adres dat als het officiële geldt, en het adres in de sitemap komen allebei uit hetzelfde ene domein in de content. Zo kunnen ze niet uit elkaar gaan lopen.

Het Lab is niet één stapel. Een deel is maakwerk waar een manier van werken onder ligt: een tuin die ik als systeem aanpak, een serre die stukje bij beetje een junglekamer werd, deze site. Daar hoort steeds een les bij die ook iets over mijn werk zegt.

Een ander deel heeft die claim niet nodig. De katten Shiva en Mowgli. Een project rond de wereld van Harry Potter. Dingen die ik doe omdat ze me bezighouden, zonder dat er een professionele conclusie aan vastzit. Die staan in een eigen groep, "Persoonlijk", los van het maakwerk. Zo kan het maakwerk laten zien hoe ik werk zonder dat de vrije dingen dat mee moeten dragen, en mogen de persoonlijke dingen gewoon zichzelf zijn.

Beeld speelt op deze site een grote rol, maar honderden grote foto’s rechtstreeks vanuit een bronmap serveren zou de site onnodig zwaar maken. Daarom zit er een eigen beeldpijplijn tussen mijn originele bestanden en wat uiteindelijk in de browser terechtkomt.

Die pijplijn bewees vrij snel zijn nut. De bronmap was op een gegeven moment gegroeid tot 182 MB, vooral doordat foto’s als PNG waren opgeslagen terwijl ze helemaal geen transparantie gebruikten. Na het normaliseren bleef daar ongeveer 84 MB van over, zonder zichtbaar kwaliteitsverschil in de uiteindelijke pagina’s.

De site heeft een professionele kant en een persoonlijke kant. De cases, wat ik kan en waar ik vandaan kom horen bij de eerste. Het Lab, met wat ik buiten mijn werk om maak, bij de tweede.

Dat onderscheid loopt door in de kleur, de typografie en de manier waarop dingen bewegen. Aan de persoonlijke kant, waaronder de Over mij-pagina, mogen animatie en kleine effecten wat losser zijn. In de cases houd ik het rustiger, zodat het werk daar zelf de aandacht krijgt.

De regel die ik mezelf voor animatie heb gegeven is vrij simpel: beweging moet iets ondersteunen, duidelijk maken of karakter toevoegen. Anders hoeft het niet te bewegen.

Er is daarom geen splashscreen of achtergrond die voortdurend om aandacht vraagt. Veel animaties reageren juist op wat de bezoeker doet: een lijn die laat zien hoe ver je door een lange pagina bent, een rand om de knop rechtsonder die hetzelfde doet zodra je terug naar boven kunt, een beeld dat achter een masker verschijnt of elementen die pas bewegen wanneer je erbij komt.

Op de Over mij-pagina tekenen kleine potloodschetsen zichzelf uit terwijl je naar beneden scrolt. Dezelfde basisgedachte gebruik ik bij de stengel op de tuinpagina, maar daar groeit de vorm mee met je positie in de case.

Ook het handschrift op een paar plekken wordt niet simpelweg met één vaste animatieduur afgespeeld. De snelheid wordt gekoppeld aan de lengte van een woord. Een kort woord is daardoor sneller geschreven dan een lang woord, zoals dat met een echte pen ook ongeveer zou zijn.

En soms zit er iets in omdat ik het gewoon leuk vind. Er zwemt een kwal door de footer, er vliegen vlinders door de huiskamer en langs de tuincase groeit een stengel mee. Een portfolio mag voor mij ook laten zien dat degene die het maakte er plezier in had.

Ik heb WCAG 2.2 AA als richtlijn aangehouden en toegankelijkheid vanaf het begin meegenomen, in plaats van er achteraf nog een controlelaag overheen te leggen.

Interactieve onderdelen moeten met het toetsenbord bereikbaar zijn en een zichtbare focusstatus hebben. Kleur probeer ik niet als enige manier te gebruiken om betekenis over te brengen, en contrast, tekstgrootte en verschillende states zijn onderdeel van het ontwerp.

Ook beweging vraagt daar om keuzes. Wanneer iemand op systeemniveau minder beweging prefereert, moet de inhoud nog steeds compleet en begrijpelijk zijn. Animaties worden dan verminderd of overgeslagen in plaats van dat informatie verdwijnt.

De fotocarrousel op de fotografiepagina is een concreet voorbeeld. Omdat die automatisch kan bewegen, hoort daar ook een mogelijkheid bij om hem stil te zetten. Die controle is daarom onderdeel van het ontwerp en niet iets dat er achteraf naast is gezet.

Deze site is gebouwd met Claude als technische bouwhulp, en dat wil ik niet verstoppen. Interessanter dan dát ik AI gebruikte vind ik vooral waar ik het voor gebruikte.

Ik bepaalde de richting, visuele taal en ontwerpregels. Bijvoorbeeld dat het professionele deel petrol als accent gebruikt en het persoonlijke deel roest. Dat een stengel op de tuinpagina met het scrollen meegroeit. Dat handschrift maar op enkele bewust gekozen plekken voorkomt. En dat beelden niet zomaar worden afgesneden om een rij visueel recht te krijgen.

Claude hielp vervolgens om zulke ideeën technisch uit te werken. Code schrijven, componenten opbouwen, berekeningen maken, fouten opsporen en onderzoeken waarom een interactie niet deed wat ik verwachtte.

Dat ging regelmatig in meerdere rondes. De stengel op de tuinpagina heb ik bijvoorbeeld meerdere keren teruggestuurd omdat snelheid, positie of gedrag nog niet overeenkwamen met wat ik voor me zag. Dan kijk ik, benoem ik wat niet klopt, pas ik de richting aan en probeer ik opnieuw.

AI maakte daarmee vooral de afstand tussen een idee en een werkende versie kleiner. Ik kon interacties onderzoeken die ik anders waarschijnlijk niet zelf zo snel had gebouwd, terwijl ik wel voortdurend kon beoordelen of het resultaat bij de rest van het ontwerp paste.

Een portfolio is voor mij geen project dat ik één keer publiceer en daarna jarenlang onaangeraakt laat staan. Nieuwe projecten, foto’s, experimenten en ideeën zullen vanzelf weer nieuwe inhoud opleveren.

Ook het systeem zelf blijft iets waar ik aan kan blijven schaven. Misschien kan een interactie eenvoudiger, een afbeelding lichter of een component slimmer worden opgebouwd.

Maar ik wil ook voorkomen dat verbeteren hetzelfde wordt als eindeloos toevoegen. Niet elk nieuw idee hoeft op de site terecht te komen. Soms is iets juist beter omdat ik besloten heb het níét te bouwen.