AINo-CodeWeb DesignAutomation

Building This Site with AI

Designed and shipped a full production portfolio — Astro, Cloudflare Pages, CMS, password-gated case studies, animations — entirely through AI collaboration. No traditional coding. Just clear thinking and good prompting.

Overview

This site is the project. Every animation, every section, every integration — built through conversation with an AI, without writing a single line of code myself.

The goal wasn’t just a portfolio. It was proof of concept: that someone who understands systems, design, and what they want can ship production-grade software through AI collaboration alone.


The Brief I Gave Myself

I wanted a portfolio that felt like me — dark, editorial, a little bold. Not a template. Not a theme. Something that could hold its own against agency sites and actually reflect how I think and work.

Functional requirements:


Tech Stack

LayerChoiceWhy
FrameworkAstro v6 (SSR)Fast, content-first, deploys to edge
HostingCloudflare PagesGlobal CDN, free tier, Workers support
CMSSveltia CMSGit-based, visual editor, no backend needed
FormsWeb3FormsNo server required, straight to email
FontsAnton + InterDisplay + body — editorial pairing

The Workflow

1. Direction, not specification

I didn’t write a design brief with pixel specs. I described what I wanted in plain language — “dark editorial feel, coral accent, Anton for headings, feels like a creative agency not a CV” — and iterated from there.

The key skill wasn’t knowing CSS. It was knowing when something looked wrong and being able to articulate why.

2. Section by section

Each section of the homepage was its own conversation: hero, skills, experience, portfolio grid, contact. I’d describe the layout, react to what came out, redirect when something felt off.

Rounds of feedback sounded like:

3. Integrations as features

Things I assumed would be hard — GitHub OAuth for the CMS, password-protected routes via Cloudflare Workers, animated scroll-driven carousels — turned out to be single conversations. I described what I needed functionally, and the implementation followed.

4. Design decisions I made

Even in an AI-assisted workflow, the design judgement was mine:


What I Learned

Prompting is designing. The quality of what you get out is directly proportional to how clearly you can describe what you want — and how quickly you can diagnose when something’s wrong.

You still need taste. AI can build anything. It can’t tell you what looks good, what feels right for your brand, or when something is almost there but needs one more iteration.

Ship beats perfect. The whole site went from blank to live in a matter of days. A traditional dev project — even a simple one — would have taken weeks. The leverage is real.


Stack Deep Dive

Astro + Cloudflare Workers SSR

Astro compiles to static HTML where possible and uses a Cloudflare Worker for dynamic routes (password-gating, OAuth). The build pipeline bundles the server entry into _worker.js via esbuild.

Sveltia CMS

A lightweight, open-source alternative to Netlify CMS. Loads as a static HTML panel at /admin, reads/writes directly to GitHub. GitHub OAuth is handled by two Astro SSR routes — no third-party auth service needed.

Password-protected case studies

Middleware intercepts requests to protected slugs, checks for a cs_access cookie, redirects to a password entry page if missing. The password lives in a Cloudflare environment variable — not in the repo.

Animations


The Result

A production portfolio, deployed globally on Cloudflare’s edge network, with a visual CMS, password-gated work, a working contact form, and animations that feel intentional — built entirely through AI collaboration.

The meta point: if I can direct the building of this, I can direct the building of almost anything.

← Previous
AI Agent System
Next →
Boutique Shopify Store