// Senior webdeveloper & designer · Lyon, FR

Websites, gebouwdvanaf nul—AI is het power tool.

Ik ben Yolan — een senior developer die snelle, meertalige websites en webshops regel voor regel uittekent. AI versnelt het vakwerk; het vervangt nooit het oordeel. Beheerst, niet onderworpen.

Bekijk het werk →De filosofie
growth.tsx — wat goede code oplevertlive
Bezoekers0+0%
Klikken027% CTR
Winst0▲ live
Next.jsReactTypeScriptTailwindSanity CMSNode.jsStripeFramer MotionGraphQLVercelHeadlessi18nSEOWeb PerformanceAI-assistedNext.jsReactTypeScriptTailwindSanity CMSNode.jsStripeFramer MotionGraphQLVercelHeadlessi18nSEOWeb PerformanceAI-assisted
01 Wat ik meebreng

Geen template.
Een toolkit, met de hand gebouwd.

Elke mogelijkheid hieronder is van nul af opgebouwd en bewezen op een echt, gelanceerd project. Geen page builders, geen boilerplate — gewoon code die ik van boven tot onder begrijp.

[ design_systems ]

Designsystemen, vanaf de tokens

Typeschalen, kleur, ruimte, beweging en componenten — een samenhangend systeem, geen hoop CSS.

AaAaAaAa
CASE: Spiree — gradiëntsysteem ↗
[ motion ]

Scrollgedreven, cinematische beweging

Scroll per sectie, sticky hoofdstukken en reveal-choreografie — performancebewust, nooit gratuit.

CASE: Milo Weiler — scroll in 7 hoofdstukken ↗
[ i18n ]

Meertalige routing

EN · FR · NL met gelokaliseerde SEO ingebakken.

FRENNL
CASE: Bermuda ↗
[ headless_cms ]

Headless CMS

Publiceer content-aanpassingen zonder dat er een developer aan te pas komt.

query allProducts {
  title, price, slug
}
CASE: Nu · Sanity ↗
[ commerce ]

Commerce & betalingen

Stripe- & Twint-checkouts die converteren.

POST /checkout → 200
stripe.session.create()
CASE: Nu winkel ↗
[ performance · seo ]

Lighthouse-getuned, zoekklaar

Uitgestelde beeldlading, semantische markup en strakke Core Web Vitals — snel voor gebruikers én voor Google.

0
Performance · SEO · Best Practices
LCP 1.1s · CLS 0.00 · TTI 1.4s
CASE: Milo Weiler ↗
[ theme · accent ]

Licht & donker, by design

Thema, accent, typografie — elke visuele keuze is een token. Wissel er één en het hele systeem volgt, live.

Maak het van jou ↑
02 De stack, in detail

Geen WordPress.
Code op maat.

Geen page builders, geen wildgroei aan plugins, geen thema om tegen te vechten. Elke site wordt van nul geschreven in een moderne stack die ik diep genoeg ken om naar mijn hand te zetten. De drie tools hieronder doen het zware werk — scroll, en elk opent zich zodra de lijn het bereikt.

Elke site die ik bouw is een Next.js-applicatie. De App Router geeft me server components, streaming en file-based routing — pagina's renderen op de server voor snelheid en SEO, en hydrateren daarna enkel de delen die interactief moeten zijn. Eén framework, van marketingpagina tot checkout.

  • App Router & React Server Components
  • SSG · ISR · SSR per route gekozen
  • next/image — automatische optimalisatie
  • Native i18n-routing — en · fr · nl
  • Code splitting op routeniveau
  • Edge-klaar, gedeployed op Vercel
CASE: Milo Weiler — 55 projecten, topscore op Lighthouse ↗

Content leeft in Sanity, volledig ontkoppeld van de front-end. Redacteurs werken producten, posts en beeld bij in een Studio die ik op hun workflow afstem; ik bevraag exact de vorm die elke pagina nodig heeft met GROQ en render die via Portable Text. Geen tussenkomst van een developer voor de dagelijkse aanpassingen.

  • Aangepaste Studio-schema's per klant
  • GROQ — bevraag enkel wat gerenderd wordt
  • Portable Text rijke content
  • Draftpreview & realtime updates
  • Beeldpijplijn op een globale CDN
  • Webhook-gestuurde rebuilds
CASE: Nu — een CMS-gestuurde clean-beauty-catalogus ↗

De checkout draait op Stripe. Sessies worden server-side aangemaakt, bevestigd door ondertekende webhooks en gereconcilieerd voor er iets verzonden wordt — veilig van bij de bouw, en vertrouwt daarbij nooit op de browser. Multivaluta plus Twint geeft Belgische en EU-klanten de betaalmethodes waar ze echt naar grijpen.

  • Server-side Checkout Sessions
  • Afhandeling via ondertekende webhooks
  • Prijzen in meerdere valuta
  • Twint & kaarten voor de EU
  • PaymentIntents met SCA
  • Btw- & verzendlogica
CASE: Nu winkel — een wrijvingsloze koopstroom ↗

Elke reveal, elk scrollhoofdstuk en elke hover-flourish draait op GSAP. ScrollTrigger pint secties vast en koppelt animatie aan de scrollpositie; timelines sequencen de choreografie frame-accuraat. Het is het verschil tussen een site die laadt en een die beweegt — performancebewust, nooit gratuit.

  • ScrollTrigger — scrollgedreven scènes
  • Timelines voor gesequenceerde beweging
  • Pin & scrub voor sticky hoofdstukken
  • Enkel GPU-vriendelijke transforms
  • Bewust van reduced-motion
  • 60fps op mid-range mobiel
CASE: Milo Weiler — scrollchoreografie in 7 hoofdstukken ↗
yolan@ywdesign — zsh
// Telkens van nul

Zo ziet
“geen template” eruit.

Een site opgezet zoals ik echt werk — eerst architectuur, dan designsysteem, en dan gelanceerd. Het oordeel is menselijk; de snelheid komt van de tooling.

Duik in de technologie →
// Plus de ondersteunende cast
RReact 18UI · componenten
TSTypeScriptTypes · veiligheid
TTailwindStyling · tokens
NNode.jsRuntime · API's
MMongoDBNoSQL · data
RxReduxState · winkelmand
GQGraphQLGetypte queries
VVercelHosting · edge
03 Geselecteerd werk

Gelanceerd, in productie.

Echte sites voor echte klanten in België en daarbuiten — meertalig, snel en gebouwd om te converteren.

01Nu — Beauty & wellness e-commerce
Beauty & wellness e-commerce

Nu

Een meertalige clean-beauty-winkel — rustige redactionele cadans rond een wrijvingsloze, CMS-gestuurde koopstroom.

Case study →Bezoek ↗
02Milo Weiler — Fotografieportfolio
Fotografieportfolio

Milo Weiler

Een cinematische, donkere portfolio opgedeeld in zeven scrollhoofdstukken — 55 projecten, sticky hoofdstuknavigatie, topscores op Lighthouse.

Case study →Bezoek ↗
03Bermuda Events — Eventbureau · België
Eventbureau · België

Bermuda Events

Een premium merksite die voorbije producties op schaal in beeld brengt, met een contacttrechter gebouwd om de juiste leads te kwalificeren.

Case study →Bezoek ↗
04Spiree — Activewearmerk · 100% Merino
Activewearmerk · 100% Merino

Spiree

Een onafhankelijke sportkledingsite — gedurfd gradiëntsysteem, Sun- & Moon-collecties, een verhaalgedreven boog.

Case study →Bezoek ↗
04 De filosofie

Een power tool.
Beheerst,
niet onderworpen.

Ik zet AI in zoals een vakman een power tool inzet — voor snelheid en hefboomwerking, nooit om het denken uit handen te geven. De app is het werk niet. Het oordeel wel.

01
Ik bezit de architectuur

AI schetst; ik beslis over structuur, afwegingen en het datamodel. De blauwdruk is menselijk.

02
Elke regel gaat begrepen live

Niets bereikt productie dat ik niet kan lezen, herstructureren en verdedigen. Geen black boxes.

03
Snelheid, zonder het waarom te verliezen

AI haalt het routinewerk weg zodat meer tijd naar vakwerk, performance en de details die ertoe doen gaat.

04
Het gereedschap dient de developer

Beheerst, niet onderworpen. De senior engineer blijft aan het stuur — altijd.

05 Hoe ik werk

Een transparante pijplijn.

Vijf fases, van start tot lancering. De lijn tekent zich terwijl je scrollt — elke fase licht op zodra je ze bereikt.

Ontdekking

Doelen, doelpubliek, budget — en wat succes echt betekent voor er een regel geschreven is.

Architectuur

Stack, datamodel en structuur vooraf bepaald — de blauwdruk is menselijk.

Design

Een echt systeem dat je vroeg ziet en waarop je reageert, samen verfijnd — geen statische mockup.

Bouw

Met de hand gecodeerd, AI-versneld, meertalig en SEO-klaar — elke regel gaat begrepen live.

Lancering

Meten, itereren, en ik blijf aan boord voor wat er ook volgt.

// Contact

Heb je iets
dat het waard is om te bouwen?

Van leeg bestand tot gelanceerd product. Vertel me wat je in gedachten hebt — ik vertel je hoe ik het zou bouwen.

Start een project →WhatsApp
contact@ywdesign.co · +33 7 65 60 14 15 · Lyon, FR