Zack Kalesar Portfolio
A high-impact personal brand portfolio for a professional football player, highlighting stats, media gallery, and career milestones.
Project Info
Year
2024
Platform
Jamstack
Industry
Sports / Personal Brand
Services
- Brand Strategy
- Motion Design
- Web Development
Tech Stack
100%
Lighthouse Score
0.2s
Load Time
The Challenge
Professional football is fast, aggressive, and dynamic—but Zack's previous portfolio was a static resume that failed to capture his on-field persona. He needed a digital presence that would impress scouts, sponsors, and fans alike. The technical challenge was to deliver cinema-quality highlight reels and high-resolution imagery without causing buffering or slow layout shifts (CLS), which would kill the "premium" feel. The site needed to act as a pitch deck that explains his career trajectory in seconds.
Our Solution
We treated the website as a motion picture. Using GSAP (GreenSock Animation Platform) and Next.js, we created a scroll-hijacking experience where user input drives the narrative. As you scroll, Zack's stats (goals, assists, speed) explode onto the screen using physics-based animations. We utilized a custom video player with adaptive bitrates to serve 4K highlights smoothly on any connection. The design language uses bold, monumental typography and kinetic layout shifts to mirror the movement of a football match, ensuring every pixel screams "performance".
Key Features
- Dynamic Stat Visualizers
- Video Highlight Reel integration
- Press & Media Gallery
- Interactive Timeline
The Result
The site became a viral sensation in the sports management community. It played a pivotal role in Zack securing a major sponsorship deal with Nike, as the brand team was impressed by the "digital maturity" of his personal brand. Profile views increased by 800% in launch week, and the site maintained a perfect 100 Performance score on Lighthouse despite the heavy media elements.