How to build a portfolio in Framer in a weekend

I built my own portfolio in Framer, and this guide is the plan I’d follow to do it again over a weekend. The steps, interface names and DNS records below come from Framer’s own help pages, as of 18 October 2026. If you’re still choosing a builder, start with Framer vs Webflow for designers or the best website builders for designers.

Before Saturday: write the content first

The editor is not the slow part of a portfolio. Writing is. If your case studies aren’t written, that’s your real deadline, so do this before you open Framer:

• Pick three or four projects you’d be proud to be hired for.
• For each one, write a short summary, your role, the problem, what you did, and the result.
• Export the images you’ll use, at a sensible size.
• Write a short about paragraph and decide where people should contact you.

Keep the site to four pages: home, work, about and contact. You can add more later.

Saturday morning: set up the structure

1. Create a new Framer project. The free plan is enough to build on.
2. Build the desktop layout first. Framer’s own advice is to do this before adding smaller breakpoints.
3. Lay out the home page with a clear one-line description of what you do, three or four featured projects, and one way to get in touch.
4. Set your text styles and colors once and reuse them. It’s much faster than restyling every heading by hand.
5. Turn anything you repeat, like project cards or the navigation, into a component, so a change in one place updates everywhere.

Saturday afternoon: build the case studies in the CMS

A CMS collection lets you write each case study once and show it on a single reusable page. Basic includes 2 collections and 1,000 items, which is plenty.

1. Create a collection for your case studies, with fields such as title, cover image, summary, role and body.
2. Add one item per project.
3. In the Pages panel, choose New CMS Page, select your collection and choose Detail Page.
4. On the canvas, connect text, images and links to the matching fields using CMS variables.
5. Use the item dropdown above the canvas to preview different case studies. Layout changes apply to all of them.
6. Add previous and next links so visitors can move from one case study to the next without going back.

On your work page, show the collection as a list of cards, and link each card to its detail page.

Sunday morning: make it work on a phone

Add a phone breakpoint from the breakpoint bar. New breakpoints start as a copy of your desktop layout, so you only change what breaks: type size, stack direction, spacing, padding or visibility.

Don’t add a breakpoint out of habit. Framer’s guidance is to add one only when the layout starts to fail at a narrower width, and to override only the properties that need to change. Some pages need only desktop and phone.

Then open the site on your actual phone and scroll through every page.

Sunday afternoon: publish and connect your domain

1. Buy your domain from a registrar such as Cloudflare or GoDaddy. Framer doesn’t sell domains in general.
2. In Framer, open Site Settings → Hosting → Domains and choose Connect a domain you own.
3. Enter your domain, then add the DNS records Framer shows you at your registrar. At the time of writing, the records for a root domain are two A records for @ (31.43.160.6 and 31.43.161.6) and a CNAME for www pointing to sites.framer.app. Use the values Framer shows in your dashboard if they differ.
4. Remove any other A or AAAA records on that domain, since they can interfere.
5. Click Publish in the top-right corner. After later edits, the same button says Update.

DNS changes can take up to 48 hours to spread, though they usually finish sooner. A paid plan is needed to use your own domain, and Basic at $10 a month (billed yearly) is the cheapest.

For the full steps, see Framer’s own page on connecting a custom domain.

Before you share it

Run through this short checklist before you send the link to anyone:

• Every page has a clear title and one clear next step.
• Case-study images load quickly and aren’t blurry.
• The contact method works. Send yourself a test message.
• Both yourdomain.com and www.yourdomain.com open your site.
• You’ve read it once on your phone.