A personal, high-performance resume builder built for the modern web. Folio is entirely local-first — there is no database, no authentication, and no paywalls. All of your data is stored securely in your browser using IndexedDB and localStorage, putting you completely in control of your information.
# 1. Install dependencies
npm install
# 2. Set up environment
cp .env.example .env.local
# Add your Gemini API key: https://aistudio.google.com/app/apikey
# 3. Start the development server
npm run devOpen http://localhost:3000 to start building.
A 7-step guided process (Personal Info → Experience → Education → Skills → Projects → Optional Sections → Finalize) that you can navigate non-linearly.
- Live split-view: Edit on the left, see real-time preview updates on the right.
- Inline Editing: Click any text directly on the preview panel to edit it without going back to the form blocks.
- Section Reordering: Drag and drop your resume sections into any order via the dedicated ⊞ (Layers) panel, and reorder individual experience or project entries intuitively.
Choose from 4 beautifully crafted, ATS-friendly templates. Data is completely decoupled from presentation, meaning you can switch templates instantly without losing any progress.
| Template | Style |
|---|---|
| Classic | Traditional serif, center-aligned header. Perfect for finance and law. |
| Modern | Clean sidebar layout with an accented boundary line. Great for tech and design. |
| Compact | Dense and space-efficient sans-serif. Ideal for long work histories. |
| Executive | High-contrast dark header band with elegant Garamond typography. |
Made a mistake? Folio maintains a full history stack of up to 100 steps per session.
- Tracked visually with a history badge.
- Keyboard accessible:
Ctrl+Zto undo,Ctrl+Shift+ZorCtrl+Yto redo.
Manage multiple tailored resumes for different roles.
- Create, load, rename, duplicate, and delete distinct resume sessions.
- Each resume tracks its own completion score and last-modified timestamp.
- Accessible via the folder icon in the header or
Ctrl+N.
Folio does not rely on flaky browser screenshots or HTML-to-canvas rendering. It features a bespoke PDF rendering pipeline powered by @react-pdf/renderer.
- Fully selectable vector text — readable by any Applicant Tracking System (ATS, e.g., Workday, Greenhouse).
- True A4 Pagination — elegant page breaks that intelligently wrap without cutting off text.
- Crisp Typography — built-in system fonts ensure your resume looks sharp at any zoom level.
Folio optionally integrates with Google Gemini 1.5 Flash to provide powerful, in-browser AI assistance without sending your personal data to remote builder servers.
ATS Analyzer Paste a target job description into the Finalize step to receive a comprehensive compatibility analysis:
- A targeted 0–100 ATS compatibility score.
- Missing keyword identification and section-by-section breakdown.
- Prioritized, actionable suggestions to improve your match rate.
Bullet Strengthener Writing strong impact statements is hard. Click "Strengthen" on any experience or project bullet point:
- AI tightens your language and injects strong action verbs while preserving your specific facts.
- Review multiple alternatives and a brief explanation of the improvement.
- One-click application to immediately upgrade your resume.
- Framework: Next.js (App Router), React, TypeScript
- Styling: Tailwind CSS v4
- State Management: React Context +
useReducerfor global tracking and history state - Local Persistence:
idb(IndexedDB) +localStorage - PDF Generation:
@react-pdf/renderer - Drag & Drop:
@dnd-kit(Section Reordering) + Native HTML5 DnD (Entry Reordering) - AI Inference:
@google/generative-ai(Gemini)
| Shortcut | Action |
|---|---|
Ctrl+Z |
Undo |
Ctrl+Shift+Z / Ctrl+Y |
Redo |
Ctrl+S |
Export active resume as PDF |
Ctrl+N |
Open Session Manager to switch/create resumes |
Esc |
Close fullscreen preview or active overlays |