# Build a portfolio website with AI, free to start

> Describe your work and get a portfolio website with project pages, an about page and a contact form, published free on a vibelyagent.com address. Code you own.

Canonical: https://vibely.sh/use-cases/portfolio-website
Last updated: 2026-10-30

Vibely is an AI portfolio website builder: describe your work and it builds a home page of selected projects, a page for each case study, an about page and a contact form, published free on a vibelyagent.com address. It is React and TypeScript you own, so the layout is yours rather than a theme’s, and you can download the code on every plan.

| Platform | Category | Stack | Plans |
| --- | --- | --- | --- |
| Web app | Consumer apps | React, TypeScript, Supabase | [Free to start; database and sign-in from Lite](https://vibely.sh/pricing) |

- Included in the first build: A page per project, in a case-study format you describe
- Yours to keep: Published free on a vibelyagent.com address
- Deploys to a live URL — nothing for your team to install
- React and TypeScript you own, synced to GitHub on Lite, Pro and Business
- An editor for your projects and stored contact messages from Lite
- Free plan, no credit card; custom domain from Lite

## Who this is for

For designers, developers, photographers, artists and students who want a portfolio that looks like their work rather than someone else’s theme. If a few images on a hosted page are enough, a portfolio service will do. The case for building one is owning the layout and the code, and adding the thing a template will not let you, like your own case-study format.

## Start with this prompt

Paste it in and edit the details to match your own. Being specific about the screens and the data is what separates a working app from a mockup.

```text
Build a portfolio website for Maya Chen, a product designer.

Pages: a home page with my name, one line about what I do and a grid of six selected projects; a page for each project with the brief, my process in three steps, the screens and the result; an About page with a short bio and my experience; and a Contact page with a form for name, email and message.

Style: clean and editorial, plenty of white space, one accent colour, mobile-first.

Seed it with six projects.
```

## What the build actually consists of

### The pages people see

A home page with your best work in a grid, a page per project with the brief, the process and the result, an about page and a contact page, in the style you describe and laid out for a phone first.

### An editor for your work

From Lite, projects can be rows in a Supabase database with an editor behind your sign-in, so adding a project or reordering the grid is a minute rather than another prompt, and contact messages are stored for you to read.

### Yours to keep

A normal React and TypeScript app on a free vibelyagent.com address. Download the code on every plan, sync it with your own GitHub repository on Lite, Pro and Business, and connect your own domain from Lite.

Built on: [The Supabase backend](https://vibely.sh/features/database), [One-click publishing](https://vibely.sh/features/publishing), [Code you own](https://vibely.sh/features/code)

## What you get

- A home page with your selected work
- A page per project with the brief, the process and the result
- An about page and a contact form
- A mobile-first layout in the style you describe
- A live URL from the first build

## What to build next

Once the first build lands, these are the prompts people send next.

1. Store the projects in Supabase with an editor only I can open after signing in, where I can add, edit and reorder them.
2. Save contact form messages to the database and list them in the editor.
3. Add a page that filters projects by type: branding, product and web.

## Connectors this build uses

[Supabase](https://vibely.sh/connectors/supabase), [GitHub](https://vibely.sh/connectors/github)

## FAQ

### Can I build a portfolio website for free?

Yes. On the Free plan ($0, 5 free credits a month, no credit card) Vibely builds the pages and publishes them to a free vibelyagent.com address. An editor behind a sign-in and a contact form that stores messages need the Supabase integration, on paid plans from Lite at $10 a month, which also lets you connect your own domain.

### Is it a template?

No. Vibely writes the site from your description, so the layout, the project pages and the type are yours. Ask for a change in the chat, or point at part of the preview and describe what should be different.

### Can I get the source code?

Yes. It is a React and TypeScript app: download it on every plan, or sync it both ways with your own GitHub repository on Lite, Pro and Business and keep working in your own editor.

## Related

- [A link-in-bio page you own](https://vibely.sh/use-cases/link-in-bio) - One page of links, a featured card and a newsletter sign-up, with an editor and subscribers in your own database.
- [A wedding website with RSVPs](https://vibely.sh/use-cases/wedding-website) - The story, the schedule and the travel notes, plus an RSVP with meal choices per guest that you can actually count.
- [A waitlist landing page](https://vibely.sh/use-cases/waitlist-page) - A launch page that collects sign-ups into your own database, with referral positions and an admin export.
- [See every use case](https://vibely.sh/use-cases)
- [Browse app templates](https://vibely.sh/templates)