PortfolioPortfolio

Description de l'expérience

Un portfolio personnel conçu pour centraliser et mettre en valeur le parcours professionnel, les réalisations et les expériences, à l'image d'un CV interactif et vivant. L'enjeu était autant esthétique que technique : créer un espace qui reflète une identité, donne à voir un parcours et facilite la prise de contact, le tout dans une expérience de navigation fluide et agréable. Le site se structure autour de plusieurs pages clés : une page d'accueil offrant une vue d'ensemble du profil, une page à propos présentant l'historique et les valeurs, une page des expériences listant l'ensemble des réalisations, chacune disposant de sa propre page de détail pour une présentation approfondie, et enfin une page de contact intégrant un formulaire d'envoi ainsi qu'une carte de localisation. Le tout agrémenté d'un mode sombre pour le confort de navigation. Ce projet fait office de laboratoire : un espace pour expérimenter, tester de nouvelles approches et pousser certaines idées techniques. Dans cette optique, le parti pris a été de limiter au maximum le recours aux librairies externes. La grande majorité des composants et fonctionnalités ont été développés à la main, favorisant la maîtrise totale du code et des rendus. Une attention particulière a été portée à l'accessibilité et à la conformité RGAA, ainsi qu'au SEO et au référencement naturel, deux axes traités avec soin dès la conception. Le porfolio est voué à évoluer chaque jour avec l'intégration des nouvelles actualités.

Mots clés

• Portfolio
• Référencement
• SEO
• Accessibilité
• RGAA
• Expériences
• CV dynamique

Missions et détails

• Conception du PorfolioMaquette et Design / Développement

  Le design a débuté par une phase d'inspiration sur Dribbble, permettant d'explorer différentes directions visuelles et de construire progressivement une identité graphique cohérente. Les premières orientations ont ensuite été formalisées sur Figma, servant de base au développement. La direction graphique s'est affinée au fil du temps, le design évoluant de manière itérative en parallèle du développement pour coller au mieux au rendu final souhaité.

  En terme de développement, Next.js a été retenu comme socle technique pour ses capacités de rendu côté serveur (SSR), qui favorisent naturellement le référencement et l'indexation des pages, un avantage non négligeable pour un site vitrine. Sa base React permet par ailleurs une architecture de composants claire et maintenable.

  Dans une logique de maîtrise totale, le recours aux librairies externes a été volontairement limité, la grande majorité des composants et fonctionnalités ayant été développés à la main. Parmis les rares librairies tierces utilisées, Brevo a été utilisé pour l'envoi des mails de formualire de contact, Turnstile pour la vérification anti-bot de celui-ci et Leaflet pour la génération de carte interactive au niveau de la page de contact.

  De nombreux petits audits ont été réalisés dans une perspective de conformité RGAA (accessibilité) et optimisation SEO dans le but d'obtenir un référencement naturel rapide et efficace.

  Le site est déployé sur Vercel avec un nom de domaine enregistré sur OVH.

  • Design
  • Figma
  • Dribble
  • Next.js
  • SSR
  • Brevo
  • Turnstile
  • Leaflet
  • Vercel