le trait.
Raisonnement — en trois étapes
1 · Les fils rouges. Trois CV, trois visages, un même homme. Le fil créatif (beaux-arts au Port, logos streetwear — Ciblée, Fazer Mix, Phazone, Burning —, quinze ans d'auto-entrepreneuriat) et le fil humain (vendeur, démonstrateur, animateur dessin auprès des jeunes dès 2004). Le zigzag apparent devient la force du récit : Alexandre connaît les deux côtés du comptoir. Et depuis vingt ans, il transmet.
2 · Les bascules. 2003-2004 (double naissance beaux-arts + commerce, premier acte de transmission), 2005-2009 (l'école du terrain), 2010 (le déclic : le trait devient métier), 2010-2025 (quinze ans d'atelier). La projection en découle : un formateur qui a pratiqué avant d'enseigner.
3 · Les gestes. Le scroll fait avancer le fil — avancer dans la page, c'est avancer dans la vie. Le drag est réservé au déclic de 2010 : glisser soi-même, c'est éprouver la prise d'initiative. Le hover révèle la matière, le clic ouvre les preuves. L'exploration est récompensée, jamais imposée.
1 · Architecture narrative — cinq scènes
L'Étincelle — curiosité, intimité. 2003-2004, La Réunion : beaux-arts + bac commerce, premier acte de transmission auprès des jeunes.
L'École du vivant — respect, empathie. 2005-2009 : écouter, démontrer, s'adapter. Le terrain comme école du formateur.
Le Déclic — décision, fierté. 2010, auto-entrepreneur : le geste du tampon à glisser, quatre marques habillées.
L'Atelier / Transmission — admiration, exploration. 2010-2025 : vidéo Créactif, planches retournables, frise qui respire.
Le Courant passe — évidence, contact. 2026 → : « Je transmets ce que j'ai mis 20 ans à maîtriser. »
2 · Interactions, scène par scène
Scène 1 (≈15 s) : tracé auto du fil, parallaxe doux, respiration avant le scroll. Scène 2 (≈20 s) : vitrines, hover = illumination + particules convergentes. Scène 3 (≈15 s) : drag du tampon 2010, bascule au noir, bouton de secours + clavier. Scène 4 (≈25-30 s) : vidéo en autoplay muet, compteurs, planches flip 3D, frise et galerie à glisser. Scène 5 (≈15 s) : les fils convergent, CTA qui pulse une seule fois. Fil conducteur vertical qui se remplit au scroll.
3 · Palette sensorielle
Typographie : Archivo (grotesque affirmée) pour les titres, Source Serif 4 (chaleureuse) pour le récit. Rythme : alternance respiration (1, 3, 5) / densité (2, 4). Sons coupés par défaut — la vidéo Créactif est la seule bande-son, activable au clic.
4 · Spécifications techniques
Animations CSS/SVG (stroke-dashoffset) accélérées matériellement (transform, opacity). Particules et drag en JavaScript natif (pointer events, compatible tactile). Pas de WebGL lourd. Vidéo H.264, préchargement des métadonnées. Respect de prefers-reduced-motion, navigation clavier, contrastes AA, texte réel. Exportable en build statique.
5 · Justification des choix
Pourquoi un fil plutôt qu'une timeline ? Une timeline dit « voici mes dates » ; un fil dit « voici mon geste ». Pour un transmetteur, le médium est la preuve.
Pourquoi glisser le tampon de 2010 ? La mémoire kinesthésique surclasse la mémoire visuelle : ce qu'on a fait se retient mieux que ce qu'on a vu.
Pourquoi assumer le zigzag ? Le raconter comme deux fils qui se tressent le transforme en positionnement : un formateur qui a pratiqué avant d'enseigner.
Pourquoi si peu d'effets ? L'attention d'un recruteur est un budget de 2-3 minutes. La sobriété est la condition de la mémorabilité — on retient un geste net, pas un feu d'artifice.
Fermez ce panneau et vivez l'expérience — le concept ne vaut que par ce qu'il fait ressentir.
Alexandre PayetQuinze ans sans lâcher le trait.
Le projet phare n'est pas un projet : c'est la longévité. Cliquez une planche pour la retourner.
