Tony's
Chocolonely
Front‑end development for Tony's Chocolonely's website and Chocoshop rebuild, using Node.js, Sass, and GSAP to create animated templates for integration into Laravel.
In Detail
New vs. Old
By 2017, Tony's original WordPress website no longer reflected the scale or personality of the brand, and its non‑responsive, slow‑loading front end had become increasingly limiting.
The replacement introduced a far more flexible, animated experience built around Tony's distinctive visual identity, mission‑led content, and growing e‑commerce requirements.
A Colourful, Animated Experience
The website was structured around three distinct areas: mission content to the left in red, the Chocoshop to the right in white, and the main homepage in blue. Large arrow‑based navigation and animated page transitions created the feeling of moving laterally between them.
GSAP animation extended that sense of movement across the wider interface, with scroll and mouse interactions helping the digital experience feel closer to Tony's physical brand world.
The Chocoshop
The Chocoshop balanced product discovery with Tony's wider brand messaging. Product listing and product detail pages used a cleaner white background, allowing the colour and irregular shape of the chocolate bars to carry the visual identity.
Product listing pages combined a distinctive product spinner with a more conventional grid, filtering, and direct add‑to‑basket functionality.
Products in Detail
Product detail pages were responsively designed around product imagery, bar size, purchase options, and brand messaging, keeping the buying journey clear without losing Tony's distinctive campaign‑led tone.
Fun Alongside a Serious Message
The 'Our Mission' page gave visitors a deeper view of Tony's work against exploitation in the cocoa industry. The challenge was to communicate a serious, hard‑hitting message without losing the brand's playful character, using JavaScript‑driven stop‑frame animation to add movement and emphasis.
- "
I worked with John Kavanagh on a high profile, large‑scale project at a digital agency. John was great to work with, solving problems without any input and contributing to the project way beyond what was expected. I'd happily work with him again and would easily recommend his talent to everyone!"
- "
John Kavanagh is one of the most professional developers I have worked with. Add to this a synergy between some of the values which Underwired holds in high regard (perfectionism, creativity in all skillets and future facing) and you have someone I wouldn't hesitate to recommend for front‑end development work."
- "
John Kavanagh is an incredibly talented and efficient developer with great expertise in Gatsby and Contentful. He is incredibly personable and also always willing to share his knowledge. I also appreciated his ability to communicate openly and in a way that allowed me to find a way forward with him.
It was a pleasure to work with John and I would welcome another opportunity to work with him again!"
- "
John Kavanagh is enthusiastic and enjoys getting work completed, he is happy to challenge priorities where he sees there is a quicker ROI to be made from his development. His opinion on how we have developed features has been key to our success this financial year. He is fun to work with, always vocal and the dynamic he brought with PO/UX/UI has driven us to deliver better quality features faster than before."
- "
John Kavanagh is one of the best front‑end developers I've had the pleasure of working with. Incredibly knowledgeable, great attention to detail – he understands design and why it's important to get it right, and he's also very experienced coding for accessibility. Always professional but with a great sense of fun, John would be an asset to any team and project."
