Autres projets

Deux autres sites que j’ai conçus et codés seul, du brief à la mise en ligne.

Amélie Drouaud, psychologue

Rôle
Design, code, SEO, mise en ligne
Quand
Août et septembre 2026
Stack
HTML, CSS, un peu de JavaScript, PHP pour le formulaire

Un site de psychologue qui ressemble à son cabinet, pas à une start-up.

Amélie Drouaud est psychologue clinicienne à Nantes. Son site tournait sous WordPress. Je l’ai refait en site statique : ses textes gardés tels quels, les couleurs de son cabinet (blanc cassé, sable, terracotta doux, vert sauge), et plus rien à mettre à jour ni à corriger.

Ce que j’ai fait

  • J’ai écrit le brief avant la moindre ligne de code : ce qu’il fallait garder mot pour mot, les règles de design (de vraies photos, pas de dégradés passe-partout, pas de texte de remplissage) et les exigences SEO.
  • Huit pages en HTML et CSS, avec Cormorant Garamond et Inter servies par le site lui-même : aucune requête ne part chez Google.
  • Le SEO local : un titre et une description par page, des données structurées pour le cabinet avec son adresse, ses coordonnées et ses horaires, des données FAQ, et des redirections 301 depuis les anciennes adresses WordPress.
  • Une nouvelle page, « Quand consulter un psychologue ? », écrite pour ce que les gens cherchent vraiment.
  • Des images en WebP avec un repli en JPEG : les scans du code de déontologie sont passés de 570–789 Ko par page à 27–144 Ko.
  • Un formulaire de contact envoyé en SMTP, où l’on choisit comment être recontacté. Les rendez-vous passent par Doctolib.
La page « Quand consulter un psychologue ? » d’amelie-drouaud-psychologue.fr, en caractères à empattements sur fond blanc cassé
La page « Quand consulter un psychologue ? », sur amelie-drouaud-psychologue.fr.

Ce portfolio

Rôle
Design et code
Quand
Première version en novembre 2025, refait en octobre 2026
Stack
Next.js, React, CSS
Site
Vous y êtes

Un portfolio qui applique mon métier à lui-même.

Du papier blanc, de l’encre noire, une grille de douze colonnes, et de la couleur seulement quand elle veut dire quelque chose. La page ne se contente pas de dire que j’étudie la façon dont on lit une page : elle le montre.

Ce que j’ai fait

  • Mon nom découpé dans un datamosh : onze colonnes de couleur dessinées en direct par le navigateur, en CSS, que l’on peut mélanger.
  • Une carte d’aperçu qui suit le curseur quand on survole un client ou une mission.
  • Une barre de progression en forme d’entonnoir, qui se remplit section par section au fil du défilement.
  • « Voir la page comme je la vois » : une carte de l’attention, là où j’attends le regard, avec vos propres clics par-dessus, gardés dans votre navigateur seulement.
  • Des figures interactives plutôt que des captures : une analyse de zoning, un plan de marquage, un funnel web et app, et l’étude de cas Clivio.
  • Français et anglais avec hreflang, des données structurées pour le profil, l’étude de cas et ses dix-huit films, et un sitemap vidéo. Google Analytics ne se charge que si vous dites oui.
Le haut de ce portfolio avec la carte de l’attention activée : des zones chaudes sur le nom et l’introduction
Le haut de l’accueil, avec « Voir la page comme je la vois » activé. Le bouton est en bas à droite.
  • 99Performance
  • 100Accessibilité
  • 100Bonnes pratiques
  • 100SEO
  • 2/2Navigation agentique
Lighthouse sur l’accueil, testé comme un téléphone le 20 octobre 2026, médiane de trois passages. La navigation agentique réussit les deux contrôles qui s’appliquent.