Make a portfolio website from your resume with AI

What you need

• A computer
• A free Claude account (claude.ai) or a free ChatGPT account
• A resume PDF, or notes on your experience and projects
• One photo file if you want a profile picture (optional)
• A free Netlify account for the link if you add a photo (you can sign up with a Google account)

What you get

A one-page site with an intro, experience, projects, skills, and contact details. You send one link to interviewers or clients. The example below is a fictional person, Alex Kim.

Step by step

1. 1

   Keep only what is okay to make public

   Check your resume PDF before uploading it. Remove or black out personal details such as phone number, home address, date of birth, and any ID numbers. A portfolio can become a page that anyone with the link can see, and later even people who find it in search.

   You know it worked whenSkim the file once to make sure it has no personal contact details other than your email.

   TipAlso check whether it is okay to make public any confidential material from past employers, client names, and revenue figures. If you are unsure, leave it out.

2. 2

   Go to claude.ai and attach your resume

   Sign in to claude.ai. Click the paperclip (attach) button on the left of the chat box and pick your resume PDF. In ChatGPT, go to chatgpt.com and attach it the same way.

   You know it worked whenYou are ready when the file name appears as a small chip above the chat box.

3. 3

   Paste the prompt and send it

   With the file attached, paste the prompt below and send it.

   Prompt to pasteCopy prompt

   Using the attached resume, make a one-page website that introduces me. Put everything in a single file.
   
   - Order: one-line intro, experience, 3 projects, skills, contact
   - Don't style projects as cards. Keep them plain: "title, one-line description, result number"
   - Only two colors and one font. No animations
   - Design for a phone screen first
   - For contact, include only my email address. Never include a phone number, home address, or date of birth
   - Don't invent anything that is not in the resume. If something is missing, leave a blank that says "Add your ___ here"
   - All text in English

   Make it yours

   • Change "3 projects" to fit your situation. With a short work history, "2 class assignments or personal projects" works well.
   • In "only two colors" you can name the colors, such as "navy and white".
   • If you need another language version, add "Add a button to switch to another language" at the end.

   You know it worked whenIn Claude, an about-me page filled with your resume content appears in the result panel on the right.

   TipIf ChatGPT only shows a long block of code, say "Show it so I can see it right away (use Canvas)."

4. 4

   Read it to check the facts

   Read the result panel from top to bottom and check that dates, company names, and numbers match your resume. The AI may have made up something that looks plausible.

   You know it worked whenIf every number and name matches your resume, it passes.

   TipFor places left blank with "Add your ___ here", tell the AI the information and it will fill them in.

5. 5

   Change it by asking

   Change the wording and look one thing at a time.

   TipTry things like "Shorten each job description to two lines", "Sort projects newest first", "Make the intro sound more plain", or "Make the accent color dark green".

6. 6

   Decide whether to add a photo

   A profile photo is not required. To go without one, skip to the next step. To add one, say "Put the photo profile.jpg at the top as a circle", then save the finished code as index.html and put it in the same folder as the photo.

   TipWith a photo, you have to upload with Netlify Drop instead of Claude Publish. The steps for making the folder, saving, and dragging it in are in "Share it as a link" below.

7. 7

   Turn it into a link and send it

   Without a photo, click Publish at the top right of the result panel to make a link. With a photo, upload the whole folder to Netlify Drop. For the full steps, see "Share it as a link" below.

   You know it worked whenIf the page opens on your phone using mobile data (with Wi-Fi off), it works.

8. 8

   Add the link to applications and emails

   Paste the link into your email signature, the end of your cover letter, and your LinkedIn profile. If the address is long, you can rename the site in Claude or Netlify to shorten it.

If you get stuck

Try next

• Connecting a domain you bought (for example alexkim.com) works well on a business card. Connect it in the Domain menu of your Netlify site settings.
• If you are a developer, you can grow it into a multi-page site with a framework like Next.js using Claude Code. One page is plenty to start.

Features used here

More recipes