Colophon — Reality Framed

How to Navigate This Site

¶Content here is organized into four types, each with its own archive and browsing experience.

¶Photographs are the atomic unit of the site. Each photograph has its own page with the full image, a location and date, caption, description, and technical notes. Most photographs also include a complete metadata table: camera, lens, settings, and IPTC data including location and keywords. You can browse all photographs chronologically at /photos/, or browse by keyword at /photos/keywords/.

¶Projects are ongoing bodies of work built around a subject or idea rather than a time or place. Photographs from anywhere on the site can belong to a project.

¶Collections gather photographs that belong together, such as the pictures from a single trip. A photograph can belong to more than one collection, and its page links to each one.

¶Blog is where I write. Posts range from brief notes to longer articles. You can browse all posts at /posts/ or by tag at /posts/tags/. An RSS feed is available for all content or photographs only.

¶The Changelog is a reverse-chronological record of everything added to the site.

Built With RealityFramed

¶This site is generated by RealityFramed, a custom static site generator I am developing specifically for this purpose. RealityFramed is written in Python and turns a folder of JPGs, Markdown sidecar files, and a TOML configuration file into a complete static website.

¶The build pipeline extracts EXIF and IPTC metadata from every photograph using ExifTool, generates four image sizes (thumbnail, medium, large, and original) using Pillow, and renders all pages through Jinja2 templates. The finished site is a folder of plain HTML, CSS, and image files — no server-side code, no database, no JavaScript framework.

¶The site is hosted on Amazon S3 and served via Amazon CloudFront.

Design and Typography

¶The site is hand-coded in HTML and CSS — no frameworks, no utility classes. The design system is built on CSS custom properties and aims for a reading experience that gets out of the way of the photographs.

¶Typography is set in four families, all self-hosted:

Cormorant Garamond — used for display headings, photo titles, section headings, and drop caps. An elegant serif with optical variety across weights and a distinctive italic.
Source Serif 4 — used for body text and prose. A contemporary optical-size serif designed for reading at screen sizes.
DM Sans — used for navigation, labels, captions, dates, and all UI elements. A geometric sans-serif with a clean, neutral texture.
Open Sans Bold — used only for the site name in the header and footer.

¶The site fully supports dark mode via the prefers-color-scheme media query. No toggle or JavaScript is involved — the browser switches automatically based on your operating system preference.