St. Petri Kirche - Digital presence for a historic venue

St. Petri Kirche

Website

Nuxt

Vue

GraphQL

Contentful

SASS

Background

St. Petri zu Lübeck is a special place—no longer a traditional parish church, but a vibrant venue for cultural events, exhibitions, and concerts. It serves as a bridge between art, spirituality, and philosophy. Our goal was to create a digital presence that visually communicates this unique and ambitious role.

I led the full implementation, working closely with the design team. The main challenge was migrating from the old, complex website to a modern, flexible platform, ensuring a smooth transition for both editors and visitors.

Technologies & Tools

Nuxt (Vue 3)
Contentful (headless CMS)
GraphQL (data fetching)
GSAP (animations)
SCSS
Netlify

Features

Fully responsive layout and mobile optimization
Smooth transitions and scroll animations using GSAP
CMS-driven content architecture via Contentful and GraphQL
Event calendar, event, and search integration
Multilingual support (German / English)
SEO-optimized meta structure

Challenges

Contentful’s rich-text structure and linked entries required a flexible content renderer. I built a custom component system in Vue that handled content blocks dynamically based on the CMS schema.

Learnings

When using headless CMS with flexible content types, it’s worth investing in a good modular renderer early on
Displaying Rich Text Format can be cumbersome, but it's worth the effort to make it work well
I love GraphQL

Visit the live website

Building this site was a rewarding mix of technical architecture and expressive frontend design. It's now a modern digital home for one of Lübeck’s most visited cultural landmarks.