Welcome To GrayWorks Technologies

Hannah's Helping
Hands

Category

Nonprofit & Athlete Storytelling

Year

2026

Role

Design, Development & Hosting
Hannah's Helping Hands

Project Description

Hannah's Helping Hands Foundation is the Hidalgo family's foundation, launched by Notre Dame guard Hannah Hidalgo in South Bend in 2024. It serves young people in South Bend, Indiana, and the Delaware Valley through community outreach and financial literacy — inspiring preeminence on and off the court.

GrayWorks rebuilt hannahshelpinghands.org as a single scroll story that plays like one possession: defense turns into offense, and offense turns into giving. Hannah's studio cutout stands between two rows of a giant condensed name, each chapter arrives in a new team color like a scoreboard flip, a 132-frame image sequence scrubs her up-and-under move frame by frame, and ESPN clips open in an in-page film player. Every stat, quote, and event on the page traces to a sourced research file, and anything the foundation has not confirmed is held back rather than guessed.

A Get in Touch page adds a message form that runs through a small, dependency-free mail service to SendGrid — a branded notice to the foundation and a branded confirmation to the visitor, guarded by a honeypot and a per-IP rate limit. The site was tested on desktop, tablet, and mobile, with JavaScript off, and with reduced motion, and ships as lightweight nginx and Node containers behind a TLS reverse proxy, including the cutover of the foundation's own domain with its Microsoft 365 email left untouched.

Key Deliverables

A scroll story that plays like one possession — from record-setting steals to giving back.

Client

Hannah's Helping Hands Foundation

Location

South Bend, IN & the Delaware Valley

Scope of Work

Everything GrayWorks delivered for Hannah's Helping Hands:

  • Website Design & Art Direction
  • Scroll Storytelling & Motion
  • Content Research & Fact-Checking
  • Contact Form & Branded Email
  • Accessibility & Performance
  • Hosting & Domain Cutover
Open Project

Hannah plays full-court pressure and dresses loud, so the site does too: apricot, cobalt, pink, gold, and navy set in an oversized condensed display face. The hero layers her studio cutout between two rows of her name with pointer parallax, the nav recolors itself from whichever chapter sits beneath it, and the closing call to action reuses a photo of her reaching toward the camera as the literal helping hand.

Motion runs on GSAP ScrollTrigger and SplitText over a single Lenis smooth-scroll engine, with pinned chapters created in page order so each one measures its start correctly. The 132-frame sequence streams six requests at a time to stay under the proxy's rate limit, film chapters autoplay in view with a visible pause control, and visitors who prefer reduced motion get a still, fully readable page with smooth scrolling never started.

Every number, quote, and event — from her NCAA steals records to backpack giveaways, winter-coat drives, and 150 children's books donated in Camden — comes from a research file with its source link. Open questions such as the donation link and nonprofit details are tracked for the foundation to confirm, and every press photo and film clip is credited in the footer.

Messages post to a Node service with no third-party packages that validates each field, strips header-injection characters, and sends through SendGrid. The foundation gets a branded notice with Reply-To set to the visitor, and the visitor gets a branded confirmation that deliberately never repeats their message, so the form cannot be used to relay spam. The form still works with JavaScript turned off.

Start a Similar Project

Your email address will not be published. Required fields are marked *