Drama Geeks

Charlotte runs Drama Geeks, a performing arts school for children in South Shields. The existing site was unpolished. Finding class schedules, fees, or how to actually book a place required too much effort.

There was no formal brief. I worked from the old site, figured out what was missing, and built something that addressed it. Charlotte needed parents to land on the site and know immediately they were in the right place.

Mobile was a priority. Most parents in this demographic browse on phones; effort went into making sure the experience held up at every screen size.

The redesign prioritised warmth over the feel of the previous site. A Fraunces/Poppins pairing; one for character, one for readability. The base palette of cream, near-black, warm blue, and accent yellow was drawn from the school's existing identity.

Then I went a bit colour-crazy: each class category got its own accent colour. Mini Geeks gets pink, Drama Geeks gets amber, DG Associates gets purple.

The site has 23 pages, restructured around the three questions parents actually ask first: can my child try a class, what does it cost, and when and where does it happen.

Each class tier got its own page. Fees got its own page. Productions, workshops, gallery, and a full about section each sit in their own space rather than being buried in walls of text. The nav reflects this; a two-tier structure with a mega menu for classes, dropdowns for About and Families and Carers, and a persistent "Book a Free Trial" pill button that follows the user everywhere.

The classes overview includes a comparison table across all five class tiers; age range, skills, duration, venue, and price. One place, everything a parent needs to make a decision.

"Book a Free Trial" appears in the desktop nav, the mobile nav, the homepage hero, the footer, and at the end of every major page. It always points to the same place; a dedicated booking form on the contact page.

The contact page has two forms; one for trial bookings, one for general enquiries. The booking form collects parent name, email, child name, child age, and preferred class.

The site has six breakpoints from 900px down to 480px, each handling specific layout shifts rather than just collapsing columns.

The mobile nav opens as a full-viewport cream overlay with expandable sections for each dropdown category and a "Book a Free Trial" button pinned at the bottom.

Fluid sizing via clamp() is used throughout, so most transitions between breakpoints are continuous rather than abrupt. The photo marquee on the homepage handles both mouse drag and touch events.

The nav and footer are external HTML fragments injected at runtime via JavaScript; with 23 pages it was the only sensible approach.

Per-class colour theming is handled via a single body class on each page. CSS descendant selectors do the rest; accent colours, tint surfaces, hover states, and borders all update from one class switch. Adding a new class tier in future means adding one body class and one block of overrides, nothing else.

Scroll reveal uses an IntersectionObserver with a progressive enhancement approach; a js-loaded class is added to the HTML element immediately, and CSS only applies the hidden initial state when that class exists. If JavaScript is off, everything is visible. Transitions are also disabled entirely for users who have prefers-reduced-motion set.

PageSpeed Insights scores, mobile, comparing the old site to the redesign.

The site is launching in 2025 and will replace the old presence entirely; becoming the primary public face of Drama Geeks and the first thing parents see when they search for the school.