John Paul Davis

The National Marine Sanctuary Foundation had been creating ad-hoc sites every year for Capitol Hill Ocean Week using a variety of methods. They needed a way to quickly update a site for the current year’s Capitol Hill Ocean Week branding and they needed to be able to set the order of components in a given page to suit that year’s brand and strategy goals.

My role was as tech lead and primary developer. I worked closely with the designer to propose a component system that, on the backend, uses Advanced Custom Fields flex fields to allow the reordering, and then uses a combination of old-school image slicing and newer CSS features (like the has() selector) to create a component system that changes the background colors of the dynamic SVG wave backgrounds without requiring any extra settings in the WordPress admin, regardless of what order the components appear.