framer tutorial: building your portfolio website

NEW FRAMER COURSE: 0 TO $11.5K WITH FRAMER (ENROLLMENT CLOSES APR 7TH):https://go.frameruniversity.com/ ____________________________________________________ ✔︎ 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