Une personne, des produits sur mesure, avec l’IA comme partenaire de réflexion.
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.
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.
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.
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.
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.
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 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 ».
Les trois briques du système, rendues en 3D pour la page produit.
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.
L'entrée du configurateur, trois portes selon la question que se pose le visiteur.
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.
Le builder, point de convergence des trois modes, où la configuration prend forme.
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é.
La fiche produit, prolongement direct du configurateur pour les achats au module.
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.
Le back-office, point unique de pilotage des stocks, des commandes et du réseau de distributeurs.
Les autres pages du site
Réalisations. Galerie d’installations chez de vrais clients.
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.
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).
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.
Le catalogue, point d'entrée quotidien : chapitres filtrables, devise commutable, ajout à la commande en un clic.
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.
L'agenda salon en vue semaine : bascule entre PR et retailer, créneaux modifiables au drag-drop, jour courant mis en valeur.
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.
La page profil, point d'entrée vers l'admin et les outils transverses pour l'équipe interne.
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.
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.
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.
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.
Code HTML / CSS extrait tel quel de la section Shopify en production. Bascule Desktop / Mobile pour voir le comportement responsive.
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.
Code HTML / CSS extrait tel quel de la section Shopify en production. Bascule Desktop / Mobile pour voir le comportement responsive.
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.
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.
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.
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.
Code HTML / CSS / JS extrait tel quel de la section Shopify en production. Clique un hotspot pour ouvrir l'info. Bascule Desktop / Mobile pour voir le comportement responsive.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
