// Senior web developer & designer · Lyon, FR

Websites, builtfrom scratchAI is the power tool.

I'm Yolan — a senior developer who architects fast, multilingual websites and stores line by line. AI accelerates the craft; it never replaces the judgement. Mastered, not enslaved.

growth.tsx — what good code earnslive
Visitors0+0%
Clicks027% CTR
Profit0▲ shipped
Next.jsReactTypeScriptTailwindSanity CMSNode.jsStripeFramer MotionGraphQLVercelHeadlessi18nSEOWeb PerformanceAI-assistedNext.jsReactTypeScriptTailwindSanity CMSNode.jsStripeFramer MotionGraphQLVercelHeadlessi18nSEOWeb PerformanceAI-assisted
01 What I bring

Not a template.
A toolkit, hand-built.

Every capability below is engineered from scratch and proven on a real, shipped project. No page builders, no boilerplate — just code I understand top to bottom.

[ design_systems ]

Design systems, from tokens up

Type scales, color, spacing, motion and components — a coherent system, not a pile of CSS.

AaAaAaAa
CASE: Spiree — gradient system ↗
[ motion ]

Scroll-driven, cinematic motion

Sectioned scroll, sticky chapters and reveal choreography — performance-budgeted, never gratuitous.

CASE: Milo Weiler — 7-chapter scroll ↗
[ i18n ]

Multilingual routing

EN · FR · NL with localized SEO baked in.

CASE: Bermuda
[ headless_cms ]

Headless CMS

Ship content edits without a developer in the loop.

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

Commerce & payments

Stripe & Twint checkouts that convert.

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

Lighthouse-tuned, search-ready

Deferred imagery, semantic markup and clean Core Web Vitals — fast for users and for Google.

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

Light & dark, by design

Theme, accent, typeface — every visual decision is a token. Flip one and the whole system follows, live.

Make it yours ↑
02 The stack, in depth

No WordPress.
Personalized code.

No page builders, no plugin sprawl, no theme to fight. Every site is written from scratch in a modern stack I know deep enough to bend. The three tools below do the heavy lifting — scroll, and each one opens itself as the line reaches it.

Every site I build is a Next.js application. The App Router gives me server components, streaming and file-based routing — pages render on the server for speed and SEO, then hydrate only the parts that need to be interactive. One framework, from marketing page to checkout.

  • App Router & React Server Components
  • SSG · ISR · SSR chosen per route
  • next/image — automatic optimisation
  • Native i18n routing — en · fr · nl
  • Route-level code splitting
  • Edge-ready, deployed on Vercel
CASE: Milo Weiler — 55 projects, top Lighthouse ↗

Content lives in Sanity, fully decoupled from the front-end. Editors update products, posts and imagery inside a Studio I tailor to their workflow; I query exactly the shape each page needs with GROQ and render it through Portable Text. No developer in the loop for day-to-day edits.

  • Custom Studio schemas per client
  • GROQ — query only what's rendered
  • Portable Text rich content
  • Draft preview & real-time updates
  • Image pipeline on a global CDN
  • Webhook-triggered rebuilds
CASE: Nu — a CMS-driven clean-beauty catalog ↗

Checkout runs on Stripe. Sessions are created server-side, confirmed by signed webhooks and reconciled before anything ships — secure by construction, never trusting the browser. Multi-currency plus Twint gives Belgian and EU customers the payment methods they actually reach for.

  • Server-side Checkout Sessions
  • Signed-webhook fulfilment
  • Multi-currency pricing
  • Twint & cards for the EU
  • PaymentIntents with SCA
  • Tax & shipping logic
CASE: Nu store — a frictionless buying flow ↗

Every reveal, scroll chapter and hover flourish runs on GSAP. ScrollTrigger pins sections and ties animation to scroll position; timelines sequence the choreography frame-accurately. It's the difference between a site that loads and one that moves — performance-budgeted, never gratuitous.

  • ScrollTrigger — scroll-driven scenes
  • Timelines for sequenced motion
  • Pin & scrub sticky chapters
  • GPU-friendly transforms only
  • Reduced-motion aware
  • 60fps on mid-range mobile
CASE: Milo Weiler — 7-chapter scroll choreography ↗
yolan@ywdesign — zsh
// From scratch, every time

This is what
“no template” looks like.

A site spun up the way I actually work — architecture first, design system second, then shipped. The judgement is human; the speed is the tooling.

Deep-dive the technology
// Plus the supporting cast
RReact 18UI · components
TSTypeScriptTypes · safety
TTailwindStyling · tokens
NNode.jsRuntime · APIs
MMongoDBNoSQL · data
RxReduxState · cart
GQGraphQLTyped queries
VVercelHosting · edge
03 Selected work

Shipped, in production.

Real sites for real clients across Belgium and beyond — multilingual, fast, and built to convert.

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

Nu

A multilingual clean-beauty storefront — calm editorial pacing around a frictionless, CMS-driven buying flow.

04Spiree — Activewear brand · 100% Merino
Activewear brand · 100% Merino

Spiree

An independent sportswear brand site — bold gradient system, Sun & Moon collections, a story-first arc.

04 The philosophy

A power tool.
Mastered,
not enslaved.

I harness AI the way a craftsman harnesses a power tool — for speed and leverage, never to hand over the thinking. The app isn't the work. The judgement is.

01
I own the architecture

AI drafts; I decide structure, trade-offs and the data model. The blueprint is human.

02
Every line ships understood

Nothing reaches production I can't read, refactor and defend. No black boxes.

03
Speed, without losing the why

AI removes the busywork so more time goes to craft, performance and the details that matter.

04
The tool serves the developer

Mastered, not enslaved. The senior engineer stays in the driver's seat — always.

05 How I work

A transparent pipeline.

Five stages, start to ship. The line draws as you scroll — each stage lights up the moment you reach it.

Discovery

Goals, audience, budget — and what success actually means before a line is written.

Architecture

Stack, data model and structure decided up front — the blueprint is human.

Design

A real system you can see early and react to, refined together — not a static mockup.

Build

Hand-coded, AI-accelerated, multilingual and SEO-ready — every line shipped understood.

Ship

Measure, iterate, and I stay on for whatever comes next.

// Contact

Got something
worth building?

From blank file to shipped product. Tell me what you have in mind — I'll tell you how I'd build it.