Colophon — jmattphotos

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/.

¶Shoots are collections of photographs from a single outing or session. A shoot page presents the photographs together as a set, with a cover image and an optional overview. Individual photograph pages note which shoot they belong to.

¶Projects are thematic collections that may span multiple shoots, sessions, or years. A project is a way of grouping photographs around a subject or idea rather than a time or place. Photographs from anywhere on the site can belong to a project.

¶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 Stringer

¶This site is generated by Stringer, a custom static site generator I am developing specifically for this purpose. Stringer 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.