Portfolio

Mon portfolio de développeur web freelance à Toulouse, reconstruit six fois depuis 2017 : du HTML/CSS à PHP, Angular, Symfony, React, puis Inertia.js avec rendu côté serveur. Le site qui raconte le mieux mon évolution technique.

Le contexte

Un portfolio de développeur a deux rôles : montrer ce que je sais faire, et être trouvé. Les recruteurs et les clients potentiels arrivent souvent par Google. Le site doit donc être à la fois une vitrine soignée et une démonstration concrète de mes compétences.

C'est aussi mon terrain d'expérimentation. À chaque fois que j'ai appris une nouvelle technologie, j'ai reconstruit mon portfolio avec.

Six versions en neuf ans

2017, HTML, CSS et JavaScript. La toute première version, écrite à la main pendant ma formation. Un site statique simple, pour poser les bases.
2019, premiers pas côté serveur. Toujours en HTML, CSS et JavaScript, mais avec un formulaire de contact en PHP. C'est mon premier traitement côté serveur : validation des données et envoi d'e-mails.
2020, Angular. Mon premier framework front-end. Le site devient une application monopage, avec des composants, du routage côté client et TypeScript.
2023, Symfony et Twig. Retour au rendu serveur, avec une vraie base de données. Les projets ne sont plus codés en dur : ils sont gérés depuis un back-office.
2025, Symfony et React avec une API. Une architecture découplée : une API Symfony d'un côté, une application React de l'autre. Plus de souplesse côté interface, mais deux applications à maintenir et un rendu côté client moins favorable au référencement.
2026, Inertia.js avec SSR. La version actuelle, qui réunit le meilleur des deux précédentes.

L'architecture actuelle

Inertia.js relie directement Symfony et React, sans API intermédiaire :

Symfony gère le routage, les contrôleurs et les données (projets, parcours) stockées en MySQL ;
React, en TypeScript, gère toute l'interface ;
le rendu côté serveur (SSR) envoie à Google et aux réseaux sociaux un HTML complet dès le premier chargement, puis l'application prend le relais pour une navigation fluide.

On obtient la réactivité d'une SPA et le référencement d'un site classique, avec une seule base de code.

Le SEO technique

des URLs lisibles (/projets/utopix plutôt que /project/7), avec des redirections 301 depuis les anciennes adresses ;
des métadonnées uniques par page : title, meta description, URL canonique, Open Graph et Twitter Card, avec une image de partage dédiée à chaque projet ;
de vraies études de cas pour chaque projet, avec une structure de titres H1 et H2 propre ;
un maillage interne entre projets, avec des liens précédent/suivant descriptifs ;
des images optimisées en WebP, avec des textes alternatifs descriptifs.

Le back-office

Les projets, leurs textes, leurs stacks et leurs captures sont gérés depuis une interface d'administration. Ajouter un nouveau projet ne demande aucune modification du code.

Ce que ces refontes m'ont appris

Reconstruire le même site avec six stacks différentes m'a appris à comparer concrètement les approches : rendu client ou serveur, application monolithique ou découplée, framework complet ou bibliothèque. Aujourd'hui, je ne choisis plus une technologie parce qu'elle est à la mode, mais parce qu'elle répond au besoin du projet. C'est ce que j'applique pour mes clients.

Boite à outils du projet:

React
TypeScript
InertiaJS
SSR
Symfony
MySQl
Sass
Git

Site

Github