Developer Portfolio Website: What to Include in 2026

A developer portfolio website needs three to six projects, each with its own page that says what problem it solved, what you built, the decisions you made and where to see it live and in the repository. Add a short bio, a CV link and one clear way to contact you. Host it free, keep it fast and own the code.

This guide covers each part in order, from the pages to include to hosting and templates. For the design side of portfolios in general, read how to design a portfolio website; this article is about what changes when the reader is a recruiter or an engineering lead.

Who Reads a Developer Portfolio

Two readers matter most: a recruiter who scans for a match in under a minute, and an engineer who opens one project and reads the code. Build the site so the first gets a clear summary on the homepage and the second reaches a repository in one click.

• Recruiters and hiring managers: your role, core stack, location or time zone and whether you are available. Put these in the first screen.
• Engineers reviewing you: a project page that explains your decisions, and a public repository with a README that actually runs.
• Freelance clients: outcomes in plain words, what the site or app did for the business, and a contact form or booking link.

The Pages a Developer Portfolio Website Needs

Most developer portfolios need four page types: a homepage, a projects index, one page per project and a contact route. The about section and CV download can live on the homepage. A blog is optional; add one only if you will publish technical write-ups regularly.

If you have fewer than four projects, a single page with anchored sections does the same job. Our portfolio website examples show both layouts on real, live sites.

How to Write a Project Page

A project page should answer four questions in order: what was the problem, what did you build, which decisions did you make, and what happened. Screenshots and a live link come early; the stack list comes last, because most applicants list the same frameworks.

1. The problem, in one or two sentences. Who had it and why it mattered.
2. Your role. A solo build, or exactly which part of a team project was yours. Be precise; interviewers ask about it.
3. Two or three decisions. Why this database, why server rendering, what you cut to ship on time. This is the part engineers read.
4. The result. Users, a performance change, a merged pull request, a client launch. Use only numbers you can back up.
5. Links. The live demo, the repository, and a short screen recording if the app needs a login to try.

Pick projects that show range rather than volume. One full-stack app, one open-source contribution and one small tool that solves a real problem say more than ten tutorial clones.

GitHub and Your Portfolio Site

Your GitHub profile and your portfolio website do different jobs, so link them both ways. The site tells the story of a few projects; GitHub shows the code and your activity. Tidy the profile before you send the link to anyone.

• Profile README. GitHub shows a README on your profile when you create a public repository with the same name as your username (GitHub Docs on profile READMEs). Use it for a two-line intro and a link back to your site.
• Pinned repositories. You can pin up to six repositories and gists combined (GitHub Docs on pinning). Pin the same projects your site features.
• READMEs that run. Every featured repository needs setup steps, a screenshot and a link to the live demo.

Where to Host a Developer Portfolio for Free

A static portfolio can be hosted free on GitHub Pages, Vercel's Hobby plan or Netlify's Free plan, and all three deploy from a Git repository. The differences are in limits and terms, so check them against what your site does before you choose.

GitHub's limits page says Pages is not meant as free hosting for an online business, an e-commerce site or a SaaS product, which a personal portfolio is not. Pages also works with your own domain, apex or www (GitHub Docs on custom domains), and a domain with your name on it reads as more permanent than a free subdomain.

Build It From Scratch or Start From a Template?

Build from scratch if the portfolio is itself the project you want to show, for example a front-end developer demonstrating animation or accessibility work. Start from a template if the projects are the point and the site is only the frame: you ship in days and spend the saved time on write-ups.

A code template is the middle route. You still own and edit the source, deploy it where you like and can show the repository, but the layout, responsive breakpoints and page structure are already done. What you change is the content, the colours and any part you want to rebuild to show your own skill.

Whichever you choose, check how it builds. Next.js can produce a fully static site when you set the output option to 'export' in next.config, which writes the files to an out folder (Next.js static exports), as long as the project avoids server-only features. Astro builds to a dist folder with npm run build, and Astro maintains an official GitHub Action for deploying to GitHub Pages (Astro deploy guide).

Performance and Accessibility Checks

Reviewers judge a developer's own site as engineering work, so it has to be fast and accessible. Aim for a Largest Contentful Paint of 2.5 seconds or less, the threshold web.dev's LCP guide calls good, and test on a phone connection, not only on your laptop.

• Compress screenshots and serve them at the size they are displayed.
• Give every image alt text, and make every link and button work from the keyboard.
• Make the CV link open a PDF directly, not a sign-in page.
• Give each page its own title and description, so a search for your name finds the site.
• Click every live demo link before you send the portfolio anywhere; a dead demo link undoes a good write-up.

Waida Studio Code Templates for a Developer Portfolio

Waida Studio's templates are studio and portfolio designs rather than purpose-built developer résumés, but three adapt well, because each ships as Next.js and Astro source code you own and edit. These are our own templates, and the prices below come from our catalogue today.

Brandora

Brandora is written for agencies, studios, designers and developers. Its 15 pages include a projects archive, individual case-study pages, a process page and a blog, so the studio copy swaps cleanly for your own project write-ups. The Next.js and Astro versions are $49 each, and the HTML version is $39.

Check out Brandora template

Formix

Formix is a 15-page portfolio and creative-agency template. It suits a developer who also designs, or anyone whose projects are visual products. The Next.js and Astro versions are $49 each, and the Framer version is free with a free Waida account.

Check out Formix template

Zelda

Zelda is a dark, 13-page agency template, and it is free on every platform, Next.js and Astro included, with a free Waida account; its Figma file is free too. It is the lowest-risk way to see how the code is organised before you spend anything.

Check out Zelda template

The CMS collections listed on each template page belong to the Framer and Webflow versions; in the code versions you edit projects in the source. Each template is licensed to one person for unlimited projects, your own and clients' alike, under our licence terms, and the Figma file is sold separately at $19, except Zelda's. Browse every Next.js template or Astro template.

A developer portfolio website works when a recruiter can tell your role and stack in seconds and an engineer can reach a real repository in one click. Pick three to six projects, write a page for each, host it free and keep it fast.

If you want the layout done for you, the portfolio templates come in Next.js and Astro at $49 each (or $99 for every template on one platform in its bundle), in HTML at $39, and Zelda is free on every platform with a free account. Plans with template credits are on the pricing page, and our free portfolio website templates list covers free options on other platforms.