À propos · Eywa
Vibe coded with Claude Code
Un codex visuel de Pandora — construit comme un cadeau, exécuté comme un labo.
L'histoire courte
À mon Gremlins de nièce, fan absolue des schtroumpfs géants. 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 même la prose des fiches du codex synthétisée à partir de Pandorapedia et de l'Avatar Wiki. Moi je trace la vision, choisis les couleurs, valide les tournures, repère ce qui cloche. Pour celui-là, pas de ChatGPT — Eywa est un dialogue à deux.
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.
Si tu veux faire pareil : prends un sujet qui t'enflamme, ouvre Claude Code, décris en langage naturel ce que tu rêves de voir exister, et itère. Tu seras surpris de ce qu'on peut construire en quelques sessions.