Is it fine to use a portfolio template?

Yes. Using a well-made template and filling it with excellent content beats a hand-built site with placeholder text, and no reviewer can tell what generated the HTML. The one requirement is removing every trace of the template's demo content — a leftover 'Lorem ipsum' or 'John Doe' is a very visible failure.

Should the portfolio site itself be a portfolio project?

For front-end roles, effectively yes — the site is a work sample and it will be judged as one, so make it fast, accessible and responsive. For back-end and data roles it is presentation rather than evidence, and a plain, quick site with excellent content is the right trade.

What page title should my portfolio site have?

Your name and your target role: 'Priya Raman — Back-end Developer'. It appears in the browser tab, in search results and in link previews. A surprising number of student portfolios still say 'Create Next App' or 'Vite + React', which is the kind of detail a reviewer notices.

Do I need a contact form?

No. A plain email address is more reliable and it is one fewer thing to break. If you do use a form, test that it actually delivers and still show the email address as a fallback — a silently failing contact form has cost people interviews.

Developer Portfolio Website Template (Free Structure and Copy)

Short answer

What should a developer portfolio website contain?

Five sections on one page: a header with your name, role and one sentence on what you build; two or three projects with live links and the stack named; a two-paragraph About; a technologies list grouped by category with no ratings; and one contact action. Deployed free.

Download the structure guide (.md)Get all seven templates free

The page structure

One page, five sections. A single well-made page beats a five-page site with three empty pages on it, and the order below is the order a reviewer’s attention actually moves in.

Section	Job	Length
Header	Name, role, one line on what you build, links out	Fits on one screen
Projects	Two or three, with evidence	The bulk of the page
About	Who you are and where you are heading	Two short paragraphs
Technologies	Grouped by use, no ratings	A compact list
Contact	One obvious action	Two lines

priyaraman.dev

Priya Raman — back-end developer

Final-year computer science student. I build APIs and data pipelines in Python and Go. Available from July 2027.

GitHubCV (PDF)Email

Society Events Platform

Live ↗

Event sign-ups for three societies. ~400 registrations over a term.

Django · Postgres · Redis · Fly.io

Log Analyser

Live ↗

Queries logs larger than memory. Peak usage 1.2 GB → 40 MB.

Go · SQLite · HTMX

The structure filled in. Constructed for illustration.

Copy for every section

Header

Pattern: [Name] — [role]. I build [what] with [technologies]. Currently [status].

Priya Raman — back-end developer
Final-year computer science student. I build APIs and data pipelines in Python and Go. Available from July 2027.

Project entry

Pattern: Name. One line on what it does and for whom. The stack. One technical decision with its reason. Live and source links.

Society Events Platform
Event sign-ups for three university societies. Ran a full term, around 400 registrations.
Django · PostgreSQL · Redis · Fly.io
Capacity is enforced with a database constraint inside a transaction — load testing showed two simultaneous sign-ups could otherwise both take the last place.
Live demo · Source

About

Pattern: Paragraph one, where you are. Paragraph two, something specific and human.

I am in my final year of computer science at Manchester, and I have spent most of it building back-end services — mostly Python and Go, mostly things that had to survive other people using them.
I got into programming automating the rota at the pub I worked at, which taught me that most useful software is deeply unglamorous. At the moment I am learning more about distributed systems, and running the university’s Linux society badly.

Technologies

Grouped by category. No percentage bars, no star ratings — they are actively disliked and they invite a question you cannot answer.

Languages Python, Go, SQL, TypeScript
Data PostgreSQL, Redis, SQLite
Tools Docker, GitHub Actions, Linux

Contact

The fastest way to reach me is email: priya@example.com. My CV is here (PDF) and I am on GitHub as priya-raman.

The HTML skeleton

Semantic HTML with correct heading order and landmarks. Style it however you like; the structure below is what makes it accessible and what a screen reader will navigate.

index.htmlhtml

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Priya Raman — Back-end Developer</title>
  <meta name="description"
        content="Final-year CS student building APIs and data pipelines
                 in Python and Go. Available from July 2027.">
  <link rel="icon" href="/favicon.svg">
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <header>
    <h1>Priya Raman</h1>
    <p class="role">Back-end developer</p>
    <p class="pitch">
      Final-year computer science student. I build APIs and data
      pipelines in Python and Go. Available from July 2027.
    </p>
    <nav aria-label="Profiles">
      <a href="https://github.com/priya-raman">GitHub</a>
      <a href="/priya-raman-cv.pdf">CV (PDF)</a>
      <a href="mailto:priya@example.com">Email</a>
    </nav>
  </header>

  <main>
    <section aria-labelledby="projects-heading">
      <h2 id="projects-heading">Projects</h2>

      <article>
        <h3>Society Events Platform</h3>
        <p>Event sign-ups for three university societies.
           Ran a full term, around 400 registrations.</p>
        <p class="stack">Django · PostgreSQL · Redis · Fly.io</p>
        <p>
          Capacity is enforced with a database constraint inside a
          transaction — load testing showed two simultaneous sign-ups
          could otherwise both take the last place.
        </p>
        <p class="links">
          <a href="https://events.example.dev">Live demo</a>
          <a href="https://github.com/priya-raman/society-events">Source</a>
        </p>
      </article>

      <!-- Repeat for project two, and optionally three -->
    </section>

    <section aria-labelledby="about-heading">
      <h2 id="about-heading">About</h2>
      <p>...</p>
    </section>

    <section aria-labelledby="skills-heading">
      <h2 id="skills-heading">Technologies</h2>
      <dl>
        <dt>Languages</dt><dd>Python, Go, SQL, TypeScript</dd>
        <dt>Data</dt><dd>PostgreSQL, Redis, SQLite</dd>
        <dt>Tools</dt><dd>Docker, GitHub Actions, Linux</dd>
      </dl>
    </section>
  </main>

  <footer>
    <p>priya@example.com</p>
  </footer>
</body>
</html>

File structure

portfolio/

index.html# the whole site
styles.css
favicon.svg# a letter on a coloured square is fine
priya-raman-cv.pdf# named after you, not CV_final_v3
images/
- society-events.png# or a .gif of it working
- log-analyser.png
README.md# yes, this repository needs one too

Page metadata

Four things, and most student portfolios get at least two of them wrong:

Title. “Priya Raman — Back-end Developer”. Not “Create Next App”.
Meta description. The same sentence as your header. It appears in search results and in link previews.
Favicon. The default globe looks unfinished.
Open Graph image. Optional, but it means your link looks deliberate when someone shares it in a hiring channel.

Deploying it

Push to GitHub, connect the repository to Vercel, Netlify, Cloudflare Pages or GitHub Pages, and it deploys on every commit. All four have free tiers that comfortably cover a portfolio site. For a plain HTML site like the skeleton above, GitHub Pages needs no third-party account at all.

Then run through the pre-publish checks — real phone, every link, Lighthouse, private window — in the full portfolio website guide.

Developer Portfolio Website Template