loaded.bonsung.me, design

Why

Bonsung is applying to Loaded for a Senior Software Developer role. His cover letter answers Loaded's question about AI with how he works: each repository carries its own instructions for the coding agents, work starts from a written spec, checks that give the same answer every time keep the agents within bounds, hooks stop them committing straight onto main, and every merge into main is his call. A letter can only claim that. This site shows it.

The site does two things. It is the digital version of his CV, in Loaded's colours. It shows how he works with coding agents, step by step, on the work that built the site itself. Each step comes with one real thing from that build, such as a rule the agents follow, a problem a review caught, or a decision an agent wrote down.

Goals

Stand out among the applicants for this role.
Show the agent workflow on real, inspectable work, not describe it.
Read as a clean CV for anyone who only wants the CV.
Look like it was made for Loaded, through their colours and a play on their name.

Non-goals

A general portfolio for other applications. This site is for Loaded only.
Showing anything from airie, his current employer. The workflow is shown on this repository alone.
A record of every change. A list of commits says little about how the work was done.
A blog, a contact form, analytics or a CMS.

Anti-goals (a failure even if it works)

Anything that reads as Loaded's own page, or as if Loaded endorsed it.
A showcase quote that is not in the file it claims to come from, or a story of something that did not happen. The whole point is that the evidence is real.
Any claim of how many hours or days the site took.
A showcase so long that the CV above it is hard to find.

Decisions (Bonsung)

Show the agent workflow by building this site with it. Agreed after it was pointed out that airie's real material cannot be shown.
A showcase, not the full history. The page ends with How this page was built, the workflow in eight steps, each with one real piece of evidence from building this site, kept short enough to read in full. This replaces an earlier design that published every merged change and every check result, with a switch that added a note to each section. He found that a list of commits says little, and that the steps say more.
The site is the digital CV. The CV's text is on the page. There is no PDF download. The cover letter points to the site as the digital CV that also shows how he works with agents.
The repository stays private, and the page does not offer it. The spec and the plan are published on the site, and nothing on the site speaks of access to the repository.
Light hero in Loaded's champagne and off-black, with their dark blue and coffee for the sections below.
Hero copy, a play on Loaded's name and line. Loaded's home page says "The back-office platform that helps hospitality grow." The hero reads:

Kia ora, I'm Bonsung. Loaded. (a blue loading bar fills to 100% before Loaded. appears) Helping the platform that helps hospitality grow. Senior Software Developer

The full stop makes Loaded. read as "ready", not "hired". The bar ties the word to software rather than to its slang senses (drunk, rich). Under reduced motion the bar shows full and Loaded. is there from the start.
No disclaimer line. The footer carries his name and contact links only. The hero, which opens with his own name, and the page title make it plain that this is his application.
Address loaded.bonsung.me.
The tab shows Loaded's own favicon. He chose Loaded's favicon, unchanged, as the site's favicon, knowing the tab then looks like theirs. The hero, which opens with his own name, and the page title make it plain that the page is his application.

Look

Read from loadedhub.com's own stylesheet in Chrome.

Token	Value	Use here
champagne	`#faf5dc`	hero background
off-black	`#020608`	hero text, body text
dark blue	`#122635`	section bands, footer
coffee	`#eddbb7`	text on dark blue, the bar's track
blue	`#3b73fa`	buttons, the loading bar, links
light coffee	`#f9f8f5`	light section backgrounds
white	`#ffffff`	cards

Font: "Avenir Next", Avenir, … first, the face Loaded uses, which Apple devices already have, then a free, openly licensed fallback of a similar shape for other devices. No font file of Loaded's, and no image, logo or icon from their site, goes into this repository, except their favicon, which the site uses as its own (Decision 9).
Shapes: buttons with a 5 px radius, as theirs.
Contrast: every text and background pair meets WCAG AA. White on the blue is about 4.2 to 1, so it is used for large or bold text only, or the blue is darkened for small text.

The page, top to bottom

Hero (Decision 6).
Introduction: the CV summary, in his own first-person words.
Key strengths: the CV's five strengths, which hold the claims about agent-driven work that this site sets out to prove.
Experience: airie, Shopl and Company, PJ FACTORY, with the CV's job titles and dates. airie is always lowercase.
Projects: Sentinel, with its two public links.
Education.
How this page was built: the showcase (below).
Footer: his name, GitHub and an email address.

The text of sections 2 to 6 is the CV's text. It is not rewritten for the site.

How this page was built

A dark blue section after Education. It opens with one line:

How I work with coding agents, shown on the page you are reading.

Then eight numbered steps. Each is a title, one sentence, and one short piece of evidence set apart from the text, under a small label naming where it comes from.

Refined, not exhaustive. The showcase is meant to be read in full, so it shows one clear piece of evidence per step and nothing more. It does not list every decision made while building the site. The full spec and plan are one link away for a reader who wants them.

Every word in the Title, Says, Label and Evidence columns is the page's copy, as written. Typographic quotation marks and apostrophes on the page are fine. Code names (main, docs/spec.md) are set as code.

#	Title	Says	Label	Evidence	Checked against
1	Agree the spec first.	I talk each change through with the agent until we agree a written spec.	From AGENTS.md	"A change to what the page does starts as a change to `docs/spec.md`." Read the spec (a link)	the line in `AGENTS.md`
2	Plan small tasks, with their tests.	Each task names its tests before any code exists, and Context7 keeps the plan on current library documentation.	From the plan	"the bar fills before Loaded. appears" Read the plan (a link)	the test name in `docs/plan.md` and in the end-to-end tests
3	Keep the rules in the repository.	Hooks stop the agents committing or pushing to `main`, and merging.	The agent hook	"Agents never merge pull requests. Bonsung merges."	the agent hook's own output for a merge command
4	One agent builds, another reviews.	A fresh agent checks each task against the spec.	From a review	The loading bar's test could not fail if the order were wrong. A check of the order was added.	the order check in the hero's end-to-end test
5	Write down judgement calls.	Each one records what was decided, why, and what it costs if wrong.	From the decision log	The starter's Geist font was removed, because the rules allow no other company's fonts.	no Geist font anywhere in the repository, and the rule in `AGENTS.md`
6	Checks decide, and I merge.	Every pull request passes checks that give the same answer every time, and only I merge into `main`.	On every pull request	Build, test, lint, typecheck, history	the job names in the CI workflow
7	Review the whole at the end.	A more capable model reviews the finished site at once.	From the final review	It found a real email address in the published plan's sample data. It now uses an example address.	the plan's sample data uses an example address
8	Write down what was learnt.	Compound Engineering writes the lessons from solved problems into `docs/solutions/`, where the agents look when they plan.	From docs/solutions	The title of the lesson from step 4's review. (Set when the lesson is written, and shown to Bonsung in that pull request.)	the title of that file in `docs/solutions/`

The evidence is real. A test fails if a quotation is not in the file it comes from, or if what a story points to is missing from the repository (the last column).
Step 8's lesson is written in this revision, with the compound step, from the problem step 4 describes. If the compound step judges that problem not worth a lesson, the builder picks another problem solved while building this site, and step 8 quotes that one. AGENTS.md gains a line saying docs/solutions/ exists and what is in it, so an agent without the plugin finds it too.
Tone: short, plain English, no jargon a hiring manager would trip on. No durations.
On a phone the steps stack, and the evidence sits under its text.

The published documents (`/built`)

Plain pages in the site's style, reached from the links in steps 1 and 2, not from the main navigation.

/built/spec: the published spec, each line addressable.
/built/plan: the step-by-step plan the agents worked from. The original tasks stay as they were built, and the revision's tasks are added at the end, so the plan shows the change of direction too.

No dates or times on these pages, and no line about access to the repository.

The earlier pages of changes and checks, the strip that ended the page and the switch with its notes are removed. So is the code that read the git history and GitHub when the site was built.

How the repository works

The repository uses the workflow the letter describes.

Agent instructions in the repository: an AGENTS.md (and a CLAUDE.md that imports it) telling coding agents how to work here: spec first, the plan, the checks, the branch rules, the style rules.
Spec first: the spec and the plan live in the repository. Changes to what the page does start as changes to the spec.
Checks that give the same answer every time: tests, a production build, lint, a type check and the history check, run in CI on every pull request.
Hooks:
- a git pre-commit hook that refuses commits made directly on main,
- a coding-agent hook that stops an agent skipping the git hooks (for example --no-verify), pushing to main, or merging a pull request.
Only Bonsung merges into main, after the checks pass. The history check fails if main's history holds anything but merged pull requests, or a merge by anyone else.
Commits by agents say so: agent-written commits carry a co-author line for the agent.

Checks

At least these, run in CI and locally:

Content: every Key strengths, Experience, Projects and Education line on the page equals the text of the submitted CV. The PDF stays in the repository as the test's source, and the site no longer serves it.
The evidence is real: as above.
main is merges only: as above.
Style, for text written for the site: no em dash, en dash or semicolon, airie never capitalised, no hours or days claimed. The CV's own text is checked against the CV instead.
Third-party material: no font, image, logo or icon file from another company in the repository, except Loaded's favicon (Decision 9), which is checked byte for byte against the file Loaded serves.
Links: every external link on the page is one of an allowed list.
Build, lint, type check.

Deploy

Repository: b0nsun9/portfolio-for-loaded, private.
Hosting: Vercel. main publishes to loaded.bonsung.me. Pull requests get preview deployments. The build needs nothing from git or GitHub, so it needs no token.
Domain: a DNS record for loaded pointing at Vercel.

Verification before the link is shared

CI is green on main.
https://loaded.bonsung.me opens in a real browser with a valid certificate. Automated fetches can be shown a hosting security checkpoint that looks like an error, so they do not count.
The showcase reads well on a desktop and a phone width, and its two links open the spec and the plan.
The bar respects reduced motion.
The share card shows when the link is pasted into a chat or a social site.

Left to the builder

How each piece of evidence is checked, within The evidence is real.
Which line of the spec and of the plan the two links open.
What to delete and what to keep of the code behind the removed pages, as long as nothing the page no longer uses is left behind.
Layout details not fixed above.

Out of scope

Analytics, a contact form, a blog, other languages, a CMS, a CV download, and any page other than this one and its two published documents.