69 lines
3.5 KiB
Markdown
69 lines
3.5 KiB
Markdown
# 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 `<Image>` component (never raw `<img>` tags for raster images)
|
|
- SVGs can be inlined directly in components
|
|
- No client-side JavaScript frameworks (React, Vue, etc.) — use vanilla JS in `<script>` tags when interactivity is needed
|
|
- Keep components small and single-purpose
|
|
- File naming: kebab-case for files, PascalCase for components
|
|
|
|
## Content rules (from Qumo company guidelines)
|
|
|
|
- Never mention team size, company size, or founding date
|
|
- Never name clients in public content (use descriptive labels: "a shipping company")
|
|
- The team section shows 5 co-founders: Luigi, Matthijs, Jelle, Jorn, Stijn
|
|
- Engagement models should not be listed as a menu — mention naturally
|
|
- Proof points are for calls/follow-ups, not the website
|
|
|
|
## SEO requirements
|
|
|
|
- Every page needs: unique <title>, meta description, canonical URL, hreflang alternates, OG tags
|
|
- JSON-LD structured data on every page (ProfessionalService, BreadcrumbList, etc.)
|
|
- All images need alt text
|
|
- Heading hierarchy must be correct (single h1 per page, logical h2→h3 nesting)
|
|
- sitemap.xml auto-generated by @astrojs/sitemap
|
|
|
|
## Testing before committing
|
|
|
|
- `cd website && npm run build` must succeed (catches broken links, missing imports)
|
|
- Check the built output in `website/dist/` for correct HTML structure
|
|
- Validate JSON-LD with Google Rich Results Test after deployment
|
|
|
|
## Current reference
|
|
|
|
The live Webflow site at https://www.qumo.io is the visual reference. Match the design, layout, and content — but improve the code quality, performance, and SEO. |