Naar de inhoud
Terug naar alle cases

AI-CASE

Dit portfolio

De site die je nu leest is zelf de case. Ontwerp en code komen uit Claude Code en Lovable, het logo is niet getekend maar gegenereerd, en het werk gaat pas na review naar productie. Geen presentatie over de aanpak, maar de aanpak zelf.

PERIODE
2026 - heden
GEBRUIKT
ClaudeVS CodeCanva

Het probleem

Een portfolio waarop staat dat ik met AI bouw, bewijst niets. Iedereen kan dat opschrijven. Het enige dat het onderscheid maakt tussen iemand die het doet en iemand die erover praat, is of het ding waar je naar kijkt zelf zo gemaakt is en of je kunt navertellen waar het misging.

De aanpak

Ontwerp en code komen uit Claude Code en Lovable. Het logo is niet met de hand nagetekend maar gegenereerd: elke verhouding, van de schuinte van de letters tot de breedte van de steel, is een parameter in een script. Wil je iets veranderen, dan pas je de parameter aan en draai je het opnieuw, en dan klopt de favicon en de social preview meteen mee.

De site doet nul verzoeken naar externe hosts. Lettertypen, iconen en logo's staan lokaal, en de bezoekersstatistiek is cookieloos en laadt vanaf het eigen domein. Dat is geen puurheid om de puurheid: het is de reden dat er geen cookiebanner nodig is.

Al het werk gebeurt op een testomgeving en gaat pas na review naar productie. AI-gestuurd bouwen zonder controle levert precies de fouten op die je in een demo niet ziet.

Het resultaat

Twee talen, geen externe verzoeken, en sinds kort staat de content los van de code: alle tekst zit in een apart bestand dat tijdens de build gecontroleerd wordt tegen een model. Klopt er iets niet aan de inhoud, dan is er geen build en dus geen deploy. Dat is de voorbereiding op een eigen beheerscherm, waarmee ik de site kan bijwerken zonder dat dat een codewijziging is.

Wat er misging

De beste fout is de meest recente, en hij is precies het punt van deze case.

Bij het lostrekken van de content bouwde ik de controle in op de plek waar de pagina zijn tekst inleest. Netjes bedacht, en fout: die code draait ook in de browser, dus de complete validatiebibliotheek reisde mee naar elke bezoeker. 58 kilobyte om gegevens te controleren die op dat moment allang goedgekeurd waren, op een site waarvan de hele opzet is dat hij geen byte te veel laadt.

Wat er te leren valt zit niet in de fout maar in hoe hij boven kwam. Niet door erover na te denken, maar door na de build in de uitvoer te kijken wat er daadwerkelijk in zat.

En precies daarom vond ik dezelfde fout een dag later nog een keer, in een andere vorm. Deze pagina's zijn nieuw, en om de lijst op de voorpagina te vullen laadde ik alle cases in. Dus stond de volledige tekst van elke case, in beide talen, in het bestand dat je binnenhaalt als je alleen de voorpagina opent: 68 kilobyte, waarvan 89 procent daar nooit op het scherm komt. Bij de acht cases die er nog bij komen zou dat richting 39 kilobyte extra lopen. Nu haalt de voorpagina alleen de titels en de samenvattingen op, en komt de tekst van een case pas binnen als je hem opent.

De eerste keer was een misser. De tweede keer, binnen een week, is een patroon: ik stuur standaard te veel mee omdat het in de code netter oogt. Dat is dezelfde les als bij de conversieoptimalisatie waar ik vandaan kom, en de reden dat ik hem nu twee keer heb opgeschreven. Meten voordat je iets beweert, ook als je het zelf gebouwd hebt.

Andere cases