HundredThe 100 Builds Portfolio Site
What it does for you
A zero-dependency generator that turns every case study and the tracker into the portfolio site, with a live shipped counter, filters, a skill map and a page per build.

Screenshots


In more detail
Hundred is the program that builds my portfolio site. It reads every case study and the tracker in the sprint folder and writes a full site: a home page with a live shipped counter, a page for every finished project, an About page and a Lessons page. Writing the portfolio by hand would go stale the day the next project shipped, so the site builds itself from the files I already keep.
Honest limits
The site is not deployed; siteUrl defaults to localhost. I did not run an axe scan or test with a screen reader. Contact email and name are left empty in the config. It was checked in headless Chrome at 1440 and 390 px, not by hand on real devices.
How I built it
Claude Code built it on the last day, in one run of about 0.4 hours. It read the website blueprint, my profile, the copy bank and a sample of old and new case studies, then wrote parsers that tolerate what it actually found: three generations of case-study headers, "What Codex helped with" sections, custom cover paths, template-only files, CSV fields with quoted commas, and learnings lines split by colons or dashes.
It loaded my saved big-type house style and turned a one-page template into a multi-page generator: giant condensed type, a project wall filtered by tier and kind, a skill map, a lessons timeline, plus sitemap and SEO tags.
I directed the content rules and the honesty guard. Claude wrote them as tested functions. Old em dashes become commas, any sentence touching a banned topic is dropped, and headline claims get rewritten from the live tracker. The tests build the site, walk dist/, and fail on a broken link, a missing fragment, an em dash or a banned term.
What I learned
- A sentence splitter built on
[^.!?]+silently dropped every word before a dotted filename liketrack.mjs. Splitting only after punctuation followed by a capital fixed it. - An image with
widthandheightattributes keeps that height as real CSS. Withoutheight: auto, every cover stretched to 900px tall. - Once the build is a function, link checking is cheap: collect every id per page, then resolve about 2,700 internal links and fragments against the output.- A counter is only honest if the copy around it is too. My profile headline said 100 in under 75 days while the tracker said 97 in 95. Now the generator rewrites the claim from live data instead of trusting me to remember.
What carried forward
This project only works because of how the repo was set up from day one: one folder per project, a case study in each, a YAML block the generator reads, and tracker.csv as the single scoreboard. Every other build feeds it, and only projects marked done appear. #99 (Afterword) links back to this site, and the two are generators that rebuild from the same records. This is also the proof I want to put on latrevyon.com: not a claim that I built things, but pages generated from the builds themselves.
If I took it further
I would add an image step that makes WebP thumbnails, because 94 full-size PNG covers are the heaviest part of the page. I would also make the case-study YAML stricter from project 1, since most of the parser's tolerance exists to read my own early formats.
#096 Built with Claude Code September 24, 2026 156 automated checks