How this site was designed and built.

The concept

Union Point Church needed to read as a real, grounded community — not a stock-photo brochure and not an airy aspirational brand. The brief called for something between the two churches it's meant to sit alongside in this portfolio: warmer and more textured than a pastel "dawn-sky" aesthetic, and softer and more inviting than a dark, bold, urban one.

That landed on a documentary-community direction. The language throughout — "the table is always open," "come as you are" — is meant to sound like an actual pastor talking to an actual room, not marketing copy. Every photograph leans candid: mid-laugh, mid-sentence, mid-conversation, shot like someone happened to have a camera out during a good moment, rather than staged for a brochure.

Site structure

The site is four real pages plus this guide — no anchor-scrolling single-pager. That's a deliberate choice: a church website has genuinely different jobs on different pages (convince a first-timer, show recent teaching, explain ministries, get someone in the door), and cramming those into one long scroll makes each job weaker.

• Home — the pitch: who this church is, when to show up, a taste of recent teaching, one clear call to visit.
• Watch — a livestream placeholder styled to feel premium (no real embed — this is a portfolio piece), plus a grid of short-form message clips, because weekday content is the whole point of this rebuild.
• Ministries — five alternating photo/copy rows, one per ministry, so each one gets full-width breathing room instead of competing in a cramped card grid.
• Plan a Visit — every logistical question a first-timer has, ending in a contact and prayer-request form.

Every page shares one navigation and footer, defined once in assets/css/style.css and assets/js/main.js, and referenced with relative paths (../assets/... from any subfolder) so the whole thing runs as static files with no build step.

Design system

Two typefaces carry the whole site. Fraunces is the display serif — it has enough character in its curves to feel handmade without tipping into fussy, and it's used for every headline. Work Sans is the body and UI sans — humanist and warm rather than clinical, so paragraphs and buttons don't feel like they belong to a different, colder brand.

Terracotta carries every call-to-action and warm accent; deep teal is reserved for the darker "anchor" sections — the footer, the livestream panel, the location block — so it reads as a grounding color rather than competing with terracotta for attention. Cream and a slightly deeper cream do the heavy lifting for backgrounds, alternating section to section so the page never goes flat.

A very faint animated grain sits over the whole site at low opacity. It's subtle enough that most visitors won't consciously notice it, but it keeps large flat color fields from feeling like vector illustration instead of a warm, textured space.

Imagery & art direction

Every photograph on the site was generated rather than sourced from a stock library, art-directed hard toward one consistent look: golden-hour or warm lamp light, shallow depth of field, a slightly grainy film-like finish, and genuine, unposed body language — people mid-laugh or mid-sentence rather than posed and looking at camera. The palette discipline carries into the images themselves, with terracotta, cream, and touches of deep teal showing up in clothing, furniture, and light rather than being layered on afterward.

The set covers the building exterior at golden hour, a full gathering space after a service, a close, tender shot of hands in fellowship, a small worship band mid-song, kids in a craft session, teenagers on a porch, and a small group in a living room — the range of moments a real church would actually have on hand. For the Watch page specifically, a handful of images were shot like still frames pulled mid-sentence from a video — a different speaker and setting each time — so the message grid reads as a real library of separate clips rather than one photo repeated with different captions.

All images were exported as compressed JPGs sized for the web rather than left at full generation resolution, keeping the whole image set under 4MB combined.

Motion & interaction

The signature technique is a slow Ken Burns drift on the hero and CTA background photos — a gentle scale-down from a slight zoom, timed slowly enough that it reads as "the photo is breathing" rather than an obvious loop. It's implemented in pure CSS (a transform transition triggered by a class toggle on load), which keeps it lightweight and avoids fighting with scroll animation.

Everything else on scroll — section headers, card grids, ministry rows — uses GSAP's ScrollTrigger to fade and lift content into place as it enters the viewport, staggered slightly across grids of cards so they don't all land in the same frame. If GSAP fails to load for any reason, the site falls back to a plain IntersectionObserver so content still reveals correctly.

The "Watch Live" panel earns its own attention: a live/offline badge with a soft pulsing dot, a subtle grid-line texture, and a countdown to the next Sunday service that ticks down in real time using the visitor's local clock. None of it connects to a real stream — it's built to demonstrate what a premium placeholder looks like before a church plugs in their actual embed.

The Watch page, specifically

This page is the heart of the pitch. Most church sites treat "video" as a single embedded YouTube player for last week's full sermon — which is exactly the content a busy weekday visitor never has 40 minutes to watch. Here, the live player is one clearly separated section, and beneath it sits a real grid: six distinct short clips, each with its own still, series label, title, and duration tag, filterable by type (messages, worship, real talk, community). It's designed to make a church leader picture their own six-clip week sitting in that grid.

The Visit page form

The contact and prayer-request form on the Plan a Visit page is a visual stub only — there's no backend, no email service wired up. Submitting it swaps the form for a confirmation state entirely client-side, using a small JavaScript listener in assets/js/main.js that intercepts the submit event. Wiring it to a real inbox in production is a matter of pointing the form at a service like Netlify Forms, Formspree, or a serverless function — no rebuild of the front end required.

Deploying on Netlify

Because the whole site is static HTML, CSS, and JS with no build step, deployment is as simple as it gets:

1. Drag the union-point-church folder onto app.netlify.com/drop for an instant preview URL, or connect the folder's Git repository through Netlify's "Add a new site" flow for continuous deploys.
2. Leave the build command blank and set the publish directory to the project root — there's nothing to compile.
3. Add a custom domain under Site settings → Domain management once the church has one, and Netlify handles HTTPS automatically.
4. To wire up the Visit page form for real, enable Netlify Forms by adding a netlify attribute to the <form> tag and a hidden form-name field, or swap in Formspree/a serverless endpoint — either approach drops in without touching the page's layout or styling.

---

That's the whole build. Nothing here is hidden behind a framework or a database — it's meant to be legible enough that a church's next developer, or the church itself, can open any file and understand exactly what's happening.