[{"data":1,"prerenderedAt":617},["ShallowReactive",2],{"featured-projects":3},[4,218,411],{"id":5,"title":6,"backgroundColor":7,"banner":8,"body":9,"color":195,"date":196,"dateString":197,"description":198,"extension":199,"featured":200,"icon":201,"logo":202,"meta":203,"name":204,"navigation":200,"path":205,"role":206,"seo":207,"stack":208,"stem":212,"tags":213,"type":216,"__hash__":217},"projects\u002Fprojects\u002Fla-maison-grand.md","Building a website and custom web-based tools from scratch for a nonprofit","#F3A871","\u002Fprojects\u002Flmg\u002Fbanner.png",{"type":10,"value":11,"toc":185},"minimark",[12,16,21,24,41,44,48,55,62,66,69,84,116,120,127,133,137,140,179],[13,14,15],"p",{},"La Maison-Grand is a \"third-place\" non-profit in Etalans, France.\nIt's a place that brings together a cooperative workshop, a fablab, a café, and various events like concerts and workshops.\nAs a regular volunteer there, I was asked to build a website that could match their energy and simplify their operations.",[17,18,20],"h3",{"id":19},"managing-complexity-with-simplicity","Managing complexity with simplicity",[13,22,23],{},"Uniting so many different activities (rentals, events, news, and community projects) into one website was a significant challenge. The non-profit had two main needs:",[25,26,27,35],"ol",{},[28,29,30,34],"li",{},[31,32,33],"strong",{},"A unified online presence",": a website where anyone could discover what's happening at La Maison-Grand.",[28,36,37,40],{},[31,38,39],{},"Administrative tools",": they were managing room rentals by hand, which was incredibly time-consuming and sometimes led to errors.",[13,42,43],{},"I decided to build a custom solution from scratch to ensure it fit their unique workflow perfectly.",[17,45,47],{"id":46},"a-custom-cms-built-for-the-team","A custom CMS built for the team",[13,49,50,51,54],{},"Instead of using a generic website builder, I developed a ",[31,52,53],{},"bespoke Content Management System (CMS)",".",[13,56,57,58,61],{},"Using ",[31,59,60],{},"Express.js, TypeScript, and MongoDB",", I built a robust API to power the site.\nThis allowed me to create a dedicated admin panel where the website admin can easily update news, add events, and manage images without needing any technical knowledge.",[17,63,65],{"id":64},"automating-the-boring-stuff-with-a-rental-management-system","Automating the boring stuff with a rental management system",[13,67,68],{},"Because it was painful to manage rentals by hand, I integrated a custom booking system into the member area.",[70,71,72,78],"ul",{},[28,73,74,77],{},[31,75,76],{},"Online renting",": members can view availability and book rooms directly on the website.",[28,79,80,83],{},[31,81,82],{},"Digital invoices",": the system automatically generates invoices and makes it easier to track payment statuses.\nThis change alone saved the coordinator precious time.",[85,86,87],"gallery",{},[88,89,96,105,111],"div",{"className":90},[91,85,92,93,94,95],"columns","is-justify-content-center","is-multiline","mt-5","mb-5",[97,98],"gallery-image",{"alt":99,"className":100,"src":103,"ratio":104},"The custom admin dashboard for content and rental management",[101,102],"column","is-full","\u002Fprojects\u002Flmg\u002Fscreenshot_admin.png","16\u002F9",[97,106],{"alt":107,"className":108,"src":110},"The private member area for room bookings",[101,109],"is-half","\u002Fprojects\u002Flmg\u002Fscreenshot_user.png",[97,112],{"alt":113,"className":114,"src":115},"Community gallery showcasing recent events",[101,109],"\u002Fprojects\u002Flmg\u002Fscreenshot_gallery.png",[17,117,119],{"id":118},"design-experience","Design & experience",[13,121,122,123,126],{},"I designed the interface to be warm and welcoming, following the association's existing branding.\nI also focused on the \"feel\" of the site by adding smooth animations using ",[31,124,125],{},"Framer Motion"," to make the navigation more engaging.",[128,129],"video-player",{":auto-play":130,":controls":130,":muted":130,":plays-inline":130,"alt":131,"ratio":104,"src":132},"true","Video showing the smooth landing page animations","\u002Fprojects\u002Flmg\u002Flanding.mp4",[17,134,136],{"id":135},"built-to-last-and-open-source","Built to last ... and Open Source",[13,138,139],{},"Because this was a project for a non-profit, and to follow my engagements, I wanted to ensure it was sustainable and ethical",[70,141,142,152,165],{},[28,143,144,147,148,151],{},[31,145,146],{},"Privacy-first",": I chose to use ",[31,149,150],{},"Umami"," for analytics, a Google Analytics privacy-friendly alternative.",[28,153,154,157,158,54],{},[31,155,156],{},"Open Source",": the entire project is built with free tools, and the code is ",[159,160,164],"a",{"href":161,"rel":162},"https:\u002F\u002Fgitlab.com\u002Flamaisongrand\u002Fsite",[163],"nofollow","available on GitLab",[28,166,167,170,171,174,175,178],{},[31,168,169],{},"Modern technologies",": built with ",[31,172,173],{},"Vue 3"," and ",[31,176,177],{},"TypeScript",", the architecture is robust and ready for the future !",[13,180,181],{},[182,183,184],"em",{},"Special thanks to La Maison-Grand for their trust and letting me work on their website.",{"title":186,"searchDepth":187,"depth":187,"links":188},"",2,[189,191,192,193,194],{"id":19,"depth":190,"text":20},3,{"id":46,"depth":190,"text":47},{"id":64,"depth":190,"text":65},{"id":118,"depth":190,"text":119},{"id":135,"depth":190,"text":136},"#FF6B00",20251201,"december 2025","Development of a dynamic website for a nonprofit using Vue and a custom CMS built with Express.","md",true,"\u002Fprojects\u002Flmg\u002Ficon.png","\u002Fprojects\u002Flmg\u002Flogo.svg",{},"La Maison-Grand","\u002Fprojects\u002Fla-maison-grand","Development",{"title":6,"description":198},[209,210,211],"vue","typescript","mongodb","projects\u002Fla-maison-grand",[214,215],"Fullstack","Design UI","Volunteering","7if6u9emkJp42uk1pjq9vh-0oa0PrKjEWNpklWdbV60",{"id":219,"title":220,"backgroundColor":221,"banner":222,"body":223,"color":389,"date":390,"dateString":391,"description":392,"extension":199,"featured":200,"icon":393,"logo":394,"meta":395,"name":396,"navigation":200,"path":397,"role":398,"seo":399,"stack":400,"stem":404,"tags":405,"type":409,"__hash__":410},"projects\u002Fprojects\u002Fnicolas-wirth.md","Creation of a professional, accessible, and marketing-ready website","#8EAF86","\u002Fprojects\u002Fnicow\u002Fbanner.png",{"type":10,"value":224,"toc":381},[225,228,232,235,255,258,262,269,290,297,304,308,319,330,333,357,367,371,376],[13,226,227],{},"Nicolas Wirth is a naturopath whose business was suffering due to an outdated digital presence.\nHis old website was no longer matching actual web standards.\nIt was time to migrate to a modern solution to regain his professional edge.",[17,229,231],{"id":230},"the-challenge-moving-away-from-legacy-php","The challenge: moving away from legacy PHP",[13,233,234],{},"The original website was built on an old PHP architecture. It had several critical issues:",[70,236,237,243,249],{},[28,238,239,242],{},[31,240,241],{},"Ancient design",": with an outdated and unresponsive design, the website was not looking professional anymore.",[28,244,245,248],{},[31,246,247],{},"Hard to maintain",": it was difficult to update and keep secure, moreover that Nicolas doesn't hire a webmaster.",[28,250,251,254],{},[31,252,253],{},"Content locked",": as a non-technical user, Nicolas couldn't edit his own content, making every small change a struggle.",[13,256,257],{},"My mission was to build a modern and sustainable website that would be easy to manage and built to last.",[17,259,261],{"id":260},"a-modern-design-backed-by-a-powerful-cms","A modern design, backed by a powerful CMS",[13,263,264,265,268],{},"The transformation started with a fresh visual identity. ",[31,266,267],{},"Kaydrie"," designed a beautiful new brand and maquette that perfectly captured the natural and professional essence of Nicolas's practice.",[85,270,271],{},[88,272,274,279,285],{"className":273},[91,85,92,93,94,95],[97,275],{"alt":276,"className":277,"src":278},"Website maquette designed by Kaydrie",[101,102],"\u002Fprojects\u002Fnicow\u002Fmaquette.png",[97,280],{"alt":281,"className":282,"src":283,"ratio":284},"New professional email signature",[101,109],"\u002Fprojects\u002Fnicow\u002Fbrand_signature.png","10\u002F5",[97,286],{"alt":287,"className":288,"src":289,"ratio":284},"New logo and visual identity",[101,109],"\u002Fprojects\u002Fnicow\u002Fbrand_logo.png",[13,291,292,293,296],{},"Instead of just building a static site, I developed a ",[31,294,295],{},"fully flexible template",". It includes localization support and powerful SEO tools right out of the box.",[13,298,299,300,303],{},"A website isn't just a place to introduce yourself; it's the way professionals make money.\nTo ensure Nicolas could grow his business independently, I chose ",[31,301,302],{},"Strapi"," (a headless CMS).\nThis allows him to manage every piece of text and image without touching a single line of code.",[17,305,307],{"id":306},"performance-built-to-last","Performance; built to last",[13,309,310,311,314,315,318],{},"I used ",[31,312,313],{},"Nuxt 4"," to ensure the site stays at the cutting edge of web technology.\nTo achieve blazing fast speeds, I implemented ",[31,316,317],{},"Incremental Static Regeneration (ISR)",", cache optimization, and images auto-compression to be served as WEBP (an optimized image format for the web).\nThis means the site stays updated automatically but still loads instantly for users, providing the best of both worlds: speed and fresh content.",[17,320,322,323,174,326,329],{"id":321},"a-user-first-and-ethical-approach","A ",[182,324,325],{},"user-first",[182,327,328],{},"ethical"," approach",[13,331,332],{},"I believe that a great user experience includes respecting privacy and ensuring accessibility:",[70,334,335,347],{},[28,336,337,339,340,342,343,346],{},[31,338,146],{},": I replaced standard tracking with ",[31,341,150],{},", a privacy-focused analytics tool. For security, I used ",[31,344,345],{},"Altcha"," instead of Google reCAPTCHA, making the \"not a robot\" check simple and data-respectful.",[28,348,349,352,353,356],{},[31,350,351],{},"Full accessibility",": the site achieved a perfect ",[31,354,355],{},"100\u002F100 Lighthouse accessibility score",". It is fully navigable via keyboard and optimized for screen readers, ensuring that everyone can navigate the site.",[85,358,359],{},[88,360,362],{"className":361},[91,85,92,93,94,95],[97,363],{"alt":364,"className":365,"src":366},"Lighthouse audit showing a perfect 100\u002F100 accessibility score.",[101,102],"\u002Fprojects\u002Fnicow\u002Flighthouse.png",[17,368,370],{"id":369},"and-the-result","And the result:",[128,372],{":auto-play":130,":controls":130,":muted":130,":plays-inline":130,"alt":373,"className":374,"ratio":104,"src":375},"Video showing the new website in action.",[95],"\u002Fprojects\u002Fnicow\u002Fvideo.mp4",[13,377,378],{},[182,379,380],{},"Special thanks to Nicolas for his trust, and to Kaydrie for the excellent design work.",{"title":186,"searchDepth":187,"depth":187,"links":382},[383,384,385,386,388],{"id":230,"depth":190,"text":231},{"id":260,"depth":190,"text":261},{"id":306,"depth":190,"text":307},{"id":321,"depth":190,"text":387},"A user-first and ethical approach",{"id":369,"depth":190,"text":370},"#678161",20260401,"april 2026","Development of a professional website using Nuxt, powered by the headless CMS Strapi.","\u002Fprojects\u002Fnicow\u002Ficon.png","\u002Fprojects\u002Fnicow\u002Flogo.png",{},"Nicolas Wirth","\u002Fprojects\u002Fnicolas-wirth","Frontend development",{"title":220,"description":392},[401,402,403],"nuxt","strapi","motion","projects\u002Fnicolas-wirth",[406,407,408],"marketing","seo","accessibility","Freelance","vcw5rx5eIvltdPeV7Z8E0o_LiUfTnFW0QonGh75ZxQ4",{"id":412,"title":413,"backgroundColor":414,"banner":415,"body":416,"color":414,"date":597,"dateString":598,"description":599,"extension":199,"featured":200,"icon":600,"logo":601,"meta":602,"name":603,"navigation":200,"path":604,"role":605,"seo":606,"stack":607,"stem":610,"tags":611,"type":615,"__hash__":616},"projects\u002Fprojects\u002Fremede.md","Creating a free and open dictionary software, giving everyone access to languages resources",null,"\u002Fprojects\u002Fremede\u002Fbanner.png",{"type":10,"value":417,"toc":591},[418,421,425,428,442,445,448,452,459,462,473,476,480,483,498,518,521,531,535,538,574],[13,419,420],{},"When I switched from iOS to Android, I couldn't find any dictionary app that would replace the proprietary dictionary Antidote. So I decided to create my own.",[17,422,424],{"id":423},"a-foss-dictionary-app","A FOSS dictionary app",[13,426,427],{},"At the beginning, I created Remède for my personal use. From the start, I created this dictionary software to be :",[70,429,430,433,436,439],{},[28,431,432],{},"Built on free tools",[28,434,435],{},"Available offline",[28,437,438],{},"Have a nice interface",[28,440,441],{},"Have its own free dictionary data",[13,443,444],{},"I decided to build the application using Vue and Ionic, a framework for building cross-platform mobile apps.\nThis choice makes the application code maintainable and easy to understand, while being deployable as a mobile app.",[13,446,447],{},"But as I was building it, I realized that it could be useful for others too. So I decided to make it bigger...",[17,449,451],{"id":450},"a-whole-project-for-the-dictionary-community","A whole project for the dictionary community",[13,453,454,455,458],{},"Since then, ",[182,456,457],{},"The Remède Project"," aims to distribute and make language resources accessible to everyone.\nIt's important that this software is compatible with other dictionary formats; Remède acts as universal dictionary software.",[13,460,461],{},"I searched the web for a way to make it more accessible to everyone. That's why I made Remède compatible with already existing dictionary formats such as :",[70,463,464,467,470],{},[28,465,466],{},"The DICT protocol (described in the RFC 2229)",[28,468,469],{},"The XDXF (eXtended Dictionary eXchange Format)",[28,471,472],{},"And more are coming...",[13,474,475],{},"I also create a desktop application using Tauri, so Remède can be used on every device.",[17,477,479],{"id":478},"a-dictionary-uniting-language-resources","A dictionary uniting language resources",[13,481,482],{},"As I said earlier, I wanted Remède to have its own dictionary data.\nUsing a Python script, I merge several sources of language resources into a single database.",[13,484,485,486,491,492,497],{},"Most of the data comes from the ",[159,487,490],{"href":488,"rel":489},"https:\u002F\u002Fwiktionary.org\u002F",[163],"Wiktionary"," project, which is scraped using a customized API called ",[159,493,496],{"href":494,"rel":495},"https:\u002F\u002Fgithub.com\u002FLabseSoftware\u002Fapi-definition",[163],"api-definition"," originally developed by Frederic Gainza.\nThis permits to merge the data from several sources, and allows Remède to have interesting and precise data such as :",[70,499,500,503,506,509,512,515],{},[28,501,502],{},"definitions of words",[28,504,505],{},"pronunciations",[28,507,508],{},"examples of usages",[28,510,511],{},"synonyms, antonyms",[28,513,514],{},"conjugations",[28,516,517],{},"rime dictionary",[13,519,520],{},"The lifecycle of the build script is described as follows :",[85,522,523],{},[88,524,526],{"className":525},[91,85,92,93,94,95],[97,527],{"alt":528,"className":529,"src":530},"Schema of the dictionary build process",[101,102],"\u002Fprojects\u002Fremede\u002Fschema_build.png",[17,532,534],{"id":533},"a-loved-application","A loved application",[13,536,537],{},"Even though it's not published on the official app stores, my family, friends and some fellow developers who discovered my project on Github use it.\nIt's a great application that I'm still using every day and working on, in my free time.",[85,539,540],{},[88,541,543,550,555,560,565,570],{"className":542},[91,85,92,93,94,95],[97,544],{"alt":545,"className":546,"src":548,"ratio":549},"Welcome screen of the Android application",[101,547],"is-one-third","\u002Fprojects\u002Fremede\u002Fscreenshot1.png","9\u002F18",[97,551],{"alt":552,"className":553,"src":554,"ratio":549},"Screenshot of the rime dictionary",[101,547],"\u002Fprojects\u002Fremede\u002Fscreenshot2.png",[97,556],{"alt":557,"className":558,"src":559,"ratio":549},"Screenshot of the definition page, and the example usages.",[101,547],"\u002Fprojects\u002Fremede\u002Fscreenshot3.png",[97,561],{"alt":562,"className":563,"src":564,"ratio":549},"Screenshot of the definition page",[101,547],"\u002Fprojects\u002Fremede\u002Fscreenshot4.png",[97,566],{"alt":567,"className":568,"src":569,"ratio":549},"Screenshot of the settings page",[101,547],"\u002Fprojects\u002Fremede\u002Fscreenshot5.png",[97,571],{"alt":562,"className":572,"src":573,"ratio":549},[101,547],"\u002Fprojects\u002Fremede\u002Fscreenshot6.png",[13,575,576],{},[182,577,578,579,584,585,590],{},"Do not hesitate to leave a star on ",[159,580,583],{"href":581,"rel":582},"https:\u002F\u002Fgithub.com\u002Fcamarm-dev\u002Fremede",[163],"Github",", and checkout Remède's ",[159,586,589],{"href":587,"rel":588},"https:\u002F\u002Fremede.camarm.fr\u002F",[163],"website"," !",{"title":186,"searchDepth":187,"depth":187,"links":592},[593,594,595,596],{"id":423,"depth":190,"text":424},{"id":450,"depth":190,"text":451},{"id":478,"depth":190,"text":479},{"id":533,"depth":190,"text":534},20231201,"december 2023","I launched this open-source project three years ago. It provides a dictionary client and aims to make linguistic resources more accessible.","\u002Fprojects\u002Fremede\u002Ficon.png","\u002Fprojects\u002Fremede\u002Flogo.svg",{},"Remède","\u002Fprojects\u002Fremede","Fullstack developer & maintainer",{"title":413,"description":599},[209,210,608,609],"ionic","tauri","projects\u002Fremede",[612,613,614],"Mobile development","Desktop development","FOSS","Personal project","haCQKyh88nTgcb8bGWnR3giZohP1iHwKa89Xce56TXk",1777822601173]