colophon

This is a small, deliberately quiet corner of the internet. It has become the place I keep tending: what I'm building, what I'm reading, where I am, the odd thing I made on a weekend. I rebuild it more often than I should. That is the point.

Most of the colour comes from one cold neutral scale, accompanied by five semantic tones held in reserve for state, live endpoints, warnings, and presence. Emphasis usually comes from value, rhythm, and a quiet underline. Motion answers an action, stays brief, and disappears when reduced motion is requested.

Built with

• Astro, statically generated. No client framework, just a little vanilla JavaScript for progressive enhancement. With scripts off, the whole site still reads.
• TypeScript for the data and components.
• Hand-written CSS on an OKLCH token system. One neutral value ramp, with semantic accents held in reserve.
• View transitions via Astro's ClientRouter, tuned so navigation never flashes.
• The map is MapLibre GL on keyless OpenFreeMap tiles. No token, no vendor lock.
• The music card is a Spotify embed with a loading skeleton so the slot doesn't jump while the player arrives.
• A typed, shared Lucide registry gives site chrome, Markdown, and the command palette the same visual language.
• The notes engine: build-time KaTeX for math, dual-theme Shiki syntax highlighting, lazy Mermaid diagrams that re-render on theme toggle. All built on Astro's satteri markdown processor with custom plugins. No client framework.

Type

Set in Inter, with Newsreader Italic for the one serif moment and JetBrains Mono for code, paths, hashes, and timestamps. Inter uses 400 for reading, 450 for active navigation, 500 for controls, 550 for section hierarchy, and a rare 600 for strong emphasis. JetBrains Mono is moved down one optical pixel when it shares a baseline with Inter or an icon; full code blocks stay on their natural baseline.

Structure and motion

Header, content, and the centre-viewed footer share one fixed rail: 640 to 720 pixels wide, with 20 pixel gutters. The home introduction is deliberately justified at every supported width. Below 38rem the top page navigation becomes a fixed, safe-area-aware five-tab bottom bar, while the body reserves room so it never covers the final line.

Every transition draws from the same five durations and two curves. Press feedback is short, frequent navigation is direct, and longer movement is reserved for overlays or an example that needs to explain continuity. Sound follows the same rule: a tiny local Web Audio library, on by default, unlocked only by a real gesture, and never the sole carrier of meaning.

The thinking lives in How I design this site. The exact implementation reference is available at /design.md.

Carbon footprint

Static, script-light architecture produces a tangible physical footprint. Tested on 22 Aug, 2026 via Website Carbon, each visit produces 0.03g of CO2, earning an A+ rating and measuring cleaner than 94% of tested web pages globally.

For machines

If an agent is reading, start at /ai. Everything is meant to be parsed, not just read:

• HTML/ai
  The briefing for AI systems.→
• HTML/design/
  How I design and refine the site.→
• MD/design.md
  The exact implementation reference.→
• MD/agent-readiness.md
  Discovery and read-only machine boundaries.→
• TXT/ai.txt
  AI usage declaration.→
• TXT/llms.txt
  Concise LLM context.→
• TXT/llms-full.txt
  The fuller version.→
• JSON/knowledge.json
  Structured facts.→
• JSON/api/ai-summary.json
  One-object summary.→
• XML/library/feed.xml
  Library feed (books, watch, notes, articles).→
• XML/sitemap.xml
  Every page.→

Source

Open, and public: ashwingopalsamy/ashwingopalsamy.in. Read it, borrow from it, tell me what I got wrong.

Thanks

The look owes a debt to the people who make the plain web feel considered: the crowd behind Dead Simple Sites, and a long list of design engineers whose personal pages I have quietly studied. Any clumsiness that remains is mine.