Le hub de liens personnel de Florian Lepage en mode sombre, avec profil, badges interactifs et liens professionnels

FlorianLepage Links

Étude de cas · Web · 2026Défilez pour agrandir

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

Un hub personnel léger pour Florian Lepage, entre projets professionnels et vie au grand air. Une simple page de liens s’ouvre sur des randonnées enregistrées, du relief 3D, des cartes de voyage et des photos prises sur les sentiers.

Voir le site

Rôle

Design produit & ingénierie

Secteur

Identité personnelle · Exploration outdoor

Plateforme

Web · Interfaces cartographiques

Année

2026

Contexte

Une page de liens qui donne le goût d’explorer.

Projet personnel de Florian Lepage

Conçu pour la présence en ligne de Florian, ce projet réunit KYN Studio, ses profils professionnels et ses activités outdoor dans une expérience cohérente. C’est un produit personnel, pas une prestation commandée par un client.

Résultats techniques

Diffusion

Statique d’abordLe profil et les liens ne nécessitent pas de framework applicatif côté client.

Exploration

À la demandeLa cartographie avancée est séparée de l’expérience initiale.

Édition

Configuration typéeContenu et paramètres sont validés à la compilation.

Interaction

Bureau + mobileModes clair et sombre, commandes clavier et panneaux cartographiques adaptatifs.

Le résultat est un hub personnel fonctionnel aux couches volontairement séparées, sans promesse de trafic ni de conversion.

Le brief

Une liste de liens indique où aller. Elle raconte rarement qui se trouve derrière.

L’objectif : créer un point d’entrée utile vers les projets professionnels et les centres d’intérêt personnels, sans transformer une petite page de liens en application lourde. La première visite doit rester simple ; les histoires plus riches se découvrent quand on choisit de les explorer.

Garder l’entrée légère. Donner envie d’aller plus loin.

Ce que nous avons créé

Une page statique. Tout un univers à la demande.

Astro génère un profil piloté par configuration, avec des liens lisibles et une identité visuelle alpine. Trois badges ouvrent d’autres perspectives : la connexion Lyon–San Francisco, les parcs nationaux américains et des randonnées enregistrées, à parcourir en carte, satellite ou relief 3D. Statistiques, profils d’altitude et photographies donnent vie aux itinéraires.

Ce que nous avons créé[01—06]

01Une configuration validéeProfil, liens, badges et thème sont réunis dans une configuration typée. La validation à la compilation détecte les URL mal formées et les options non prises en charge avant publication.

02Alpin, de jour comme de nuitUne identité sobre et chaleureuse s’adapte au mode clair ou sombre. Le thème alpine actuel partage une architecture de variables de design avec quatre autres thèmes configurables.

03Le voyage en contexteUne carte mondiale relie Lyon à San Francisco. Une carte distincte des États-Unis accompagne l’objectif personnel de visiter les 63 parcs nationaux.

04Un vrai relief à explorerLes parcours enregistrés se découvrent sur une carte, des images satellite ou un relief 3D fondé sur un modèle numérique de terrain, avec distance, dénivelé, temps de déplacement et profil d’altitude.

05Des photos au fil du parcoursUne bande de vignettes et des médias liés au parcours s’ouvrent dans une visionneuse légendée. L’implémentation prend aussi en charge les clips vidéo, chargés à leur ouverture.

06La complexité au bon momentLes données cartographiques sont préchargées à l’intention, puis MapLibre est chargé à l’ouverture des randonnées. Sur mobile, un panneau inférieur remplace la boîte de dialogue de bureau.

Dans le produit9 écrans

Le hub personnel

3 écrans

Le hub personnelIdentité alpine, profil et liens en mode clair.

À la nuit tombéeLa même page dans sa palette sombre, vert pin.

Mise en page étroite du profil personnel et des liens. — **Sur petit écran**La page réelle à 390 pixels CSS de large.

Randonnées, relief et photographies

4 écrans

Parcours de randonnée à Nantua sur une carte chargée, avec repères photo et choix du fond de carte. — **Suivre le parcours**Une carte de randonnée chargée, avec itinéraire et repères photo.

Parcours de Nantua sur une carte de relief 3D inclinée avec images satellite. — **Le paysage en 3D**Des images satellite sur un véritable modèle de relief.

Statistiques, vignettes photo horodatées et profil d’altitude de la randonnée à Nantua. — **Les détails de la randonnée**Distance, dénivelé, temps de déplacement, photos et profil d’altitude.

Visionneuse montrant le lac de Nantua depuis les falaises, avec légende, compteur et commandes de navigation. — **Depuis le sentier**Une visionneuse légendée prolonge le récit du parcours.

Des points d’ancrage

2 écrans

Carte mondiale avec la route orthodromique entre Lyon et San Francisco. — **Entre Lyon et San Francisco**Une route orthodromique relie les deux points d’ancrage de l’année.

Carte des parcs nationaux américains avec trois parcs visités sur 63 au moment de la capture. — **Un objectif au long cours**Une carte des parcs nationaux américains met en valeur ceux déjà visités.

Conçu avec

Léger par défaut. Plus riche quand on l’explore.

Astro et TypeScript assurent le rendu statique et la validation du contenu. Le CSS pilote les thèmes. MapLibre anime les cartes de randonnée, tandis que des cartes SVG projetées présentent les voyages et les parcs nationaux. La publication cible un hébergement statique S3. Des réglages de publication limitent l’exposition des extrémités des parcours ; c’est une précaution, pas une garantie d’anonymat.

Conçu avec

Stack

AstroTypeScriptZodMapLibre GL JSCSSS3

À suivre

Retour à tous les projets

Un projet similaire ?

Parlons-en Voir le site Projet suivant ↗