framer tutorial: building your portfolio website

✔︎ Framer University: https://frameruni.link/yt
✔︎ Create a free Framer account: https://framer.university/free-account

In this Framer tutorial, I'm walking you through building a complete portfolio website from scratch. You'll learn everything from CMS collections to dynamic detail pages - perfect for showcasing your work without getting lost in complexity. Whether you're a designer, developer, or creative, this straightforward guide will help you launch your portfolio the right way.

→ Remix the starter project: https://frameruni.link/portfolio-starter
→ Remix the completed project: https://framer.link/TlCFWx7

→ Emre's Portfolio: https://www.emrekayganaci.com/

→ Beginner Framer tutorials: https://framer.university/starter-kit

00:00 - Introduction & Overview of Portfolio Project
01:10 - Setting Up CMS Collection & Fields
06:34 - Adding Images, Tags, and Banners to CMS
09:15 - Creating Items & Populating CMS Content
11:12 - Displaying Items with Collection Frames
15:25 - Structuring Cards with Grid & Responsive Setup
17:10 - Connecting CMS Fields to Card Variables
18:07 - Adding Filters with Component Variants
23:13 - Switching Between Categories (All, Product Design, Art Direction)
29:22 - Optimizing Responsiveness with Conditions & Toggles
30:24 - Creating Flexible Detail Pages
36:08 - Connecting Dynamic Fields (Title, Description, Tags, Year)
43:02 - Handling Optional Images with Conditional Visibility
45:57 - Using Toggles to Switch Between Images and Videos
49:56 - Creating Index Pages & Navigation Back Button
54:38 - Final Review & Outro

Follow me on:
X: https://twitter.com/learnframer
Instagram: https://instagram.com/framer.university