RVA Builds

Site, design system and backend in four days

// brief.json
const rvaBuilds = {
  type: "Web design & build",
  year: 2026,
};

brief.json

Site for RVA Builds, the citywide initiative connecting Richmond Public Schools students to careers in the skilled trades. I designed and built it in four days, from the visual system to a backend that takes applications in real time. I used Claude to generate the design system from the brand.

Year: 2026
Client: Richmond Ed Fund
Industry: Education & workforce
Duration: 4 days
Type: Web design & build

Services

Web designDesign systemDevelopmentBackend

Visit live site

Shown for portfolio purposes only. Brands belong to their owners; if you own it and want it removed, email me. Terms ↗

1 0 1 1 0 0 0 1 0 1 1 0 0 1 1 1
1 1 1 1 0 0 0 1 0 1 0 1 0 0 1 0
0 1 0 0 0 0 0 0 1 1 1 0 1 1 0 1
1 1 0 1 0 1 1 1 1 0 1 1 1 1 1 0
1 0 0 0 0 0 1 1 0 0 1 0 1 0 0 1
1 0 0 0 0 1 0 1 1 1 1 1 0 0 1 1
0 0 0 1 1 1 1 0 0 1 0 1 1 1 0 0
0 1 0 1 1 1 1 0 0 1 1 0 1 1 1 0
1 0 0 1 1 0 1 1 1 1 0 0 1 0 1 0
0 0 0 1 1 0 1 1 0 0 1 1 1 0 0 0
1 1 0 0 0 0 0 0 1 0 0 0 1 0 1 1
1 1 1 0 0 0 1 1 1 0 0 0 1 0 1 1

01Challenge

A site in days, not months

Richmond Ed Fund had just launched RVA Builds and needed a public site right away. It had to explain the initiative and start collecting applications from students and employers. And it had to run on infrastructure the client owns outright, with no CMS license or developer dependency.

RVA Builds, two paths from the home page

// two-paths-from-the-home-page.md
const rvaBuilds = {
  services: ["Web design", "Design system"],
  tags: ["Web", "Design system", "AI"],
};

1 0 0 0 1 0 1 0 0 1 0 1 0 1 0 1
0 0 1 0 0 1 1 1 1 0 0 1 0 0 1 1
0 1 0 1 0 0 0 0 0 1 0 1 1 0 0 1
0 0 0 0 0 0 1 1 1 0 0 0 1 1 0 1
1 0 0 0 0 1 1 1 0 0 0 0 0 0 0 1
1 0 1 0 0 0 0 0 0 1 0 0 1 0 1 0
1 1 0 1 1 1 0 1 0 0 0 0 1 1 1 1
0 1 1 1 1 0 1 0 0 1 0 1 1 1 1 1
1 0 1 0 1 0 0 1 0 1 1 1 0 0 0 1
0 0 1 0 0 0 0 1 1 0 0 0 0 0 0 0
1 1 1 0 0 1 1 0 0 1 1 1 1 0 1 1
0 0 1 1 1 1 1 1 1 0 1 1 1 1 1 0

02System & UX

Two paths from the home page

I split the home page into two paths: students and employers. That way, each audience recognizes itself at a glance and lands on a page with its own copy and call to action. To hit the deadline, I trained Claude on Richmond Ed Fund’s brand. Then I used it to generate the design system: tokens, type, components and motion. It was ready in hours instead of a week.

RVA Builds, every application, in two places at once

// every-application-in-two-places-at-once.md
const rvaBuilds = {
  type: "Web design & build",
  year: 2026,
};

03UI & engineering

Every application, in two places at once

I designed editorial layouts with room to breathe and counters that animate each figure at its own pace. Sections reveal with GSAP. On mobile, each audience gets cards designed just for it. Underneath, it’s a static site on Cloudflare Workers with a serverless function. Each application passes an anti-spam check and is validated in the browser and on the server. Then it goes out in parallel as a Resend transactional email and as a row in a shared Google Sheet.

0 0 0 1 1 0 0 1 0 1 1 0 1 0 0 1
1 1 1 0 0 1 1 1 0 1 0 1 0 0 1 1
1 1 0 0 0 0 1 0 1 0 0 1 1 0 0 0
1 0 0 1 0 1 1 0 1 0 1 0 1 1 0 0
0 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1
0 1 0 1 1 1 0 0 0 0 0 0 0 0 1 0
1 1 0 0 1 1 1 0 1 1 0 1 1 0 1 1
0 1 0 0 0 0 1 1 0 0 1 0 0 1 1 0
0 1 0 1 1 0 1 1 1 0 1 0 0 1 0 0
1 1 1 1 1 0 0 0 1 0 0 1 0 1 0 1
1 0 1 1 1 1 1 1 1 1 1 1 0 0 0 0
0 0 1 1 1 0 0 1 1 1 0 0 1 1 1 1

04Result

From zero to applications in four days

In four days, RVA Builds went from no site to receiving applications from students and employers. It all runs on its own infrastructure. The same design system shows up on the site and in every email the backend sends.

[ OR™ ‒ RELATED / rva-builds.related ]

The closest matches to this case come first. Use the arrows to browse the rest.