Portfolio Website Generator

How to make a portfolio website from your resume

1. Import your resume. Drop a PDF or Word file on the box, or press Paste resume text instead. If you made your resume in our resume builder in this browser, it shows up as a one-click choice too.
2. Read the import note. A blue note says what was filled from your resume and what was not found. Nothing is made up: a section your resume does not have stays empty, and empty sections are left off the site.
3. Edit the boxes. About you holds your name, headline, location, email and the About text. Each section (Experience, Projects, Skills, Education and any others) opens into one box per entry. Add, delete, move up, move down, rename or hide any of them.
4. Add what a resume cannot show. In each project, add a picture (a screenshot, a photo of the work or a cover), the result in one line and the tools you used. Add "The problem it solved" and the project gets its own case study on the page. In About you, add up to four highlights: numbers you can back up, like "40 stores use my weekly report".
5. Pick a design. After the import you see your own site in each design: use the arrows or the list, and switch between Desktop and Phone. Minimal, Cards, Night, Showcase, Studio and Bento put your photo in a big hero and show projects as cards; Clean, Editorial, Split, Midnight and Mono are quieter one-column pages. Then pick a link color, a photo and an optional availability badge. Check Desktop and Phone above the live preview; recruiters often open a portfolio link on a mobile phone first.
6. Fix weak lines first. If a line starts with "Responsible for" or leans on a buzzword like "team player", a yellow box says so. Fix weak lines first sends your text to the resume builder, where AI rewrites those lines and you approve each change; back here, Bring in the fixed lines puts them into your site without touching the design or pictures.
7. Download and publish. Press Download index.html, fix anything in the "Before you publish" list, then follow the GitHub Pages or Netlify Drop steps above.

What the import fills, and what you check by hand

We tested it on 3 October 2026 with a short plain-text resume for a data analyst named Priya: her name on line one, "Data Analyst | SQL, Python, Tableau" on line two, a line with her city, email and phone, a LinkedIn and GitHub line, then Summary, Experience (two jobs), Projects, Education, Skills (two labeled groups), Certifications and Languages headings.

The import filled her name, that headline, the email, both links, the location, the phone (kept off the site until she switches it on), the summary as her About text, both jobs with their dates and bullet points, the project, the school, six skills in two groups, one certificate and two languages. One thing needed a hand fix: her first job line read "Data Analyst, Brightline Retail — Pune", and the whole of "Data Analyst, Brightline Retail" landed in the job title box with the company box empty. Read each job once after an import and move words to the right box where needed.

Some things a resume parser cannot know: the link to a live project, the code behind it, or a photo. Add those in the Projects and Design boxes. References are left out on purpose, because a public web page should not carry other people's phone numbers and emails.

The eleven designs, and what is inside the file

Every design uses the same clean page structure: a header with your name, headline and links, a short menu to each section, then one section per heading with real headings, lists and links. Screen readers and search engines read the same order you see. Our tests check every design for contrast: body text, muted text and link color all reach at least 4.5 to 1 against the page and against its cards, the WCAG AA level for normal text, whatever link color you pick.

• Minimal is laid out like the best resume-to-website builder we tested in October 2026: a top bar with your name and the sections, a grey hero with your photo, your name in very large type, your headline, About, place and email, and buttons for email and each link. Each section has its title on the left, and the title stays in view while you scroll its content. Jobs sit on a timeline with the dates on the right, projects are cards with a wide picture, the result and the tools, and languages sit beside your skills.
• Cards keeps the same parts and puts each one on a white card with soft corners: the hero, every job, every project, every skill group.
• Night is a dark navy page with large section titles and a thin rule beside them, projects two to a row.
• Showcase opens with your name in large type, your photo beside it, an Email me button and a See my work button. Highlights sit under it as big numbers, projects are cards with a picture, the result and the tools, and a project with a problem and what you did gets a case study further down: the problem, what you did and the result.
• Studio is the same layout on a dark page, with very large type and numbered sections (01 About, 02 Experience), the look of a design studio's site. Case studies alternate picture left and picture right on a wide screen.
• Bento puts everything in rounded tiles: your photo, the intro, each highlight, then one tile per section, with small sections such as Skills and Education side by side.
• Clean is a minimal white page with one column and quiet typography, a modern, professional choice for any field.
• Editorial uses warm paper and serif headings, good for writers, teachers and anyone whose work is words.
• Split keeps your name, photo and links on the left on a wide screen while the work scrolls on the right; on a phone it becomes one column.
• Midnight is a dark page with light text and card-style entries.
• Mono sets everything in monospace (typewriter) type for a plain, technical look.

The downloaded file is standalone: its styles are embedded inside it and it runs no JavaScript. It loads nothing from other sites: Minimal, Cards and Night carry the Geist font inside the file (about 40 KB, free under the SIL Open Font License), and the other designs use the fonts already on the visitor's device. The one script tag it has is a small block of structured data that tells search engines your name, your headline and your profile links. Our example site comes to about 60 KB in Minimal, Cards and Night (most of it the font), about 15 KB in Showcase and about 9 KB in the one-column designs, before pictures. Your photo and project pictures are stored inside the file too, so they are most of its size; the page warns you if the file grows past 1.5 MB, which is slow to open on a phone.

Link preview picture and tab icon

When someone pastes your link into LinkedIn, WhatsApp, Slack or X, those sites show a card with a picture, a title and a line of text. The title and text come from your name, headline and About, which the file already carries. The picture is a separate file, og.png, 1200 by 630 pixels, that this page draws from your design: your name, your headline and your photo (or your initials on your accent color).

Link previews need the picture's full web address, and the page cannot know where your site will live. So open Link preview and tab icon in the editor and type your address: for GitHub Pages that is yourname.github.io, which you know before you publish; on Netlify, publish once, copy the address it gives you, then come back. Download index.html again and upload it with og.png in the same folder. The file then also names that address as its canonical address, which tells search engines which copy is the real one.

The small icon in the browser tab is your initials on your accent color. It is drawn inside index.html, so there is nothing extra to upload for it.

Turn a project into a case study

A card says what a project is. A case study says why it mattered, and it is what a hiring manager reads when they want to know how you think. In the designed layouts, a project gets its own case study section when it has two things: "The problem it solved" and at least one line in "What you did". The card then links to it with Read the case study.

Write the problem as the situation before you started, in one or two sentences a stranger would understand. Write what you did as three or four actions, each starting with a doing word. Put the result in its own box, in one line, and keep it to what you can prove: a time saved, a number of people who use it, a decision it changed. Add a picture of the work if you have one; a screenshot of a dashboard, a photo of a finished space or the cover of a report all work.

What hiring managers look for in a portfolio

What should a portfolio website include?

A hiring manager gives a portfolio a short first look, so put the answers where they look first. One line on who you are and the work you want. Two to four pieces of work, each with the problem, your part, the result and a link someone can open. A way to contact you. Nothing that contradicts your resume.

The work does not have to be code. A developer shows a repository and a live page, a designer shows case studies, a writer shows published pieces, an analyst shows a dashboard with a short note on the decision it changed, and a teacher can show a lesson plan with results. Keep the headline the same as on your profiles; the LinkedIn headline generator helps you write one line that works in both places. If your resume needs work first, start with the resume builder, then come back and import it.

For each project, write three short lines in the Projects box: what it is, what you did, and what changed because of it. Put the strongest project first with Move up. If a project has a live page, put it in "Link to see it"; the project name becomes a link and a "See it" link appears under it.

Why own the file instead of a hosted profile page?

Hosted profile sites can close, and their pages close with them. Read.cv, a popular profile and portfolio site, announced in January 2025 that its team was joining Perplexity and shut down on 16 May 2025; members had to export their pages before then. Bento.me, a link-in-bio portfolio page bought by Linktree, shut down on 13 February 2026. A portfolio that lives in your own index.html keeps working wherever you put it, and moving it to a new host is one upload.

Keep the backup file too (More, then Save backup file). It holds every box you filled in, so you can open it on this page from any computer, change one job, and download a fresh index.html in a minute.

Common portfolio mistakes, and the better version

• Sample text left in. A template's made-up company or lorem ipsum tells a recruiter you did not read your own page. This page starts empty, and if you open the example it lists every example line still in your site before you download.
• A headline that says nothing. "Passionate learner" fits anyone. "Data analyst: sales and stock reporting" tells the reader in one line what you do.
• Every project ever made. Ten small exercises bury the two that matter. Keep two to four, strongest first, and hide or delete the rest.
• Duties instead of results. "Responsible for month-end close" copies a job description. "Closed the books in three days instead of five" shows what changed. The page marks lines like the first and sends them to the resume builder to rewrite before they go public.
• A dead or private link. Open every link on the published site from your phone. A link to a private repository or a deleted page costs more than no link.
• A different story from your resume. Titles and dates that do not match your resume and LinkedIn raise questions. Import from the resume you send out, so they start the same.
• An availability badge left on after you start a job. The badge is off until you switch it on, and its words are yours to change, for example "Open to freelance work".

Frequently Asked Questions