Dierenpark
Een website voor een dierentuin, mobile-first opgezet met toegankelijke navigatie en vloeiende scroll-animaties.
Zonder frameworks gebouwd, met aandacht voor responsive breakpoints en een navigatie die ook met het toetsenbord werkt.
Daniël Vink
Utrecht, NL
Ik bouw complete producten, van idee tot live, en doe dat grotendeels met Claude Code. Ontwerp, API en interface maak ik zelf, rechtstreeks in code.
Project
Werk
WelkePan
Ruim 2.800 pannen naast elkaar op materiaal, coating, maat en warmtebron, met bij elk gegeven de bron erbij.
Een vergelijkingssite voor pannen. Je filtert op materiaal, coating, diameter en of een pan op inductie kan. De gegevens komen van de fabrikanten via de catalogus van bol.com, en bij elke pan staat waar elk gegeven vandaan komt.
Geeft de fabrikant iets niet op, dan staat er "niet opgegeven". Ik vul niets zelf in. Ik test de pannen ook niet zelf, en dat staat er gewoon bij.
De site is statisch gebouwd met Astro. De prijzen worden live opgehaald en staan niet in de build, omdat de leverancier niet toestaat dat er oude prijzen in de HTML blijven staan.
Achter de site zit één importproces dat de data ophaalt, opschoont en aanvult. Dezelfde code draait ook goedliggen.nl voor matrassen en watspelenwe.nl voor gezelschapsspellen. Een nieuwe niche opzetten is een configuratiebestand, een huisstijl en een domein.
WallyTally
Upload een bankafschrift en zie waar je geld heen gaat, welke abonnementen je vergeten was, en wat je totale vermogen doet.
Een app voor je eigen geldzaken. Je uploadt een CSV van je bank, en de app deelt je uitgaven in categorieën in, vindt terugkerende kosten en laat je totale vermogen zien. Abonnementen en verzekeringen herkent hij aan hoe vaak ze terugkomen, ook als ze op je afschrift een onduidelijke naam hebben.
Het is een monorepo met een duidelijke scheiding. Alle SQL staat op één plek, de rekenlogica kun je testen zonder database, en een aparte worker doet het zware werk, zoals importeren en koersen ophalen.
In de repo staan ook de architectuurbesluiten en een privacydocument. De app verwerkt bankafschriften, dus ik wilde kunnen uitleggen hoe ik met die gegevens omga.
Chat met Daniël
Bezoekers stellen vragen over mijn werk en krijgen antwoord van een model dat alleen uit mijn eigen documenten put.
Je uploadt documenten in een beheerpaneel. Bezoekers kunnen daarna op je pagina vragen stellen aan een assistent die over jou vertelt. Het model mag niets verzinnen en antwoordt alleen met wat het in de documenten vindt.
Zoeken gebeurt op twee manieren tegelijk: met vectoren en met trefwoorden, samengevoegd met reciprocal rank fusion. Dat bleek nodig. Op namen, jaartallen en functietitels scoorden de vectoren slecht, en juist daar vragen mensen naar.
Draait op mijn eigen VPS en wordt automatisch uitgerold zodra de tests slagen.
Restock Monitor
Volgt producten bij meerdere webshops en stuurt een melding op het moment dat iets van uitverkocht naar op voorraad springt.
Elke winkel heeft een eigen parser. Is die er niet, dan leest hij de gestructureerde productgegevens uit de pagina. Je krijgt alleen een melding als een product van uitverkocht naar op voorraad gaat, niet bij elke controle.
Hij controleert met een instelbaar interval en wat willekeurige spreiding, zodat een webshop niet overbelast raakt. In de README staat wat hij niet doet: hij kijkt alleen en koopt niets.
CSS Vuurwerkshow
Een vuurwerkshow volledig in HTML en CSS, zonder één regel JavaScript.
Een experiment om te zien hoe ver je komt met alleen keyframes en transforms. Elke vonk is een pseudo-element met een eigen vertraging, en samen vormen ze de show.
Wat ik kan
Front-end & UX
Ik bouw interfaces in Next.js en React, en let op de dingen die je pas merkt als ze ontbreken: toetsenbedienbaarheid, contrast en wat er gebeurt voordat de JavaScript geladen is.
Een scherm moet ook werken als er iets niet meegaat. Geen JavaScript, een trage verbinding, een klein scherm, of iemand die met het toetsenbord of een schermlezer werkt. Ik bouw eerst de versie die het altijd doet, en daarna de verbeteringen erbovenop.
Contrast meet ik in plaats van het te schatten, in het lichte en het donkere thema. Een kleur die in het ene thema prima leesbaar is, kan in het andere bijna wegvallen.
Waar je het kunt zien
Deze site is een zelfgeschreven WebGL-renderer met daaronder een volledig leesbare HTML-versie, die het ook zonder JavaScript doet. WelkePan is een Astro-site met filters die met het toetsenbord te bedienen zijn.
Zoeken & relevantie
Ik bouw zoekfuncties in Elasticsearch. Om zoeken goed te laten werken moet je weten wat de index met je tekst doet voordat er iets te zoeken valt.
Nederlandse tekst wordt bij het indexeren ingekort tot woordstammen, en dat bepaalt wat je later wel en niet vindt. Zoeken tijdens het typen, samenstellingen en typefouten vragen daardoor elk om een andere aanpak.
Filters en tellingen horen hetzelfde te zeggen als de resultatenlijst. Als een filter zegt dat er twaalf zijn, moeten dat er ook twaalf zijn.
Waar je het kunt zien
WelkePan filtert ruim 2.800 pannen op materiaal, coating, maat en warmtebron, en laat leeg wat de fabrikant niet opgeeft in plaats van een aanname te tonen.
Data & API
Ik bouw de koppelingen die data binnenhalen en opschonen, en de API's die die data aanbieden.
Data uit een externe bron is zelden meteen bruikbaar: velden ontbreken, eenheden verschillen, en dezelfde eigenschap heet overal anders. Ik zet dat om naar één vast formaat, en houd bij waar elk gegeven vandaan komt.
Wat ontbreekt, laat ik ontbreken. Een gat opvullen met een aanname is makkelijker, maar dan weet niemand meer wat er echt bekend is.
Waar je het kunt zien
Achter WelkePan zit één importproces dat de gegevens ophaalt, opschoont en aanvult, met een API voor de live prijzen. Dezelfde code draait ook voor matrassen en gezelschapsspellen.
Performance
Ik meet waar een pagina traag van wordt, en los dat op aan de kant waar het ontstaat.
Eerst meten, dan pas aanpassen, en altijd tegen een echte productieversie. In ontwikkelmodus doen bibliotheken dingen dubbel, en dan meet je iets wat bezoekers nooit zien.
De grootste winst zit meestal in niet laden wat niemand nodig heeft: pas ophalen wanneer iets in beeld komt, lange lijsten in stukken, en resultaten die je kunt hergebruiken ook echt bewaren.
Waar je het kunt zien
Deze site tekent 175.000 sterren en kiest zelf een lichtere instelling op een trage computer. WelkePan is statisch gebouwd, met alleen de prijzen live erbij.
Testen & guardrails
Als ik iets oplos, schrijf ik er een test bij die voorkomt dat dezelfde fout later ergens anders terugkomt.
Een test die één bug afdekt is weinig waard als dezelfde fout op tien andere plekken kan ontstaan. Ik schrijf daarom het liefst een controle over de hele codebase, met een lijst uitzonderingen die alleen korter mag worden.
Ook belangrijk: weten wat je meet. Een testrapport kan er goed uitzien terwijl het de verkeerde dingen meetelt, dus ik controleer eerst of het cijfer klopt voordat ik er iets aan afmeet.
Hoe ik dat aanpak
Tests draaien op de uitgangssituatie én op mijn eigen branch, zodat je kunt zien dat een wijziging niets nieuws stukmaakt. Bij deze site draait er een vaste doorloop van de hele route voordat ik iets uitrol.
CI/CD & DevOps
Ik zet pipelines op die elke wijziging controleren en daarna automatisch uitrollen.
Statische checks, containers bouwen, scannen op kwetsbaarheden en de tests draaien tegen een omgeving die per run wordt opgezet. Een verplichte controle zet ik pas aan als hij af is, zodat niemand vast komt te zitten door een half werkende stap.
Uitrollen doe ik naar een eigen server met Docker en Caddy. Nieuwe versie ernaast zetten, controleren of hij antwoordt, en dan pas omwisselen.
Waar je het kunt zien
Deze site en Chat met Daniël draaien allebei op mijn eigen VPS en worden automatisch uitgerold zodra de tests slagen.
Studiewerk 2022–2023
CapitalGuesser
Een multiplayer raadspel waarin je in real-time hoofdsteden moet raden, met een live scorebord.
Mijn eerste project met websockets. Ik moest verbindingen bijhouden, de stand van het spel gelijk houden voor iedereen, en zorgen dat het spel doorging als iemand wegviel.
bRAIN
Een webapp die IoT-regentonnen koppelt aan gemeentelijke data, zodat huishoudens hun waterverbruik kunnen volgen.
Sensordata uit een regenton gecombineerd met open data van de gemeente, zodat een bewoner kan zien hoeveel water hij opvangt en gebruikt.
Browser Technologies
Een enquêteformulier dat werkt op álle apparaten en browsers, ook zonder JavaScript of snelle verbinding.
Eerst een formulier gebouwd dat werkt zonder JavaScript, en daarna pas de verbeteringen erbovenop. Door dit project begreep ik waarom die volgorde uitmaakt.
Dierenpark
Een website voor een dierentuin, mobile-first opgezet met toegankelijke navigatie en vloeiende scroll-animaties.
Zonder frameworks gebouwd, met aandacht voor responsive breakpoints en een navigatie die ook met het toetsenbord werkt.
ISGA City Guide
Een stadsgids gebouwd op de huisstijl van een opdrachtgever, mobile-first en met veel aandacht voor typografie.
Een bestaande huisstijl vertalen naar een werkende interface. Het was het eerste project waarin het ontwerp niet van mij was.
CSS Replication
Een gegeven visuele compositie zo precies mogelijk nabouwen met alleen HTML en CSS, dus zonder afbeeldingen.
Een oefening in layout. Alles wat je ziet is met CSS gemaakt, er zitten geen afbeeldingen in.
Boomagotchi
Een virtuele boom die je zelf laat groeien. Mijn eerste JavaScript-project.
Een simpel spelletje: DOM-manipulatie, een beetje spellogica, en voor het eerst een scherm dat reageerde op iets wat ik zelf had bedacht.
Zonnestelsel
Een interactief zonnestelsel. Het eerste dat ik ooit voor het web bouwde.
Hier begon het: HTML, CSS en de vraag hoe een browser eigenlijk werkt. Dat deze site nu een sterrenstelsel is, komt daar een beetje vandaan.
Over mij
Ik werk bij een softwarebedrijf in Utrecht aan AI-producten op publieke data, van de eerste proof of concept tot iets waar klanten echt mee werken.
Ik ontwerp en ik bouw. Het ontwerp maak ik tegenwoordig direct in code in plaats van eerst in Figma, en daarna bouw ik het zelf af, inclusief de API.
Mijn aanpak is meestal hetzelfde: eerst meten, dan de oorzaak zoeken, en daarna een test of check toevoegen zodat het probleem niet terugkomt. Met AI doe ik dat ook. Een model geeft sneller antwoord dan ik kan controleren, dus die controle bouw ik zelf in.