How to Make a Portfolio Website with Lovable
Building a portfolio site with Lovable is three real stages: describe your work, shape what it generates, then publish it. Here is what actually happens on screen at each one.
Your MissionForge guide lives inside your browser
An overlay appears directly on top of Supabase and Lovable. No tab switching, no re-reading docs.
Copy your Project URL
Find the Project URL field below and click the copy icon. We will use this in Lovable’s environment settings.
Stylized preview. The real guide is interactive, not a screenshot.
Describe your work
Tell Lovable who you are, what you do, and what you want visitors to see. Mention the pages you want, like a homepage, an about section, and a way to contact you, by typing it into the prompt box.
Submit your prompt
Press enter or click the arrow to submit your prompt and let Lovable generate a first draft.
Review the first draft
Give it a minute to build. When it is done, scroll through the generated homepage and look at the header, the sections, and the footer.
Open visual edits
Click the visual edits button, then click directly on any text block to start typing a new version.
Save your text and color changes
Try changing the color of a button too, then click save to lock in each change.
Snag: a vague first prompt gives a generic draft
The more specific you are about your actual field and the pages you want in that first prompt, the closer the draft lands before you start editing.
Apply a theme for a bigger shift
For a change bigger than editing individual text, open the themes menu and pick one that fits, then click apply to use it.
Snag: a change does not land right
If something looks off after an edit, open history and revert to the version before it rather than trying to manually undo it.
Publish your site
Click the publish button in the top right corner, confirm the settings that come up, then click continue.
Get your live link
Copy your published lovable.app link and open it in a new tab to confirm everything looks the way you expect.
Why the first prompt matters more than later edits
Lovable builds its first draft directly from how you describe yourself and your work, so naming your actual field and the pages you want gets you a structure that already fits, rather than a generic layout you have to rework piece by piece afterward.
Visual edits versus themes
Visual edits are for small, specific changes, rewriting a line of text or adjusting one button color, saved one at a time. Themes are for a bigger shift across the whole site in a single click, with history there as a safety net if a theme or edit does not land the way you wanted.
Want to build this for real instead of just reading about it?
Frequently asked questions
What do I actually type into Lovable to start a portfolio site?
Describe who you are, what you do, and what you want a visitor to see first, including the pages you want, like a homepage, an about section, and a way to contact you.
How do I edit text after Lovable generates the site?
Click the visual edits button, then click directly on any text block to rewrite it, and click save to lock the change in.
Can I change the whole look without rewriting every section?
Yes, open the themes menu and pick one that fits, then click apply. It changes the site's look in one step instead of editing each section individually.
What if an edit or theme does not look right?
Open history and revert to the version before that change, rather than trying to manually undo it.
How do I actually publish the site once it is ready?
Click the publish button in the top right corner, confirm the settings that come up, then click continue.
How do I get the live link to share?
After publishing, copy your lovable.app link and open it in a new tab to confirm it is live before you share it.
Do I need any design or coding experience?
No. You describe your work in plain English and use visual edits and themes for adjustments, there is no code involved at any step.
Name your actual field in the first prompt
A specific description of your work and the pages you want produces a closer first draft than a generic request.
Use save after every visual edit
Each text or color change through visual edits needs its own save to lock in, so confirm it before moving to the next edit.
Reach for themes for big changes, visual edits for small ones
Swapping the whole look is a themes job, rewriting one line of text is a visual edits job, matching the tool to the size of the change saves time.
Check the live link before sharing it
Open your published lovable.app link in a new tab and look it over before you send it to anyone.
Why people drop off before they finish
You're not the problem. The format is. Here's what changes when you switch to an interactive mission.
- ✕Pause, rewind, pause again, repeatedly
- ✕The UI has changed since recording
- ✕No feedback when you complete a step
- ✕Lose context every time you switch tabs
- ✓Live overlay, no tab switching ever
- ✓Always current: guides track the real UI
- ✓Instant confirmation at every step
- ✓Full context stays open in your browser
Looking for the next thing to build? Browse every mission and find one that matches what you are trying to ship.
Browse all missions