hazelq.com
The Setup
I had an outdated personal site that didn’t represent who I am anymore. I’d spent 18 years in SaaS marketing, moved from Long Beach to Milwaukee, killed off my old brand (The Clever), and started teaching people how to use AI. The old site was a relic. I needed something that felt like me now — direct, warm, a little irreverent, and built around what I actually do: help small businesses use AI and automation without losing their voice.
I didn’t want to go back to Squarespace. I didn’t want to learn Webflow. I wanted to own everything, pay nothing for hosting, and build something that felt custom without writing code myself.
The Build
I didn’t start with a detailed creative brief. I started with rough ideas — colors I liked, the tone I wanted, what the site needed to do — and the brief evolved as Claude and I built together. Every prompt refined what I was actually going for. The brief wasn’t a document I handed over. It was a conversation that got sharper with each round.
Claude suggested Astro on Cloudflare Pages. I didn’t know what either of those were. But the pitch made sense: Astro is fast, generates static HTML, and Cloudflare Pages hosts it for free with global CDN. No monthly bills. No vendor lock-in. No dragging boxes around in a visual editor.
The whole site was vibe coded — I described what I wanted in plain English, Claude wrote the code, I reviewed it in the browser, and we iterated. No wireframes. No Figma files. Just words and feedback loops.
The Mess
Everything took multiple rounds. The copy. The colors. The layout. The typography.
The voice was the hardest part. I know what I sound like. I know what I don’t sound like. But getting a site to feel like me — not like a LinkedIn profile, not like a marketing agency, not like a tech bro portfolio — took real iteration. I’d read a headline and think “that’s close but it’s trying too hard” or “too safe” or “nobody talks like that.” The words mattered more than the code.
The visual design went through versions too. The color palette — dark charcoal, coral, and gold — didn’t arrive on the first try. The typography (Space Grotesk for headings, Inter for body) took experimentation. The overall feel had to walk a line between professional enough to land clients and human enough to not feel corporate.
And then there was the booking system. That became its own project (Specimen 003 in the portfolio). Google Calendar API + Stripe + Cloudflare Workers. No Calendly. Built entirely with Claude Code. That integration alone would’ve been a dealbreaker if I’d been doing this without AI.
The Result
The site is live at hazelq.com. It has everything I need: a clear explanation of what I do, a way to book sessions (custom-built, not Calendly), a portfolio showing what I’ve built, field notes (blog), and a newsletter signup through Beehiiv.
It loads fast. It costs nothing to host. I own every line of the source code. And when I want to change something, I open Claude and describe the change in English. No support tickets. No waiting for a designer. No $29/month platform fee.
The site isn’t the business. But it made the business feel real. Having a URL that works, a booking flow that doesn’t embarrass me, and a portfolio that shows actual work — that’s the difference between “I do consulting” and “here’s my practice.”
The Takeaway
The creative brief isn’t a document you write before you start. It’s the conversation you have while you build. The best version of the brief only exists after you’ve seen what doesn’t work.
How It’s Built
- Framework: Astro (static site generator)
- Hosting: Cloudflare Pages (free tier)
- Fonts: Space Grotesk (headings), Inter (body)
- Colors: Dark charcoal (#1a1a1a), coral (#e85d4a), gold (#d4a745)
- Newsletter: Beehiiv
- Booking: Custom system (Google Calendar API + Stripe + Cloudflare Workers)
- Cost to run: $0/month
- Built with: Claude Code — every line generated from conversation