// La technologie · en profondeur · 2026

Pas de WordPress.
Juste du code sur mesure.

Pas de page builders, pas de plugins qui s’empilent, pas de thème à dompter. Chaque site est une application bâtie à la main sur une stack moderne que je maîtrise assez pour la plier à mes besoins. Voici exactement ce qui tourne sous le capot — et pourquoi chaque pièce mérite sa place.

La voie du template

WordPress & page builders

  • Des piles de plugins que vous ne contrôlez ni ne comprenez
  • Un balisage alourdi, des Core Web Vitals lents
  • Une surface de sécurité à corriger en permanence
  • Un design enfermé dans le thème de quelqu’un d’autre
Ma façon de construire

Du code sur mesure

  • Chaque ligne écrite, lue et maîtrisée par moi
  • Optimisé pour Lighthouse, rapide par construction
  • Verrouillé par conception — pas de loterie de plugins
  • Un design au pixel près, sans aucun compromis
Nframework · la fondationVercel · 2016 · chaque site tourne dessus

Next.js — SSR & SEO, intégrés.

Chaque site est une application Next.js. Les pages sont rendues côté serveur : le navigateur — et le crawler de Google — reçoivent un HTML complet instantanément, puis seules les parties interactives s’hydratent. Je choisis la stratégie de rendu route par route : statique là où c’est possible, dynamique là où il le faut.

  • App Router & Server Components
  • SSG · ISR · SSR par route
  • Optimisation next/image
  • Routage i18n natif
  • Metadata & données structurées
  • Déployé en edge sur Vercel
render-strategy.ts
Statique (SSG) — rendu une fois au build. Servi en HTML plat depuis l’edge : ce qu’une page peut faire de plus rapide. Pour les pages marketing & contenu.
// what the crawler actually receives
<title>Nu — clean beauty, Antwerp</title>
<meta name="description"...>
<h1>Skincare, distilled.</h1>
LCP 1.1sCLS 0.00entièrement indexablebalises OG
Scms headless · contenuSanity.io · le client le modifie lui-même

Sanity — un tableau de bord conçu autour du client.

Le contenu vit dans un Sanity Studio que je façonne pour chaque client — entièrement découplé du front-end. Les éditeurs mettent à jour produits, articles et visuels dans une interface en temps réel ; j’interroge avec GROQ exactement la forme dont chaque page a besoin. Aucun développeur dans la boucle pour les modifications du quotidien.

Nu Studio· content lakePublié
Contenu
Produits
Journal
Pages
Réglages
Produits · 24
Sérum Renew
48 € · en stock
EN · NL
Nettoyant Calm
32 € · en stock
SPF 30 Quotidien
29 € · stock faible
Baume de Nuit
54 € · en stock
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/…"
  }
]
Ganimation · la couche de mouvementGreenSock (GSAP) · standard du secteur

GSAP — le mouvement sur une timeline.

Chaque révélation, chapitre de scroll et touche au survol tourne sur GSAP. ScrollTrigger lie l’animation à la position de scroll et épingle les sections fixes ; Draggable et MorphSVG rendent les formes vectorielles saisissables et métamorphiques. C’est toute la différence entre un site qui charge et un site qui bouge — calibré sur un budget de performance, jamais gratuit.

  • Scènes ScrollTrigger
  • Timelines séquencées
  • Interactions Draggable
  • Morphing de formes MorphSVG
  • Transforms GPU uniquement
  • Respecte le 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)" }) });
Rbibliothèque ui · composantsCréé chez Facebook (Meta) · 2013

React — le modèle par composants.

Né chez Facebook en 2013, React est la façon dont toute l’interface est construite : de petits morceaux composables d’interface pilotés par l’état. On écrit un composant une fois, on le réutilise partout, et la vue reflète toujours les données. C’est la couche sur laquelle tout le reste se branche.

  • Composants composables
  • Interface déclarative, pilotée par l’état
  • Hooks pour réutiliser la logique
  • Écosystème vaste et éprouvé
App.tsx
└─ <App>
  ├─ <Header>
  ├─ <ProductGrid>
  │  └─ <ProductCard> ×24
  ├─ <Cart>
  └─ <Footer>
3
useState
TSlangage · sûreté des typesMicrosoft · 2012 · le JavaScript qui passe à l’échelle

TypeScript — des erreurs attrapées avant la mise en prod.

Chaque ligne est typée. Le compilateur connaît la forme de vos données, de vos props et de vos réponses d’API — alors des classes entières de bugs sont attrapées dans l’éditeur, pas en production. C’est une documentation qui ne peut pas devenir obsolète et un filet de sécurité qui ne dort jamais.

  • Vérification statique des types
  • Autocomplétion & intellisense dans l’éditeur
  • Des contrats auto-documentés
  • Des refactorings sûrs et sereins
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 — des design tokens, pas des feuilles de style.

Le style se fait dans le balisage avec des classes utilitaires reliées à un design system unique — espacements, couleurs et typographie tous issus de tokens partagés. Le résultat est cohérent par défaut, minuscule en production, et impossible à dériver puisqu’il n’y a aucun fichier CSS orphelin qui pourrit.

  • Utilitaires pilotés par tokens
  • Zéro CSS inutilisé livré
  • Espacements & échelle cohérents
  • Responsive en un seul endroit
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
// Les seconds rôles

Le reste de la boîte à outils.

Tout le reste qui part sur un build typique — choisi pour la même raison : je le connais assez pour le maîtriser.

NoNode.jsRuntime · API
StStripePaiements · Twint
MMongoDBNoSQL · données
RxReduxÉtat · panier
GQGraphQLRequêtes typées
LnLenisScroll fluide
VVercelHébergement · edge
i18i18nEN · FR · NL

Vous voulez cette stack
derrière votre site ?

Du fichier vierge au produit livré — sur les outils exacts ci-dessus. Dites-moi ce que vous avez en tête.