Interactive Developer Media Kit & Custom Design System
HTML
CSS
Development of a custom, high-impact media kit to replace static PDFs, featuring:
To make a memorable first impression, the hero section locks the user in place using GSAP's ScrollTrigger `pin` feature. As the user scrolls, 5 images are sequentially pulled from off-screen and placed into a calculated, non-overlapping layout.
This required mapping strict X/Y coordinates and solving complex TypeScript errors regarding GSAP's `unknown` array types and dynamic object properties to ensure a buttery-smooth 60fps experience.
Images dynamically scattering from off-screen on scroll, layering behind bold typography.
Grids, drop-shadows, and outlined text create a modern aesthetic adapted for a professional media kit.
Traditional media kits are static PDFs. By moving this to a website, the creator now has a living, breathing portfolio that can be instantly updated, shared via a clean URL, and optimized for mobile viewing.
The rate card, once a static table, is now a CSS grid, and the analytics section utilizes high-contrast data cards instead of boring charts.
