Étude de cas

Site Fan AS FAR

Une vitrine interactive dédiée au club de football AS FAR. Un projet 100% front-end conçu comme un véritable terrain de jeu pour repousser mes limites en JavaScript et en animations CSS sur mesure.

📅 Automne 2025 💻 Front-End 👤 Projet individuel 🖥️ Desktop Only

🐙 Voir le code

Contexte

L'objectif de ce projet était de concevoir l'interface web d'un club de football (l'AS FAR) en me concentrant sur l'expérience visuelle. N'ayant pas encore toutes les compétences pour coder des interactions Javascript complexes de zéro, j'ai pris le parti d'agir comme un véritable "Intégrateur". Mon but était de construire une base HTML/CSS solide, puis d'y greffer intelligemment des composants open-source (boutons animés, dark mode, carrousel) trouvés sur des plateformes comme Uiverse, en les adaptant à mon design.

Ma contribution

Ce que j'ai réalisé concrètement sur ce projet :

Intégration web : Structuration complète de la page en HTML5 sémantique et mise en forme via CSS3.
Sourcing et Veille : Recherche de composants UI interactifs pertinents et modernes pour dynamiser l'expérience utilisateur.
Adaptation de code tiers : Analyse, intégration et modification de scripts JavaScript et de styles CSS externes pour qu'ils s'intègrent parfaitement dans mon écosystème sans conflit.
Personnalisation : Ajustement des variables CSS, des couleurs et des typographies des composants importés pour respecter la charte graphique du club.

Stack technique

Technologies utilisées :

HTML5 CSS3 JavaScript

Captures d'écran

La section des Joueurs et Infos pratiques

Ce que j'ai appris

🧩

Intégration de composants

J'ai appris qu'être développeur, c'est aussi savoir utiliser le code existant. J'ai compris comment importer des snippets complexes et les lier à ma propre structure HTML.

📖

Lecture de code tiers

Prendre du code écrit par quelqu'un d'autre sur Uiverse m'a forcé à lire et à décortiquer des logiques CSS et JS que je ne connaissais pas pour pouvoir les modifier.

🎨

Résolution de conflits CSS

L'un des plus grands défis de l'intégration est d'éviter que le CSS importé d'un composant ne "casse" le reste du site. J'ai appris à isoler et cibler mes styles.

🚀

Pragmatisme

Plutôt que de rester bloqué des jours sur un carrousel que je ne savais pas coder, j'ai appris à être pragmatique et à trouver des solutions existantes pour avancer sur mon projet.