Log in
Problem: uploading your resume/CV to a job portal should yield a perfectly parsed CV but often does not. This is true even if your template .docx is a claimed good starting point for later ingesting into such systems.
Building the Future of Digital Resumes: A Technical Deep Dive
In an era where Applicant Tracking Systems (ATS) and job portals increasingly dominate the recruitment landscape, the traditional PDF resume is showing its age. What if we could create a resume format that’s simultaneously machine-readable, human-friendly, and completely self-contained? Well, that ended up being a side project - read on.
The Problem with Traditional Resumes
Traditional resume formats present a fundamental challenge:
- PDFs look great but are difficult for ATS systems to parse accurately, even in the nascent AI era.
- Word documents are editable but inconsistent across platforms
- Plain text is machine-readable but lacks visual appeal
- Linked In would like to own this space, but they’re way too much lock in, and spend too much trying to keep your engagement in their pages, vs get you a job.
The Solution: JSON Resume Schema + Interactive HTML
This repository showcases a evolutionary approach that combines the best of two words - mnachine parsable and appealing to human eyes. The raw storage of the CV/resume data:
Every resume uses the official JSON Resume standard:
{
"$schema": "https://raw.githubusercontent.com/jsonresume/resume-schema/v1.0.0/schema.json",
"basics": { "contact": "info and summary elemnts" },
"work": [ { "employment": "history blah blah blah" } ],
"education": [ { "degrees": "and certifications" } ],
"skills": [ { "technical": "abilities yada yada"} ],
"and": "ten more standardized sections"
}
Each resume/CV is a single HTML file containing:
- Embedded JSON data above in a
<script>tag for ATS extraction - Inlined CSS (~1000 lines) for complete visual control
- Inlined JavaScript (~1200 lines) for interactive features
- Zero external dependencies for viewing (optional CDN for PDF generation)
The same file serves two masters:
- Machines: Extract structured JSON data for database import. It could have as easily been XML or YAML, but JSON parsing in web pages is built in.
- Humans: Styled and responsive HTML with some interactive features
Some interactivity to control verbosity
You can click a pen to go into edit mode. Editing isn’t text, it is contract (-) and expand (+) affordances to reduce the verbosity of sections. While I may gush about the origin story of Selenium an in-firm recruiter, then agent who’s taken my CV to them, the downstream interviewers are spectacularly uninterested in that so they’ll hit (-) to collapse that section. This’ll persist if you go on to print the resume/CV, but not if you close the tab.
Responsive Design with Print Optimization
The CSS includes specialized media queries to ensures URLs are visible in printed versions—crucial for ATS systems and recruiters. Versus just hyperlinks when that’s in a browser. No big deal perhaps.
PDF Generation Pipeline
For enhanced PDF output, the system dynamically loads:
- html2canvas: Renders HTML to canvas with pixel-perfect accuracy
- jsPDF: Converts canvas to professional PDF format
Ignoring this lazy load of JavaScript from CDNs, this was otherwise a zero dependency tech.
Sample CVs in the repository
Current collection includes 14 example resumes featuring fictional characters:
- Technical roles: Tony Stark (Genius/Inventor), Harold Finch (Software Engineer)
- Leadership positions: T’Challa (Head of State), Princess Leia (Rebel Leader)
- Diverse backgrounds: Hermione Granger (Academic), Mulan (Military Officer)
Take a look at Sam “Root” Groves from “Person of Interest” TV series; paul-hammant.github.io/better-cv-tech/Samantha_Groves_Resume.html
Implementation Highlights
Markdown Support Within JSON
The system supports basic markdown in key text fields:
**bold text**and*italic text*[link text](https://example.com)for clickable links- Paragraph breaks with
\n\n
This enhances human readability while maintaining ATS compatibility. Well, maybe.
ATS Integration Strategy
For ATS systems to adopt this format, they need minimal changes:
// Extract resume data from HTML
const resumeScript = document.getElementById('cv-data-json');
const resumeData = JSON.parse(resumeScript.textContent);
// Now import structured data directly into database
Likely they’d just snipping of the unparsed source file though. Either way, this is orders of magnitude more reliable than PDF or .docx text extraction or HTML scraping. Even with claimed AI on their side in 2025
Performance Characteristics
- File size: ~80KB per resume (including all assets)
- Load time: Near instant (no external requests for viewing)
- Browser support: Modern browsers with JavaScript turned on (ES6+ required)
- Mobile responsive: Breakpoints at 768px and 480px
Security Considerations
For recruiters receiving HTML resumes:
- ✅ No file system access - Pure DOM manipulation
- ✅ No external requests - Self-contained execution
- ✅ Standard JavaScript - No eval() or dangerous APIs
- ✅ Data transparency - JSON visible in source
Likely there will be some over-cautiousness. Bigger companies could verify the JavaScript within each uploaded CV/resume if they really wanted to. A whitelist of sorts (extract, lint / pretty-print / SHA256 -> check against whitelist).
Getting Started
To create your own resume:
- Copy a template: Use
Lorem_Ipsum_Resume.htmlas your starting point - Replace JSON data: Update the embedded resume data with your information
- Inline css and javascript: They are separate in the repo, as there is fourteen or so sample CV/resumes.
- Test thoroughly: Verify print output and mobile responsiveness
- Name appropriately: Use
FirstName_LastName_Resume.htmlformat
Or get AI to take the constituent pieces and make the page for you. It did so for mine in a couple of mins. Prompt is in the repo.
Links:
Repository: paul-hammant/better-cv-tech
Live Demo: GitHub Pages Gallery - 14 resume/CVs
Schema: JSON Resume v1.0.0
