Portfolio Website

Overview

This very site — a fully static portfolio built with Astro and deployed to Cloudflare Pages. Zero client-side JavaScript frameworks; all pages are pre-rendered at build time into plain HTML, CSS, and a single small module for the email-copy button.

Repository: Private GitHub repository (made private to separate portfolio content from public-facing source code, with all assets now served independently via Cloudflare R2).

Stack

• Astro — static site generator with content collections and build-time image optimisation
• TypeScript — typed content schemas via Zod, utility libs, and Astro frontmatter
• Cloudflare Pages — global CDN deployment with automatic previews on each pull request
• Vanilla CSS — no utility framework; a single global stylesheet with custom properties

Features

• Responsive photo gallery with WebP thumbnails generated at build time
• Project pages driven by Markdown content collections
• CV page
• Minimal JS footprint — only one deferred module script ships to the browser

Asset Architecture

All images and media are served from Cloudflare R2, a fully decoupled asset storage system. This architecture ensures that:

• Portfolio images remain public even though the repository is private
• CDN performance benefits from Cloudflare’s global edge network
• Asset independence — images don’t depend on repository visibility

Profile photos and project covers are automatically generated at download time from their source URLs and uploaded to R2 before deployment, keeping the build clean and source-agnostic.

Cloudflare Security Experiments

Beyond hosting, I used this site as a hands-on testbed for Cloudflare’s security controls:

• WAF custom rules — wrote and tuned firewall rules to block common attack patterns while keeping legitimate traffic unaffected
• Bot Management — explored challenge modes and JavaScript challenges to filter automated scanners
• Rate limiting — applied per-IP rate limits to sensitive paths and observed how they interact with CDN caching
• Security headers — enforced Content-Security-Policy, Strict-Transport-Security, and related headers via Cloudflare Transform Rules
• Access controls — tested Cloudflare Access for gating preview deployments behind identity checks

What I learned

• Structuring Astro content collections for fully type-safe Markdown
• Build-time image optimisation with getImage and responsive srcset generation
• Zero-overhead CSS architecture without a utility framework
• Cloudflare Pages CI/CD and preview deployments
• Practical application of Cloudflare WAF, rate limiting, bot controls, and security headers