Designer & Developer

Restoration Southside Client: Restoration Southside Church Technologies: Webflow CMS, Lumos Framework, Planning Center API, Cloudflare Workers, Plyr.io, GSAP

The Problem

The Digital Media Coordinator at Restoration Southside was managing everything manually on a SquareSpace site with no CMS. Events, staff bios, and sermon series all had to be copied and pasted by hand whenever content appeared in more than one place. Their Planning Center events never made it to the website at all — the double-entry felt like too much work, so they skipped it entirely.

The client had some Webflow experience and wanted a site he could confidently edit and build out without breaking things. The staff also includes two excellent photographers and videographers whose work the old site never showcased.

My Approach

I chose the Lumos Framework for its variable-first theming, ready-to-use component library, and editor-focused documentation — a good fit for a client who needed to own the site long-term. I started with Figma wireframes using the Relume library to align on site structure, then mocked up the three most distinct pages to establish the design direction and make a case for leading with photography.

During development I set the theme first — fonts, colors, spacing — then stress-tested stock Lumos components to find where the framework could carry the design and where customization was needed.

Key Solutions & Features

Planning Center Sync

The biggest technical addition was a Cloudflare Worker that syncs Planning Center events directly into a Webflow CMS collection — automatically adding new events, removing old ones, and pushing updates as they change. Events went from absent entirely to a primary CTA on the homepage and several subpages. The client doesn't touch it.

Customized Navigation

I rebuilt the Lumos nav as a full-screen overlay that works across all breakpoints from a single component — no separate desktop and mobile versions to maintain. Dropdown and link components use slots, which keeps the editor panel clean and makes nav updates straightforward.

Flexible CMS Components

I updated the card component to use slots instead of a fixed heading/paragraph/image structure, giving the client flexibility to add or remove content blocks per card. For the worship team, I built a CMS-driven audio playlist — songs are added through the CMS and a custom JavaScript player handles everything, replacing a one-by-one embed workflow.

Custom Video Players

Rather than default YouTube or Vimeo embeds, I built two Plyr.io video components: a muted autoplay version for background use and a standard click-to-play player. Both are editor-configurable.

Editor Experience Testing

After building components, I worked extensively in Webflow's build mode to evaluate the editing experience from the client's perspective — identifying which components needed to be locked down, which props needed to be exposed, and where new variations were needed.

Project Highlights

• Cloudflare Worker syncing Planning Center events to Webflow CMS
• CMS-driven audio playlist with custom JS player
• Custom Plyr.io video components
• Slot-based card components for flexible content editing
• Full-screen unified navigation
• Color-mix() for dynamic theming

BibleProject — 10 Commandments Client: BibleProject (via Whiteboard) Technologies: Webflow CMS, JavaScript, GSAP, Lottie, Mux, CSS Grid

The Problem

BibleProject was launching a serialized, multi-week campaign to help audiences rediscover the Ten Commandments as wisdom literature. The experience needed a digital home that could anchor the full lifecycle of the campaign — weekly content releases, deep engagement beyond social and video platforms, and an invitation to sustained reflection.

The design Whiteboard delivered was ambitious: an interactive canvas where users could explore commandments and wisdom content spatially, not just scroll through it. The challenge was building something that felt like a crafted native app experience rather than a webpage, on a tight three-week development timeline.

My Approach

Coming into an established design system with a hard launch date meant moving fast without cutting corners on quality. I built from Whiteboard's design handoff, working through internal QA before delivering to BibleProject for final review.

Key Solutions & Features

Interactive Draggable Canvas

The centerpiece of the experience is a spatial canvas of commandments and wisdom items that users can freely pan, zoom, and explore. Under the hood, a single camera object tracks x, y, and scale state — GSAP's ticker applies those values to the DOM only when something has actually changed, keeping the render loop efficient. GSAP's Draggable handles panning with inertia, edge resistance, and bounds clamping that recalculates dynamically as the zoom level changes.

Zoom works across all input methods: pinch-to-zoom on touch, cmd/ctrl+wheel on desktop, and stepped zoom buttons. Each method feeds into the same focal-point zoom logic, so the canvas always scales toward the right point regardless of how the user is interacting. On touch, Draggable is temporarily disabled during pinch gestures to prevent conflicts, then re-enabled once the spring-back animation settles — with synthetic pointer events dispatched to reset Draggable's internal state so the next tap registers immediately.

Content on the canvas fades out when dragging starts and eases back in after the user settles — a small detail that keeps the interface feeling intentional rather than just functional.

CMS-Driven Weekly Releases

Each commandment and wisdom item is positioned on the canvas via CSS grid areas driven by data- attributes, with placement defined in the CMS. Items not yet released are visually dimmed, communicating the serialized campaign schedule without hiding content. BibleProject's team could publish new items on schedule without any developer involvement.

Lottie Animation Optimization

The design called for flipbook-style Lottie animations — candle and lamp sequences built from over 150 embedded PNG frames at 100fps. Getting these to perform well required real optimization work: converting embedded frames to WebP, tuning compression, and evaluating frame reduction strategies to bring file sizes down without degrading the visual quality.

Mux Video Integration

Video is core to BibleProject's content. Mux handled delivery, giving the team a performant alternative to YouTube or Vimeo that fit the premium feel of the design.

Project Highlights

• GSAP-powered draggable canvas with inertia, pinch zoom, wheel zoom, and spring-back bounds
• Unified focal-point zoom across mouse, trackpad, touch, and button inputs
• CMS-driven content release system with per-item scheduling
• Lottie flipbook optimization
• Mux video integration