The A. James & Alice B. Clark Foundation Website Redesign
The A. James & Alice B. Clark Foundation Website Redesign - I was brought on by Bluecadet as Lead Engineer for the A. James & Alice B. Clark Foundation website redesign, developed in Drupal 11+. In close collaboration with Bluecadet's team, we launched a digital legacy that documents the foundation's remarkable 10-year journey of spending down $1.4 billion from 2016–2025 to support engineering education, reinvest in Washington DC, and serve our nation's veterans. With the foundation sunsetting its operations, the site is designed to remain live for 10+ years as a permanent archive showcasing their philanthropic impact. visit site
Date
January 2025 - June 2025
Role
Lead Engineer / Site Builder
Agency
Bluecadet
Tech
Drupal 11+, Single-Directory Components (SDC), CSS, Javascript, GSAP, PHP, Twig, Accessibility
On scroll animations of the Homepage's Overview experience
Homepage Experience
The homepage serves as the narrative center of the site, featuring a Hero section with a dynamic timeline animation that visualizes the foundation's 10-year journey from $1.4 billion to $0. This animation brings to life the foundation's mission of strategic philanthropy—transforming founders' wealth into lasting impact.
Below the hero, a custom navigation system with four tabs (Overview, Engineering Initiatives, DC Initiatives, Veterans Initiatives) allows visitors to explore different focus areas. Each section features interactive data visualizations, including custom charts, layered PNG maps with interactive pins, parallax scrolling effects, and carefully choreographed animations that make complex philanthropic data engaging and accessible.
Technical Implementation
The tab navigation delivers a modern single-page application experience within Drupal's CMS environment. Using Drupal's AJAX framework, content switches seamlessly without full page reloads. Content is fetched asynchronously and cached in memory using a JavaScript object, with HTTP caching headers (ETag, Last-Modified) stored in sessionStorage for optimal performance. Smooth opacity transitions create fluid content switching that feels natural and responsive.
Technology Stack
- JavaScript: Vanilla JS, Chart.js, GSAP, IntersectionObserver
- HTML/CSS: BEM methodology, CSS custom properties, CSS transitions
- Accessibility: ARIA live regions, semantic roles, keyboard navigation
A custom navigation bar showcasing different initiatives using Drupal's AJAX
Our Impact Landing Page (Desktop)
Investments Landing Page (Desktop)
Engineering Initiatives Section
Single Directory Components (SDC)
To ensure long-term maintainability of the theme, we architected a component-based system using Drupal's Single Directory Components pattern. The site features 75+ SDCs integrated throughout nodes, paragraphs, views, blocks, media, and other Drupal entities.
Each component includes properly documented props and slots for developer reference. To streamline content authoring, we implemented a paragraph browser with visual thumbnails, making it immediately clear which component editors are selecting. This approach not only accelerated development but positioned the Bluecadet team to confidently manage the site through its ongoing support period.
Masthead Dropdown
Advanced Filtering
DC Initiatives
Summary of Role
- Lead Engineer/Full Stack Developer: Architected and developed the site's front-end and back-end systems, providing technical leadership and code review support to the development team
- Interactive Features Development: Collaborated closely with Bluecadet's design team to implement the homepage hero timeline animation, tabbed navigation system, and interactive data visualizations
- Animation & Performance Specialist: Provided expertise in GSAP animation timing, JavaScript performance optimization, and seamless user experience design
- Project Planning: Partnered with the Project Manager to establish sprint cycles, development milestones, and client delivery schedules
- Data Migration: Supported investment data migration/import
- Team Collaboration: Conducted PR reviews and provided technical mentorship to ensure code quality and adherence to best practices
Stats.
Date
January 2025 - June 2025
Role
Lead Engineer / Site Builder
Agency
Bluecadet
Tech
Drupal 11+, Single-Directory Components (SDC), CSS, Javascript, GSAP, PHP, Twig, Accessibility
next project