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 ↗ palette, with accents from the CLRS ↗ palette. All colors use OKLCH units ↗, for uniform lightness adjustments across all hues. The same OKLCH-only rule drives the open-source ForEveryone Berlin design system I co-authored, whose token pipeline is a direct sibling of this site's.
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 ↗.
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. 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 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 ↗ using a modular architecture, design tokens ↗, and the BEM ↗ methodology.
Vanilla JavaScript enhances UX by handling anchor and fragment navigation, managing Chromium theme colors ↗ , and enabling automatic light and dark mode support via prefers-color-scheme or a manual data-theme="light/dark" attribute on the <html> element.
The testimonials grid uses Masonry ↗ for a responsive column layout.
GSAP ↗ handles animations, working together with CSS transitions and animations.
Interactive carousels are powered by Embla Carousel ↗ .
Syntax highlighting is managed by Prism JS ↗ using the “Tomorrow Night” ↗ theme.
Forms use Web3Forms ↗ , for serverless submissions.
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 ↗ .
AI #
This site was hand-coded for years. In 2025, ChatGPT ↗ was used for research and exploration. Since 2026, coding assistance has moved from Cursor ↗ to Claude Code ↗, from the Opus model onward.
Model Context Protocol (MCP) ↗ servers extend that workflow with browser automation, debugging, refactoring, dependency updates, and security checks.
Building & Speed #
Vite ↗ handles JavaScript and CSS bundling, 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 ↗ and strategies such as lazyloading, minification, and gzip compression ensure speed and responsiveness. Check this site’ speed scores via Google’s 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 <main> and <nav>, together with descriptive aria-label values, help assistive technologies interpret the structure of each page.
The main content container uses tabindex="-1" to ensure skip links move focus reliably. Decorative SVG icons are marked with aria-hidden="true" to avoid unnecessary screen-reader output.
HTML is kept valid according to W3C standards. Validate it here ↗ .
CSS-only support for Right-to-Left (RTL) languages when content is auto-translated by browsers like Google Chrome. Improves readability for Arabic, Hebrew, Persian, and Urdu translations.
Read the accessibility statement .
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, while Playwright ↗ drives visual-regression screenshots and Jest ↗ covers unit tests.
Deployment #
Deployment is handled automatically by a GitHub Action ↗ that runs every time code is pushed to the main branch. The codebase is linted before deployment to maintain consistency and avoid errors.
Manual builds and deployments are triggered by running:
npm run build:ciThis command is a shortcut that runs the following:
npm run build && git add . && git commit -m "ci: build" && git pushServer & Hosting #
The Apache configuration is a custom version of the one from HTML 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, GEO & AEO #
SEO insights come from Semrush ↗: crawlability, page speed, mobile layout, heading hierarchy, image alt text, clean URLs, and site architecture.
JSON-LD structured data helps search engines and answer engines interpret each page. Canonical URLs, meta descriptions, and an XML sitemap keep indexing consistent.
For GEO and AEO, every page has a Markdown mirror auto-generated from the HTML, following Dries Buytaert's approach ↗ to a third audience of agents and crawlers. Reach them at the same path with a .md suffix or via content negotiation. Example: marcopontili.com/about.md ↗.
A plain-text llms.txt ↗ at the site root maps structure and main pages for LLMs (inspired by Svelte’s llms.txt ↗).
robots.txt ↗ welcomes AI and answer-engine crawlers (GPTBot, ClaudeBot, PerplexityBot, Google-Extended) so the content can be cited in AI-generated answers.
Analytics #
Visitor analytics and behavior data are powered by a cookieless Matomo On-Premise ↗.
The same install records anonymous interaction events: CTA clicks, contact-form starts and submits, and case-study navigation. No cookies, no personal data.
Privacy & Cookies #
The privacy and cookie policies are written and maintained in-house to reflect the site’s actual data practices.
The cookie consent is handled by vanilla-cookieconsent ↗ and iframemanager ↗.
Privacy preferences can be changed anytime via “Privacy Choices” in the footer.