Portfolio-27/08/2025
Website

Mon Portfolio

Ce portfolio est un espace personnel conçu comme une vitrine évolutive de mon parcours de développeur. Il regroupe une sélection de projets réalisés au fil de mon apprentissage et de mes expériences professionnelles. À travers cette plateforme et son blog intégré, je partage mes réalisations, ma méthodologie de travail, mes réflexions techniques et les compétences que j'ai développées. Chaque projet présenté illustre une problématique concrète, une solution technique apportée et une progression continue.

TypeScriptNuxtTailwindCSSGitHubDocker
Page d'accueil de ce site (portfolio)

Présentation du projet

Ce portfolio a été pensé comme un projet à part entière, avec les mêmes exigences qu'une application en production. Il centralise mes réalisations tout en illustrant ma capacité à concevoir des interfaces modernes, performantes et évolutives.

Au-delà de l'aspect visuel, l'accent a été mis sur une architecture front-end robuste, une expérience utilisateur fluide, ainsi que sur l'optimisation et l'accessibilité. L'ensemble a été structuré pour être maintenable dans le temps et facilement extensible.

Optimisation SEO

Le projet repose sur Nuxt 3 afin de bénéficier du Server-Side Rendering (SSR) et d'une optimisation SEO native, améliorant significativement les performances et la visibilité.

L'interface est construite avec TailwindCSS, favorisant rapidité d'itération et cohérence visuelle. L'application est organisée en composants réutilisables (cartes projets, galerie dynamique, layout global), assurant une base maintenable et évolutive.

Une attention particulière a été portée à la gestion des performances et à l'expérience utilisateur, notamment à travers l'optimisation du chargement des ressources, la gestion des états d'interface et la fluidité de navigation entre les différentes sections.

Le référencement est également renforcé par l'utilisation de données structurées (schema.org), permettant d'améliorer la compréhension du contenu par les moteurs de recherche et d'optimiser l'affichage des résultats.

Exemple d'image de prévisualisation Open Graph générée dynamiquement à partir des données récupérées
Mise en place de l'affichage Open Graph
Affichage de la page projets

Présentation des projets

Afin de présenter plusieurs projets de manière simple et cohérente, j'ai fait le choix d'opter pour une intégration statique directement dans l'application.

Cette décision a été motivée par la volonté de garder un contrôle total sur la structure de chaque page projet, tout en facilitant la création de pages dédiées avec un contenu riche et personnalisé.

Une approche dynamique avec base de données aurait nécessité une gestion supplémentaire (modélisation, synchronisation, génération de pages), sans réel gain dans ce contexte. Le choix du statique permet ainsi de conserver une implémentation plus simple, tout en restant adaptée aux besoins du projet.

Mise en ligne

Afin de simplifier le déploiement de l'application, j'ai choisi d'utiliser Docker, ce qui me permet de créer une image reproductible et de la déployer rapidement sur mon serveur.

Pour automatiser ce processus, j'ai mis en place un pipeline GitHub. À chaque mise à jour sur la branche principale, celui-ci récupère les dernières modifications, construit une nouvelle image Docker, puis déclenche automatiquement le redéploiement en appelant une API sur mon serveur.

Pipeline CI/CD sur Github

Perspectives d'évolution

Ce portfolio a vocation à évoluer avec mon parcours. Des améliorations sont prévues comme l'ajout d'un blog technique, l'optimisation SEO avancée, et autres.

Ce projet reflète ma manière de travailler : structurer, optimiser, itérer et améliorer continuellement. Il évoluera au même rythme que mes compétences et mes expériences.