This is the build order we use for a Framer portfolio: plan the structure, create the pages, set up a CMS collection for your projects, build one case study template that generates every project page, handle images and performance, cover the SEO basics, check each breakpoint, then publish. Follow it in sequence and you will avoid the usual outcome, which is twelve beautifully designed but individually hand made project pages that nobody wants to update.

Step 1: Plan the structure before you open Framer

Write the page list first. For most portfolios that is a home page, a projects index, a case study template, an about page and a contact page. Then write the section order for the home page and, more importantly, the section order for a case study: context, the problem, what you did, what shipped, and the outcome you can honestly describe. Every case study should follow the same skeleton, because that is what makes the CMS approach work later.

Step 2: Create the pages

In the Pages tab, add your static pages and name them so the URL paths are clean and hyphenated. Keep the navigation to four or five items. Build the home page last if you can, since it is easier to write once the case studies exist and you know which ones you are proud of.

Step 3: Set up a CMS collection for your projects

Create a collection called Projects. Framer collections support a range of field types, including plain text, formatted text, image, file, link, date, number, boolean, colour, enum options, references to other collections, and an array field that produces a gallery. A workable set for a portfolio is:

• Title and a short subtitle

• Slug, which becomes the URL of the project page

• Client and year

• Thumbnail image for the index, plus a hero image

• Formatted text for the body of the case study

• A gallery field for additional shots

• A link field for the live site

• A reference or option field for services, so you can filter or group projects

• A toggle for featured projects

Add two or three real projects now. Designing against real content stops you from building a layout that only works with a perfect 40 character title.

Step 4: Build the case study detail page

Go to the Pages tab, click the plus icon, choose New CMS Page, select your Projects collection and pick the detail page option. Framer combines one reusable layout with the content of the collection and generates a page for every item automatically. You are designing one template, not ten pages.

Connect each element to its field, then use conditional visibility for anything optional. Select the element, set a variable on its visible property, choose the field and set the condition to is set. That way a project without a live link simply does not render the button, instead of rendering an empty one. Framer's own lesson on CMS pages and dynamic content walks through the same flow if you want to follow along visually.

Step 5: Wire the index to the template

On your projects page, add a collection list bound to Projects, design one card and let the list repeat it. Point the card link at the detail page so each card opens its own project. Add a featured list on the home page using the same collection, filtered to your toggle field, and limit it to three or four items.

Step 6: Get images and video right

This is where most portfolios lose their speed. Framer optimises images automatically: upload the original, leave resolution on Auto, and Framer converts most JPEG, PNG, WebP and GIF files to AVIF with a WebP fallback, generates srcset and sizes so browsers pick the right file, and adds lazy loading to images sitting below roughly 1000px on the page.

For video, Framer's performance guidance is to embed from YouTube or Vimeo rather than hosting large files directly, avoid autoplay, keep blur values low, use shadows sparingly, and prefer appear effects over scroll animations for anything near the top of the page. Custom fonts should be limited, and scripts should be deferred or placed at the end of the body.

Step 7: Cover the SEO basics

Set a page title and description for every static page. On the case study template, build them from CMS variables so each project page gets its own metadata, for example a title using the project's own title field. Framer generates sitemap.xml and robots.txt automatically and gives you redirects and indexing controls in settings, which are worth reading through in the SEO features guide. Write real alt text on project images. If you want structured data, Framer supports JSON-LD in the head, and CMS variables can be used inside it so each project page carries its own markup.

Step 8: Check every breakpoint

Work through desktop, tablet and phone on the template, not just the home page, and test with your longest title and your tallest image. Framer cascades changes from your primary layout down to smaller breakpoints, so fix the base layout first and then correct the exceptions.

Step 9: Publish, then keep publishing

Publish to the free Framer staging address first, click through every project page as a visitor would, then connect your custom domain and publish live. Framer keeps version history, so you can restore an earlier version if something goes wrong. If some work is under NDA, Framer Academy covers password protection, and there are marketplace plugins that gate individual pages.

After that, adding a project is a CMS entry rather than a design job, which is the entire point of building it this way. If you would rather have a senior team build and maintain it with you, book a discovery call and we can look at your project list together.