Après plusieurs mois à développer et affiner mon portfolio, j’ai eu envie de créer un espace dédié à mon parcours initial à l’École 42. Plutôt que de simplement lister des projets sur un CV, j’ai conçu une page de profil dynamique qui regroupe l’ensemble de mes statistiques, compétences et réalisations du cursus.
Un dashboard dédié pour centraliser mon expérience 42
L’objectif de cette nouvelle page est de donner une vue synthétique et transparente de mon apprentissage :
- Stats & Progression : Niveau atteint dans le cursus, points de correction et wallet restants.
- Badges & Achievements : Tous les défis et accomplissements débloqués au fil des projets.
- Projets Validés : Un récapitulatif complet de mes réalisations avec les notes obtenues et l’accès aux détails des évaluations.
- Top Compétences : La répartition visuelle de mes compétences techniques (C, C++, architecture, travail en équipe…) acquises au cœur du cursus.
Côté technique : Un peu de Front-End et de dynamisme
Pour rendre l’expérience agréable et ne pas surcharger la page, j’ai apporté une attention particulière à l’ergonomie :
- Accordéons natifs HTML5 : L’utilisation des balises
<details>et<summary>permet de déplier facilement chaque section (Profil, Badges, Projets, Compétences) selon ce qu’on cherche. - Traitement de la donnée en JS : Un script asynchrone parcourt et extrait directement les données de mon cursus pour générer dynamiquement les cartes de projets, les barres de niveau et les badges.
- Intégration fluide : Le tout s’intègre parfaitement dans la charte graphique sombre inspirée de l’univers 42.
Pourquoi ce projet ?
À l’École 42, on apprend à apprendre, mais surtout à construire des solutions concrètes. Intégrer ces données dans mon propre site était un excellent exercice d’UI/UX et de manipulation de données front-end, tout en offrant une traçabilité claire de mes bases techniques.
N’hésitez pas à jeter un œil à cette nouvelle section directement sur la page Profil 42 de mon site !