Contexte & Enjeux
L'objectif était de refléter la maturité technique acquise par Gintlemen au fil des années, avec un site plus professionnel et une mise à jour technique complète depuis WordPress vers Nuxt et Directus. Le projet s'appuyait sur un design Figma ainsi que sur une longue phase d'analyse.
J'ai conçu le schéma de base de données, puis développé le projet en grande partie seul, chaque étape étant discutée en interne pour valider les choix, avec l'appui ponctuel de mon senior sur certains aspects du développement.
Frontend
- 01.
Stack Nuxt 4 et Tailwind v4, animations GSAP (compteurs animés, transitions de page, smooth scroll), modèles 3D via Three.js sur chaque page service et la page d'accueil, fluide interactif autour du curseur via WebGL Fluid Enhanced.
- 02.
Thème dynamique par projet : chaque réalisation définit sa propre couleur de fond, de fluide et d'accentuation de texte, avec transition fluide au survol (notamment sur le Logofolio).
- 03.
Système de filtres par tags sur les pages Journal et Réalisations : catégorisation des tags, recherche par nom, combinaison multi-tags pour affiner l'affichage des projets.
- 04.
Page Simulation interactive (sélection de besoins → mise en contact ciblée), page Agence, formulaires validés via Zod/VeeValidate, reCAPTCHA v3, emails via Mailgun.
Backend / Directus
- 01.
Programmation d'articles à date ultérieure avec publication automatique, duplication complète d'un article existant pour accélérer la création de contenu.
- 02.
Intégration de l'IA Claude (Anthropic) directement dans le backoffice : génération de balises SEO, textes alternatifs d'images, réponses contextuelles sur le contenu.
- 03.
Réutilisation des modules Mux et Review développés précédemment, ainsi que du système de live preview et versioning.
Captures du projet
Modèles 3D Three.js optimisés desktop et mobile
Fluide WebGL réactif au curseur, autonome sur mobile
Thématisation dynamique pilotée depuis Directus
Filtrage multi-tags avec recherche par nom
- Le défi
- Optimiser l'intégration de modèles 3D pour desktop et mobile sans sacrifier la performance, tout en gérant le fluide interactif (curseur en desktop, mouvement autonome en mobile) et un système de multi-thématisation piloté depuis Directus, changeant dynamiquement selon le projet consulté.
- Résultat
- Gintlemen dispose désormais d'une vitrine technique à la hauteur de son expertise réelle, capable de convaincre des prospects par la démonstration plutôt que par le discours, tout en donnant à l'équipe une autonomie complète sur la publication de contenu grâce à l'IA intégrée et à la programmation d'articles.