initial

2026-09-18 16:04:05 +02:00
commit 4cda1ca41b
@@ -0,0 +1,77 @@
+# CipherCell homepage relaunch
+
+Static site for www.ciphercell.de, built with Astro. Design foundation: `CLAUDE.md`
+(European deep-tech minimalism: warm paper, one neo-grotesque, hairlines, no accent colour).
+
+## Run
+
+```sh
+npm install
+npm run dev       # http://localhost:4321
+npm run build     # static output in dist/
+npm run preview   # serve dist/
+npm run check     # Astro + TypeScript check
+```
+
+## Where things live
+
+| Path | Purpose |
+|---|---|
+| `src/styles/tokens.css` | Every colour, type step, spacing, radius and duration. Components use only these. |
+| `src/styles/base.css` | Font faces, reset, focus ring, primitives (`.container`, `.grid`, `.section`, `.prose`, `.link`, `.button`). |
+| `src/i18n/ui.ts` | All interface copy, English and German, one object per language with the same shape. |
+| `src/data/team.ts` | Team members, roles, portraits, links. |
+| `src/content/insights/*.md` | Insights posts (content collection). Front matter: title, date, lang, category, readingTime, author, cover. |
+| `src/components/home/*` | One file per home section, in page order: Hero, Manifesto, Method (with `MethodDiagram`), Stages (with `GridObject`), Sectors, Proof, Quote, Insights, Contact. |
+| `src/components/home/GridObject.astro` | The four wireframe objects on the stage cards (sphere, cube, plane, wave). Geometry is computed at build time; single stroke in `--ink`. |
+| `src/components/home/MethodDiagram.astro` | The four-stage loop, wide and tall compositions. Labels come from `ui.method.stages`. |
+| `scripts/*.mjs` | Review tooling: `shot.mjs` (full page), `scroll-shots.mjs` (viewport by viewport), `tabs-test.mjs` (keyboard test for the sectors tabs), `contact-sheet.mjs`. Need `npx astro preview --port 4322`. |
+| `src/pages/_*.astro` | Shared page bodies. `index.astro` and `de/index.astro` render `_Home.astro` with a `lang` prop, and so on. |
+| `src/assets/images/` | Source images. Astro emits AVIF with a WebP fallback and explicit dimensions. |
+| `public/fonts/` | Self-hosted Inter Tight variable (latin, latin-ext). |
+
+## Routes
+
+`/`, `/team`, `/insights`, `/insights/<slug>`, `/imprint`, `/privacy`, `/404` and the same under `/de`.
+`hreflang` alternates and a sitemap are generated. The language switch sits in the footer.
+
+## Things the host has to provide
+
+- **Contact form.** The form posts `first_name`, `last_name`, `email`, `message` and a honeypot
+  field `website` to `POST /contact`, as the current site does. The handler is server-side and
+  not part of this static build.
+- **Matomo.** The privacy page links to the existing opt-out on `cipher.uber.space`. The tracking
+  snippet itself is not included; add it in `src/layouts/Base.astro` if analytics should continue.
+
+## Adding a post
+
+Create `src/content/insights/<slug>.md` with the front matter used in `xg-aloe-user-forum.md`.
+Put the cover image in `src/assets/images/` and reference it with a relative path.
+The three newest posts appear on the home page automatically.
+
+## Imagery
+
+The mast at dusk (`mast-at-dusk.jpg`) is the one documentary photograph from the old site; it
+remains the cover of the first post. The five other scene images were generated with Magnific
+(Seedream 5 Pro) on 18 September 2026 in a desaturated documentary style, because no real
+photography existed:
+
+| File | Used in | Magnific creation |
+|---|---|---|
+| `plant-at-dusk.jpg` | Hero | https://www.magnific.com/app/creation/DoQZmiipcl |
+| `engineer-glass.jpg` | Method section | https://www.magnific.com/app/creation/3zdScUIREY |
+| `sector-5g.jpg` | Sectors, tab 1 | https://www.magnific.com/app/creation/s7ZQP52l8e |
+| `sector-substation.jpg` | Sectors, tab 2 | https://www.magnific.com/app/creation/yi0r27vPW9 |
+| `sector-datacentre.jpg` | Sectors, tab 3 | https://www.magnific.com/app/creation/eIHAvetdqL |
+
+They are placeholders in the sense of the brief: swap them for the company's own documentary
+photography when it exists, keeping the same file names and the `img-doc` treatment. The grid
+objects on the stage cards were prototyped as a Magnific sheet
+(https://www.magnific.com/app/creation/aFsD5crfSh) and then rebuilt as procedural SVG so the
+stroke matches the rest of the site.
+
+## Interaction
+
+Two islands of script: the mobile navigation toggle in `Header.astro` and the sectors tabs in
+`Sectors.astro` (ARIA tablist, arrow keys, Home and End). Without JavaScript every sector panel
+and its image is shown in full; the `html.js` class set in `Base.astro` switches to one at a time.