The Project
This is the site you’re looking at right now.
I built it as a professional portfolio — but the process of building it is itself part of what it demonstrates. I have a front-end background through CMS platforms and visual builders, but not through code. I know what I want a site to look like and how it should work; I don’t write the CSS and JavaScript to get there.
This project is evidence that those two things don’t have to be a blocker — if you know how to work with AI tools with precision and criteria.
Approach
I started from an Astro template and progressively reshaped it through a collaborative workflow with Claude (Anthropic).
What I defined:
- Typography, colour palette, and overall visual identity
- Site architecture — what sections exist, how they relate, what each page needs to communicate
- Content structure for three collection types: Work, Experience, and Technical Projects
- Layout and spacing decisions for every component
- Editorial direction for all project pages
What Claude handled:
- Translating my design briefs into Astro component code
- Modifying the template’s default structure and styles to match my vision
- Debugging layout and responsive behaviour issues I identified visually
- Building and configuring the content collection schema in
content.config.ts - Implementing dark mode adjustments, nav changes, and routing fixes
Every output was reviewed by me before it went live. When something was off — visually or structurally — I identified it, described the problem precisely, and iterated until it matched what I had in mind.
What This Project Demonstrates
Criterion-led AI collaboration. Using Claude effectively isn’t about asking it to “make a website.” It requires knowing what you want, being specific about constraints, catching errors, and understanding enough of the output to evaluate it. That’s a transferable skill — the same precision required to write a good governance brief or a clear data requirement.
Front-end judgment without front-end code. I made every visual and structural decision on this site. The fact that I didn’t write the code myself doesn’t change what the site communicates — or what it took to get it there.
Production-quality output. This isn’t a prototype or a mockup. It’s a deployed, maintained site with multiple content collections, responsive design, dark mode, and individual pages for 18+ projects.
Stack
Astro CSS Netlify Markdown Claude (Anthropic)