Brian Norris
← All work

Alchemedia Project Website

An advertising agency website built with Nuxt.js and Prismic

Type
Work
Client
Internal
Role
Lead front-end
Year
2019
Stack
Nuxt (static generation)Prismic
A blue-tinted office background with bold black text saying “Hey There.” Smaller white text below reads, “If food is what you do (even part of what you do) you’ve landed in the right spot.”.
A screenshot of the Alchemedia project website

Context

The Alchemedia Project needed a marketing site covering agency messaging, team information, and case studies. As an internal project, it presented a low-risk opportunity to try a headless CMS approach for the first time. We took on the experimentation risk ourselves rather than on a client's time and budget.

Role

Process

  1. 01

    Choosing headless as a learning opportunity

    Internal projects are a good time to experiment with new ways of working. Prismic was a deliberate choice to get hands-on experience with a headless CMS that was designed for content editing in a real production context. The content modeling and API-driven approach were new territory, and working through it on an internal project meant the learning curve didn't come at anyone else's expense.

  2. 02

    The manual data fetching problem

    One of the less glamorous realities of working with Prismic at the time was the amount of manual data fetching required, every content type needed its own fetch logic, which added up to a lot of repetitive, but not quite identical code. It was a real friction point, and one that modern AI tooling would make trivial today. It didn't block the project, but it shaped an appreciation for the value of good SDK abstractions.

  3. 03

    CSS techniques pushed by the design

    Ryan's designs called for visual techniques that were outside my existing toolkit at the time: text-strokes, rotated type, SVG masks, and image masks. Implementing them required digging into CSS capabilities I didn't know existed. That kind of designer-led technical stretch is one of the better ways to expand what you know.

Visuals

A website page highlights Brew City Brand Refresh, featuring beer, fries, and video thumbnails with play buttons. Text describes the brand’s passion. Icons show categories: video, digital, culinary, insights, strategy, and branding.
Screenshot of the Alchemedia Project website
A webpage showcases creative projects, featuring a blue “Slay the Dragon” campaign image, more project thumbnails below, and categories such as “Breakfast, Interrupted” and “Brew City Brand Refresh.”.
Screenshot of the Alchemedia Project website
Mobile webpage with bold text “Hey There,” smaller text about food professionals, a “LET’S TALK” button, and “The Alchemedia Project” logo at the top on a blue and white blurred background.
Screenshot of the Alchemedia Project website
A mobile screen shows a project called “SLAY THE DRAGGIN’” for International Delight, featuring a blue dragon and iced coffee social media promotion by The Alchemeia Project.
Screenshot of the Alchemedia Project website

Outcome

The site launched successfully and served The Alchemedia Project until the agency was absorbed into another company. It's no longer live, but it achieved its goals as both a functioning agency website and a genuine learning exercise.

Next case study Jif That Dish →