Files

Gabriel Vidal 620e0e2adc docs+meta: real README/CLAUDE, social metadata, curated og:image, deploy script

- 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>

2026-06-27 19:43:26 +02:00

2.8 KiB

Raw Permalink Blame History

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.
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

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.

2.8 KiB Raw Permalink Blame History