// De technologie · in detail · 2026

Geen WordPress.
Enkel code op maat.

Geen page builders, geen wildgroei aan plugins, geen thema om tegen te vechten. Elke site is een handgebouwde applicatie op een moderne stack die ik diep genoeg ken om te plooien naar mijn hand. Dit is precies wat er onder de motorkap draait — en waarom elk onderdeel zijn plaats verdient.

De templateroute

WordPress & page builders

  • Pluginstacks die je niet beheert of begrijpt
  • Opgeblazen markup, trage Core Web Vitals
  • Een aanvalsoppervlak dat constant patches vraagt
  • Design ingeperkt door andermans thema
Hoe ik bouw

Code op maat

  • Elke regel door mij geschreven, gelezen en beheerd
  • Afgestemd op Lighthouse, snel van bij de bouw
  • Dichtgetimmerd van bij het ontwerp — geen pluginloterij
  • Pixelnauwkeurig design zonder compromis
Nframework · het fundamentVercel · 2016 · elke site draait erop

Next.js — SSR & SEO, ingebouwd.

Elke site is een Next.js-app. Pagina's renderen op de server zodat de browser — en de crawler van Google — meteen volledige HTML krijgen, en daarna enkel de interactieve delen hydrateren. Ik kies de renderstrategie per route: statisch waar het kan, dynamisch waar het moet.

  • App Router & Server Components
  • SSG · ISR · SSR per route
  • next/image-optimalisatie
  • Native i18n-routing
  • Metadata & gestructureerde data
  • Edge-deployment op Vercel
render-strategy.ts
Statisch (SSG) — één keer gerenderd bij build time. Geserveerd als platte HTML vanaf de edge: het snelste wat een pagina kan zijn. Gebruikt voor marketing- & contentpagina's.
// what the crawler actually receives
<title>Nu — clean beauty, Antwerp</title>
<meta name="description"...>
<h1>Skincare, distilled.</h1>
LCP 1.1sCLS 0.00volledig indexeerbaarOG-tags
Sheadless cms · contentSanity.io · de klant beheert het zelf

Sanity — een dashboard gebouwd rond de klant.

Content leeft in een Sanity Studio die ik per klant op maat maak — volledig losgekoppeld van de front-end. Redacteurs werken producten, artikels en beeldmateriaal bij in een realtime-interface; ik bevraag exact de vorm die elke pagina nodig heeft met GROQ. Geen ontwikkelaar nodig voor de dagelijkse aanpassingen.

Nu Studio· content lakeGepubliceerd
Content
◆ Producten
Journal
▤ Pagina's
⚙ Instellingen
Producten · 24
Renew Serum
€48 · op voorraad
EN · NL
Calm Cleanser
€32 · op voorraad
Daily SPF 30
€29 · lage voorraad
Night Balm
€54 · op voorraad
Title *
Renew Serum
Slug
/products/renew-serum
Hero image
drop · 1200×1500 · auto-CDN
Price (EUR)
48.00
Stock
128
Description · Portable Text
A featherweight vitamin-C serum that brightens and renews. Fragrance-free, vegan, made in Belgium.
query.groq
// fetch only what the page renders
*[_type == "product" && stock > 0]{
  title, "slug": slug.current,
  price, "img": image.asset->url
} | order(price asc)
result.json
[
  {
    "title": "Renew Serum",
    "slug":   "renew-serum",
    "price": 48,
    "img":    "cdn.sanity.io/…"
  }
]
Ganimatie · de bewegingslaagGreenSock (GSAP) · industriestandaard

GSAP — beweging op een tijdlijn.

Elke reveal, scrollhoofdstuk en hover-accent draait op GSAP. ScrollTrigger koppelt animatie aan de scrollpositie en pint sticky secties vast; Draggable en MorphSVG maken vectorvormen grijpbaar en vormveranderlijk. Het is het verschil tussen een site die laadt en een site die beweegt — binnen het performancebudget, nooit gratuit.

  • ScrollTrigger-scènes
  • Opeenvolgende tijdlijnen
  • Draggable-interacties
  • MorphSVG-vormtweens
  • Enkel GPU-transforms
  • Bewust van reduced-motion
draggable-star.tsx
drag me  ·  tap to morph
// grab it, fling it, morph it Draggable.create("#star", { bounds: "#stage", type: "x,y", onClick: () => gsap.to("#star", { morphSVG: next, ease: "back.inOut(1.7)" }) });
Rui-library · componentenOntstaan bij Facebook (Meta) · 2013

React — het componentmodel.

Geboren bij Facebook in 2013, is React de manier waarop de volledige UI gebouwd wordt: kleine, samenstelbare stukken state-gestuurde interface. Schrijf een component één keer, hergebruik het overal, en de weergave weerspiegelt altijd de data. Het is de laag waar al de rest op aansluit.

  • Samenstelbare componenten
  • Declaratieve, state-gestuurde UI
  • Hooks voor herbruikbare logica
  • Enorm, beproefd ecosysteem
App.tsx
└─ <App>
  ├─ <Header>
  ├─ <ProductGrid>
  │  └─ <ProductCard> ×24
  ├─ <Cart>
  └─ <Footer>
3
useState
TStaal · typeveiligheidMicrosoft · 2012 · JavaScript dat schaalt

TypeScript — fouten gevangen voor ze live gaan.

Elke regel is getypeerd. De compiler kent de vorm van je data, je props en je API-responses — zodat hele categorieën bugs in de editor opgevangen worden, niet in productie. Het is documentatie die niet kan verouderen en een vangnet dat nooit slaapt.

  • Statische typecontrole
  • Autocomplete & intellisense in de editor
  • Zelfdocumenterende contracten
  • Veilige, zelfverzekerde refactors
cart.ts
type Product = { title: string; price: number; }; function total(items: Product[]) { return items.reduce((n, p) => n + p.price, 0); } // ✗ caught at compile time total([{ title: "Serum", price: "48" }]);
Type 'string'is not assignable to type 'number'.  ts(2322)
Tstyling · design tokensTailwind CSS · utility-first

Tailwind — design tokens, geen stylesheets.

Styling gebeurt in de markup met utility-classes die gekoppeld zijn aan één design system — spacing, kleur en typografie komen allemaal uit gedeelde tokens. Het resultaat is standaard consistent, minuscuul in productie, en onmogelijk om af te drijven omdat er geen verweesde CSS-bestanden zijn die rotten.

  • Token-gestuurde utilities
  • Geen ongebruikte CSS meegeleverd
  • Consistente spacing & schaal
  • Responsief op één plek
ProductCard.tsx
<div class="rounded-2xl p-6 bg-gradient border shadow-lg flex flex-col gap-2">
Renew Serum
Brightening vitamin-C, made in Belgium.
Add to cart · €48
// De bijrolspelers

De rest van de gereedschapskist.

Al de rest die meegaat in een doorsnee build — gekozen om dezelfde reden: ik ken het goed genoeg om het te beheren.

NoNode.jsRuntime · API's
StStripeBetalingen · Twint
MMongoDBNoSQL · data
RxReduxState · winkelmandje
GQGraphQLGetypeerde queries
LnLenisVloeiend scrollen
VVercelHosting · edge
i18i18nEN · FR · NL

Wil je deze stack
achter jouw site?

Van blanco bestand tot afgewerkt product — op exact de tools hierboven. Vertel me wat je in gedachten hebt.

Start een project →Bekijk het live