Tadjh Brooks Smiling

TadjhBrooks

Software Engineer

>
Projects
>
Curtis Mayfield Redesign
Curtis Mayfield Redesign
Curtis Mayfield Redesign Icon
Published on
Categories
Full-Stack
Portfolio
Graphic Design
Skills
Next.js
React
Typescript
Sanity CMS
GROQ
Illustrator
After Effects

Curtis Mayfield Redesign

A modern redesign for a legendary GRAMMY Award Winning R&B and Soul musician Curtis Mayfield.

0hours
0lines
0commits

Highlights

  • Redesigned entire website portfolio from the ground up with Next.js.
  • Utilized React Server Components to query the content api and cache the resulting pages, with client-side re-hydration for interactive pages.
  • Leveraged GROQ, a GraphQL-like query language, to request page content from a heavily modified content management system.
  • Extended Sanity CMS to manage & create many documents, objects and media types within the customized CMS.
  • Designed and created a JSON-based page loading animation using LottieJS & Adobe After Effects.

Goals

One the of main goals with the redesign was bringing Curtis Mayfield mechandise to the forefront, instead of it being an afterthought. I designed an eye-popping carousel with Framer Motion. Each item in the carousel links externally to Curtis Mayfield’s mechandise distributer Rhino.

A responsive carousel built with accessibility in mind.

Constraints

A major constraint of the re-design was keeping all of the current website content intact while presenting said content in new and interactive ways. The Albums page is stellar example of how a good design, not only can make pages load blazingly fast, but also make an entire website a joy to browse.

CurtisMayfield.com music archive page before

Before

CurtisMayfield.com music archive page after

After

The music archive page now features gorgeous images and better utilizes the screen real-estate across all devices.
CurtisMayfield.com music interior page before

Before

CurtisMayfield.com music interior page after

After

The album interior page went from dozens of iframes per page, to a single Spoitfy lazy-loaded embed, taking the page speed from dozens of seconds to a few milliseconds to load.

The Dream

A long-time dream of the Curtis Mayfield Estate was having an interactive timeline of Curtis’ life. Implementing this feature was one the stretch-goals for this project, but I found the time to create something we were all extremely proud of.

A rich click-thru timeline of Curtis’ life and legendary career.

Lessons

This project really tested my abilities, from developing on the bleeding edge of Next.js during the launch of React Server Components, to content management schema design and optimization. Be it image optimization, animaton optimization, database query optimization or server caching optimization, this was a truly full-stack development project.

Smooth 60 fps animations made with GPU accelerated CSS and highly performant Javascript.
Go to Top