Home › Build Guides › Build a Portfolio Site
Beginner

Build a Portfolio Site

Create a professional portfolio that showcases your work and lands clients

Framer
FramerDesign & Hosting
 Vercel
VercelAlt Hosting

What You'll Build

A polished portfolio website with project case studies, about section, and contact form - live on your custom domain.

  • Professional homepage with your best work
  • Individual project case study pages
  • About section with your story
  • Contact form that sends to your email

Prerequisites

  • A Framer account (check the linked profile for current access and limits)
  • 3-5 project examples with images and descriptions
  • A professional headshot (optional but recommended)

Architecture

Framer handles everything - design, animations, CMS for projects, hosting, and SSL. You design visually, add your projects to the CMS, and publish.

You (design in Framer) → Add projects to CMS → Publish → Custom domain

5 Steps

1Start with a portfolio template 2Apply your branding 3Add your projects to the CMS 4Add a contact form 5Publish on your domain

Plan checks and sources

Plan-specific access matters more than a tool’s “free” label. Read the dated profile linked above, then confirm your seat count, usage, billing basis and required export or publishing feature.

Framer · documentation read 26 October 2026. Free publishing and a custom domain are different requirements. Basic and Pro site prices are $10 and $30/month equivalent with annual billing; annual totals are $120 and $360, calculated. Hosting, editors and AI add-ons need separate checks. Official source.

Webflow · documentation read 26 October 2026. Starter has two pages. Basic is $15/site/month equivalent billed annually, without CMS; Premium is $25 with CMS. Annual totals are $180 and $300, calculated. Workspace seats and ecommerce are separate. Official source.

Make · documentation read 26 October 2026. The Free plan has 1,000 credits/month. Most actions use one credit; some AI actions use more. Credits are not a guarantee of completed workflows. Official source.

Before launch: use a synthetic record, verify permissions and output, test a failed action, and document how to reverse it. A successful checkout preview or API response does not prove a paid order, delivery or confirmed subscription.

1
Framer

Start with a portfolio template

Choose a portfolio template and customize the basics.

  1. Go to framer.com and create a new project
  2. Browse templates and filter by "Portfolio"
  3. Choose one that matches your style (minimal, bold, creative)
  4. The template comes with pre-built pages and CMS - you'll customize everything
Tip: Don't spend hours choosing a template. Pick one in 5 minutes and make it yours. The content matters more than the template.
2
Framer

Apply your branding

Update colors, fonts, and content to match your personal brand.

  1. Go to the Design panel and update your color palette
  2. Choose 1-2 fonts: one for headings, one for body text
  3. Replace the template's placeholder text with your own copy
  4. Update the navigation links and page titles
  5. Add your headshot to the about section
Tip: Use a simple color palette: one accent color + black + white. Restraint looks more professional than complexity.
3
Framer

Add your projects to the CMS

Use Framer's built-in CMS to add project case studies that auto-populate your grid.

  1. Go to the CMS panel in Framer
  2. The template should have a "Projects" collection - add your projects
  3. For each project: add title, description, cover image, tags, and client name
  4. Add 2-3 detail images per project
  5. Write a brief case study for each: the problem, your approach, and the result
  6. The project grid on your homepage auto-updates from the CMS
Tip: Lead with your 3 best projects. Quality beats quantity. One amazing case study converts more clients than 10 mediocre ones.
4
Framer

Add a contact form

Add a contact form so potential clients can reach you.

  1. Add Framer's built-in Form component to your contact section
  2. Add fields: Name, Email, Message, and optionally Budget and Project Type
  3. Set the form to email submissions to your inbox
  4. Style the form to match your site's design
  5. Test the form by submitting a test entry
Tip: Add a "Budget range" dropdown to your form. It pre-qualifies leads and saves you from scope conversations.
5
Framer

Publish on your domain

Publish your portfolio and connect your custom domain.

  1. Set your meta title to "Your Name - Designer/Developer/Creator"
  2. Add a compelling meta description for search results
  3. Set your OG image (Framer can auto-generate one from your homepage)
  4. Click Publish and connect your custom domain (yourname.com)
  5. Share the link on LinkedIn, Twitter, and your email signature
Tip: Your portfolio URL should be your name (firstname-lastname.com). It's a personal brand asset.

Validate before launch

Target outcome: A polished portfolio website with project case studies, about section, and contact form - live on your custom domain. Check the actual workflow, failure and recovery paths before publishing.

Related Guides

Build a Landing Page Beginner · 30-45 min
Start a Newsletter Beginner · 30-45 min

Related Comparisons

Framer vs Webflow →

Need help building?

I help founders set up, connect, and launch their tool stacks. Skip the guesswork.

Work with me →