A strong developer portfolio shows three things fast: what you build, proof that it works, and how to reach you. The eight layouts below are original examples to preview and adapt, from a one page case study list to a terminal style site, followed by a plain HTML and CSS template you can publish today.
| Goal | Layout to try | Why |
|---|---|---|
| First junior role | Project case studies | Shows thinking, not just screenshots |
| Freelance clients | Services and results | Leads with what a client gets |
| Open source work | Repository grid | Puts real code one click away |
| Frontend or design engineering | Interactive showcase | The site itself is the proof |
| Senior or staff roles | Writing first | Long form posts show judgement |
Updated
Most lists of developer portfolios are screenshots of other people's sites, which you cannot copy and which date quickly. Here every layout is an original wireframe drawn for this page. Switch between them to see the structure, read when each one fits, then start from the template at the bottom.
Best for: Junior and mid level job seekers
Sections: Name and one line role, Three case study cards, Short about, Contact
Each card opens a page with problem, approach, stack and result.
Best for: Freelancers
Sections: What I build for clients, Services list, Selected work, Process in three steps, Contact form or email
Speaks to buyers, so it leads with outcomes rather than languages.
Best for: Open source contributors
Sections: Intro, Grid of repositories with language and purpose, Talks or posts, Contact
Each tile links straight to the code and its live demo.
Best for: Backend, DevOps and tooling roles
Sections: Prompt style header, whoami summary, ls projects list, cat contact
Fun if every line stays readable and the page still works with a mouse.
Best for: Frontend and creative developers
Sections: Full screen interactive hero, Project reel, Tech notes, Contact
Respect reduced motion and keep a plain text route to the projects.
Best for: Senior engineers
Sections: Short bio, Latest posts, Selected projects, Speaking, Contact
Posts show judgement and communication, which senior hiring weighs heavily.
Best for: Anyone short on time
Sections: Header with links, Experience timeline, Projects, Skills, Download CV
A web version of the CV that is easier to read on a phone than a PDF.
Best for: Developers who also design
Sections: Fixed left column with name and links, Scrolling right column of projects
Contact links stay visible while visitors browse the work.
| Field | Example |
|---|---|
| Title | Shift swap app for a small clinic |
| One line summary | Lets staff trade shifts without a manager re-entering the rota |
| Your role | Solo build, or the parts you owned on a team |
| Stack | React, Node, Postgres |
| Hard part | Preventing two people claiming the same shift at once |
| Result | Something true and checkable, such as tests passing or real users |
| Links | Live demo and source repository |
A single HTML file with inline CSS. It has no build step, works on phones, and switches to dark colours when the visitor's system asks for them.
Edit the code and the preview updates. Replace the sample name, projects and email, then save the file as index.html.
<style>
:root { --bg:#fff; --fg:#111; --muted:#555; --line:#e5e5e5; --accent:#2563eb }
@media (prefers-color-scheme: dark) { :root { --bg:#0f172a; --fg:#f1f5f9; --muted:#94a3b8; --line:#1e293b; --accent:#93c5fd } }
body { background:var(--bg); color:var(--fg); max-width:720px; margin:0 auto; padding:24px 16px }
header a, footer a { color:var(--accent) }
.tag { display:inline-block; font-size:12px; padding:2px 8px; border:1px solid var(--line); border-radius:99px; margin:2px }
article { border-top:1px solid var(--line); padding:16px 0 }
article p { color:var(--muted); margin:4px 0 }
</style>
<header>
<h1>Sam Rivera</h1>
<p>Backend developer who likes boring, reliable systems.</p>
<p><a href="mailto:[email protected]">[email protected]</a> · <a href="https://github.com/">GitHub</a></p>
</header>
<main>
<h2>Projects</h2>
<article>
<h3>Shift swap app</h3>
<p>Staff trade clinic shifts without a manager re-entering the rota.</p>
<span class="tag">Node</span><span class="tag">Postgres</span>
<p><a href="#">Live demo</a> · <a href="#">Source</a></p>
</article>
<article>
<h3>Invoice parser CLI</h3>
<p>Turns supplier PDFs into CSV rows for a bookkeeping import.</p>
<span class="tag">Python</span><span class="tag">pytest</span>
<p><a href="#">Source</a></p>
</article>
</main>
<footer><p>Updated October 2026</p></footer>A screenshot proves you can take a screenshot. Two or three sentences on the problem, the hard part and how you solved it show how you think, which is what interviews test.
Keep each case study scannable: a title, one line summary, stack tags, then the short story and the links. Visitors can open the detail if they want it.
Your portfolio is the one project every reviewer is guaranteed to see. Semantic headings, visible focus styles, fast loading and a layout that works on a phone all count as evidence.
Avoid heavy intro animations and loading screens. They delay the content reviewers came for and can hurt people who prefer reduced motion.
Store projects as a simple list in one file so adding a new one takes minutes. Remove projects that no longer represent your level.
Add a last updated line in the footer. It quietly tells visitors the information is current.
A one line summary of what you do, three to six projects with problem, role, stack and links, a short about section, and a clear way to contact you. A CV download and a writing section are useful extras, not requirements.
No. Hiring managers care more about the projects than whether you hand coded the frame. Building it yourself is a good small project for frontend roles, while a template or site builder is fine for backend, data or mobile developers.
GitHub Pages publishes HTML, CSS and JavaScript straight from a repository at an address like yourname.github.io. Other static hosts work the same way, and you can add your own domain later.
Three to six. Choose the ones closest to the work you want next, and put the strongest first, since many visitors never scroll to the bottom of the list.
Only if you changed them meaningfully. A tutorial clone that many applicants share tells a reviewer little; add a feature, a test suite or a real dataset and explain what you changed.
Related: Portfolio website examples, How to create a portfolio website, Free portfolio website builder, Art portfolio examples.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.