Sparking the Cannon with Next.js

Build and animate the website for Stephanie Cannon, a professional Voice-over Artist.

Can I see it?

Sure, it's at

The code is in my public Github repository.

I've started writing about this project on my blog.

How much did you do?

Everything! Except the wonderful illustration. This includes:

  • 💻 Building the site in Next.js
  • 🎨 Designing the layouts with Figma
  • 🚀 Animating the brand artwork in GSAP
  • 📝 Writing the SCSS

What are the interesting parts?

Definitely the various bespoke playlists and audio players. Note to self: write a case study on those. The animations are also pretty cute and the brand colour palette is delicious.

What needs improving?

  • Documentation 😥 It really should include JSDoc and SassDoc. The code is well structured but will be tricky to maintain without notes.
  • Accessibility 😥 It's pretty limited. Areas like color contrast and focus states need further consideration.
See Project
0.07g of CO2/view
Website Carbon

Cleaner than 94% of pages tested


Thanks for your message
I'll be in touch soon :)