Portfolio Builder — Free HTML Portfolio Maker
A portfolio is a single page that shows who you are, what you do, and what you have built. This builder turns a short form — name, bio, skills, projects and links — into a complete HTML file you can host anywhere. No coding, no account, no watermark.
The live preview updates as you type. The export is one self-contained file with the CSS inline and your photo embedded, so it loads instantly and keeps working even if a third-party service goes down.
Portfolio builder
Your details
PNG, JPEG or WebP up to 2 MB. Cropped to a square and resized to 400 × 400 before embedding, so the exported file stays small.
Separate with commas. Each one becomes a tag in the export. Six to ten reads best.
Projects
No projects yet. Add two or three — a portfolio with real work beats one with only a bio.
Shown as a mailto link in the export.
Affects the exported file only. The preview below uses the site's own colours.
Live preview
Updates as you typeThe exported file uses your chosen theme and your photo. This preview uses the site's colours so the form stays readable.
Where your data goes: nowhere
Your form values are saved in this browser's localStorage so a reload does not lose your work. Your photo is resized on a canvas and embedded straight into the exported file. No server receives any of it. This page loads no third-party fonts, icon libraries or scripts — the only cookies are analytics and advertising, which you control in the consent panel.
How to Build a Portfolio in Four Steps
- Fill in the basics. Name, title and a short bio. Two or three sentences is enough — say what you do, who you do it for, and one concrete result.
- Add two or three projects. A title and one line about what it is and what you did. Depth beats volume; three finished things read better than eight half-described ones.
- Pick your links and theme. Paste your GitHub, LinkedIn, X or personal site. Choose one of four colour themes for the export.
- Download the HTML. You get a single
.htmlfile. Upload it to GitHub Pages, Netlify, Cloudflare Pages, or any web host.
Want to see it before you commit? Click Open in new tab to preview the exact export in a new browser tab, then download when you are happy.
What Makes a Portfolio Actually Work
A portfolio is read in about forty seconds. Most of them fail for the same five reasons, and none of them are about design taste.
- Say what you do in the first line. "Front-end developer specialising in accessible design systems" beats "Passionate creator on a journey". The reader should not have to infer your role.
- Show outcomes, not tools. "Rebuilt the checkout and cut load time from 4.2s to 1.1s" is a project. "Used React" is a skill already listed above it.
- Keep it to three projects. The strongest three. Anything weaker pulls the average down.
- Make contact obvious. One email link, visible without scrolling on desktop.
- Make it fast. A single HTML file with no external fonts or frameworks loads in under a second on mobile data. That is the whole reason this tool exports a static file.
If you are applying for a specific role, change the title and the order of the projects to match. A generic portfolio that fits every job fits none of them particularly well.
What This Builder Actually Does
Every feature below works today. Nothing here is marked "coming soon".
Live preview
The panel on the right redraws on every keystroke, so you see the result before you download anything.
Photo, auto-resized
Upload any photo under 2 MB. It is cropped square, scaled to 400 px and embedded so the export stays a single file.
One-file export
Inline CSS, embedded image, no JavaScript. Upload one file and the portfolio is live.
Four themes
Emerald, Midnight, Sand and Plum. Each is a matched background, surface, accent and text palette, not a single swapped hex.
Nothing uploaded
All processing is local. Your name, bio, photo and links never touch a server.
Work is remembered
Form values persist in localStorage. Close the tab, come back tomorrow, keep editing.
Known limitations
- The layout is fixed. You choose the content and a colour theme; you cannot rearrange sections or add new ones.
- Project images are not supported. Only your profile photo is embedded, to keep the export a single file.
- The exported page is static. There is no contact form, no analytics and no comments — add those at your host if you need them.
- Photos larger than 2 MB are rejected rather than silently downscaled, so you know what happened.
- Everything lives in one browser. Clearing site data erases your saved draft.
Frequently Asked Questions
Is this portfolio builder really free?
Yes. There is no account, no watermark and no paid tier. The tool is a single page of JavaScript that builds an HTML file in your browser, so there is no server cost to pass on to you.
Do I need to know how to code?
No. You type into normal form fields and the preview updates as you go. The exported file is complete HTML that you upload as-is. If you later want to change the colours or layout, you can open the file in any text editor, but it is not required.
What exactly does the exported HTML file contain?
One .html file with all the CSS inline and your photo embedded as base64. No external stylesheets, no font CDN and no JavaScript, so it loads fast and keeps working if a third-party service goes down. Drop it on GitHub Pages, Netlify, Cloudflare Pages, or any static host.
Can I add my own photo and social links?
Yes. Upload a photo up to 2 MB and it is cropped to a square and resized to 400 × 400 pixels before being embedded, which keeps the exported file small. Social links are separate fields for GitHub, LinkedIn, X, a personal website and email. Only the ones you fill in appear in the export.
Is my data saved or uploaded?
Your form values are saved in this browser's localStorage so the page remembers your work if you reload, and they never leave your device. Your photo is resized on a canvas in the browser and embedded directly into the exported file. No server receives any of it. The site does use analytics and advertising cookies, which you control in the consent panel.
Can I edit the portfolio after exporting?
Yes. Reopen this page, your values are still here, change what you need and export again to get a fresh file. The previously downloaded file is not updated automatically, so replace it on your host.
Why does the export use system fonts instead of Google Fonts?
Because a Google Fonts link in your own portfolio sends every visitor's IP address to Google, which has been ruled a GDPR problem in the EU. The export uses a system font stack instead: it renders instantly, works offline and keeps your portfolio free of third-party requests.
Does it work offline?
After the page has loaded once, yes. The editor makes no network requests while you work, and the exported file has no external dependencies at all.
How It Works Under the Hood
The builder is plain JavaScript with no framework. Four browser APIs do the work:
- localStorage keeps your draft between visits. It never leaves the browser and is cleared when you clear site data.
- FileReader reads your photo into memory without uploading it.
- HTML Canvas crops and resizes the photo to 400 × 400 so the embedded base64 stays small.
- Blob and URL.createObjectURL assemble the HTML string into a downloadable file.
All user text is HTML-escaped before it is written into the export, and every social URL is validated to start with https://. That means a stray < in your bio cannot break the page, and a pasted javascript: link cannot become a script in your published portfolio.
Related Design Tools
These pair well with a portfolio: make a matching card, pick a palette, or build the icons first.