Ce site

Il est lui-même une démonstration de ce que je construis.

Pour
Fondateurs et startups, PME et opérations, Équipes métier, Agences et cabinets
Offre
Build + AI
Étude de cas
Projet réel, en ligne

Un site personnel construit comme un produit : mon nom sur toute la largeur, transitions en pixels, démos fonctionnelles, pages par profil, en quatre langues.

Problème

Un Product Engineer qui se présente avec un CV en ligne ne prouve rien.

Il fallait un site qui démontre la capacité à concevoir, construire et livrer, et qui parle à chaque décideur de son propre problème.

Contexte

Utilisateurs
Fondateurs, responsables des opérations, équipes produit et techniques, agences.
Processus existant
Un positionnement et une cible définis dans deux documents stratégiques.
Contraintes
Rapide sur mobile, accessible au clavier, respect de « réduire les animations », aucune dépendance serveur.
Outils en place
  • Vite
  • GSAP
  • Lenis
  • Canvas

Solution

Un site statique multi-pages construit avec Vite. À l'accueil, mon nom occupe toute la largeur et la photo détourée prend la place du i. Les images, les transitions entre pages et le pied de page partagent le même langage de pixels, dessiné en canvas.

Les démos fonctionnent réellement dans le navigateur, et la communication est découpée par profil de décideur.

Pourquoi cette approche. Prouver plutôt qu’affirmer : chaque promesse du site est démontrée par le site lui-même.

Architecture

Infrastructure

  • Vite Build multi-pages, inclusions HTML partagées, découpage du code par page.

Interface

  • HTML statique Pages générées à l’avance : rapides, indexables, sans serveur.
  • Pixels Transitions, images et pied de page dessinés en canvas, arrêtés dès qu’ils quittent l’écran.

Automatisation

  • GSAP + Lenis Scroll fluide, sections épinglées, révélations au rythme de la lecture.

Données

  • Démos Agent, workflow, portail et dashboard qui fonctionnent avec des données d’exemple.

Sortie

  • Hébergement Fichiers statiques déployables sur Vercel, Hostinger, OVH ou un VPS.
Survolez ou touchez un bloc pour voir son rôle dans le système.

Fonctionnalités

  • Le nom et la silhouetteLe mot occupe toute la largeur, et la photo détourée prend la place du i.
  • Transitions en pixelsEntre les pages, sur les images et dans le pied de page : un seul langage visuel.
  • Détourage localLa photo a été détourée sur la machine avec le framework Vision, sans service en ligne.
  • Quatre démos fonctionnellesPas des captures : de vrais composants, manipulables.
  • Pages par profilFondateurs, PME, équipes métier, agences : un discours par problème.
  • Menu rapide au clavier⌘K ou Ctrl K pour aller partout.
  • AccessibilitéNavigation clavier, contrastes vérifiés, animations réduites sur demande.
  • Identité générée par scriptLogo vectorisé, favicons et image de partage produits par le code.

Résultat

  • Être compris en moins de dix secondes par un décideur.
  • Démontrer plutôt que décrire.

Comment on le mesure

  • Demandes de contact qualifiées
  • Pages consultées par profil
  • Temps passé sur les études de cas

Ce que j’ai fait

  1. Positionnement et message
  2. Direction artistique
  3. Développement
  4. Motion design
  5. Mise en ligne