Cybersecurity & technology notes — learning in public
Colophon
How this site is built, designed and maintained.
Principles
- Content over decoration.
- Excellent reading experience for technical writing.
- Fast, accessible and secure by default.
- Easy to maintain for years — a new post is a single Markdown file.
Technology stack
- Next.js 16App Router, static HTML export (`output: 'export'`)
- TypeScript 5strict typing throughout
- Tailwind CSS 4design system + shadcn/ui components
- Shikibuild-time syntax highlighting (dual light/dark themes)
- unified / remark / rehypeMarkdown → static HTML pipeline
- next-themeslight/dark/system theme (no flash on load)
Design
Warm-amber accent on a neutral base — deliberately avoiding both the cliché neon-green "hacker" aesthetic and the indigo/blue corporate-SaaS look. Typography is the default Geist sans + Geist mono pair; code blocks use a terminal-prompt brand mark and Shiki's GitHub light/dark themes. Whitespace and hierarchy do the work; there are no hero images, stock photography, or decorative animations.
Content
Every post is a single Markdown file in content/<locale>/posts/<slug>/index.md with YAML frontmatter. No CMS, no database, no registry — add a file, the page exists. The same pattern powers projects, reading, talks and certifications. Translations are separate Markdown files linked by a translationKey field; articles are never runtime-translated.
Deployment
next build produces a fully static out/ directory, pushed to GitHub and deployed to Cloudflare Pages automatically. No server runtime, no environment variables, no secrets. HTTPS is handled by Cloudflare. Build command: bun run build:cf.
Performance
Article bodies are rendered to static HTML at build time — zero client JS for the prose itself. The only client islands are: the theme toggle, language switcher, code-block copy buttons, TOC active-section tracking, search, and keyboard shortcuts. No tracking, no analytics, no cookies, no third-party scripts. Images are lazy-loaded and served unoptimized (static export).
Accessibility
Semantic HTML landmarks, skip-to-content link, visible focus states,prefers-reduced-motion support, keyboard shortcuts with a focus-trapped help dialog, accessible code-copy buttons with aria-labels, and per-locale <html lang>.
Security
No backend, no API keys, no secrets in the repo. A security.txt declares a vulnerability-disclosure contact. Cloudflare Pages serves a strict CSP, HSTS, nosniff and other security headers via _headers. The site itself demonstrates good security hygiene — it's a cybersecurity blog, after all.