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>
54 lines
2.4 KiB
Markdown
54 lines
2.4 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
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).
|