⚡ ResumeFlow

Modern, Drag & Drop Resume Builder — Runs 100% in the Browser

Build a stunning, ATS-friendly resume in minutes — no sign-up, no cloud, no backend, fully offline.

🌐 → Try it Live: uxle.github.io/Resumeflow

---

✨ Features

Feature	Description
⚡ Real-Time Preview	Every keystroke instantly reflects in the A4 resume preview
🖱️ Drag & Drop Reorder	Pointer-event based 60fps item reordering for Experience, Education & Projects
🌓 Dark / Light Mode	Smooth CSS-variable-driven theme switching with persistent preference
🎨 Custom Accent Color	Live color picker syncs accent across the entire resume and UI
📄 PDF Export	Print-to-PDF via browser with pixel-perfect A4 layout
💾 JSON Import / Export	Save your full resume state, reload it any time — with 5MB validation guard
↩️ Undo / Redo (50 steps)	Full history stack with keyboard shortcuts (Ctrl+Z / Ctrl+Y)
🔒 Auto-Save	Debounced localStorage persistence — your work is never lost
📱 Fully Responsive	Adapts from mobile 320px through ultra-wide 4K displays
♿ Accessibility First	ARIA roles, keyboard navigation, sr-only labels, and focus management
🛡️ XSS-Safe Rendering	All user input is sanitized through a static entity-map escaper
⌨️ Keyboard Shortcuts	Ctrl+S Export · Ctrl+P Print · Ctrl+Z Undo · Ctrl+Y Redo

---

🚀 Quick Start

✅ Option 1 — Use it instantly (No install needed!)

🌐 Open in any browser on any device:

https://uxle.github.io/Resumeflow/

Works on mobile, tablet, and desktop — no download, no sign-up, no install required.

---

💻 Option 2 — Run locally

# 1. Clone the repository
git clone https://github.com/uxle/Resumeflow.git

# 2. Navigate to the project folder
cd Resumeflow

# 3. Open directly in your browser
open index.html
# Or just double-click index.html in your file manager!

That's it. The app loads instantly — no build step, no npm install.

---

🗂️ Project Structure

Resumeflow/
│
├── index.html                  # Application shell & resume preview markup
│
├── css/                        # Layered CSS architecture (cascade-ordered)
│   ├── 01-tokens.css           # Design tokens: colors, spacing, typography, z-index
│   ├── 02-base.css             # CSS reset, base elements, scrollbar, selection
│   ├── 03-layout.css           # Workspace grid, sticky header, scrollable panels
│   ├── 04-controls.css         # Buttons, icon-buttons, color picker wrap
│   ├── 05-forms.css            # Input wrappers, textareas, labels, error states
│   ├── 06-components.css       # Cards, badges, toggle switches, skill pills
│   ├── 07-lists.css            # Dynamic editor list items, drag ghost, placeholder
│   ├── 08-resume.css           # A4 paper, resume typography, section layout
│   ├── 09-animations.css       # Keyframes, toast notification, reduced-motion
│   └── 10-responsive.css       # Mobile breakpoints, print media queries
│
├── js/                         # Modular JavaScript (execution-ordered)
│   ├── 01-config.js            # Frozen CONFIG object — all app constants
│   ├── 02-utils.js             # escapeHtml, formatText, formatLink, debounce, throttle
│   ├── 03-templates.js         # HTML template generators (list items, preview entries)
│   ├── 04-store.js             # State class: history, persistence, pub/sub
│   ├── 05-app-core.js          # ResumeApp class constructor, DOM cache, lifecycle
│   ├── 06-app-render.js        # Multi-pass render engine with DOM reconciliation
│   ├── 07-app-handlers.js      # addItem, deleteItem, toggleTheme, switchView
│   ├── 08-app-drag.js          # Pointer-event drag & drop with RAF animation loop
│   ├── 09-app-io.js            # handleImport, handleExport, scalePreview, showToast
│   └── 10-bootstrap.js         # Event binding, keyboard shortcuts, app entry point
│
├── Example.json                # Sample resume data (Alex Morgan — UX Designer)
├── .github/
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── PULL_REQUEST_TEMPLATE.md
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
├── LICENSE                     # MIT
└── README.md

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl + Z	Undo last change
Ctrl + Shift + Z	Redo
Ctrl + Y	Redo
Ctrl + S	Export resume as JSON
Ctrl + P	Open Print / Save as PDF dialog

---

🛠️ Usage Guide

1. Editor Panel (Left)

Fill in your information across these sections:

• Personal Information — Name, Role, Email, Phone, Location, LinkedIn, Website
• Professional Summary — 2–3 sentence pitch rendered live in the preview
• Work Experience — Add multiple entries; drag to reorder
• Projects — Portfolio pieces with title, tech stack, and description
• Education — Degrees and certifications
• Skills — Technical and soft skills rendered as visual pill badges
• Additional — Languages and hobbies/interests

Markdown tip: Use **bold text** in description fields to render bold text in the PDF output.

2. Preview Panel (Right)

Live A4-scaled preview of your resume. Scales automatically to fit any screen size.

3. Header Controls

Button	Shortcut	Action
⬆️ Upload	—	Import a .json resume file (max 5MB)
⬇️ Download	Ctrl+S	Export current resume as .json
🎨 Palette	—	Change accent color (syncs to whole UI)
🌙 Moon	—	Toggle dark / light mode
🖨️ Print	Ctrl+P	Save as PDF via browser print dialog

---

📋 JSON Data Format

Resume data is stored as a structured JSON file. You can hand-edit it or import/export via the UI.

{
  "settings": {
    "theme": "light",
    "accentColor": "#6366f1"
  },
  "visibility": {
    "exp": true,
    "proj": true,
    "edu": true
  },
  "personal": {
    "name": "Alex Morgan",
    "role": "Senior UX/UI Designer",
    "email": "alex.morgan@example.com",
    "phone": "+1 (555) 123-4567",
    "location": "San Francisco, CA",
    "linkedin": "linkedin.com/in/alexmorgan",
    "website": "https://alexmorgan.design"
  },
  "summary": "Innovative designer with 6+ years of experience...",
  "skills": {
    "tech": "Figma, Adobe XD, HTML5, CSS3, React",
    "soft": "User Research, Wireframing, Agile, Mentorship"
  },
  "additional": {
    "languages": "English (Native), Spanish (Conversational)",
    "hobbies": "Urban sketching, hiking, guitar"
  },
  "exp": [
    {
      "id": "unique-id",
      "title": "Lead Product Designer",
      "subtitle": "Creative Pulse Agency",
      "date": "Jan 2021 – Present",
      "description": "• Led redesign of fintech app.\n• **Increased DAU by 40%**."
    }
  ],
  "proj": [],
  "edu": []
}

See Example.json for a complete working example.

---

⚙️ Configuration Reference

All app-wide constants live in js/01-config.js as a frozen object:

Constant	Default	Description
STORAGE_KEY	resumeflow_data_v1	localStorage key for auto-save
SAVE_DELAY	400ms	Debounce delay for persistence writes
MAX_HISTORY	50	Maximum undo/redo stack depth
HISTORY_DEBOUNCE	800ms	Typing debounce before a history snapshot is taken
A4_WIDTH_PX	794px	A4 width at 96 DPI
A4_HEIGHT_PX	1123px	A4 height at 96 DPI
MIN_SCALE	0.4	Minimum preview scale factor
MAX_SCALE	1.0	Maximum preview scale factor
TOAST_DURATION	2500ms	How long toast notifications stay visible

---

🧠 Architecture Overview

User Input
    │
    ▼
Event Listeners (10-bootstrap.js)
    │
    ▼
Handlers / I/O (07–09)
    │  mutate state via
    ▼
Store.update() (04-store.js)
    ├── Pushes history snapshot
    ├── Debounced localStorage save
    └── Notifies subscribers
             │
             ▼
     ResumeApp.render() (06-app-render.js)
         ├── _renderDesignTokens()    — CSS vars, theme, color picker
         ├── _renderGlobalUI()        — Section visibility toggles
         ├── _renderEditorInputs()    — Form fields (focus-preserved)
         ├── _renderPreviewStatic()   — Name, role, contact, skills pills
         └── _renderDynamicSections() — Experience, Projects, Education

---

🌐 Browser Support

Browser	Support
Chrome 90+	✅ Full
Edge 90+	✅ Full
Firefox 88+	✅ Full
Safari 15+	✅ Full
Mobile Chrome	✅ Full
Mobile Safari	✅ Full

Requires ES2020+ (optional chaining, structuredClone, Pointer Events API).

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Read CONTRIBUTING.md for the full workflow.
2. Check the Issues page for open bugs or ideas.
3. Fork the repo, create a feature branch, and submit a PR.

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

🙏 Acknowledgements

• Icons — Font Awesome 6
• Fonts — Inter & JetBrains Mono via Google Fonts
• Built with zero dependencies using pure HTML, CSS, and JavaScript.

---

Made with ❤️ by Lion

⭐ If this project helped you, please consider starring the repo!