How to Create a Web Portfolio with AI

Before designing, decide on your portfolio’s structure. Most portfolios only need these sections:

• Home / Hero: your name, your specialty in one sentence, and a contact button.
• Projects: 3 to 6 selected works, with image, title and brief description.
• About me: a paragraph about who you are, what you do and for whom.
• Contact: email, form or links to LinkedIn and social media.

Optional sections depending on your profile:

• Services: if you offer freelance services and want to make clear what you do.
• Testimonials: if you have clients who have given you positive feedback.
• Blog: only if you publish regularly (don’t add it if it will stay empty).

Use Claude to organize your ideas before designing. Open claude.ai and write something like:

I am [describe your profession or specialty].
I have these projects to show: [list the projects with one sentence each].
My goal with the portfolio is [get freelance work / apply for jobs / show my work to clients].

Which of these projects would you recommend including and in what order? What sections do I need?

Claude will help you prioritize and decide what to leave out.

Framer is the best AI portfolio builder in 2026 for quality visual results without knowing design. The free plan lets you publish and see how it looks; you only need Framer Basic ($10/mo) if you want a custom domain. Confirm current plans at framer.com/pricing before subscribing.

Steps to create your portfolio with Framer AI:

1. Go to framer.com and create an account with your email or Google.
2. Click “New Project” and select “AI” in the creation panel.
3. Describe your portfolio in the AI chat. Be specific:

Create a minimal portfolio for a UX designer / photographer / web developer / [your specialty].
I need sections for: Hero (name + specialty), Projects (6 cards with image and description),
About Me, and Contact.
Color palette: [e.g.: dark background with purple and white accents / light minimal with black text].
Typography: modern and clean.

4. Framer AI generates the complete design in seconds. Review the result.
5. To change any element, click on it and edit: change the text, drag the image, adjust the color in the right panel.
6. To add your real projects: click on a project card, replace the sample image with yours (drag or click the image icon) and replace the sample text with your project’s title and description.

Tip: if the first generated design doesn’t convince you, write something more specific to Framer’s AI or regenerate with different instructions. You can also explore portfolio templates in the gallery and edit them with AI.

Portfolio copy (the hero, the about me, project descriptions) is what turns visitors into contacts. AI can generate them in minutes if you give it enough context.

Hero text (your intro in one sentence):

I need a presentation text for my web portfolio's hero section.
I am [describe your specialty] and I work with [describe your client type or industry].
What sets me apart is [something specific that makes you unique: style, approach, results].

Write 3 different options, each in a maximum of 15 words, in [Spanish / English].
Tone: [professional and direct / creative and personal / minimalist].

Project description:

Describe this project for my portfolio:
Name: [project name]
What I did: [briefly describe the work you did]
For whom: [client, company or type of user]
Result or impact: [if you have any concrete data or results]

Write a 2 to 3 sentence description in [Spanish / English]. Tone: concise and results-oriented.

“About me” section:

Write an "About me" paragraph for my web portfolio.
I am [describe who you are and what you do].
My experience includes: [briefly mention the most relevant projects or companies].
I work with [describe your ideal client or the type of projects you're looking for].

Maximum 80 words, in [Spanish / English]. Tone: warm but professional.

Review the generated copy and personalize with a detail or phrase that is uniquely yours: a special project, a work philosophy, something AI couldn’t have invented.

With the design and copy ready, publishing on Framer takes less than 5 minutes.

Option A: publish for free (.framer.app subdomain):

1. In Framer, click the “Publish” button (top right).
2. Framer assigns you a URL like yourname.framer.app.
3. That’s it: it’s published. You can share that link right away.

The free plan shows Framer’s branding on your site. For personal projects or when you’re exploring, this is fine.

Option B: publish with a custom domain (Framer Basic, $10/mo):

1. Subscribe to the Basic plan at framer.com/pricing (confirm the current price before subscribing).
2. Buy a domain if you don’t have one: you can do this at Namecheap, Google Domains or Cloudflare Registrar (approximately $10 to $15 per year; price varies).
3. In Framer, go to “Publish” > “Custom Domain” and follow the instructions to connect your domain with the DNS records Framer provides.
4. Click “Publish” with your domain connected.

To learn how to connect a custom domain step by step, see the tutorial Connect Your Own Domain to Your Site.

Checklist before sharing your portfolio:

• Your name and specialty in the hero are clear
• Project images load correctly (nothing broken)
• Contact link works (email or form)
• Portfolio looks good on mobile (activate the mobile view in Framer to verify)
• You removed the placeholder text Framer generates by default

Problem	Fix
Framer AI generates a design I don’t like	Give it more specific instructions in the chat: visual style, color palette, reference to a site you like. You can also choose a portfolio template from its gallery and edit it
Project images look pixelated	Upload high-resolution images (minimum 1200 px wide). Framer optimizes them when publishing
The domain doesn’t connect correctly	Wait 24 to 48 hours: DNS changes take time to propagate. If it still doesn’t work after that, check that the DNS records (CNAME or A record) match exactly what Framer specifies
I don’t know what projects to include because I’m just starting	Create 2 to 3 practice or conceptual projects in your field: a redesign of a known app, a data analysis with public data, a fictional website for a business. Present it as a “practice project” with context
The hero text sounds generic even though AI generated it	Ask Claude to rewrite it including a specific detail about you: the industry you’ve worked in most, the type of result you deliver, or something concrete that sets you apart
I want more technical control than Framer provides	Use Claude Code to create the portfolio as a static site and deploy it to Vercel (see the tutorial Publish Your Website for Free on Vercel)