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 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. In 2026, coding assistance started with the Cursor ↗ AI editor, then moved to Claude Code ↗, from the Opus model onward, driven through Model Context Protocol (MCP) ↗ servers that extend it 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:ci

This command is a shortcut that runs the following:

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

Server & 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 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.

Structured data is added via JSON to enhance search engine and LLMs understanding of the content.

All pages are available in Markdown for AI agents and crawlers, following Dries Buytaert's approach ↗. Markdown versions are auto-generated from the HTML. The same URL can return Markdown when the client sends Accept: text/markdown (with correct q-value negotiation); agents can also use the .md path, the HTTP Link header, or <link rel="alternate" type="text/markdown">. Example: marcopontili.com/about.md ↗.

A plain-text llms.txt ↗ at the site root describes the site structure and main pages for search engines and LLMs (inspired by Svelte’s llms.txt ↗).

The robots.txt ↗ welcomes AI and answer-engine crawlers like GPTBot, ClaudeBot, PerplexityBot, and Google-Extended, and declares Cloudflare Content-Signal values that allow search, AI input, and training use, so the content can be cited in AI answers. The server-level rules match it: nothing robots.txt welcomes is blocked.

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.