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. |
| Claude | Research partner, editorial assistant, content editor, and image generator. Used to check sources alongside Google Search, refine and fix published texts, and produce illustrations and visuals for posts. |
| ChatGPT | Research-planning, structural-editing and technical collaborator used on selected publications and development tasks. Project-specific methodology notes describe its role and the author’s verification responsibilities. |
| Google Search | Primary source verification and fact-checking layer, paired with Claude for research tasks. |
| Claude Design | Prompt-to-prototype design tool. Used to explore layout and interface directions conversationally, before they are refined in Figma or handed to Claude Code to build. |
| 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. |
| Claude Code | AI-powered code assistant. Handles both code editing and content tasks directly within the development environment. |
| Visual Studio Code | Primary code and content editor. Used in tandem with Claude Code for all site development and writing. |
| 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: A modern static site generator optimised for content-driven sites. Astro’s island architecture means JavaScript is shipped only where strictly necessary, keeping pages fast and lean. Markdown content, component-based layouts, and file-based routing make it a natural fit for a personal publishing workflow.
- React: Used selectively for interactive UI components, specifically the contact form. Integrated as an Astro island and wired up to server-side logic via Astro Actions.
- Cloudflare: Serverless hosting and global edge delivery. Pages and Workers handle deployment and any dynamic functionality without the overhead of managing infrastructure. Combined with Astro’s static output, this results in near-zero cold starts and globally consistent performance.
A few notable packages underpin the content pipeline:
| Package | Purpose |
|---|---|
| @astrojs/react | Enables React component islands within Astro pages, used for the interactive contact form. |
| @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. |
| resend | Handles transactional email delivery for the contact form via a Cloudflare Worker. |
| sanitize-html | Strips unsafe HTML from user-submitted input before it is processed or stored. |
Styling is plain CSS throughout: a single global stylesheet of design tokens, Astro’s scoped component styles, and CSS modules for the React islands. 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. - No JavaScript by default: pages are static HTML. Client-side JavaScript is loaded only for specific interactive components via Astro’s island architecture, and never for layout or typography.
- 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: August 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.