Portfolio Site Infrastructure
Building this portfolio site as an Astro + Cloudflare Pages project — static-first architecture, automated deployments, and performance obsession.
Key Takeaway
A portfolio site is the best playground for learning infrastructure — you're both the developer and the stakeholder, so every shortcut you take you'll feel later.
The Problem
Portfolio sites for designers are usually Squarespace templates or Webflow projects. Nothing wrong with that — but as a design engineer, the site itself is a portfolio piece. It should demonstrate the same technical depth I bring to client work.
What I Built
This site. An Astro-based static site deployed to Cloudflare Pages with:
- Content collections for case studies, blog posts, and now this digital garden
- Automated deployments via GitHub — push to main and it’s live in under 60 seconds
- Image optimization pipeline using Astro’s built-in image processing
- SEO automation — structured data, OG images, sitemap, RSS, and
llms.txtfor AI discoverability - Performance baseline — targeting 100 Lighthouse score across all pages
Process & Iterations
Started with a WordPress site (the previous cesartevisual.com). Migrated to Astro for performance, developer experience, and the ability to use MDX for content.
The migration wasn’t trivial — rewriting templates, setting up content collections, building the 3D book cover effect from scratch. But the result is a site that loads in under 1 second and costs $0/month to host.
Cloudflare Pages handles the CDN, SSL, and edge caching. GitHub Actions runs builds and Lighthouse CI checks on every PR.
What’s Next
Adding view transitions for smoother page navigation. Exploring partial hydration for interactive components without shipping a full JS framework to the client.
Tools Used