[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"work-en-cultural-trails":3,"work-cards-en":168},{"id":4,"title":5,"approach":6,"body":85,"brief":92,"card":98,"description":89,"extension":102,"gallery":103,"hero":128,"heroAlt":129,"meta":130,"navigation":131,"outcome":132,"path":136,"problem":137,"reflection":140,"resources":141,"role":153,"seo":163,"status":164,"stem":165,"summary":166,"__hash__":167},"work_en\u002Fwork\u002Fcultural-trails.md","Cultural Trails",[7,25,52,69],{"label":8,"title":9,"prose":10,"artifacts":13},"Architecture","One app, not a front and a back",[11,12],"We started from a Laravel Breeze base, which gave us authentication, Tailwind, and Vue out of the box, and then made the decision that shaped everything: Blade, Livewire, or Inertia. We chose Inertia. It let us build a single-page application with fluid transitions while writing the back-end as a normal Laravel app, with no separate REST API to design, version, and keep in sync.","That choice is why a five-person team could move fast. Inertia bridges the back and the front, so a controller returns data straight to a Vue page, and the boundary I owned (the models, the queries, the access rules) stayed clean and server-side while the front-end stayed reactive.",[14,20],{"alt":15,"caption":16,"decision":17,"width":18,"src":19},"A brand-styled stack diagram: a Vue, Tailwind and MapLibre front end above a Laravel and MySQL back end, with an arrow between them and an API link out to the OpenRouteService routing service.","The stack: Vue, Tailwind and MapLibre on Laravel and MySQL.","One Laravel app drives the Vue front end through Inertia, so there is no separate REST API to design, version, and keep in sync.","half","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-stack.jpg",{"alt":21,"caption":22,"decision":23,"width":18,"src":24},"A brand-styled build-process diagram running left to right: relational schema, then migrations and models, then seeders, then controllers, with a parallel track for cartography, base components, and the trail and POI creation flows.","How it was built: schema, then models, seeders, controllers.","Getting the schema and models right first is what let the controllers and the front-end components fall into place quickly.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-buildprocess.jpg",{"label":26,"title":27,"prose":28,"artifacts":31},"Data model","A content system for trails",[29,30],"The heart of the back-end is the schema. A trail (path) links to many points of interest and a point of interest can belong to many trails, so the join between them carries the order of the walk. Each point of interest holds its own audio guides, photos, and facts; each trail belongs to a theme. On top of the content sits a quiz model (quizzes, questions, answers) for the gamified stops.","Then there is the engagement layer, which is what makes it feel like a product rather than a catalog: favorites and completion histories for both trails and points of interest, achievements with a user pivot, reviews, and a role system underneath it all. Getting those relationships right up front is the architecture; everything else is built on them.",[32,37,42,47],{"alt":33,"caption":34,"decision":35,"width":18,"src":36},"A product slide introducing the app at sentiers-culturels-vaud.ch, listing three access levels: for all users, for users with an account, and for a local actor with an editor account.","The product: one app, three levels of access.","The same content system serves anonymous visitors, account holders, and editors, with views unlocked by role.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-product.jpg",{"alt":38,"caption":39,"decision":40,"width":18,"src":41},"A product slide, \"Onglet Accueil\", showing the home tab on mobile: exploring trails by theme, proximity and popularity, and a \"which trail are you\" quiz that recommends trails.","The home tab: explore by theme, place, and a recommendation quiz.","Themes, popularity and the quiz all read from the same relational content, so discovery is just another query over the model.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-home.jpg",{"alt":43,"caption":44,"decision":45,"width":18,"src":46},"A product slide, \"Page d'un sentier\", showing a trail page on mobile: photos, description, distance and duration, its ordered stops, accessibility, and a reviews panel rated 4.5.","A trail page: description, ordered stops, accessibility, reviews.","Every field here maps to the schema: a trail and its ordered stops, its accessibility, and the reviews layered on top.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-trail.jpg",{"alt":48,"caption":49,"decision":50,"width":18,"src":51},"A product slide, \"Page d'un point d'intérêt\", showing a POI page on mobile (Gare de Lausanne) with an audio guide, a quiz, and the list of trails that pass through it.","A point of interest: audio guide, quiz, and the trails it belongs to.","Each point of interest carries its own media and quiz and can belong to many trails, which is the many-to-many join at the center of the model.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-poi.jpg",{"label":53,"title":54,"prose":55,"artifacts":58},"Roles","Explorers and editors, one schema",[56,57],"The app serves two audiences from the same code. An explorer browses the map, walks a trail, marks points of interest as done, and earns achievements. An editor (a local cultural actor) creates and edits trails and points of interest through guided forms, with their own creation and deletion flows.","That split is enforced by role-based access. Routes for favorites, the dashboard, achievements, and authoring are guarded by role middleware, so the same application safely exposes a public experience and a contributor's toolset without leaking one into the other.",[59,64],{"alt":60,"caption":61,"decision":62,"width":18,"src":63},"A UML sequence diagram, \"Voir un itinéraire\": a user on the Vue front end requests a trail, the web.php router calls MapController, PathController and PoiController, each queries MySQL, and the controller returns an Inertia view with its props.","The explorer flow: viewing a trail and its points of interest.","An explorer's read path runs through the same controllers and the same Inertia views the whole app is built on.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-view-sequence.jpg",{"alt":65,"caption":66,"decision":67,"width":18,"src":68},"A UML sequence diagram, \"Créer un sentier\": an editor steps through creating a trail, the NewPathController calls the OpenRouteService API and queries POIs and themes in MySQL, then creates the trail and its links to the points of interest.","The editor flow: creating a trail, its route, and its stops.","The editor's write path is the same architecture guarded by role middleware, so one codebase safely serves both audiences.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-create-sequence.jpg",{"label":70,"title":71,"prose":72,"artifacts":74},"Maps & routing","Planning real walking routes",[73],"The interactive maps run on MapLibre, and the trails themselves are real routes, which means route planning between points of interest. We used OpenRouteService for that through its public API, calling it from the authoring flow to plan a route as a trail was being built. Self-hosting the engine was the obvious next step we flagged for a real deployment, to escape the public rate limits and keep that planning unconstrained.",[75,80],{"alt":76,"caption":77,"decision":78,"width":18,"src":79},"A product slide, \"Onglet Sentiers\", showing the trails tab on mobile: a filterable map of trails and a trail preview with its route drawn between its stops.","The trails tab: a map with filters by distance, duration, and theme.","Trails are real routes on a MapLibre map, browsable and filterable before you set out.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-trails.jpg",{"alt":81,"caption":82,"decision":83,"width":18,"src":84},"A product slide, \"Lancement de la navigation\", showing in-walk navigation on mobile: the list of steps, the route on the map, the next stop with distance and time remaining, and a quit-navigation dialog.","Guided navigation: the next stop, distance, and time remaining.","Following a trail walks the planned OpenRouteService route stop by stop, with the option to skip a stop or quit at any time.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fartifact-navigation.jpg",{"type":86,"value":87,"toc":88},"minimark",[],{"title":89,"searchDepth":90,"depth":90,"links":91},"",2,[],{"role":93,"year":94,"host":95,"scope":96,"shipped":97},"Back-end lead","2024","HEIG-VD · Articulation Project","Team of five","Live web app, presentation, report",{"title":99,"alt":100,"image":101},"Cultural Trails — a full-stack heritage walking app","Two screens from the Sentiers culturels app on the project's green, peach and blue trail ribbon: the explore map of trails across the Lausanne shore, and in-walk navigation following a route on a satellite map.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fadjacent.jpg","md",[104,108,112,116,120,124],{"alt":105,"caption":106,"src":107},"The explore map on mobile: trails and points of interest shown as pins across the Lausanne and Lavaux shore, with filters for theme, criteria and radius, and a Sentiers \u002F Lieux toggle.","Explore: trails and places on the map.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-map.jpg",{"alt":109,"caption":110,"src":111},"A place page on mobile, \"Gare de Lausanne\", listing the trails that pass through it, each with a photo, distance, duration and elevation gain.","A place, and the trails that pass through it.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-poi.jpg",{"alt":113,"caption":114,"src":115},"The trail-navigation screen on mobile, \"Étapes\": a vertical timeline of stops from the departure point, each marked done, with a start button.","Navigation: a trail's stops, step by step.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-steps.jpg",{"alt":117,"caption":118,"src":119},"The reviews screen on mobile, \"Avis\": a 4.5 rating with a star distribution and individual traveler reviews carrying dates and text.","Reviews: a rating, a distribution, and traveler notes.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-reviews.jpg",{"alt":121,"caption":122,"src":123},"The achievements screen on mobile, \"Accomplissements\": a grid of earned badges above progress bars broken down by theme such as art and history.","Achievements, earned by walking and by theme.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-achievements.jpg",{"alt":125,"caption":126,"src":127},"The profile screen on mobile, \"Profil\": a completion statistic, lists of completed and downloaded trails, and written reviews, above the app's bottom navigation.","The profile: trails completed, downloaded, reviewed.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fgallery-profile.jpg","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fhero.jpg","Three screens from the Sentiers culturels app standing on the project's green, peach and blue trail ribbon: a trail page for Les chemins de fer over a photo of Lausanne station, the explore map of trails across the Lausanne and Lavaux shore, and in-walk navigation following a route on a satellite map.",{},true,[133,134,135],"A live, deployed full-stack web app at sentiers-culturels-vaud.ch, built on Laravel, Inertia, and Vue with a MySQL database.","A rich relational data model and a role-based content system that lets local actors publish their own trails, not just a fixed catalog the team controls.","Interactive mapping and route planning between points of interest, built on MapLibre and OpenRouteService, with self-hosting the routing engine flagged as the next step for a live deployment.","\u002Fwork\u002Fcultural-trails",[138,139],"The canton of Vaud's cultural heritage is rich but scattered, and hard to experience on foot in a guided, engaging way. The brief was to build a complete web application that turns it into gamified, accessible walking trails, and crucially, to let local actors publish and edit their own.","Underneath the product brief sat a real engineering problem: a content-heavy, map-based application with two very different kinds of user (people exploring trails and people authoring them), carrying multimedia, quizzes, and a layer of gamification, designed and built full-stack inside a student timeframe. I owned the back-end half of that.","This is the project that taught me the back-end is mostly data modeling. The weeks I spent getting the relationships right (trails to points of interest, the engagement layer, the role system) are what let the rest of the build go quickly, and the messy parts later were almost always places where the model had been too loose. Choosing Inertia over a separate API was the pragmatic call I would make again: it traded a little setup for a lot less friction down the line.",[142,146,150],{"type":143,"title":144,"url":145},"github","Code source du projet (Laravel)","https:\u002F\u002Fgithub.com\u002Fantonynyt\u002FprojArt-loomi-SentiersCulturels",{"type":147,"title":148,"url":149},"pdf","Rapport de projet","\u002Ffiles\u002Fcultural-trails-rapport.pdf",{"type":147,"title":151,"url":152},"Schéma relationnel de la base de données","\u002Ffiles\u002Fcultural-trails-schema.pdf",{"led":154,"contributed":157,"notTouched":160,"team":162},[155,156],"The back-end: the data model, the controllers and application logic, authentication and role-based access","The route-planning integration, plus database seeding, migrations, and deployment",[158,159],"Front-end components that talk to the database: the trail and POI creation forms, filters, and profile pages","The early UX phase with the team",[161],"The front-end lead's work, the UX design lead, and the visual\u002Fcommunication side","Team of five (Group Loomi) for the Articulation Project at HEIG-VD: Jérémy Martin (back-end lead), Antony Neyret (front-end lead), François Cuennet (UX design), Leïla Fidalgo (project manager), and Ariadne Melissargos (communications). Supervised by Laurent Berthelot (project management and technical), Jonathan Favre-Lamarine (UX\u002FUI and design), and Noemi Romano (cartography).",{"title":5,"description":89},"live","work\u002Fcultural-trails","A full web application that turns the canton of Vaud's cultural heritage into gamified, accessible walking trails: themed paths, points of interest with audio guides and quizzes, and an editor mode that lets local actors publish their own trails. I was the back-end lead.","kgB6Dyao6n_EwBA3WaY7_WemR2UtbsolVFgQNYqvvOU",[169,175,181,187,193,199,201,207,213,219,225,231,237,243,249],{"path":170,"card":171},"\u002Fwork\u002Fa-ta-dispo",{"title":172,"alt":173,"image":174},"À ta Dispo — matching event volunteers with organizers","The hand-drawn À ta Dispo wordmark, a coral logo on a pink sticker shape, on a plain coral background.","\u002Fimages\u002Fwork\u002Fa-ta-dispo\u002Fadjacent.jpg",{"path":176,"card":177},"\u002Fwork\u002Fan-aura-of-words",{"title":178,"image":179,"alt":180},"An Aura of Words — Lugano's parks, told by their reviews","\u002Fimages\u002Fwork\u002Fan-aura-of-words\u002Fadjacent.jpg","Lugano's five parks shown on a map, each as a color-blended organic aura sized by review volume.",{"path":182,"card":183},"\u002Fwork\u002Fbeau-rivage",{"title":184,"alt":185,"image":186},"Beau-Rivage Eco-Redesign — a 95% lighter luxury hotel site","The redesigned Beau-Rivage Palace site: restrained, elegant, far lighter than the original.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fadjacent.jpg",{"path":188,"card":189},"\u002Fwork\u002Fbereal",{"title":190,"alt":191,"image":192},"Re-coding BeReal — a dual-camera capture and image pipeline","Re-coding BeReal: the composed dual-photo post beside a friend's feed, on a dark mobile interface.","\u002Fimages\u002Fwork\u002Fbereal\u002Fadjacent.jpg",{"path":194,"card":195},"\u002Fwork\u002Fbrushbuddy",{"title":196,"image":197,"alt":198},"BrushBuddy — a monster cube that guides two-minute toothbrushing","\u002Fimages\u002Fwork\u002Fbrushbuddy\u002Fadjacent.jpg","A hand lifts the toothbrush from the dock on top of the BrushBuddy cube, which has a worried yellow monster face.",{"path":136,"card":200},{"title":99,"alt":100,"image":101},{"path":202,"card":203},"\u002Fwork\u002Fdatabloom",{"title":204,"image":205,"alt":206},"DataBloom — making the energy impact of digital usage visible","\u002Fimages\u002Fwork\u002Fdatabloom\u002Fadjacent.jpg","The DataBloom flower: ultramarine felt petals on a green segmented stem in a small terracotta pot, on a white studio backdrop.",{"path":208,"card":209},"\u002Fwork\u002Felen",{"title":210,"image":211,"alt":212},"ELEN — a speculative camera for invisible wireless presences","\u002Fimages\u002Fwork\u002Felen\u002Fadjacent.jpg","ELEN, a handheld camera with a translucent orange body and twin white handles, lit on a gray studio backdrop, its deep-blue screen showing through the plexiglass.",{"path":214,"card":215},"\u002Fwork\u002Ffamily-space",{"title":216,"image":217,"alt":218},"UBS Family Space — a family's shared place to manage money","\u002Fimages\u002Fwork\u002Ffamily-space\u002Fadjacent.jpg","UBS Family Space concept: two phone screens on a soft red gradient, a parent's hub for the child's analytics, limits, and goals, and the child's savings-goal screen.",{"path":220,"card":221},"\u002Fwork\u002Fhuman-loci",{"title":222,"image":223,"alt":224},"Human Loci — a synesthetic listening object","\u002Fimages\u002Fwork\u002Fhuman-loci\u002Fadjacent.jpg","Human Loci: a transparent acrylic listening box with three plaster disks for a park, a marina, and a train station.",{"path":226,"card":227},"\u002Fwork\u002Fmeeting-pond",{"title":228,"alt":229,"image":230},"Meeting Pond — connected light objects for distant presence","Two connected Meeting Pond units standing side by side, one glowing blue and the other pink, each showing ripples across a 32×32 LED grid.","\u002Fimages\u002Fwork\u002Fmeeting-pond\u002Fadjacent.jpg",{"path":232,"card":233},"\u002Fwork\u002Fthea",{"title":234,"image":235,"alt":236},"Thea — a calm new sense for living with allergies","\u002Fimages\u002Fwork\u002Fthea\u002Fadjacent.jpg","The Thea wearable suspended in a lattice of orange cords against a cobalt sky, its oblong gauge glowing, an editorial shot from the final presentation.",{"path":238,"card":239},"\u002Fwork\u002Fuefa-female-coaches",{"title":240,"alt":241,"image":242},"Why Not You? — the UEFA female coaches campaign","The Why Not You? campaign: bold display typography over a female coach, with the line Lead Your Passion, Shape the Game.","\u002Fimages\u002Fwork\u002Fuefa-female-coaches\u002Fadjacent.jpg",{"path":244,"card":245},"\u002Fwork\u002Fwama",{"title":246,"image":247,"alt":248},"Wama — machine learning as a sink-side witness","\u002Fimages\u002Fwork\u002Fwama\u002Fadjacent.jpg","Wama's built sink rig at an angle: a tap pouring into a clear basin, the phone in its laser-cut holder showing the character.",{"path":250,"card":251},"\u002Fwork\u002Fwematch",{"title":252,"image":253,"alt":254},"WeMatch — an AX matching service for the WeRoad world","\u002Fimages\u002Fwork\u002Fwematch\u002Fadjacent.jpg","WeMatch title card: 'WeMatch finds your group before you find your trip' in coral and ink on a soft white-to-pink gradient, with the round Matchy agent character.",1783535589292]