← All projects

2026 · active

Lens of Charlie

A static-first personal publication for writing, projects, and photography.

Astro · TypeScript · React · Cloudflare

Intent

Lens of Charlie is a calm editorial home for writing, project case studies, and photography. Its main design constraint is attention. Navigation and interaction should help a reader understand location and content without making the interface the subject.

Constraints

  • Article and project source remains portable Markdown.
  • Core reading and navigation works without a client application.
  • Interactive behavior is progressively enhanced and keyboard accessible.
  • Published slugs remain durable public identifiers.
  • Photo originals stay outside the repository.
  • Generated output is disposable and never becomes source.

Architecture

flowchart LR Writing[Writing Markdown] --> Collections[Validated content collections] Projects[Project Markdown] --> Collections Photos[Photo metadata and categories] --> Astro Collections --> Astro[Astro static build] Astro --> Pages[Cloudflare Pages] Assets[Optimized photos in GitHub] --> Astro Pages --> Reader

The repository owns writing, project source, article images, UI, and build configuration. Optimized public photographs live under public/images/photos/ in the same GitHub repository and ship with the static build. Originals stay local. A small archive with modest resolution needs no separate storage service; metadata can group photos into author-defined categories independently of their file paths.

Important decisions

Static first, not static only

Search, project previews, Mermaid diagrams, gallery layouts, lightboxes, and reading progress enhance documents that already contain semantic content. JavaScript is used where interaction earns its cost.

Content contracts before CMS features

Astro collections validate frontmatter at build time. Git provides history and review for a single-author workflow. A database or CMS becomes justified only when the product owns mutable state or authoring demonstrates a real constraint.

One visual language across different media

Inter typography, restrained contrast, outline headings, a subtle dotted field, and soft iconography connect Writing, Projects, About, and Photos. Layout width changes by content type rather than forcing every page into one container.

Trade-offs

Static generation moves work to build time. Mermaid adds an optional client chunk on pages containing diagrams. Keeping web-ready photos in GitHub grows repository history, so the archive intentionally favors a small number of optimized images over full-resolution delivery. Each trade keeps a clear boundary and can be revisited with measured evidence.

Evidence

The repository contains architecture and operating documentation, content schemas, route redirects, production link validation, responsive layouts, and accessibility-oriented progressive enhancement. Build output and internal links are checked through pnpm quality.

This remains an evolving personal publication. Real photographs, final identity copy, deeper editorial review, browser automation, and representative accessibility audits remain explicit work rather than implied completion.

Current direction

The immediate focus is content depth: stronger articles, honest project evidence, and a photo pipeline that preserves metadata intentionally without publishing private originals. Architecture should continue to make publication ordinary.