SAGE
Professional Services Agency Website with Animated D3 Showcase
The Problem Statement
“Professional services agencies and consulting teams struggle to communicate their offering's depth and their team's expertise through standard portfolio templates — the result is digital presences that look like résumés rather than professional propositions. SAGE's website was built to serve the dual purpose of communicating the agency's service portfolio and showcasing the team's identity through an interactive multi-page React SPA, with GSAP-driven animations and a D3 tree visualiser elevating the presentation beyond conventional agency sites.”
Project Objectives
Objective 01
Build a complete multi-page agency website (Home, About, Services, Team, Contact) as a performant React SPA.
Objective 02
Implement GSAP animation choreography for hero sections, timelines, and vision reveals.
Objective 03
Integrate a react-d3-tree interactive org/service hierarchy visualisation as a signature portfolio element.
Objective 04
Deploy a Swiper carousel for team profiles and service highlights with smooth gesture navigation.
Key Implementations
GSAP Timeline & Vision Animations
Hero sections, service reveal timelines, and vision content blocks are choreographed with GSAP ScrollTrigger, creating a scroll-driven narrative that guides visitors through the agency's story.
React D3 Interactive Service Tree
A react-d3-tree component renders the agency's service offerings as an interactive hierarchy tree with click-to-expand nodes, pan-and-zoom navigation, and custom node styling.
Swiper Team & Service Carousels
Team member profiles and service highlight cards are presented in gesture-aware Swiper carousels with smooth slide transitions, responsive breakpoints, and loop mode.
DaisyUI Theme System
A persisted theme preference stored in localStorage switches between light and dark design tokens via DaisyUI's data-theme attribute, providing a cohesive brand-consistent visual identity across all pages.