Overview
An interactive educational platform built around a 6-pillar framework covering LLM foundations, prompt engineering, context windows, MCP, skills, and agentic workflows. The brief uses 25+ custom interactive visualizations to make complex AI concepts tangible and actionable for organizations looking to capture real value from AI.
The Challenge
Most AI rollouts fail because they focus on tools, not workflows. The brief needed to make complex concepts - transformers, attention mechanisms, scaling laws, context degradation - intuitive and actionable for non-technical audiences, bridging the gap between AI theory and practical organizational adoption.
Approach
Built as an Astro 5 static site with React islands powering all interactive visualizations. A scroll-snap landing with IntersectionObserver-driven animations guides users through the content. Includes a live tokenizer (js-tiktoken, o200k_base encoding), context rot simulation, attention matrix visualization, and 20+ more custom interactive components. Motion library handles GPU-accelerated animations. All content is structured in a single JSON data source for maintainability.
Outcome
A cohesive educational product covering the full AI methodology stack - from transformer architecture to agentic workflows - with interactive proof points at every stage. Deployed as a static site for instant loads with zero runtime dependencies.