colophon · how this was built

The site is a build, and the build is the point.

If a portfolio claims its author can ship production infra, the portfolio itself should be the proof. So this one is — same edge platform, same CI gate, same paranoia I'd bring to a commission.

title block ⌖

dwg no.

PNDR-06

revision

v2.1.0

scale

1 : 1

sheet

6 of 6

medium

woff2 · edge

drawn by

Anmol

The stack

request in → response out

Read it as a fold sequence — the path a single page takes from request to rendered.

framework · the sheet

Astro 6

Zero-JS by default. Ships flat HTML and hydrates only the islands that truly need it — like the inquiry console.

edge · the first fold

Cloudflare

Served from the edge in ~40ms worldwide. Workers run the dynamic bits; the static sheet is cached close to you.

guard · the reinforced crease

Turnstile & KV

Bot defense on the inquiry path without a third-party widget; rate-limiting in KV, tight from the same edge.

content · the finished crane

MDX + KaTeX + Shiki

Notes author in MDX; math renders with KaTeX and code with Shiki — both at build time, so not a byte of client library ships.

Principles I didn't bend

four clauses · all enforced in CI

§01 · no third-party CDNs

enforced

Every font on this page is self-hosted — Bricolage Grotesque, Hanken Grotesk and IBM Plex Mono served as woff2 from the same origin. No Google Fonts, no external script tags. The Content-Security-Policy stays tight.

§02 · the homelab boundary

enforced

This site and my homelab share a domain and trust each other exactly zero. The portfolio lives entirely on Cloudflare's edge. A subdomain is not a security boundary, so I never treat it as one.

§03 · CI is the gate

enforced

Lint, types, an axe-core accessibility pass and a Semgrep scan all run on every PR. Red means it does not merge. Main is always shippable because the gate won't let it be anything else.

§04 · motion asks permission

enforced

AA contrast throughout, a real skip-link, visible focus rings, and one hero animation that fully respects prefers-reduced-motion. The crane folds for you only if you let it.

This page, measured live

Nothing below is hard-coded. Your browser is reporting it back to me right now — the proof that the build does what the copy says.

self-hosted faces

…

ready from origin

this viewport

…

css px · live on resize

motion preference

…

from your OS

dom ready in

…

this load, this device

Type & credits

Bricolage

AaBbGg · 0123 · folded & sharp

display · the voice

Bricolage Grotesque — Mathieu Triay. Hero, titles, every heading.

SIL OFL · variable wght · self-hosted woff2

body · the workhorse

Hanken Grotesk — Alfredo Marco Pradil. Prose, UI labels, navigation.

SIL OFL · roman & italic · self-hosted woff2

Hanken

AaBbGg · 0123 · reads for hours

IBM Plex

AaBbGg · 0123 · data & edges

mono · the instrument

IBM Plex Mono — IBM Design. Code, eyebrows, the console, captions.

SIL OFL · 400–700 · self-hosted woff2