How to build a portfolio that gets you hired in 2026

The first thing a hiring manager does with your portfolio is decide, in about ten seconds, whether the person who made it has taste. Everything after that gate happens only if you clear it.

I watched a friend lose a year to this. Strong designer, real work, the kind of person any team should want. His portfolio was eight projects deep, each one a wall of process screenshots under a paragraph that opened with "The challenge was." He heard back from almost nobody. He thought the work was the problem. The work was fine. The portfolio was a resume with pictures, and nobody reads a resume with pictures.

That is the belief this whole piece runs on. The portfolio is the bottleneck far more often than the work is. People grind for months on case studies no one scrolls to, when the real leak is the first scroll.

Here is how I build a portfolio that gets you hired in 2026, whether you are a designer, an engineer, or someone who can barely write a line of code. It is specific. Steal all of it.

What a good portfolio actually does

I benchmarked this against more than fifty portfolios whose owners ended up at Linear, Vercel, Stripe, and Figma. The patterns are not subtle.

The work is the hero. Real work in the first scroll. Not a bio, not a mission statement, not a process doc. The screen that loads shows what you made.

Ruthless curation. Three to five projects, never eight. The test is simple. If removing a project would raise the average of what is left, remove it. The one exception is recognizable company work. A shipped feature at a known name always counts.

Radical minimalism. Single column, whitespace on purpose, monochrome with at most one accent color. Restraint reads as confidence. A loud portfolio reads as someone who could not decide what mattered.

Craft in the details. A real typeface chosen on purpose. Considered hover states, intentional transitions, micro-interactions that reward attention. This is the heaviest signal there is. If the craft is off in the first ten seconds, nothing else gets read.

Builder signals. Ship something live. A side project, a small tool, an open-source repo. A craft page is itself the work. A portfolio is proof of making, not a museum of documenting.

One to three sentences per project. The homepage is a business card, not a brochure. Make me want the click. Save the depth for after I ask for it.

Now the part people skip. What to leave out. The absence is itself a tell that you studied what works.

• Testimonials and quotes about how great you are to work with
• Skill bars and skill lists, the ones with the little percentage fills
• A "hire me" button and a contact form. An email link is enough
• Process documentation on the homepage
• Awards sections and logo soup
• A profile photo on the landing page
• More than one accent color

The URL matters too. A .framer.website, a .squarespace.com, an obvious stock template. All of it says the same thing to the person hiring. I did not finish this.

One thing sits above every line here. Visual craft over everything. Taste, restraint, attention to detail. If you get only one thing right, get that.

Five portfolios to study

Study these the way a painter studies a master. You are not there to trace it. You are there to understand why it works and take the principle home. Steal the principles, not the pixels.

Paco Coursey

One dark single-column page, a one-line bio, then short lists under Building, Projects, and Writing, including the cmd-K command menu he is known for. He builds interfaces at Linear, and the page itself is the argument. Nothing wasted, nothing shouting.

Rauno Freiberg

Typography as identity. Huge confident type, one bold mark, and the restraint to stop there. His craft page is the standard everyone else is quietly copying, a feed of tiny perfected interactions from an interaction designer at Vercel.

Emil Kowalski

The strongest builder signal there is. Emil is a design engineer at Linear, ex-Vercel, and he ships the libraries other people's portfolios are built on, Sonner and Vaul. His writing reads as case studies and the restraint is everywhere. He also made the course at animations.dev.

Shu Ding

Minimal to the bone. A quiet serif nav and a plain bio that happens to read Vercel, Next.js, AI SDK, v0. The credibility carries it, and the restraint is the flex. He is not trying to convince you. He does not have to.

Hector Simpson

Soul, in a format nobody else has. The whole homepage is an iMessage-style chat that introduces him, unmistakably one specific person. Proof that "looks like a person made it" beats "looks like a template" every time.

The four honest ways to build one

Four real paths. I rank them straight, including the one we make.

Framer is the drag-and-drop builder with the polished templates. I skip it. The templates are recognizable, and a .framer.website URL reads to a hiring manager as unfinished. In 2026 custom is trivial, so a template signals less effort, not more. A fine thirty-minute stopgap. It caps how far you can go.

Cargo is the strong pick if you are visual and do not want to code. It is built for designers, the editorial layouts have real range, and it carries far less template-smell than Framer. If you want beautiful without code, this is the one. For the can-barely-code reader, the safe default.

Build your own with Claude Code or Codex is the highest ceiling. Fully yours, no template smell, every detail under your control. It used to be the technical path that put it out of reach for non-engineers. With an agent it is not anymore. It is the path I go deep on below.

And the one we make, Yara. It is not a website builder. If you want it, Yara spins you a portfolio skill and hands you the starter and Portfolio Polish, so the loop below runs no matter which tool you picked.

The honest tradeoff, plainly. Building your own takes a weekend and some patience. Cargo takes an afternoon. Framer takes an hour, and it shows.

Build your own with an agent

You are not writing code. You are directing an agent that writes it, looking at the result, and telling it what is off. This is the path with no ceiling. If you can describe what good looks like, and the five above taught you that, you can do this.

Step 0: Get the agent running first

Most guides skip this and lose the non-coders in the first ten minutes. Do not skip it. You need three things before you build anything. Node.js from nodejs.org, which is what the commands below run on. An AI coding agent, either Claude Code or Codex, installed and signed in per its own setup page. And a terminal, the text window where you type commands. On a Mac that is the Terminal app, on Windows it is PowerShell. The agent costs money, a monthly plan or pay-as-you-go credits, so set that up first. If a command ever fails, paste the exact error back to the agent and ask it to fix it. That is your lifeline the whole way through.

Step 1: Get a starter and the brief onto your computer

Use the Next.js Portfolio Starter Kit. It is a minimal Next.js and MDX site: a short bio, a writing index, RSS, dark mode, MIT licensed, with a one-click deploy and a view-source link on the demo. You write posts as MDX files and barely touch code. An honest baseline, not the finish line.

The cleanest path for a non-coder is to let the agent fetch it. Make a new folder, open the agent inside it, and tell it: clone the Next.js Portfolio Starter Kit into this folder and get it running. The agent handles the git and the install. Now you have a real project folder on your machine, which is the thing every step after this points at.

Then save our instructions file as instructions.md inside that same folder. It is the standard from this article written as a brief the agent follows before it writes a thing. Copy it or download it right here, and drop it in the folder. The agent reads any file in its folder, so "in the folder" is all "attached" needs to mean.

Loading the brief...

Step 2: Send the kickoff prompt

With the agent open in your project folder, paste the kickoff prompt from the end of this article. It tells the agent to read instructions.md, fills in who you are and your two to four projects, points it at the references and the starter, and says to run Portfolio Polish and iterate. One paste. The agent takes it from there.

Step 3: Feed it real taste, not generic slop

Left alone, agents build competent, forgettable frontends. The fix is to hand them taste on purpose.

The one tool I built for this is Portfolio Polish. Install it with npx skills add flows-cv/portfolio-polish, then run /portfolio-polish followed by your URL. It is a brutally honest audit, scored across eight categories out of forty, benchmarked against more than fifty reference portfolios. It tells you what a hiring manager sees in ten seconds and exactly what to fix. This is the audit loop, and it is what separates good from generic.

Two more taste inputs raise the ceiling. Impeccable is an agent skill that teaches your agent real visual taste and kills the default generic look. make-interfaces-feel-better is Jakub Krehel's collection of the small details that compound. Follow each site's own install line so you paste a command that actually works, then point your agent at them. For pure reference, godly.website and 60fps.design are full of shipped work worth stealing the feeling from.

Step 4: Iterate in small passes

Do not ask for the whole site at once. Get the homepage layout and type right first. Then the project list. Then one project page. Then hover states and transitions. After each pass, look at it in the browser and say one specific thing. "The project titles are too big and the spacing under them is uneven." Specific beats vague. The agent fixes specific.

Step 5: Run Portfolio Polish on yourself and fix the lowest scores

When it looks done, point Portfolio Polish at your own site. It runs a headless browser, so a local URL works as long as your dev server is running. You get a score out of forty across the eight categories. Read the low ones first, hand each finding back to the agent as its own small task, and run it again. Watch the number climb. This loop, reference then audit then fix, is the entire difference between a portfolio that gets you hired and one that looks like every other AI-built site.

A v1 you can ship Sunday night does not need a perfect score. Get every category to at least a 3, with nothing below 3, and put it live. Chase the 4s and 5s the following week. A shipped portfolio beats a perfect one that never ships.

Step 6: Deploy to Vercel and put it on a real domain

Ship it to Vercel. The starter is one-click deploy, and the agent can walk you through connecting your repo. Then put it on a real domain. yourname.com, not a free subdomain. The easy path is to buy the domain through Vercel itself, which wires everything up and skips DNS entirely. If you buy elsewhere, Vercel shows you the records to add: an A record pointing to 76.76.21.21, or a CNAME for www pointing to cname.vercel-dns.com. DNS can take a few hours to take effect, so if the domain does not load right away, wait before changing anything. That is the last thing standing between you and a portfolio that reads as finished.

The audit loop is the whole game

Here is the honest confession. I used to think the answer to a bad portfolio was more advice, a longer checklist. It is not. People do not lack advice. They lack a mirror. You cannot see your own site the way a stranger sees it in ten seconds, and no amount of reading fixes that blind spot.

The references are the mirror for taste. The audit is the mirror for craft. Study the five until you can feel the difference, then let Portfolio Polish tell you, without flattery, where yours falls short. Reference, audit, fix, repeat. That is the loop, and it works whether you are a senior design engineer or someone touching code for the first time.

Once the portfolio is real, the job is to get it seen, and that part quietly eats months. The hard part was never building it. It is getting it in front of the people hiring, with an agent that works for you and not the company, the same way a job is a given right and the edges were open the whole time. That is what Yara does. We get it found.

Paste this into your agent, fill in the brackets, and let it run.

Read the attached instructions.md fully before writing any code. It is in this project folder and defines what a great portfolio is. Follow it.

I am a [your role, e.g. product designer or frontend engineer] with [X years] of experience. Background in one line: [one sentence]. Projects to feature: [project 1], [project 2], [project 3]. Keep it to three to five, work-is-the-hero, one to three sentences each.

Build a single-column, minimal, monochrome-with-one-accent portfolio. Study these for principles, not pixels: paco.me, rauno.me, emilkowal.ski, shud.in, hector.me. Clone the Next.js Portfolio Starter Kit (portfolio-blog-starter.vercel.app) into this folder and get it running first, so I am not on a blank page.

Use the impeccable and make-interfaces-feel-better skills for taste. Work in small passes and show me each. When the homepage is up, run /portfolio-polish on the local URL, show me the score out of 40, and fix the lowest categories first. Then run it again. If a command fails, show me the error and fix it. Repeat until the work is the hero and the craft holds up in ten seconds.

The work was never the bottleneck. The first ten seconds were, and now you own them.

Frequently asked questions