--- title: Colophon | Marco Pontili description: Learn about the web techniques and open-source tools used to build this site, plus design and technology insights. url: https://marcopontili.com/colophon canonical: https://marcopontili.com/colophon lastmod: 2026-08-21 author: Marco Pontili lang: en-US type: page --- # Colophon An overview of the open-source tools, technologies, and techniques used to build this website. ## Design & Typography The color palette is inspired by the [Sterrenwacht Tivoli ↗](https://www.color-hex.com/color-palette/94360 "Sterrenwacht Tivoli Color Palette") palette, with accents from the [CLRS ↗](https://clrs.cc "CLRS color palette") palette. All colors use [OKLCH units ↗](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch "OKLCH color space on MDN"), for uniform lightness adjustments across all hues. The same OKLCH-only rule drives the open-source [ForEveryone Berlin design system](https://marcopontili.com/projects/foreveryone "ForEveryone Berlin Design System case study") I co-authored, whose token pipeline is a direct sibling of this site's. SVG background patterns for project cards are from [Hero Patterns ↗](https://heropatterns.com/ "Hero Patterns"). The logo was created by [Linda Armelius ↗](https://www.linkedin.com/in/linda-armelius-4b502572/ "Linda Armelius on LinkedIn"). The social icons in homepage and the external link icon used across multiple pages are from [Feather Icons ↗](https://feathericons.com/ "Feather Icons"). Webfonts include [Catamaran ↗](https://fonts.google.com/specimen/Catamaran "Google Fonts: Catamaran") for H1s, [Cabin ↗](https://fonts.google.com/specimen/Cabin "Google Fonts: Cabin") for body text, and [Roboto Mono ↗](https://fonts.google.com/specimen/Roboto+Mono "Google Fonts: Roboto Mono") for monospace elements. All fonts are self-hosted via [Google Webfonts Helper ↗](https://gwfh.mranftl.com/fonts "Google Webfonts Helper"). A native [system font stack ↗](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ "Using System UI Fonts - Smashing Magazine") serves as a fallback for optimal performance. Cabin and Catamaran are licensed under the SIL Open Font License 1.1; Roboto Mono under the Apache License 2.0. *See the live [UI Style Guide](https://marcopontili.com/styleguide "Site Styleguide") for a closer look at the website’s visual language.* ## Code This site uses semantic HTML and raw PHP for templating, metadata, and navigation. The current setup is a personal playground for testing ideas, maintaining full control, and staying flexible without relying on any framework, SSG, or CMS. Styles are written in modern CSS and processed with [PostCSS ↗](https://postcss.org/ "PostCSS") using a modular architecture, [design tokens ↗](https://m3.material.io/foundations/design-tokens/overview "Design Tokens - Material Design"), and the [BEM ↗](https://en.bem.info/methodology/ "BEM Methodology") methodology. Vanilla JavaScript enhances UX by handling anchor and fragment navigation, managing Chromium [theme colors ↗](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/theme-color "MDN: Meta Theme-Color") , and enabling automatic light and dark mode support via `prefers-color-scheme` or a manual `data-theme="light/dark"` attribute on the `` element. The testimonials grid uses [Masonry ↗](https://masonry.desandro.com/ "Masonry by Desandro") for a responsive column layout. [GSAP ↗](https://gsap.com/ "GSAP: GreenSock Animation Platform") handles animations, working together with CSS transitions and animations. Interactive carousels are powered by [Embla Carousel ↗](https://www.embla-carousel.com/ "Embla Carousel") . Syntax highlighting is managed by [Prism JS ↗](https://prismjs.com/ "PrismJS Syntax Highlighter") using the [“Tomorrow Night” ↗](https://prismjs.com/download.html#themes=prism-tomorrow "PrismJS Tomorrow Night Theme") theme. Forms use [Web3Forms ↗](https://web3forms.com "Web3Forms") , for serverless submissions. Development is done in [Visual Studio Code ↗](https://code.visualstudio.com/ "Visual Studio Code") with extensions like [ESLint ↗](https://marketplace.visualstudio.com/items/dbaeumer.vscode-eslint "VS Code Extension: ESLint") , [Stylelint ↗](https://marketplace.visualstudio.com/items/stylelint.vscode-stylelint "VS Code Extension: Stylelint") , and [Prettier ↗](https://marketplace.visualstudio.com/items/esbenp.prettier-vscode "VS Code Extension: Prettier") for linting and formatting. Version control and code hosting are managed using [Git ↗](https://git-scm.com/ "Git Homepage") and [GitHub ↗](https://github.com "GitHub Homepage") . ## AI This site was hand-coded for years. In 2025, [ChatGPT ↗](https://chatgpt.com "ChatGPT") was used for research and exploration. In 2026, coding assistance started with the [Cursor ↗](https://cursor.com "Cursor AI code editor") AI editor, then moved to [Claude Code ↗](https://claude.com/claude-code "Claude Code"), from the Opus model onward, driven through [Model Context Protocol (MCP) ↗](https://modelcontextprotocol.io "Model Context Protocol") servers that extend it with browser automation, debugging, refactoring, dependency updates, and security checks. ## Building & Speed [Vite ↗](https://vite.dev/ "Vite Official Site") handles JavaScript and CSS bundling, [PostCSS ↗](https://postcss.org/ "PostCSS") processing with source maps, autoprefixing, and minification of both JS and CSS. It also copies PHP files and static assets, and provides fast Hot Module Replacement during development. Performance tools like [Google Lighthouse ↗](https://developer.chrome.com/docs/lighthouse/overview/ "Google Lighthouse Documentation") and strategies such as lazyloading, minification, and gzip compression ensure speed and responsiveness. Check this site’ speed scores via Google’s [PageSpeed Insights ↗](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmarcopontili.com%2F&tab=desktop "Google PageSpeed Insights") tool. ## Accessibility Full keyboard navigation is supported, with a visible focus indicator using `:focus-visible`. The `no-js` class is removed on page load to indicate JavaScript is enabled; the site remains functional without it. “Skip to content” and “Back to start” links improve navigation for keyboard and screen-reader users. Reduced-motion preferences are respected. The layout stays readable and usable up to 200% zoom. Native landmark elements, such as `
` and `