Witty Wolf · 2026
De site die je nu leest is de case study
Het portfolio zelf: een Framer-template met pensioen gestuurd voor een Astro-site, met AI gebouwd, door mij aangestuurd. Dezelfde ziel in de copy, een nieuw vat, elke keuze van mij.
Kort samengevat
Een template kan je werk huisvesten, maar voor je spreken kan het niet.
Een statische Astro-site in de field-notes-richting, met AI gedeveloped onder mijn regie; elk detail uit deze case staat live op de pagina die je nu leest.
- Astro, met AI gebouwd, template met pensioen
- Statisch
- Lettertypen, beide self-hosted
- 2
- Accentkleur, zuinig uitgegeven
- 1
Het oude portfolio woonde in een Framer-template. Het deed zijn werk zoals een huurwoning dat doet: alles functioneert, niets is van jou. De copy was het bewaren waard; het platform was een maandelijkse rekening.
Het vatprobleem
Andermans vat
De Witty Wolf-site begon als een template vol stockbeeld. Mijn eigen Houthavens-zonsondergang stond in de hero, maar de werkpagina opende op een 3D-render uit een fotobibliotheek en contact verschool zich achter een stadssilhouet dat alles had kunnen verkopen. Daaronder stond een woordmerk in een afgerond displaylettertype dat inmiddels volledig uit het merk is verdwenen.
Dus heb ik het opnieuw ontworpen binnen Framer: eigen beeld in plaats van stock, het afgeronde lettertype eruit, een statement in de hero en een volwaardig licht en donker thema.
Het merkdenken was echt en het bewaren waard: humor als werkprincipe, gewone taal, persoonlijkheid in dienst van helderheid. Wat het bij Framer niet kon krijgen, was eigendom.
De verhuizing
Dezelfde ziel, een nieuw vat
De beslissing was om de Framer-template met pensioen te sturen en een statische Astro-site te bouwen, AI schreef de code, ik stuurde: de stem van de copy behouden, alles waar die op stond vervangen. De art direction werd field notes: warm papier, inkt, een vaag hulpraster, dun lijnwerk en één amberkleurig accent, zuinig uitgegeven. Twee lettertypen, beide self-hosted: Geist Mono als de stem voor koppen, navigatie, labels en cijfers, Work Sans alleen voor lange leesteksten. Het oude afgeronde displaylettertype ging overal met pensioen, ook in het merk zelf.
De build liep op dezelfde manier: AI schreef de code, ik stuurde. Elk component werd gebriefd, gecontroleerd en teruggestuurd tot het zich gedroeg, en elke beslissing in deze case, van de typfout van de hero tot de schrikreactie van de wolf, was van mij.
01 · Het vakwerk
Details die hun plek verdienen
De hero van deze site typt zichzelf, maakt expres een fout, streept die door en gaat verder: pixels wordt mensen. De wolf ernaast is het echte logo, getekend als pure lijnkunst die zichzelf inschetst, geen vulling behalve de amberen tong. Een amberkleurig geurspoor tekent zich over de pagina terwijl je scrolt, een live klok houdt Madrileense tijd bij in de metaregel en de footer antwoordt in terminalstijl. Dark mode komt aan zonder flits van het verkeerde thema, respecteert de systeemvoorkeur, en het omschakelen speelt één korte sequentie: de wolf buigt naar voren, trilt, flitst een amberen oog, dan flikkert de lamp en wisselt het thema. Elke animatie staat uit zodra reduced motion aanstaat.
02 · Het systeem
Eén bron van waarheid
De casepagina’s van deze site draaien op een klein systeem. De marge-labels op deze pagina zijn de enige bron van waarheid voor de sectie-index: de scroll-spy-rail op desktop, de zwevende pil op mobiel en de ankerlinks die blijven werken met JavaScript uit, tijdens de build gestempeld door een rehype-plugin. Figuren delen één field-notes-behandeling, tape en punaises alleen voor beelden, nooit voor tekst. Elke case opent onder een rubberen stempel van het merk van de klant, die neerkomt zodra de titel klaar is met typen.
Mijn lastigste klant
Ik ben mijn eigen lastigste klant
Voor jezelf shippen betekent verantwoording afleggen aan je eigen kritische ik, en die van mij is de lastigste klant die ik heb: er is geen briefing om je achter te verschuilen en niemand anders om de schuld te geven. Een showcase houdt je ook in toom, want het ontwerp moet uit de weg blijven van het werk dat het laat zien.
De Framer-site kostte bijna vier maanden. Het meeste daarvan was beslissen, niet bouwen: wat te laten zien, wat te schrappen, welke beelden een plek verdienden, waar de balans lag. Deze herbouw ging sneller omdat die beslissingen al genomen waren. Wat overbleef was schrappen, zowel het teveel als een paar dingen waar ik nog aan gehecht was.
Kritiek van een klant of werkgever slik ik makkelijker dan mijn eigen kritiek. Ik ben genadeloos als ik mijn eigen werk beoordeel, en daar komt de polish op deze site vandaan.
AI-gebruik
AI-gebruik
De code is door AI geschreven, van begin tot eind, met mij als regisseur. Dat verhaal staat hierboven. De woorden zijn de uitzondering: elke tekst op deze site is met de hand geschreven, daar zitten de meeste uren in, en dat wil ik zo. Het merk leeft in een skill-bestand dat de AI de huisstijl één keer leert, toon, letter, de regels van de wolf, zodat geen sessie op nul begint. De rebuild kostte dagen in plaats van maanden, omdat het denkwerk al gedaan was en de code het snelle deel was.
Eerlijk gezegd
De eerlijkste test die er is
Een portfolio heeft geen conversiecijfers die het citeren waard zijn, dus ik ga ze niet verzinnen. De uitkomst is eigenaarschap: elke regel van deze site is van mij om te veranderen, en een wijziging duurt minuten, geen supportticket. Urbiqo leerde me dat je eigen ontwerp bouwen de eerlijkste usabilitytest is die er bestaat. Dit keer was de klant ik, en ik zie alles.