LinkedIn CV
Use case 05

UMAMI

Voir le site →

Trois co-organisateurs, pas d’équipe tech, pas de budget agence. Brief : un site élégant, réutilisable les années suivantes, livrable avant le 18 avril. Livré 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
Ce que ça révèle
Claude accélère l’exécution. Le PM reste maître d’œuvre : chaque décision (stack, structure, contenu, priorités) est prise par un humain, pas générée. C’est ça l’intégration IA opérationnelle.
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
Zéro framework n’est pas un manque de moyens, c’est un choix de durabilité. Un site HTML/CSS natif n’a pas de dépendances à mettre à jour, pas de breaking changes, pas de build pipeline à maintenir. Le client peut reprendre la main sans formation technique.
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é 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
Chaque décision technique a une conséquence métier. Choisir un stack pour un client, c’est aussi choisir sa capacité à maintenir et faire évoluer le produit sans dépendance. C’est le même raisonnement qu’en product management.
umaminantes.com · Cloudflare Workers · GitHub
Live
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
Un livrable, c’est un produit fonctionnel dans la main de son utilisateur, pas un fichier HTML qui s’ouvre en local. SEO, analytics, domaine, billetterie : ces détails font la différence entre un site qu’on livre et un site qui sert à quelque chose.
Voir le site →