commit ed946c03d7385d26b79861de8a0ab4fbeed9054d Author: Luigi Maiorano Date: Fri Apr 10 12:41:18 2026 +0200 Initial project scaffold: Astro + OpenSpec + Claude Code config diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md new file mode 100644 index 0000000..39d1f9a --- /dev/null +++ b/.claude/CLAUDE.md @@ -0,0 +1,69 @@ +# qumo.io Website + +## What this is + +The company website for Qumo (qumo.io), a data analytics consultancy targeting Dutch MKB companies. Built with Astro 5, Tailwind CSS, and served from Docker containers behind Caddy. + +## Execution environment + +Claude Code runs inside a nono sandbox (`nono run --profile claude-openspec -- claude`). +- The sandbox grants read+write to the working directory and `~/.claude` +- Network access is enabled (Anthropic API, npm registry, Astro MCP server) +- All filesystem and network boundaries are kernel-enforced by nono (Landlock on Linux) +- Do NOT attempt to access files outside the project directory or `~/.claude` + +## Architecture + +- **Framework**: Astro 5 (static output, zero JS by default) +- **Styling**: Tailwind CSS with custom Qumo brand tokens +- **Font**: Archia (self-hosted woff2, licensed from Atipo Foundry) +- **Localization**: EN (default) + NL, file-based routing with JSON content strings +- **Contact form**: Go backend at /api/contact, honeypot + timestamp spam protection +- **Deployment**: Docker multi-stage build → nginx:stable-alpine-slim → Caddy reverse proxy +- **Hosting**: Self-hosted VPS behind Cloudflare (orange cloud, Full strict TLS) +- **Git**: Gitea at gitea.qumo.io + +## Brand guidelines (must follow) + +- **Colors**: Midnight #102022 (primary dark), Snow #F3F3F3 (light bg), Gradient #5257E4 → #F71E3E (accent only, never as flat standalone colors) +- **Font**: Archia — Bold/SemiBold for headings (uppercase), Regular for body (sentence case) +- **Icons**: Phosphor Icons, light weight, 32px baseline, SVG format +- **Logo**: Q icon can stand alone. Wordmark must always pair with Q icon. Never modify. +- **Brand element**: Q-corner motif, can be used as corner accent or tiled pattern + +## Code conventions + +- Astro components use `.astro` extension +- All text content comes from `src/content/en.json` and `src/content/nl.json` — never hardcode user-visible strings in components +- CSS uses Tailwind utilities. Custom CSS only for animations and font-face declarations +- Images go in `src/assets/` and use Astro's `` component (never raw `` tags for raster images) +- SVGs can be inlined directly in components +- No client-side JavaScript frameworks (React, Vue, etc.) — use vanilla JS in `