Colophon

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.