Projet personnel · 2026
Portfolio interactif
Créer une expérience digitale qui présente un parcours professionnel autrement qu'un CV, et qui soit elle-même la preuve des compétences qu'elle décrit.
Concept
Le basket sert de système narratif, pas de décor. Son vocabulaire structure la lecture : on découvre son histoire, puis son scouting report sur la tablette du staff, sa méthode, ses expériences, ses meilleurs moments, et l'on prend contact.
Chaque terme de la métaphore est traduit en clair sous le titre de sa section, pour qu'un recruteur comprenne le site sans connaître le basket.
Parcours
- 01Tip-offRaconter le parcours, du terrain au digital
- 02ScoutingRésumer le profil comme un rapport de coach
- 03Game PlanExpliquer la méthode de travail
- 04GamesProuver par les expériences
- 05HighlightsMontrer les réalisations marquantes
- 06PlaybookLister les compétences, sans notes inventées
- 07Le terrainRelier le parcours sportif au métier, preuves à l'appui
- 08Free agentDire ce que je recherche
- 09Next GameFaciliter le contact
Méthode
Le projet a suivi son propre Game Plan.
- 01ObserverBrief détaillé : objectifs, cible recruteur, contraintes, règle « ne rien inventer ».
- 02AnalyserChoix de l'architecture, de l'arborescence et des priorités UX : le profil d'abord, l'esthétique ensuite.
- 03ConstruireDesign system (couleurs, typographies, composants) puis prototype statique de toutes les sections.
- 04ExécuterFiches détaillées, interactions, animations, version anglaise, SEO technique et mise en ligne.
- 05MesurerTests sur mobile et desktop, accessibilité, performance, puis mesure d'audience sans cookie.
Identité visuelle
Le site applique la charte graphique MB : un monogramme dessiné d'un seul trait, où le M et le B partagent le même jambage, et un point orange, le ballon, comme seule touche de couleur. Les arcs du B reprennent ceux du terrain.
- Noir terrain#0E0F11
- Anthracite#16171A
- Craie#F2F0EA
- Gris tactique#9C9B96
- Orange basket#FF6A13
Big Shoulders pour les titres, les chiffres et les labels : un caractère condensé dessiné d'après la signalétique de Chicago, celle des tableaux d'affichage et des maillots. Familjen Grotesk pour le texte, une grotesque aux détails dessinés à la main. Les icônes suivent la même règle que le logo : un trait de 1,5 px, des extrémités arrondies, aucune surface pleine.
Choix techniques
Accessibilité
HTML sémantique, contrastes vérifiés, navigation au clavier, lien d'évitement, respect du réglage « mouvement réduit ». Aucune information n'est cachée derrière une animation.
Performance
Pages générées à l'avance, polices auto-hébergées, très peu de JavaScript : menus et panneaux reposent sur les fonctions natives du navigateur. Le site reste complet sans JavaScript.
Bilingue
Deux versions complètes, en français et en anglais, chacune avec ses propres adresses et ses balises de langue pour les moteurs de recherche.
Maintenabilité
Tout le contenu est séparé du code : ajouter une expérience ou corriger un texte ne demande de toucher à aucun composant.
- Next.js
- React
- TypeScript
- Tailwind CSS
- SVG
- Vercel
Réalisation
Concept, brief, contenus et pilotage : Mamady Bal. Développement réalisé avec l'assistance d'une IA (Claude), étape par étape et validé à chaque livraison.