Refonte 20 Bornes - Maxence Coste

Le Défi

Ce projet est né d'un constat simple : le site actuel de l'événement des "20 Bornes" accusait le poids des années. Il n'était pas responsive (illisible sur mobile), souffrait de problèmes de chargement CSS et renvoyait une image vieillissante qui ne correspondait plus au dynamisme de la course.

Mon objectif : Créer une refonte moderne et performante pour m'entraîner, avec l'ambition de présenter cette maquette fonctionnelle à la mairie d'Andrésy pour remplacer la version actuelle.

Choix Graphiques & UX

Pour assurer une transition douce pour les habitués, j'ai conservé les codes couleurs de l'affiche officielle (Sarcelle, Orange, Magenta). Cependant, j'ai voulu rompre avec le côté statique des sites institutionnels classiques.

Aperçu de la page d'accueil avec formes organiques

Dynamisme visuel

J'ai intégré des formes organiques ("blobs") en arrière-plan pour apporter un côté fun et vivant. L'idée est de refléter l'énergie d'une course à pied populaire, plutôt que de présenter un simple tableau d'inscription.

L'expérience utilisateur (UX)

J'ai réorganisé l'information pour qu'elle soit accessible en moins de 3 clics. La distinction des épreuves par couleur permet à l'utilisateur d'identifier immédiatement sa course (10km, 5km ou Semi).

Développement & Intégration

J'ai choisi Bootstrap 5.3 pour sa fiabilité et pour accélérer le développement de la grille responsive. Cependant, je ne voulais pas d'un site "standard". J'ai donc développé une couche CSS personnalisée conséquente.

Focus : La Navbar

C'est un élément que j'apprécie particulièrement sur ce projet. Bien que simple en apparence, j'ai travaillé les effets de survol (hover) et l'espacement pour lui donner un aspect "mignon" et accueillant, qui invite à la navigation.

Le code reste propre et sémantique, assurant une bonne accessibilité.

                    <nav class="navbar navbar-expand-lg fixed-top shadow-sm">
                    <div class="container">
                    <a class="navbar-brand" href="index.html">
                    <img src="images/logo.webp" alt="Logo 20 Bornes">
                    </a>
                    <ul class="navbar-nav gap-3">
                    <li class="nav-item">
                    <a class="nav-link active" href="index.html">Accueil</a>
                    </li>
                    </ul>
                    </div>
                    </nav>
                

Performance & SEO

Un site lent fait fuir les utilisateurs. J'ai donc optimisé chaque ressource :

Format WebP : Toutes les images ont été converties pour réduire leur poids sans perte de qualité visible.
Code minifié : Utilisation des bonnes pratiques Bootstrap.
SEO technique : Balisage sémantique rigoureux (header, nav, main, article).

Le résultat est sans appel sur Google PageSpeed Insights :

100

SEO

99

Performance

100

Bonnes Pratiques

Scores obtenus sur Desktop via PageSpeed Insights

Et la suite ?

Le projet est fonctionnel et prêt à être présenté. Pour une version "v2", j'envisage de remplacer les formes abstraites par des photos réelles des éditions précédentes, ce qui est une norme appréciée dans le milieu de la course à pied. J'attends avec impatience les retours de la mairie pour pousser le projet encore plus loin.

← Retour aux projets

Les 20 Bornes d'Andrésy

Rôle

Stack Technique