How this site is made, what runs it, and which tools are part of its workflow
This site has been online since 2014, evolving through several iterations over the years. It is where I write about technology, media, and digital products, and occasionally document independent projects and experiments. It serves as both a professional notebook and a publishing outlet, with a deliberate focus on tools, engineering decisions, and the systems that shape how digital experiences are built.
What follows is a transparent account of how this site is made, what powers it, and which tools are part of its day-to-day operation.
An Informative Pipeline
Content does not write itself, but the tooling around it matters. The pipeline below reflects how information flows from raw input to published output, with each tool serving a specific role rather than overlapping ones.
| Tool | Role |
|---|---|
| Obsidian | Personal knowledge warehouse. Captures notes, web sources, and AI chat excerpts. The starting point for most articles and ideas. |
| ChatGPT | Research and editorial collaborator. Used to explore questions, compare sources, structure arguments, revise texts, and create visuals. The author verifies sources and makes the final editorial decisions. |
| Google Search | Finds original sources and supports verification of facts and claims during research. |
| Figma | Design environment for UI concepts and visual exploration. Used to prototype interface ideas before translating them into code. |
| Jupyter Notebooks | Data exploration and analysis environment, run through Visual Studio Code. Used to query, crunch, and visualise datasets when the work calls for it. |
| Codex | Development and maintenance collaborator. Used to inspect and edit the codebase, update content, run checks, and deploy the site. Changes are reviewed against the project’s requirements and verified through builds, tests, and browser checks. |
| Visual Studio Code | Code and content editor for direct inspection and manual changes alongside the work done with Codex. |
| Social media syndication channel. Published articles are distributed here to reach a broader audience. | |
| Chrome | Default browser for development and research. Used across the full workflow, from local previews to source exploration. |
Stack
The site is built for simplicity, performance, and low operational overhead. The choices reflect a preference for tools that get out of the way and let the content speak.
- Astro: Content collections, Markdown, component-based layouts, and file-based routing form the publishing foundation. Public content is prerendered where appropriate; contact submissions and access-controlled chapters use server-side logic.
- Astro components: Render layouts, the contact form, and structured figures embedded in MDX publications. The contact form uses Astro Actions and also works without JavaScript.
- Cloudflare Workers: Hosts the site and runs its server-side functionality, with static assets delivered through Cloudflare’s network. KV stores support sessions and paid-content access records.
- Cloudflare Email Service: Delivers contact form messages through a native Workers binding restricted to the site’s verified destination address. Replies go to the visitor’s email address.
A few notable packages underpin the content pipeline:
| Package | Purpose |
|---|---|
| @astrojs/rss | Generates the RSS feed from the content collection, enabling syndication to feed readers. |
| remark-smartypants | Converts straight quotes and dashes to typographically correct curly quotes and em dashes during Markdown processing. |
| sanitize-html | Strips unsafe HTML from user-submitted input before it is processed or stored. |
Styling is plain CSS throughout: a global stylesheet of design tokens, Astro’s scoped component styles, and a CSS module for editorial figures. No preprocessor.
History
This site first went online in 2014 and has gone through several evolutions since. Its current form is a structured English-language publishing environment with support for multiple content types, data-driven posts using Jupyter Notebooks, and a contact form backed by a serverless function.
The design has been refined incrementally rather than replaced wholesale. Each iteration has kept the same underlying priorities: readable typography, fast page loads, and as little client-side JavaScript as possible.
Licence
Unless a page states otherwise, the site’s text, visual material and project documentation are © Mariano Viola. All rights are reserved.
Individual articles may be published under a Creative Commons licence declared in their own metadata and displayed on the article page. Books, projects, datasets, figures and other publications declare their rights separately. A licence attached to one item does not apply automatically to another item or to the site as a whole.
Source code for the site is proprietary. The implementation, component architecture, and build configuration are not available for reuse or redistribution.
Accessibility & Performance
The site is built with accessibility and performance as baseline constraints, not afterthoughts.
- Semantic HTML: content is structured with appropriate heading hierarchy, landmark elements, and descriptive link text. No
divsoup where anav,article, ormainwould serve better. - HTML-first rendering: content is rendered as HTML. Client-side JavaScript supports navigation, form feedback, menus, and the home-page animation; the contact form also works without it.
- Self-hosted fonts: typefaces are served from the same origin via Fontsource, eliminating render-blocking third-party font requests.
- Edge delivery: all assets are served from Cloudflare’s global edge network, keeping latency low regardless of the visitor’s location.
- No tracking: there are no analytics scripts, advertising trackers, or third-party cookies on any page.
Last updated: 24 October 2026.
Typography
Two typefaces are in use, each serving a distinct role. All are served via Fontsource, a self-hosted font distribution package that avoids third-party requests to Google Fonts.
| Typeface | Classification | Designer | Weights | Role |
|---|---|---|---|---|
| Inter | Neo-grotesque sans-serif | Rasmus Andersson | 400, 500, 700 | Body copy, long-form prose, UI, navigation |
| Inconsolata | Monospace | Raph Levien | 400 | Code blocks, inline code, technical output |
Inter was designed specifically for screen readability at small sizes. Its metrics are optimised for digital interfaces rather than print, making it a practical default for long-form reading and UI elements alike. It sets everything on the site, posts and projects included, on a single roomier measure for body prose.
Inconsolata is a humanist monospace with proportions closer to a text face than to a traditional terminal font. It avoids the mechanical coldness of typefaces designed purely for fixed-width output.
Colour Palette
The palette draws on six families (Amber, Teal, Blue, Indigo, Red, and Gray), each spanning eleven shades from 50 (near-white) to 950 (near-black). The full range is available as CSS custom properties; in practice, only a subset is active in the UI at any time. Light and dark modes draw from opposite ends of each scale.