Is Major Cooked? Free AI risk score + roast for your college major
Solo Era solo activities, solo maxxing, sidequests, challenge
Keepsake Project Management, Freelancers, DesignersPortfolio website ideas: 13 ways to show your work, by profession
A strong portfolio website shows a few pieces of work in depth, says what you did in each, and makes it easy to contact you. The idea you pick is the format: a single case study, a live demo gallery, a before-and-after teardown, a series instead of a gallery, a reel-first page. Below are 13 portfolio website ideas by profession, with a first version you can build in a weekend and the common mistake in each.
What makes a portfolio website good?
A portfolio has one job: help a stranger decide whether to talk to you. They are short on time and they are comparing you to others. So the site should answer three questions in the first screen: what do you do, can I see proof, and how do I contact you.
| Check | Do | Avoid |
|---|---|---|
| First screen | Your name, your job in one phrase, your best piece | A loading animation and a slogan |
| Number of pieces | 3 to 6, each in depth | 30 thumbnails with no context |
| Your role | Say exactly what you did and what others did | Taking credit for a team's whole result |
| Results | Real outcomes you can state accurately | Invented numbers or vague superlatives |
| Contact | An email link on every page | A form that sends nowhere |
| Phone | Check it at phone width, with a bad connection | Heavy images with no compression |
| Accessibility | Alt text, readable contrast, keyboard use | Text on photos with no overlay |
A portfolio is not the same as a personal site; for pages about you rather than your work, see personal website ideas. If you are a developer and need projects to show, portfolio project ideas covers what to build, and the ideas on the board each come with a ready prompt. This page is about how to present the work.
To build the site quickly, read how to build a website with AI. To compare tools, read best AI website builder. For hosting, see how to host a website for free.
Which portfolio website ideas suit developers?
Developers are often judged by what they can show running. The common mistake is a list of repository links with no explanation. A reader should not have to open the code to learn what the project does.
01 The one-case-study portfolio
A site built around a single project told as a story: the problem, your decisions, what went wrong and what you would do differently.
- Good for
- Developers with one project they can talk about in depth.
- First version
- A home page with a summary and one long page of 800 to 1,200 words.
- Time
- A weekend, plus the writing.
- Common mistake
- Describing features and skipping decisions.
1. Problem: who needed this, and what did they do before? 2. My role: what I did, what others did. 3. Constraints: time, budget, tools, data. 4. Decisions: three choices I made and why, with the alternative I rejected. 5. What broke: one real failure and how I found it. 6. Result: what changed, stated only if I can show it. 7. Next: what I would do with another month.
Extension: a second case study written the same way, then a short index page. Employers can read one in five minutes, which is the point.
02 The live-demo gallery
A page of small projects that run in the browser, each with a two-sentence description and a link to the code.
- Good for
- Front-end and full-stack developers.
- First version
- 4 demos, each with a one-click try-it button.
- Time
- A week, if the demos exist.
- Common mistake
- Demos that break because a free server went to sleep.
Test every demo from a clean browser before you share the link. Prefer demos that need no backend, so they cannot break. The extension is a short note in each card about what you would change today.
03 The project-with-README portfolio
A site that mirrors the structure of a good repository README for each project: what, why, how to run, what is next.
- Good for
- Students and career changers with projects but no employer to point to.
- First version
- 3 projects, each with a screenshot, a one-line description and a link.
- Time
- A weekend.
- Common mistake
- Tutorial projects that look like everyone else's.
A project you chose to build for a real person stands out. If you need one, the board lists problems real people wrote down, each with a build prompt, such as Version history for people who will never use git. Say where the idea came from, and what you changed.
04 The data analyst's notebook portfolio
A site that presents each analysis as a short article with charts, the question asked and the method, plus a link to the notebook.
- Good for
- Data analysts and scientists.
- First version
- 3 analyses on public data, 600 words each.
- Time
- A week.
- Common mistake
- Charts with no sentence saying what to conclude.
Title each analysis with the question, not the technique. Put the answer in the first paragraph. Extension: one interactive chart per piece, where a reader can change a filter.
Which portfolio website ideas suit designers and creatives?
Visual work is judged fast. The risk is the opposite of the developer's: too much imagery and too little thought. Let the reader see your process, not only the finished image.
01 The before-and-after teardown
A portfolio piece that takes a real product or page, shows what is wrong with it, and shows your redesign with the reasoning.
- Good for
- Product and web designers without client work to show.
- First version
- 2 teardowns with annotated screenshots.
- Time
- A weekend each.
- Common mistake
- Redesigning for looks, with no user problem stated.
State clearly that it is a self-initiated exercise and that you had no access to the company's data. Choose something small, like one flow, and say what you would test next. Extension: a short video walk-through of your reasoning.
02 The series, not the gallery
A photographer's site organized as 4 to 6 coherent series with a short statement each, instead of one endless grid.
- Good for
- Photographers, illustrators and artists.
- First version
- 4 series of 8 to 12 images, each with two sentences.
- Time
- A weekend, after editing.
- Common mistake
- Including every decent image you have.
A series shows you can hold a theme, which a grid of unrelated shots cannot. Compress images to load quickly on mobile, and write alt text. Extension: a page of prints or commissions with a clear way to ask.
03 The reel-first page
A video editor or motion designer's site where a 60 to 90 second reel plays first, followed by breakdowns of three pieces.
- Good for
- Editors, animators and motion designers.
- First version
- A reel, three project pages and a contact link.
- Time
- A weekend, plus the reel.
- Common mistake
- Autoplay with sound, or a reel that starts slowly.
Put your best seconds first. Credit collaborators. Extension: a short breakdown video for one piece that shows layers or cuts.
04 The illustrator's commission page
A site that doubles as a shop window: styles, sizes, turnaround, a price range and an order form.
- Good for
- Illustrators and artists who take commissions.
- First version
- 3 sample styles, a price table and an email link.
- Time
- A weekend.
- Common mistake
- Hiding prices, which sends away the serious buyers and attracts the wrong ones.
State what you will not draw and how many revisions are included. Extension: a waitlist page that shows your current queue.
05 The listen-first musician page
A site where a visitor presses play immediately, with credits, links to full releases and a short note on each piece.
- Good for
- Musicians, composers and sound designers.
- First version
- 5 tracks, credits for each and a contact link.
- Time
- A weekend.
- Common mistake
- Embedding five different players that each load slowly.
Use one player style across the page. Say who you worked with and what you played or produced. Extension: a press-kit page with a short bio, a photo and a list of releases.
Which portfolio website ideas suit writers, researchers and product people?
When the work is thinking, the portfolio has to show the thinking. These formats put reasoning on the page, so a reader sees how you decide, not only what you made.
01 The clips index by topic
A writer's page that groups published pieces by subject, with a headline, publication, date and one line on what you contributed.
- Good for
- Freelance writers and journalists.
- First version
- 15 clips in 3 topics.
- Time
- An evening.
- Common mistake
- Links to pieces that have disappeared; keep a copy as a PDF and ask the publisher about reuse.
Put the three best clips for the type of work you want at the top. Extension: a 'how I report' page that explains your process and sources.
02 The UX research portfolio
A site that shows research projects through their method, sample, findings and what changed, with anonymized artifacts.
- Good for
- UX researchers and designers who do research.
- First version
- 2 studies with the question, method and a redacted finding.
- Time
- A week.
- Common mistake
- Sharing confidential data or identifiable participants.
Ask your employer or client before you publish anything, and remove names and logos if asked. Describe the method honestly, including limits. Extension: a short 'what I would do differently' for each study.
03 The product decision log
A product manager's portfolio built from decisions: the options, the data, the choice and what happened.
- Good for
- Product managers and founders.
- First version
- 3 decisions, each in 300 to 500 words.
- Time
- A weekend.
- Common mistake
- Writing outcomes you cannot back up, or revealing confidential numbers.
Use rounded or relative numbers if figures are private, and say so. Include one decision that turned out wrong. Extension: a side project with its own decision log, so you have something public that you can share freely.
04 The productized freelancer page
A freelancer's site built around two or three clearly defined services, with scope, process and typical timeline, in place of a list of past clients.
- Good for
- Freelancers and small studios.
- First version
- 2 services, a process section, 3 examples and a contact link.
- Time
- A weekend.
- Common mistake
- Services described as outcomes you cannot control.
State what a client gets, what they need to provide and what is out of scope. If you list a price or range, say what it includes. Extension: a short intake form that asks the questions you always ask on the first call.
How do you build a portfolio website in a weekend?
- Pick 3 pieces of work, not 10. Choose for the job you want next.
- For each, write the case study outline above before you touch a design tool.
- Choose one layout: a home page, one page per piece, an about page, a contact link.
- Generate or pick a template and fill it with your own text and images.
- Compress images and test on a phone.
- Publish, then send the link to two people in your field and ask what is unclear.
Build a fast, accessible portfolio website with no tracking. User: a hiring manager with 2 minutes. Pages: Home (my name, my job in one phrase, my 3 best pieces as large cards), one page per piece, About, Contact (email link). Design: system fonts, high contrast, works at phone width, images lazy-loaded with alt text, no autoplay. Content: use the text and images I provide. Do not invent project details, results or testimonials. Done when: Home loads in under 2 seconds on a throttled connection, every page is reachable by keyboard, and no page has unlabeled links.
Ideas for projects to build and show are on the board, for instance in developer tools or design tools. If you have a project idea you will not build yourself, you can post it and let someone else take it.
Frequently asked questions
What should I put in a portfolio website?
Put your name and job in one phrase, three to six pieces of work with your role in each, a short about section and a contact link. Show a few pieces in depth rather than many with no context. Explain what you did, what you decided and what happened, and leave out anything you cannot back up.
How many projects should a portfolio have?
Three to six is a good range. A reader comparing many candidates will look at a few pieces, so make those few strong, with the problem, your role and the outcome. If you have more work, keep it on a separate archive page, linked but not competing for attention on the home page.
What can I put in a portfolio if I have no clients?
Self-initiated projects count if you are honest about them. Build something for a real person, redesign a real product as a labeled exercise, or analyze public data and write up the result. Say it was a personal project, explain the problem and show your decisions. Real people's problems make better pieces than tutorials.
Should a developer portfolio include code?
Link to code, but do not make the reader open it to understand the project. Describe what the project does, show it running, and explain your decisions. A clean repository with a clear README helps, and a live demo that works is more convincing than a screenshot.
Can I make a portfolio website with AI?
Yes. AI tools can generate the layout and code quickly, as long as you supply the real content: your text, images and project details. Tell the tool not to invent results or testimonials, test the site on a phone, and read what it wrote before you publish.
Do I need a custom domain for a portfolio website?
It is not required, but a domain with your name looks more professional and stays the same if you change hosts. It usually costs a small yearly fee. Free hosting subdomains work for a first version, and you can move to a custom domain later without rebuilding the site.
Created with AI assistance and edited for this site. Examples are illustrative and do not represent customer research. About the publisher.