PORTFOLIO
Expérimentations et side-projects

Mon laboratoire

Trois maquettes e-commerce complètes, une expérience 3D jouable dans le navigateur et le cas pratique de ma certification. Filtrez par catégorie, ou faites défiler pour tout parcourir.

Maquette pizzeriaEn ligne
Forno Vivo
Site immersif pour une pizzeria artisanale : carte signature, composition de sa pizza, récit des terroirs italiens, réservation de table et commande à emporter dans le même panier. Pensé pour un restaurateur qui vit de son produit et de son histoire.
Voir la maquette
Maquette mode et streetwearEn ligne
Marque streetwear
Boutique d'une marque de streetwear qui vend toute sa collection en ligne : drop en série limitée, vestiaire complet, accessoires, panier et paiement. Mise en scène du produit et compte à rebours sur la pièce signature.
Voir la maquette
Maquette bijouterieEn ligne
Maison de bijouterie
Vitrine et boutique en ligne pour une bijouterie : présentation des collections, fiche pièce détaillée, panier, commande, et interface disponible en plusieurs langues pour une clientèle de passage.
Voir la maquette
Maquette marché et food truckEn ligne
Commerçant de marché
Site pour un commerçant ambulant, dont le premier besoin est qu'on sache où il sera : calendrier des marchés, emplacements, produits de saison et commande à retirer sur place. Le cas le plus difficile, parce que tout y change chaque semaine.
Voir la maquette
Maquette fleuristeEn ligne
Maison de la Tulipe
Vitrine d'une famille hollandaise spécialisée dans la tulipe : tiges à l'unité, bouquets composés, signification des couleurs. Panier intégré, livraison locale ou retrait gratuit, et une offre dédiée aux mariages.
Voir la maquette
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
Cas pratique RNCP 39108Soutenu en jury
PlayOff Amateurs
Projet capstone de la certification RNCP niveau 6, soutenu devant le jury de l'École Cube. Cas pratique imposé : une PME de sept ans qui intègre un Product Builder pour digitaliser la réservation de terrains amateurs, avec inscription des équipes, planning, scores et résultats. L'entreprise est fictive, la méthode et le livrable sont réels.
Voir la présentation
PlayOff Amateurs, plateforme de réservation de terrains amateurs
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 · 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.