A modular, component-based resume builder built with Nuxt.js and Vue 3. Resumix allows you to create professional resumes with full inline editing capabilities, AI-powered optimization, and quantifiable scoring system for job compatibility analysis.
- Modular Components: Each section of the resume is a separate, reusable component
- Data-Driven: All content is stored in a single data file for easy modification
- Inline Editing: Click any text to edit it directly on the page with rich text formatting toolbar
- Section Controls: Toggle sections on/off with checkboxes
- Professional Headshot: Support for profile pictures
- Print-Friendly: Optimized for printing with proper page breaks
- Responsive Design: Works well on different screen sizes
- Import/Export Resume Data: Easily export your resume as a JSON file using Resumix's sidebar controls
- 📄 Smart Resume Import: Paste resume text or JSON data and let the system automatically convert it to the proper format with intelligent section visibility management
- 📁 File Upload Support: Drag and drop or browse to upload resume files (.txt, .rtf, .doc, .docx, .pdf) with automatic text extraction and AI processing
- 🎯 AI Job Optimizer: Tailor your resume to specific job postings by completely rewriting Summary and Experience achievements to match job requirements, with intelligent keyword bolding and structure preservation
- ✨ AI Achievement Refinement: NEW! Refine individual achievements with AI using custom prompts or quick presets (Add Metrics, More Technical, Show Leadership, Shorten) with undo functionality
- 📊 Quantifiable Resume Analysis: Get consistent, specific scores (0-100) for resume-job compatibility with transparent calculations and detailed breakdowns
- 📈 Inline Analysis Panel: NEW! View compatibility analysis scores directly in the refinement page for easy reference while editing
- 🔔 Toast Notification System: Modern, non-intrusive notifications with auto-close for short messages and manual close for longer ones
- 🎨 Enhanced User Experience: Improved error handling, better AI response parsing, and smart section management
- 🔄 Drag & Drop Section Reordering: Intuitive drag handles to reorder resume sections with visual feedback and smooth animations
- 📝 AI Cover Letter Generator: Create professional, tailored cover letters using AI that connect your experience to specific job requirements
- Nuxt.js & Vue 3: Modern framework for reactive components and SSR
- Google Gemini AI: Advanced AI for resume analysis, optimization, and content generation
- Material Design Icons: Professional iconography via Iconify
- PDF Generation: Browser-based PDF export with print optimization
├── app.vue # Main application file
├── data/
│ └── resume.js # All resume data
├── components/
│ ├── ResumeHeader.vue # Personal information header with headshot
│ ├── ResumeSidebar.vue # Sidebar controls for sections and data management
│ ├── sidebar/
│ │ └── SidebarHeader.vue # Collapsible sidebar header with toggle functionality
│ ├── ResearchInterests.vue # Research interests
│ ├── Education.vue # Education history
│ ├── Summary.vue # Professional summary with HTML rendering
│ ├── Experience.vue # Work experience with HTML rendering
│ ├── Publications.vue # Publications and articles
│ ├── Skills.vue # Skills list with 3-column grid layout
│ ├── Languages.vue # Language skills
│ ├── Volunteering.vue # Volunteer experience
│ ├── Signature.vue # Signature section
│ ├── PDFDownloader.vue # PDF download
│ ├── ToastContainer.vue # Toast notification system
│ ├── ResumeMatchAnalysis.vue # Resume compatibility analysis display
│ └── FloatingToolbar.vue # Rich text editing toolbar
├── composables/
│ ├── useTextCommands.js # Rich text editing commands for floating toolbar
│ ├── useTextSelection.js # Text selection utilities for editing
│ ├── useBodyScrollLock.js # Modal scroll locking utility
│ └── useToast.js # Toast notification composable
├── server/
│ └── api/
│ ├── import-resume.post.js # AI-powered resume text to JSON conversion
│ ├── import-resume-file.post.js # File upload and text extraction
│ ├── tailor-resume.post.js # AI-powered resume optimization for job posts
│ ├── refine-achievement.post.js # AI-powered individual achievement refinement
│ ├── analyze-resume-match.post.js # Quantifiable resume-job compatibility analysis
│ ├── generate-cover-letter.post.js # AI-powered cover letter generation
│ └── test-analysis.get.js # Consistency testing endpoint
├── public/
│ └── favicon.ico # Site favicon
Edit the personal object in data/resume.js:
personal: {
name: "Your Name",
title: "Your Title",
address: "Your Address",
dateOfBirth: "YYYY/MM/DD",
phone: "Your Phone",
email: "your.email@example.com",
linkedin: "https://linkedin.com/in/your-profile",
linkedinText: "/your-profile",
headshot: "https://example.com/your-headshot.jpg" // URL to your headshot image
}Control which sections appear on your resume:
sections: {
summary: false,
researchInterests: true,
education: true,
experience: true,
publications: true,
skills: true,
volunteering: true,
languages: true,
signature: true
}The research interests section contains an array of objects with title and description:
researchInterests: [
{
title: "Your Research Interest",
description: "Description of your research interest..."
}
]Add or modify education entries in the education array:
education: [
{
institution: "University Name",
location: "City, Country",
degree: "Degree Name",
period: "Year - Year",
coursework: ["Course 1", "Course 2"], // Optional
finalProject: { // Optional
title: "Project Title",
objective: "Project objective...",
keyTopics: "Key topics covered...",
outcome: "Project outcome..."
},
gpa: "GPA/Scale", // Optional
description: "Description..." // Optional
}
]Modify work experience in the experience array:
experience: [
{
company: "Company Name",
location: "City, Country",
position: "Job Title",
period: "Month Year - Month Year",
achievements: [
"Achievement 1",
"Achievement 2"
]
}
]Update publications in the publications array:
publications: [
{
title: "Publication Title",
url: "https://link-to-publication.com",
description: "Brief description of the publication..."
}
]Modify the skills list:
skills: [
"Skill 1",
"Skill 2",
"Skill 3"
]Add language skills:
languages: [
"English (Fluent)",
"Spanish (Intermediate)",
"French (Basic)"
]Update volunteer experience:
volunteering: [
{
organization: "Organization Name",
location: "City, Country",
role: "Your Role",
period: "Year - Year",
description: "Description of your involvement..."
}
]Customize the signature section:
signature: {
name: "Your Name",
date: "Current Date"
}- Collapsible Sidebar: Toggle the sidebar on the left to access all controls using the chevron button in the header
- Sidebar Header: Professional header with toggle button to maximize resume viewing space
- Header Elements: Checkboxes to show/hide header elements (address, phone, email, LinkedIn, headshot)
- Resume Sections: Checkboxes to show/hide sections and drag handles to reorder them
- Data Management: Import/export resume data as JSON
- Job Optimizer: Tailor your resume for specific job postings using AI
- Cover Letter Generator: Create professional cover letters tailored to job descriptions
Intuitive section reordering with visual feedback!
How to Use:
- Open the sidebar and expand the Resume Sections section
- Look for drag handles (⋮⋮) on the left side of each section name
- Click and hold the drag handle to start dragging
- Drag the section to your desired position
- Drop the section to reorder it in your resume
- Note: Summary and Signature sections cannot be moved (they stay at top and bottom respectively)
Features:
- Visual Feedback: Sections highlight with blue border when dragging over them
- Smooth Animations: Smooth transitions and scaling effects during drag operations
- Smart Constraints: Summary section cannot be moved (always stays at top), Signature section cannot be moved (always stays at bottom)
- Non-Intrusive: Drag handles only appear on hover for clean interface
- Responsive Design: Works seamlessly on desktop and tablet devices
Benefits:
- Faster Reordering: No need to click multiple arrow buttons
- Intuitive Interface: Natural drag and drop interaction
- Visual Clarity: Clear indication of where sections will be placed
- Professional Appearance: Clean, modern interface design
When editing is enabled, a Notion-like floating toolbar provides rich text formatting options:
- Enable Editing: Set
editable: trueindata/resume.js - Click any editable text to activate the editing mode
- Floating toolbar appears above the clicked element with formatting options
- Apply formatting using toolbar buttons or keyboard shortcuts
- Click outside to save changes and hide the toolbar
Text Formatting:
- Bold (Ctrl+B / Cmd+B) - Make text bold
- Italic (Ctrl+I / Cmd+I) - Make text italic
Lists:
- Bullet List - Convert text to bulleted lists
- Numbered List - Convert text to numbered lists
Links:
- Insert Link - Create hyperlinks to external resources
- Select text and click link button to make it clickable
- Click without selection to insert URL as both text and link
- Links open in new tabs for better user experience
Utilities:
- Remove Format - Clear all formatting from selected text
- Smart Detection: Toolbar only appears for elements with the
.editableclass - Click-Based Activation: Toolbar shows when you click on editable text (not just selection)
- Auto-Positioning: Toolbar positions itself above the clicked element, staying within viewport
- Non-Intrusive: Toolbar disappears when clicking outside or on non-editable areas
- Print-Safe: Toolbar is automatically hidden when printing
- Hover Effects: Blue highlight on hover shows which elements are editable
- Focus Indicators: Blue outline appears when editing an element
- Persistent Formatting: All formatting is preserved when you save changes
- Cross-Component: Works across all resume sections (Summary, Experience, Education, etc.)
- Built with Vue 3 composables for optimal performance
- Uses native
document.execCommandfor reliable formatting - Integrates seamlessly with existing blur handlers for data persistence
- SSR-compatible with proper client-side hydration
- Click the "Download PDF" button in the top-right
- The controls will temporarily disappear
- Use your browser's print dialog to save as PDF
- Controls will reappear after printing
- Enable Headshot: In the sidebar, expand "Header Elements" and check the "Headshot" checkbox
- Paste URL: In the Headshot URL input field, paste the link to your profile image (local uploads are not supported)
- Supported URLs: Any publicly accessible image URL (JPG, PNG, WebP, etc.)
- Recommended: Use a square image (120x120 pixels or larger) for best results
- Examples: LinkedIn profile photo, GitHub avatar, or any hosted image URL
- Open the sidebar (left panel) and expand the Data Management section.
- Click Export as JSON to download your current resume data as a JSON file.
- The exported file includes all sections, personal info, header elements, section order, and visibility settings.
- Open the sidebar and expand the Data Management section.
- Click Import from JSON to open the import modal.
- Paste your JSON data into the text area provided.
- Click Import Data. Your resume will update with the imported data, merging with Resumix's current structure.
- Header Elements: Toggle the visibility of header elements (e.g., address, phone, email, LinkedIn, headshot) using checkboxes. Name and Title are always visible.
- Resume Sections: Show/hide entire sections (Summary, Research Interests, Education, etc.) and reorder them using the up/down arrows.
- Data Management: Import/export your resume data as JSON for easy backup, sharing, or migration.
npm installnpm run devnpm run buildnpm run preview- Create a new component in the
components/directory - Add the component to
app.vue - Add corresponding data to
data/resume.js - Add section visibility control to the
sectionsobject - Pass the data as props to the component in Resumix
- Global styles are in
app.vue - Component-specific styles are in each component file
- The layout is optimized for A4 printing
The resume is designed to print well on A4 paper with:
- Proper page breaks
- Consistent margins
- Optimized typography
- Hidden controls when printing
- Clean, professional appearance
This project is open source and available under the MIT License.
Get quantifiable, consistent scores with transparent calculations!
How to Use:
- Open the sidebar → expand Job Optimizer section
- Click "Analyze Resume Match"
- Paste your resume text and job posting
- Click "Analyze Compatibility"
Scoring Methodology:
- Skills Match (35%):
(Exact matches × 3) + (Related × 1)normalized to 0-100 - Experience Relevance (40%): Industry (0-30) + Role Level (0-30) + Achievements (0-40)
- Keyword Alignment (25%):
(Exact × 2) + (Contextual × 1)normalized to 0-100 - Overall: Weighted average of all three metrics
Compatibility Levels:
- 90-100: Excellent | 80-89: Strong | 70-79: Good | 60-69: Moderate | 50-59: Weak | 0-49: Poor
Features:
- Transparent calculations with exact formulas
- Consistent results (same inputs = same scores)
- Detailed strengths, gaps, and recommendations
- Test endpoint:
/api/test-analysis
Import resumes in any format - text, JSON, or files!
How to Use:
- Sidebar → Data Management → Import Resume
- Choose method: File Upload (drag/drop) or Text Input (paste)
- Click Import Resume
Supported Formats:
- Text files (.txt, .rtf), Word (.doc, .docx), PDF
- JSON data (exported or AI-generated)
- Pasted text from any source
Smart Features:
- Auto-detects JSON vs text input
- AI converts unstructured text to proper format
- Extracts text from uploaded files
- Auto-hides empty sections
- Preserves all resume data and structure
Completely rewrite resume content to match job requirements!
How to Use:
- Sidebar → Job Optimizer → Tailor for Job Post
- Paste resume text and job posting
- Optionally run Analyze Compatibility first for scores
- Click Optimize Resume
- Review before/after comparison and edit as needed
What Gets Optimized:
- Summary: Completely rewritten with bold technical keywords
- Experience: Achievements rewritten to highlight job-relevant skills
- Skills: Reordered and adapted to prioritize job requirements
What Gets Preserved:
- Personal information and contact details
- Company names, positions, dates, locations
- Education, publications, volunteering, languages
- All structural data and formatting
Key Features:
- Works with any resume length (no character limits)
- Editable results before applying
- Technical keyword bolding with
<strong>tags - Smart data merging preserves all information
Refine individual achievements with AI precision after optimization!
How to Use:
- Optimize your resume using the AI Job Optimizer as usual
- In the results page, find the AI button (✨) next to each achievement
- Click the AI button to open the refinement toolbar
- Choose your refinement method:
- Quick Presets: Click preset buttons for common improvements
- Custom Prompt: Type your own specific instruction
- Review the refined achievement and refine again if needed
- Use the undo button (⟲) if you want to revert changes
- Click the AI button again to close the refinement toolbar
Quick Preset Buttons:
- 📊 Add Metrics: Incorporates specific numbers, percentages, and quantifiable results
- 💻 More Technical: Adds relevant technologies, frameworks, and technical terminology
- 👥 Show Leadership: Emphasizes team management, decision-making, and leadership skills
- ✂️ Shorten: Condenses content while keeping key points and impact
Custom Prompts Examples:
- "focus on Python and data analysis"
- "add cloud technologies like AWS"
- "emphasize scalability and performance"
- "make it sound more senior-level"
- "add agile methodologies"
Key Features:
- Contextual AI: Uses job posting and position info for better refinements
- Undo Functionality: Single-level undo to revert last AI refinement
- Persistent Toolbar: Stays open for multiple refinements until you close it
- Iterative Refinement: Refine the same achievement multiple times with different prompts
- Inline Editing: No modals - everything happens in the same view
- Technical Keyword Bolding: Automatically highlights technical terms in refined content
Benefits:
- Fine-tune AI Output: Perfect each achievement individually
- Maintain Control: Guide the AI with your specific requirements
- Experiment Freely: Try different approaches and undo if needed
- Save Time: Quick presets for common refinement needs
- Professional Polish: Add domain-specific expertise to AI-generated content
View compatibility analysis directly in the refinement page!
Overview: After running the AI Job Optimizer analysis, the compatibility scores are available in a collapsible panel at the top of the optimization results page. This allows you to reference missing skills, keywords, and strengths while editing your achievements.
Features:
- Compact Header: Shows overall compatibility score and level at a glance
- Collapsible Design: Click to expand/collapse full analysis details
- Three Key Metrics: Skills Match, Experience Relevance, and Keyword Alignment scores
- Color-Coded Scores: Green (80-100%), Amber (60-79%), Red (0-59%)
- Strengths & Gaps: View top 3 strengths and missing elements for each metric
- Key Insights: Overall key strengths and gaps to address
- Non-Intrusive: Starts collapsed so it doesn't interrupt editing workflow
How to Use:
- Analyze your resume before optimization to generate compatibility scores
- Proceed to optimization after reviewing the analysis
- In the results page, find the purple analysis banner at the top
- Click the banner to expand and see all details
- Reference the analysis while editing achievements to address gaps
- Click again to collapse and focus on editing
Benefits:
- Informed Editing: Know exactly which skills and keywords to emphasize
- Context-Aware Refinement: Use AI refinement with knowledge of missing elements
- Easy Reference: No need to switch between pages or remember analysis
- Goal-Oriented: Focus on addressing specific gaps identified in the analysis
- Efficient Workflow: Everything you need in one place
Generate professional, tailored cover letters in seconds!
How to Use:
- Sidebar → Cover Letter Generator → Generate Cover Letter
- Paste resume text (or use current data) and job description
- Click Generate Cover Letter
- Review and Download as PDF
What You Get:
- Professional 3-4 paragraph business letter format
- Tailored content connecting experience to job requirements
- Proper date, salutation, and closing
- Compelling narrative with specific examples
- One-page length optimized for ATS
Features:
- Uses actual resume data (no placeholders)
- Original, human-like language (not copy-paste from job posting)
- Editable before download
- Ready-to-submit PDF format
Setup:
- Get API key from Google AI Studio
- Create
.envfile:GOOGLE_AI_API_KEY=your_key_here - Restart dev server
Security: API keys stored in .env (not in git), all processing server-side
Testing: Visit /api/test-analysis for consistency validation
-
Import Your Resume (Data Management → Import Resume)
- Upload file or paste text
- AI converts to proper format
-
Analyze Compatibility (Job Optimizer → Analyze Resume Match)
- Paste resume and job posting
- Get detailed compatibility scores
-
Optimize for Job (Job Optimizer → Tailor for Job Post)
- AI rewrites summary and achievements
- View analysis panel for missing skills
-
Refine Achievements (Click ✨ button on each achievement)
- Use quick presets or custom prompts
- Undo if needed
-
Apply & Download (Click Apply button)
- Apply optimizations to resume
- Download as PDF
- Analyze before optimizing: See what's missing in your resume
- Use the analysis panel: Reference gaps while refining achievements
- Iterate with AI refinement: Try different prompts for perfect results
- Edit before applying: Review and tweak all AI-generated content
- Generate cover letter last: Use optimized resume for better results
Resumix is designed with privacy and GDPR compliance in mind for commercial use.
Local-First Architecture:
- All resume data stored in your browser (localStorage)
- No server-side storage of personal information
- You maintain complete control over your data
Consent Management:
- First-time users see a consent modal
- Two-tier consent: Essential (required) + AI Processing (optional)
- AI features require explicit user consent
- Easy consent revocation in Privacy & Data settings
User Rights:
- Right to Access: Export your data as JSON
- Right to Rectification: Edit any information inline
- Right to Erasure: Delete all data with one click
- Right to Data Portability: Export in JSON and PDF formats
- Right to Withdraw Consent: Disable AI features anytime
Privacy Controls:
- Privacy & Data section in sidebar
- Toggle AI processing on/off
- Delete all data functionality
- Current consent status display
- Links to Privacy Policy and Terms of Service
When you enable AI features, your resume data is sent to Google AI APIs for processing:
- Service: Google Generative AI (Gemini 2.5 Flash)
- Purpose: Resume optimization, cover letter generation, compatibility analysis
- Data Sent: Resume text, job descriptions, achievements
- Consent: Required before any AI processing
- Warnings: Clear notices before data is sent
- Control: Can be disabled anytime
Important: Only use AI features with data you're comfortable sharing with Google AI. Review Google's Privacy Policy for details on their data handling.
- Privacy Policy: Comprehensive data handling disclosure at
/privacy-policy - Terms of Service: Legal terms and AI disclaimers at
/terms-of-service - Compliance Docs: See
PRIVACY_COMPLIANCE.mdfor technical implementation details
Before deploying for commercial use:
-
Review Legal Documents:
- Customize Privacy Policy with your jurisdiction
- Update Terms of Service with your entity information
- Update contact emails (privacy@, legal@, support@)
-
Environment Configuration:
- Set
GOOGLE_AI_API_KEYin environment variables - Configure contact emails for privacy inquiries
- Set production
APP_URL
- Set
-
Consider Enterprise Options:
- Google Vertex AI for enterprise-grade DPA
- Self-hosted AI models for maximum privacy
- Additional audit logging if required
-
Compliance Setup:
- Designate someone to handle GDPR requests (30-day response time)
- Consider Data Protection Officer (DPO) if processing at scale
- Review and update policies annually
- All data stored client-side (browser localStorage)
- HTTPS encryption for all API communications
- No persistent server-side storage
- Consent-based third-party data sharing
- Clear data deletion mechanisms
To test the compliance features:
- Clear your browser localStorage
- Reload the application
- You should see the consent modal
- Test "Essential Only" vs "Accept All"
- Verify AI features work only with consent
- Test consent revocation in Privacy & Data settings
- Test data deletion functionality
For detailed technical documentation, see PRIVACY_COMPLIANCE.md.
Resumix is built with comprehensive WCAG 2.1 Level AAA accessibility compliance, ensuring the application is usable by everyone, including people with disabilities.
Full keyboard support throughout the application:
- Tab/Shift+Tab: Navigate between interactive elements
- Enter/Space: Activate buttons and links
- Escape: Close modals and dialogs
- Ctrl/Cmd + B: Bold text in editor
- Ctrl/Cmd + I: Italic text in editor
- ?: Open keyboard shortcuts help dialog
- Arrow keys: Navigate through lists and options
Skip Navigation Links: Press Tab on page load to access skip links for quick navigation to main content or sidebar.
Compatible with major screen readers:
- NVDA (Windows)
- JAWS (Windows)
- VoiceOver (macOS, iOS)
- TalkBack (Android)
- Narrator (Windows)
Features:
- Semantic HTML with proper heading hierarchy (H1 → H2 → H3)
- ARIA landmarks for easy navigation (main, navigation, complementary, contentinfo)
- Descriptive labels for all interactive elements
- ARIA live regions for dynamic content (toasts, status updates)
- Form labels and error announcements
- Button states (pressed, expanded, disabled) properly announced
High Contrast Design:
- Text contrast: 7:1 ratio (WCAG AAA)
- Interactive elements: 3:1 ratio
- Focus indicators: 2px solid outline with high contrast
- Links distinguishable by underline (not color alone)
Reduced Motion Support:
- Respects
prefers-reduced-motionsystem preference - Animations disabled or minimized for users with vestibular disorders
- Transitions reduced to instant or very brief
Text Resizing:
- Supports up to 200% browser zoom without breaking layout
- Relative font sizing (rem/em units)
- Minimum base font size: 16px
- No horizontal scrolling at 200% zoom
Touch Targets:
- Minimum size: 44×44px (WCAG AAA)
- Adequate spacing between interactive elements
- Mobile-friendly touch targets
Visible Focus Indicators:
- All interactive elements show focus state
- 2px outline with high contrast
- Different from hover states
- Visible on buttons, links, inputs, and contenteditable areas
Focus Trapping:
- Modal dialogs trap focus within the modal
- Tab cycles through modal elements only
- Focus returns to trigger element when modal closes
Accessible Forms:
- All inputs have associated labels
- Error messages linked to inputs via
aria-describedby - Invalid fields marked with
aria-invalid="true" - Required fields clearly indicated
- Help text provided where needed
Contenteditable Accessibility:
role="textbox"for screen readersaria-multilineattribute set correctlyaria-labeldescribes field purpose- Visible focus indicators
- Edit mode clearly indicated
Accessibility has been tested with:
- axe DevTools (0 violations)
- WAVE (no errors)
- Lighthouse Accessibility (100/100 score)
- Manual keyboard navigation
- NVDA screen reader
- VoiceOver screen reader
- 200% browser zoom
- Reduced motion preference
- Mobile VoiceOver and TalkBack
Testing Documentation: See ACCESSIBILITY.md for comprehensive testing checklists and procedures.
Press ? anywhere in the application to open the keyboard shortcuts help dialog, or refer to this list:
Text Formatting:
Ctrl/Cmd + B: Bold textCtrl/Cmd + I: Italic text
Navigation:
Tab: Next elementShift + Tab: Previous elementEscape: Close dialog?: Show keyboard shortcuts
Editing:
Enter: Edit field (when focused)Escape: Cancel edit
Screen Reader Shortcuts:
- NVDA/JAWS
H: Navigate by headings - NVDA/JAWS
D: Navigate by landmarks - NVDA/JAWS
B: Navigate by buttons - VoiceOver
Ctrl + Option + U: Open rotor
Resumix is committed to ensuring digital accessibility for people with disabilities. We are continually improving the user experience for everyone and applying the relevant accessibility standards.
Conformance Status: WCAG 2.1 Level AAA
Feedback: If you encounter any accessibility barriers, please contact us at accessibility@resumix.app. We welcome your feedback and will make every effort to address your concerns.
Date: October 2025
Contributions are welcome! Please feel free to submit issues and pull requests.
Accessibility Contributions: When contributing, please ensure your changes maintain WCAG 2.1 Level AAA compliance. Run accessibility tests before submitting pull requests.