Marvel FMCG

The Brief

Marvel FMCG needed a polished marketing site that faithfully translated their brand vision from design to browser. The designs were delivered as InDesign files, and the site required custom on-scroll animations throughout, a bespoke accessibility toolbar, and a WordPress build flexible enough for the client to manage ongoing content.

My Role

I was the sole developer on the project, working from InDesign designs provided by the client's designer. I was responsible for interpreting the designs into clean HTML/CSS, building the custom WordPress theme and plugins, implementing the animations, and integrating the accessibility toolbar.

Technical Approach

Working from InDesign rather than a web-native tool like Figma requires careful interpretation — spacing, typography, and colour values aren't always set up with CSS in mind. A core part of the work was translating the designs accurately into a maintainable CSS architecture. Every page was custom-built with no page-builder shortcuts, giving full control over markup quality and animation behaviour.

On-scroll animations were implemented using the Intersection Observer API to trigger CSS transitions as elements enter the viewport. This approach keeps animations smooth and performant without introducing a JavaScript animation library dependency.

The WordPress build uses a fully custom theme with custom navigation menus and bespoke plugins to support the site's specific content requirements, following WordPress template hierarchy best practices throughout.

Key Features

• Pixel-perfect InDesign build — every page custom-built from designer-supplied InDesign files, with no page-builder shortcuts
• On-scroll animations — CSS transitions triggered via Intersection Observer as elements enter the viewport
• Accessibility toolbar — integrated toolbar allowing users to adjust font size and contrast to their needs, aligned with WCAG guidelines
• Custom WordPress theme — bespoke navigation menus, template hierarchy, and content structure
• Custom plugins — WordPress plugins built to support site-specific content requirements

Tech Stack

WordPress · PHP · JavaScript · CSS Animations · Intersection Observer · Custom Plugins