Free Portfolio Website Template (HTML & CSS, 2026)
A clean, responsive, accessible personal portfolio template in plain HTML and CSS — hero, projects grid, about and contact sections — ready to copy, customize and deploy.
This is a free, responsive portfolio website template built with plain HTML and modern CSS — no framework, no build step. It has a hero, a projects grid, an about section and a contact call-to-action, uses CSS custom properties so you can restyle it in seconds, and is accessible and mobile-first out of the box. Copy it, make it yours, and deploy.
What you get
- A semantic, accessible single-page layout (header, hero, projects, about, contact, footer).
- A responsive projects grid that reflows with no media queries (
auto-fit+minmax). - Fluid typography with
clamp()and a tidy dark theme via CSS custom properties. - Zero dependencies — just two files, works anywhere.
Try it live
The complete template runs live below — edit the HTML and CSS and watch the preview update instantly. Open it in XCODX Studio when you want to make it your own.
How it's built
A clean, semantic personal site: a hero, a projects grid, an about section, and contact links — one <h1>, ordered headings, and screen-reader-friendly markup throughout. The design tokens live at the top of the stylesheet, so changing --accent and the font restyles the whole site. It is two static files that deploy free and instantly.
- Semantic, screen-reader-friendly structure with a single
<h1> - Design tokens at the top — edit
--accentto re-theme everything - A responsive projects grid that reflows on its own
- Two static files — free, instant hosting
How to customize
- Colors: change
--accent,--bg,--surfaceand--textin:root. For a light theme, flip--bg/--textand setcolor-scheme: light. - Content: replace the name, hero copy, and the three project cards. Add more cards — the grid reflows automatically.
- Sections: duplicate a
<section class="section">to add experience, skills or testimonials. - Fonts: the system font stack is fast and free; to use a web font, add a
@font-faceand set it onbody(see how to optimize CSS).
Deploy it
It’s two static files, so hosting is free and instant on Netlify, Vercel, Cloudflare Pages or GitHub Pages — drag the folder in, or connect a repo. Because there’s no build step, there’s nothing to configure.
Frequently asked questions
Is this portfolio template free to use?
How do I make the portfolio template light instead of dark?
:root: set --bg to a light color (e.g. #ffffff), --surface to a light grey, --text to a dark color, and change color-scheme: dark to light. Because every color references a variable, the whole site switches theme from those few edits.Do I need a framework or build tools?
How do I add more projects?
<article class="card"> blocks inside the projects grid and change its content. The grid uses repeat(auto-fit, minmax(240px, 1fr)), so it automatically arranges any number of cards into a responsive layout with no extra CSS.Open this template in XCODX Studio to edit and preview it live in your browser — then deploy. See also the landing page template, resume website template and our CSS best practices.