Refonte de mon portfolio : nouvelle charte graphique, SEO et identité visuelle
Tout développeur web finit par regarder son propre site et se dire : "Il ne me ressemble plus." C'est exactement ce qui m'est arrivé en mai 2026. Voici un retour honnête sur ce que j'ai changé, pourquoi, et comment.
Pourquoi refaire un site qui "marchait" déjà ?
Un portfolio est une vitrine. Si vous proposez des sites modernes, performants et bien référencés à vos clients, le vôtre doit l'être aussi. Le mien accusait plusieurs lacunes :
- Une charte graphique qui manquait de cohérence
- Un SEO de la page d'accueil perfectible
- Un footer et un header qui avaient été retouchés à la marge trop de fois
- Un logo qui ne reflétait plus mon positionnement actuel
La refonte n'était pas une question de caprice, c'était une question de cohérence professionnelle.
La nouvelle charte graphique et le design system
Le premier chantier a été de poser des bases solides avec un design system structuré. Cela signifie définir une palette de couleurs cohérente, une typographie unifiée, et des composants réutilisables plutôt que des styles éparpillés dans le code.
Concrètement :
- Refonte complète du fichier CSS principal de la section hero
- Harmonisation des couleurs sur l'ensemble des pages
- Mise à jour du guide de design system documentant toutes les décisions visuelles
- Plus de 700 lignes de CSS retravaillées pour plus de clarté et de maintenabilité
L'objectif était simple : qu'un regard sur le site suffise à comprendre qui je suis et ce que je fais.
Le nouveau logo
Le logo a été retravaillé pour être plus lisible, plus moderne, et mieux adapté aux différents contextes d'utilisation (web, réseaux sociaux, favicon). Les fichiers ont été optimisés au format WebP pour réduire le poids sans perte de qualité visible.
Optimisation SEO de la page d'accueil
La page d'accueil est la plus importante en termes de référencement naturel. J'ai revu en profondeur :
- La structure des balises (titres H1, H2, H3) pour mieux hiérarchiser le contenu
- Les textes des sections pour intégrer les bons mots-clés sans sacrifier la lisibilité
- Les métadonnées (title, description, Open Graph) pour améliorer le taux de clic depuis Google
- La sémantique HTML pour faciliter la lecture par les robots des moteurs de recherche
Le SEO n'est pas une science exacte, mais une discipline de rigueur. Chaque détail compte.
Refonte du header et du footer
Le header et le footer sont les éléments présents sur toutes les pages. Ils méritent une attention particulière.
Header : simplifié, avec une meilleure gestion du comportement au scroll et un affichage plus propre sur mobile.
Footer : entièrement revu, avec une organisation plus claire des informations de contact, des liens utiles, et une mise en page responsive retravaillée sur plus de 330 lignes de code.
La page d'accueil
La home est la pièce maîtresse. C'est elle qui donne la première impression. J'ai retravaillé :
- Le hero (la section principale visible dès l'arrivée sur le site)
- L'ordre et la mise en valeur des sections
- La cohérence avec la nouvelle charte graphique
Plus de 900 lignes de template ont été revues pour aligner le fond et la forme.
Mise à jour des coordonnées
Un détail qui a son importance : l'adresse email de contact a été mise à jour pour pointer vers la bonne adresse. Basique, mais indispensable.
Ce que cette refonte m'a appris
Refaire son propre site est souvent plus difficile que de refaire celui d'un client. On est à la fois le décideur, le développeur et l'utilisateur. On a du mal à trancher, on reporte, on chipote.
La clé ? Traiter son propre projet comme un projet client, avec un périmètre défini, des priorités, et une date de mise en ligne.
Si vous avez un projet de création ou de refonte de site web dans le Var ou en full remote, n'hésitez pas à me contacter. Je serais ravi d'en discuter.