Brian Athey Portfolio Website | Framer

👉 Check out the live website here 👈

This project involved transforming Brian Athey’s 2025 portfolio design into a fully functional, responsive, and animation-rich website in Framer. The goal was to deliver a pixel-perfect build that matched the Figma file while enhancing the experience with premium interactions, CMS scalability, and polished performance.

Create a high-end, visually compelling portfolio that reflects Brian’s professional identity, showcases case studies and podcasts effectively, and delivers a smooth UX across all devices. Additional objectives included dynamic content management, custom animations, and a refined dark-themed booking flow.

Every page—Home, Projects, Podcast, About, and 404—was developed pixel-perfectly based on the Figma design. All animations, micro-interactions, and notes inside the file were implemented, including scroll-based effects, structured video frames, and custom button styling.

The homepage features an accurately recreated headline animation, auto-playing case study previews, and a custom draggable testimonials component. Smooth scrolling elevates the overall feel, while project tiles were engineered with video + thumbnail fallbacks for performance and accessibility.

Two CMS collections—Projects and Podcasts—were built with clean, easy-to-edit fields. Visibility conditions ensure each project or episode dynamically adjusts its layout depending on the content provided, preventing empty sections and improving scalability.

Dedicated case study pages include a custom navbar, a replicated video module matching the homepage structure, and a content layout following the provided Figma design. Image zoom interactions were removed as requested for a cleaner presentation.

Podcast cards were optimized with fixed heights to prevent layout shifting. Clicking a card opens an on-site video overlay, keeping users on the website and improving engagement compared to redirecting to YouTube.

All pages were refined for mobile with reduced padding, fixed navigation behavior, responsive animations, and a fully corrected mobile menu experience.

A custom dark-mode Calendly embed was created using HTML to match the site’s aesthetic and provide a seamless booking experience across all pages.