Skip to content
Álvaro Maldonado Peña

How this site is built

Fast, accessible, tracker-free and with a spam-proof mailbox.

What happens when you write to me

Drag the points or send a note.

  1. Your browser Gets ready-made pages and hardly any JavaScript. static HTML · JS islands · self-hosted fonts
  2. Cloudflare, near you Serves the site, checks you're not a bot and stores your note. Workers · D1 · Turnstile
  3. My private assistant It collects notes every minute and sets spam aside. I read them myself. outbound poll every 60 s · no open ports
  4. My phone Alerts me. I reply and the answer shows up in your conversation. push notification · reply through the API

This visit, in detail

Measured just now, in your browser.

Your browser doesn't allow measuring it.

How it was made

Read how it was made

  1. An agreement before the code

    The site, the mailbox and my assistant share written rules on how they talk to each other. They were set before starting and only ever grow: nothing breaks as it expands.

  2. Three design directions, one chosen

    “The note on the door”, “the conversation” and “the editorial studio” were weighed up. The note won: writing to me should feel like leaving a note, not filling in a form.

  3. Two parts at once

    The site and the secure mailbox were built in parallel, each in its own copy of the project and following those rules. I directed and decided.

  4. Independent security review

    An independent security review, done without seeing how it was built, found nothing serious; a few medium issues, such as a way round the sending limit using one kind of internet address (IPv6 The modern kind of internet address for a device; one home can have a huge number of them, so limits are counted per block.). It was fixed.

  5. Three experience auditors

    A design expert, a non-technical person and an accessibility and performance auditor. The non-technical person couldn't tell in 10 seconds what I offer: now the home page says it in its first sentence. The expert saw that sending said “Folding…” before knowing if it had arrived: now it says “Sending…” and the note only folds once delivered.

  6. No loose code

    The site follows a strict content security policy A rule telling the browser what the site may run; if someone tried to sneak code in, the browser wouldn't run it.: the browser only runs what comes from its own files. An automated test checks it on every page.

The decisions

  • Ready-made pages, JavaScript only where needed

    Every page arrives already built, so it shows up instantly even on a poor connection.

    Technical detail
    • Built with Astro A site generator that ships ready-made pages and only adds JavaScript where it's needed. and strict TypeScript JavaScript with types: the computer flags many mistakes before they ever reach people.; hand-written CSS on the identity tokens, no styling frameworks.
    • JavaScript only in the islands Small interactive pieces inside a static page; the rest loads no JavaScript. that need it: the mailbox, “Now”, the thread, the theme switch and the term explanations.
    • Fonts served from this domain (Nunito and Fraunces, openly licensed) and preloaded.

  • An account-free mailbox that filters spam

    Anyone can write to me without signing up, and bots stay out without bothering people.

    Technical detail
    • API on Cloudflare Workers Small programs that run on Cloudflare's servers all over the world. with a D1 Cloudflare's database where the mailbox messages are stored. database, on the same domain as the site.
    • Layered defences: invisible Turnstile Cloudflare's anti-bot check, with no puzzles and no tracking cookies., a honeypot field, minimum typing time, per-IP limits (stored only as a hash A one-way fingerprint: it recognises repeats without revealing what the original was.), length and link limits, and a spam score.
    • Whoever writes gets a thread key to read the reply: no email, no password.

  • Accessible and tested like a product

    It works with a keyboard, a screen reader and enlarged text, in light and dark.

    Technical detail
    • WCAG AA The international web accessibility guidelines; level AA is what European law requires. target: checked contrast, visible focus, 44 px touch targets and respect for “reduce motion”.
    • Key journeys tested with Playwright A tool that drives a real browser to test a website the way a person would. on mobile and desktop, plus automatic accessibility checks on every page.
    • Mobile Lighthouse Google's tool that scores a website's speed, accessibility, best practices and SEO from 0 to 100. at 95 or more in performance, accessibility, best practices and SEO What makes a website show up well in search engines like Google. as a release requirement.

  • Privacy by design

    No own cookies, no analytics, no trackers. You can delete your conversation any time; otherwise it's deleted after 12 months.

    Technical detail
    • A strict content security policy with no inline code; the site calls no third parties except the anti-bot check.
    • GDPR The European Union's General Data Protection Regulation. compliant; the privacy page explains what's stored, why and for how long.

  • Made with my method

    I made it the way I make everything: several parts moving at once under clear rules, independent reviews, and me directing and deciding. The parallel work is done by AI agents.

    Technical detail
    • One Claude Code Anthropic's tool used for the parallel work, directly on the project's code. session for the site and another for the API, in parallel, each in its own worktree A separate working copy of the same project, so each part can move forward without stepping on the others..
    • A shared type contract between site and API, defined before starting.
    • Independent UX/UI, accessibility and non-technical reviewers check every screen until no serious or medium issues remain.

Want something built like this?

Write to me Download résumé (PDF)