What an AI portfolio builder does, and what it can't know
Before choosing a theme, write a brief that names your role, the work you want to show, and who will read it. You describe your field, your goals and the work you want to show; the tool returns a laid-out site with starter copy that you edit and then publish, without writing code.
That's a genuine shortcut for structure. What no builder can supply is the substance: which project deserves top billing, what you personally did, and what changed because of it. Résumé advice from a university career office makes a related point: AI can help you brainstorm and edit what you already have, but it shouldn't be the primary author, partly because its output is likely to be generic.
So the order matters. Write down your facts first, then let AI handle the design.
Picking a route to the page
There's more than one sensible way to get there. A hosted builder gives you an editor and a place to publish in one tool; expect to rewrite most of the generated copy. A template works well when your projects fit its shape. Coding the page by hand gives you full control and costs the most time.
The route this article uses is a fourth one: asking a general AI chat for a single HTML file. HTML is the format web pages are written in, and a self-contained file keeps the text, layout and styling together, so you can open it in a browser and check it before anyone else sees it. The advantage is that you write the rules, including "don't invent anything."
The sample: one career changer, three projects
The example page belongs to Jordan Avery, a fictional retail operations lead moving into data analysis. The name, the store, the timeline and every number are invented for illustration.
Two choices in it are worth borrowing. Each project card runs question, then Jordan's part, then the result, so someone who reads only the first line still knows what problem was on the table. And the tools table ties each tool to the project where it was used, which says more than a bare skills list. The colors and section order are taste; change them freely.
Build yours with the prompt
Before pasting the prompt, write your facts as plain sentences: two to four projects, your part in each, and a result you could explain in an interview. If you don't have a number, describe the outcome in words rather than letting AI estimate one.
The prompt asks for one HTML file with no outside scripts, fonts or forms, so nothing on the page depends on a service you haven't set up. It also tells the AI to leave a visible [ADD: …] marker wherever your facts run out, instead of filling the gap.
When the file comes back, open it on your phone as well as your laptop. Make sure the text reads without zooming, nothing scrolls sideways, and every image has a short description for screen-reader users. Search for leftover [ADD:] markers before you share it.
Build a one-page portfolio as a single self-contained HTML file.
About me (use ONLY these facts; do not invent employers, dates, numbers, clients or results):
- Name: [YOUR NAME]
- Target role: [ROLE YOU ARE APPLYING FOR]
- One-sentence summary: [WHAT YOU DO NOW AND WHAT YOU ARE MOVING TOWARD]
- Contact: [EMAIL] · [PROFILE OR WEBSITE URL]
Projects (2–4). For each one:
- Title: [PROJECT TITLE]
- Question or problem: [WHAT NEEDED SOLVING]
- My part: [WHAT YOU PERSONALLY DID]
- Result: [AN OUTCOME YOU CAN VERIFY — a number, or a plain-language description]
- Tools: [TOOLS YOU USED]
- Image (optional): [FILE NAME OR URL] — alt text: [WHAT THE IMAGE SHOWS]
Format reference only (fictional; do NOT include it on the page):
Title: Weekend staffing vs. foot traffic. Question: Were Saturday shifts matched to when customers arrived? My part: Joined 12 months of door-counter and schedule exports and charted hourly gaps. Result: Proposed a revised Saturday schedule that the store ran as a six-week trial. Tools: SQL, spreadsheet pivot tables.
Content and layout:
1. Header with my name, target role and summary.
2. A projects section; each project card shows, in this order: question, my part, result, tools.
3. A table mapping each tool to the projects where I used it.
4. Contact as plain text and links only. No contact form, no signup box, no buttons that pretend to submit anything.
5. Wherever a fact above is missing, show [ADD: what is missing] instead of filling it in.
Technical and accessibility requirements:
- All CSS inside one <style> tag. No JavaScript, external fonts, analytics, trackers or API calls.
- Semantic structure: one <h1>, an <h2> for each section, an <h3> for each project, a real <table> with <th> header cells.
- Body text at least 16px, line height about 1.5, high-contrast text on the background; do not rely on color alone to convey meaning.
- Every <img> uses the alt text I supplied; link text describes the destination (never "click here").
- A visible focus outline on links for keyboard users.
- Mobile first: a single column below 640px wide, no horizontal page scrolling; if the table is too wide, let it scroll inside its own container.
Return the complete HTML file, then a short list of every [ADD:] placeholder you left.
When the application asks for a file
A link doesn't stand in for a required document. If a posting asks for a PDF or Word file, send exactly that, and use the portfolio page as a supplement: in a portfolio field, an email, or your profile.
If you convert anything to PDF, open the result and check that the formatting survived; résumé guidance flags the same step.
After it's sent: fix the words, keep the link
Say Jordan sends the link on Monday and notices on Tuesday that the returns project still calls the dashboard a draft, when it has gone into weekly use. Asking AI to regenerate the whole page for a three-word fix risks changing layout or wording that was already right.
If the page lives in NOS, Jordan can click into the rendered text and correct it directly, with no new AI run. The published sharing link stays the same after the edit, so the hiring manager opening Monday's link reads Tuesday's wording, and they don't need an account to open it.
This covers wording. A new section or a different layout is a job for another pass with your prompt. But for the small corrections that surface after a page is out, the page Jordan sends to the next employer is already the fixed one.