[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"projects-listing":3},[4,93,161,232,293],{"id":5,"title":6,"body":7,"client":6,"cover":57,"description":61,"draft":62,"extension":63,"gallery":64,"highlight":73,"links":74,"meta":78,"navigation":73,"path":79,"period":80,"role":81,"seo":82,"shortDescription":83,"sitemap":84,"stack":85,"stem":90,"year":91,"__hash__":92},"projectsEn\u002Fprojects\u002Fen\u002Femeis.md","Emeis",{"type":8,"value":9,"toc":49},"minimark",[10,15,19,23,26,30,33,36,39,42,46],[11,12,14],"h2",{"id":13},"context","Context",[16,17,18],"p",{},"Emeis is a healthcare group present in more than twenty countries, with over a thousand facilities, from nursing homes to clinics. After rebranding, the group launched country sites to support its international growth, separate from the corporate site. These country sites are where I stepped in: each has its own structure, content and URL, yet all rest on a shared foundation.",[11,20,22],{"id":21},"role","Role",[16,24,25],{},"As front-end lead and primary developer on the project, my core contribution was to rethink the front-end architecture to absorb the multi-theme setup, one Emeis activity mapping to one theme. I decoupled the styleguide from the Drupal structure to make it independent of the parent theme, built the missing components and reworked the existing ones so they hold up across every theme. In parallel, I developed the entire front end of the store locator, in coordination with the back-end developer who built the Drupal module.",[11,27,29],{"id":28},"delivery","Delivery",[16,31,32],{},"The multi-theme architecture is the centerpiece of the project. It follows Drupal's parent\u002Fchild theme principle: a parent theme, Emeis, carries all the components and assets; each child theme depends on it and overrides only what is strictly needed. The whole visual identity rests on CSS variables, which a child theme redefines to apply its own colors, without ever touching the component itself. The groundwork was substantial: inventorying and mapping every variable up front, to build the system on solid foundations.",[16,34,35],{},"JavaScript loading follows the same spirit. A global script checks, through the CSS classes present in the page, which component scripts need to load, then loads them asynchronously through dynamic imports. The goal: cut each page's JS payload to a minimum, on a project where performance and SEO come first.",[16,37,38],{},"The store locator is the most significant piece of application logic. The front end reads the URL parameters to build the filters and fire the API calls: one for the facility listing, paginated, another for the markers on the Google Maps map, with its cluster handling. No framework: on a Drupal site served through Twig, a JavaScript framework would have added an unnecessary extra load.",[16,40,41],{},"The tricky part is the filters, specific to each activity. When users reach the store locator of a given activity, they see only that activity's filters; on the multi-activity store locator, they first pick an activity before getting to its filters. On top of that comes a geographic logic, from country down to city, recentering the map and surfacing only the facilities in the relevant area. That many cases to handle one by one in the code.",[11,43,45],{"id":44},"results","Results",[16,47,48],{},"The first country site is live, and the foundation now serves as the base for rolling out the next ones, country by country. For an editorial site of this scale, performance scores hold up well, and the client is satisfied with the result. The project is still active, with new countries currently opening.",{"title":50,"searchDepth":51,"depth":51,"links":52},"",2,[53,54,55,56],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":44,"depth":51,"text":45},{"src":58,"width":59,"height":60},"\u002Fimg\u002FProjects\u002FEMEIS_Cover.jpg",2560,1440,"Reworked the front-end architecture, as front-end lead and primary developer, of the country sites of a healthcare group present in more than twenty countries: a multi-theme Drupal foundation built on CSS variables, a styleguide decoupled from the parent theme, conditional asynchronous JS loading, and full front-end development of the store locator (Google Maps, cumulative filters by activity and by geographic scope).",false,"md",[65,67,71],{"src":66,"width":59,"height":60},"\u002Fimg\u002FProjects\u002FEMEIS_Gallery_Hero.jpg",{"src":68,"width":69,"height":70},"\u002Fimg\u002FProjects\u002FEMEIS_Gallery_Tile-1.jpg",1600,1200,{"src":72,"width":69,"height":70},"\u002Fimg\u002FProjects\u002FEMEIS_Gallery_Tile-2.jpg",true,[75],{"label":76,"href":77},"Website","https:\u002F\u002Fwww.emeis.fr\u002Ffr",{},"\u002Fprojects\u002Fen\u002Femeis","2025-2026","Lead Front-end",{"title":6,"description":61},"Multi-theme front-end architecture and store locator for a healthcare group's country sites, with strong SEO stakes.",{"loc":79},[86,87,88,89],"Vanilla JS","Twig","Drupal","Storybook","projects\u002Fen\u002Femeis",2025,"ViGdvqZ7T0C2g6nHsXKFCWJ4X4w4OZc8zv8qnU5kBdk",{"id":94,"title":95,"body":96,"client":136,"cover":137,"description":139,"draft":62,"extension":63,"gallery":140,"highlight":62,"links":147,"meta":148,"navigation":73,"path":149,"period":150,"role":81,"seo":151,"shortDescription":152,"sitemap":153,"stack":154,"stem":158,"year":159,"__hash__":160},"projectsEn\u002Fprojects\u002Fen\u002Fjlr-cockpit.md","Cockpit",{"type":8,"value":97,"toc":130},[98,100,103,105,108,110,113,116,118,121,124],[11,99,14],{"id":13},[16,101,102],{},"Jaguar Land Rover was running its sales activity without any centralized tool: every dealership reported its figures by hand, by fax or spreadsheet, with no overall view. The Cockpit project came out of that gap: bring all of this data into a single application to give the teams a clear picture of their sales, leads and after-sales.",[11,104,22],{"id":21},[16,106,107],{},"As Lead Developer, I supported the early scoping of the need before building a Vue 2 POC, an early, testable version that let the client see for themselves the time and coordination gains on the table. The POC won them over, and the project moved to a V1: I led a team of front-end developers who started from the POC, while keeping ownership of the architecture and code reviews. All senior, they gradually took over the development. I later came back on occasion, for major evolutions and to drive the Vue 2 to Vue 3 migration.",[11,109,29],{"id":28},[16,111,112],{},"With the client won over by the application, the requests followed: new dashboards, new data to integrate, year after year. The application ended up covering the whole sales cycle, from lead tracking to vehicle portfolio, through to after-sales and margins. Every dashboard filters down to a fine grain, by region, group, dealership, brand or model, with access rights tailored to each role, from regional manager to after-sales director. Adopted by most French dealerships, the tool was then rolled out across Europe.",[16,114,115],{},"The real challenge was never displaying the data or handling those dozens of dashboards, but designing the layer that feeds them, filters included, to cut screen wait time to a minimum. The Python back end processes millions of rows and needs a few seconds to fetch, crunch and return the data. So the whole job was to absorb that wait on the front end. Preloading content before it appears, controlled transitions from one screen to the next, animated loaders: an interface that keeps the user waiting gracefully rather than staring at a frozen screen.",[11,117,45],{"id":44},[16,119,120],{},"From a simple POC, Cockpit became Jaguar Land Rover's reference reporting tool, adopted both in the offices and in the dealerships, which feed in their own data to keep it alive. Rolled out across Europe, it is still in place and used by JLR today.",[122,123],"hr",{},[16,125,126],{},[127,128,129],"em",{},"The screenshots shown are mockups of the application: all the data displayed (dealerships, figures, metrics) is fictitious.",{"title":50,"searchDepth":51,"depth":51,"links":131},[132,133,134,135],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":44,"depth":51,"text":45},"Jaguar Land Rover",{"src":138,"width":59,"height":60},"\u002Fimg\u002FProjects\u002FJLR_Cover.jpg","Designed the front-end POC of an internal reporting application for Jaguar Land Rover, which grew to equip most French dealerships, then all of Europe. Several dozen filterable dashboards on fresh CRM data, and a Vue 2 to Vue 3 migration.",[141,143,145],{"src":142,"width":59,"height":60},"\u002Fimg\u002FProjects\u002FJLR_Gallery_Hero.jpg",{"src":144,"width":69,"height":70},"\u002Fimg\u002FProjects\u002FJLR_Gallery_Tile-1.jpg",{"src":146,"width":69,"height":70},"\u002Fimg\u002FProjects\u002FJLR_Gallery_Tile-2.jpg",null,{},"\u002Fprojects\u002Fen\u002Fjlr-cockpit","2019-2026",{"title":95,"description":139},"Internal reporting application for Jaguar Land Rover, from POC to Europe-wide rollout.",{"loc":149},[155,156,157,89],"Vue 3","TypeScript","Vite","projects\u002Fen\u002Fjlr-cockpit",2019,"dEqZw1CYlvDBFYNmjA3aeJMF-GleU8ht0XWiG9Vs1m8",{"id":162,"title":163,"body":164,"client":207,"cover":208,"description":210,"draft":62,"extension":63,"gallery":211,"highlight":62,"links":218,"meta":222,"navigation":73,"path":223,"period":224,"role":81,"seo":225,"shortDescription":226,"sitemap":227,"stack":228,"stem":230,"year":159,"__hash__":231},"projectsEn\u002Fprojects\u002Fen\u002Fpaper-club.md","Paper.club",{"type":8,"value":165,"toc":201},[166,168,171,173,176,178,181,184,187,190,192,195],[11,167,14],{"id":13},[16,169,170],{},"Paper.club is a netlinking marketplace: advertisers buy sponsored articles to boost the ranking of their own sites, while publishers sell visibility on theirs. An advertiser browses a directory of sites, each described by its topic, its audiences and its SEO metrics, then orders an article from the publisher of their choice. The platform is a brand of the Ydylle group (Eskimoz), one of the leading European players in the field. Development started in mid-2019.",[11,172,22],{"id":21},[16,174,175],{},"I designed and built the entire front end, as front-end lead and primary developer. On my own at first, then with the help of several developers through the most intense phase up to the V1, before taking the front end back over for maintenance and further work. A back-end lead built the API in parallel throughout the project. When a feature came in without a mockup, my creative background took over: designing the missing screens using nothing but the existing design system, for an interface that stays consistent.",[11,177,29],{"id":28},[16,179,180],{},"The front end covers a broad application: an admin back office, onboarding for new clients, a search engine with cumulative filters to explore the directory, order tracking. Three pieces stand out: the order and payment flow together with the wallet system, the article writing tool, and the Vue 2 to Vue 3 migration.",[16,182,183],{},"The whole ordering mechanism lives in the platform: the advertiser fills a cart, a payment flow handles the transaction, and the application orchestrates the exchanges between advertiser and publisher through to the article going live. Alongside it, every profile has a full wallet, with a transaction history, payment methods and top-ups, across roles with very different rights, from advertiser to publisher and on to the agencies and their consultants.",[16,185,186],{},"The trickiest part is the article writing tool. It covers the whole path, from writing the content, formatting included, through to its validation. Comments are placed directly on the article text, which opens up back-and-forth between advertiser and publisher to refine it passage by passage until the final version.",[16,188,189],{},"The last major stage was the migration from Vue 2 to Vue 3, on an already sizeable production codebase. The project was never put on hold: the migration moved forward on a separate branch, kept in sync with day-to-day changes, while ongoing development continued in Vue 2. A round of client advisory work helped push the big projects back until after the switch, to avoid shipping them twice, once per framework. It was a demanding exercise, between dependencies that had not yet made the jump to Vue 3 and the daily workload to keep up in parallel.",[11,191,45],{"id":44},[16,193,194],{},"Launched in mid-2021, after more than a year of development, the platform was then maintained and expanded over four years. What was meant as a first version turned into a long-term engagement, with trust renewed year after year until 2025. Paper.club is still online today and gives access to more than 120 000 media outlets, one of the largest catalogs on the market.",[16,196,197,200],{},[127,198,199],{},"The screenshots shown are mockups of the application: all the data displayed is fictitious.","\n{.l-page__disclaimer}",{"title":50,"searchDepth":51,"depth":51,"links":202},[203,204,205,206],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":44,"depth":51,"text":45},"Ydylle (Eskimoz)",{"src":209,"width":59,"height":60},"\u002Fimg\u002FProjects\u002FPPC_Cover.jpg","Designed and built the front end, as front-end lead and primary developer, of a leading European SaaS netlinking platform for the Ydylle group (Eskimoz): advertiser\u002Fpublisher marketplace, order and payment flow, wallet, collaborative writing tool. Drove the Vue 2 to Vue 3 migration on a production codebase.",[212,214,216],{"src":213,"width":59,"height":60},"\u002Fimg\u002FProjects\u002FPPC_Gallery_Hero.jpg",{"src":215,"width":69,"height":70},"\u002Fimg\u002FProjects\u002FPPC_Gallery_Tile-1.jpg",{"src":217,"width":69,"height":70},"\u002Fimg\u002FProjects\u002FPPC_Gallery_Tile-2.jpg",[219],{"label":220,"href":221},"Application","https:\u002F\u002Fapp.paper.club\u002F",{},"\u002Fprojects\u002Fen\u002Fpaper-club","2019-2025",{"title":163,"description":210},"SaaS netlinking platform built from scratch and maintained for several years.",{"loc":223},[229,155,156,157],"Vue 2","projects\u002Fen\u002Fpaper-club","4RcQHnCZmpStblrCJ_FARCm7LuS8tLe38NvFX0U5Ayw",{"id":233,"title":234,"body":235,"client":234,"cover":269,"description":271,"draft":62,"extension":63,"gallery":272,"highlight":62,"links":279,"meta":282,"navigation":73,"path":283,"period":284,"role":81,"seo":285,"shortDescription":286,"sitemap":287,"stack":288,"stem":291,"year":91,"__hash__":292},"projectsEn\u002Fprojects\u002Fen\u002Fsite-arneo.md","Arneo",{"type":8,"value":236,"toc":263},[237,239,242,244,247,249,252,255,258,260],[11,238,14],{"id":13},[16,240,241],{},"Arneo rebuilt its agency website, a rich editorial site with a strong visual identity. Three demands drove the project: bold animations, solid performance and good search ranking, all on content that changes continuously. I was front-end lead on it.",[11,243,22],{"id":21},[16,245,246],{},"I led the front-end team while developing alongside it. The site runs on a headless Drupal, whose API the Next.js front end consumes. My work centered on the front-end architecture, around two priorities: performance and the freedom left to content editors.",[11,248,29],{"id":28},[16,250,251],{},"The front end is Next.js, server-rendered. On an editorial site whose content changes constantly, SSG was out: the render has to reflect the latest version on every visit, without giving up any speed or search ranking. Each page is built from blocks defined in Drupal, which a single component, the BlockManager, renders in the chosen order. Content editors compose their pages freely, with no limit on blocks and without touching the code.",[16,253,254],{},"Performance rests on a multi-level cache, from the front end with Next.js to the back end with Drupal. I built the entire front-end cache with Next.js; then, to invalidate a specific piece of content, I created an API reserved for the back end, letting it trigger that invalidation as soon as content is edited. Data shows almost instantly, without ever serving a stale version. That was the stake: on a site this loaded, with its visual layer and its third-party libraries, performance collapses without the cache.",[16,256,257],{},"The experience comes through in a committed art direction and in the animations, present across much of the site. Movements triggered on scroll, refined micro-interactions, with plenty of elements appearing on hover, down to animated SVGs. They give the site its rhythm, without ever overdoing it. Images load lazily, a placeholder giving way to the real visual once it is ready. CSS was favored over JavaScript wherever possible, to keep pages light and preserve real smoothness in the browser.",[11,259,45],{"id":44},[16,261,262],{},"The site has been live since mid-2025. The bet was to hold high performance despite a heavy visual load and many third-party libraries: Lighthouse measures, on desktop, 97 in performance, 96 in accessibility, 92 in best practices and 92 in SEO. The cache keeps them at that level despite everything the page carries.",{"title":50,"searchDepth":51,"depth":51,"links":264},[265,266,267,268],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":44,"depth":51,"text":45},{"src":270,"width":59,"height":60},"\u002Fimg\u002FProjects\u002FArneo_Cover.jpg","Full rebuild of the Arneo agency website, as front-end lead: an editorial site with a strong visual identity, server-rendered in Next.js on a headless Drupal, with a block system for content editors, a caching strategy for performance, and animations across much of the site.",[273,275,277],{"src":274,"width":59,"height":60},"\u002Fimg\u002FProjects\u002FArneo_Gallery_Hero.jpg",{"src":276,"width":69,"height":70},"\u002Fimg\u002FProjects\u002FArneo_Gallery_Tile-1.jpg",{"src":278,"width":69,"height":70},"\u002Fimg\u002FProjects\u002FArneo_Gallery_Tile-2.jpg",[280],{"label":76,"href":281},"https:\u002F\u002Farneo.io\u002Ffr",{},"\u002Fprojects\u002Fen\u002Fsite-arneo","2025",{"title":234,"description":271},"Rebuild of the Arneo agency's editorial site in Next.js (SSR) on a headless Drupal, with strong visual and performance stakes.",{"loc":283},[289,156,290,89],"Next.js","Drupal headless","projects\u002Fen\u002Fsite-arneo","sC8vSGmTQHWl6VoWMOSJw4rifavcxprLKydprfFflb8",{"id":294,"title":295,"body":296,"client":389,"cover":390,"description":392,"draft":73,"extension":63,"gallery":393,"highlight":62,"links":400,"meta":403,"navigation":73,"path":404,"period":147,"role":405,"seo":406,"shortDescription":407,"sitemap":408,"stack":409,"stem":412,"year":413,"__hash__":414},"projectsEn\u002Fprojects\u002Fen\u002Fvalhalla-breitling-aston-martin.md","Valhalla",{"type":8,"value":297,"toc":383},[298,300,303,305,313,315,322,325,338,341,348,350,353],[11,299,14],{"id":13},[16,301,302],{},"Aston Martin and Breitling teamed up on the Valhalla project: a site that lets every buyer of the supercar receive a personalised Breitling watch. On it, the client picks their model, men's or women's, then configures it to their taste. I designed the entire front end of that experience, on a project with demanding standards: high-resolution visuals, smooth navigation, performance, and a flawless result both on screen and in the code.",[11,304,22],{"id":21},[16,306,307,308,312],{},"On this project I owned the front end, from architecture through to production. A back-end lead handled the back office and the synchronisation with the client's CRM in parallel. The configurator, the form and the page transitions without reloads that the creative team wanted all called for a real client-side application. Templating was ruled out early in favour of ",[309,310,311],"strong",{},"Nuxt",", whose server-side rendering gave the best performance without sacrificing client-side fluidity.",[11,314,29],{"id":28},[16,316,317,318,321],{},"The configurator is the centrepiece of the site. The client personalises their watch and sees the preview update in real time, from one combination to the next, ",[309,319,320],{},"with no transition or flicker",". To achieve this, each new image is loaded and decoded in the background before it appears: it only replaces the previous one once it is ready to display. Every combination has its own dedicated visual, resolved from the product references supplied by the client.",[16,323,324],{},"To round out the experience, I built several features:",[326,327,328,332,335],"ul",{},[329,330,331],"li",{},"showing or hiding the interface to view the watch in detail;",[329,333,334],{},"restarting the configuration from scratch;",[329,336,337],{},"switching between straps.",[16,339,340],{},"All of it without scrolling, and fluid, even on mobile.",[16,342,343,344,347],{},"On the performance side, the goal was to keep high-resolution visuals without weighing the site down. I built a Node script that reworks the supplied images and outputs them in WebP and AVIF at several sizes, for mobile as well as desktop, adding up to ",[309,345,346],{},"more than 400 generated visuals",". Mobile responsiveness, not planned at the outset, was added mid-project and refined until the rendering was right, to keep the original experience intact.",[11,349,45],{"id":44},[16,351,352],{},"Performance measured, high-resolution visuals included:",[326,354,355,369,377],{},[329,356,357,360,361,364,365,368],{},[309,358,359],{},"Desktop",": Lighthouse Performance ",[309,362,363],{},"100\u002F100",", LCP ",[309,366,367],{},"0.7s",";",[329,370,371,360,374,368],{},[309,372,373],{},"Mobile",[309,375,376],{},"91\u002F100",[329,378,379,382],{},[309,380,381],{},"CLS of 0"," across the board.",{"title":50,"searchDepth":51,"depth":51,"links":384},[385,386,387,388],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":44,"depth":51,"text":45},"Breitling × Aston Martin",{"src":391,"width":59,"height":60},"\u002Fimg\u002FProjects\u002FValhalla_Cover.jpg","Designed and built the front end of a luxury event site end to end: a watch configurator with live preview, a scroll-free experience tailored to a high-end audience, delivered on a tight timeline. Lighthouse Performance 100\u002F100 desktop (LCP 0.7s) and 91\u002F100 mobile, CLS 0, despite high-resolution visuals.",[394,396,398],{"src":395,"width":59,"height":60},"\u002Fimg\u002FProjects\u002FValhalla_Gallery_Hero.jpg",{"src":397,"width":69,"height":70},"\u002Fimg\u002FProjects\u002FValhalla_Gallery_Tile-1.jpg",{"src":399,"width":69,"height":70},"\u002Fimg\u002FProjects\u002FValhalla_Gallery_Tile-2.jpg",[401],{"label":76,"href":402},"https:\u002F\u002Fvalhalla.breitling.com\u002Ffr",{},"\u002Fprojects\u002Fen\u002Fvalhalla-breitling-aston-martin","Lead Front-end Developer",{"title":295,"description":392},"Event site with a watch configurator for the Breitling × Aston Martin collaboration.",{"loc":404},[311,156,410,411],"Pinia","i18n","projects\u002Fen\u002Fvalhalla-breitling-aston-martin",2026,"s8eG8dkZvW-Qqp9FtLl2Xddx5d8qMbfzEZPWaEHfUhA"]