Un back-office simple pour un front très animé
ACF Pro et une vingtaine de blocs maison, blocs natifs volontairement restreints.
2024
Clutch
Développement du thème WordPress Bedrock sur-mesure · Site WordPress Bedrock + thème custom (motion, ACF, AJAX)
Contexte
Clutch, agence créative et stratégique qui travaille avec de grandes marques, avait besoin d’un site vitrine à la hauteur de son catalogue de projets, avec un back-office simple pour l’équipe malgré un front très animé.
J’ai développé le thème sur une architecture Bedrock (Roots) : cœur WordPress isolé, contenu modélisé via ACF Pro (CPT Projets et Clients, taxonomies Expertises, Médias/Secteurs et Industries, une vingtaine de blocs Gutenberg maison, blocs natifs volontairement restreints). Côté front : GSAP et ScrollTrigger pour les animations, Lenis pour le smooth scroll, SplitType pour les titres lettre par lettre, un Web Component pour les lecteurs Vimeo en autoplay au scroll, et une archive projets filtrée et paginée en AJAX.
Livré en juillet 2024. C’est ce projet qui a conduit Clutch à me confier ensuite le développement du jeu-concours Café Grand’Mère pour Jacobs Douwe Egberts.
Objectifs & livrables
Un catalogue de projets filtrable
CPT Projets et Clients, taxonomies croisées, filtrage et pagination en AJAX.
Un motion design soigné
GSAP, ScrollTrigger, Lenis, SplitType, sans sacrifier la vitesse.
Vidéo intégrée proprement
Lecteurs Vimeo en autoplay au scroll, via Intersection Observer.
Sous le capot
WordPress 6.4 sur Bedrock (Composer, .env par environnement, cœur isolé du contenu), thème PHP custom compilé avec Laravel Mix (Tailwind CSS 3, PostCSS). Alpine.js pour les interactions, GSAP, ScrollTrigger, Lenis, SplitType et Swiper pour le motion, filtrage de projets en AJAX (expertises × médias × industries).
AJAX
Un catalogue de projets filtrable en AJAX
Filtrage croisé (expertises, médias, industries) et pagination en AJAX, sans rechargement de page.
GSAP
Motion : GSAP, Lenis et SplitType
GSAP et ScrollTrigger pour les apparitions et le parallax, Lenis pour le smooth scroll, SplitType pour les titres lettre par lettre.
Vimeo API
Vidéo Vimeo en autoplay au scroll
Un Web Component dédié aux lecteurs Vimeo, en autoplay uniquement quand la vidéo entre dans l’écran.
Gutenberg
Gutenberg restreint à une vingtaine de blocs maison
Une vingtaine de blocs ACF maison, blocs natifs volontairement restreints, pour garder la main sur le design.
AJAXCPT
01 / 04
Un catalogue de projets filtrable en AJAX
Problème
Permettre de filtrer un catalogue de projets sur plusieurs taxonomies à la fois, sans recharger la page à chaque clic.
Approche
Les projets sont modélisés en custom post type, avec trois taxonomies croisées (Expertises, Médias/Secteurs, Industries). L’archive charge et pagine les résultats via admin-ajax, avec un load more plutôt qu’une pagination classique.
Un catalogue de projets filtrable en AJAX
GSAPMotion
02 / 04
Motion : GSAP, Lenis et SplitType
Problème
Donner au site le niveau de motion attendu d’une agence créative, sans que ça ralentisse la navigation ni casse l’accessibilité.
Approche
GSAP et ScrollTrigger pilotent les apparitions et les effets de parallax au scroll. Lenis gère le smooth scroll et masque le header au défilement. SplitType découpe les titres lettre par lettre pour les animations de texte, et Swiper porte les carrousels.
Motion : GSAP, Lenis et SplitType
Vimeo APIWeb Components
03 / 04
Vidéo Vimeo en autoplay au scroll
Problème
Intégrer de la vidéo Vimeo sur un site portfolio sans lecture automatique intempestive ni poids inutile hors du champ de vision.
Approche
Un Custom Element vimeo-player, basé sur le SDK officiel @vimeo/player, déclenche la lecture via un Intersection Observer : la vidéo démarre à l’entrée dans l’écran et s’arrête à la sortie, plutôt qu’un autoplay généralisé dès le chargement de la page.
Vidéo Vimeo en autoplay au scroll
GutenbergACF Pro
04 / 04
Gutenberg restreint à une vingtaine de blocs maison
Problème
Laisser l’équipe composer ses pages (brief, manifesto, médias, sliders, grilles logos) sans ouvrir Gutenberg à tous les blocs natifs qui casseraient la charte.
Approche
Une vingtaine de blocs Gutenberg construits avec ACF Pro (titre, brief, media 2/3-1/3, pleine largeur, vidéo Vimeo, manifesto, sliders, grilles de logos), avec une whitelist stricte des types de blocs autorisés. Les groupes de champs sont versionnés en JSON pour rester synchronisés entre environnements.
Gutenberg restreint à une vingtaine de blocs maison
Décisions
Pourquoi ces choix techniques
Oui, c’est ce travail qui a conduit Clutch à me confier ensuite le développement du jeu-concours Café Grand’Mère pour Jacobs Douwe Egberts.
Projets
Autres réalisations.
2026
Näak
Boutique Shopify Plus pour Näak, marque de nutrition et d’hydratation ultra-trail partenaire de l’UTMB® World Series. Refonte produit, abonnements et déploiement multi-marchés.
2026
Slicy
Thème Shopify OS 2.0 écrit from scratch pour Slicy, protections et stickers vélo sur-mesure : configurateur de matching et personnalisation SVG en direct.
2026
GoodBro
Migration WooCommerce vers Shopify pour GoodBro, animalerie en ligne : 760 produits, 37 130 commandes, 1 177 abonnements, zéro email client.
Suite
Un site vitrine très animé, mais simple à administrer ?
Motion soigné côté visiteur, back-office ACF simple côté équipe.