// Développeur & designer web senior · Lyon, FR

Des sites, conçusde zéro —l’IA, c’est l’outil.

Je suis Yolan — un développeur senior qui architecture des sites et boutiques rapides et multilingues, ligne après ligne. L’IA accélère le métier ; elle ne remplace jamais le jugement. Maîtrisée, pas subie.

Voir les réalisations →La philosophie
growth.tsx — ce que rapporte un bon codeen direct
Visiteurs0+0 %
Clics027 % CTR
Profit0▲ livré
Next.jsReactTypeScriptTailwindSanity CMSNode.jsStripeFramer MotionGraphQLVercelHeadlessi18nSEOWeb PerformanceAI-assistedNext.jsReactTypeScriptTailwindSanity CMSNode.jsStripeFramer MotionGraphQLVercelHeadlessi18nSEOWeb PerformanceAI-assisted
01 Ce que j’apporte

Pas un template.
Une boîte à outils, faite main.

Chaque capacité ci-dessous est conçue de zéro et éprouvée sur un projet réel, mis en production. Aucun page builder, aucun boilerplate — juste du code que je maîtrise de bout en bout.

[ design_systems ]

Design systems, des tokens jusqu’en haut

Échelles typographiques, couleurs, espacements, motion et composants — un système cohérent, pas un tas de CSS.

AaAaAaAa
CAS : Spiree — système de dégradés ↗
[ motion ]

Motion cinématique, piloté au scroll

Scroll sectionné, chapitres collants et chorégraphie de révélation — au budget de performance, jamais gratuit.

CAS : Milo Weiler — scroll en 7 chapitres ↗
[ i18n ]

Routage multilingue

EN · FR · NL avec un SEO localisé intégré.

FRENNL
CAS : Bermuda ↗
[ headless_cms ]

CMS headless

Publiez vos modifications de contenu sans développeur dans la boucle.

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

Commerce & paiements

Des paiements Stripe & Twint qui convertissent.

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

Optimisé Lighthouse, prêt pour la recherche

Imagerie différée, balisage sémantique et Core Web Vitals au propre — rapide pour les utilisateurs comme pour Google.

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

Clair & sombre, par conception

Thème, accent, typographie — chaque décision visuelle est un token. Changez-en un et tout le système suit, en direct.

Faites-le vôtre ↑
02 La stack, en profondeur

Pas de WordPress.
Du code personnalisé.

Aucun page builder, aucune prolifération de plugins, aucun thème à dompter. Chaque site est écrit de zéro dans une stack moderne que je connais assez pour la plier. Les trois outils ci-dessous font le gros du travail — faites défiler, et chacun s’ouvre dès que la ligne l’atteint.

Chaque site que je construis est une application Next.js. L’App Router me donne les server components, le streaming et le routage par fichiers — les pages sont rendues côté serveur pour la vitesse et le SEO, puis seules les parties qui doivent être interactives sont hydratées. Un seul framework, de la page marketing au paiement.

  • App Router & React Server Components
  • SSG · ISR · SSR choisis par route
  • next/image — optimisation automatique
  • Routage i18n natif — en · fr · nl
  • Code splitting au niveau des routes
  • Prêt pour l’edge, déployé sur Vercel
CAS : Milo Weiler — 55 projets, Lighthouse au top ↗

Le contenu vit dans Sanity, totalement découplé du front-end. Les éditeurs mettent à jour produits, articles et imagerie dans un Studio que je taille sur mesure pour leur workflow ; j’interroge exactement la forme dont chaque page a besoin avec GROQ et je la rends via Portable Text. Aucun développeur dans la boucle pour les modifications du quotidien.

  • Schémas Studio sur mesure par client
  • GROQ — n’interroger que ce qui est rendu
  • Contenu riche en Portable Text
  • Aperçu des brouillons & mises à jour en temps réel
  • Pipeline d’images sur un CDN global
  • Rebuilds déclenchés par webhook
CAS : Nu — un catalogue clean-beauty piloté par CMS ↗

Le paiement tourne sur Stripe. Les sessions sont créées côté serveur, confirmées par des webhooks signés et réconciliées avant toute expédition — sécurisé par conception, sans jamais faire confiance au navigateur. Le multidevise et Twint donnent aux clients belges et de l’UE les moyens de paiement qu’ils utilisent réellement.

  • Checkout Sessions côté serveur
  • Traitement par webhook signé
  • Tarification multidevise
  • Twint & cartes pour l’UE
  • PaymentIntents avec SCA
  • Logique de TVA & d’expédition
CAS : Nu boutique — un parcours d’achat sans friction ↗

Chaque révélation, chapitre de scroll et fioriture au survol tourne sur GSAP. ScrollTrigger épingle les sections et lie l’animation à la position de scroll ; les timelines séquencent la chorégraphie à l’image près. C’est la différence entre un site qui se charge et un site qui bouge — au budget de performance, jamais gratuit.

  • ScrollTrigger — scènes pilotées au scroll
  • Timelines pour le motion séquencé
  • Pin & scrub des chapitres collants
  • Transforms compatibles GPU uniquement
  • Conscient du reduced-motion
  • 60 fps sur mobile milieu de gamme
CAS : Milo Weiler — chorégraphie de scroll en 7 chapitres ↗
yolan@ywdesign — zsh
// De zéro, à chaque fois

Voilà à quoi ressemble
un « sans template ».

Un site monté comme je travaille vraiment — l’architecture d’abord, le design system ensuite, puis la mise en production. Le jugement est humain ; la vitesse, c’est l’outillage.

Plonger dans la technologie →
// Plus la distribution de soutien
RReact 18UI · composants
TSTypeScriptTypes · sûreté
TTailwindStyling · tokens
NNode.jsRuntime · APIs
MMongoDBNoSQL · données
RxReduxÉtat · panier
GQGraphQLRequêtes typées
VVercelHébergement · edge
03 Réalisations choisies

Livré, en production.

De vrais sites pour de vrais clients, en Belgique et au-delà — multilingues, rapides et conçus pour convertir.

01Nu — E-commerce beauté & bien-être
E-commerce beauté & bien-être

Nu

Une boutique clean-beauty multilingue — un rythme éditorial posé autour d’un parcours d’achat sans friction, piloté par CMS.

Étude de cas →Visiter ↗
02Milo Weiler — Portfolio de photographie
Portfolio de photographie

Milo Weiler

Un portfolio sombre et cinématique découpé en sept chapitres de scroll — 55 projets, navigation de chapitres collante, scores Lighthouse au top.

Étude de cas →Visiter ↗
03Bermuda Events — Agence événementielle · Belgique
Agence événementielle · Belgique

Bermuda Events

Un site de marque premium qui met en scène les productions passées à grande échelle, avec un tunnel de contact conçu pour qualifier les bons leads.

Étude de cas →Visiter ↗
04Spiree — Marque d’activewear · 100 % Merino
Marque d’activewear · 100 % Merino

Spiree

Le site d’une marque de sportswear indépendante — système de dégradés audacieux, collections Sun & Moon, un récit qui prime.

Étude de cas →Visiter ↗
04 La philosophie

Un outil puissant.
Maîtrisé,
pas subi.

J’exploite l’IA comme un artisan exploite un outil électrique — pour la vitesse et l’effet de levier, jamais pour lui céder la réflexion. L’application n’est pas le travail. Le jugement, oui.

01
Je possède l’architecture

L’IA esquisse ; je décide de la structure, des arbitrages et du modèle de données. Le plan est humain.

02
Chaque ligne livrée est comprise

Rien n’atteint la production que je ne puisse lire, refactoriser et défendre. Aucune boîte noire.

03
La vitesse, sans perdre le pourquoi

L’IA élimine le travail répétitif pour laisser plus de temps au métier, à la performance et aux détails qui comptent.

04
L’outil sert le développeur

Maîtrisé, pas subi. L’ingénieur senior reste aux commandes — toujours.

05 Ma façon de travailler

Un pipeline transparent.

Cinq étapes, du départ à la mise en production. La ligne se trace à mesure que vous faites défiler — chaque étape s’allume dès que vous l’atteignez.

Découverte

Objectifs, audience, budget — et ce que signifie vraiment le succès avant qu’une seule ligne soit écrite.

Architecture

Stack, modèle de données et structure décidés en amont — le plan est humain.

Design

Un vrai système que vous voyez tôt et auquel vous réagissez, affiné ensemble — pas une maquette figée.

Construction

Codé à la main, accéléré par l’IA, multilingue et prêt pour le SEO — chaque ligne livrée est comprise.

Mise en production

Mesurer, itérer, et je reste présent pour la suite, quelle qu’elle soit.

// Contact

Un projet
qui mérite d’être construit ?

Du fichier vierge au produit livré. Dites-moi ce que vous avez en tête — je vous dirai comment je le construirais.

Démarrer un projet →WhatsApp
contact@ywdesign.co · +33 7 65 60 14 15 · Lyon, FR