Case Studies

Red
Central

Sole developer for Red Central's bold, medialed Gatsby and Contentful website, translating detailed creative direction into a responsive showcase for the studio's work.

Screenshot of the Red Central website; part of John Kavanagh's selected project work.

In Brief

Red Central is a creative agency specialising in entertainment brand licensing, with work for clients including Sony Pictures and Universal across properties such as Breaking Bad and Jurassic World. The studio needed a website that reflected the quality of its creative work, explained its services, and gave the team control over a bold, imageled online presence.

My Role

Working with designer Mike Etheridge after the branding, strategy, and page designs had been agreed with the client, I was responsible for the complete technical implementation of the website. That covered the Gatsby architecture, responsive front end, Contentful integration, animation, image handling, and deployment setup.

Technologies

redcentral.co.uk
  1. React
  2. TypeScript
  3. HTML5 & SCSS
  4. Gatsby & GraphQL
  5. Contentful
  6. AWS & CI
Illustrations from the Breaking Bad 10th Anniversary pack - Fleetwood Bounder with smoke coming from the roof: by Red Central.

In Detail

The designs were bold, imageled, and detailheavy, so the implementation required careful frontend judgement throughout. The work demanded close attention to layout, responsive behaviour, animation timing, and the handling of large visual assets.

I built the site with Gatsby, React, TypeScript, GraphQL, SCSS, and Contentful. Contentful gave Red Central direct control over site content and project pages, whilst Gatsby provided a fast, static frontend wellsuited to an imageheavy portfolio. CSS Grid and responsive imageloading techniques helped preserve the visual quality of the studio's work without making the experience feel heavy.

Image displaying the wireframes used in developing the Red Central website.

Homepage

The homepage created an immediate, highimpact introduction to Red Central's work and personality. Sequenced CSS animations brought the hero content into view before moving through stylised agency messaging, including 'Game Changing Creative' and 'The Pop Culture Geeks', followed immediately by the first examples of the studio's work.

Screenshot of the Red Central website homepage, desktop screen size.Screenshot of the Red Central website homepage, mobile screen size.

Services

Red Central's services needed enough explanation for new visitors without losing the site's visual energy. An animated carousel paired service messaging with recognisable project imagery, allowing the studio to explain its offer whilst keeping the experience strongly imageled.

Screenshot of the Red Central website Services Carousel featuring Angry Birds characters, desktop screen size.Screenshot of the Red Central website showing a featured 'glitch text' title and their clients and Locations panels, mobile screen size.

Life at Red

The Life at Red page gave the studio a more informal space to present its culture and personality. Its hero imagery was editable through Contentful, allowing the team to refresh the page without developer involvement.

Screenshot of the Red Central website Life at Red page, desktop screen size.Screenshot of the Red Central website Life at Red page, tablet screen size.

Work List

The Work page was built around large, imageled project entries, making performance particularly important. Careful image optimisation and staggered fadeup loading kept browsing smooth whilst preserving the visual impact of the studio's work.

Screenshot of the Red Central website Work page featuring Stranger Things and Major League Soccer, desktop screen size.
Screenshot of the Red Central website Work page featuring Stranger Things, Major League Soccer, and Wizarding World, tablet screen size.Screenshot of the Red Central website Work page featuring Stranger Things, Major League Soccer, and Wizarding World, mobile screen size.

Project Pages

Project pages extended the site's bold, imageled visual language into a reusable structure for individual pieces of work. Red Central could combine project imagery and copy in different configurations through Contentful, giving each project its own character whilst retaining a consistent underlying system.

Screenshot of the Red Central website Stranger Things project page, desktop screen size.Screenshot of the Red Central website Stranger Things third season project page, mobile screen size.
Screenshot of the Red Central website Jurassic World project page, tablet screen size.Screenshot of the Red Central website Breaking Bad 10th Anniversary project page, tablet screen size.

Contact Page

Red Central chose direct email addresses and telephone numbers instead of a generic contact form. That left room for a looping office video, giving the page more personality whilst keeping the route to enquiry simple.

Screenshot of the Red Central website Contact Us page featuring looping video, desktop screen size.Screenshot of the Red Central website Contact Us page featuring looping video, tablet screen size.

Have a similar
platform challenge?

I help teams make difficult React, Next.js, migration, performance, and technical SEO work clearer, safer, and easier to deliver.