# nuxt-portfolio - Product Requirements Document **Author:** mahdi **Date:** 2025-11-30 **Version:** 1.0 --- ## Executive Summary This PRD defines the **Resume Export** feature for the nuxt-portfolio project. The feature enables generating a professional, ATS-compatible PDF resume from dedicated resume data, with a web preview page for verification before download. **Context:** This is a brownfield addition to an existing Nuxt 4 bilingual portfolio website. The portfolio already contains professional information but resume data will be separate to optimize for job application best practices. ### What Makes This Special The key differentiator is producing a **pixel-perfect PDF that matches a custom design template** while remaining **ATS-friendly** for international job applications. Most resume builders sacrifice either design fidelity or ATS compatibility - this feature delivers both. --- ## Project Classification **Technical Type:** web_app (feature addition to existing Nuxt 4 project) **Domain:** general **Complexity:** low-medium This is a focused feature addition to an existing portfolio site, not a new product. The technical complexity is moderate due to PDF generation requirements, but the scope is well-defined. --- ## Success Criteria 1. **Design Fidelity:** PDF output matches the provided design template exactly (fonts, spacing, layout) 2. **ATS Compatibility:** Resume passes ATS parsing tests (text extractable, proper structure, no image-only content) 3. **One-Click Export:** User clicks download button → PDF ready in under 3 seconds 4. **Preview Accuracy:** Web preview (`/resume`) shows exactly what will be exported 5. **Data Separation:** Resume content managed independently from portfolio data --- ## Product Scope ### MVP - Minimum Viable Product - Dedicated resume data file (`app/data/resume.en.ts`) - Resume preview page (`/resume`) - PDF download button - Design based on user's custom template - ATS-friendly output (proper text layers, semantic structure) - English only ### Growth Features (Post-MVP) - Persian resume support (`/fa/resume`) - Multiple resume templates - Basic customization (show/hide sections) ### Vision (Future) - Full customization UI - Multiple export formats (DOCX, plain text) - Job-specific resume variants - AI-powered content suggestions --- ## User Experience Principles **Visual Personality:** Clean, professional, blue and white color scheme matching the custom template design. **Page Behavior:** The `/resume` page is a standalone view (no site navigation) that mirrors the exact PDF output - what you see is what you download. ### Key Interactions 1. **Preview Flow:** User navigates to `/resume` → sees exact PDF preview → clicks floating download button → PDF downloads instantly 2. **Download Button:** Floating action button (bottom-right corner) with download icon - always visible, doesn't interfere with content 3. **Responsive Consideration:** Preview optimized for desktop viewing (A4 aspect ratio), mobile shows scrollable version --- ## Functional Requirements **Resume Data Management:** - FR1: System stores resume data in dedicated TypeScript file (`app/data/resume.en.ts`) - FR2: Resume data structure supports: contact info, summary, experience, education, skills, certifications, languages - FR3: Resume data is independent from portfolio data **Resume Preview Page:** - FR4: Users can view resume at `/resume` route - FR5: Preview page displays resume in A4 aspect ratio layout - FR6: Preview page matches PDF output exactly (WYSIWYG) - FR7: Preview page is standalone (no site navigation header/footer) **PDF Generation:** - FR8: Users can download resume as PDF via floating action button - FR9: PDF output matches the custom design template (Blue and White Clean Professional) - FR10: PDF contains real text (not images) for ATS compatibility - FR11: PDF generation completes in under 3 seconds - FR12: PDF filename follows format: `Ali_Arghyani_Resume.pdf` **ATS Compatibility:** - FR13: PDF text is selectable and copy-able - FR14: PDF structure uses proper heading hierarchy - FR15: No critical information stored as images only --- ## Non-Functional Requirements ### Performance - PDF generation: < 3 seconds - Page load: < 2 seconds - PDF file size: < 500KB ### Accessibility - Semantic HTML structure in preview - Proper heading hierarchy (h1, h2, h3) - Sufficient color contrast (blue on white) --- ## Technical Notes (for Architecture phase) **PDF Generation Options to Evaluate:** - Browser print-to-PDF (CSS @media print) - html2pdf.js / jsPDF - Puppeteer/Playwright (server-side) - React-PDF / Vue-PDF libraries **Key Decision:** Client-side vs Server-side PDF generation **Design Template Reference:** `design templates/Blue and White Clean and Professional Resume.pdf` --- _This PRD captures the Resume Export feature - enabling professional, ATS-compatible PDF resume generation with pixel-perfect design fidelity._ _Created through collaborative discovery between mahdi and AI facilitator._ ## User Experience Principles ### Design Template Reference **Layout:** Two-Column Design (Blue & White theme) **Header:** - Full name (large font) - Job title below - Subtle separator or colored background **Left Column (Sidebar - narrower):** - Contact Info (icons + text): Phone, Email, Location, LinkedIn/Website - Skills (technical skills - possibly progress bars or tags) - Education (University, Degree, Year) - Languages (if applicable) **Right Column (Main Content - wider):** - Profile/Summary (short paragraph) - Experience (main section): Job title, Company, Dates, Bullet-point responsibilities/achievements **Color Scheme:** - Primary: White (background) - Secondary: Blue (headers, icons, sidebar/header background) - Text: Black/Dark gray for readability ### Key Interactions - **Download Button:** Floating Action Button (FAB) bottom-right OR top-right header button - **Page Style:** Standalone page without main site navigation (clean, print-ready feel) - **Preview:** What you see = What you get (WYSIWYG) --- ## Functional Requirements ### Resume Data Management - FR1: System stores resume data in dedicated file (`app/data/resume.en.ts`) - FR2: Resume data structure supports all template sections (header, contact, skills, education, languages, profile, experience) - FR3: Resume data is independent from portfolio data - FR4: Data structure allows future extension for multiple languages ### Resume Preview Page - FR5: Users can view resume at `/resume` route - FR6: Preview page renders resume exactly as it will appear in PDF - FR7: Preview page is standalone (no main site header/footer) - FR8: Preview page is responsive but optimized for A4/Letter dimensions - FR9: Users can see the two-column layout with proper styling ### PDF Export - FR10: Users can download resume as PDF via download button - FR11: PDF output matches the web preview exactly (pixel-perfect) - FR12: PDF is ATS-compatible (text extractable, proper structure) - FR13: PDF filename follows format: `FirstName_LastName_Resume.pdf` - FR14: Download completes in under 3 seconds ### Template Sections - FR15: Header displays name and job title prominently - FR16: Contact section shows phone, email, location, LinkedIn with icons - FR17: Skills section displays technical skills (list or visual format) - FR18: Education section shows degree, university, and year - FR19: Languages section shows language proficiencies (optional) - FR20: Profile section displays professional summary paragraph - FR21: Experience section shows jobs with title, company, dates, and bullet achievements ### Styling & Theming - FR22: Resume uses blue and white color scheme - FR23: Typography is professional and ATS-readable - FR24: Layout maintains proper spacing and alignment - FR25: Design adapts to content length (no awkward breaks) --- ## Non-Functional Requirements ### Performance - PDF generation completes in under 3 seconds - Preview page loads in under 1 second - No visible layout shift during page load ### Compatibility - PDF readable by major ATS systems (Workday, Greenhouse, Lever, etc.) - PDF viewable in all major PDF readers - Preview works in Chrome, Firefox, Safari, Edge ### Maintainability - Resume data easily editable by developer - Template structure allows future customization - Code follows existing project patterns (Nuxt 4, TypeScript, Composables) --- ## Technical Notes (for Architecture phase) **PDF Generation Options to Evaluate:** - Browser print-to-PDF (CSS @media print) - Puppeteer/Playwright (server-side rendering) - Client-side libraries (jsPDF, html2pdf.js, react-pdf) - Hybrid approach **ATS Compatibility Considerations:** - Real text (not images) - Simple formatting - Standard fonts - Proper heading hierarchy - No tables for layout (use CSS Grid/Flexbox) --- _This PRD captures the Resume Export feature for nuxt-portfolio - enabling professional PDF resume generation with ATS compatibility and pixel-perfect design fidelity._ _Created through collaborative discovery between mahdi and AI facilitator._