How to Build and Publish a One-Page Portfolio in HTML

hdply · 2026-07-17

A portfolio's job is to show your work and tell people how to reach you. That fits comfortably in one HTML file — no CMS, no template marketplace, no monthly builder subscription. Here's a practical structure and how to get it online.

The sections that matter

Almost every good one-page portfolio has the same handful of parts, in this order:

A header — your name and one line on what you do ("Front-end developer" beats a vague tagline).
Selected work — three to six pieces, each with an image, a sentence, and a link. Curate; more is not better.
About — a short paragraph, not a life story.
Contact — an email link or a simple form so people can actually reach you.

A skeleton to start from

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jane Doe — Designer</title>
</head>
<body>
  <header><h1>Jane Doe</h1><p>Product designer in Seoul</p></header>
  <section id="work">...</section>
  <section id="about">...</section>
  <footer><a href="mailto:jane@example.com">Email me</a></footer>
</body>
</html>

Keep the CSS inline in a <style> block so the whole thing stays one file. If you'd rather not start from a blank page, ask an AI assistant for "a single self-contained HTML portfolio page" and edit from there.

Make it look intentional

You don't need design talent, just restraint: one or two fonts, generous whitespace, a single accent color, and consistent spacing. Add the viewport tag (above) so it reads well on phones, and give it a favicon and social preview so shared links look finished.

Put it online

When it's ready, publish it: on hdply, paste your HTML (or drag the file in), pick a subdomain, and it's live at something like jane.hdply.com with HTTPS. Updating it later is just editing and saving — handy when you add a new project or refresh your bio.

Grow it later if you want

A single page is a perfectly respectable portfolio — plenty of professionals never need more. If you eventually want separate case-study pages, you can add them without throwing anything away. Start with one page live today rather than a perfect site that never ships.