Conception d'un portfolio professionnel
Réalisation d'un portfolio complet avec Next.js, GSAP, i18n bilingue, conformité RGPD, analytics et blog technique.
01
Présentation
Ce portfolio est un projet personnel visant à montrer ma palette technique et ma maîtrise d'un framework moderne. Plutôt que d'utiliser un template existant, j'ai choisi de le construire entièrement de zéro avec Next.js pour démontrer mes compétences en développement web complet — du frontend au déploiement.
02
Objectifs, contexte et enjeux
L'objectif principal était d'avoir un portfolio professionnel complet et d'augmenter mes compétences via ce projet. Le portfolio devait aller bien au-delà d'une simple page statique en intégrant de nombreuses fonctionnalités : Google Analytics, envoi d'emails, reCAPTCHA, animations GSAP, blog MDX, internationalisation bilingue (français/anglais), conformité RGPD avec bannière de cookies.
03
Les étapes — ce que j'ai fait
Développement itératif avec Next.js comme framework, Tailwind CSS pour le styling, GSAP pour les animations, shadcn/ui comme design system, MDX pour les articles de blog, Resend pour l'envoi d'emails, et Vercel pour le déploiement. Mise en place d'une suite de tests complète (Vitest + Playwright) et d'un pipeline CI/CD avec GitHub Actions.
04
Les acteurs — les interactions
Projet entièrement personnel. Toutes les décisions techniques, le design et le contenu sont de mon fait.
05
Les résultats
Le portfolio est en ligne sur orhanmadiassani.com avec un domaine personnalisé, un bon référencement SEO, des animations fluides, un blog technique avec 3 articles publiés, et une conformité RGPD complète. C'est un gros apprentissage de réalisation d'un projet qui va plus loin qu'une simple page.
06
Les lendemains du projet
Le portfolio continue d'évoluer avec l'ajout de nouvelles sections (compétences, réalisations, à propos) et de nouveaux articles. Il sert de vitrine professionnelle et de terrain d'expérimentation technique.
07
Mon regard critique
L'un des enseignements majeurs est l'importance d'anticiper les features en amont pour commencer avec une implémentation correcte. Par exemple, le site est traduit en deux langues et il fallait commencer par une structure dynamique selon la locale dans Next.js. Au début, j'avais commencé comme si le portfolio allait être seulement en français, ce qui a nécessité une refonte de la structure par la suite.