Building acarlon.me
Designed and shipped a portfolio site through a documentation-first process, AI-assisted production, and a maintenance workflow that turns one-off updates into a repeatable system.
Project overview
acarlon.me is my portfolio site — a standalone static HTML build on GitHub, with Netlify auto-deploy and Cloudflare DNS. I built and shipped it end-to-end using AI tooling deliberately rather than universally: Claude for guides and briefs, Claude Code for the build, Gemini for case-study infographics, and real photos for identity work.
The real deliverable was not just the site, but the system around it. Before designing the pages, I wrote four reference guides so later decisions had a documented answer. I also built an AI-assisted QA and feedback iteration workflow — capturing changes in ClickUp, turning them into a build brief through a Claude Project, and deploying via Claude Code, GitHub, and Netlify — so the portfolio can keep evolving as new work ships.
Key features & outcomes
- Shipped the portfolio end-to-end — strategy, copy, responsive design, build, and deployment
- Wrote four reference guides (style · UX & writing · information architecture · portfolio strategy) before any design work, so recurring build decisions already had a reference point
- Designed a faceted information architecture: 3 capabilities · 16 filter chips · 11 case studies
- Built a fully responsive layout across desktop, tablet, and mobile, with zoomable case-study images so visual evidence remains readable on smaller screens
- Used Claude Code with direct GitHub push as the build environment; Netlify auto-deploys on every push
- Built an AI-assisted QA and feedback iteration workflow: ClickUp captures bugs and copy changes, a Claude Project turns open tickets into a structured build brief, Claude Code applies the changes, and GitHub + Netlify deploy the update automatically
- Split AI tooling by job — Gemini for information-rich infographics, Claude for structure and briefs, Claude Code for build support, and real photos for identity work
- Chose Cloudflare Web Analytics as a lightweight, cookie-free analytics option
The brief I gave myself: build a portfolio that clearly represents my work, use AI tooling deliberately, and document the system so I can maintain it over time.
Each part carried a constraint. The first viewport had to explain who I am, what I do, and what kind of work I'm available for without relying on long explanations. Deliberate AI use meant choosing where AI added value rather than reaching for it everywhere. Maintainability meant the deliverable had to be the system around the site, not just the site itself — anything I could not maintain would eventually degrade.
Documentation first. I wrote four guides — style, UX & writing, information architecture, and portfolio strategy — before any pixels existed. Each answered the "should it be X or Y?" questions that would otherwise stall the build.
Copy before pixels, tested in a sandbox. I drafted all the copy and case studies first, then built a wireframe sandbox to see the design system rendered in real browser pixels. The sandbox proved the concept — and exposed the limits of my first platform choice.
The platform pivot. I started on Google Sites with a custom domain. When the platform ceiling became the thing limiting the design I wanted, I moved to a standalone static stack (HTML + inline CSS + vanilla JS) on GitHub + Netlify, with Claude Code as the build environment pushing directly to the repo. This also gave me more control over responsive behaviour, image presentation, and zoomable case-study visuals.
AI tooling, split by job. Claude for words and briefs, Claude Code for the build, Gemini for case-study infographics that carry information, and real photos for identity work, where authenticity matters. The principle: match the tool to the job, and don't let one tool flatten the rest.
An AI-assisted QA and feedback loop, not just a build. Bugs and copy changes go into a ClickUp list; a Claude Project reads the open tickets and turns them into a structured build brief; I review it; Claude Code applies the changes and pushes; GitHub and Netlify deploy automatically. The site is not only built with AI support — it is maintained through an AI-assisted feedback loop: spot something, log it, brief it, ship it, without manual file handling. The pipeline was verified end-to-end with a safe test before any real work depended on it.
The system is the deliverable. The site is an artefact; the guides, workflow, and pipeline around it are what keep it maintainable. Most of the durable value lives there, not in the HTML.
Documentation-first paid for itself. Writing the guides before designing felt expensive upfront and saved far more during the build. I wouldn't start a project the other way again.
Match the tool to the job. Splitting the tooling by purpose helped keep the site's voice, visuals, and workflow intentional. It also made the AI support more useful because each tool had a specific role.
Trust is built through evidence. A portfolio works when the work feels real, the process is transparent, and the voice sounds like the person behind it. Most decisions came back to that question.
Live, with ongoing iteration — new case studies as new work ships, and the maintenance system itself as a continuing experiment in keeping the portfolio current and honest.