Push10 · 2021

The Sontag Foundation

The definitive enterprise for brain cancer research.

httpssontagfoundation.org

Timeline

3 months

Role

Front-End Developer

Stack

WordPress · JavaScript

sontagfoundation.org
The Sontag Foundation website preview

The Sontag Foundation funds brain cancer research fellowships across the country. Working with Push10, I helped build a custom WordPress site focused on presenting grantee research and foundation initiatives clearly and accessibly.

Overview

Sontag funds brain cancer research fellowships, and researchers and institutions needed to be able to find grant guidelines and past fellows' work without wading through a wall of text, a real challenge for a site built almost entirely around dense scientific and administrative content.

With Push10, I built the front end for the fellowship program: a searchable grantee directory, application guideline pages that could stay readable at any length, and page templates the foundation's team could manage without needing a developer for every update.

What I built

  • Built the grantee research directory with filtering by institution and research area
  • Developed WordPress page templates for the fellowship program and grantee profile pages
  • Implemented accessible, front-end JS-driven accordions for grant guidelines and FAQs
  • Coded the responsive layout system shared across research and news pages

Accordions that don't fight screen readers

Grant guidelines are long, procedural, and legally fussy, exactly the content people scan for one specific clause. The accordions collapse that wall of text without hiding it from assistive tech: real buttons, proper aria-expanded and aria-controls wiring, keyboard operable, and every panel still reachable and findable via in-page search. Accessible disclosure is easy to fake and easy to get subtly wrong.

A directory researchers can actually search

The grantee directory is the site's real utility, researchers use it to find who's working on what, and where. Filtering by institution and research area combines rather than replaces, so you can narrow to one institution's neuro-oncology fellows in two clicks instead of scrolling a list of every fellow the foundation has ever funded.

Templates the foundation owns

A small team maintains this site between grant cycles. The fellowship and grantee templates were built so that adding a new cohort, a new profile, or a new guideline section is a content task, not a development one, which is what keeps a site like this current a year after launch.

grant-guidelines.js
// grant-guidelines.js: accessible accordion
document.querySelectorAll(".accordion-trigger").forEach((btn) => {
  btn.addEventListener("click", () => {
    const panel = btn.nextElementSibling;
    const open = btn.getAttribute("aria-expanded") === "true";
    btn.setAttribute("aria-expanded", String(!open));
    panel.hidden = open;
  });
});