Build a CV that opens doors — free, fast, and fully in your browser.
Nine templates · Live preview · Custom fonts & colors · One click PDF export · Zero backend
Resumify is a CV / resume builder website built with pure HTML, CSS, and vanilla JavaScript — no frameworks, no build step, no backend, no database. Pick a template, fill in a form, watch your CV update live next to you, and export a print‑ready PDF — all of it running entirely in the visitor's own browser.
Because there's no server-side processing, your data never leaves your device until you choose to download it. There's also no meaningful limit on how many people can use it at once, or how many CVs a single person can create — everything is powered by the browser's own memory and localStorage.
- 9 distinct templates — Modern, Minimal, Classic, Creative, Professional, Compact, Executive, Corporate, Elegant
- True multi-page pagination — long CVs automatically flow onto a second, third (etc.) page, without ever splitting a section awkwardly across a page break. What you see in the preview is exactly what prints and exports.
- Live preview — a real split-screen layout; every keystroke updates the CV instantly, no "preview" button needed
- Profile photo upload with circular preview, shown consistently across every template
- 17+ Google Fonts to style the CV content, loaded on demand
- Accent color — 7 curated presets plus a full custom color picker
- Text color override — fix low-contrast text on any template with presets or a custom picker
- Two badge styles for Skills / Hobbies / Certifications / Languages — soft "Bubble" pills or outlined "Rectangle" chips
- Dynamic, repeatable sections — Work Experience, Education, Projects, References (each with add/remove)
- Tag-based sections — Skills, Hobbies, Certifications, Languages
- Full personal details — name, title, email, phone, address, LinkedIn, portfolio, father's name, date of birth, marital status, CNIC number
- Autosave — every field is saved to
localStorageas you type; refreshing the page never loses your progress - Template switching mid-build — change your layout at any point without losing a single field
- Compressed PDF export —
html2canvas+jsPDF, JPEG-compressed output that stays small without sacrificing print quality
- Landing page, template gallery, builder, about, and contact pages
- Fully responsive — collapses gracefully from desktop → tablet → mobile, including a working hamburger nav
- Themed scrollbars, accessible focus states,
prefers-reduced-motionsupport - SEO-complete: unique titles/descriptions/keywords per page, Open Graph + Twitter Card image, JSON-LD structured data,
sitemap.xml,robots.txt, single-H1 semantic structure throughout
| Layer | Tech |
|---|---|
| Structure | Semantic HTML5 |
| Styling | CSS3 with a centralized custom-property design system (variables.css) |
| Behavior | Vanilla JavaScript (ES6+), no frameworks |
| Icons | Font Awesome 6 + Bootstrap Icons |
| Fonts | Google Fonts (loaded dynamically) |
| PDF export | html2canvas + jsPDF (via CDN) |
| Persistence | Browser localStorage — no database, no backend |
resumify/
├── index.html # Landing page
├── templates.html # Template gallery / selection page
├── builder.html # CV builder (form + live preview + PDF export)
├── about.html
├── contact.html
├── robots.txt
├── sitemap.xml
├── css/
│ ├── variables.css # Design tokens: colors, type scale, spacing, radius, shadows, motion
│ ├── main.css # Site-wide layout, nav, footer, buttons, hero, cards
│ ├── templates.css # Template gallery styling
│ └── builder.css # Builder layout, form controls, and every CV template's print styles
├── js/
│ ├── builder.js # State, form bindings, pagination engine, CV rendering
│ ├── fontLoader.js # On-demand Google Font loading for the CV font picker
│ ├── pdfExport.js # html2canvas + jsPDF export pipeline
│ ├── templates.js # Template gallery card interactions
│ └── nav.js # Mobile hamburger nav toggle
└── assets/
└── images/
├── logo.svg # Brand mark, also used as favicon
└── og-cover.png # Open Graph / social share image
Every visual token lives in css/variables.css — colors, spacing, font sizes, radii, shadows, and transition timings are all CSS custom properties, so restyling the whole site means editing one file.
Palette
| Token | Hex |
|---|---|
--black |
#0a0908 |
--jet-black |
#22333b |
--white-smoke |
#f2f4f3 |
--dusty-taupe |
#a9927d |
--stone-brown |
#5e503f |
Type
- Headings:
Michroma - Body:
Poppins - CV content font is independently selectable per resume (17+ options)
Instead of faking a single tall scrolling page, builder.js measures every CV section (Summary, Experience, Education, Skills, Hobbies, Projects, Certifications, Languages, References, Personal Details) against an invisible probe element sized to match a real A4 sheet. It then greedily packs whole sections onto each page — a section is never split mid-content; if it doesn't fit, it moves entirely to the next page. Each page is rendered as its own real DOM sheet (.cv-page-sheet), so:
- The on-screen preview, the browser's native print (
Ctrl/Cmd + P), and the exported PDF all show the exact same number of pages. - PDF export captures each sheet individually via
html2canvasand adds it as its own PDF page, compressed as JPEG to keep file size small.
No build step, no dependencies to install.
git clone https://github.com/<your-username>/resumify.git
cd resumifyThen just open index.html in a browser, or serve it locally:
# Option 1: Python
python3 -m http.server 8080
# Option 2: Node
npx serve .Visit http://localhost:8080.
Resumify is a fully static site, so it deploys anywhere that serves static files — Vercel, Netlify, GitHub Pages, Cloudflare Pages, or a plain server.
Vercel
npm i -g vercel
vercelNo environment variables, no server config, no database connection required.
Before going live, update the placeholder domain (
resumify.example.com) inrobots.txt,sitemap.xml, and the<link rel="canonical">/ Open Graph tags across all five HTML pages to your real domain.
- Drag-and-drop section reordering
- Cover letter builder
- Import an existing CV (parse a PDF/DOCX into the form)
- Additional export formats (DOCX)
- More templates
Issues and pull requests are welcome. If you're proposing a large change (a new template, a new builder section), please open an issue first to discuss the approach.
- Fork the repo
- Create a branch:
git checkout -b feature/your-feature - Commit your changes
- Push and open a PR
Licensed under the MIT License — free to use, modify, and distribute.
Built and maintained by Hammad. Portfolio: code-cove-nine.vercel.app