Dit is de site waar je nu op zit, plus de WordPress-installatie voor het inhoudelijke gedeelte. Twee repositories, één geheel: een Nuxt-frontend en een headless CMS op Bedrock. Diezelfde CMS voedt ook absolit.nl.
De allereerste commit heette “Messing around with title screen and colors”. Dat dekt de lading van hoe het begon aardig.
Waarom
Een portfolio heeft een probleem dat andere sites niet hebben: het is zelf het bewijsstuk. Bij een klantproject kun je vertellen wat je gebouwd hebt. Hier staat degene die je beoordeelt in het ding waar je over praat. Slordige uitlijning is dan geen detail maar een tegenargument.
Praktisch speelde er iets anders. Ik heb twee sites die deels dezelfde inhoud tonen: projecten, werkervaring, skills. Twee keer onderhouden gaat één keer goed en daarna niet meer. En ik wilde een CV dat uit dezelfde gegevens rolt als de site, want een los Word-bestand loopt binnen een maand achter op de werkelijkheid.
Hoe het werkt
WordPress op Bedrock als koploze inhoudsbron, WPGraphQL erbovenop en Nuxt 4 aan de voorkant. De WordPress-kant is voor niemand zichtbaar en wordt ook niet geïndexeerd.
Het mooiste zit in het datamodel. De velden staan niet in de database maar in PHP, via ACF Composer. Een nieuw veld is dus een codewijziging die in git staat, te reviewen en terug te draaien, in plaats van iets wat iemand ooit in een beheerscherm heeft aangeklikt. Bij het overzetten naar een andere omgeving hoef je geen veldgroepen te exporteren.
Op elk item zit een veld Zichtbaarheid: alleen portfolio, alleen Absolit of allebei. Eén keer schrijven, twee sites bedienen.
Kernpunten waar ik trots op ben
- CV-generatie naar PDF met Dompdf, met de WordPress-installatie als bron. Je vinkt aan welke projecten en werkervaringen op het CV moeten staan en de PDF rolt eruit. Wijzig je een project, dan klopt het CV de volgende keer dat iemand het downloadt.
- Eigen hoogte-inschatting voor de paginabreuken. Dompdf geeft geen controle over waar een pagina eindigt, dus wordt per blok berekend hoeveel regels het wordt bij die kolombreedte en daaruit volgt de indeling.
- Het datamodel staat in code, niet in de database. ACF-velden via ACF Composer, dus een nieuw veld is een codewijziging die in git staat en terug te draaien is.
- Same-origin proxy voor de PDF-download via een Nuxt server-route, omdat browsers een download van een onbeveiligde herkomst blokkeren en je anders je CMS-domein in een publieke link zet.
- WPGraphQL plus headless Nuxt als vaste basis. Dit project, de CMS en Absolit draaien op dezelfde combinatie; de kracht zit in die opzet en in het strak houden van het ontwerp erbovenop.
Wat er nog niet in zit
Genoeg. Zoals bij de meeste van deze projecten geldt dat dit er een is die nooit echt af zal zijn. Er blijven teveel leuke uitdagingen bestaan.
Wat het opleverde
GraphQL werkt snel en goed, maar heeft duidelijke beperkingen. Je schrijft je queries in de frontend, wat betekent dat je datalaag verspreid raakt over twee codebases en dat een wijziging aan een veld twee kanten raakt. Dat is een afweging die je maakt, geen gratis winst.
De PDF-generatie was een leuk miniproject op zichzelf. Het snel krijgen van een headless Nuxt-site was ook leuk om te doen, al ben je daar nooit mee klaar.
Zie ook het artikel over Absolit, de tweede site die uit dezelfde CMS eet.