Compétences
Le développement front-end transforme des contenus, des données et des actions en une interface compréhensible, accessible et fiable. La compétence ne se réduit pas à reproduire une maquette : il faut construire une hiérarchie, gérer les états, adapter la mise en page à la largeur disponible, préserver la navigation au clavier, annoncer correctement les changements et limiter le coût des ressources exécutées dans le navigateur.
Avec React et Next.js, je distingue les composants qui peuvent rester rendus sur le serveur de ceux qui nécessitent réellement de l'interactivité. Cette séparation réduit le JavaScript envoyé, clarifie les responsabilités et protège le chargement initial. Les animations restent isolées dans des composants clients, respectent la préférence de mouvement réduit et utilisent une portée explicite. L'internationalisation, les métadonnées et les routes localisées font partie de l'architecture plutôt que d'être ajoutées après les pages.
J'évalue une interface avec plusieurs types de preuves : comportement responsive réel, tests de composants et de parcours, contrôle visuel, accessibilité sémantique et mesures de performance. Un score Lighthouse aide à détecter un écart, mais il reste une mesure datée et ne remplace ni l'usage ni la lecture du code.
React 19.2 a ajouté le composant Activity, le prérendu partiel et des pistes dédiées dans Chrome DevTools. Ces outils déplacent le travail front-end au-delà de l'affichage : il faut aussi savoir prioriser le rendu, préserver l'état et mesurer les performances réelles.
Consulter la source : ReactPour le nouveau site corporate, j'ai transformé trois maquettes Figma en mise en page continue plutôt qu'en versions séparées pour quelques écrans. J'ai construit des composants partagés, séparé les éléments serveur des interactions, centralisé les traductions et réparti les animations entre GSAP, Motion et Lenis selon leur rôle. Les vidéos et images sont intégrées selon leur usage, les préférences de mouvement réduit sont prises en compte et Lighthouse est mesuré après les étapes importantes. Les prototypes ont permis aux graphistes d'ajuster la direction sans obliger à reconstruire le socle technique.
Résultat — La page d'accueil et la page de contact sont déjà présentables sur plusieurs navigateurs et formats, avec un système de composants réutilisable. Le principal défaut mobile de l'ancien site a été traité dès le développement plutôt qu'après la mise en ligne.
Dans CAP2vie, j'étais principalement responsable de la visualisation D3.js d'une trajectoire de vie. Les réponses du questionnaire devaient devenir des périodes exactes ou estimées, réparties sur cinq dimensions et lisibles selon deux modes. Le graphique devait également permettre des corrections qui se répercutaient dans le formulaire. J'ai travaillé avec Vue et Nuxt, utilisé les primitives de D3.js plutôt qu'un composant prêt à l'emploi, et fait évoluer le rendu en trois versions principales afin de rapprocher progressivement la représentation de la méthode des chercheurs.
Résultat — Le prototype a rendu les réponses visibles, comparables et corrigeables depuis deux points d'entrée. Il m'a appris qu'une interface de données doit préserver la signification scientifique avant de chercher une finition visuelle spectaculaire.
Le portfolio associe Next.js 16, React 19, Tailwind CSS, shadcn/ui, MDX et GSAP. J'ai construit les routes bilingues, les dictionnaires serveur et client, la navigation, le thème, les transitions, le défilement Lenis, le blog, les formulaires et les pages éditoriales longues. La page d'accueil est rendue statiquement sans runtime React côté client pour son contenu principal, tandis que les interactions restent isolées. Les pages de réalisations et de compétences utilisent des sommaires, des largeurs de lecture limitées et de vrais niveaux de titres afin que leur volume ne produise pas un mur de texte.
Résultat — Le site est publié, responsive et couvert par des tests unitaires, de navigateur, visuels et bout en bout. Une mesure Lighthouse de juillet 2026 indique 95 en performance, 96 en accessibilité et 100 pour les bonnes pratiques et le SEO, valeurs que je conserve comme photographie datée plutôt que comme garantie permanente.
Les éléments de preuve décrivent des épisodes précis. Cette synthèse les replace dans les études de cas complètes : le contexte, ma contribution et le résultat permettent d'observer ce que cette compétence a rendu possible, avec le niveau de prudence nécessaire sur chaque résultat.
J'estime avoir un niveau intermédiaire confirmé. Je peux construire une application responsive et bilingue, organiser ses composants, intégrer des animations et couvrir ses parcours principaux. Je dois encore progresser dans la conception visuelle originale, la validation par des utilisateurs novices et l'optimisation fondée sur des profils de performance plus détaillés qu'un audit global.
Je conseille de concevoir avec le contenu réel et la quantité réelle de texte avant de finaliser les cartes ou les animations. Il faut ensuite vérifier les extrêmes : écran étroit, clavier, mouvement réduit, traduction plus longue, erreur réseau et contenu absent. Une interface réussie ne dépend pas de l'effet le plus visible, mais de sa capacité à rester claire lorsque les conditions idéales disparaissent.
Atteindre un niveau avancé en renforçant l'architecture de composants, l'accessibilité manuelle, la mesure des performances React et la capacité à transformer une direction artistique en système cohérent sans dépendre de solutions conventionnelles.
Je poursuis l'étude de React et Next.js, les tests avec Playwright et l'analyse des Performance Tracks. La finalisation du site corporate et les prochaines itérations du portfolio serviront à travailler plus profondément la composition, l'accessibilité et la réutilisation des composants.
