L'objectif
Présenter mon activité de développeur freelance avec un site qui démontre lui-même ce que je sais faire : un design affirmé, des animations fluides, des pages rapides et un référencement qui permet d'être trouvé partout en France.
Le motion design
Le nom se dévoile lettre par lettre à l'arrivée, les titres apparaissent derrière un masque, les projets s'empilent comme des cartes au fil du scroll et les chiffres s'incrémentent quand ils entrent à l'écran. Le défilement est lissé avec Lenis et synchronisé avec GSAP, un curseur personnalisé et des boutons magnétiques réagissent à la souris.
Toutes les animations sont désactivées pour les visiteurs qui préfèrent réduire les mouvements : le contenu s'affiche alors directement, dans son état final.
Un site vraiment bilingue
Chaque page existe en français et en anglais avec sa propre adresse, ses balises hreflang et son image de partage. Les données des projets et des services sont centralisées, si bien qu'une même source alimente l'accueil, les articles, le sitemap et les données structurées.
Stack technique
- Next.js 16 & React 19Pages pré-rendues, routes FR et EN, métadonnées générées
- GSAP & ScrollTriggerAnimations liées au scroll : titres révélés, cartes empilées, compteurs
- LenisDéfilement fluide synchronisé avec les animations
- CSS ModulesDesign system en variables CSS, sans framework
- next/ogImages de partage générées pour chaque langue
SEO & performance
- Toutes les pages pré-rendues au build : HTML complet dès le premier octet
- Pages de services dédiées avec FAQ, fil d'Ariane et données structurées schema.org
- Graphe JSON-LD unique reliant la personne, l'activité et le site
- Sitemap bilingue avec liens hreflang, URLs canoniques et images de partage 1200×630
- Images en WebP et polices auto-hébergées pour un chargement rapide
