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

Raw Permalink Blame History

CLAUDE.md

Guidance for working in this repo. See README.md for the project overview.

What this is

Le Monde Usagé — the React/Vite single-page website for a collaborative multimedia art project (Cloueless Collectif). It is the public hub linking the project's film, interactive archive, methodology and event timeline. It is a content/showcase site: most "logic" is page layout, GSAP entrance animations, and image assets — there is no backend, database, or API of its own.

Deploys to https://monde-usage.game.gabvdl.xyz/ (homelab raspy2 / zipgo, *.game.gabvdl.xyz). The old Vercel domain 301-redirects here via vercel.json.

Architecture

SPA with react-router-dom v6. Routes are declared in src/router/routes.ts and wired in src/router/index.tsx; one component per route under src/pages/ (home, contact, about, le-film-des-legumes, le-monde-en-carton, actualites).
Animations: each page builds a GSAP timeline in a useEffect that runs once its images have preloaded (src/technical/usePreloadImages.ts). Follow that pattern — gate animations on imagesReady so nothing flashes in before the (large) PNG art is ready.
Per-page meta is set with react-helmet inside each page (title, description, OpenGraph). index.html only holds favicons, the manifest, and the Matomo snippet.
Styling: Tailwind CSS 3. The hand-drawn Underdog font and the monochrome sage/teal-on-white palette define the look. Hover interactions use the wiggle-hover utility. Keep the hand-crafted, collage feel — avoid generic/polished UI.

Assets

The visual identity lives almost entirely in public/assets/website/ — hand-drawn green title images (titre-*.png), papercut illustrations (arbre cuir.png, footer-home.png), member photos, and section banners. These are the source of truth for the project's look; reference them when generating any new art (og-image, thumbnail).

Develop & deploy

npm run dev      # Vite dev server (HMR)
npm run build    # tsc + vite build → dist/
npm run preview  # serve the build locally

npm run build runs scripts/generate-sitemap.ts and copies everything in public/ (including og-image.png / og-thumbnail.webp) into dist/, which is then published to zipgo. Commit + push project changes with the commit-project skill (this is its own Gitea repo / submodule).