[{"data":1,"prerenderedAt":249},["ShallowReactive",2],{"site-content":3},{"home":4,"about":97,"contact":160,"projectsTitle":182,"projectsIntro":186,"projects":190},{"hero":5,"highlightsTitle":21,"highlights":25,"approachTitle":38,"approachIntro":42,"approachBullets":51,"metricsTitle":64,"metrics":68},{"eyebrow":6,"title":10,"lead":12,"primaryCtaLabel":16,"primaryCtaHref":20},{"en":7,"fr":8,"sv":9},"Frontend architecture and product delivery","Architecture frontend et livraison produit","Frontend-arkitektur och produktleverans",{"en":11,"fr":11,"sv":11},"Franck Lebas",{"en":13,"fr":14,"sv":15},"Design-trained frontend architect building systems that scale, stay fast, and still feel crafted under product pressure.","Architecte frontend formé au design, je construis des systèmes qui passent à l'échelle, restent rapides et conservent une véritable qualité d'exécution, même sous forte pression produit.","Designutbildad frontend-arkitekt som bygger system som skalar, förblir snabba och fortfarande känns välgjorda under produktpress.",{"en":17,"fr":18,"sv":19},"View selected projects","Voir les projets sélectionnés","Se utvalda projekt","\u002Fprojects",{"en":22,"fr":23,"sv":24},"Current focus","Focus actuel","Nuvarande fokus",[26,30,34],{"en":27,"fr":28,"sv":29},"Design systems and composable component APIs for long-term maintainability.","Design systems et APIs de composants composables pour une maintenabilité à long terme.","Designsystem och komposabla komponent-APIs för långsiktig underhållbarhet.",{"en":31,"fr":32,"sv":33},"SSR\u002FSSG strategy, Core Web Vitals ownership, and measurable SEO outcomes.","Strategie SSR\u002FSSG, pilotage des Core Web Vitals et impact SEO mesurable.","SSR\u002FSSG-strategi, ägandeskap över Core Web Vitals och mätbara SEO-resultat.",{"en":35,"fr":36,"sv":37},"Mentoring teams, code review culture, and architecture standards that scale.","Mentorat d'équipes, culture de code review et standards d'architecture qui passent à l'échelle.","Mentorskap, kodgranskning och arkitekturstandarder som skalar.",{"en":39,"fr":40,"sv":41},"My Approach","Mon approche","Min approach",[43,47],{"en":44,"fr":45,"sv":46},"I design frontend systems that are fast, scalable, and maintainable — without sacrificing the user experience.","Je conçois des systèmes frontend rapides, scalables et maintenables, sans jamais sacrifier l'expérience utilisateur.","Jag designar frontend-system som är snabba, skalbara och underhållbara – utan att kompromissa med användarupplevelsen.",{"en":48,"fr":49,"sv":50},"Trained as a designer, I approach architecture through composable APIs, token-based design systems, and performance-by-default strategies.","Formé au design, j'aborde l'architecture à travers des APIs de composants composables, des design systems basés sur des tokens et une performance pensée par défaut (SSR\u002FSSG, Core Web Vitals, données structurées).","Med en bakgrund som designer närmar jag mig arkitektur genom komposabla komponent-APIs, token-baserade designsystem och prestanda som standard (SSR\u002FSSG, Core Web Vitals, strukturerad data).",[52,56,60],{"en":53,"fr":54,"sv":55},"Build clean abstractions that evolve with the product.","Créer des abstractions claires qui évoluent avec le produit.","Bygga rena abstraktioner som växer med produkten.",{"en":57,"fr":58,"sv":59},"Deliver measurable gains in speed and developer experience.","Délivrer des gains mesurables en performance et en expérience développeur.","Leverera mätbara förbättringar i hastighet och utvecklarupplevelse.",{"en":61,"fr":62,"sv":63},"Craft interfaces that still feel intentional under delivery pressure.","Concevoir des interfaces soignées, même sous forte pression de livraison.","Skapa gränssnitt som fortfarande känns omsorgsfullt utformade, även under tight leveranspress.",{"en":65,"fr":66,"sv":67},"Impact at a glance","Impact en bref","Impact i korthet",[69,76,83,90],{"value":70,"progress":71,"label":72},"500k+",92,{"en":73,"fr":74,"sv":75},"users served on a Vue SaaS platform","utilisateurs servis sur une plateforme SaaS Vue","användare på en Vue-baserad SaaS-plattform",{"value":77,"progress":78,"label":79},"70%",70,{"en":80,"fr":81,"sv":82},"CI\u002FCD build time reduction (Vite + TypeScript migration)","réduction du temps de build CI\u002FCD (migration Vite + TypeScript)","70% minskning av CI\u002FCD-byggtid (Vite + TypeScript-migrering)",{"value":84,"progress":85,"label":86},"50%",50,{"en":87,"fr":88,"sv":89},"FCP\u002FLCP improvement on a national high-traffic platform","amélioration FCP\u002FLCP sur une plateforme nationale à fort trafic","50% förbättring av FCP\u002FLCP på en nationell högbelastad plattform",{"value":91,"progress":92,"label":93},"35%",35,{"en":94,"fr":95,"sv":96},"organic traffic growth via SSR and structured data","croissance du trafic organique via SSR et données structurées","35% organisk trafiktillväxt via SSR och strukturerad data",{"title":98,"intro":102,"philosophyTitle":106,"philosophy":110,"experienceTitle":123,"experiences":127},{"en":99,"fr":100,"sv":101},"About","À propos","Om mig",{"en":103,"fr":104,"sv":105},"I design frontend systems that stay fast, understandable, and evolutive under product pressure. My background in visual communication shapes both API design and UX decisions.","Je conçois des systèmes frontend rapides, lisibles et évolutifs sous pression produit. Ma formation en communication visuelle influence mes choix d'API et d'expérience utilisateur.","Jag bygger frontend-system som förblir snabba, begripliga och utvecklingsbara under produkttryck. Min bakgrund inom visuell kommunikation påverkar både API-design och UX-beslut.",{"en":107,"fr":108,"sv":109},"Architecture philosophy","Philosophie d'architecture","Arkitekturfilosofi",[111,115,119],{"en":112,"fr":113,"sv":114},"Standards first: semantic HTML and native web APIs before unnecessary abstractions.","Standards first: HTML sémantique et APIs web natives avant les abstractions inutiles.","Standarder forst: semantisk HTML och webbens egna API:er fore onodiga abstraktioner.",{"en":116,"fr":117,"sv":118},"Performance by design: rendering strategy, LCP budgets, and bundle ownership from day one.","Performance by design: stratégie de rendu, budget LCP et maîtrise du bundle dès le départ.","Prestanda by design: renderingsstrategi, LCP-budget och kontroll over bundlen fran dag ett.",{"en":120,"fr":121,"sv":122},"Composable systems: design tokens, reusable component APIs, and CMS-driven content workflows.","Systèmes composables: design tokens, composants réutilisables et workflows de contenu pilotés par CMS.","Komponerbara system: design tokens, ateranvandbara komponent-API:er och CMS-styrda innehallsfloden.",{"en":124,"fr":125,"sv":126},"Selected experience","Expérience sélectionnée","Utvald erfarenhet",[128,136,144,152],{"role":129,"company":130,"period":131,"details":132},"Lead Frontend Architect","Betao AB","2022-2026",{"en":133,"fr":134,"sv":135},"Owned the complete Vue 3 frontend architecture for a multi-product SaaS platform (500k+ users), led design-system delivery, and mentored six developers.","Responsable de toute l'architecture frontend Vue 3 pour une plateforme SaaS multi-produits (500k+ utilisateurs), avec pilotage design system et mentorat de six développeurs.","Ansvarade for hela Vue 3-arkitekturen for en SaaS-plattform med flera produkter (500k+ anvandare), byggde designsystem och coachade sex utvecklare.",{"role":137,"company":138,"period":139,"details":140},"Senior React Developer","FDJ","2019-2020",{"en":141,"fr":142,"sv":143},"Led React architecture on a national lottery platform serving millions of users, with major Core Web Vitals gains.","Pilotage de l'architecture React sur la plateforme nationale FDJ avec des gains significatifs sur les Core Web Vitals.","Ledde React-arkitekturen for den nationella lotteriplattformen FDJ med tydliga forbattringar av Core Web Vitals.",{"role":145,"company":146,"period":147,"details":148},"Lead Frontend Developer & Fullstack Engineer","Inovalia","2017-2019",{"en":149,"fr":150,"sv":151},"Early Next.js adoption for B2B SaaS with real-time collaboration and SSR-first architecture.","Adoption précurseur de Next.js pour un SaaS B2B avec collaboration temps réel et architecture SSR.","Tidig adoption av Next.js for B2B-SaaS med realtidssamarbete och SSR-forst-arkitektur.",{"role":153,"company":154,"period":155,"details":156},"Founder & Full Stack Developer","Desire Labs","2009-2020",{"en":157,"fr":158,"sv":159},"Founded and ran an independent web agency, shipping 50+ projects with end-to-end product ownership.","Fondateur d'une agence web indépendante avec plus de 50 projets livrés en responsabilité complète.","Grundade och drev en oberoende webbyra med over 50 levererade projekt och helhetsansvar.",{"title":161,"intro":165,"mailtoSubject":169,"mailtoBody":173,"calendly":177,"email":178,"phone":179,"linkedin":180,"github":181},{"en":162,"fr":163,"sv":164},"Get in touch","Contactez-moi","Kontakta mig",{"en":166,"fr":167,"sv":168},"For architecture consulting or senior frontend roles, book a call or send me an email.","Pour des missions d'architecture ou des rôles senior frontend, réservez un appel ou envoyez-moi un email.","För arkitekturuppdrag eller seniora frontend-roller, boka ett samtal eller skicka ett e-postmeddelande.",{"en":170,"fr":171,"sv":172},"Project inquiry from francklebas.com","Prise de contact depuis francklebas.com","Projektforfragan fran francklebas.com",{"en":174,"fr":175,"sv":176},"Hi Franck,%0D%0A%0D%0AName:%0D%0ACompany:%0D%0AContext:%0D%0ATimeline:%0D%0A%0D%0ABest regards,","Bonjour Franck,%0D%0A%0D%0ANom:%0D%0AEntreprise:%0D%0AContexte:%0D%0APlanning:%0D%0A%0D%0ACordialement,","Hej Franck,%0D%0A%0D%0ANamn:%0D%0AForetag:%0D%0ABakgrund:%0D%0ATidsplan:%0D%0A%0D%0AVanliga halsningar,","https:\u002F\u002Fcalendly.com\u002Ffrancklebas-ik\u002F30min","francklebas@ik.me","+46 (0)735 103 291","https:\u002F\u002Flinkedin.com\u002Fin\u002Ffrancklebas","https:\u002F\u002Fgithub.com\u002Ffrancklebas",{"en":183,"fr":184,"sv":185},"Selected projects","Projets sélectionnés","Utvalda projekt",{"en":187,"fr":188,"sv":189},"A manual shortlist of repositories representing product architecture, frontend craft, and end-to-end ownership.","Une short-list manuelle de repositories représentant architecture produit, qualité frontend et responsabilité end-to-end.","En manuell shortlist av repositories som visar produktarkitektur, frontend-kvalitet och end-to-end-ansvar.",[191,212,230],{"name":192,"repoUrl":193,"previewImage":194,"role":195,"stack":197,"useCase":204,"impact":208},"NextSwift Pro - SaaS Boilerplate","https:\u002F\u002Fgithub.com\u002Ffrancklebas\u002Fnext-swift","\u002Fprojects\u002Fnext-swift.webp",{"en":196,"fr":196,"sv":196},"Lead Developer & Architect",[198,199,200,201,202,203],"Next.js 15 App Router","TypeScript","Clerk Authentication","Supabase Backend","Stripe Subscriptions","Sold on Gumroad",{"en":205,"fr":206,"sv":207},"Production-ready SaaS starter kit built with Next.js 15 (App Router), TypeScript, Clerk, Supabase and Stripe. Designed for indie makers and small teams who want to launch secure subscription products in days instead of weeks.","Starter kit SaaS prêt pour la production, construit avec Next.js 15 (App Router), TypeScript, Clerk, Supabase et Stripe. Conçu pour les indie makers et petites équipes qui veulent lancer un produit avec abonnement sécurisé en quelques jours au lieu de plusieurs semaines.","Produktionsfärdigt SaaS-starterkit byggt med Next.js 15 (App Router), TypeScript, Clerk, Supabase och Stripe. Skapat för indie makers och små team som vill lansera säkra prenumerationsprodukter på dagar istället för veckor.",{"en":209,"fr":210,"sv":211},"Includes authentication, user dashboard, Stripe billing & webhooks, and clean architecture patterns. Sold commercially on Gumroad.","Inclut authentification, dashboard utilisateur, facturation Stripe, webhooks et une architecture propre. Vendu commercialement sur Gumroad.","Innehåller autentisering, användardashboard, Stripe-fakturering, webhooks och ren arkitektur. Såld kommersiellt på Gumroad.",{"name":213,"repoUrl":214,"previewImage":215,"role":216,"stack":217,"useCase":222,"impact":226},"Nuxt Commerce - Headless Storefront","https:\u002F\u002Fgithub.com\u002Ffrancklebas\u002Fnuxt-commerce","\u002Fprojects\u002Fnuxt-commerce.webp",{"en":129,"fr":129,"sv":129},[218,219,199,220,221],"Nuxt 4","Vue 3","Stripe","Sanity",{"en":223,"fr":224,"sv":225},"Premium headless e-commerce storefront built with Nuxt 4, Vue 3, TypeScript and Tailwind. Features YAML-first product catalog with Sanity adapter, Stripe Checkout, SSR-first rendering, i18n and Lighthouse 95+ performance.","Storefront e-commerce headless premium réalisé avec Nuxt 4, Vue 3, TypeScript et Tailwind. Catalogue produit YAML-first avec adaptateur Sanity, Stripe Checkout, rendu SSR-first, i18n et performances Lighthouse 95+.","Premium headless e-handelsbutik byggd med Nuxt 4, Vue 3, TypeScript och Tailwind. YAML-first produktkatalog med Sanity-adapter, Stripe Checkout, SSR-first rendering, i18n och Lighthouse 95+ prestanda.",{"en":227,"fr":228,"sv":229},"Built to help solo founders and small brands launch fast, maintainable online stores in record time.","Pensé pour permettre aux fondateurs solo et petites marques de lancer une boutique rapide et maintenable en un temps record.","Designad för att låta solo-grundare och små varumärken lansera snabba och underhållbara butiker på rekordtid.",{"name":231,"repoUrl":232,"previewImage":233,"role":234,"stack":236,"useCase":241,"impact":245},"JobBoard Stockholm","https:\u002F\u002Fgithub.com\u002Ffrancklebas\u002Fjobboard","\u002Fprojects\u002Fjobboard.webp",{"en":235,"fr":235,"sv":235},"Full-Stack Architect & Developer",[218,237,238,239,240],"FastAPI","Python","Docker","APScheduler",{"en":242,"fr":243,"sv":244},"Full-stack job aggregation platform specialized in frontend roles in Stockholm. Built with Nuxt 4 (SSR), FastAPI backend, automated scraping, intelligent caching and Docker deployment.","Plateforme full-stack d'agrégation d'offres d'emploi frontend à Stockholm. Construite avec Nuxt 4 (SSR), backend FastAPI, scraping automatisé, caching intelligent et déploiement Docker.","Full-stack jobbaggregator specialiserad på frontend-roller i Stockholm. Byggd med Nuxt 4 (SSR), FastAPI-backend, automatiserad scraping, intelligent caching och Docker-deployment.",{"en":246,"fr":247,"sv":248},"Demonstrates complete end-to-end ownership from infrastructure to scalable frontend architecture.","Démontre une prise en charge complète : de l'infrastructure et du pipeline de données jusqu'à l'architecture frontend scalable et l'expérience produit.","Visar full end-to-end ägandeskap från infrastruktur till skalbar frontend-arkitektur och produktupplevelse.",1775820116677]