arafays.com — personal site and blog

This site is where I experiment with the tools I recommend to clients: a static-first framework, content that lives in Git, and an edge platform that keeps the whole thing fast without a server to babysit.

The problem

I wanted a portfolio and blog that delivers content quickly, supports search discovery, and stays inexpensive to run — while still being comfortable to edit from a browser. Headless CMSes add another service to pay for and maintain; a plain Markdown repo is fast but awkward for longer writing sessions.

The approach

Astro prerenders every page, so visitors get static HTML. Keystatic provides a Git-backed admin UI at /keystatic, which runs on demand behind GitHub OAuth. Content is stored as Markdoc files in src/content, validated by Astro content collections at build time.

• Prerendered pages with zero client-side JavaScript by default
• Content edited in a browser and saved as commits
• Images optimized through Astro's asset pipeline
• Deploys from main via Cloudflare Workers Builds

The visual experience

The homepage pairs the portfolio with a Three.js landscape. The scene loads separately from the content, pauses outside the visible journey, and respects reduced-motion preferences. A CSS fallback keeps the page usable without WebGL. The reading pages use the same mineral palette and typography with a quieter layout for long-form content.

Results

• All pages are static HTML, served from Cloudflare's edge
• One repository is the single source of truth for code and content
• No CMS subscription and no runtime database

What I'd do differently

I'd set up the content collections before the CMS schema, so the types drive the editing UI rather than the other way around.