Colophon

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, Catamaran, and Roboto Mono are licensed under the SIL Open Font License 1.1.

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.

I write the styles in modern CSS and process them 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 ↗ .
Prism JS ↗ handles syntax highlighting, in 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.

I use Git ↗ and GitHub ↗ for version control and code hosting.

AI #

This site was hand-coded for years. In 2025, ChatGPT ↗ was used for research and exploration. In 2026, coding assistance was gradually introduced, first with Cursor ↗, and later with Claude Code ↗, starting with the Opus model.

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’s speed scores via Google’s PageSpeed Insights ↗ tool.

SEO, GEO & AEO #

For SEO (search-engine optimisation), Semrush ↗ and Ahrefs ↗ cover crawlability, page speed, mobile layout, heading hierarchy, image alt text, clean URLs, and site architecture. Canonical URLs, meta descriptions, and an XML sitemap keep indexing consistent.

For GEO (generative-engine optimisation), every page has a Markdown mirror, following Dries Buytaert's approach ↗. Use a .md suffix or Accept: text/markdown (for example /about.md).

For AEO (answer-engine optimisation), JSON-LD structured data marks entities and page claims for answer engines, llms.txt maps the site, and robots.txt allows AI crawlers (GPTBot, ClaudeBot, PerplexityBot, Google-Extended) to fetch and cite the content.

Agents #

WebMCP exposes in-page tools (project search, page markdown) in supporting browsers. The local-relay embed is off by default.

The For Agents page is the developer portal for the machine surfaces: OpenAPI, the RFC 9727 API catalog, auth notes, ARD, and agent-skills.

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 #

I test with 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.

I trigger manual builds and deployments by running:

npm run build:ci

This command is a shortcut that runs the following:

npm run build && git add . && git commit -m "ci: build" && git push

Server #

The site is hosted on a Linux server at Netsons SSD 50 ↗.
Cloudflare CDN ↗ sits in front of the main site for caching and a faster edge. Third-party assets remain on their original servers.

The Apache configuration is a custom version of the one from H5BP ↗, plus Perishable Press's 8G Firewall ↗.

Security #

Cloudflare ↗ keeps the live site on HTTPS, filters noisy traffic, and adds basic shielding before requests reach Netsons.

A Content Security Policy (CSP) ↗ tells browsers what they may load and embed, so unexpected scripts, frames, and mixed content stay out.

SPF ↗, DKIM ↗, and DMARC ↗ on marcopontili.com reject forged mail in my name.

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 #

I write and maintain the privacy and cookie policies in-house, so they 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.