Abel Zhang Portfolio Site Development

Role: Design Refinement, Interaction Design & Development Platform: Framer Client: Abel Zhang, Brand & Motion Designer

Abel Zhang, a brand and motion designer with client work spanning Netflix, Comcast, Amazon Prime Video, Airbnb, and 3M, needed a portfolio site that matched the caliber of his work. He came to me with an initial design direction, and I took ownership of refining the design, building out the interaction system, and developing the full site in Framer, from smooth scroll-based animations to a fully editable CMS structure and custom Lottie animations.

The result is a fast, motion-forward portfolio that feels as considered as the design and brand work it showcases, while remaining simple for Abel to update on his own.

Create a clean, modern portfolio that puts selected work front and center

Layer in thoughtful motion and interaction without overwhelming the content

Build the site so it's genuinely easy for a non-developer to maintain and update

Ensure the experience holds up equally well on desktop and mobile

Primary pages (deeper design and development investment):

Home — Introduction, reel, and featured work

About — Background, philosophy, and professional experience

Project Details — Individual case study pages for each project

Secondary pages (streamlined implementation):

Projects — Full portfolio overview

Archive — Supporting and earlier work, dating back to 2016

The homepage opens with a full-bleed, autoplaying reel and animated headline treatment ("I keep Brands Moving"), immediately setting the tone before the visitor scrolls into the work. From there, I designed and built:

Smooth, scroll-triggered animations throughout Home, About, and project pages

Custom Lottie animations integrated for lightweight, high-quality motion without heavy video overhead

Hover and micro-interactions on the project grid to make browsing feel tactile rather than static

I structured the work into a Framer CMS collection, so each entry - title, year, category tags, thumbnail video, and case study content pulls dynamically into the homepage grid, the Projects page, and its own Project Details page. This means Abel can add, edit, or reorder projects without touching layout or code.

Project thumbnails and case study pages mix video and image content, with:

Autoplaying, looping background video for project previews

A dedicated reel player on the homepage with manual play control

Optimized, compressed video assets to keep load times fast despite heavy motion content

Every page, from the hero section to the CMS-driven project grid to the client/capability lists, was built to adapt cleanly across desktop and mobile, preserving the pacing of the animations at smaller breakpoints rather than simply scaling them down.

The visual system leans minimal and typography-driven, letting the project work itself supply the color and energy. Within that restraint, I introduced moments of motion-led personality, animated section transitions, subtle hover states, and interaction-based accents, so the site never feels static, even in its quieter sections (Philosophy, Capabilities, Clients).

The finished site gives Abel a portfolio that:

Presents his motion and brand design work with the same craft he brings to client projects

Loads fast and performs smoothly across devices despite being video- and animation-heavy

Can be maintained and updated entirely through Framer's CMS, with no developer dependency going forward