Play Smart From The Start

Role: Primary Developer

Collaboration: Development, Design, Marketing, Project / account management

Project summary:

  • Primary / sole developer (via NJI Media) on a custom WordPress theme translated from Figma, built for marketing stakeholders who needed repeatable campaign-style landing patterns without sacrificing brand polish.
  • Implemented ACF-driven modular editing so teams could assemble pages from structured sections while keeping layouts consistent with the bright, high-energy visual system.
  • Led front-end motion design: heavy use of GSAP for timeline-driven animations, including scroll-triggered activations and interaction choreography that supports storytelling rather than “random motion.”
  • Built a vertical cards carousel pattern where cards advance through multiple intentional triggers: clicking the card header and scroll-based triggers, so the same component could feel tactile and guided down the page.
  • Integrated a multi-carousel Swiper setup: one active Swiper instance coordinated with a vertical navigation menu that switches context across multiple horizontal sliders, keeping navigation understandable while avoiding “many carousels fighting each other.”

Play Smart From The Start is a campaign-forward WordPress build where I was the primary and sole developer while at NJI Media. The design language leans on bold color, expressive illustration, and motion as part of the message, so the engineering work centered on a custom theme that could faithfully translate Figma intent into performant, maintainable templates.

Editorially, the site relies on ACF-backed modules so stakeholders can publish landing experiences and iterate messaging without breaking layout discipline. On the front end, GSAP carries much of the activation logic—especially patterns where motion is tied to scroll progress—and I implemented a vertical carousel “cards” treatment that responds to both header clicks and scroll triggers, depending on how the user enters the interaction.

For browsing richer grouped content, I wired up an advanced Swiper composition: a single active swiper workflow paired with a vertical nav that routes users across several horizontal sliders, which keeps the UX coherent while still supporting multiple content lanes.