One-Line Summary: Choose a no-code platform, pick a template, add your AI-generated copy and images, and customize colors and fonts to match your brand.
Prerequisites: Completed Steps 2-4 with all copy and case studies written, visual direction notes from Step 2
Choose Your Platform
You only need one. Here is how to decide:
| If you... | Use | Why |
|---|---|---|
| Want the simplest possible setup | Carrd | One-page sites, dead simple, $19/year for custom domain |
| Want a beautiful multi-page portfolio | Framer | Designer-quality templates, fast, generous free plan |
| Want a blog or CMS alongside your portfolio | Webflow | Most powerful, but steeper learning curve |
Our recommendation for beginners: Start with Framer. It has the best balance of quality templates and ease of use. You can always migrate later.
Step 5a: Pick a Template
Do not start from a blank canvas. Templates exist for a reason.
On Framer:
- Go to framer.com and sign up for a free account
- Click "Templates" and filter by "Portfolio"
- Look for a template with these sections already built: hero, about, projects grid, contact
- Preview 3-5 templates before choosing
On Webflow:
- Go to webflow.com and sign up
- Browse the template marketplace and filter by "Portfolio"
- Look for a clean, minimal template — avoid overly animated ones
On Carrd:
- Go to carrd.co and sign up
- Choose a "Portfolio" or "Profile" starting point
- Since Carrd is single-page, pick a layout with scrolling sections
What to look for in a template:
- Clean typography and generous whitespace
- A project grid or gallery section
- Mobile-responsive layout (test on your phone)
- Sections that match the copy you wrote (hero, about, projects, contact)
- A style that matches your visual direction from Step 2
Step 5b: Add Your Copy
Now take the copy document you built in Steps 2-4 and drop it in section by section:
- Hero section — paste your headline, subheadline, and CTA button text
- About section — paste your medium or long bio
- Services/skills — paste your service cards
- Projects — add your short card descriptions first, then link to full case studies
- Testimonials — add any quotes you have collected, or skip for now
- Contact — paste your contact section copy
- Footer — add your short bio and social links
Pro tip: Do not try to customize the design yet. Get all the text in place first. This lets you see how the content flows and whether the template structure works for your copy.
Step 5c: Add Images
Every portfolio needs visuals. Here is where to get them:
For project images:
- Screenshots of your actual work (best option)
- Mockups using free tools like Smartmockups (smartmockups.com) or shots.so
- Before/after comparisons if your work is visual
For general imagery:
- Unsplash (unsplash.com) — free, high-quality photos
- A professional headshot (even a well-lit phone photo works)
- Use the same image style throughout for consistency
Image sizing guidelines:
| Image Type | Recommended Size | Format |
|---|---|---|
| Hero background | 1920 x 1080 px | JPG, under 500 KB |
| Project thumbnails | 800 x 600 px | JPG or PNG |
| Headshot | 400 x 400 px | JPG |
| Logos or icons | 200 x 200 px | PNG or SVG |
Compress all images before uploading. Use TinyPNG (tinypng.com) or Squoosh (squoosh.app) to reduce file sizes without losing quality.
Step 5d: Customize Your Design
Now make it yours. Pull out the visual direction notes from Step 2:
Colors:
- Set your primary color (usually for headings and CTAs)
- Set your secondary color (for accents and hover states)
- Keep your background white or very light — dark backgrounds are harder to read
- Make sure your text has at least 4.5:1 contrast ratio (use webaim.org/resources/contrastchecker)
Fonts:
- Set your heading font from the AI suggestions in Step 2
- Set your body font — prioritize readability over style
- Use no more than two fonts total
- Set body text to 16-18px minimum
Spacing:
- Add generous padding between sections (80-120px)
- Keep line height at 1.5-1.7 for body text
- Do not crowd elements together — whitespace is your friend
Common mistakes to avoid:
- Too many colors (stick to 2-3 plus black and white)
- Tiny text (nothing under 14px, body text at 16px+)
- Missing hover states on buttons and links
- Inconsistent spacing between sections
- Forgetting to check mobile view
Step 5e: Check Your Mobile Layout
More than half your visitors will see your site on a phone. In your builder:
- Switch to mobile preview mode
- Check that text is readable without zooming
- Verify buttons are large enough to tap (minimum 44px tall)
- Make sure images resize properly
- Test that the navigation menu works on mobile
- Confirm the contact form is usable on a small screen
Fix any mobile issues now. It is much easier to adjust while building than after launch.
Build Checklist
Before moving on, confirm:
- Template selected and all sections in place
- All copy from Steps 2-4 added to the site
- Project images uploaded and properly sized
- Colors and fonts customized to match your brand
- Mobile layout checked and fixed
- All links and buttons work correctly