Initial site: Astro + M3 Expressive, projects, blog

Personal site & blog for jeanlucmakiola.de.

- Astro 7 static output; self-hosted Inter + JetBrains Mono (Fontsource)
- Material 3 Expressive design tokens (red accent over neutral surfaces)
- Home (hero + about + selected work + latest writing)
- /work index + per-app pages (Calendula, Agendula, floret-kit) with
  build-time Gitea release tags, brand-icon link rows, features grid,
  and an at-a-glance facts panel
- Blog via Markdown content collection; RSS, sitemap, robots, OG/SEO
- Privacy-respecting Umami analytics, env-gated (off in dev)
- Dockerfile (build -> Caddy) + Caddyfile for Coolify deploy

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

PLANNING.md

@@ -0,0 +1,81 @@
+# jeanlucmakiola.de — personal website
+
+Status: **discussion / not started** · Started 2026-06-28
+
+## Goal
+A simple personal website (with room to grow into a blog), self-hosted on
+Coolify, privacy-respecting analytics, solid SEO, and an AI-driven authoring
+flow (content written as files by an agent, reviewed via git diff, auto-deployed
+on push).
+
+## Hard requirements
+- Self-hosted deploy on **Coolify** (own infra)
+- Privacy-respecting **analytics** (Umami preferred)
+- **SEO**: sitemap, RSS, canonical URLs, Open Graph, fast/static
+- **AI-driven flow**: agent can author/edit content via CLI/files (and/or API)
+- Keep it simple; nothing crazy. Blog is a likely-but-later addition.
+
+## Recommended stack (proposed)
+| Concern        | Choice                                   | Why |
+|----------------|------------------------------------------|-----|
+| Framework      | **Astro** (static output)                | Content-first, zero-JS default, content collections, great SEO |
+| Content        | **Markdown/MDX in git** (`src/content/`) | AI writes files; git is the API; no lock-in |
+| Analytics      | **Umami**, self-hosted on Coolify        | Privacy-respecting, cookieless, one `<script>` tag |
+| SEO            | `@astrojs/sitemap` + `@astrojs/rss` + OG | Mostly batteries-included |
+| Deploy         | Coolify static site (Docker/Nixpacks → `dist/`, served by Caddy/nginx) | Auto-deploy on git push |
+| Design         | TBD — align with Floret/M3 leanings later | per design-workflow rule, consult ui-ux-pro-max before building UI |
+
+## AI authoring loop
+1. Agent writes/edits `src/content/blog/<slug>.md` (frontmatter: title, date, description, tags)
+2. User reviews `git diff`
+3. Commit + push → Coolify rebuilds → live
+
+## Decisions (locked 2026-06-28)
+- [x] Framework: **Astro** (static)
+- [x] Content authoring: **Markdown-in-git**
+- [x] Analytics: **Umami**, self-hosted on Coolify
+- [ ] Domain confirmed: jeanlucmakiola.de
+- [ ] Scope of v1: homepage only, or homepage + blog from the start
+
+## Build plan (v1)
+1. [x] Scaffold Astro project (hand-rolled, Astro 7, strict TS)
+2. [x] Base layout + SEO head (title/description/canonical/OG), global styles (neutral)
+3. [x] Homepage (intro + latest posts)
+4. [x] Blog: content collection + index page + post template + tag pages
+5. [x] `@astrojs/sitemap` + RSS feed + robots.txt
+6. [x] Umami script in base layout (env-gated so it's off in dev)
+7. [x] Dockerfile (build → static, served by Caddy) + Caddyfile
+8. [x] **Visual design pass** — M3 Expressive, brand-faithful (see below)
+9. [ ] Add `og-default.png` (1200×630) to `public/`
+10. [ ] Deploy Umami as a Coolify service (one-click template)
+11. [ ] Deploy site on Coolify (Dockerfile build); set `PUBLIC_UMAMI_*` build vars
+12. [ ] Point jeanlucmakiola.de DNS at Coolify; enable HTTPS
+
+## Design system (M3 Expressive)
+- Tokens in `src/styles/tokens.css` as `--md-sys-*` CSS custom properties
+  (color roles, type scale, shape, elevation, motion, 8dp spacing); light + dark.
+- **Brand = red + monochrome.** `#FF4242` is an ACCENT only (logo dot, name
+  period, eyebrow tick, active-nav underline, one filled button, card arrows,
+  links). Surfaces are NEUTRAL gray — earlier red-tinted/red-bar version was
+  rejected as "too red heavy".
+- The pine-silhouette asset is grayscale (not green) — confirmed; no green hue.
+  tertiary role is a warm neutral, not a color.
+- Fonts: **Inter** + **JetBrains Mono**, self-hosted via Fontsource (no Google CDN).
+- Homepage is a clean portfolio: hero → About → Selected work cards → Latest writing rows.
+- Favicon = the rounded red "JM." mark; header is a typographic `JLM.` logotype.
+- **Projects** are a content collection (`src/content/projects/*.md`, schema in
+  `content.config.ts`): frontmatter (name, order, status, released, platform,
+  summary, links{gitea,fdroid,donate,translate}) + Markdown body. Single source
+  of truth for both the homepage cards and `/work`.
+- `/work` index lists all apps; `/work/<slug>` is a per-app page with its own
+  link set (F-Droid/Gitea/Donate/Translate, shown only when present) + overview.
+  Currently: Calendula (released), Agendula (in dev), floret-kit (design system).
+
+## Verified
+- `npm install` + `npm run build` succeed; 4 pages + RSS + sitemap generated.
+- Astro 7.0.3, 0 npm audit vulnerabilities (2026-06-28).
+- Screenshotted home/blog/post desktop + mobile (DARK mode). Light mode not yet
+  visually verified — headless couldn't force the scheme — but tokens are standard M3.
+
+## Notes
+- Coolify supports git-push auto-deploy; Umami has an official Docker image deployable as its own Coolify service.