5 switchable templates: Modern Tech, Corporate Executive, Minimalist ATS, Creative Timeline, Traditional Biodata
ViteHTMLPortfolio
cv-template — Vite Portfolio Template
By Rana0Codes
A client-side CV and Indian Biodata generator built with Vite and vanilla HTML, offering multiple templates and A4 PDF export via browser printing.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-10View source
What stands out
A quick read of the recorded project description.
7-step form editing, with collapsible work experience and education cards
Export A4 portrait PDF via browser printing, with selectable text
Data stored only in localStorage, with JSON backup export
Includes PWA manifest and Service Worker, enabling offline use after caching
Provides npm scripts for syntax checking, building, end-to-end and PDF export testing
Template Details
cv-template is a browser-based CV and Indian Biodata creation tool built with Vite and vanilla HTML/CSS/JavaScript. Users fill in content through a 7-step form and switch between 5 templates: Modern Tech, Corporate Executive, Minimalist ATS, Creative Timeline, and Traditional Biodata. The templates cover technical roles, management roles, general ATS scenarios, timeline presentation, and Indian academic and official Biodata tables.
Data is stored in the browser's localStorage and is not uploaded to a server; the initial page load requests a Google Fonts stylesheet. Export options include invoking the browser print function to generate an A4 portrait PDF, plain-text ATS format, and JSON backup. The project includes a PWA manifest and Service Worker, allowing offline use after caching.
The repository provides npm scripts for syntax checking, Vite builds, end-to-end verification, and PDF export testing, and includes GitHub Actions CI and GitHub Pages deployment configuration. The code is licensed under MIT.
ViteHTMLPortfolio
Is it right for your project?
Use Cases
- Creating a CV for technical roles and exporting it as an A4 PDF
- Generating a traditional Biodata table for Indian academic or official contexts
- Filling in and exporting CV content without a network connection
- Switching between templates to compare the layout of the same CV
Suitable For
- Job seekers who need to quickly generate a CV and print it as a PDF
- Users who want data to remain in the local browser without relying on a backend service
- Users who need an Indian Biodata format template
- Front-end developers who want to modify templates based on MIT-licensed code
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning the repository, run npm install to install development dependencies such as Vite and Puppeteer, then run npm run dev to start the local development server
- 2
You can also use python -m http.server or VS Code Live Server to open index.html directly, with no build step required
- 3
When exporting a PDF, select "Save as PDF" in the browser print dialog, enable background graphics, and set margins to "None" or "Default"
- 4
Data is stored in the localStorage key cv_template_state_v1 and does not sync across devices; use the JSON export feature to back it up
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version from the public repository under the MIT license; the free scope applies to that version's code and does not imply that external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercially use, and distribute this version's code for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; the code's MIT license alone is not sufficient to determine this.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
- The initial page load makes an external network request to Google Fonts to load the font stylesheet; if fully offline operation or avoidance of external requests is required, font loading must be handled separately.
- Data is stored only in the localStorage of the current browser profile and does not automatically sync across devices or browsers; use the JSON export feature to manually back up or migrate it.
- Exporting an A4 PDF depends on the browser print dialog, requiring manual selection of "Save as PDF", enabling background graphics, and setting margins to "None" or "Default"; otherwise the page dimensions may be inaccurate.
- Running npm install installs development dependencies such as Vite and Puppeteer; Puppeteer may download Chromium, requiring network access and additional disk space.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
External network requests are strictly limited to the browser loading open Google Fonts stylesheets (`Inter`, `Merriweather`, `Plus Jakarta Sans`) during initial page load.
Original README
Because storage is local to the current browser profile, data is not automatically synced across devices or browsers. Users should utilize the **Export JSON** feature to back up or transfer resume configurations.
Original README
Users select **"Save as PDF"** in the print dialog with background graphics enabled and margins set to "None" or "Default" for exact A4 paper calibration.
Original README
https://github.com/Rana0Codes/cv-template/blob/main/LICENSEhttps://github.com/Rana0Codes/cv-template/blob/main/README.mdInstall dev dependencies (Vite & Puppeteer)
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-10. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 85 / 100
- Technologies
- Vite · HTML
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-10-10
- Screenshot last checked
- 2026-10-10
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-11
Inspect the recorded source material
SHA-256: 779aa76b6dfb67055c5ad9a05da3a735ba82cd9be53c58d8e1b17206897edf99
2026-10-10T19:43:38.278Z
Source file / repository<div align="center">
# 📄 CV Template
### Professional ATS-Optimized Resume & Biodata Studio
A lightweight, zero-dependency, privacy-first client-side document authoring studio.<br/>
Engineered for **100% ATS compatibility**, seamless responsive ergonomics, and **vector-sharp A4 PDF export**.
---
[](https://github.com/Rana0Codes/cv-template/actions/workflows/ci.yml)
[](https://rana0codes.github.io/cv-template/)
[](https://rana0codes.github.io/cv-template/)
[](LICENSE)
[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[](package.json)
[](css/base.css)
[](manifest.json)
[](css/base.css)
[](#-interactive-ats-readiness-index)
</div>
---
## 🌟 Visual Showcase
### 1. Document Authoring Studio
Spacious 960px centered workspace with completed stepper indicators, in-studio layout bar, and interactive ATS readiness gauge:
<p align="center">
<img src="docs/images/desktop-studio.png" alt="CV Template Authoring Studio" width="850">
</p>
---
### 2. Interactive ATS Compatibility Index Modal
Real-time scoring algorithm breaking down recruiter and ATS parser criteria into an actionable checklist:
<p align="center">
<img src="docs/images/ats-checklist-modal.png" alt="ATS Readiness Checklist Modal" width="850">
</p>
---
### 3. Full-Screen Canvas Desk with Live Styling
Full-screen review desk with zoom controls (`Fit`, `75%`, `100%`, `125%`), live layout switching, instant accent swatches, and typography selection:
<p align="center">
<img src="docs/images/preview-modal.png" alt="Full-Screen Preview Modal with Live Customizer" width="850">
</p>
---
### 4. Mobile Ergonomics
Clean single-hand mobile experience with segmented view tabs, native preset select, and horizontal scrolling rails:
<p align="center">
<img src="docs/images/mobile-editor.png" alt="Mobile Editor View" width="340">
</p>
---
## 🚀 Key Features
* **5 Distinct ATS-Optimized Templates:**
- **Modern Tech**: Two-column layout with skills category matrix and technical highlights.
- **Corporate Executive**: Asymmetric sidebar, leadership highlights, and formal signature block.
- **Minimalist ATS**: Universal single-column layout engineered for 100% parser pass rates (Workday, Taleo, Greenhouse).
- **Creative Timeline**: Chronological vertical axis connecting career milestones with indigo accents.
- **Traditional Biodata**: Formal tabular layout for academic credentials and personal particulars.
* **Dual Design Customizer (In-Studio & In-Preview):**
- Instant layout switching across all 5 designs without losing filled data.
- 6 executive accent swatches (*Corporate Teal, Royal Navy, Emerald Green, Indigo Purple, Executive Burgundy, Slate Charcoal*) plus a native color picker.
- 4 typography engines: Sans (*Inter*), Corporate (*Calibri*), Serif (*Merriweather*), and Code (*JetBrains Mono*).
* **Collapsible Dynamic Cards:**
- Work Experience and Education cards collapse into concise single-line headers to minimize vertical scrolling fatigue.
* **Interactive ATS Readiness System:**
- Weighted scoring algorithm calculates resume strength in real time.
- Clicking the gauge opens an interactive modal with direct status checklists.
* **Vector-Sharp A4 PDF Export:**
- Native browser vector printing (`window.print()`) calibrated with exact `@page` rules for standard `210mm × 297mm` A4 portrait paper. Zero raster blur and 100% selectable text.
* **100% Privacy & Offline-First PWA:**
- Zero external server calls. All data remains exclusively within the user's browser via `localStorage`.
- Service worker caching enables full offline functionality in air-gapped environments.
---
## 📊 Template Comparison Matrix
| Template | Primary Role / Industry | ATS Match | Format | Key Visual Element |
|---|---|---|---|---|
| **Modern Tech** | Software Engineering, DevOps, Cloud | **98%** | 2-Column Grid | Technical Skills Matrix & Status Badges |
| **Corporate Executive** | Directors, Operations, Leadership | **96%** | Asymmetric Sidebar | Career Highlights & Signature Block |
| **Minimalist ATS** | Universal / High-Volume Corporate | **100%** | Single Column | High-Density Linear Parser Text |
| **Creative Timeline** | Designers, Product Managers, Leads | **95%** | Chronological Axis | Vertical Timeline Dots & Milestone Cards |
| **Traditional Biodata** | Academic, Indian Civil & Corporate | **94%** | Tabular Grid | Formal Particulars Table & Marksheet Grid |
---
## 🏗️ Architecture Overview
The system uses a unidirectional reactive architecture centered around an immutable data store:
```mermaid
flowchart LR
subgraph Input ["Authoring Layer"]
FB["Form Builder<br/>7 Steps"]
TP["Template Picker<br/>Studio & Modal"]
PU["Photo Uploader<br/>Canvas Compression"]
end
subgraph Core ["State & Persistence"]
Store["Reactive Store<br/>js/store.js"]
Local[("localStorage<br/>Client-Only")]
end
subgraph Renderers ["Template Registry"]
T1["Modern Tech"]
T2["Corporate Teal"]
T3["Minimalist ATS"]
T4["Creative Timeline"]
T5["Traditional Biodata"]
end
subgraph Outputs ["Export Suite"]
PDF["Vector A4 PDF<br/>@page print"]
TXT["Plain Text ATS"]
JSON["JSON Backup"]
end
Input --> Store
Store <--> Local
Store --> Renderers
Renderers --> PDF
Store --> TXT
Store --> JSON
```
For complete technical specifications, see [`ARCHITECTURE.md`](ARCHITECTURE.md).
---
## ⚡ Quick Start
Because **CV Template** is built with modern ES Modules and native web standards, **no build step or compilation is required to run**.
### Option A: Local Dev Server with Hot Reload (Recommended)
```bash
# Clone the repository
git clone https://github.com/Rana0Codes/cv-template.git
cd cv-template
# Install dev dependencies (Vite & Puppeteer)
npm install
# Start local dev server
npm run dev
```
Open `http://localhost:5173` in your browser.
### Option B: Python HTTP Server (Zero Install)
```bash
python -m http.server 8000
```
Open `http://localhost:8000` in your browser.
### Option C: VS Code Live Server
Right-click `index.html` and select **"Open with Live Server"**.
---
## 🧪 Automated Testing & Verification
```bash
# Verify JavaScript syntax across all modules
npm run check
# Test Vite production bundle build
npm run build
# Run automated browser E2E verification suite
npm test
# Run automated vector A4 PDF export test
npm run test:pdf
```
---
## ⌨️ Productivity & Keyboard Shortcuts
| Shortcut | Context | Action |
|---|---|---|
| <kbd>Esc</kbd> | Global | Close full-screen preview modal or ATS checklist modal |
| <kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Cmd</kbd> + <kbd>P</kbd> | Global | Open full-screen preview and trigger vector A4 PDF print dialog |
| <kbd>Tab</kbd> / <kbd>Shift</kbd> + <kbd>Tab</kbd> | Editor | Natural accessibility-compliant focus navigation across inputs |
---
## 🌐 Browser Compatibility
| Browser | Minimum Version | Status |
|---|---|---|
| **Google Chrome** | 88+ | Full Support |
| **Microsoft Edge** | 88+ | Full Support |
| **Mozilla Firefox** | 85+ | Full Support |
| **Apple Safari** | 14+ | Full Support |
---
## 📁 Repository Structure
```text
cv-template/
├── .github/
│ ├── workflows/
│ │ ├── ci.yml # Automated syntax check & build verification
│ │ └── deploy.yml # Automated GitHub Pages deployment
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md # Structured bug reporting template
│ │ └── feature_request.md # Template for layout and feature suggestions
│ └── PULL_REQUEST_TEMPLATE.md # Standard pull request checklist
│
├── assets/ # Brand icons, logo, and synthetic demo avatars
├── css/
│ ├── base.css # Tokens, typography, header, modals, toasts
│ ├── editor.css # 7-step editor, collapsible cards, ATS bar
│ ├── preview.css # Full-screen canvas desk, live customizer
│ ├── print.css # Vector A4 @page print stylesheet
│ └── templates/ # Individual stylesheets for templates 1–5
│
├── docs/
│ └── images/ # High-resolution showcase screenshots
│
├── js/
│ ├── app.js # Application orchestrator and event binding
│ ├── store.js # Reactive state store & localStorage sync
│ ├── defaults.js # Synthetic demo personas (Zero PII)
│ ├── export/ # Vector PDF, plain text ATS, JSON exporters
│ ├── templates/ # Modular HTML template renderers 1–5
│ └── ui/ # Form builder, photo uploader, styler, icons
│
├── tests/
│ ├── verify-suite.js # Automated E2E & minimal data test suite
│ └── pdf-export.js # Automated vector PDF export test runner
│
├── ARCHITECTURE.md # Deep-dive system architecture documentation
├── CODE_OF_CONDUCT.md # Contributor Covenant v2.1
├── CONTRIBUTING.md # Contributor guide & coding standards
├── LICENSE # MIT License
├── README.md # Project landing page & documentation
├── SECURITY.md # Security & privacy policy
├── index.html # Application HTML shell
├── manifest.json # PWA Web App manifest
├── package.json # Project manifest & npm scripts
└── sw.js # PWA offline-first service worker
```
---
## 🔒 Privacy Architecture & Data Flow
* **Client-Side Persistence:** All resume content and biodata fields remain exclusively in the user's browser runtime and persist under `localStorage` (`cv_template_state_v1`).
* **Device-Specific Storage:** Because storage is local to the current browser profile, data is not automatically synced across devices or browsers. Users should utilize the **Export JSON** feature to back up or transfer resume configurations.
* **Network Transparency:** Zero user data, form values, or telemetry are transmitted to any server. External network requests are strictly limited to the browser loading open Google Fonts stylesheets (`Inter`, `Merriweather`, `Plus Jakarta Sans`) during initial page load.
* **Air-Gapped Operation:** Once cached via the Service Worker (`sw.js`), the application is capable of 100% offline execution.
* **Print Engine Dependency:** Vector PDF generation triggers the browser's native print engine (`window.print()`). Users select **"Save as PDF"** in the print dialog with background graphics enabled and margins set to "None" or "Default" for exact A4 paper calibration.
---
## 🤝 Contributing
Contributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) and [Code of Conduct](CODE_OF_CONDUCT.md) before submitting pull requests.
---
## 📄 License
This project is licensed under the **MIT License** — see the [LICENSE](LICENSE) file for details.
Explore similar templates
Compare previews and descriptions within the same stack and category.
Resumify
Resumify is a browser-based resume builder built with React, TypeScript, and Vite.
Vite · Portfolio
showlit
Showlit is a personal website template built with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui.
Vite · Portfolio
folium
A developer portfolio template built with Vite, React, TypeScript, and Tailwind CSS.
Vite · Portfolio
kurizu-discord
A personal portfolio website built with React and Vite that mimics the Discord desktop app, organizing projects, skills, and experience into customizable channels, threads, a member list, and emoji reactions.
Vite · Portfolio
about-me-personal-portfolio-website-template
AboutMe is a free personal website template built with Bootstrap and Vite, released under the MIT license. It provides a single-page index.html with organized src directories for images, JavaScript, and SCSS, along with npm scripts for development and build.
Vite · Portfolio
HackFolio
HackFolio is a hacker-style personal portfolio template for ethical hackers, penetration testers, bug bounty hunters, red teamers, and cybersecurity professionals.
Vite · Portfolio