Go Back

Client Website • Headless

Kevin Popke Foundation Leads with the Man, Not the Mission

Redesigned the Kevin Popke Foundation's website around the namesake's story and built a custom headless WordPress CMS on a $2,000 budget. Scores 98–100 on PageSpeed and allows the team to log new grants without a developer.

Client
Kevin Popke Foundation
Role
Lead designer / developer
Date
July 11, 2026 – August 24, 2026
Timeline
6 weeks
Tools
Figma, WordPress, WPGraphQL, Faust.js, Next.js, Vercel, GSAP
  • Web Design
  • UX
  • Headless CMS
  • Visual Design

The site buried the man it was named for

The Kevin Popke Foundation turns First Sergeant Kevin “50” Popke’s memory into grants for Florida veteran organizations. The old site had been built to check a box. It led with the organization and buried the man it was named for, and every update, down to a single grant announcement, needed a developer.

Constraints: six weeks and a $2,000 fixed budget, for a site that told Kevin’s story and that the foundation could run themselves.

Five decisions behind the site

  1. Person before organization

    I studied memorial foundations that do this well, like the Murph and Tillman foundations, and they all follow the same order: who the person was, why it matters, and how donors or volunteers can help. That set the homepage structure: Kevin’s story first, then the foundation’s purpose, then programs and donations. The donate button moves further down the page, because a visitor who knows about Kevin has more reason to give.

  2. Three concepts, one set of copy

    I presented three visual concepts using the same copy and largely the same media, so the family was comparing design and nothing else. They chose the “modern community vibe,” which balances professionalism with heritage by incorporating the family tartan.

  3. Featuring the marquee event

    Most of the foundation’s donations come from one annual event, Songwriters 4 Vets. The Events page opens with it, followed by a partnership and fundraising inquiry, and only then the general events list. At the client’s request, smaller events get less prominence, so the page is organized around where most of their funding comes from.

  4. Headless on a nonprofit budget

    A headless build (WordPress → WPGraphQL → Faust.js) delivers speed, but it breaks many standard WordPress plugins, and the budget didn’t cover premium licenses. So I built two things: a trimmed, reorganized WordPress admin, and kpf-core, a single plugin that handles SEO, forms, image optimization, snippets, and back-end accessibility tooling, replacing up to 11 separate plugins. Both sit on top of WordPress, so the core stays untouched and still receives security updates.

  5. A CMS shaped like the page

    Every kpf-core field maps directly to a spot on the page: plain-text headings, paragraphs, and buttons, with nothing to style. Logging a new grant takes as little as one photo from the check presentation. The grantee, date, and amount go into three fields, the recipient’s logo gets uploaded, and the live donation total on the About page updates itself.

Results

98 / 100 / 100 / 100 +24% $2,000
PageSpeed on desktop (95 on mobile) Over target for Songwriters 4 Vets, a week after launch Fixed fee, in six weeks
Measure Result Source
PageSpeed, desktop 98 / 100 / 100 / 100 PageSpeed Insights, Oct 16, 2026
PageSpeed, mobile 95 / 100 / 100 / 100 PageSpeed Insights, Oct 16, 2026
GTmetrix Grade A (98% performance) GTmetrix, Aug 27, 2026
Budget $2,000 Fixed fee

Songwriters 4 Vets took place a week after launch and beat its fundraising target by 24%. A new website doesn’t raise money on its own, and I don’t claim it did. But the event had a proper home online while it was being promoted.

What shipped: six responsive templates (Home, About, Events, Contact, Blog archive, and Blog post), the custom WordPress build, kpf-core, and a CSS manifest that maps every Figma component to its classes, with tokens layered primitive → semantic → component.