Colophon

Intro

This is a living document for me. I am writing it before I write a single line of code or choose a single technology. Its role is to define my goals, guiding principles, and philosophies before building anything, to capture the design system and other visual decisions, to choose the tech stack based on those goals, and to keep all of this public for easy reference.

I am not a front end guy so this page will allow me to learn. It should hold the design system, colors, fonts, reusable components, and other visual decisions. I will define the exact scope as I go.

Purpose of this site

• Central place for projects, adventures, and writing that can grow over time.
• Document and share software I build.
• Explore and share interests like Bitcoin, software development, security, DevOps, Baduk, and adventures.
• Act as a permanent home for my Bike Journal currently hosted on CGOAB.
• Learn frontend and design.
• Keep my backend skills fresh. Experiment with security, speed, and technical optimizations beyond typical static site needs.

Philosophy and ethics

• Ownership. All content, domain, and platform under my control with minimal vendor lock in.
• Performance. Lightweight, fast, no bloat.
• Privacy. Minimal analytics with GoatCounter, no ads, no cookies unless essential.
• Security. Strong TLS, DNSSEC, HSTS, strict CSP, locked down headers, minimal surface area. Needless but can nerd out about this.
• Sustainability. Low cost, efficient to run long term.
• Design discipline. Clear hierarchy, minimal aesthetic, dark theme.

Build approach

• Responsive design that scales smoothly.
• Progressive Web App.
• Mobile first.
• WCAG AA baseline accessibility with keyboard navigation, focus states, alt text, and semantic HTML. Explore keyboard shortcuts beyond tab.
• Use open source tools where possible.
• Keep components and design decisions here in public view.

Technology decisions

All choices must align with the goals and principles above. No compromises on privacy, performance or security.

Frontend framework

Astro. Developer friendly, ships no JavaScript by default, hydrates only interactive components when needed, and is fast for users while allowing growth into complex applications.

Styling

Tailwind CSS. Offers helpful constraints, removes unused styles, and is developer friendly.

Hosting and caching

Static hosting on S3 with CloudFront. No backend servers for the main site to reduce cost, complexity, and attack surface. Possible R2 and Cloudflare to play with dual cloud setup, tho this is pointless for such a site.

Analytics and monitoring

GoatCounter. Privacy respecting, cookie free, open source, and lightweight. I have a huge amount of respect for this project.

Automation and DevOps

Simple bash deploy script to build and sync to S3.

Security

Maintain high security standards even for a personal static site.

Dev environment

All design, code, deployment, and ongoing writing can be done from my phone with a folding Bluetooth keyboard using Termux, zsh, tmux, and nvim. Workflows should be fast, repeatable, and automated.

Site structure

• Home. Overview of me and the site.
• About. Background and context.
• Projects. Showcase and details of work.
• Writing. Articles and essays.
• Adventures. Travel and endurance stories.
• Baduk. Selected game records and thoughts.
• Now. Current focus and priorities.
• PGP keys. For secure communication.
• Colophon. This page as the design and principles record.
• Contact. How to reach me.

Design tokens

Components