Compétence Portfolio

Créez un portfolio dont un responsable de recrutement, un chasseur de têtes ou un client se souvient après avoir fermé l'onglet : une idée visuelle forte, un texte spécifique, une animation qui a du sens, et une ingénierie qui tient bon quand quelqu'un ouvre les DevTools.

Le thème est choisi par personne. Rien ici ne fixe les couleurs, les polices ou le style de mise en page. Chaque valeur concrète dans ce fichier est un exemple du motif, pas une valeur par défaut à copier.

1. Barre de qualité (à vérifier avant de terminer)

Une seule direction artistique, exécutée de manière cohérente. Un concept nommé guide la typographie, les couleurs, la mise en page, l'animation et le ton du texte. Ne mélangez jamais de styles non liés (verre + néon + brutalisme + dégradés) sur un même site.
Un contenu réel et spécifique. Chaque affirmation provient du CV, des dépôts, des profils ou des messages de l'utilisateur. Des chiffres concrets, des noms de pile, des rôles, des dates. Pas de lorem ipsum, pas de métriques inventées, pas de "développeur passionné qui aime coder".
Le travail est le héros. Les 2 à 4 meilleurs projets obtiennent le plus d'espace et idéalement leur propre page d'étude de cas avec quelque chose d'interactif. Tout le reste se trouve dans un index consultable et filtrable.
La typographie porte le design. Une police d'affichage expressive + une police de texte lisible + une police mono/utilitaire optionnelle. Des tailles fluides en clamp(). Inter, Roboto, Arial ou les polices système ne sont jamais la voix d'affichage.
L'animation est chorégraphiée, pas saupoudrée. Une intro, des révélations au défilement, et 1 à 2 moments emblématiques. Tout respecte prefers-reduced-motion et se dégrade proprement.
Fonctionne partout. Du 360px à l'ultra-large, utilisable au clavier, contraste WCAG AA, premier affichage rapide, entièrement lisible sans WebGL ni animation JS.
Livré. Zéro erreur de type, build de production réussi, balises meta/OG par route, lien vers le CV, page de contact qui fonctionne, configuration de déploiement.

2. Flux de travail

Rassemblez le matériel. Lisez tout ce qui est fourni : CV PDF/DOCX, site existant, READMEs, données GitHub, notes. Demandez uniquement les éléments essentiels manquants (nom, rôle, public cible, 2 à 4 projets phares, liens, préférence visuelle). Si aucune préférence n'est donnée, choisissez une direction vous-même et dites laquelle et pourquoi.
Choisissez l'archétype et le niveau d'ambition (Section 6A.2) qui correspondent à la personne et au calendrier, puis rédigez un brief de conception (Section 3) avant tout code d'interface.
Construisez les fondations (Section 5) : module de contenu, tokens, typographie, routeur, défilement fluide.
Composez les pages dans un ordre présentable : contenu -> tokens/typo -> navigation/pied de page -> héros -> projets phares -> index des travaux -> à propos/compétences/parcours -> contact -> pages d'étude de cas -> 404. Ensuite, l'animation (Section 6). WebGL et les effets signatures en dernier.
Vérifiez (Section 9) dans un vrai navigateur à environ 1440px et 390px. Ne déclarez jamais que c'est terminé en lisant le code seul.

Si le dépôt utilise déjà une pile (Next.js, Astro, SvelteKit, HTML simple), gardez-la. Tous les motifs ci-dessous se traduisent.

3. Direction artistique

3.1 Dériver le thème de la personne

Demandez : qui va voir cela, que doivent-ils ressentir en 5 secondes, à quoi ressemble le travail de cette personne ? Traduisez cela en un concept. Les couleurs de marque, polices ou thèmes spécifiés par l'utilisateur priment toujours.

Personne / signal	Exemples de directions (choisissez-en une, ou inventez)
Backend / systèmes / infra	Éditorial papier + encre ; plan technique/dessin technique ; brutalisme terminal ; grille suisse avec accents de data-viz
Frontend / développeur créatif	Typographie cinétique audacieuse ; immersif piloté par WebGL ; sticker/zine ludique ; monochrome à fort contraste avec un néon
Designer produit / UX	Espace blanc de galerie calme ; studio chaleureux (crème, terre cuite, sérif doux) ; magazine d'étude de cas
ML / recherche / données	Cahier de laboratoire (papier millimétré, annotations mono) ; revue scientifique ; observatoire sombre avec lignes tracées
Développeur mobile	Vitrine centrée sur l'appareil ; surfaces tactiles douces ; vernis App Store avec maquettes de téléphone en direct
Photographe / artiste	Image pleine page en premier ; chrome minimal ; cinéma sombre ; grille de planche-contact
Fondateur / généraliste	Éditorial confiant ; typographie manifeste ; crédibilité axée sur les métriques
Étudiant / début de carrière	Propre, énergique, honnête ; mettre l'accent sur les projets et le parcours d'apprentissage plutôt que sur les titres de poste

Évitez les valeurs par défaut qui semblent générées par l'IA : dégradés violet-bleu sur blanc, cartes de verre génériques, héros centré avec "Salut, je suis X" + emoji vague, trois cartes de fonctionnalités égales, blobs 3D de stock.

3.2 Modèle de brief de conception (écrivez ceci en premier)

Concept :        <nom + une phrase d'intention>
Public :         <qui, ce qu'ils doivent retenir>
Palette :        bg, bg-2, fg, fg-2, muted, line, accent (+ accents par projet si utilisés)
Typo :           affichage / texte / mono (avec polices de secours), échelle de ratio
Grammaire de mise en page : grille, gouttières, rythme des sections, règles/bordures vs cartes
Animation :      personnalité (vif/élastique/lent/mécanique), easing principal, durées
Signature :      les 1 à 2 moments dont les gens se souviendront
Texture :        grain / lignes de grille / aucune / shader

3.3 Tokens (la structure est fixe, les valeurs sont par thème)

:root {
  /* palette : remplacez les valeurs par thème */
  --bg: #eeeae2;  --bg-2: #e5e0d5;
  --fg: #121210;  --fg-2: #2a2925;
  --muted: #6d695f;
  --line: rgba(18,18,16,.14);
  --accent: #ff4d1c;
  /* voix typographiques */
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --text: 'Geist', 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  /* rythme */
  --gutter: clamp(1.1rem, 3.2vw, 2.75rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* alias au niveau de la page pour que les pages d'étude de cas puissent rethématiser en surchargeant ceux-ci */
  --page-bg: var(--bg); --page-fg: var(--fg); --page-muted: var(--muted);
  --page-line: var(--line); --page-accent: var(--accent);
}

Les composants ne référencent que --page-*. Une page d'étude de cas définit de nouvelles valeurs --page-* sur son <main> et toute l'interface (boutons, règles, curseur, sélection) se rethématise gratuitement.

3.4 Règles typographiques

Associez avec contraste : affichage serif + texte grotesk, ou affichage grotesk lourd + mono, ou affichage condensé + texte humaniste. Chargez via Google Fonts ou auto-hébergé en woff2 avec display=swap et preconnect.
Échelle fluide avec clamp, par ex. h-xl: clamp(3.6rem, 14.5vw, 15rem), h-lg: clamp(2.8rem, 8vw, 8.5rem), h-md: clamp(2.1rem, 5vw, 4.6rem), lede: clamp(1.05rem, 1.45vw, 1.3rem).
Affichage : interlignage serré (0.85-0.95) et crénage négatif (-0.02 à -0.04em). Corps : interlignage 1.5-1.65, max-width 38-62ch.
Métadonnées en petites majuscules mono avec un léger crénage ("(02) Travaux sélectionnés", "2024 - Présent").
Utilisez des italiques ou un changement de poids sur un mot dans un titre pour donner du ton ("Ceux que je présenterais en premier.").
font-variant-numeric: tabular-nums pour les compteurs et les statistiques.

3.5 Grammaire de mise en page

Héros pleine page (min-height: 100svh), contenu ancré en bas à gauche ou réparti sur une grille, pas centré.
En-têtes de section comme une règle fine avec un label mono numéroté à gauche et le contexte à droite.
Préférez les règles fines et les grilles aux cartes avec ombre portée (sauf si le concept est tactile/doux).
Variez le rythme des sections : grande déclaration, index dense, bobine horizontale, division en deux colonnes. Jamais six sections identiques à la suite.
--gutter cohérent partout ; padding des sections clamp(5rem, 13vw, 11rem).

3.6 Options de texture

Grain de film (SVG feTurbulence data-URI sur body::after, opacité 0.04-0.08, pointer-events:none), lignes de grille de plan, dégradés radiaux subtils, ou un champ WebGL. Choisissez-en un ; n'empilez pas.

4. Stratégie de contenu

4.1 Architecture de l'information

Accueil (défilement unique) :

Héros : nom, positionnement en une ligne, phrase d'accroche de 1 à 2 phrases, CTA principal (voir le travail) + secondaire (CV / contact), petite ligne de métadonnées (rôle, domaines de concentration, lieu, disponibilité).
Déclaration / À propos : 2 à 4 phrases dans la voix de la personne, plus 3 à 4 statistiques vraies (projets livrés, années, utilisateurs, étoiles, CGPA si étudiant).
Projets phares : 2 à 4 projets héros, grandes cartes, chacune liée à une page d'étude de cas.
Index des travaux : tous les autres projets sous forme de lignes (numéro, nom, description en une ligne, pile, année/lien), filtrables par type.
Compétences : compétences regroupées (ex. Backend, Mobile, IA, Outillage), uniquement les choses qu'ils peuvent défendre en entretien.
Parcours : formation, rôles, réalisations notables.
Contact : grand titre CTA, email, formulaire, liens sociaux, téléchargement du CV.

Page d'étude de cas par projet phare : héros thématique (nom, slogan, rôle, pile, liens), problème, ce qui a été construit, une démo interactive (simulateur, terrain de jeu, maquette en direct, diagramme d'architecture survolable), décisions clés/compromis, métriques/résultats, puis un transfert vers le "projet suivant" et contact.

Page 404 dans la même voix.

4.2 Règles de rédaction

Première personne, simple, spécifique. Commencez par ce qui a été construit et pourquoi c'est important, puis comment.
Bien : "Connectez vos propres comptes AWS, GCP et Azure et leurs niveaux gratuits agissent comme un seul disque." Mal : "Une solution cloud révolutionnaire utilisant une technologie de pointe."
Remplissage interdit : passionné, de pointe, exploiter, transparent, robuste, innovant, parcours, plonger, "J'adore coder".
Chaque métrique est sourcée ou omise. N'inventez jamais.
Les microtextes ont de la personnalité mais restent clairs ("Perdu dans le fil." sur 404, indices "Défiler pour parcourir").

4.3 Module de contenu unique

Toute la copie et les données vivent dans src/content.ts. Les composants ne codent jamais en dur le texte biographique.

export const PROFILE = { nom, rôle, lieu, email, github, linkedin, cv: '/resume.pdf', déclaration };
export type Metric = { valeur: string; label: string };
export type Flagship = {
  slug: string; chemin: string; index: string; nom: string; accroche: string; slogan: string;
  résumé: string; rôle: string; pile: string[]; métriques: Metric[]; dépôt: string;
  accent: string; bg: string; fg: string;          // thème par projet
};
export const FLAGSHIPS: Flagship[] = [ /* 2-4 */ ];
export type WorkKind = 'Systèmes' | 'IA' | 'Mobile' | 'Web'; // adapter à la personne
export const WORKS: { nom: string; description: string; pile: string[]; type: WorkKind; année: string; href: string; route?: string }[] = [];
export const CAPABILITIES: { titre: string; items: string[] }[] = [];
export const PATH: { quand: string; quoi: string; détail: string }[] = [];
export const STATS: Metric[] = [];

5. Architecture

5.1 Pile par défaut

Vite + React + TypeScript ; CSS simple avec propriétés personnalisées (Tailwind autorisé si l'équipe préfère) ; gsap + @gsap/react (ScrollTrigger) ; lenis pour le défilement fluide ; three uniquement si la direction utilise WebGL ; nodemailer pour le contact ; déploiement sur Vercel/Netlify.

5.2 Structure

index.html                 polices, meta/OG de base, texte de secours noscript
public/                    favicon.svg, resume.pdf, og-image
src/content.ts             toute la copie et les données
src/index.css              tokens, typo, mise en page, composants, responsive, reduced-motion
src/lib/smooth.ts          Lenis + ticker GSAP, indicateur reduced-motion, vélocité de défilement
src/lib/motion.tsx         useReveals, useHeroIntro, <Split>, useMeta
src/lib/router.tsx         routeur d'historique + transition rideau + <Link>
src/components/Chrome.tsx  Nav, Menu mobile, Curseur, Préchargeur, Pied de page/Contact
src/components/Field.tsx   arrière-plan WebGL optionnel du héros
src/components/CaseShell.tsx squelette partagé d'étude de cas
src/pages/*.tsx            Accueil, une page par projet phare, NotFound
api/contact.ts             gestionnaire de mail serverless
vercel.json                réécritures SPA

5.3 Routage

Un petit routeur d'historique suffit pour un portfolio et vous permet de contrôler les transitions :

normalizePath (supprime la barre oblique finale, met en minuscule).
navigate(to) : même chemin + hachage -> défilement fluide vers l'ancre ; chemin différent -> joue le rideau, échange la page pendant qu'elle est couverte, défile en haut, puis révèle.
Écoutez popstate ; appelez ScrollTrigger.refresh() après chaque changement de route ; gérez les #hash en attente après l'échange.
<Link> : externe (http, mailto) rend une ancre simple avec target="_blank" rel="noopener noreferrer" ; interne intercepte le clic sauf si metaKey/ctrlKey/shiftKey ou bouton non gauche, donc le nouvel onglet fonctionne toujours.
Next.js/Astro : utilisez leur routeur et implémentez le rideau dans un hook de mise en page/transition à la place.

5.4 SEO par route

useMeta(titre, description, themeColor) met à jour document.title, description, og:*, twitter:*, theme-color et canonical à chaque route. index.html contient les valeurs par défaut complètes plus un résumé de texte <noscript>. Ajoutez une carte Twitter summary_large_image et une image OG si possible. Envisagez le schéma JSON-LD Person.

5.5 API de contact (serverless, `api/contact.ts`)

Exigences :

POST uniquement (405 sinon), Cache-Control: no-store.
Champ honeypot (ex. website caché) : s'il est rempli, renvoyez 200 et ignorez.
Limitez la longueur et coupez chaque champ ; validez l'e-mail avec une regex simple ; longueur minimale du message.
Supprimez \r\n de tout ce qui est utilisé dans les en-têtes/sujet (injection d'en-tête) ; échappez tout HTML dans le corps HTML.
replyTo = expéditeur ; from = votre utilisateur SMTP.
Limitation du débit par adresse IP au mieux-effort (ex. 3 par 10 min via Map en mémoire, IP de x-forwarded-for).
Si les variables d'environnement SMTP sont manquantes, renvoyez 503 avec un message amical "contactez-moi directement par e-mail" ; l'interface doit afficher l'e-mail comme solution de secours.
Variables d'environnement : SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS, CONTACT_TO. Fournissez .env.example. Ne commettez jamais de secrets.
Formulaire frontend : états idle/sending/sent/error, statut aria-live="polite", soumission désactivée pendant l'envoi, labels sur chaque entrée.

5.6 Déploiement

Vercel vercel.json :

{ "cleanUrls": true,
  "rewrites": [{ "source": "/((?!api/|assets/|.*\..*).*)", "destination": "/" }] }

Netlify : /* /index.html 200 dans _redirects. Le CV vit dans public/resume.pdf ; chaque bouton de CV y renvoie avec download.

6. Système d'animation

6.1 Principes

Un seul easing maison (ex. expo.out / cubic-bezier(.16,1,.3,1)), durées 0.6-1.4s pour les révélations, 0.3-0.6s pour les survols.
Animez uniquement transform, opacity, clip-path. N'animez jamais les propriétés de mise en page.
Les révélations masquées (texte sortant d'une boîte overflow:hidden) ont l'air premium ; les fondus simples ont l'air bon marché.
Chorégraphiez : l'intro du héros attend que le préchargeur/rideau soit terminé (partagé intro.delay).
Chaque effet est protégé par prefersReducedMotion et saute/réduit en conséquence.

6.2 Durées et easings

Cas	Durée	Easing	Remarque
Révélation de texte	0.8-1.2s ligne	(0.16,1,0.3,1)	Chaque ligne monte + fondu
Entrée de héros	1.2-1.8s	(0.25,0,0.2,1)	Retardé après rideau
Carte de projet au survol	0.4-0.5s	(0.25,0,0.2,1)	Échelle/image/ombre
Section défilement dans vue	0.7-1.0s	(0.16,1,0.3,1)	Décalage en cascade
Bobine de photo/carrousel	0.5-0.7s	(0.4,0,0.2,1)	Accrochage mécanique

6.3 Implémentation de base

// src/lib/motion.tsx
import { useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { useGSAP } from '@gsap/react';

// Seuil d'accessibilité – lire au chargement
export const prefersReduced = () =>
  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Révélation de base : animation de fondu + montée sur les enfants
// usage : <div ref={el}>...</div>
export function useReveals(ref: React.RefObject<HTMLElement | null>, opts = {}) {
  const { delay = 0, stagger = 0.05, y = 20, duration = 0.8 } = opts;
  useGSAP(() => {
    const children = ref.current?.children;
    if (!children || prefersReduced()) return;
    gsap.from(children, {
      y,
      opacity: 0,
      duration,
      ease: 'power3.out',
      stagger,
      delay,
      scrollTrigger: { trigger: ref.current, start: 'top 85%' },
    });
  }, [ref]);
}

// Texte fractionné – enveloppe chaque mot ou caractère dans une balise <span>
// usage : <Split as="word">Le texte</Split>
export function Split({ children, as = 'word' }: { children: string; as?: 'word'|'char' }) {
  const token = as === 'word' ? /\s+/ : '';
  const parts = as === 'word' ? children.split(' ') : children.split('');
  return parts.map((p, i) => <span key={i} className="split-unit" style={{ display: 'inline-block' }}>{p}{as === 'word' && i < parts.length-1 ? '\u00A0' : ''}</span>);
}

6.4 Signature du héros

Le héros est le moment le plus important : l'image de marque (nom en grand, rotation de texte, conception générative, curseur suivant le défilement). Exemple de mise à l'échelle d'un bloc de titre :

À 1440px : nom héros fait 12-15rem, sous-titre 2.5rem, roulement de texte pompe/aligne les mots.
À 390px : nom héros fait 3-3.6rem, sous-titre 1.1rem, tout rentre dans la fenêtre sans débordement horizontal.
Aucune barre de défilement horizontale, aucun texte caché (sauf intentionnellement).

Le mode réduit : le héros apparaît immédiatement, pas d'attente. Tous les mots en gros caractères visibles, aucune animation qui prend du temps.

6.5 Transitions de route (rideau)

Avant la navigation, un élément de superposition qui remplit l'écran : height: 100% de l'état initial à top: 100% ou l'inverse. Durée : 0.3s pour la fermeture, 0.3s pour l'ouverture. Pas de flou ni de distorsion – divisez proprement. Après l'ouverture, défaussez.

Implémentation : exposez une fonction runCurtain(cb) dans un contexte qui anime la superposition avant de changer la page, puis la retire.

7. Solutions de dégradation et accessibilité

7.1 Règles CSS `prefers-reduced-motion`

/* masque les révélations différées */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* enlève les flous et les désactivations de GL */
  .gl-canvas { display: none; }
  /* tous les éléments sont visibles */
  .reveal { opacity: 1; transform: none; }
  /* la superposition de rideau se produit immédiatement */
  .curtain { transition-duration: 0.01ms !important; }
  .split-unit { opacity: 1; transform: none; }
}

7.2 Solutions de secours JS (peuvent être incluses dans `index.html`)

<noscript>
  <div style="padding:3rem;font:1rem/1.5 sans-serif">
    <h1>{{nom}}</h1>
    <p>{{rôle}} · {{lieu}} · {{email}}</p>
    <p>{{résumé}}</p>
    <ul><!-- projets --></ul>
    <a href="/resume.pdf">Télécharger CV</a>
  </div>
</noscript>

7.3 Surcharges WebGL (si utilisé)

En mode réduit : le canevas se décharge (opacité 0 ou display: none), le fond de secours CSS apparaît.
Tous les textes, boutons, liens et titres restent entièrement lisibles et cliquables sans GL.
Le défilement, la navigation au clavier et le remplissage des formulaires ne sont jamais interrompus par GL.

7.4 Navigation au clavier

Contournements de navigation visibles (:focus-visible).
Ordre de tabulation logique (nav, héros, contenu, pied de page).
Liens de saut "Passer au contenu" masqués mais présents.
Les menus mobiles piègent le focus lorsqu'ils sont ouverts.

8. Modèle de page d'étude de cas

// src/components/CaseShell.tsx
import { useEffect } from 'react';
import { useMeta } from '../lib/motion';
import { useReveals, Split } from '../lib/motion';
import { Link } from '../lib/router';

export function CaseShell(project: Flagship) {
  const { slug, name, tagline, role, stack, metrics, repo, accent, bg, fg } = project;
  // Redéfinit les alias de la page pour ce thème de projet
  const style = { '--page-bg': bg, '--page-fg': fg, '--page-accent': accent } as React.CSSProperties;
  const mainRef = useRef<HTMLElement>(null);
  useMeta(name, tagline, accent);
  useReveals(mainRef);

  return (
    <main ref={mainRef} style={style}>
      <header className="case-hero">
        <span className="mono-label">{slug} · Étude de cas</span>
        <h1><Split>{name}</Split></h1>
        <p className="lede">{tagline}</p>
        <div className="case-meta">
          <span>{role}</span>
          <span>{stack.join(' · ')}</span>
          <a href={repo} target="_blank" rel="noopener noreferrer">Code source</a>
        </div>
      </header>
      <section className="case-content">
        {/* Problème, solution, mesures clés décisions/implications, résultats, démo */}
      </section>
      <nav className="case-nav">
        <Link to="/" className="prev">← Retour aux travaux</Link>
        <Link to="/contact" className="next">Travaillons ensemble →</Link>
      </nav>
    </main>
  );
}

9. Vérifications de qualité (vérifiez dans le navigateur avant de livrer)

Défilement fluide : pas de saccades, pas de retour en arrière. Lenis tourne sans conflit. Les déclencheurs ScrollTrigger se synchronisent sur les pixels Lenis (ScrollTrigger.scrollerProxy(...) correct).
Typographie : à 1440px et 390px, chaque titre est lisible. Pas de texte cassé/hors écran. Les polices chargées (vérifiez network > woff2, pas d'échange de texte visible sauf FOIT contrôlé).
Liens : tous les liens externes target="_blank". Tous les ancres internes de navigation (défilement fluide). CV téléchargeable. Les pages d'étude de cas sont accessibles.
Contact : envoyez un message de test en local. Vérifiez la réponse de l'API (attrapez-la dans la console ou avec un indicateur d'envoi). Vérifiez la boîte de réception de l'e-mail cible. Vérifiez la désactivation pendant l'envoi, les états d'erreur, le honeypot.
SEO : rendu source de index.html contient les balises meta correctes. Chaque page a <title>, <meta name="description">, og:*, twitter:*, theme-color. Vérifiez avec l'outil de partage social (une URL factice, inspectez le cache).
Accessibilité : contraste (outil de contraste dans DevTools). Navigation au clavier. Liens de saut. Rôles ARIA (bannièr, navigation, principal, complémentaire, région). Vérifiez le mode réduction de mouvement.
Performances : première peinture avec du texte visible en moins de 2s sur un réseau 3G. Aucun bloc de rendu dans <head>. Les polices Google sont preconnect+ preload ou auto-hébergées. Les images sont optimisées (avif/webp+fallback). Le bundle JS du routeur pour la page d'accueil est < 200Ko gzippé. Vérifiez Lighthouse (cible > 90 Performance, 100 Accessibilité, 100 SEO).
Responsive : de 360px à 1920px. Aucune barre de défilement horizontale. Pas de texte volumineux qui pousse le layout. Les images de héros sont fluides. Le menu mobile se comporte correctement (pas de défilement d'arrière-plan, visibilité du focus).
Formulaires et données : les e-mails du formulaire de contact sont livrés. Toutes les métriques et affirmations dans les profils/études de cas sont exactes. Les liens externes pointent vers les vrais dépôts/profils. Les dates et la chronologie sont correctes.

10. Post-livraison

Configurer les revalidations de déploiement automatique (GitHub Actions sur push vers main, pas de cache sur Vercel).
Surveiller les formulaires de contact (vérifier la boîte de réception).
Activer les alertes de disponibilité (Pingdom par exemple).
Envisager l'analyse (Plausible, Fathom, Umami).
Ajouter la page aux Google Search Console pour l'indexation.
Envisager une intégration de blog si le client écrit (ex. MDX via un répertoire de contenu, pas un CMS).

Annexe A : Archétypes de design

A.1 Origine

Ces archétypes ne sont pas des thèmes ; ce sont des cadres pour prendre des décisions de conception rapidement. Choisissez celui qui correspond à la personne.

Éditorial – Mise en page de magazine, grilles de journaux, beaucoup d'espace blanc, blocs de texte longs, photos pleine page. Pour les écrivains, les designers, les fondateurs.
Terminal – Haut contraste (vert sur noir ou blanc sur noir), typographie mono, lignes de grille, palettes limitées. Pour les ingénieurs backend, les administrateurs système.
Laboratoire – Fond de papier millimétré, annotations manuscrites, graphiques tracés, sections comme des notes. Pour les scientifiques, les chercheurs, les ingénieurs ML.
Cinéma – Fond sombre, texte lumineux, animations dramatiques, images pleine page légères, vidéo en boucle. Pour les photographes, les cinéastes, les designers d'interaction.
Studio – Palette chaleureuse (crème, terre cuite, osier), textures douces, grilles de galerie, espace blanc généreux. Pour les designers produit, les studios créatifs.
Manifeste – Grande typographie, disposition en colonnes, blocs de citation, mise en page asymétrique, beaucoup d'espace négatif. Pour les leaders d'opinion, les fondateurs.

A.2 Niveaux d'ambition

Niveau	Pages	Animations	GL	Temps (construire + polir)
Essentiel	Accueil + contact + 1 cas	Légères – défilement dévoile, survol de carte	Non	3-5 jours
Propre	+ index des travaux, 2 cas, 404	Modéré – rideau, entrée de héros, cascades	Optionnel	5-8 jours
Signature	+ 2 cas supplémentaires, blog	Signatures partielles – GL en fond, animation au survol du curseur	Oui – un champ	8-12 jours
Phare	Tout ce qui précède + animation personnalisée	Chaque section a des moments, GL partout	Oui – personnalisé	12-18 jours

Tous reposent sur le même code ; le niveau contrôle la complexité du GL, le nombre d'études de cas, et la profondeur de la chorégraphie. Le temps inclut la collecte de contenu, le brief, les itérations et le polissage.

Annexe B : CSS des composants clés

B.1 Curseur personnalisé (si direction éditoriale/créative)

.cursor {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  transition: width 0.2s var(--ease), height 0.2s var(--ease), background 0.2s var(--ease);
  mix-blend-mode: difference;
}
.cursor--hover { width: 28px; height: 28px; background: var(--accent); }
.cursor--hidden { opacity: 0; }

B.2 Texte plein écran

.text-full {
  font-size: clamp(3.6rem, 14.5vw, 15rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

B.3 Étiquette mono

.mono-label {
  font-family: var(--mono); font-weight: 450;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}

B.4 Conteneur de projet phare

.flagship {
  display: grid; gap: var(--gutter);
  grid-template-columns: 1fr 1.618fr;
  padding: var(--gutter) 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .flagship { grid-template-columns: 1fr; }
}

B.5 Superposition de rideau

.curtain {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
  pointer-events: none;
}
.curtain--active {
  transform: translateY(0);
}

Annexe C : Exemples d'art directionnel

Remplacez les valeurs par les décisions de conception réelles.

Bloc-photo : Gabriel Est-ce que tout va bien ?

Concept : Éditorial / galerie – tout est orienté portrait, mise en page de magazine, palette chaude (crème rouillé). Palette : bg #efe6da, bg-2 #e5d9c9, fg #2b231c, fg-2 #4a3f36, muted #8c7e6f, line #2b231c18, accent #c44b2b Typo : Display: "Playfair Display" (serif écailles), Text: "Inter" (grotesk), Mono: "JetBrains Mono" Grammaire : Gouttière 2rem, grille 2 colonnes, glissière horizontale pour les travaux Anim : Entrée de héros douce 1.2s élastique, défilement dévoile sur les cartes, survol de l'image zoom 1.05 Signature : Introduction du nom en caractères séparés, ralenti

Bloc-machin : Gunjan Chaudhary

Concept : Laboratoire – carnet de notes technique avec graphiques tracés et code. Palette : bg #f4f1ea, bg-2 #e8e4da, fg #1e1b16, fg-2 #403b33, muted #7a7263, line #1e1b1618, accent #2563eb Typo : Display: "DM Sans" (sans serif condensé), Text: "DM Sans", Mono: "JetBrains Mono" Grammaire : Gouttière 1.75rem, grille de 12 colonnes, étiquettes dans la marge de gauche, boîtes de code Anim : Héros fait apparaître une grille de points, les graphiques tracés se dessinent via SVG stroke-dashoffset, défilement dévoile en cascade par rangée Signature : Démonstration interactive de réseau de neurones sur la page d'accueil

Fin du document.

Demander à votre IA préférée

Documentation