How this site was designed and put together.

The concept

Environmental nonprofit sites tend to fall into one of two traps: doom-laden alarm copy that exhausts a visitor before they've reached the donate button, or vague "we care about the planet" messaging with nothing concrete behind it. The brief here was to sit between editorial nonprofit journalism and field-research credibility — hopeful rather than doom-laden, backed by specific programs, specific places, and specific numbers, so a prospective donor comes away trusting the organization with their money.

That's why the tagline is a claim, not a plea — "the ocean is resilient, when we give it a chance" — and why nearly every section leans on a named place (the Meridian Coast, Port Solane, the Solane Reef Corridor), a named method (micro-fragmentation, quarterly survivorship surveys), or a real-sounding number rather than an adjective. The founding story is written the same way: one specific reef, one specific bad year, a slow and unglamorous recovery, not a dramatic rescue narrative.

Visual direction

The palette is deep ocean ink and teal, with a warm sunrise-coral accent used deliberately sparingly — it appears on calls to action, a handful of headline emphasis words, and the impact numbers, but never as a wash across a whole section. The idea is that coral color should read as a signal (hope, energy, action) precisely because it's rationed, the way an actual coral reef's color pops against acres of open blue water.

Photography direction stayed documentary throughout: real-feeling underwater reef work, coastal cleanup crews in work clothes at golden hour, a tidepool lesson on an overcast morning — never the glossy, over-lit stock-photo look that makes conservation sites feel like they were assembled from a generic image library. Every photo on the site was art-directed with that instruction specifically: natural light, authentic gear, candid rather than posed compositions.

Typography pairs Spectral, a literary serif, for every headline and pull quote, with Manrope, a clean geometric sans, for body copy, labels, and navigation. Spectral carries the "this is journalism, not marketing" register the brief called for; Manrope keeps long paragraphs — and there are a few, especially in the founding story — easy to read at length.

Structure — five real pages

This is a genuine multi-page site, not a one-pager with anchor links pretending to be pages:

• index.html — the home page: hero, an impact-stats strip, a three-program teaser, a "why it matters" section, and a donor call to action.
• programs/index.html — a full breakdown of Reef Restoration, Coastal Cleanup, and Marine Education, each with its own methods, locations, and imagery, plus a four-step "how a season runs" strip.
• about/index.html — the founding story, four organizational values, and the three-person team.
• get-involved/index.html — three donor tiers tied to concrete outcomes, three volunteer opportunities, a corporate-partnerships section, and an FAQ.

Every page shares the same header and footer, and internal links are relative to each page's folder depth — pages one level down (like programs/) reach the homepage with ../index.html and reach their siblings the same way. The home page also deep-links into program anchors (programs/index.html#restoration) so a visitor reading about reef restoration on the home page lands on that exact section, not the top of a long page.

The imagery

Nine photographs were art-directed for the site: a wide underwater reef hero, three program scenes (a coral outplanting dive, a shoreline cleanup at sunrise, a tidepool education moment), three team portraits shot outdoors in consistent overcast field light, a founding-story scene of two researchers reviewing notes on a boat at dawn, and a community gathering shot for the get-involved page. Each brief specified natural light, real-feeling wardrobe and gear, and a documentary rather than commercial framing, so the full set reads as one consistent body of field photography rather than nine unrelated stock images. Files were resized and recompressed to keep the whole imagery folder a reasonable size for a static deploy.

The signature motion

Three techniques carry the site's motion identity, all tied to the ocean theme rather than bolted on for decoration. First, the home page's impact numbers — reef sites restored, tons of debris removed, volunteers trained, coral fragments outplanted — count up from zero the moment they scroll into view, so the scale of the work registers as something earned rather than printed. Second, a soft caustic light-ripple drifts behind the hero photograph, built from layered, slowly animating gradients rather than a heavy video or WebGL layer, evoking sunlight refracting through moving water without costing any real performance. Third, a hand-drawn wave-line divider between major sections strokes itself in as it scrolls into view, using the same stroke-dasharray reveal technique as a signature underline, reinforcing the coastline motif at each major transition.

Everything else — card reveals, staggered grids, the sticky header's shadow on scroll — runs through GSAP's ScrollTrigger, loaded from a CDN with no build step required. prefers-reduced-motion is respected throughout: the caustic ripple freezes, the wave dividers appear fully drawn, and every counter jumps straight to its final value.

Responsiveness and craft details

The layout was checked from a 375px phone width up through large desktop screens. The nav collapses to a slide-in panel below 860px, the impact strip and card grids step from four or three columns down to two and then one, and overflow-x: clip is set on both html and body so nothing — including the full-bleed hero photo — can force horizontal scroll on a narrow screen. The donation tiers and volunteer sign-up form are both intentionally visual demos: they validate and show a confirmation state on submission, but don't process real payments or send real emails, and that's disclosed directly on the page rather than left ambiguous.

Deploying a site like this

Because there's no build step — plain HTML, CSS, and a small JavaScript file, with fonts and the animation library loaded from CDNs — deployment is just a matter of hosting static files. The most common path is Netlify: drag the project folder onto Netlify's deploy target, or connect a Git repository and let it deploy on every push, and the site is live on a Netlify subdomain within a minute or two, with a custom domain attachable afterward under Site Settings. Because every internal link in this project is relative rather than absolute, the whole folder can also be dropped into any other static host — GitHub Pages, an S3 bucket with static hosting enabled, or a traditional shared host — without changing a single link.