Projects

Tony's
Chocolonely

Development of a Node.js‑based application to produce static, animated and highly dynamic templates for integration with Laravel for Tony's new website and chocoshop.

Screenshot of the Tony's Chocolonely website; part of John Kavanagh's development portfolio.

In Brief

Tony's Chocolonely was founded twenty‑one years ago with a clear mission of combating slavery and exploitation in the cocoa industry. Their original website was an extremely simple, non‑responsive, theme‑based WordPress site which was eventually retired in 2017. In its place is a vibrant, custom‑built site befitting and reflecting their colourful chocolate bars and personality.

My Role

This was a project I undertook on a freelance basis, developing from client‑provided wireframes and designs. I produced a small stand‑alone Node.js application using SCSS (for styling) and GSAP (for animations) to create dynamic components and page templates, which were then integrated into their Laravel ecosystem and Jenkins pipelines.

tonyschocolonely.com
  1. HTML5 & Sass
  2. GSAP
  3. ES6
  4. Node.js
  5. Laravel

In Detail

New vs. Old

Although the previous version of the website had served them well, it was showing its age. Dated, non‑responsive, slow to load, and based on a simple WordPress theme, it no longer served Tony's nor their increasing customer base well.

The new version is vibrant, animated, and built on a modern tech stack, flexible enough for significant future growth. This is expected to serve them (and their customers) well for many years to come.

A screenshot of the previous WordPress-based Tony's Chocolonely website homepage from 2017. This was based on a simple theme, was not responsive, and serves as a stark comparison to the website that replaced it.A screenshot of the Tony's Chocolonely website homepage from 2019, at desktop screen size. It has a blue background and a prominent image of their red milk chocolate bar.

A Colourful, Animated Experience

The entire website is designed (and developed) around a three‑panel concept with 'Our Mission' to the left in red, the e‑commerce 'chocoshop' to the right (in white), and the main homepage in blue. You can see these colours peeking along the left and rightmost edges of each screen. Page transitions here were important as they offer the impression of moving laterally left and right through and into these different areas of the site, often combined with large, arrow‑based, click‑through buttons.

Aside from the page transitions themselves, animation (using GSAP) ensured that the website felt engaging, using different interactions to trigger movement, including scrolling and mouse events.

The Chocoshop

Arguably the most important part of any e‑commerce website (although in the case of this project, messaging was equally as important), the PLP and PDPs are styled against a white background, allowing the bright colours of their product packaging to shine through.

PLPs feature a unique product spinner at the top, followed by a more conventional product grid and filters, alongside the ability to add items to basket directly from the PLP.

A screenshot of the Tony's Chocolonely Product Listing page at desktop screen size, showing a bar selector spinner and a grid of products below.A screenshot of the Tony's Chocolonely Product Listing page at mobile screen size, showing a bar selector spinner at the top of the screen, with a grid of products below.

Products in Detail

The PDPs ‑ again ‑ are responsively optimised, displaying a carousel of product imagery, bar size and other product options whilst ensuring that the brand's powerful messaging comes through.

A screenshot of the Tony's Chocolonely Product Details page at desktop screen size, showing a carousel of product imagery, price, add to basket buttons, and descriptions about the chocolate bar.A screenshot of the Tony's Chocolonely Product Details page at mobile screen size, showing a carousel of product imagery, price, add to basket buttons, and descriptions about the chocolate bar.

Fun Alongside a Serious Message

The 'Our Mission' page offers visitors an in‑depth insight into the company's unique mission and impact. This is a serious and heavy‑hitting topic, balanced against the brand's playful and fun character. This messaging is further enhanced by the use of choice stop‑frame animation sequences (achieved using JavaScript) to add interest to the page.

All projects Get in touch

See what’s
possible.

This is just a snapshot of how I work: clean builds, precise code, and clear results. If you’d like the same to bring your project to life. Get in touch.

Get in touch