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”.
Design & Typography
The color palette is inspired by the Sterrenwacht Tivoli palette. SVG background patterns for project cards are from Hero Patterns.
The logo was created by Linda Armelius.
The social icons in homepage and the external link icon used across multiple pages are from Feather Icons.
The Open Graph image is from Ferenc Almasi on Unsplash.
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.
See the live styleguide for a closer look at the website’s visual language.
Code
This site uses semantic HTML and custom PHP for templating, metadata, and navigation. The setup is a personal playground for testing ideas, maintaining full control, and staying flexible.
Styles are written on top of the Bullframe CSS framework, using modern Sass syntax, a modular architecture, and the BEM methodology.
Layout, spacing, and font sizes rely on rem
units throughout (except in media queries), enabling responsive typography and global scaling via the root font size.
JavaScript powers UX enhancements like smooth scrolling (respecting prefers-reduced-motion
), Chromium theme colors, and support for light/dark modes via prefers-color-scheme
. A touch
/no-touch
class is added on load to enable device-specific tweaks. Syntax highlighting is handled by Prism JS using the “Tomorrow Night” theme.
Development is done in Visual Studio Code with extensions like ESLint, Stylelint, and Prettier for linting and formatting.
Version control and code hosting are managed using Git and GitHub.
File Processing & Performance
Webpack handles asset bundling, Sass-to-CSS compilation, autoprefixing, and minification. Source maps are included for development.
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.
Accessibility
Full keyboard navigation is supported, with a visible focus indicator using the :focus-visible
CSS pseudo-class. The no-js
class is removed on page load to indicate JavaScript is enabled—however, the site remains functional without it.
“Skip to content” and “Back to start” links enhance navigation for screen readers and keyboard users.
User preferences for reduced motion are respected.
The site remains fully functional and readable up to 200% zoom.
ARIA roles and landmarks, such as role="main"
, role="navigation"
, and descriptive aria-labels
, are implemented to support assistive technologies.
HTML is kept valid per W3C standards wherever possible. Validate it here.
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.
Deployment
Deployment is handled automatically by a GitHub Action that runs every time code is pushed to the master
branch. The codebase is linted before deployment to maintain consistency and avoid errors.
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.
SEO & Analytics
SEO insights are provided by Semrush, including technical audits for crawlability, fast page load times, mobile responsiveness, proper heading structure (H1, H2, etc.), alt text for images, clean URLs, and overall site architecture.
Visitor analytics and behavior data are powered by Matomo On-Premise (self-hosted).
Privacy and Cookies
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.