[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-site-arneo":3},{"id":4,"title":5,"body":6,"client":5,"cover":53,"description":57,"draft":58,"extension":59,"gallery":60,"highlight":58,"links":69,"meta":73,"navigation":74,"path":75,"period":76,"role":77,"seo":78,"shortDescription":79,"sitemap":80,"stack":81,"stem":86,"year":87,"__hash__":88},"projectsFr\u002Fprojects\u002Ffr\u002Fsite-arneo.md","Arneo",{"type":7,"value":8,"toc":45},"minimark",[9,14,18,22,25,29,32,35,38,42],[10,11,13],"h2",{"id":12},"contexte","Contexte",[15,16,17],"p",{},"Arneo a refondu le site de son agence, un site éditorial riche à forte identité visuelle. Trois exigences tenaient le projet : des animations poussées, des performances solides et un bon référencement, le tout sur un contenu mis à jour en continu. J'y étais lead développeur front.",[10,19,21],{"id":20},"rôle","Rôle",[15,23,24],{},"Je chapeautais l'équipe front tout en développant avec elle. Le site repose sur un Drupal headless, dont le front Next.js consomme les API. Mon travail s'est concentré sur l'architecture front, autour de deux priorités : la performance et la souplesse laissée aux équipes de contribution.",[10,26,28],{"id":27},"réalisation","Réalisation",[15,30,31],{},"Le front est en Next.js, rendu côté serveur. Sur un site éditorial dont le contenu change en continu, le SSG était exclu : le rendu doit refléter la dernière version à chaque visite, sans rien céder sur la vitesse ni le référencement. Chaque page se construit à partir de blocs définis dans Drupal, qu'un composant unique, le BlockManager, affiche dans l'ordre voulu. Les équipes de contribution composent ainsi leurs pages librement, sans limite de blocs et sans passer par le code.",[15,33,34],{},"La performance repose sur un cache à plusieurs niveaux, du front avec Next.js jusqu'au back avec Drupal. J'ai mis en place tout le système de cache front avec Next.js ; puis, afin d'invalider un contenu précis, j'ai créé une API réservée au back lui permettant de déclencher cette invalidation dès qu'un contenu est modifié en contribution. La donnée s'affiche presque instantanément, sans jamais servir une version périmée. L'enjeu était là : sur un site aussi chargé, avec sa surcouche visuelle et ses librairies tierces, les performances s'effondrent sans le cache.",[15,36,37],{},"L'expérience passe par une direction artistique assumée et par les animations, présentes sur une grande partie des blocs. Des mouvements déclenchés au scroll, des micro-interactions poussées, avec quantité d'éléments qui apparaissent au survol, jusqu'à des SVG animés. Elles donnent au site son rythme, sans jamais en faire trop. Les images se chargent en lazy-loading, un placeholder cédant la place au visuel réel une fois prêt. Le CSS a été privilégié au JavaScript partout où c'était possible, pour alléger les pages et garder une vraie fluidité côté navigateur.",[10,39,41],{"id":40},"résultats","Résultats",[15,43,44],{},"Le site est en ligne depuis mi-2025. Le pari était de tenir des performances élevées malgré une forte charge visuelle et de nombreuses librairies tierces : Lighthouse mesure, sur desktop, 97 en performance, 96 en accessibilité, 92 en bonnes pratiques et 92 en SEO. Le cache les maintient à ce niveau malgré tout ce que la page embarque.",{"title":46,"searchDepth":47,"depth":47,"links":48},"",2,[49,50,51,52],{"id":12,"depth":47,"text":13},{"id":20,"depth":47,"text":21},{"id":27,"depth":47,"text":28},{"id":40,"depth":47,"text":41},{"src":54,"width":55,"height":56},"\u002Fimg\u002FProjects\u002FArneo_Cover.jpg",2560,1440,"Refonte complète du site de l'agence Arneo, en tant que lead développeur front : un site éditorial à forte identité visuelle, rendu côté serveur en Next.js sur un Drupal headless, avec un système de blocs pour la contribution, une stratégie de cache pour les performances et des animations sur une grande partie des pages.",false,"md",[61,63,67],{"src":62,"width":55,"height":56},"\u002Fimg\u002FProjects\u002FArneo_Gallery_Hero.jpg",{"src":64,"width":65,"height":66},"\u002Fimg\u002FProjects\u002FArneo_Gallery_Tile-1.jpg",1600,1200,{"src":68,"width":65,"height":66},"\u002Fimg\u002FProjects\u002FArneo_Gallery_Tile-2.jpg",[70],{"label":71,"href":72},"Site","https:\u002F\u002Farneo.io\u002Ffr",{},true,"\u002Fprojects\u002Ffr\u002Fsite-arneo","2025","Lead Front-end",{"title":5,"description":57},"Refonte du site éditorial de l'agence Arneo en Next.js (SSR) sur un Drupal headless, à fort enjeu graphique et de performance.",{"loc":75},[82,83,84,85],"Next.js","TypeScript","Drupal headless","Storybook","projects\u002Ffr\u002Fsite-arneo",2025,"KmqIQXs7fALXqsIYpwETIR8LkEF_6tTufi3DlwE-xGg"]