Colophone page!

This page documents the technical infrastructure, tools used, and design decisions behind this site.

Technology Stack

Static Site Generator

The site is built with Eleventy (11ty) — a fast, flexible, JavaScript-based static site generator. Its server-less architecture, producing only HTML/CSS/JS, ensures both security and performance.

Template Engine

Page templates are written in Nunjucks. Markdown content is injected into Nunjucks layouts and extended with custom shortcodes.

Markdown Processing

Content is parsed with markdown-it. Additionally:

  • markdown-it-attrs — enables adding CSS classes and IDs directly in markdown ({.class #id})
  • Wikilinks syntax — Obsidian-style [link](/link/) and ![width](/image/) shortcuts

Image Pipeline

Optimization

All images are processed at build time with @11ty/eleventy-img:

  • Multiple width versions (400w, 800w, 1200w, 1600w)
  • Modern format (WebP) + fallback (JPEG)
  • Responsive <picture> tags with lazy loading

Preset System

Custom presets defined for different use cases:

  • body — post images (natural ratio, no cropping)
  • infocard — game/make cards (16:9 crop)
  • gallery — thumbnail grid (1:1 square crop)
  • lightbox — full-screen viewing (max 1920px)

Cropping operations are performed at build-time with Sharp.

CSS & Design

Styling Approach

Minimal, vanilla CSS without utility-first frameworks. Every style is custom-written — no unnecessary kilobytes.

Theme

Dark theme, high contrast, readability-focused. Color palettes managed centrally with CSS variables.

Typography

  • System font stack — uses the operating system's default font, zero loading time
  • Inter (Google Fonts) — for readability in long-form content

Responsive

Mobile-first approach. Breakpoints kept minimal (768px, 1024px, 1280px).

Content Collections

The site is organized around three main collections:

Makes

3D printing projects, sculpture work, airbrush painting experiments. Each make includes:

  • Front-matter metadata (tags, tools, materials)
  • Gallery (lightbox viewing)
  • Detailed descriptions

Games

Game reviews, logs, screenshots. Enhanced with screenshots captured from Xbox.

Slash Pages

Special pages like /now, /uses, /about. Dynamically categorized and displayed in grid layout.

Custom Features

InfoCard Shortcode

Displays game or make items in compact card format. Two variants:

  • Normal — standard info card
  • Pick — highlighted version for featured items

Card & CardGrid

Converts tabular data into visual cards. Pipe-separated (|) data in markdown automatically becomes stylized cards.

Wikilinks

Obsidian-style short links supported:

  • [page-name](/page-name/) → auto-slugified link
  • ![image.jpg](image.jpg){width="400"} → image with width override

Hosting & Deployment

(Add hosting info here — Netlify/Vercel/GitHub Pages etc.)

Build Process

Automatic build triggered on each commit. Average build time ~X seconds. Generated static files served via CDN.

Source Code

(Optional — if open source, add GitHub repo link)

Changelog

2025 — Initial version live. Built from scratch with Eleventy + custom pipeline.

Acknowledgments

This site is built on top of these open source projects:

Thanks to everyone in the community who shares knowledge.

wakatime

https://shields.io/badges


← Pages Menu