Gabriel Vidal
620e0e2adc
- README.md / CLAUDE.md: replace Vite boilerplate with the actual project description (Le Monde Usagé — Cloueless Collectif multimedia art project) and architecture notes. - index.html: add full metadata (title, description, keywords, canonical, Open Graph + Twitter card, theme-color); fix lang en->fr. - home.tsx: point helmet og:url at the live raspy2 domain (was stale Vercel) and add og:image. - public/og-image.png: hand-made green papercut collage social image (generated from the project's own art), matching the site aesthetic. - scripts/deploy.sh: zipgo deploy to monde-usage.game.gabvdl.xyz; omits the og-screenshot step to preserve the curated og:image. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
66 lines
2.8 KiB
Markdown
66 lines
2.8 KiB
Markdown
# Le Monde Usagé
|
|
|
|
The digital hub for **Le Monde Usagé** ("The Used World") — a collaborative,
|
|
multimedia art project by the **Cloueless Collectif** & GVA Production. It tells
|
|
the story of *un jardin sur le déclin* (a garden in decline) as a metaphor for
|
|
creating in the face of ecological and social collapse, asking: *quel sens pour
|
|
la création dans un monde qui brûle ?*
|
|
|
|
> « Les cataclysmes, l'assèchement des sols, l'inversion du ciel et la montée
|
|
> des pois mangetouts… Le pronostic est fatal, la fin du monde est pour
|
|
> bientôt. »
|
|
|
|
The site gathers the project's multiple formats — a documentary-fiction film, an
|
|
interactive playable archive, exhibitions and events — under one hand-crafted,
|
|
sage-green collage aesthetic.
|
|
|
|
**Live:** https://monde-usage.game.gabvdl.xyz/
|
|
|
|
## Sections
|
|
|
|
- **Accueil** (`/`) — animated landing page with the project's tagline and
|
|
navigation.
|
|
- **Qui sommes nous** (`/contact`) — the four-member collective and their roles.
|
|
- **Démarche** (`/about`) — the collaborative writing protocol, the garden
|
|
narrative, and the exhibition reconstructed digitally inside the game.
|
|
- **Le film des légumes** (`/le-film-des-legumes`) — a 21-minute docu-fiction
|
|
co-written with amateur actors during a residency at the Ferme d'Aulot.
|
|
- **Le monde en carton** (`/le-monde-en-carton`) — an interactive "archive
|
|
vivante" of 80+ collectively-improvised video fragments, hosted on
|
|
[itch.io](https://clouelesscollectif.itch.io/le-monde-en-carton).
|
|
- **Actualités** (`/actualites`) — a zigzag timeline of past and upcoming
|
|
installations, exhibitions and screenings.
|
|
|
|
## The collective
|
|
|
|
- **Céleste Vidal-Ayrinhac** — motion design, game design, sound composition
|
|
- **Lucia Augé** — video, scenography, illustration
|
|
- **Céleste Le Du** — animation, graphics
|
|
- **Gabriel Vidal-Ayrinhac** — software engineering, game development
|
|
|
|
## Tech stack
|
|
|
|
- **React 18** + **TypeScript** + **Vite 5** (SPA, `react-router-dom` v6)
|
|
- **GSAP** (`@gsap/react`) + `react-transition-group` for staggered animations;
|
|
`use-sound` for audio interactions
|
|
- **Tailwind CSS 3** with the hand-drawn **Underdog** typeface; monochrome
|
|
sage/teal palette over white
|
|
- **react-helmet** for per-page meta; **video.js** for the film player
|
|
- Self-hosted **Matomo** analytics (`analytics.gabvdl.xyz`, idSite 5)
|
|
- A custom sitemap generator (`scripts/generate-sitemap.ts`)
|
|
|
|
## Development
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev # Vite dev server with HMR
|
|
npm run build # type-check + production build to dist/
|
|
npm run preview # preview the production build
|
|
```
|
|
|
|
## Deployment
|
|
|
|
Hosted on the homelab (raspy2 / zipgo) under `*.game.gabvdl.xyz` with Let's
|
|
Encrypt TLS. `vercel.json` permanently redirects the old Vercel domain to the
|
|
self-hosted `monde-usage.game.gabvdl.xyz`.
|