/guide
Ce site a été conçu et codé de bout en bout par Claude, à partir d’un brief d’une page. Voici la démarche, pour que vous puissiez la reproduire.
A La démarche
Le brief tenait en une page : proposition de valeur, Why, What, How, Reason to believe. Chaque rubrique est devenue une page (Pourquoi, La plateforme, Comment, Références), reliée aux autres, avec une landing page qui les met toutes en appétit.
« Le signal dans le bruit » : le métier d’Apaia est de transformer le flot d’informations en synthèses nettes. L’esthétique en découle — papier chaud et encre comme une note de synthèse, outremer pour le signal, typographie éditoriale (Fraunces pour les titres, Instrument Sans pour le texte, une mono pour les métadonnées).
Une seule feuille de style porte tout le site : variables CSS, grilles de cartes, bandes claires et sombres en alternance, composants réutilisés (kicker, quote, stat, chip, maquettes). Chaque page assemble ces briques — c’est ce qui donne la cohérence.
Le héros de la page d’accueil est un canvas : des particules erratiques (le bruit) traversent une fente et s’alignent en lignes nettes (le signal) — la proposition de valeur, littéralement dessinée. Ailleurs : révélations au scroll par IntersectionObserver, pipeline qui se remplit en scrollant, marquee des sujets. Le tout respecte prefers-reduced-motion.
Après chaque version « terminée », une relecture au peigne fin dans le navigateur, page par page et en mobile : hiérarchie typographique, rythme vertical, contrastes, états de survol, cohérence des liens. Chaque passe a produit sa liste de corrections avant validation.
Un dossier par langue (/fr, /en), le même système de design, un sélecteur FR/EN dans l’en-tête, des balises hreflang sur chaque page, et une page racine qui redirige vers la langue du visiteur (choix mémorisé d’abord, langue du navigateur sinon). Ajouter une langue = dupliquer un dossier et traduire — rien d’autre ne change.
Le site est 100 % statique — des pages HTML, un CSS, un JS, aucune dépendance ni build. Il se déploie tel quel sur Netlify : glisser-déposer du dossier sur app.netlify.com, ou netlify deploy --prod en ligne de commande. Les routes propres (/guide) fonctionnent nativement.
B Fiche technique
Pas de build, pas de dépendances : la robustesse et la vitesse d’un site statique pur. Les polices sont le seul appel externe.
Couleurs, typographies, espacements et composants définis une fois dans styles.css et déclinés sur toutes les pages, dans chaque langue.
Particules en canvas 2D pour le héros, révélations au scroll, pipeline animée — moins de 200 lignes de JavaScript au total.
Toutes les animations sont désactivées si le système demande une motion réduite ; contrastes AA sur les textes courants.
Français et anglais aujourd’hui ; toute langue supplémentaire est un dossier de plus et un lien dans le sélecteur. Le choix du visiteur est mémorisé.
Brief d’une page en entrée ; structure, direction artistique, contenus, code et itérations réalisés par Claude (Anthropic).