Site personnel de Florian Etourneau : une page, une nuée d’étourneaux, un panier de basket. Construit avec Astro, sans framework côté client. Page statique, sauf le formulaire de contact : une action Astro (fonction Vercel) qui vérifie le visiteur avec ALTCHA (preuve de travail, sans service tiers) et envoie le message par Resend.
npm install
npm run dev # http://localhost:4321
npm run build # génère dist/
npm run preview # sert dist/ en localPour tester l’envoi du formulaire en local, créer un fichier .env (hors git, voir .env.example) :
RESEND_API_KEY=re_…Avec cette clé, l’envoi est réel. Sans clé, le formulaire répond que l’envoi n’est pas configuré. En local, ALTCHA fonctionne avec une clé de développement : rien à configurer.
Node 22.12 ou plus récent.
public/favicon/ icônes et manifest
public/icons/ logos officiels GitHub et LinkedIn (menu mobile)
src/
layouts/Base.astro <head>, polices, favicon, thème mémorisé
components/
Entete.astro logo, liens, bascule de thème
Accueil.astro accroche + scène du tir
Maintenant.astro les étapes sur lesquelles la nuée se pose
Parcours.astro liste générée depuis src/data/parcours.ts
Pied.astro contact, heure et météo, la famille sur le fil
data/parcours.ts postes et durées (un oiseau = deux mois)
scripts/
site.js branche les modules ci-dessous et les fait suivre le défilement
nuee.js la nuée (canvas fixe, coordonnées document)
moteur-nuee.js le moteur : choisit la scène à l’écran et y pose la nuée
scenes.js les scènes de la page (fil, pictos, parcours, contact) ; ?debug les affiche
formes.js les formes que dessine la nuée et leur échantillonnage
oiseau.js l’oiseau articulé (copie de la charte)
scene-accueil.js cadrage de la scène du tir et seuil d’envol
tir.js le mini-jeu du tir (et le contre du premier tir)
envol.js, vol.js l’envol de Florian, le battement d’ailes
famille.js le retour au nid, le dribble
rennes.js l’heure et la météo
copier.js, entete.js copier l’adresse, l’en-tête au défilement
theme.js la bascule de thème
air-ball.js l’animation de la page 404
sous-le-capot.js le mot laissé dans la console
contact.js envoi du formulaire sans rechargement
styles/
tokens.css copie des tokens de la charte — ne pas modifier ici
global.css styles du site, uniquement à partir des tokens
pages/index.astro assemble la page
pages/404.astro « Air ball » : la page introuvable
actions/index.ts actions `defi` et `contact` : défi ALTCHA, validation, envoi par Resend (seul code serveur)
outils/copier-tokens.mjs (local, hors git) recopie tokens.css depuis ../etourneau-identite
outils/og-image.html (local, hors git) source de public/og-image.png, commande d’export en tête du fichier
Les scripts sont des modules ES bundlés par Astro ; ils ciblent les éléments par id,
donc garder les id des composants en cas de modification.
La charte (dossier voisin etourneau-identite) est la source des couleurs, tailles et polices :
aucune couleur en dur dans le site, tout passe par --fe-*. Après un changement de tokens
côté charte, lancer node outils/copier-tokens.mjs (outil local, hors git : il lit le dossier voisin).
Vercel, avec l’adaptateur @astrojs/vercel. Variables d’environnement à déclarer :
RESEND_API_KEY, et pour l’anti-robot ALTCHA_HMAC_KEY (une chaîne aléatoire qu’on génère soi-même,
par exemple node -e "console.log(crypto.randomBytes(32).toString('hex'))"). Sans elle, le formulaire marche
quand même, protégé par le pot de miel seul. Le domaine florian-etourneau.dev doit être vérifié dans Resend
(l’expéditeur est contact@florian-etourneau.dev) : chaque push sur main part en production,
chaque branche a sa preview. Domaine : florian-etourneau.dev.
Ce dépôt est public pour être lu, pas pour être réutilisé tel quel (détail dans LICENSE) :
- L’identité et le contenu sont à moi, tous droits réservés : l’étourneau et la famille, les illustrations, les images, les textes, le parcours et les valeurs des tokens. Pas de reprise sans accord écrit.
- Le code est sous licence MIT : libre de s’en servir, à condition d’y remplacer l’oiseau, les textes et les couleurs par les siens.
- Les marques de tiers (MaxDS, BPGO, GitHub, LinkedIn…) appartiennent à leurs propriétaires.
- Adresse de contact sur le domaine une fois le mail configuré.