An overview of the open-source tools, technologies, and techniques used to build this website.
The term colophon originates from the Latin colophōn, meaning “summit” or “finishing touch”.
Typography & Design
Webfonts include Catamaran for H1s, Cabin for body text, and Roboto Mono for monospace elements. All fonts are self-hosted via Google Webfonts Helper. A native system font stack serves as a fallback for optimal performance.
The logo was created by Linda Armelius. Icons are by Pixel Perfect via Flaticon.
The Open Graph image is from Ferenc Almasi on Unsplash.
See the live styleguide for a closer look at the website’s visual language.
Code
The site uses semantic HTML for structure. PHP handles dynamic includes and class logic. CSS and JavaScript include cache-busting to improve performance and update delivery.
Styles are based on the bullframe.css framework, written in SCSS using a modular Sass architecture and the BEM methodology.
JavaScript adds UX enhancements like smooth transitions and Chromium-specific theme colors, with support for light and dark modes. The vanilla-lazyload package ensures efficient lazy loading. Syntax highlighting uses Prism JS with the “tomorrow night” theme.
Development is done in Visual Studio Code with extensions like Auto Rename Tag, ESLint, Prettier, Stylelint, and PHP Intellisense for consistency and productivity.
Version control is managed using Git and GitHub.
Accessibility
Full keyboard navigation is supported with a visible focus indicator using the :focus-visible
CSS
pseudo-class.
“Skip to content” and “Back to start” links are included for easier navigation, especially for screen readers and keyboard users.
The site remains functional and readable up to 200% zoom.
ARIA roles and landmarks like role="main"
, role="navigation"
, and descriptive
aria-labels
are included to support assistive tech.
W3C HTML validity is mantained wherever possible. Validate it here.
File Processing & Performance
Webpack bundles and optimizes JavaScript, CSS, and image assets.
Performance tools like Google Lighthouse and strategies such as critical CSS, lazyloading, minification, and gzip compression ensure speed and responsiveness. See metrics via PageSpeed Insights.
Testing
Testing is conducted using Chrome DevTools, BrowserStack for cross-browser checks, Webhint for performance and accessibility, MDN HTTP Observatory for security, and various automated UI tools.
Cypress handles end-to-end testing, simulating user flows and verifying interactions.
Server & Hosting
The Apache configuration is a custom version of the one from HTML5 Boilerplate, with
added security rules from Perishable Press. It
manages CORS for fonts, removes www.
prefixes, handles rewrites, enables caching and gzip,
restricts sensitive files, and applies a Content Security Policy (CSP).
The site is hosted on Netsons SSD 50, while third-party assets remain on their original servers.
Privacy and Cookies
Visitor analytics are provided by Google Analytics, Matomo, and Tinylytics.
Cookie consent, the privacy policy, and cookie policy are managed via Iubenda.
To reset the cookie prompt, clear your cache or visit in
private browsing.
Change preferences anytime by clicking “Your Privacy Choices” in the footer.
AI Assistance
ChatGPT was used to support research, writing refinement, and grammar
checks across the site. GitHub Copilot provided suggestions
for boilerplate code, SCSS optimization, and JS patterns.
All AI contributions were manually reviewed and
edited to fit the tone, structure, and standards of the project.