Case studyPersonal project2026Design and code, solo

A portfolio you can ask questions.

Brix is this site: a chat concierge whose answer engine runs in your browser, with no framework, no backend, and no API key. I designed it, wrote the engine, and audited it like a product.

Backend and per-answer cost

61/62

Screening questions answered, Oct 13, 2026

53/53

Browser checks passing, Oct 23, 2026

Contrast in both themes

The homepage: an icon rail with Bri's signature, the greeting Hi, I'm Bri May, three case-study tiles, and the ask box with three starter questions — **The first screen**Three case studies to open and one box to ask anything.

01 · At a glance

A recruiter gives a portfolio 90 seconds. A claim isn't proof.

So the site proves its own claims. The engineering is the site, open to anyone with DevTools.

The problem

Every senior portfolio says "ships quality." None of it is checkable in the time a screener spends, and a bolted-on chatbot means a key, a server, and a bill.

The bet

A chat that answers screening questions itself, honest about what it is, with the evidence one click away.

My role

Everything: product framing, the interface, the engine, accessibility, and the audit.

Built with

Vanilla HTML, CSS, and JavaScript · no build step · GitHub Pages

Timeline

2026, evenings and weekends

02 · The engine

An AI product with no AI bill

Questions are normalized, synonym-expanded, and fuzzy-matched against a hand-written knowledge base, then scored for confidence. Ask if it's a real AI and it shows you its code.

The homepage answering How does this work, are you a real AI, honestly, with the retrieval engine's source code rendered inside the answer — **The source, in the answer**Nothing leaves the visitor's browser, and every answer has a shareable link.

03 · Evidence

Proof one click away, without losing your place

Links open the case study in a side panel beside the chat. Focus moves in and back out, and Esc closes it.

The chat listing case studies on the left while the Global Content Studio case study opens in a floating side panel on the right — **Chat on the left, the work on the right**The embedded page hides its own navigation and reads as a clean preview.

04 · Everywhere

On a phone, in the dark, or with JavaScript off

One token system drives both themes at AA contrast. Streaming answers reach a screen reader once, not dozens of times.

The homepage on a phone: the greeting, one case-study tile with dots to swipe to the next, and the ask box — **One case study at a time**The same first screen at 390px, swiped sideways.

Brix on a phone answering What broke on Global Content Studio with a long, specific answer — **Honest answers**It names what broke, not just what worked.

Brix on a phone in dark mode answering a question about remote work — **Dark mode**Same layout, same contrast, no flash on load.

One announcement per answer

The thread streams silently and a separate live region reads the finished answer once. Measured: 1, down from 87.

Works without JavaScript

The homepage ships a full no-JS version, and reveals only hide content when scripts run.

Light to load

Images declare their size and the heavy art is WebP. The deploy went from 130 MB to 51 MB.

05 · The audit

I tested it like a real product

I pulled the engine into a test harness and ran real screening questions. The first pass sent "show me her strongest case study" to my college degree.

61/62

Screening questions answered with the answer text checked, up from 20 of 38 on the first pass

53/53

Browser checks: network, layout at four widths, contrast, keyboard, live regions, downloads

Servers, API keys, and dollars per answer

When a live review found confident answers to the wrong question, the fix wasn't more keywords. It was entries that say plainly what the portfolio doesn't document.

This site is the working sample: product framing, interface craft, a hand-built engine, measured accessibility, and a ship-then-audit loop. The same loop I'd bring to your team.