project· maintenu

Murdeau · E-commerce & Configurateur 3D

Site e-commerce complet et configurateur 3D à trois modes pour le système breveté de récupération d'eau de pluie modulaire : tunnel Stripe, devis pré-remplis et back-office métier (inventaire, commandes, distributeurs).

Contexte

Le site Murdeau existant ne tenait plus, ni la vitrine, ni la mécanique commerciale derrière. Le produit est structurellement complexe, trois modules, une modularité sans limite, trois façons différentes d’arriver à une configuration (par besoin, par volume, par contrainte d’espace), et une équipe qui gérait l’inventaire, les commandes et le réseau de distributeurs à coups de tableurs et d’emails.

Le projet remplace le site par un e-commerce complet et change l’échelle :

• Site vitrine repensé de zéro, pages produit, réalisations, documentation technique, FAQ, contact.
• Configurateur 3D propriétaire à trois portes d’entrée (besoin / volume / contrainte d’espace) qui débouche sur un builder 3D.
• Tunnel e-commerce Stripe complet, du panier au paiement, pour les configurations standards.
• Back-office métier unifié, gestion de l’inventaire, des commandes, des distributeurs et du suivi opérationnel.

Le tout vit sur www.murdeau.bzh.

Le produit, en trois modules

Le système repose sur trois briques, décrites telles quelles sur la page produit de Murdeau :

• Socle 100 L : embase de l’installation (1,21 × 0,41 × 0,24 m)
• Réservoir 500 L : module de stockage principal (1,21 × 0,41 × 1,33 m)
• Réservoir 250 L : variante compacte (1,21 × 0,41 × 0,71 m)

Les réservoirs sont fabriqués en PEHD 8–10 mm, « résistant aux UV, gel (-15 °C) et chaleur (+40 °C) », avec une durée de vie annoncée de plus de 25 ans et une garantie produit de 10 ans, « Breveté & Garanti 10 ans ».

Le configurateur : trois portes d’entrée

Le cœur du projet. Le configurateur ne part pas d’un catalogue à feuilleter, il part du problème du client. Trois modes d’entrée cohabitent selon la façon dont le visiteur pose la question.

Mode 1, par besoin. Le visiteur renseigne la surface de sa toiture, la pluviométrie locale et ses usages. Le configurateur retourne une « capacité recommandée avec justification », pas juste un chiffre, l’explication du chiffre.

Mode 2, par volume cible. Le visiteur sait combien de litres il veut stocker. Le configurateur propose « plusieurs configurations avec des géométries différentes » pour atteindre ce volume.

Mode 3, par contrainte d’espace. Le visiteur donne largeur × hauteur × profondeur disponibles. Le configurateur retourne « des solutions viables classées par capacité ». Si rien ne rentre, il le dit, il ne force pas une configuration invalide.

Puis le builder 3D. Les trois modes convergent vers un builder qui rend la configuration retenue en 3D, calcule le prix, liste les modules et les accessoires, et bascule vers le tunnel d’achat ou vers une demande de devis selon la complexité du projet.

Sous le capot. Le moteur de génération encode les règles physiques du produit : socle 100 L obligatoire en pied de colonne, 1 600 L et 3,90 m maximum par colonne, et toutes les colonnes à la même hauteur, parce que l’eau s’équilibre entre modules connectés. Il explore les dispositions en grille au millimètre près, note chaque candidat sur l’emprise au sol, la hauteur et la simplicité, plafonne le surdimensionnement à 150 % du volume cible, et déduit de la géométrie le nombre de kits de jonction nécessaires.

Tunnel e-commerce avec Stripe

Le configurateur n’est pas une impasse, il finit en commande. Pour les configurations standards, le builder débouche directement sur un panier, calcul des frais de port, et un checkout Stripe complet. Paiement en ligne, génération de la facture, accusé de commande, le client repart avec une référence et une date de livraison estimée.

Pour les projets atypiques (volumes hors gabarit, contraintes d’installation particulières, livraisons vers un installateur plutôt que le client final), le configurateur propose à la place un devis structuré, déjà pré-rempli avec la configuration retenue. La conversation commerciale ne repart pas d’une page blanche, elle reprend là où le configurateur s’est arrêté.

Back-office métier

Côté Murdeau, la plateforme remplace les tableurs et les emails par un back-office unifié :

• Inventaire : stocks par module et par accessoire, alertes de seuil, mouvements liés aux commandes.
• Commandes : vue unique des commandes Stripe, des devis signés, et des statuts de livraison. Les transitions d’état déclenchent les e-mails clients.
• Distributeurs : répertoire des installateurs et revendeurs géolocalisés sur une carte, utilisé pour router chaque prospect vers le distributeur le plus proche géographiquement.
• Suivi opérationnel : dashboard de l’activité (CA, panier moyen, configurations les plus demandées) qui alimente les décisions produit.

C’est la pièce qui transforme un site refait en plateforme métier. Le configurateur attire et qualifie, l’e-commerce encaisse, le back-office opère.

Les autres pages du site

• Réalisations. Galerie d’installations chez de vrais clients.
• Documentation. Plans techniques, FAQ installateurs, pompes compatibles.
• L’Entreprise. L’histoire des brevets, la fabrication bretonne, le réseau d’installateurs.
• FAQ. Les questions que posent 80 % des visiteurs avant le premier appel, extraites des vrais échanges commerciaux.

Stack

• Next.js (App Router) : site, configurateur, back-office
• Supabase : base de données, auth, storage
• Stripe : paiements, facturation, webhooks de commande
• Three.js / React-Three-Fiber : rendu 3D du builder

Résultat

Un site e-commerce complet et autonome, du premier contact au suivi de commande. Le visiteur entre par le besoin, le volume ou la contrainte d’espace, sort avec un panier payé ou un devis pré-rempli. L’équipe Murdeau pilote l’inventaire, les commandes et le réseau de distributeurs depuis une seule interface, sans tableur ni boîte mail dédiée.

www.murdeau.bzh →

Le reste de la carte

1. anchor

   À propos

   Studio indépendant fondé en 2026, une seule personne, l'IA comme levier concret, livraison rapide sans rien lâcher sur l'exécution.

   Horiot Studio est un studio digital indépendant, fondé en 2026. Une seule personne en face, l’IA utilisée comme un vrai levier de production, pas comme un argument, et des projets livrés plus vite sans rien lâcher sur l’exécution ni sur le design.

   Le studio

   Une structure volontairement légère : une personne, une relation directe, pas d’intermédiaires. Chaque projet est traité avec le même niveau d’exigence, du cadrage à la livraison, qu’il s’agisse d’un module sur mesure en deux semaines ou d’une plateforme complète sur plusieurs mois. Selon les projets, je m’entoure d’expertises complémentaires pour mobiliser les bonnes compétences sans alourdir la structure.

   Le parcours

   Développeur et designer depuis plus de 10 ans, j’ai travaillé sur des dizaines de projets digitaux, dont plusieurs années chez Murdeau où j’ai couvert à la fois le développement et le design. J’ai lancé Horiot Studio en 2026 pour porter cette approche en indépendant, tout en continuant à accompagner Murdeau comme partenaire externe.

2. anchor

   Approche

   L'IA comme levier concret, pas comme argument marketing.

   L’IA comme levier

   L’intelligence artificielle n’est pas un argument marketing, c’est une partie concrète de la façon de travailler. Elle permet de produire plus vite, d’explorer plus de solutions et d’ouvrir de nouvelles possibilités pour les projets des clients.

   Concrètement :

   • Exploration de solutions
   • Prototypage rapide
   • Structuration technique
   • Automatisation de tâches
   • Développement d’outils et intégrations

   Comment ça se passe

   01 · Tu m’écris. Un email direct, pas un formulaire. Le problème, la contrainte de temps, le budget même flou.

   02 · On cadre. Un appel pour aligner objectifs, usages et périmètre. Je reformule jusqu’à ce qu’on soit d’accord sur le problème, avant la moindre ligne de code.

   03 · Une proposition, dans un espace privé. Pas un devis PDF : une proposition en ligne soignée, protégée par mot de passe, où tu retrouves le cadrage, le plan et le prix au même endroit. Chaque section a son espace de retours, pour qu’on itère au bon endroit plutôt que dans un fil d’emails. Pour un projet frontend, j’y propose quatre directions de design : tu en choisis une, ou tu mélanges ce qui te parle dans chacune. Pour un projet plus large, souvent une démo, un prototype frontend de ce à quoi le produit final pourrait ressembler. On décide sur du concret, pas sur une description. Cet espace privé est un outil que j’ai construit et que je maintiens : Proposals, avec une démo ouverte pour voir à quoi ça ressemble de ton côté.

   04 · J’implémente jusqu’au live. Le code, puis la copie, ajustés jusqu’à ce que tu sois content. Jusqu’au site en ligne.

   Ce que je développe

   Trois grandes formes, plutôt qu’une liste de services.

   Plateformes & outils métiers. Sites, configurateurs, back-offices, outils internes, pour les marques qui ont besoin d’un système, pas juste d’une page.

   E-commerce sur mesure. Shopify et au-delà : sections, modules, intégrations qui s’insèrent dans une boutique existante au lieu de la remplacer.

   Expériences & lancements. Landings éditoriales, scrollytelling, pages de marque qui portent un moment fort plutôt qu’une fiche produit.

3. anchor

   Clients

   Projets réalisés en collaboration avec des marques et entreprises, avec aussi quelques chantiers déjà en perspective.

   Une sélection de projets réalisés pour des clients, du cadrage à la livraison.

   Chaque projet est traité avec le même niveau d’exigence, peu importe la taille de l’engagement : un module sur mesure en deux semaines et une plateforme complète sur plusieurs mois reçoivent la même attention au détail.

   Aux côtés des projets déjà livrés, quelques refontes et extensions sont aussi en train de se dessiner pour les mois à venir.

4. anchor

   Atelier

   Projets personnels et expérimentations.

   L’atelier est l’espace où je construis pour moi, des outils que j’utilise au quotidien, des expérimentations techniques, des idées qui n’ont pas encore trouvé leur place ailleurs.

   C’est aussi là que je teste des approches avant de les proposer aux clients : une performance radicale sur l’edge, une architecture inhabituelle, un flux de travail qu’il faut prouver avant de vendre.

   Ce qui fonctionne finit par remonter dans le travail client.

5. anchor

   Contact

   Un projet en tête ? Décris-le brièvement, je reviens vers toi sous 24h.

   Un projet en tête ? Décris-le brièvement et je reviens vers toi sous 24 heures.

   Écrire à [email protected].

   Pas de formulaire de contact, un email direct est plus honnête. Mentionne dans ton message :

   • le problème que tu essaies de résoudre
   • la contrainte de temps (si elle existe)
   • le budget approximatif (même très flou)

   Je réponds à tout le monde, même pour dire non. Les réponses arrivent généralement sous 24 heures ouvrées.

6. project

   Murdeau

   Fabricant breton d'un système breveté de récupération d'eau de pluie modulaire. Collaboration longue durée sur leur e-commerce et configurateur 3D, avec de nouveaux chantiers déjà envisagés.

   Murdeau

   Murdeau fabrique en Bretagne, depuis 2009, un système breveté de récupération d’eau de pluie « modulaire & intelligent », des réservoirs aériens empilables, sans terrassement, durables et recyclables. « Pas de terrassement, pas de bitume à enlever », pour reprendre la phrase du site lui-même.

   C’est un produit industriel structurellement complexe : trois modules de base, une modularité sans limite, des configurations qui dépendent de la surface de toiture, du volume d’eau visé, et de l’espace disponible chez le client. Les outils e-commerce généralistes sont inadaptés dès qu’on essaie d’exprimer « plusieurs configurations avec des géométries différentes » pour le même besoin.

   La collaboration

   J’ai travaillé plusieurs années chez Murdeau, en tant que développeur et designer, avant de lancer Horiot Studio. Je continue aujourd’hui à travailler pour eux comme partenaire externe, une relation de confiance construite sur la durée, avec une connaissance profonde du produit et de ses contraintes techniques.

   Prochain chantier envisagé : une webapp en réalité augmentée pour placer une configuration à l’échelle dans son propre jardin, et rendre l’encombrement réel du système tangible avant l’achat.

7. project

   BA111OD

   Marque horlogère indépendante. Collaboration longue durée autour d'un outil interne, d'une expérience de lancement et d'un ensemble Shopify sur mesure.

   BA111OD est une marque horlogère indépendante fondée sur un positionnement fort : des montres mécaniques taillées pour une génération qui refuse les codes classiques de la haute horlogerie.

   Collaboration longue durée, plusieurs chantiers en parallèle, à la fois sur l’interne (un outil de vente utilisé chaque jour par l’équipe commerciale) et l’externe (Shopify, modules éditoriaux, landing de lancement produit).

8. project· maintenu

   BA111OD · App commerciale

   PWA interne sur invitation pour l'équipe BA111OD (catalogue, partenaires, commandes, PDF brandés, agenda salon et statistiques). Posée sur Next.js 15 et Cloudflare Workers.

   Résultat

   L’outil remplace un flux Excel + email + PDF à la main par un seul écran de travail. Le MVP est utilisé quotidiennement par l’équipe ; l’agenda salon, les statistiques, la page profil, le rôle PR et le feedback en équipe se sont greffés au fil des retours. Les ajouts post-PRD viennent de l’usage, ce qui est, honnêtement, le meilleur indicateur qu’on a shippé la bonne première version.

   Contexte

   BA111OD Sales est une Progressive Web App interne sur invitation, utilisée par les équipes BA111OD pour préparer les commandes des détaillants, piloter l’agenda commercial des salons et suivre l’activité. Pas d’inscription libre, équipe restreinte, desktop-first, interface en anglais. Un PRD initial a posé les fondations ; depuis, l’app a continué d’évoluer en suivant l’usage réel de l’équipe.

   Le problème de départ : l’équipe commerciale jonglait avec un catalogue complexe, une liste de partenaires aux tarifs différenciés par pays, et des confirmations de commande produites à la main. Aucun outil du marché ne rentrait dans les contraintes sans compromis sur la personnalisation ou le coût.

   Rôles

   L’app distingue trois rôles, appliqués côté serveur sur chaque route.

   Admin. Accès complet, import du catalogue, gestion des utilisateurs, des partenaires, des commandes, des PDF, de l’agenda, des statistiques.

   Sales. Identique à l’admin sans l’import et sans la gestion d’équipe. C’est le rôle de production quotidien.

   PR. Rôle restreint à l’agenda. Pensé pour les profils relations presse / VIP qui pilotent les créneaux salon sans toucher aux flux commerciaux.

   Ce qui a été développé

   Auth & accès. Login-first, pas d’inscription libre. Toutes les routes sont protégées par rôle, pas de page commerciale exposée publiquement.

   Partenaires de revente. Création, édition, désactivation. Pour chaque partenaire, un pays et un paramétrage tarifaire dédié.

   Import catalogue depuis Shopify. L’admin dépose un export CSV, l’app prévisualise, signale les erreurs et les warnings, puis synchronise. Les SKUs absents du fichier sont désactivés (jamais supprimés), les commandes passées restent intactes.

   Catalogue & fiche produit. Cartes produit avec image, prix payable en CHF et prix retail informatif (devise commutable selon le pays du partenaire). Recherche par SKU ou nom, filtres par chapitre (Chapter 3 à Chapter Δ), ajout direct à la commande. Au clic, la carte flashe « ✓ Added » et la barre de commande pulse avec un badge +N, retour visuel direct sur l’action.

   

   Commandes. Création et édition, historique cherchable, réouverture toujours possible. Une commande peut être amorcée avant qu’un partenaire ne soit attribué, puis complétée plus tard à mesure que les détails se confirment.

   Génération PDF. Récap brandé BA111OD, détails partenaire, lignes, totaux. Téléchargeable et partageable directement depuis l’app (Web Share natif sur mobile), réutilisable depuis l’historique.

   Architecture

   Next.js 15 (App Router) en TypeScript, déployé sur Cloudflare Workers via OpenNext, avec Postgres managé pour les données et stockage objet pour les PDF.

   Sécurité ancrée en base. Les autorisations s’appliquent au plus près des données plutôt qu’au seul niveau applicatif. La sécurité est une règle de base, pas une convention de code.

   Au-delà du PRD

   Le PRD cadrait le MVP. Depuis, l’usage réel de l’équipe a fait émerger un second cercle de fonctionnalités, livrées itérativement.

   Agenda salon. Le module le plus dense des ajouts. Calendrier en vue semaine, création / édition d’événements avec date-picker et time-picker custom, drag-drop pour reprogrammer un créneau, statuts (confirmé, à confirmer, no-show), couleurs par type de rendez-vous avec surcharge par participant et mise en avant visuelle des créneaux à enjeu.

   

   Statistics. Graphiques d’activité avec filtres par type de document. Lecture rapide de l’activité par période et par partenaire.

   Page profil. Photo et nom modifiables, raccourcis vers Admin, Statistics et Feedback (admin uniquement), tout depuis un écran unique.

   

   Feedback en équipe. Un onglet à deux volets, un changelog intégré (l’équipe voit ce qui a changé sans quitter l’app) et un fil de notes partagé pour remonter les retours d’usage.

   Audit de sécurité. Revue interne couvrant code applicatif, déploiement, auth et dépendances, intégrée au cycle de livraison.

9. project· livré

   BA111OD · Shopify

   Ensemble des sections Shopify sur mesure développées pour BA111OD, de la page produit aux modules éditoriaux réutilisables.

   Contexte

   Chez BA111OD, le travail Shopify ne se limite pas à une seule section. Il s’agit d’un ensemble de briques sur mesure pensées pour faire évoluer l’expérience de marque directement dans le thème : page produit, modules éditoriaux, zones interactives.

   Ce qui a été développé

   Un socle Shopify plus cohérent. L’objectif était de sortir des blocs standards pour construire un langage plus aligné avec la marque, plus précis dans le rythme, et plus souple côté édition.

   Des sections pensées pour durer. Chaque module est conçu pour vivre dans l’éditeur Shopify, être réutilisé, déplacé et ajusté sans repartir de zéro.

   Une logique produit + contenu. Le travail ne porte pas seulement sur la fiche produit : il relie aussi les éléments éditoriaux autour de la montre, pour que l’expérience reste homogène d’une page à l’autre.

   Sous-projets Shopify

   • Product section : refonte de la section produit principale, avec galerie, lecture des variantes et contenu enrichi
   • Frontend sections : modules éditoriaux complémentaires pour prolonger l’identité BA111OD dans le thème
   • Hotspots : section interactive permettant d’ancrer des points d’intérêt directement sur une image

   Résultat

   Un ensemble Shopify plus mature, plus éditorial, et surtout plus cohérent, où les différentes sections peuvent fonctionner comme un vrai système plutôt que comme des blocs isolés.

10. project· livré

    BA111OD · Section produit

    Section produit Shopify sur mesure pour BA111OD, une mise en page plus éditoriale, enrichie par les données produit et les metafields.

    Contexte

    La page produit demandait plus qu’un template e-commerce classique. Il fallait mieux présenter la montre, mieux hiérarchiser les informations, et donner à la lecture un rythme plus fidèle à l’univers BA111OD.

    Ce qui a été construit

    Une section produit repensée comme une vraie expérience. La composition articule galerie, panneau produit, variantes, contenu de marque et appels à l’action dans un ensemble plus maîtrisé.

    Une lecture enrichie par les données produit. La section va chercher automatiquement le titre, les images, le prix, les variantes et plusieurs informations issues des metafields pour nourrir la page sans ressaisie.

    Un contenu plus vivant. Spécifications en accordéons, produits liés, disponibilité, options de paiement, vidéo, description et barre CTA mobile : tout est pensé pour garder une page dense mais lisible.

    Ce que ça change

    La page produit n’est plus une simple fiche. Elle devient un espace qui vend mieux la montre, tout en restant administrable depuis Shopify.

11. project· livré

    BA111OD · Sections frontend

    Petites sections Shopify sur mesure pour BA111OD, badges de réassurance et footer de marque pensés pour prolonger l'identité visuelle du site.

    Contexte

    Toutes les sections n’ont pas besoin d’être spectaculaires pour être utiles. Certaines ont un rôle plus discret : rassurer, signer, structurer une page, et prolonger l’identité de marque sans bruit.

    Ce qui a été construit

    Une barre de badges configurable. Un module léger pour faire remonter des messages de confiance, expédition, garantie, Swiss Made, retours, avec contrôle des couleurs, du texte et des espacements.

    ● Badges, code réel

    Desktop Mobile

    Plein écran ↗

    Un footer de marque éditorial. Une section minimale, centrée sur le nom BA111OD, encadrée par des lignes décoratives pour fermer une page avec plus de tenue visuelle.

    ● Brand footer, code réel

    Desktop Mobile

    Plein écran ↗

    Des briques simples à réutiliser. Ces modules sont faits pour s’insérer facilement dans le thème, être ajustés depuis l’éditeur, et renforcer la cohérence générale sans alourdir les pages.

    Résultat

    Des sections frontend discrètes mais utiles, qui donnent plus de soin et de continuité à l’expérience BA111OD dans Shopify.

12. project· livré

    BA111OD · Chapter 4 · Tourbillon T.V.D.

    Expérience de lancement en ligne pour la Chapter 4 · Tourbillon T.V.D. de BA111OD, une page immersive pensée pour révéler la montre, rythmer la découverte et porter l'annonce avec justesse.

    Contexte

    Pour le lancement de la Chapter 4 · Tourbillon T.V.D., l’objectif n’était pas seulement de publier une page produit. Il fallait créer une montée en tension, faire entrer la montre progressivement dans le champ, et donner à l’ensemble une présence plus éditoriale que promotionnelle.

    Ce qui a été développé

    Une expérience de révélation. La page accompagne la découverte au fil du scroll, avec un rythme plus proche d’un chapitre que d’un catalogue. On avance par séquences : matière, détails, calibre, caractère.

    Une page pensée pour la marque. L’ensemble reste sobre, premium et lisible. L’animation soutient le regard au lieu de le distraire, pour laisser la montre et son univers visuel prendre toute la place.

    Un format réellement activable. Le projet a été intégré dans l’écosystème BA111OD pour pouvoir vivre comme une vraie page de lancement, publiable et exploitable par l’équipe.

    Ce qui a été construit

    • Une narration en chapitres au scroll pensée comme une révélation progressive, pour installer la montre avec plus de présence et de tension.
    • Des panneaux éditoriaux plein écran composés pour faire alterner image, respiration et messages clés dans un registre plus premium.
    • Une expérience de lancement pleinement intégrée à l’univers de la marque, aujourd’hui en ligne comme une page signature BA111OD.

    En ligne

    Voir la page live →

    Résultat

    Une landing de lancement désormais en ligne, conçue pour donner plus de présence à la Chapter 4 et transformer la découverte du modèle en expérience de marque.

13. project· livré

    BA111OD · Hotspots

    Section Shopify sur mesure permettant de mettre en avant des produits clés via des zones interactives cliquables sur une image éditoriale.

    Contexte

    Une section Shopify sur mesure pour mettre en valeur certains produits clés dans l’interface de la boutique BA111OD. L’équipe marketing peut placer des hotspots cliquables directement sur une image éditoriale de la montre, chaque hotspot ouvre un tooltip avec un titre, une description et une image optionnelle.

    La démo

    Voici la section telle qu’elle tourne en production BA111OD, intégrée ici avec son vrai HTML, CSS et JS. Aucune reconstitution : le code est extrait tel quel du thème Shopify.

    ● Section Shopify, code réel

    Desktop Mobile

    Plein écran ↗

    Essaie :

    • Clique un + → le tooltip s’ouvre, le bouton pivote vers ×
    • Clique à nouveau, ou Esc, ou le bouton de fermeture → ça referme
    • Bascule Desktop / Mobile dans la barre pour voir la réorganisation responsive : sur mobile, les tooltips passent en bottom sheet plein écran au lieu du tooltip flottant

    Ce qui a été développé

    Section Shopify custom intégrée dans le thème existant, avec un schema qui expose :

    • L’image de fond (desktop + variante mobile en option)
    • La hauteur de la section (en vh, ajustable dans l’éditeur)
    • La couleur d’accent (utilisée pour les bordures, le fond des boutons et le focus ring)
    • La couleur des icônes
    • Des blocs hotspot : chaque hotspot a une position en % (desktop + override mobile), un titre, une description, et une image de tooltip optionnelle

    Le rendu côté front utilise des custom properties CSS (--wd-x, --wd-y, --wd-accent) injectées dans le HTML par Liquid. Le JavaScript est vanilla : event delegation sur la racine, IntersectionObserver pour l’animation d’entrée staggerée, positionnement intelligent du tooltip (prefer below, fall back above) avec fallback pour les bords d’écran.

    Sur mobile (sous 600 px), le tooltip n’est plus un petit flottant : il devient une bottom sheet plein écran avec un overlay sombre. Même composant, même API, comportement différent selon la taille, c’est géré entièrement en CSS + une poignée de branches JS.

    Détails techniques

    • Accessibilité. aria-expanded / aria-hidden / aria-controls sur les paires bouton / tooltip. Fermeture via Esc. Retour de focus sur le bouton d’origine à la fermeture. prefers-reduced-motion désactive l’animation d’entrée et le pulse.
    • Animation d’entrée. Chaque hotspot apparaît 120 ms après le précédent quand la section entre dans le viewport (stagger via IntersectionObserver + CSS variable --wd-enter-delay).
    • Positionnement du tooltip. Desktop : préfère le dessous, bascule au-dessus si pas assez d’espace, pareil horizontalement. Mobile : ignoré, le tooltip passe en bottom sheet.
    • Pas de dépendance. Zéro librairie : CSS + vanilla JS, ~240 lignes de JS au total.

    Stack

    • Shopify : section custom dans le thème
    • Liquid / HTML / CSS / vanilla JS : zéro dépendance front
    • Admin API : configuration des blocs côté admin Shopify

    Résultat

    Une section directement activable depuis l’éditeur de thème, livrée sans impact sur les performances du site existant. L’équipe marketing peut créer une nouvelle page produit éditoriale, ajouter des hotspots, éditer leurs positions et leurs contenus, sans intervention technique.

14. project

    L'atelier des choix

    Cabinet de coaching et de mentoring pour adolescents et jeunes adultes, fondé par Daniela Leone à Neuchâtel. Site éditorial sur mesure, confié à la cliente.

    L’atelier des choix est un cabinet d’accompagnement fondé par Daniela Leone à Neuchâtel. Coaching et mentoring pour adolescents et jeunes adultes, autour d’une même question : « trouver sa place, ses réponses, son élan ».

    Un positionnement humain et éditorial, à l’opposé du registre corporate. Le projet : traduire cette voix dans un site à la fois sobre et incarné, que Daniela puisse faire vivre seule dans le temps.

15. project· livré

    L'atelier des choix · Site éditorial

    Site éditorial d'une page pour le cabinet de coaching de Daniela Leone, pensé comme un manifeste. Astro et un CMS sur le edge Cloudflare, entièrement pilotable par la cliente.

    En ligne sur atelier-des-choix.ch.

    Contexte

    Daniela Leone accompagne des adolescents et de jeunes adultes à Neuchâtel. Son métier est fait d’écoute et de nuance, et son site devait l’être aussi : ni plaquette corporate, ni page de vente agressive, mais un texte qui se lit comme une conversation posée.

    L’enjeu n’était pas la quantité de pages, c’était le ton. Une seule page, pensée comme un manifeste, qui déroule qui elle est, pour qui elle travaille, et comment se passe un accompagnement.

    Le site, un manifeste d’une page

    Tout vit sur une page unique, composée d’une dizaine de chapitres qui s’enchaînent : un hero éditorial, les deux approches (coaching et mentoring), les étapes d’un accompagnement, les bénéfices, un « pour qui », une présentation de Daniela, une section pour les parents, et le contact.

    Le design assume le registre éditorial : titres en Instrument Serif, italiques colorées, larges respirations, une palette douce (crème, gris profond, vert sauge, rose) tirée de l’univers du cabinet. L’objectif visuel, une énergie « magazine » plutôt que « site de prestation ».

    Autonomie éditoriale

    Chaque texte, chaque portrait, et même les quatre couleurs de la palette sont éditables par Daniela depuis une interface d’administration, sans toucher au code. Le contenu passe par un cycle brouillon, aperçu, publication, et un guide en français l’accompagne pas à pas. Le site lui appartient vraiment, elle le fait évoluer seule.

    Stack

    • Astro : rendu serveur du site, composition par chapitres
    • EmDash : CMS, tout le contenu visible vient de l’admin
    • Cloudflare Workers : runtime edge, avec D1 (base) et R2 (médias)

    Résultat

    Un site qui ressemble à son métier : sobre, incarné, sans bruit. Une page unique qui pose une voix, et une cliente autonome pour la faire vivre dans le temps.

    Voir le site →

16. essay

    FAQ · Premier appel

    Les questions que de vrais founders posent en premier appel. Réponses honnêtes, pas de langue de bois.

    Ceci n’est pas une FAQ marketing. Ce sont les questions que de vrais founders m’ont posées dans les dix premières minutes d’un premier appel, et mes vraies réponses. Certaines sont inconfortables. C’est pour ça qu’elles sont là : si tu envisages de travailler avec moi, autant qu’on parte du même endroit.

    Combien de temps avant ta première réponse ?

    Sous 24 heures ouvrées, en général plus vite. Si je suis en deep work sur un projet client, parfois 48. Je réponds toujours, même pour dire non.

    Tu travailles avec combien de clients en parallèle ?

    Deux clients actifs en même temps, maximum. Parfois un troisième en démarrage ou en maintenance légère. Au-delà, la qualité de l’attention s’effondre, je préfère refuser un projet que le faire à moitié.

    Et si je ne sais pas encore exactement ce que je veux ?

    Parfait. Le premier appel sert souvent à reformuler le problème. Beaucoup de clients arrivent avec une solution (« il me faut une appli ») et repartent avec une question (« c’est vraiment ce dont j’ai besoin ? »). C’est la partie la plus utile du travail, et elle est gratuite.

    Comment on sait qu’un projet est « fini » ?

    On le définit ensemble au début, pas à la fin. Chaque engagement commence par un document court qui liste ce qui doit tourner en production pour qu’on dise « livré ». Pas d’ambiguïté, pas de dérive infinie. Si le périmètre évolue en cours de route (ça arrive), on rediscute, mais explicitement, pas en tirant la couverture.

    Qu’est-ce qui se passe si on n’est pas d’accord sur une décision ?

    On en discute jusqu’à ce qu’on comprenne d’où vient le désaccord. Neuf fois sur dix, ça révèle une contrainte qu’on n’avait pas clarifiée. Si on reste en désaccord après ça, tu décides, c’est ton produit. Mais je te dirai si je pense que tu fais une erreur, et je le dirai clairement.

    Tu gardes les droits sur le code ?

    Non. Tout ce que j’écris pour toi t’appartient : dépôt, base de données, secrets, comptes cloud, documentation. Je garde le droit de mentionner le projet dans mon portfolio (comme ici), sauf accord de confidentialité explicite.

    Tu factures comment, à l’heure, au forfait, au projet ?

    Au projet quand le cadrage est clair, ce qui est le cas la plupart du temps. En retainer mensuel pour les collaborations longue durée où le travail est continu mais les contours varient. Je ne facture jamais à l’heure, ça crée de mauvaises incitations des deux côtés (pour moi à étirer, pour toi à micro-optimiser).

    C’est quoi un « bon » client pour toi ?

    Quelqu’un qui sait ce qu’il veut faire, pas forcément comment le faire. Qui peut prendre une décision sans convoquer un comité. Qui est prêt à entendre « non » ou « attends » quand c’est la bonne réponse. Qui comprend qu’un bon produit vient d’une conversation, pas d’un cahier des charges de quarante pages.

    Qu’est-ce que tu refuses de faire ?

    Les projets de plus de trois mois sans livrables intermédiaires. Les engagements où je ne peux pas parler directement à la personne qui décide. Le développement « à la demande » facturé à l’heure sans cadrage. Les refontes cosmétiques sans vrai problème business en dessous.

    Et si je change d’avis en cours de route ?

    Bienvenue dans la vraie vie. On rediscute, on reprioritise, on déplace du scope. Si le changement est majeur, on signe un avenant. C’est normal de changer d’avis, ce qui ne l’est pas, c’est de le découvrir en production.

    Qu’est-ce qui se passe si tu disparais pendant deux semaines ?

    Je ne disparais pas. Si je prends des vacances, tu le sais trois semaines avant. Si une urgence personnelle arrive, je te préviens dans les 24 heures et on ajuste. Tu as toujours un accès direct au dépôt, aux comptes, à l’infrastructure, tu n’es jamais dépendant de moi pour accéder à ton propre produit.

    Tu peux signer un NDA ?

    Oui, tant qu’il est raisonnable. Je préfère les NDA courts et précis à ceux de douze pages. Je ne peux pas signer un NDA qui interdirait de mentionner l’existence du projet après livraison, mais je peux accepter de taire les détails, le nom, les chiffres, les captures.

    ---

    Une question manque ? Écris-moi directement à [email protected], si elle revient souvent, elle finira ici.

17. essay

    Colophon

    L'outillage IA réel derrière le studio. Quels modèles, comment je les pilote, là où l'IA agit et là où je ne la laisse pas seule. La version vérifiable de « l'IA comme levier ».

    La page Approche affirme que l’IA est un levier concret. Voici de quoi le vérifier : l’outillage réel, sans arrondi marketing.

    Les modèles

    Tous les modèles de pointe d’Anthropic et d’OpenAI, selon la tâche, plus des expérimentations avec des modèles ouverts comme Qwen. Pas d’attachement à un modèle en particulier : celui qui fait le mieux le travail du moment.

    Comment je les pilote

    En terminal, là où le travail se fait vraiment : Claude Code, Codex, et le harness Pi. Pas de copier-coller dans une fenêtre de chat. Des agents qui lisent le code, exécutent, et rendent compte.

    L’outillage

    Des skills et des serveurs MCP sur mesure, officiels ou maison. Jamais de skills tiers récupérés sur le web : question de sécurité, pour ne pas exposer un projet client à une injection de prompt. Ce qui tourne ici, je l’ai écrit ou audité.

    Là où l’IA agit

    Brainstorming, recherche, implémentation. Elle accélère l’exploration et écrit du code sous supervision.

    Là où je ne la laisse pas seule

    La validation, le design final, les décisions qui engagent. Et je la challenge : je pousse pour aller plus loin, pas pour livrer plus vite à moindre exigence. L’IA propose, je tranche.

    ---

    Ce site : SvelteKit, Cloudflare, D3-force.

18. project· maintenu

    Oxide APIs · Utility APIs at the speed of light

    Plateforme SaaS de micro-APIs utilitaires compilées en Rust/WebAssembly et déployées sur le réseau edge de Cloudflare. « Utility APIs at the speed of light. »

    Contexte

    Oxide APIs est une plateforme SaaS indépendante proposant des APIs utilitaires aux développeurs, hachage cryptographique, validation de données, génération de codes-barres. La promesse tient en une phrase, reprise du site lui-même : « Utility APIs at the speed of light. »

    Le constat de départ : les alternatives classiques (services cloud traditionnels, librairies serveur) sont soit trop lentes, soit trop chères pour des opérations pourtant basiques. L’enjeu était de concevoir une infrastructure radicalement différente.

    Architecture

    Rust compilé en WebAssembly, déployé sur Cloudflare Workers. Le site revendique des cold starts inférieurs à 5 ms et une exécution « at near-native speed » grâce au pipeline Rust → WASM. Chaque endpoint tourne sur les 300+ points de présence du réseau Cloudflare dans le monde.

    Résultat affiché : « 10–200× cheaper » que les alternatives cloud traditionnelles, à performances égales ou supérieures.

    Les trois toolkits

    Hash & Encryption Toolkit

    Hachage cryptographique et utilitaires de sécurité basiques.

    • POST /v1/hash : bcrypt, Argon2, SHA-256/512
    • POST /v1/hmac : signatures HMAC
    • POST /v1/verify : vérification d’intégrité
    • POST /v1/token : génération de tokens sécurisés
    • GET /v1/health

    Data Validation API

    Validation côté serveur sans fuite d’information côté client.

    • POST /v1/validate/email : syntaxe + détection d’adresses jetables
    • POST /v1/validate/phone : format E.164
    • POST /v1/validate/url
    • POST /v1/validate/card : algorithme de Luhn
    • POST /v1/validate/iban

    Barcode Generator

    Génération de QR codes et codes-barres 1D/2D.

    • POST /v1/qr
    • POST /v1/barcode : EAN-13, UPC-A, Code 39

    Distribution et pricing

    Distribution via RapidAPI Marketplace avec un modèle freemium tiered par toolkit. À titre d’exemple pour le Hash toolkit :

    Plan	Prix	Quota
    Free	0 $	1 K req/mois
    Pro	$5/mois	50 K req/mois
    Ultra	$15/mois	500 K req/mois
    Mega	$50/mois	5 M req/mois

    Avec overages à partir de $0.10/1K requêtes sur les plans bas, descendant à $0.02/1K sur Mega. « Crypto hashing at $0.10/1K requests » est une des phrases d’accroche du site.

    Stack

    • Rust : logique de hachage, validation, génération
    • WebAssembly : cible de compilation, runtime universel
    • Cloudflare Workers : runtime edge, 300+ PoP
    • RapidAPI : distribution, gestion des clés, paiement

    Résultat

    Une plateforme opérationnelle proposant des performances radicalement supérieures aux concurrents à coût équivalent, grâce à l’élimination de l’infrastructure serveur traditionnelle au profit du réseau edge. L’infrastructure se résume à : zéro serveur, zéro warm-up, zéro infrastructure de monitoring, facturé à la requête.

    oxideapis.com →

19. project· maintenu

    Vault Tools · Traitement de fichiers dans le navigateur

    Une suite de 40+ outils de traitement de fichiers, 100 % côté client grâce à WebAssembly. « Convert. Compress. Transform. All in Your Browser. »

    Contexte

    Vault Tools est une suite d’outils de traitement de fichiers qui tourne entièrement dans le navigateur. Le pari, repris tel quel depuis la page d’accueil : « Convert. Compress. Transform. All in Your Browser. » et « 100% client-side processing ».

    L’enjeu de départ : la plupart des convertisseurs de fichiers gratuits en ligne fonctionnent en envoyant vos fichiers sur un serveur tiers, puis en vous renvoyant le résultat. Pour un professionnel, avocat avec des pièces confidentielles, designer avec des maquettes non publiées, développeur avec des données sensibles, ce modèle est inacceptable. Vault Tools prend le contre-pied : vos fichiers ne quittent jamais votre machine.

    L’architecture : côté client, toujours

    WebAssembly comme moteur de traitement. Conversion d’images, fusion de PDF, génération de hash, parsing JSON, tout est compilé en WASM et s’exécute dans le navigateur du visiteur. Aucun backend de traitement. Aucun compte à créer. Aucun fichier téléversé.

    La promesse est architecturale, pas juridique : « Your files stay on your machine » est un fait vérifiable dans l’onglet réseau des DevTools, pas une clause dans des CGU.

    40+ outils, cinq catégories

    Image (12 outils). Convertisseur, compresseur, redimensionneur, lecteur et nettoyeur EXIF, image → base64, transformations, extracteur de palette, générateur de favicon, mockup screenshot frame, SVG → PNG, HEIC → JPG, filigrane.

    PDF (8 outils). Fusion, division, images → PDF, réorganisation de pages, édition de métadonnées, compression, PDF → images, numérotation et filigrane.

    Développeur (10 outils). Générateur de hash (variantes SHA), convertisseur de couleurs, encode/decode URL, générateur et lecteur de QR codes, générateur UUID, décodeur JWT, parseur cron, générateur Lorem Ipsum, convertisseur timestamps.

    Texte et données (11 outils). JSON formatter, conversion CSV ↔ JSON, outils Base64, preview Markdown, HTML ↔ Markdown, diff, testeur regex, conversion YAML/JSON/TOML, XML → JSON, outils d’entités HTML, compteur de mots.

    Fichiers (4 outils). Calcul de checksum, convertisseur TSV/CSV, éditeur CSV, compression et extraction ZIP.

    Public cible

    Le site s’adresse explicitement à trois profils :

    • Les avocats : manipulation de PDF (exhibits, nettoyage de métadonnées, bundles de dépôt) sans téléverser de pièces confidentielles
    • Les designers : préparation d’images, mockups, exports prêts pour la production
    • Les développeurs : conversions de format, hashing, encoding, outils utilitaires du quotidien

    Et plus largement, toute personne ayant besoin d’une transformation de fichier rapide sans avoir à créer un compte.

    Modèle économique

    Gratuit, financé par de la publicité non intrusive. Le site l’annonce clairement : « We use non-intrusive ads to fund development instead of subscriptions or file paywalls. » Pas d’abonnement, pas de limite sur la taille des fichiers, pas de paywall qui bloque les exports.

    Stack

    • WebAssembly : cœur de traitement pour tous les outils
    • Navigateur : environnement d’exécution unique, ni backend de conversion, ni serveur de fichiers
    • Zéro infra de production pour le traitement : seul le site lui-même est hébergé ; les outils tournent chez l’utilisateur

    Pourquoi c’est ici

    Vault Tools est dans l’atelier parce qu’il incarne une position technique que je tiens : le traitement côté client est sous- utilisé. WebAssembly a rendu possibles des usages qu’on envoyait par réflexe sur des serveurs, parfois par habitude, parfois par flemme d’infrastructure, parfois parce que les frameworks serveur-first rendent l’option côté client invisible. Vault Tools est la démonstration qu’on peut faire beaucoup plus dans le navigateur que l’industrie ne le suggère.

    vault-tools.com →

20. project· maintenu

    Cold Star · A small light in a very large dark

    Un jeu incrémental sci-fi pour le navigateur, écrit en Rust et compilé en WebAssembly. « A small light in a very large dark, and the cost of keeping it lit. »

    Petit jeu fini, en accès libre : une invitation à étendre.

    Contexte

    Cold Star est un jeu incrémental minimaliste qui tourne entièrement dans le navigateur. Le pitch tient en une phrase, reprise du dépôt lui-même : « A minimalist sci-fi incremental game about a small light in a very large dark, and the cost of keeping it lit. »

    On se réveille sans énergie dans le noir de l’espace. On ranime un réacteur défaillant, on récupère ce qu’on peut atteindre, on rassemble un équipage, puis on bâtit les systèmes d’une station vivante. Vient ensuite un vaisseau, et le départ vers une galaxie générée procéduralement : des mondes morts et vivants, des choses qui furent jadis comme nous, et la lente découverte de ce qu’on est réellement. « It starts as a single button in the dark. It ends as a galaxy. »

    Le jeu s’inscrit dans la filiation d’A Dark Room (Michael Townsend) : un récit porté par la divulgation progressive de l’interface, presque sans exposition. « The log, the research, the ruins, and the numbers carry the meaning. » L’instrument se réchauffe à mesure qu’on le ranime : sa couleur et sa chaleur sont de l’état de jeu réel, pas de la décoration.

    Architecture

    Rust, compilé en WebAssembly, rendu avec Dioxus. Le projet est un workspace Rust à séparation stricte, pensé pour que la logique ne puisse jamais fuir dans la vue :

    • sim : le moteur de jeu, pur et déterministe, sans aucune I/O ni unsafe.
    • content : les données de jeu validées (biomes, métiers, modules, origines, technologies, équilibrage), en fichiers RON.
    • app : le frontend Dioxus, une vue en lecture seule au-dessus de l’état de la simulation.

    L’invariant central est le déterminisme : advance(n) == n × advance(1). Avancer d’un tick ou de mille produit exactement le même état. C’est ce qui rend possibles les sauvegardes par instantané, les liens de partage encodés en base64, et le rattrapage hors-ligne.

    L’arc de jeu

    Le réacteur est le cœur battant : la charge s’épuise à chaque tick, on l’alimente d’abord à la main, puis via des ingénieurs, puis en arbitrant un budget de puissance.

    L’équipage et l’économie : on affecte l’équipage à des métiers qui s’enchaînent en chaînes de production : une économie en toile, pas du clic frénétique.

    La station se construit par la recherche de technologies et l’assemblage de modules (laboratoires, raffineries) qui consomment de la puissance et produisent ressources ou données.

    L’espace s’ouvre une fois le vaisseau bâti : seize systèmes reliés en topologie, des surfaces planétaires procédurales, des contacts extraterrestres qu’on peut héler, négocier ou affronter : combat de vaisseau avec munitions, drones de réparation, postures et coque à gérer.

    Trois origines aux tonalités distinctes convergent en milieu de partie ; chacune mène à plusieurs fins qui recadrent rétrospectivement tout le parcours.

    Stack

    • Rust (edition 2024) : moteur de simulation, validation du contenu
    • Dioxus : frontend web réactif
    • WebAssembly : cible de compilation, exécution dans le navigateur
    • RON : format de données pour tout le contenu de jeu
    • postcard + base64 : codec de sauvegarde, liens partageables

    Pourquoi c’est ici

    Cold Star est dans l’atelier parce qu’il pousse à l’extrême une conviction technique : une simulation déterministe et pure paie ses dividendes partout. Le même invariant qui garantit la reproductibilité d’un tick rend triviaux la sauvegarde, le partage et le calcul hors-ligne. C’est aussi un terrain où éprouver Rust → WASM sur un produit fini, interactif et stateful, pas une API sans état, mais une boucle de jeu complète.

    Le jeu est feature-complete pour l’arc qu’il dessine, du premier feu gratté jusqu’à une fin méritée. Il est volontairement ouvert à l’extension : contenu, équilibrage, rencontres, polish.

    Le dépôt sur GitHub →

21. project· maintenu

    Proposals · La proposition commerciale comme produit

    Le portail privé où mes prospects reçoivent leur proposition, versionnée, commentable, avec devis à l'écran et en PDF générés depuis la même source. Démo publique, passphrase « atelier ».

    Contexte

    Une proposition commerciale classique, c’est un PDF envoyé en pièce jointe. Il meurt dans une boîte mail : les retours arrivent dans un fil d’emails éclaté, les versions se confondent (proposition_v3_final_OK.pdf), et le prix vit dans un document séparé du cadrage.

    Ce système prend le contre-pied. Chaque prospect reçoit une URL et une passphrase, transmises par des canaux séparés, et retrouve dans un espace privé le cadrage, le plan, le prix et parfois une démo, au même endroit. C’est l’étape 03 de mon approche, et c’est un produit à part entière.

    Un espace privé, réellement privé

    L’accès est protégé par une passphrase propre à chaque proposition, avec un cookie signé côté serveur. Le point important est architectural : tant que l’accès n’est pas déverrouillé, le contenu n’est jamais sérialisé dans la réponse. Ce n’est pas un overlay qui masque une page déjà chargée ; le serveur ne livre rien, et chaque endpoint sensible refait sa propre vérification.

    Des retours ancrés au bon endroit

    La proposition embarque des questions et des zones de notes, et le prospect peut commenter directement une section ou une ligne du devis. Les réponses sont persistées (Cloudflare D1) et pré-remplies à la visite suivante : on peut s’arrêter et reprendre. Chaque soumission me notifie par email, et je relis tout dans un espace d’administration séparé, lui aussi protégé.

    L’itération se fait donc dans la proposition elle-même, pas dans un fil d’emails.

    Versionnée comme du code

    Chaque publication est un instantané explicite du contenu et du prix. Quand un prospect revient après une révision, il voit un bandeau « Mis à jour » et un diff structurel de ce qui a changé. Ses retours restent épinglés à la version qu’il commentait : pas d’ambiguïté sur « de quelle version on parle ».

    Un devis, deux rendus, zéro dérive

    Un seul bloc de pricing par proposition alimente à la fois le rendu riche à l’écran et un devis A4 traditionnel en PDF, tous deux calculés par le même module. Le devis en ligne et le PDF ne peuvent pas diverger, c’est le même calcul. Le PDF est généré au moment de la rédaction puis servi derrière la même protection que le reste. L’espace d’administration convertit ensuite un devis accepté en facture, sur la même numérotation que le reste de l’activité.

    Une proposition peut aussi embarquer une démo protégée : un prototype hébergé ou un lien externe, déverrouillé en même temps que la proposition. On décide sur du concret.

    Stack

    • SvelteKit + Cloudflare Pages : rendu serveur, edge
    • Cloudflare D1 : retours, versions, factures
    • Resend : notifications email
    • Chrome headless : génération des PDF à la rédaction
    • Design tokens par client : chaque proposition reprend l’univers visuel de la marque à qui elle s’adresse

    Essaie-le

    Une proposition de démonstration est ouverte, pour une maison de céramique fictive, Maison Verel : passphrase atelier. Tu y verras la gate, le contenu, les retours ancrés et le devis. Sur cette démo, la soumission des retours est désactivée côté serveur ; l’interface reste entière.

    proposals.horiot.studio/demo →

    Pourquoi c’est ici

    Ce système est dans l’atelier parce qu’il incarne une conviction : l’expérience commerciale fait partie du travail. Le soin qu’un prospect voit dans sa proposition, avant toute signature, est le même que celui qu’il retrouvera dans son projet. Et c’est le cycle complet de l’atelier : un outil construit pour mon propre usage, éprouvé en conditions réelles, chaque proposition que j’envoie passe par lui.