Creëren, testen, verbeteren

Volledige ontwikkeling van bedrijfswebplatform voor GM Microcementos, een bedrijf gespecialiseerd in microcement toepassing. Professionele website met 15 geoptimaliseerde pagina's, gericht op prestaties, SEO en uitzonderlijke gebruikerservaring. Bevat budgetcalculator, filterbare projectgalerie, geavanceerde formulieren en minimalistisch ontwerpsysteem. Modulaire architectuur met 100+ herbruikbare componenten en Core Web Vitals optimalisatie.

Webplatform voor Academia CEJ, academie gespecialiseerd in justitie-competitie-examens in Malaga. Volledig responsive website met blog, virtuele campus, kennistest systeem, inschrijfssysteem en cursusmanagement. Ontwikkeld met Next.js 14, React 18, Tailwind CSS, Framer Motion en Docker.

Ontwikkeling van de corporate website van Dimap, een moderne applicatie gebouwd met Next.js 15, React 19, Redux Toolkit en TailwindCSS, gericht op optimale prestaties en een soepele gebruikerservaring. Het project omvat servicepagina’s, een blog, corporate secties en formulieren met lead-tracking, allemaal opgebouwd met een modulaire architectuur en sterk geoptimaliseerde laadtechnieken via SSG, Lazy Loading en ClientLoader.

In dit project heb ik met een team gewerkt om vanuit het niets een platform op te bouwen dat zich richt op het verkopen van kwaliteitsproducten en het ondersteunen van de lokale handel. We werkten vanaf het concept tot aan de praktijk door zowel de back-end als de front-end te creëren. Naast verschillende technologieën werden integraties zoals JWT voor accountbeheer en inloggen, een dashboard voor controle van alle gegevens geïmplementeerd... Functionaliteiten zoals inloggen met verschillende sociale netwerken, account aanmaken als gebruiker om producten te kopen of als bedrijf om ze toe te voegen, kaarten van de dichtstbijzijnde locatie waar het betreffende product te vinden is, onder andere. Om vertrouwelijkheidsredenen wordt de code niet getoond.

DevCrate is een platform om ontwikkelresources te ontdekken (tools, libraries, assets, documentatie en challenges). Heb je ook wel eens gehad dat je een resource voor je project nodig had, of gewoon inspiratie, en uiteindelijk door een eindeloze hoeveelheid pagina’s aan het bladeren was? Daarom heb ik dit platform gemaakt: om alle resources die ik door de jaren heen heb ontdekt te organiseren en niet kwijt te raken, en ze snel terug te vinden zonder afhankelijk te zijn van verspreide bladwijzers. Het bevat geavanceerd zoeken, filters op tags en een admingedeelte om alle content te beheren. Het ondersteunt ook suggesties vanuit de community om nuttige tools te blijven verzamelen. Het is gebouwd met Next.js, React, TypeScript en MongoDB, met veilige authenticatie en een moderne interface op basis van shadcn/ui.

Recreatie van de officiële Apple-hero voor de AirPods Pro 2, gericht op het beheersen van geavanceerde animaties met GSAP en ScrollTrigger. Ik implementeerde een sequentie van 65 Canvas-frames die met scrollen synchroniseren, samen met soepele overgangen, dynamische navigatie en visuele effecten geïnspireerd op de originele Apple-ervaring. Een project gericht op het verfijnen van high-performance webanimatie.

Ontwikkeling van een real-time objectdetectie PWA met Angular 19 en TensorFlow.js. Inclusief PWA-configuratie, TensorFlow.js-integratie voor objectdetectie, live beeldopname en -verwerking, optimalisatie met Web Workers en Lazy Loading, offline opslag met IndexedDB en implementatie op mobiele apparaten.

Grand Theft Auto VI landing page clone exclusief gemaakt voor educatieve doeleinden en demonstratie van webontwikkelingsvaardigheden. Moderne website met responsive design geoptimaliseerd voor alle desktop resoluties (1024px - 4K). Bevat dropdown menu met geavanceerde animaties met GSAP, dynamisch karakter- en locatieweergavesysteem met afbeeldingen, interactieve trailer sectie met previews en download sectie met geanimeerde cards. Non-profit educatief project ontwikkeld met Astro, Tailwind CSS en JavaScript.

Oefenproject om Three.js en TresJS te leren met 3D-modellen. Interactieve webapplicatie waarmee je een sta-bureau kunt aanpassen met verschillende afwerkings- en kleuropties. Bevat 3D-weergave met orbital controls, 3D-modellen van laptop, koptelefoon en decoratieve plant. Pas de bureauafwerking aan en selecteer kleuren voor accessoires met realtime preview. Ontwikkeld met Vue 3, TresJS (Three.js integratie met Vue), TypeScript, Vite en UnoCSS.

Klein project gericht op oefenen met Strapi als CMS en backend. Het is gebouwd met React/Next.js, TypeScript en Tailwind CSS. Hoewel de demo gemockte data gebruikt, bevat de code de echte Strapi-integratie om content op te halen en te beheren.

Realtime-chatproject met een productiegerichte backendarchitectuur. Het gebruikt Node.js + Express en Socket.IO voor bidirectionele communicatie, met twee opslagmodi: in-memory (mock) en optionele persistente opslag met Supabase. De frontend (Vite) kan in demo- of live-modus draaien, en de oplossing is gelaagd opgebouwd (configuratie, HTTP, realtime, domein en storage) om onderhoudbaarheid, testen en schaalbaarheid te verbeteren.

HTML5-implementatie van de klassieke Super Mario Bros gebouwd met Phaser 3.55.2 voor educatieve doeleinden, gebaseerd op het werk van decapapi. Het project herschept de 2D-platformervaring met een modulaire architectuur voor animaties, blokken, structuren, entiteiten, spelerbediening en HUD, plus extra's zoals het maken van screenshots met html2canvas. Het ondersteunt webimplementatie en lokale ontwikkeling met Vite, waardoor testen en open-sourcebijdragen onder de MIT-licentie eenvoudig worden.

Paint Win 95' bootst de klassieke Microsoft Paint-ervaring na met een retro interface in Windows 95-stijl en modern webgedrag. Het bevat teken- en selectietools, een primair/secundair kleurenpalet, undo/redo-geschiedenis, werkniveaus voor zoom, het openen van lokale afbeeldingen, PNG-export en ondersteuning voor muis-, toetsenbord- en touch/stylus-invoer via Pointer Events.

Bookshop View Transitions is een React + Vite-demo die zich richt op het implementeren van vloeiende overgangen tussen pagina’s met de View Transitions API, inclusief gedeelde animaties tussen elementen (titel, omslag en navigatie) om visueel doorlopende navigatie te bereiken.

TikTok-kloon gebouwd met React, TypeScript en Vite, ontworpen met een mobile-first aanpak. Bevat een verticale feed met automatische weergave, Following/For You-navigatie, interactieve acties (like, reacties, opslaan, delen), Friends/Inbox/Profile-pagina's en upload met publicatie in de feed. Werkt met een servicegebaseerde architectuur (standaard mock met localStorage-persistentie) en heeft Supabase klaar voor een echte backendverbinding.

Open-sourceproject geïnspireerd op de klassieke Breakout, gebouwd met Astro en spel-logica in TypeScript via Canvas. Bevat een moeilijkheidskiezer in de canvas, instelbare en progressieve balsnelheid, blokken met variabele weerstand en visuele schade-status, toetsenbordbesturing en herstart na Game Over.