À propos · Eywa
Vibe coded avec Claude Code & Codex
Un codex visuel de Pandora — construit comme un cadeau, exécuté comme un labo.
L'histoire courte
À Eva, fan absolue des grands bleus de Pandora. Moi je trouve ça moyen, mais bon — les goûts, les couleurs, et la bioluminescence.
Le nom Eywa est celui de la déesse-réseau de Pandora, la conscience planétaire qui relie toute vie sur la lune. Mais regarde le logo deux secondes : le E, la moitié gauche du W (qui dessine un V), et le A — éclats cyan — recomposent EVA. La déesse t'a emprunté trois lettres.
Pour le reste, dev Java côté serveur depuis vingt-et-un ans, mais novice sur tout ce qui scintille en frontend moderne. J'avais envie d'un terrain de jeu où Pandora serait l'excuse pour explorer Astro, le WebGL et les animations qui pulsent. Cadeau et labo d'un coup — l'avantage des projets perso.
Construit en discutant avec Claude Code — pair-programmation, structure, code, et prose des fiches du codex synthétisée à partir de Pandorapedia et de l'Avatar Wiki. Depuis, Codex m'accompagne aussi sur la relecture, les corrections ciblées et les itérations d'interface. Moi je trace la vision, choisis les couleurs, valide les tournures, repère ce qui cloche.
Frontend
- › Astro 6 (paradigme islands, statique-first)
- › React 19 (îlots interactifs — Plan 2)
- › TypeScript strict
- › Tailwind CSS 4 (vite plugin + tokens @theme)
- › Astro Content Collections (markdown + Zod)
- › SVG inline pour le logo
Identité
- › Palette bioluminescente Pandora (cyan, magenta, vert sacré, ambre Fire & Ash)
- › Typo Orbitron (display) + Cormorant Garamond (body)
- › Logo SVG custom : EVA caché dans EYWA
Infra
- › Docker multi-stage (node:22-alpine → nginx:alpine)
- › docker-compose Synology NAS
- › nginx avec compression + cache long terme assets
- › Hostname réseau : nas:4203
- › Build statique → CDN-ready (option publication ouverte)
Sources & inspirations
Pas une copie, mais des sources que j'ai consultées ou des principes que j'ai essayé d'appliquer.
Source canonique officielle pour le lore Avatar — biomes, clans, créatures, technologies humaines.
Couverture détaillée des personnages, scènes des films, et des évolutions de l'univers entre les trois films.
La langue Na'vi est une vraie langue construite, avec grammaire et lexique. Source pour la section Langue.
Le bouquin de chevet pour les non-designers : grille, contraste, hiérarchie, espacement.
Mes autres sites
Quatre autres apps perso vibe-codées avec Claude Code, puis relues et enrichies au fil des sessions avec Codex.
Si tu veux faire pareil : prends un sujet qui t'enflamme, ouvre un assistant de code, décris en langage naturel ce que tu rêves de voir exister, puis itère. Tu seras surpris de ce qu'on peut construire en quelques sessions.