✔︎ 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
