PORTFOLIO
Expérimentations et side-projects

Mon laboratoire

Maquettes e-commerce, outils gratuits pour commerçants, side-projects produit et expérimentations 3D WebGL. Filtrez par catégorie pour voir ce qui vous intéresse, ou faites défiler pour tout parcourir.

Maquette fleuristeEn ligne
Maison de la Tulipe
Vitrine d'une famille hollandaise spécialisée uniquement dans la tulipe : tulipes à la tige, dix bouquets composés, signification des couleurs, chocolats à offrir. Panier intégré, livraison Bordeaux ou retrait gratuit, offre mariages. Pas de client derrière, conçue pour démontrer la qualité du livrable.
Voir la maquette
Aperçu de la maquette fleuriste Maison de la Tulipe
Maquette pizzeriaEn ligne
Pizzeria napolitaine
Site immersif pour une pizzeria artisanale qui vit de son storytelling produit. Carte signature, composez votre pizza, récit des cinq terroirs italiens, réservation de table et commande à emporter dans le même panier. Vapeur 3D WebGL générée par shader maison.
Voir la maquette
Aperçu de la maquette pizzeria Forno Vivo
Maquette streetwearEn ligne
Marque streetwear SENA
Boutique d'une marque streetwear premium qui vend toute sa collection : drop édition limitée, vestiaire complet, accessoires. Hoodie hero rotatif 360°, compte à rebours réel, compteur live de visiteurs, deux vidéos immersives et boutons magnétiques.
Voir la maquette
Aperçu de la maquette streetwear SENA
Outil gratuitEn ligne
Facture auto-entrepreneur
Générateur de factures conforme aux mentions obligatoires 2026 (SIRET, article 293 B du CGI, pénalités L441-10). Sans inscription, données stockées localement dans le navigateur, export PDF via impression A4. Construit pour mon usage, ouvert à tous.
Utiliser l'outil
Aperçu du générateur de facture auto-entrepreneur
Outil gratuitDémo
Scanner de visibilité digitale
À partir d'un SIRET ou d'un nom d'enseigne, l'outil diagnostique la visibilité en ligne d'un commerce : présence dans les recherches, fiche établissement, site web et sa qualité, annuaires métier, score sur 100 avec recommandations. Vidéo de démonstration et code source ouvert.
Voir l'outil
Aperçu du scanner de visibilité digitale
SaaS IAEn conception
Stokia, le SaaS IA fiches produits
Génération automatique de fiches produits par IA à partir d'une simple photo, QR codes intégrés pour le suivi en boutique, gestion d'inventaire centralisée. Cible commerçants et e-commerçants. Maquette en finalisation, intégration IA en cours, supabase + Stripe + Cloudflare au menu.
Bientôt disponible
Templates NotionDisponible
Les OS, systèmes Notion commerçants
Catalogue de systèmes Notion premium pour commerçants et freelances : suivi ventes marketplaces, gestion stocks, fiches produits, comptabilité simplifiée. Disponibles sur la page Templates.
Voir le catalogue
Mini-jeu 3D · WebGLEn ligne
E.T.D Cube, une expérience 3D jouable
Un glaçon E.T.D en lévitation que l'on fait éclater en éclats de glace puis reformer. Maintenez le doigt pour tirer, visez, surveillez la cadence et la température du canon. Construit avec Three.js et React Three Fiber, jouable au doigt sur mobile.
Jouer
Aucun élément dans cette catégorie pour le moment.

Fiche technique · Maquette de démonstration

Maison de la Tulipe

L'idée en deux phrases

Une maquette de site fleuriste, imaginée pour montrer ce que je sais faire. Pas de client derrière : c'est moi qui ai inventé l'enseigne, les produits, les bouquets et le ton du site.

Comment je l'ai conçue

  1. J'ai imaginé l'enseigne. Une famille hollandaise spécialisée uniquement dans la tulipe. Univers, palette, voix éditoriale, tout est fait maison.
  2. J'ai construit la page entière à la main. Pas de framework, pas de générateur. Du HTML, du CSS et un peu de JavaScript, comme un site fait sur mesure.
  3. J'ai ajouté le panier. On choisit ses tulipes à la tige, on compose son bouquet, le panier se met à jour et reste en mémoire entre les pages.
  4. J'ai animé l'apparition. Les sections se révèlent au scroll uniquement quand elles entrent dans l'écran, pour un rendu fluide même sur mobile.
  5. J'ai gardé tout léger. Aucune librairie externe, aucun tracker, juste les polices et le code nécessaire à l'expérience.

Les outils utilisés (et pourquoi)

Claude Code piloté avec agents et skillsPour coder la maquette à mon rythme, sous ma direction, avec contrôle qualité à chaque étape.
HTML + CSS + JavaScript purAucun framework. Trois fichiers, performance maximale, code lisible et maintenable.
localStorage du navigateurLe panier reste mémorisé sur l'appareil de l'utilisateur, sans serveur ni compte.
IntersectionObserver natifAPI du navigateur pour déclencher les animations au moment exact où la section devient visible.

Fiche technique · Maquette de démonstration

Pizzeria napolitaine

L'idée en deux phrases

Une maquette de site pour une pizzeria artisanale imaginaire, taillée pour le storytelling produit. Le but : prouver qu'on peut faire du WebGL et de l'animation premium sans agence ni budget géant.

Comment je l'ai conçue

  1. J'ai dessiné l'expérience. Un récit autour du four à bois, une carte signature, un compositeur de pizza, le tout dans un univers chaleureux et travaillé.
  2. J'ai mis en place le scroll fluide. Un défilement adouci, des sections qui se révèlent au bon moment, sans à-coups.
  3. J'ai créé la vapeur 3D. Une vapeur animée en arrière-plan du héro, générée en temps réel par WebGL avec un shader maison.
  4. J'ai ajouté le compositeur de pizza. Choix de la base, cinq ingrédients maximum, animation des ingrédients qui volent dans la pâte, calcul du prix en direct.
  5. J'ai connecté le panier. Réservation de table et commande à emporter dans le même panier, message clair indiquant qu'il s'agit d'une démo.

Les outils utilisés (et pourquoi)

Claude Code piloté avec agents et skillsPour structurer le code, écrire les shaders et les timelines d'animation sous ma direction.
HTML + CSS + JavaScript purPas de framework. Site léger, rapide à charger, facile à adapter.
GSAP + ScrollTrigger + FlipPour orchestrer toutes les animations au scroll et les transitions fluides entre les sections.
LenisPour adoucir le défilement de la page et donner cette sensation de glisse premium.
Three.js (WebGL)Pour générer la vapeur animée du héro en 3D temps réel, directement dans le navigateur.

Fiche technique · Maquette de démonstration

Marque streetwear SENA

L'idée en deux phrases

Une maquette d'e-shop réalisée pour SENA, une marque streetwear, en vue d'une éventuelle collaboration. Mise en ligne avec l'accord de la marque, pour démontrer ce qu'on peut faire vivre côté produit avec une vue 360°, des vidéos immersives et un univers fort, sans dépendre de Shopify.

Comment je l'ai conçue

  1. J'ai cadré le besoin avec la marque. Identité existante, drop en édition limitée, vestiaire complet, accessoires, ton éditorial direct et urbain. Maquette construite à partir de leur univers, pas inventée.
  2. J'ai construit la vue 360° du hoodie. Quatorze images du produit assemblées dans une rotation contrôlable au doigt sur mobile et à la souris sur ordinateur, avec auto-rotation au repos.
  3. J'ai ajouté le panier complet. Choix de taille, quantité, prix au format français, sauvegarde dans le navigateur, toast de confirmation.
  4. J'ai intégré le décompte temps réel. Compte à rebours du prochain drop, compteur de visiteurs en simulation, deux vidéos d'ambiance en boucle.
  5. J'ai peaufiné les détails. Boutons magnétiques qui suivent légèrement la souris, parallaxes au scroll, fallback automatique si le navigateur est trop ancien.

Les outils utilisés (et pourquoi)

Claude Code piloté avec agents et skillsPour produire le code des animations complexes (360°, magnétiques, parallaxe) sous ma direction.
HTML + CSS + JavaScript purAucun framework lourd, juste le code nécessaire à l'expérience.
GSAP + ScrollTriggerPour les timelines de chargement, les parallaxes et toutes les animations au scroll.
LenisPour le défilement fluide qui donne le côté premium.
localStorage du navigateurLe panier reste mémorisé entre les pages, sans compte ni serveur.

Fiche technique · Outil construit pour mon usage

Facture auto-entrepreneur

L'idée en deux phrases

Un générateur de factures que j'ai construit pour moi, parce que les outils existants étaient soit payants, soit incomplets sur les mentions obligatoires françaises. Ouvert à tous, sans inscription.

Comment je l'ai conçu

  1. J'ai listé les mentions obligatoires. SIRET, article 293 B du CGI (TVA non applicable), pénalités L441-10 (loi de modernisation de l'économie). Rien ne doit manquer.
  2. J'ai dessiné le formulaire. Une page unique, tout est saisi à la chaîne : émetteur, client, lignes de prestation, calcul automatique du total.
  3. J'ai ajouté la mémoire. Les coordonnées de l'émetteur et les clients récurrents sont sauvegardés dans le navigateur, prêts à être réutilisés au prochain devis.
  4. J'ai branché l'export PDF. Impression navigateur en format A4, mise en page propre, prête à être archivée ou envoyée au client.
  5. J'ai gardé l'outil 100 % privé. Tout fonctionne dans le navigateur, aucune donnée n'est envoyée vers un serveur, aucun compte n'est créé.

Les outils utilisés (et pourquoi)

Claude Code piloté avec agents et skillsPour structurer le générateur, vérifier la conformité légale et écrire le code propre.
HTML + CSS + JavaScript purAucun framework. Tout tient dans une page, ça se charge instantanément.
localStorage du navigateurLes données sont sauvegardées sur l'appareil de l'utilisateur, jamais transmises ailleurs.
Impression navigateurPas de librairie PDF externe. La fonction d'impression standard du navigateur génère un PDF propre en A4.

Fiche technique · Outil construit pour mon usage

Scanner de visibilité digitale

L'idée en deux phrases

Un outil que j'ai conçu pour diagnostiquer rapidement la visibilité en ligne d'un commerce, à partir d'un simple numéro SIRET. Pour mon propre usage de prospection, ouvert à tous, code source consultable.

Comment je l'ai conçu

  1. J'ai défini les critères. Six signaux qui comptent vraiment : présence dans les recherches Google, fiche établissement, site web et sa qualité, annuaires métier, réseaux sociaux, contenu indexé.
  2. J'ai branché la base SIRENE. L'API publique de Recherche d'entreprises (data.gouv) renvoie les infos officielles à partir d'un SIRET ou d'un nom d'enseigne.
  3. J'ai construit l'analyse côté serveur. Un petit backend qui interroge les moteurs de recherche en automatique et agrège les signaux trouvés, pour ne pas surcharger le navigateur.
  4. J'ai créé le score sur 100. Une note pondérée selon les six critères, accompagnée de recommandations concrètes pour combler les manques.
  5. J'ai soigné l'interface. Animations au scroll, design responsive, résultats lisibles d'un coup d'oeil, vidéo de démonstration sur la page dédiée.

Les outils utilisés (et pourquoi)

Claude Code piloté avec agents et skillsPour orchestrer frontend, backend et appels API sous ma direction.
React + VitePour l'interface : composants réutilisables, build ultra-rapide, expérience fluide.
Node.js + ExpressUn petit serveur pour interroger les moteurs de recherche et agréger les signaux sans bloquer le navigateur.
PlaywrightPour scanner automatiquement les moteurs de recherche et les annuaires comme le ferait un vrai navigateur.
API Recherche d'entreprises (data.gouv)Source officielle pour récupérer les infos SIRENE/INSEE à partir d'un SIRET ou d'un nom.
GSAP + ScrollTriggerPour les animations au scroll de la page de présentation.

Fiche technique · Expérimentation personnelle

E.T.D Cube

L'idée en deux phrases

Un mini-jeu 3D fait pour moi, en bac à sable, pour explorer le rendu 3D temps réel dans un navigateur. Le but : prouver qu'on peut faire vivre un objet 3D interactif sur n'importe quel téléphone, sans installer d'application.

Comment je l'ai conçu

  1. J'ai imaginé l'expérience. Un glaçon E.T.D en lévitation que l'on fait éclater en éclats de glace, puis qui se reforme tout seul. Maintenir le doigt pour tirer, surveiller la cadence et la température du canon.
  2. J'ai construit la scène 3D. Le cube, son éclairage réaliste, l'arrière-plan blueprint, le tout rendu en temps réel par le navigateur.
  3. J'ai géré la lumière naturelle. Un environnement HDRI (image haute dynamique) pour donner au cube ses reflets et ses contre-jours réalistes.
  4. J'ai prévu les téléphones lents. Une détection automatique du GPU active une version simplifiée si la carte graphique est trop limitée, pour que l'expérience reste fluide partout.
  5. J'ai déployé en statique. Pas de serveur : le jeu se charge en quelques kilo-octets depuis un CDN mondial et tourne 100 % dans le navigateur.

Les outils utilisés (et pourquoi)

Claude Code piloté avec agents et skillsPour structurer le projet 3D, écrire le code des interactions et orchestrer le build sous ma direction.
Next.js (export statique)Pour construire l'application en composants React, puis exporter une version statique qui se charge instantanément.
Three.js + React Three FiberThree.js gère le rendu 3D dans le navigateur, React Three Fiber permet d'écrire la scène en composants React lisibles.
@react-three/dreiBoîte à outils prête à l'emploi pour gérer la caméra, les contrôles, l'environnement et les utilitaires courants en 3D.
detect-gpuPour identifier la puissance graphique de l'appareil et adapter la qualité du rendu sans casser l'expérience.
HDRI Poly HavenCartes d'environnement libres de droits pour un éclairage 3D réaliste, sans tournage ni studio.
Cloudflare PagesHébergement statique mondial, déploiement automatique à chaque modification depuis GitHub.