Restoration Southside Client: Restoration Southside ChurchPlyr.io , GSAP
The Problem The Digital Media Coordinator at Restoration Southside was stuck doing a lot of tedious manual work on their SquareSpace site. They had no CMS set up, so every time content needed to appear in multiple places (events, staff bios, sermon series) he had to copy and paste everything by hand. The theme was pretty limiting too, so they couldn't create the modern site they actually wanted.
On top of that, they weren't showing any of their Planning Center events on their website because it felt like too much work to create the events in Planning Center and then do it again in SquareSpace. They were missing a major opportunity to connect with their community.
Additionally, the staff at Restoration includes two excellent photographers and videographers, but the website didn't reflect that.
The client had some Webflow experience and wanted a site he could confidently edit and build out without breaking things.
My Approach I went with the Lumos Framework by Timothy Ricks because its ready-to-use component library, variable-first theming, and extensive documentation geared toward editors felt specifically designed for this kind of situation.
I started by wireframing in Figma with the Relume library to map out the site structure and make sure we were aligned on what pages we needed and where content should live. Then, I mocked up the three most unique pages to ensure the client could see a variety of ways their new design would be implemented on the site. In this phase, it was important to include layouts with lots of imagery so that we could showcase their photographers' work.
Photography highlight on the homepage During development, I set up the theme first (fonts, colors, spacing) to create a solid foundation. Then, I built out some of the main pages using stock Lumos components to see what the framework could handle and where I'd need to customize things for this specific design.
Key Solutions & Features Planning Center Events Integration
The biggest addition was building a Node.js app that syncs their Planning Center events directly into a Webflow Collection. I used Claude to help with development and Postman for API testing creating a system that automatically adds new events, removes old ones, and pushes updates as they change in Planning Center.
Synced Planning Center events on the homepage This has been huge for them. Events went from not being on the website at all to being a main CTA on the homepage and several subpages. The client doesn't have to think about updating event info anymore. It just happens.
Customized Navigation
I overhauled the Lumos nav to be full-screen and work across all breakpoints, so there's no separate desktop and mobile version to maintain. I also added dropdown and link components with slots, which cleaned up the editor panel and made updating nav items way easier.
Flexible CMS Components
I updated the card component to use slots instead of locking editors into just a heading, paragraph, and image. This gives my client flexibility to add or remove content blocks as needed, which is important for a church that needs to communicate all kinds of different information.
For the worship team, I built a custom songbook component using Webflow CMS and a custom JavaScript playlist. The worship director wanted to feature original songs from the congregation, which they'd been embedding one by one. Now they just add songs through the CMS and the playlist handles everything.
Songbook Before Songbook After Custom Video Players
I felt that it was important for the design and user experience to not use YouTube or Vimeo embeds. I used Plyr.io to create two custom video components, allowing the editor to add a muted autoplay player or a standard player that requires an interaction first.
Testing the Editor Experience
After theming and building custom components, I tried to work in Webflow's build mode as much as possible to test the page building experience for my client. This helped me figure out which components should be locked down to prevent layout breaks, which ones needed different props exposed, and where I needed to add new variations.
Where Things Stand The site's in the final stages with the client adding content and getting comfortable with the framework. His feedback so far has been great. He's really happy with the page building experience and the powerful CMS capabilities.
I've duplicated the Lumos documentation in Notion and I'm customizing it for this specific website. Next up is performance optimization and technical SEO implementation.
Project highlights Custom Planning Center to Webflow CMS sync (Node.js) CMS-driven audio playlist Custom Plyr.io video players Subtle GSAP animations Container queries for responsive components Color-mix() for dynamic theming
