Portfolio

Portfolio

React 19Next.js 16Tailwind CSSTypeScriptDesign SystemExperimenteel

Doel van het project

Mijn portfolio is niet alleen bedoeld om projecten te tonen. Het is een plek om:

  • 🧭 Te verkennen, te pushen en te evalueren in een realistische context, zonder de beperkingen van een klassiek commercieel product
  • 🧪 Te werken met moderne of experimentele technologieën
  • 🎯 Keuzes rond architectuur en UX te valideren
  • 🔬 Mijn eigen libraries in een concrete situatie te testen

Ik experimenteer en behoud alleen wat relevant is, niet simpelweg wat nieuw is.

Geteste technologieën

View Transition API

Vloeiende overgangen tussen elementen op verschillende pagina’s met de experimentele React <ViewTransition /> component

Bij het wisselen van thema: een geanimeerde overgang via de imperatieve browser-API.

Eén API, twee verschillende toepassingen, twee verschillende integratiecontexten.

Server Actions

Het contactformulier is geïmplementeerd met een getypeerde Server Action, gevalideerd aan de serverzijde met Zod. Het doel was om de beperkingen van dit model te testen: hoe ga je om met fouten, hoe zorg je voor consistente types en hoe maak je het schaalbaar.

App Router

Het volledige project is gebouwd met de App Router van Next.js 16. Dit maakte het mogelijk om duidelijk te identificeren:

  • De voordelen: gedeelde layouts, Server Components
  • De beperkingen: hydratatiebeperkingen, beheer van globale state
  • Hun impact op hoe je een project structureert

Geavanceerde Subgrid

Implementatie van een cascade van subgrids, een nog weinig gebruikte aanpak, om perfecte uitlijning van kaartinhoud te garanderen zonder hacks.

WebGL

Raster dat reageert op de cursor.

Mijn persoonlijke bibliotheken

Deze portfolio bevat 2 bibliotheken die ik zelf heb ontwikkeld en gepubliceerd:

Themasysteem

Ik heb ervoor gekozen om verder te gaan dan alleen light/dark mode en een mini design engine te bouwen op basis van drie parameters:

  • Licht/donker modus 🌗
  • Glassmorphism (glaseffect) ⿻
  • Thematische kleuren 🎨

In de praktijk betekent dit dat gebruikers tientallen visuele variaties kunnen ontdekken.

🎯 Kleine technische uitdaging

Het thema wordt opgeslagen via een cookie, zodat het direct bij het laden van de pagina kan worden toegepast. 👉 Bij server-side rendering moet de state al op de server bestaan tijdens de eerste render, en daarna verder leven op de client voor interacties. Dit zorgt voor een consistente weergave vanaf het begin, zonder flits-effect.

Opmerking: visuele stabiliteit (CLS) heeft een directe invloed op de perceptie van performance.

Performance en toegankelijkheid

Lighthouse score

Lighthouse score: 100/100 voor Performance, Toegankelijkheid, Best Practices en SEO.

Deze metrics weerspiegelen concrete keuzes:

  • 📈 Maximale reductie van client-side JavaScript dankzij Server Components, optimalisatie van statische assets en observers, pauzeren van animaties buiten beeld, enz.
  • 🧠 Semantische HTML, naleving van WCAG, en aanpassing van contrast per thema.

Internationalisatie

🌐 Het portfolio is beschikbaar in 4 talen: Frans, Engels, Nederlands en Russisch.

De navigatie is gestructureerd per locale, zodat zoekmachines elke versie correct kunnen indexeren.

Architectuur

Een duidelijke structuur vermindert de cognitieve belasting en maakt toekomstige evoluties eenvoudiger.

Dit portfolio gaf me de kans om in de praktijk na te denken over de organisatie van een frontendproject, met name de core/shared-scheiding en de feature-first aanpak.

Lees de volledige analyse

Iteratieve aanpak

Dit project was nooit bedoeld als “af”. De git-historiek bewijst dat:

  • ♻️ Constante refactors
  • 🧩 Geleidelijke UX-verbeteringen
  • 📝 Fijnere detailoptimalisaties

Deze manier van werken (continu verbeteren in plaats van te wachten op perfectie) weerspiegelt het best hoe ik echte projecten aanpak.