Why Astro
The portfolio needed to be fast, zero-cost, and easy to add content to over time. Astro ships zero JavaScript by default — HTML and CSS only unless you opt in. That means instant load times on Cloudflare’s edge without any runtime cost.
It also has first-class Markdown support for the blog, component islands for any interactive pieces, and a dead-simple deployment story.
Applying the Brand System
The MD Works brand is defined in a single brand.css file — design tokens, typography rules, component patterns, and utility classes. Every page imports it once via the BaseLayout component.
The key elements on every page:
- Grain texture — a fixed SVG noise overlay at
opacity: 0.035, barely visible but adds physical depth - Ambient glow — a radial gradient from the top, warm gold, very subtle
- Gold cursor — a small dot that follows the mouse precisely; a lagging ring follows with easing
- Scroll reveal —
IntersectionObserveradds.visibleto.revealelements as they enter the viewport
Deployment
The flow is as simple as it gets:
git push origin main
↓
Cloudflare Pages detects the push
↓
Runs: astro build
↓
Deploys /dist to the edge (~30 seconds)
No environment variables needed for a static site. The custom domain is configured once in Cloudflare Pages settings.
What This Project Proves
- Static site generation with a modern tool (Astro)
- A real, documented design system applied consistently
- GitHub-based CI/CD pipeline
- Zero running cost deployment
Next: Project 02 — Live Data Dashboard, consuming public APIs with vanilla JS.