Workshop

$75,000. That's What This Should Have Cost.

May 28, 2026

Index

Dollar sign — $75,000

A professional agency build of what you are looking at right now — brand identity, custom design system, privacy architecture, headless CMS, Next.js site, content strategy — runs between $50,000 and $100,000 USD. Conservatively. I've been there multiple times. I am being very generous here in my estimation. I can tell you that just to create a brand identity was a drawn out process and cost much much more than I estimated here.

I spent what my claude subscription costs - which at this point is doing the work of an entire agency. Something to think about. And wait till you see some of the research that I have done.

Again, buyer be ware - you have to consistently check and double check what is being produced, errors happen, inconsistencies occur.

This is how.

Why this exists

I wanted to see what AI could actually do when pointed at a real project with real constraints. I had an idea. I did not have money. I figured — let us see if Claude could be a marketing company. What really surprised me during this process is, if I had worked with an agency and dev, this would have been weeks in the making (and I have done this in the past so this statement is mired in reality). Instead, using chat to make the prompts, using screenshots to describe what I wanted and how I wanted it, claude created the prompts for claude code. Just incredible, tbh.

That is where this started. One conversation. No budget. No developer. No plan beyond a direction.

What you are looking at right now is the result.

The approach — chat first, code second

The first thing I did was not open a code editor. It was open Claude Chat and start talking through what I wanted to build.

Not the technical specifications. The idea. The feeling. The philosophy. Why the site should feel like deep water. Why the logo should have a fishhook in it. Why the binary code hidden in the ripple rings only reveals itself when you zoom in — an easter egg for the curious, which felt right for a site called Just a Curious Mind.

Claude Chat became the architect. We talked through brand identity, colour palettes, typography systems, content strategy, privacy design, domain names, and infrastructure decisions — all before a single line of code was written.

The key insight — Claude Chat writes the prompts for Claude Code. I would describe what I wanted in plain English. Claude Chat would translate that into a precise technical instruction. I would paste that instruction into Claude Code. Claude Code would execute it. I would screenshot the result and bring it back to Claude Chat. Rinse and repeat.

That loop — describe, translate, execute, screenshot, describe again — is the entire development process. Thirty-five iterations of it.

Describing what I wanted to see

I am not a visual designer. I cannot draw a wireframe that anyone would take seriously. What I can do is describe things.

"I want the site to feel like deep water. Dark, deliberate, alive."

"The logo should be a ripple with a fishhook integrated — and the rings should be made of binary code that only shows when you zoom in."

"I want a Cover Flow carousel like the old iTunes. Cards that slide like a deck on a table, the active one in focus, the others peaking out behind it."

"The hero photo is an aerial shot of a lake with a small island covered in pine trees. I want the wordmark to sit above the island so it looks like the trees are growing through the letters."

None of that is technical language. All of it produced real output. The island appearing behind the logo was not planned — it was a happy accident that emerged from adjusting the background position. The best design decisions often are.

Is this site as polished as something built by a professional design team with six months and a budget? No. Is it genuinely mine in a way that nothing templated could be? Yes. That distinction matters more to me than the polish.

What actually went wrong

Everything. At various points. Here is the honest list.

The npm audit fix --force disaster

Early in the build I ran npm audit fix --force without understanding what it does. It downgraded Next.js from version 14 to version 9. The entire project broke. Git saved it — one command restored everything. Lesson learned: never run --force on anything without knowing exactly what it forces.

Three emergency git stashes

Three times Claude Code made changes that broke something working. Three times git stash rescued the situation in under ten seconds. The first was when the hero section expanded to fill the entire screen — the island disappeared, the layout collapsed, the site was unrecognisable. Stash. Back to normal. Breathe.

The second was a React hydration error caused by adding a sidebar component to a server component that needed to be a client component. The third was a sizing instruction that made the Cover Flow cards enormous and pushed the Areas section completely off screen.

Multiple dev servers

Claude Code kept spawning new npm dev instances without checking if one was already running. The symptom — blank screen, pages hanging, nothing loading. The fix — kill -9 $(lsof -t -i :3000) — became muscle memory. Open two Terminal windows, keep one for the dev server, one for everything else. Never close the dev server window without stopping it first.

The hydration error

React hydration errors happen when the server renders something different from what the browser JavaScript expects. The sidebar label — the large vertical MIND / WORKSHOP text that stays fixed as you scroll through an article — triggered this. The fix was adding "use client" to the component. Understanding why that works required understanding the difference between server and client components, which is one of those things that sounds simple and is not.

SSH keys on multiple machines

Setting up Git across two machines — a Mac and a CachyOS Linux desktop — required generating separate SSH keys on each machine and adding both to GitHub. Obvious in retrospect. Not obvious at 11pm when the push is failing with a cryptic permission denied error.

The wrong directory

Ran npm commands from the home directory instead of the project folder. The error message — Could not read package.json — is not immediately helpful if you do not know what it means. The fix is two characters: cd followed by the right path.

How many iterations it took

Thirty-five Claude Code instructions from scaffold to where the site is now. Ten significant course corrections. Three git stash rescues. One npm disaster. Three dev server kills.

All in one day.

That number sounds like a lot. It is also how software gets built by professional teams — they just have more people doing it simultaneously and call it sprints. The difference here is that me with no formal development background did it through conversation.

The iteration speed is the point. A traditional build would have required scoping sessions, design reviews, developer handoffs, QA cycles. Here the feedback loop was: describe, see, adjust, repeat. Changes that would take days in a traditional workflow took minutes.

Not everything worked first time.

The security piece nobody thinks about

Before the first line of code was written, the privacy and security architecture was designed. This matters more than most people building personal sites realise.

Identity separation. A dedicated Proton Mail account — not connected to any personal email — was created specifically for this project. A new GitHub account under an alias. Anonymous commit identity using GitHub's noreply email address. Every commit shows vag0r0g and an anonymous address. Nothing traceable.

WHOIS privacy. The domain vagor.one is registered at Porkbun with WHOIS privacy enabled by default. The public domain record shows no personal information.

SSH keys over passwords. Git connects to GitHub via SSH key pairs — one key per machine, each titled to identify which device it belongs to. No passwords transmitted. No passwords to steal.

The .gitignore file. Created before the first commit. Covers Obsidian sync files, environment variables, secrets folders, and draft content. Nothing private has ever touched GitHub.

Content neutrality. Every post is written in culturally neutral English. No location identifiers. No regional references. No store names or services that place the author geographically. The site could be written from anywhere because as far as the content is concerned, it is.

Security was not retrofitted. It was the foundation.

How the site is actually built

For the non-technical reader — a plain English explanation of what is happening under the hood.

Obsidian is where content is written. Plain markdown files. The same format as a text file but with simple formatting codes. Every post on this site started as an Obsidian note.

Git tracks every change. Every save is a potential snapshot. Every disaster is recoverable. It is version control — the ability to go back to any point in the history of the project.

GitHub holds a private remote copy of everything. When changes are pushed to GitHub it triggers the site to rebuild automatically. The site always reflects the latest committed content.

Next.js is the site framework. It reads the markdown files from Obsidian and converts them into web pages. It handles routing, performance, and internationalisation — the groundwork for eventually publishing in Japanese, French, and Italian.

Tailwind CSS handles the visual styling. The Carbon backgrounds, the Linen text, the Deep Ocean water moods, the Copper workshop accents — all defined once, applied everywhere consistently.

Framer Motion powers the animations. The Cover Flow carousel. The card reveals. The subtle transitions between states. Motion that feels considered rather than decorative.

Vercel will eventually host the live site. Currently vagor.one is running locally — the site exists on a Mac and nowhere else. The domain is registered and pointing nowhere. That changes soon.

The entire stack was chosen for one reason — you own it. No platform subscription. No monthly fee for the CMS. No lock-in to a service that can change its pricing or shut down. The content is markdown files. The code is yours. The infrastructure can be moved anywhere.

Where it goes next

The site is currently local. It has not been deployed. Nobody can visit vagor.one and see what is described here — not yet.

The next steps in roughly the right order:

Deploying to Vercel so vagor.one resolves to something real. That is one command and a DNS record — it will happen before this post is read by anyone other than me.

A Mac Studio M5 arrives in October. When it does, it takes over as the local LLM server and eventually the web host. The Vercel dependency disappears. The site runs on hardware that sits in the same room as the person writing it.

More content across all five areas. Workshop, Mind, Frequencies, Curious, Get — all exist structurally. Most are empty. The building is up. The rooms need filling.

Translating content into Japanese, French, and Italian. The infrastructure supports it. The content needs to exist first.

None of this has a deadline. That is the point. This is not a product launch. It is a record. It will be complete when it is complete, and it will never really be complete, which is fine.

Go deeper

Two companion documents were written alongside this build:

Built by Claude Code — the summary version of this story. Shorter, more personal, written first.

Built from Scratch — The Backend Nobody Talks About — the complete technical walkthrough. Every command. Every mistake. Every fix. If you want to replicate this setup, start there.

This site was built in one day through conversation. The conversation started with an idea and ended with something real. That still surprises me.

vagor.one — Shaped by water. Built by hand. Powered by curiosity.