A free, single-file HTML resume/CV template with a dark "constellation" starfield theme, a responsive two-column layout, and a sticky sidebar. No build tools, no dependencies to install — open the file in a browser and it just works.
Two ready-to-use colour variants are included:
| File | Theme |
|---|---|
john-doe-resume.html |
Green & blue accent palette |
jane-doe-resume.html |
Gold & violet accent palette |
Both files are structurally identical — pick whichever colour scheme you prefer and edit the placeholder content.
- Single HTML file — all CSS is inlined in a
<style>block, so there's nothing to bundle or compile. - Animated starfield background rendered on an HTML
<canvas>, withprefers-reduced-motionsupport to disable it for users who prefer less motion. - Two-column layout with a sticky sidebar (skills, tags, awards, languages, education) that collapses to a single column on smaller screens.
- Experience timeline with hover effects for listing roles chronologically.
- Projects grid ("star cards") for linking out to selected work.
- Skill progress bars, language proficiency dots, and pill-style tag/interest lists.
- Contact section with icon-based social links (email, GitHub, LinkedIn, YouTube, Mastodon, etc.).
- Optional blank content block you can repurpose for a personal statement, case study, or testimonials.
- Font Awesome 6 icons and Google Fonts (Montserrat, Sora, JetBrains Mono), loaded via CDN.
- Fully responsive, with sensible breakpoints for tablet and mobile.
- Download or clone the repository:
git clone https://github.com/tjaart-code/Free-HTML-Resume-Template.git
- Open
john-doe-resume.htmlorjane-doe-resume.htmldirectly in your browser to preview it. - Make a copy and rename it (e.g.
my-resume.html), then edit the content to match your own details.
No local server, package manager, or build step is required — it's a static HTML file that can be opened directly or hosted anywhere.
All content lives directly in the HTML body, and all styling lives in the <style> block at the top of the file.
- Name, title, and bio — edit the
<h1>,.role-line, and.biocontent near the top of<body>. - Headshot — replace the placeholder inline SVG
srcon the.headshot imgelement with a path to your own photo. - Colour palette — adjust the CSS custom properties at the top of the stylesheet:
:root{ --bg-deep: #0a0c16; --gold: #3f8f5f; /* primary accent */ --violet: #4fa3d1; /* secondary accent */ --lavender: #a9c4d4; --white: #f5f6fa; }
- Sections — each part of the page (Experience, Projects, Contact, the blank custom block, and the sidebar's Skills/Awards/Languages/Education) is a self-contained HTML block marked with a comment (e.g.
<!-- EXPERIENCE -->). Duplicate or remove blocks as needed. - Skill bars — set the visible percentage in
.skill-pctand match it in thedata-fillattribute on.skill-fill. - Icons — swap any
<i class="fa-solid ...">/<i class="fa-brands ...">class for another Font Awesome 6 icon.
Since it's a static HTML file, you can host it anywhere that serves static content, for example:
- GitHub Pages — commit your renamed file (e.g. rename it to
index.html) and enable Pages for the repository. - Netlify / Vercel / Cloudflare Pages — drag-and-drop deploy or connect the repo.
- Any static web host — upload the file via FTP/SFTP.
This project is licensed under the GNU General Public License v3.0 — see LICENSE for the full text.
- Icons by Font Awesome
- Fonts by Google Fonts (Montserrat, Sora, JetBrains Mono)
