Creëren, testen, verbeteren

Complete ontwikkeling van corporate webplatform voor GM Microcementos, een bedrijf gespecialiseerd in microcementtoepassingen. Professionele website met 15 geoptimaliseerde pagina's, gericht op prestaties, SEO en uitzonderlijke gebruikerservaring. Inclusief budgetcalculator, filterbare projectgalerij, geavanceerde formulieren en minimalistisch ontwerpsysteem. Modulaire architectuur met 100+ herbruikbare componenten en geoptimaliseerd voor Core Web Vitals.

Webplatform voor Academia CEJ, academie gespecialiseerd in examens voor ambtenarenzaken in Malaga. Volledig responsive website met blog, virtuele campus, kennistoets, inschrijfsysteem en cursusbeheer. Ontwikkeld met Next.js 14, React 18, Tailwind CSS, Framer Motion en Docker.

Ontwikkeling van de bedrijfssite van Dimap, een moderne applicatie op basis van Next.js 15, React 19, Redux Toolkit en TailwindCSS, gericht op het leveren van optimale prestaties en een soepele ervaring. Het project omvat servicepagina's, een blog, bedrijfssecties en leadtrackingformulieren, allemaal gebouwd op een modulaire architectuur en sterk geoptimaliseerd laden met behulp van SSG, Lazy Loading en ClientLoader.

DevCrate is een platform voor het ontdekken van bronnen voor ontwikkeling (tools, bibliotheken, middelen, documentatie en uitdagingen). Heb je nooit een bron voor je project nodig gehad, of gewoon wat inspiratie, en eindigde je niet met het doorbladeren van een ontelbaar aantal pagina's? Daarom heb ik dit platform gemaakt: om de bronnen die ik in de loop der jaren heb ontdekt te organiseren en niet kwijt te raken, en om ze snel terug te kunnen vinden zonder afhankelijk te zijn van verspreide bladwijzers. Het bevat geavanceerd zoeken, filters op tags en een beheerdersgedeelte om alle inhoud te beheren. Het laat ook suggesties van de gemeenschap toe om nuttige tools te blijven verzamelen. Het is gebouwd met Next.js, React, TypeScript en MongoDB, met veilige authenticatie en een moderne interface gebaseerd op shadcn/ui.

Cmd+kit is een herbruikbaar opdrachtpalletsysteem voor webproducten, ontworpen om snel zoeken, toetsenbordnavigatie en het uitvoeren van acties mogelijk te maken vanuit een consistente en toegankelijke interface. Het is ontworpen om gemakkelijk te integreren in verschillende stacks met officiële adapters voor React, Vue, Preact en Astro, met behoud van dezelfde basis van gedrag en visuele aanpassing. Het bevat volledige documentatie en een interactieve speelplaats voor het configureren van thema's, opdrachtstructuur en het exporteren van kant-en-klare code. Kan worden geïnstalleerd met npm, pnpm, yarn of bun, afhankelijk van de flow van elk project.

CLI-toolkit + bibliotheek gepubliceerd in npm waarmee API-contracten kunnen worden gedefinieerd in een enkel getypt JSON-bestand en automatisch gedeelde TypeScript-types, Angular-client, runtime-validatie met Zod en controllers voor NestJS kunnen worden gegenereerd. Elimineert out-of-sync tussen frontend en backend, vermijdt dubbele code en detecteert brekende wijzigingen via contract snapshots. Bevat mock generatie voor testen en een modulaire architectuur gebaseerd op meerdere herbruikbare pakketten.

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.

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.

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.

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.

In dit project werkte ik samen met een team om vanuit het niets een platform te ontwikkelen dat zich richt op de verkoop van kwaliteitsproducten en lokale handel. We werkten vanaf nul met het concept tot aan de praktijk en creëerden zowel de back-end als de front-end. Naast verschillende technologieën namen we integraties op zoals jwt voor het beheer van gebruikersaccounts en inloggen, een dashboard om alle gegevens te beheren... Functionaliteiten zoals de mogelijkheid om in te loggen met verschillende sociale netwerken, het aanmaken van een account als gebruiker om producten te kopen of als bedrijf om ze toe te voegen, kaarten van de dichtstbijzijnde plaats waar het product in kwestie kon worden gevonden, onder andere. Om redenen van vertrouwelijkheid wordt de code niet getoond.