Hello world: een nieuwe SoBra, gebouwd met AI

Gepubliceerd Web & frontend Braindump

SoBra heeft een nieuwe branding, een nieuwe site en voor het eerst een blog. Ik heb alles gemaakt samen met AI. Hoe dat werkt, lees je hieronder.

Het nieuwe logo

Het logo is een handgeschreven SoBra met een zwierige lijn eronder. Aan het einde van die lijn staat een oranje stip, het enige stukje kleur.

Op sobra.be doet die stip bijna alles. Ze valt bij het laden in het logo, wordt daarna je cursor en klikt weer vast als je ze dicht bij haar plekje brengt. Wie op zijn toestel minder beweging vraagt, krijgt meteen de eindstand te zien.

Hoe ik met AI werk

Brainstormen en plannen doe ik vooral met OpenAI. Uitvoeren en designen laat ik over aan Claude (Opus 5.5).

Claude krijgt daarbij duidelijke instructies mee, in Markdown-bestanden als context. Daarnaast heb ik zelf skills opgesteld (SKILL.md-bestanden) over hoe ik graag werk en wat ik daarin belangrijk vind: hoe ik schrijf, hoe ik denk, waar ik op let. Daardoor neemt AI het grootste deel van het werk uit handen, zowel bij het bouwen van de site als bij het schrijven van de teksten. Ook deze post is zo ontstaan.

Ik blijf wel de puppet master. Ik beslis wat er gebeurt en bepaal wat goed is en wat niet. Ik leg vast hoe het geschreven wordt, van tone of voice tot technische schrijfstijl. Daarna laat ik AI de taken afwerken en het resultaat tonen. De review doe ik zelf.

Waarom zo

Ik heb geen CMS nodig. Een post is een map met tekstbestanden, en de build maakt er een pagina van in drie talen. De site blijft heel klein, en alles is meteen geoptimaliseerd zoals ik het met de hand ook zou doen.

Zo steek ik minder tijd in mijn eigen site en kan ik me meer concentreren op het werk voor klanten.

Onder de motorkap

De site draait zonder framework: gewone HTML, SCSS met cascade layers en een handvol kleine JavaScript-modules, samengezet met Vite. Een paar technieken die erin zitten:

  • View Transitions voor de overgang tussen pagina's: een bol in de kleur van de stip groeit vanaf de plek waar je klikt.
  • Scroll-driven animations in CSS, zodat tekst oplicht terwijl je scrolt, zonder JavaScript.
  • Een HDR-videotruc uit superwhite van dtinth, om iets witter dan wit te tonen op een HDR-scherm.

Er zitten ook een paar geheimen in de site. Waar ze zitten, verklap ik niet.

Wat hier komt

Op Nostrabramus komen korte stukken over AI, het web en SEO, en dingen die ik online tegenkom. Telkens met de bronnen erbij, in het Nederlands, het Engels en het Frans. Waarom de blog zo heet, lees je in Waarom heet dit Nostrabramus?.