FlorianLepage Links

Case study · Web · 2026Scroll to expand

Florian Lepage Links[02 / 07] — Web · 2026

A lightweight personal hub for Florian Lepage, connecting professional work with life outdoors. A simple page of links opens into recorded hikes, 3D terrain, travel maps and photographs from the trail.

Visit live site

Role

Product design & engineering

Sector

Personal brand · Outdoor exploration

Platform

Web · Geospatial interfaces

Year

2026

Context

A link-in-bio with a sense of place.

Personal project by Florian Lepage

Built for Florian’s own online presence, this project brings KYN Studio, professional profiles and outdoor interests into one coherent experience. It is a personal product, not a commissioned client engagement.

Engineering outcomes

Delivery

Static firstThe profile and links do not need a client-side application framework.

Exploration

On demandRich mapping is separated from the initial link-page experience.

Authoring

Typed configurationContent and settings are validated during the build.

Interaction

Desktop + mobileLight/dark layouts, keyboard controls and responsive map sheets.

The outcome is a working personal hub with deliberately separated layers, not a claim about traffic or conversion.

The brief

A list of links tells you where to go. It rarely tells you who is behind it.

The brief was to make one useful front door for professional work and personal interests, without turning a small link page into a heavy application. The first visit should stay simple; the richer stories should be there when someone chooses to explore.

Keep the front door light. Make exploration worth the click.

What we built

A static front page. A richer world on demand.

Astro renders a configuration-driven profile with clear link cards and an alpine visual identity. Three small badges reveal the deeper layers: a Lyon–San Francisco connection, a national-parks checklist and recorded hikes with map, satellite and 3D terrain views. Route statistics, elevation profiles and photographs turn those tracks into stories.

What we built[01—06]

01One validated configProfile details, links, badges and theme settings live in one typed configuration. Build-time validation catches malformed URLs and unsupported settings before publication.

02Alpine, day and nightA warm, restrained visual system adapts to light and dark preference. The current alpine theme shares a token-based architecture with four other configurable themes.

03Travel in contextA world-route view connects Lyon and San Francisco. A separate US map tracks a personal goal of visiting all 63 national parks.

04Real terrain, not a backdropRecorded routes can be explored on a map, satellite imagery or DEM-backed 3D terrain, alongside distance, ascent, moving time and elevation profiles.

05Photos along the trailA thumbnail strip and route-linked media open into a captioned viewer. The implementation also supports video clips, with heavier media requested when opened.

06Complexity only when neededMap data is prefetched on intent and the heavier MapLibre viewer loads when the hiking sheet is opened. Mobile layouts use a bottom sheet rather than squeezing a desktop dialog onto a phone.

Inside the product9 screens

The personal hub

3 screens

The personal hubAlpine identity, profile and link cards in light mode.

After darkThe same page with its pine-green dark palette.

A narrower screenThe live page at 390 CSS pixels wide.

Hikes, terrain & photographs

4 screens

Nantua hiking route drawn on a loaded map with photo markers and map-layer controls. — **Follow the route**A fully loaded hiking map with route and photo markers.

Nantua route on a pitched 3D terrain map with satellite imagery. — **The landscape in 3D**Satellite imagery draped over real elevation data.

The details of the walkDistance, ascent, moving time, photos and the elevation profile.

Photo viewer showing Lac de Nantua from the cliffs, with caption, image count and previous/next controls. — **From the trail**A captioned photo viewer keeps the route’s story close.

A sense of place

2 screens

World map with the great-circle flight route between Lyon and San Francisco. — **Between Lyon and San Francisco**A great-circle route connects the two ends of the year.

United States national-parks map showing three parks visited out of 63 at capture time. — **A long-term checklist**A map of the US national parks, with visited parks highlighted.

Built with

Small by default. Capable when you ask more of it.

Astro and TypeScript handle static rendering and validated content. Plain CSS drives the theme system. MapLibre powers the interactive hiking views, while projected SVG maps cover travel and national parks. The publishing pipeline targets static hosting on S3. Privacy-aware publishing defaults trim route endpoints; this is a safeguard, not a guarantee of anonymity.

Built with

Stack

AstroTypeScriptZodMapLibre GL JSCSSS3

Next up

Back to all works

Want something like this?

Start a project Visit live site Next case ↗