Use case 01

UMAMI

Trois co-organisateurs sans équipe tech ni budget agence. Brief : un site élégant, réutilisable les années suivantes, livrable avant le 18 avril. Conçu, développé et déployé entièrement avec Claude Code en 10 jours.

1
Client réel
Festival fermentation
10j
Du brief
au live
0
Dépendance technique
client autonome
Festival · Nantes · 3 co-organisateurs
10 jours
du premier message au site live sur umaminantes.com
01
Client · Événementiel · Web

Un site pour
un vrai festival

UMAMI#5 est un festival annuel de la fermentation à Nantes avec marché d’exposants, ateliers, rencontres et banquet le soir. Trois co-organisateurs, pas d’équipe technique, pas de budget agence. Le brief : un site élégant, prêt avant le 18 avril, utilisable les années suivantes sans dépendance externe.

01 Brief reçu → choix du stack (HTML/CSS/JS natif, zéro framework) et de l’hébergement (Cloudflare Workers)
02 Identité visuelle définie avec Claude → palette, typographie, ton éditorial alignés sur l’univers du festival
03 Construction section par section avec Claude Code → v0.1 à v1.8 en 10 jours, itérations validées avec Antoine et Ghita
04 SEO, analytics, favicon, domaine → livraison complète, pas juste un site qui s’affiche
HTML · CSS · JS · Leaflet · ABCMaxiRound
5+8
5 sections snap-scroll · 8 modales interactives
02
Architecture · Contenu · Interactivité

5 sections,
8 modales

Une page unique en snap-scroll. Chaque section correspond à une intention éditoriale distincte. Zéro framework, zéro build tool. HTML sémantique, CSS natif avec variables, JS vanilla. Carte Leaflet interactive pour les infos pratiques.

Section 1
Hero
Affiche de l’illustrateur Arnaud en plein écran. Illustrations cartoon flottantes (animation CSS). Effet typewriter sur le sous-titre.
Section 2
Le festival
Présentation éditoriale sur fond noir. Bubble texte, illustrations cartoon, ton fermentation revendiqué.
Section 3
Programme
Grid 2×2 : marché, ateliers, rencontres, kids. Chaque carte ouvre une modale, livret feuilletable pour les ateliers (10 pages, JS générique réutilisable).
Section 4
Banquet
3 cheffes (Adélie Delajot · Annie Mach · Gaëlle Valin). Portraits cropés depuis photo de groupe via Python PIL. Biographies complètes en modale.
Section 5
Infos pratiques
Split 42/58% : accès et tarifs à gauche, carte Leaflet interactive à droite. Coordonnées GPS exactes, 4 modes d’accès.
Ce que ça révèle
HTML/CSS natif n’a pas de dépendances à mettre à jour, pas de breaking changes, pas de build pipeline à maintenir. Un choix de durabilité, pas une économie de moyens.
Stack · og:image · Snap-scroll
3
arbitrages, chacun avec son rejet et sa conséquence
03
Arbitrages · Trade-offs · Conséquences documentées

Ce qui a été
arbitré

01
Zéro framework vs React / Next.js
React aurait apporté de la structure. Mais pour un festival annuel sans équipe tech, il aurait créé une dépendance permanente : npm à mettre à jour, breaking changes entre éditions, build pipeline à maintenir. HTML/CSS natif vit indépendamment de l’écosystème JS.
Sans ce choix : la mise à jour de l’édition suivante nécessite un dev JS, pas juste du contenu à remplacer.
02
og:image supprimé vs og:image générique
Sans visuel fort en 1200×630px (ratio obligatoire), un og:image générique affiche un grand carré mal cadré dans les résultats Google. C’est contre-productif. Supprimé volontairement jusqu’à avoir un visuel réellement adapté.
Sans ce choix : les résultats Google affichent une image mal cadrée qui dégrade la perception du site.
03
Snap-scroll vs Scroll classique
Le snap-scroll force une hiérarchie éditoriale : chaque section est une étape, une intention, une immersion. Il évite le scroll infini sans structure et donne au site un caractère éditorial cohérent avec l’identité du festival.
Sans ce choix : un scroll libre qui noie les sections dans une page sans respiration ni rythme.
Ce que ça révèle
Sur un projet sans équipe tech permanente, le mauvais stack se paie quand l’édition suivante démarre. Ces trois décisions ont été prises en pensant UMAMI#6, pas UMAMI#5.
umaminantes.com · Cloudflare Workers · GitHub
v1.8
18–19 avril 2026 · Festival ouvert au public
04
Déploiement · SEO · Livraison complète

Livrer, c’est plus
que “ça marche”

Le site est en production sur umaminantes.com. Livré complet : SEO indexé, analytics en place, domaine custom, billetterie branchée. Pas un prototype : un produit prêt pour le public.

Deploy GitHub → Cloudflare Workers, auto-deploy à chaque push, en production en < 2 min
SEO robots.txt · sitemap.xml · schema.org Event · Google Search Console, indexation complète configurée
Analytics Umami Analytics, tracking sans cookie, RGPD-compatible, dashboard live
Billetterie Shotgun, ateliers et banquet branchés, liens vérifiés sur toutes les surfaces (hero, menu, footer)
Ce que ça révèle
SEO, analytics, domaine, billetterie : sans ça, c’est un fichier HTML. Avec ça, c’est un site.
Voir le site →