Built with Framer

Brian Athey Portfolio Website | Framer

Nima Zaeimzadeh

Verified

Overview

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.

Objectives

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.
Brian Athey Portfolio - Podcasts

Design Implementation

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.

Homepage Experience

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.
Brian Athey Portfolio - About Page

CMS Architecture

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.

Case Study Pages

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.
Brian Athey Portfolio - Projects

Podcast Experience

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.

Mobile Optimization

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

Booking Flow

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.
Ready to elevate your brand’s storytelling?
Let’s talk! 🚀
Like this project

What the client had to say

I can't say enough about my first experience with Nima. Communication and attention to detail were great. He really brought my vision to life, and worked with me on feedback to make everything perfect. I recommend him completely!

Brian Athey

Nov 6, 2025, Client

Posted Nov 14, 2025

A modern, fully responsive Framer portfolio with advanced animations, dynamic CMS content, and a polished UX built to showcase projects at a professional level.

Likes

1

Views

8

Timeline

Oct 30, 2025 - Nov 6, 2025

HEERO Motors: Electric Vehicle Website Redesign | Framer
HEERO Motors: Electric Vehicle Website Redesign | Framer
Rocketlist: The Ultimate Framer Website | Job-Finding Platform
Mint – Next-Gen Invoice Financing Platform (Framer)
Emerald – Preventive Health Platform (Framer)
Emerald – Preventive Health Platform (Framer)

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc