Contexte

Animal Art gère 2 salons d’art avec un catalogue commun d’artistes et d’œuvres, initialement hébergé sur WordPress. L’objectif était de :

• Centraliser la gestion des contenus (artistes, expositions, événements) via Strapi (approche PIM).

• Améliorer les performances (Next.js vs PHP) et réduire les coûts d’hébergement.

• Automatiser les déploiements pour synchroniser les 2 sites.

• Préserver le SEO avec une taxonomie commune et des URLs optimisées.

Challenges Techniques

1. Migration des données :

   • Export des contenus WordPress (JSON) et mapping vers Strapi.

   • Gestion des images haute résolution (œuvres d’art) avec optimisation automatique (Sharp).

2. Architecture multi-sites :

   • Un seul backend Strapi pour alimenter 2 fronts Next.js (Paris, Bruxelles).

   • Taxonomie SEO partagée et contenus localisés (ex: événements par ville).

3. DevOps et hébergement :

   • Déploiement sur Gandi (VPS + stockage objet) avec CI/CD automatisé.

   • Synchronisation des catalogues entre salons via webhooks Strapi.

4. Performance et énergie :

   • Objectif : réduire la consommation énergétique (Next.js vs WordPress/PHP).

   • Score Lighthouse > 80 (mobile/desktop) malgré les images lourdes.

Solutions Apportées

• Migration incrémentale :

  • Scripts Node.js pour nettoyer et importer les données WordPress → Strapi

  • Utilisation de Strapi comme PIM : catalogues centralisés avec champs dynamiques (artistes, œuvres, expositions).

• Frontend Next.js optimisé :

  • Pages statiques (SSG) pour les contenus peu fréquents (biographies d’artistes).

  • Pages dynamiques (SSR) pour les expositions en cours (données Strapi).

  • Lazy loading des images et variants responsifs (Sharp + OVH CDN).

• Automatisation DevOps :

  • Pipeline n8n pour synchroniser les contenus entre Strapi et les 4 sites Next.js.

  • Sauvegardes automatiques (OVH + SFTP) et monitoring des performances.

• SEO et expérience utilisateur :

  • URLs canoniques et balises hreflang pour les versions locales (Paris/Bruxelles).

  • Transitions fluides entre les pages (Framer Motion) pour une navigation immersive.

Résultats

✅ Catalogue unifié : Gestion centralisée des artistes et œuvres pour les 4 salons. ✅ Performances :

• Temps de chargement divisé par 3 (vs WordPress).

• Réduction des coûts :Hébergement Gandi optimisé (-40% vs solution WordPress précédente)

• Automatisation des mises à jour (gain de temps pour l’équipe). ✅ Flexibilité :

• Ajout d’un nouveau salon en < 1 jour (réutilisation du template Next.js).

• Intégration facile de nouveaux médias (vidéos, 3D)

  .

Contexte

Création d'un site web pour une agence de paysage suisse souhaitant présenter ses projets à travers une expérience visuelle immersive et des transitions cinématographiques.

Challenges techniques :

Complexité de l'architecture hybride Server/Client Components pour optimiser les performances. Gestion des images haute résolution fullscreen tout en maintenant un PageSpeed de 95 sur mobile. Développement d'un système de transitions complexes avec morphing d'images entre pages.

Solutions apportées :

Implémentation d'une architecture Next.js 14 hybride séparant données serveur et interactivité client. Optimisation des images Sanity avec variantes responsives et compression automatique. Création d'un mega slider avec compositions variables et navigation gestuelle GSAP Observer.

Résultats :

Site web performant avec animations fluides à 60fps et PageSpeed mobile de 95/100. Expérience utilisateur immersive avec transitions cinématographiques entre pages. Architecture modulaire et maintenable pour faciliter les futurs développements.

Contexte

- Optimisation du site web pour améliorer les performances et la maintenabilité du code.

Challenges techniques :

• Complexité du code due à l’utilisation de plusieurs bibliothèques d’animation.

• Absence de typage statique rendant le code difficile à maintenir.

Solutions apportées :

• Remplacement d'AOS par Framer Motion pour centraliser et simplifier la gestion des animations.

• Migration complète du projet vers TypeScript pour améliorer la robustesse et réduire les erreurs potentielles.

• Refactoring du code pour suivre les meilleures pratiques en termes de performances et de maintenabilité.

Résultats :

• Code plus clair et facile à maintenir pour les futurs développeurs.

• Animations plus performantes et mieux intégrées au design global du site.

• Gain de temps sur les futurs développements grâce à la migration TypeScript.

Challenges techniques :

1. SEO avancé : Améliorer la visibilité en ligne grâce à une refonte technique et structurelle.

2. Refonte graphique : Moderniser l’interface utilisateur pour répondre aux attentes des jeunes professionnels.

3. Organisation du contenu : Mettre en valeur un contenu dense et varié via des onglets interactifs pour une navigation intuitive.

Solutions apportées :

• SEO : Optimisation des performances techniques (lazy loading, Core Web Vitals) et mise en place de balises meta dynamiques pour un meilleur référencement.

• Refonte graphique : Intégration d’un nouveau design avec

  TailwindCSS

  , mettant en avant les bureaux avec des images immersives et des animations légères pour engager les visiteurs.

• Contenu riche et interactif : Développement d’un système d’onglets dynamiques avec

  GSAP pour animer la navigation et fluidifier la mise en scène des informations.

• Focus sur la génération digitale : Création d’un design responsive et ergonomique, adapté à une utilisation sur mobile et tablette.

Technologies utilisées :

• Next.js pour une optimisation SEO et un rendu performant.

• GSAP pour les animations interactives (onglets, transitions visuelles).

• TailwindCSS pour la mise en page responsive et moderne.

Résultats :

• Site modernisé avec une meilleure expérience utilisateur, augmentant l’engagement des jeunes professionnels.

• Amélioration significative du SEO grâce à une structure optimisée et un contenu bien organisé.

• Satisfaction client pour la mise en valeur des bureaux et des outils en ligne, alignée avec leur nouvelle stratégie.

Graphiste : Eléonore Colpin-Lafuma

Challenges techniques :

1. SEO avancé : Structurer le site pour maximiser son référencement naturel (balises, performances, structure multilingue).

2. Slider personnalisé : Traduire un design graphique spécifique en un composant interactif et responsive.

3. Accessibilité et formation : Simplifier l’administration du site pour permettre à la cliente de gérer elle-même le contenu.

Solutions apportées :

• SEO : Mise en place d’une architecture optimisée pour le SEO avec gestion des balises meta dynamiques, Sitemap XML et performances Core Web Vitals (via lazy loading et optimisation des ressources).

• Slider : Développement d’un composant sur-mesure en utilisant

  GSAP pour animer les transitions et garantir une expérience fluide sur desktop et mobile.

• Formation : Création d’une documentation claire et d’une session de formation en direct pour rendre la cliente autonome dans l’administration des contenus via un CMS simplifié.

Technologies utilisées :

• Next.js pour une gestion efficace du rendu côté serveur (SSR).

• GSAP pour les animations du slider.

• TailwindCSS pour un design responsive et structuré.

• i18n (internationalisation) pour gérer le contenu bilingue.

Résultats :

• Site performant avec un SEO optimisé pour les deux langues.

• Satisfaction client grâce à un slider fidèle au design initial et à une prise en main facilitée de l’outil de gestion de contenu.

Challenges techniques :

1. Collecte des données de performances : Intégrer les API Lighthouse pour récupérer des métriques précises, notamment le TTI, pour calculer une estimation fiable de la consommation carbone.

2. Estimation de l’empreinte carbone : Traduire les données techniques en une estimation d’énergie consommée et d’émissions carbone, selon des formules adaptées.

3. Stockage des données : Configurer Firebase pour stocker et organiser les résultats, afin de permettre un suivi historique et des comparaisons.

4. Interface utilisateur performante : Créer une interface intuitive et responsive pour afficher les métriques et résultats, tout en conservant une expérience utilisateur fluide.

Solutions apportées :

• Lighthouse API : Intégration pour extraire les métriques essentielles comme le TTI, avec une gestion optimisée des requêtes pour des analyses rapides.

• Algorithme de calcul carbone : Développement d’une formule d’estimation basée sur le poids des ressources et les métriques Lighthouse pour traduire les données techniques en résultats compréhensibles.

• Firebase : Mise en place d’une base de données centralisée pour stocker les performances et permettre un accès rapide et sécurisé aux résultats.

• Next.js : Développement d’une application performante et optimisée, garantissant un rendu rapide des pages et une expérience utilisateur fluide.

Technologies utilisées :

• Lighthouse API pour la collecte des données de performances.

• Firebase pour le stockage et l’organisation des résultats.

• Next.js pour le développement rapide et optimisé de l’application.

• TailwindCSS pour une interface utilisateur claire et responsive.

Résultats :

• Un outil pratique et performant pour mesurer l’impact carbone des sites web.

• Analyse précise des performances grâce à l’intégration des métriques de Lighthouse.

• Gestion simplifiée des données de suivi grâce à Firebase.

Projet : Développement d’un thème Wordpress sur-mesure pour répondre au besoin d’un site différenciant en adéquation avec la clientèle chic de l’ouest parisien.

Fonction : Intégration, développement front-end & back-end

Enjeux client : présenter les réalisations de façon simple mais très chic pour s’adresser à une population sensible au design.

Mission : 

• Mise en scène basée sur ce que j’ai appelé “le beau livre”, objet familier des salons

• L’image de marque a été travaillée par l’animation d’apparition (Gsap) et transition (Barbajs)

• Mouvements de pages inclinées pour rappeler le mouvement de page papier (home, slider)

• Design du portfolio en deux parties, gauche et droite, comme pour un livre d’image

• Le site a reçu un award de la part de la communauté de designers et développeurs web Awwwards / antoine-laly.

Environnement Technique : PHP-Wordpress, jQuery-Bootstrap, JS: GSAP, Scrollmagic, Barbajs

Domaine : Agence d’architecture

Site : exier-soulas.fr

Performance A sitewebdurable.com/label/marenovation-fr

Challenges techniques :

• Gestion centralisée du contenu : Configurer un CMS partagé avec Contentful pour simplifier la mise à jour et l’administration du contenu par plusieurs utilisateurs.

• Animations immersives : Ajouter des effets de scroll fluides et attrayants pour dynamiser la navigation, sans impacter les performances.

• Localisation des projets : Développer une carte interactive des projets parisiens avec une visualisation intuitive et des informations détaillées au survol.

• Portfolio interactif : Créer une page portfolio élégante avec des filtres dynamiques pour accéder rapidement aux projets pertinents.

Solutions apportées :

• Contentful partagé : Mise en place d’un CMS centralisé pour une gestion efficace des données, avec des champs adaptés aux besoins spécifiques du client.

• Effets de scroll avec Framer Motion et Intersection Observer : Intégration d’animations fluides et responsives pour renforcer l’esthétique tout en optimisant les performances grâce à une gestion fine des déclencheurs d’animation.

• Carte interactive avec Leaflet et Mapbox : Développement d’une carte permettant de localiser les projets, représentés par des vignettes cliquables, avec affichage de photos agrandies au survol. Un rollover sur un projet du listing met en évidence la vignette correspondante sur la carte avec un pourtour rouge.

• Portfolio filtré : Implémentation d’une page portfolio sobre mais sophistiquée, avec des filtres dynamiques pour une expérience utilisateur simplifiée et rapide.

Technologies utilisées :

• Contentful pour la gestion centralisée du contenu.

• Framer Motion et Intersection Observer pour les animations immersives.

• Leaflet et Mapbox pour la localisation interactive des projets.

• TailwindCSS pour un design sobre, responsive et efficace.

Résultats :

• Un site visuellement épuré mais techniquement avancé, répondant aux besoins de mise en valeur des projets de rénovation.

• Une carte interactive intuitive permettant de visualiser les projets parisiens en un coup d’œil, avec une mise en avant des projets sélectionnés.

• Une navigation fluide et engageante grâce aux animations et aux fonctionnalités interactives.

Performance PageSpeed : Page d'accueil Mobile : 99, Bureau : 100

Challenges techniques :

• Hébergement des vidéos : Garantir une diffusion fluide de vidéos volumineuses hébergées chez OVH, tout en optimisant la rapidité de chargement et la bande passante.

• Recherche avancée : Implémenter un moteur de recherche dynamique permettant aux utilisateurs de filtrer efficacement les vidéos par mots-clés.

• Gestion des profils utilisateurs : Mettre en place un système de listes d’envies, connecté à des profils utilisateurs, avec des données stockées de manière sécurisée via Firebase.

Solutions apportées :

• Hébergement OVH optimisé : Configuration pour une gestion fluide des vidéos hébergées, en optimisant le débit et en minimisant les temps de latence.

• Contentful pour la gestion de contenu : Organisation des vidéos et de leurs métadonnées pour une mise à jour rapide et structurée.

• Recherche dynamique : Développement d’un moteur de recherche en temps réel, intégrant des filtres avancés et un affichage instantané des résultats.

• Firebase pour les profils utilisateurs : Gestion des comptes et des listes d’envies avec persistance des données en temps réel, permettant aux utilisateurs de retrouver leurs préférences sur n’importe quel appareil.

Technologies utilisées :

• OVH pour l’hébergement des vidéos.

• Contentful pour la gestion de contenu.

• Firebase pour les listes d’envies et profils utilisateurs.

• JavaScript/Next.js pour la recherche dynamique et l’interface utilisateur.

Résultats :

• Catalogue vidéo performant, avec un chargement rapide malgré le poids des vidéos.

• Expérience utilisateur fluide grâce à une recherche intuitive et des listes d’envies personnalisées.

• Gestion centralisée et évolutive des contenus vidéo via Contentful, facilitant les mises à jour régulières.

Pourquoi ce projet est impactant ?

• Hébergement vidéo optimisé : Ta capacité à gérer des vidéos hébergées sur OVH tout en maintenant des performances élevées démontre ton expertise technique.

• Expérience utilisateur enrichie : La combinaison de fonctionnalités personnalisées et d’une recherche dynamique améliore significativement l’engagement des utilisateurs.

• Architecture évolutive : La gestion du contenu via Contentful et Firebase garantit une solution moderne, scalable et facile à maintenir.

Le fabricant de fenêtres sur mesure adaptées aux bâtiments de style haussmannien a créé une marque attrayante.

Objectif: La start-up, désireuse de profiter du web pour se positionner sur un marché mature, a profité des différentes ressources de WordPress pour construire sa notoriété.

Expérience: Le module de prise de rendez-vous est devenu une ressource indispensable pour les prospects qualifiés.

https://unefenetreaparis.fr/

L'AP-HP, qui regroupe l'ensemble des hôpitaux de la région parisienne, est le leader mondial en terme de volume de données médicales stockées.

Design: La mission était axée sur la performance en terme de recrutement d'ingénieurs au niveau international, à intégrer dans le week-end du Datathon. Une image de startup, des outils simples, la valorisation de partenaires stratégiques tels que le MIT.

La technologie: Le défi consistait à ne travailler que sur le css du thème générique du blog de l'AP-HP et à intégrer des outils gratuits de gestion d'événements de la manière la plus naturelle possible.

Vidéos : Olivier et Pierre Laly

Une maison d'hôte avec une vue imprenable, grandiose.

Le storytelling: Notre recommandation avec l'agence Aarno a été pour valoriser la vue de présenter une vidéo en haut de page. Pour laisser le temps à la vidéo de se charger, j'ai réalisé une animation qui présente le contenu en 3 temps: le déroulé d'un layer vers le bas pour présenter l'image de fond, le contenu, puis l'apparition progressive de la vidéo.

La technologie: Le site a été mis en place sous WordPress 5 et ses nouveaux blocs. Le développement de Full-Stack a été nécessaire pour intégrer les différents scripts d'animation : Barba.js, GSAP.

Logo : Agence Aarno

L'agence de conseil en marketing, référence sur le web en matière de B2B est largement consultée.

Le storytelling

Ma recommandation graphique était de donner la priorité à l'espace.

La narration est basée sur l'effet de l'interstitiel, d'une présence discrète mais répétée de la marque, qui apparaît au chargement des pages.

La technologie

Le site a été mis en place sous WordPress 5 et ses nouveaux blocs. Le développement de Full-Stack a été nécessaire pour intégrer les différents scripts d'animation : Barba.js, GSAP.