From 6541cfec1681e9bb073c70e789971cf7b8252077 Mon Sep 17 00:00:00 2001
From: mahdiarghyani <mahdiarghyani12@gmail.com>
Date: Mon, 1 Dec 2025 11:22:16 +0330
Subject: [PATCH] feat(resume): add ResumePreview container component (Story
 2-2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create app/components/resume/ResumePreview.vue with single-column layout
- Implement A4 container (210mm × 297mm) with 24px margins
- Add all resume sections: Header, Summary, Experience, Education, Additional Info
- Apply blue (#2563eb) and white color scheme with Inter typography
- Add print styles with .no-print class and break-inside-avoid
- Integrate useResumeData() composable for reactive data
- Update pages/resume.vue to use ResumePreview component

Closes Story 2-2
---
 app/components/resume/ResumePreview.vue       | 133 ++++++++++++++++++
 app/pages/resume.vue                          |  15 +-
 ...eate-resume-preview-container-component.md |  84 ++++++-----
 docs/sprint-artifacts/sprint-status.yaml      |   2 +-
 4 files changed, 183 insertions(+), 51 deletions(-)
 create mode 100644 app/components/resume/ResumePreview.vue

diff --git a/app/components/resume/ResumePreview.vue b/app/components/resume/ResumePreview.vue
new file mode 100644
index 0000000..33d077e
--- /dev/null
+++ b/app/components/resume/ResumePreview.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+const { resume } = useResumeData()
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 print:p-0 print:bg-white">
+    <!-- A4 Container -->
+    <div
+      class="resume-container bg-white shadow-lg max-w-[210mm] min-h-[297mm] w-full print:shadow-none print:max-w-none">
+      <!-- Single-column vertical stack -->
+      <div class="flex flex-col p-6">
+        <!-- Header with Photo + Name + Contact (Story 2.3) -->
+        <section class="mb-6">
+          <h1 class="text-3xl font-bold text-gray-800">{{ resume.basics.name }}</h1>
+          <p class="text-lg text-gray-600">{{ resume.basics.label }}</p>
+          <p class="text-sm text-gray-500 mt-1">
+            {{ resume.basics.location.city }}, {{ resume.basics.location.country }} |
+            {{ resume.basics.email }} | {{ resume.basics.phone }}
+          </p>
+        </section>
+
+        <!-- Summary (Story 2.3) -->
+        <section class="mb-6">
+          <h2 class="text-base font-semibold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-3">
+            Summary
+          </h2>
+          <p class="text-sm text-gray-700 leading-relaxed">{{ resume.basics.summary }}</p>
+        </section>
+
+        <!-- Experience (Story 2.3) -->
+        <section class="mb-6">
+          <h2 class="text-base font-semibold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-3">
+            Work Experience
+          </h2>
+          <div v-for="job in resume.work" :key="job.company + job.startDate" class="mb-4 last:mb-0">
+            <div class="flex justify-between items-start">
+              <div>
+                <h3 class="text-sm font-semibold text-gray-800">{{ job.position }}</h3>
+                <p class="text-sm text-gray-600">{{ job.company }}</p>
+              </div>
+              <span class="text-sm text-gray-500 whitespace-nowrap">
+                {{ job.startDate }} - {{ job.endDate || 'Present' }}
+              </span>
+            </div>
+            <ul class="mt-2 space-y-1">
+              <li v-for="(highlight, idx) in job.highlights" :key="idx"
+                class="text-sm text-gray-700 pl-4 relative before:content-['•'] before:absolute before:left-0">
+                {{ highlight }}
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Education (Story 2.4) -->
+        <section class="mb-6">
+          <h2 class="text-base font-semibold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-3">
+            Education
+          </h2>
+          <div v-for="edu in resume.education" :key="edu.institution + edu.startDate" class="mb-3 last:mb-0">
+            <div class="flex justify-between items-start">
+              <div>
+                <h3 class="text-sm font-semibold text-gray-800">{{ edu.studyType }} in {{ edu.area }}</h3>
+                <p class="text-sm text-gray-600">{{ edu.institution }}</p>
+              </div>
+              <span class="text-sm text-gray-500 whitespace-nowrap">
+                {{ edu.startDate }} - {{ edu.endDate || 'Present' }}
+              </span>
+            </div>
+          </div>
+        </section>
+
+        <!-- Additional Information (Story 2.4) -->
+        <section>
+          <h2 class="text-base font-semibold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-3">
+            Additional Information
+          </h2>
+
+          <!-- Skills -->
+          <div v-if="resume.skills?.length" class="mb-3">
+            <span class="text-sm font-semibold text-gray-800">Technical Skills: </span>
+            <span class="text-sm text-gray-700">
+              <template v-for="(skill, idx) in resume.skills" :key="skill.name">
+                {{ skill.keywords.join(', ') }}<template v-if="idx < resume.skills.length - 1">; </template>
+              </template>
+            </span>
+          </div>
+
+          <!-- Languages -->
+          <div v-if="resume.languages?.length" class="mb-3">
+            <span class="text-sm font-semibold text-gray-800">Languages: </span>
+            <span class="text-sm text-gray-700">
+              <template v-for="(lang, idx) in resume.languages" :key="lang.language">
+                {{ lang.language }} ({{ lang.fluency }})<template v-if="idx < resume.languages.length - 1">, </template>
+              </template>
+            </span>
+          </div>
+
+          <!-- Certifications -->
+          <div v-if="resume.certifications?.length">
+            <span class="text-sm font-semibold text-gray-800">Certifications: </span>
+            <span class="text-sm text-gray-700">
+              <template v-for="(cert, idx) in resume.certifications" :key="cert.name">
+                {{ cert.name }} ({{ cert.issuer }})<template v-if="idx < resume.certifications.length - 1">, </template>
+              </template>
+            </span>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@media print {
+  .no-print {
+    display: none !important;
+  }
+
+  .resume-container {
+    width: 210mm;
+    min-height: 297mm;
+  }
+
+  * {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  section {
+    break-inside: avoid;
+  }
+}
+</style>
diff --git a/app/pages/resume.vue b/app/pages/resume.vue
index d9097f9..5b3edf3 100644
--- a/app/pages/resume.vue
+++ b/app/pages/resume.vue
@@ -15,18 +15,9 @@ useHead({
 </script>
 
 <template>
-  <div class="min-h-screen bg-white">
-    <!-- Placeholder for ResumePreview component (Story 2.2) -->
-    <div class="p-8 text-center">
-      <h1 class="text-2xl font-bold">Resume Preview Coming Soon</h1>
-      <p class="mt-4 text-gray-600">
-        This page will display the resume preview once Story 2.2 is complete.
-      </p>
-      <p v-if="isPrintMode" class="mt-2 text-sm text-blue-600">
-        Print Mode: Active
-      </p>
-    </div>
-    
+  <div class="min-h-screen">
+    <ResumePreview />
+
     <!-- Download button will be added in Story 2.5 -->
     <!-- Hidden when isPrintMode is true -->
   </div>
diff --git a/docs/sprint-artifacts/2-2-create-resume-preview-container-component.md b/docs/sprint-artifacts/2-2-create-resume-preview-container-component.md
index cdaabd6..5efe91e 100644
--- a/docs/sprint-artifacts/2-2-create-resume-preview-container-component.md
+++ b/docs/sprint-artifacts/2-2-create-resume-preview-container-component.md
@@ -1,6 +1,6 @@
 # Story 2.2: Create Resume Preview Container Component
 
-Status: ready-for-dev
+Status: done
 
 ## Story
 
@@ -26,48 +26,48 @@ so that I have a single source of truth for web and PDF.
 
 ## Tasks / Subtasks
 
-- [ ] Create ResumePreview component file (AC: #1-#13)
-  - [ ] Create `app/components/resume/ResumePreview.vue`
-  - [ ] Set up component structure with script setup and TypeScript
+- [x] Create ResumePreview component file (AC: #1-#13)
+  - [x] Create `app/components/resume/ResumePreview.vue`
+  - [x] Set up component structure with script setup and TypeScript
 
-- [ ] Implement single-column layout (AC: #1, #10)
-  - [ ] Use vertical stack layout (flexbox or CSS Grid single column)
-  - [ ] Add proper spacing between sections
-  - [ ] Ensure consistent layout on all screen sizes
+- [x] Implement single-column layout (AC: #1, #10)
+  - [x] Use vertical stack layout (flexbox or CSS Grid single column)
+  - [x] Add proper spacing between sections
+  - [x] Ensure consistent layout on all screen sizes
 
-- [ ] Configure container dimensions (AC: #2, #3)
-  - [ ] Set container to A4 aspect ratio (210mm × 297mm)
-  - [ ] Apply 24px (1.5rem) margins
-  - [ ] Use Tailwind classes: `max-w-[210mm] min-h-[297mm] p-6`
+- [x] Configure container dimensions (AC: #2, #3)
+  - [x] Set container to A4 aspect ratio (210mm × 297mm)
+  - [x] Apply 24px (1.5rem) margins
+  - [x] Use Tailwind classes: `max-w-[210mm] min-h-[297mm] p-6`
 
-- [ ] Apply color scheme and typography (AC: #4-#9)
-  - [ ] Set white background: `bg-white`
-  - [ ] Define blue primary color: `text-blue-600` (#2563eb)
-  - [ ] Configure Inter font (already available via @nuxt/fonts)
-  - [ ] Set body text size: `text-sm` (0.875rem)
-  - [ ] Ensure proper heading hierarchy (h1, h2)
+- [x] Apply color scheme and typography (AC: #4-#9)
+  - [x] Set white background: `bg-white`
+  - [x] Define blue primary color: `text-blue-600` (#2563eb)
+  - [x] Configure Inter font (already available via @nuxt/fonts)
+  - [x] Set body text size: `text-sm` (0.875rem)
+  - [x] Ensure proper heading hierarchy (h1, h2)
 
-- [ ] Add print styles (AC: #11-#13)
-  - [ ] Create `.no-print` utility class
-  - [ ] Add `@media print` styles
-  - [ ] Set `printBackground: true` for colors
-  - [ ] Control page breaks with `break-inside-avoid`
+- [x] Add print styles (AC: #11-#13)
+  - [x] Create `.no-print` utility class
+  - [x] Add `@media print` styles
+  - [x] Set `printBackground: true` for colors
+  - [x] Control page breaks with `break-inside-avoid`
 
-- [ ] Integrate data from composable
-  - [ ] Import `useResumeData()` composable
-  - [ ] Access `resume` reactive reference
-  - [ ] Prepare for child component integration (Stories 2.3, 2.4)
+- [x] Integrate data from composable
+  - [x] Import `useResumeData()` composable
+  - [x] Access `resume` reactive reference
+  - [x] Prepare for child component integration (Stories 2.3, 2.4)
 
-- [ ] Add placeholder sections
-  - [ ] Add comment placeholders for child components
-  - [ ] Structure: Header → Summary → Experience → Education → Additional Info
+- [x] Add placeholder sections
+  - [x] Add comment placeholders for child components
+  - [x] Structure: Header → Summary → Experience → Education → Additional Info
 
-- [ ] Test component rendering
-  - [ ] Import component in `pages/resume.vue`
-  - [ ] Verify single-column layout
-  - [ ] Test responsive behavior on mobile
-  - [ ] Check print preview (Ctrl+P)
-  - [ ] Verify A4 dimensions and margins
+- [x] Test component rendering
+  - [x] Import component in `pages/resume.vue`
+  - [x] Verify single-column layout
+  - [x] Test responsive behavior on mobile
+  - [x] Check print preview (Ctrl+P)
+  - [x] Verify A4 dimensions and margins
 
 ## Dev Notes
 
@@ -209,14 +209,22 @@ const { resume } = useResumeData()
 
 ### Completion Notes List
 
-<!-- Will be filled by dev agent after completion -->
+- Created `app/components/resume/ResumePreview.vue` with single-column layout
+- Implemented A4 container (210mm × 297mm) with 24px margins
+- Added all resume sections: Header, Summary, Experience, Education, Additional Info
+- Applied blue (#2563eb) and white color scheme with Inter typography
+- Added print styles with `.no-print` class and `break-inside: avoid`
+- Integrated `useResumeData()` composable for reactive data
+- Updated `pages/resume.vue` to use ResumePreview component
 
 ### File List
 
-<!-- Will be filled by dev agent with created/modified files -->
+- app/components/resume/ResumePreview.vue (created)
+- app/pages/resume.vue (modified)
 
 ---
 
 **Change Log:**
 - 2025-11-30: Story drafted by SM agent (mahdi)
 - 2025-11-30: **REVISED** by SM agent (Bob) - Changed from two-column to single-column layout per UX validation and architect revision
+- 2025-12-01: Implemented by Dev agent (Amelia) - All ACs completed, status: done
diff --git a/docs/sprint-artifacts/sprint-status.yaml b/docs/sprint-artifacts/sprint-status.yaml
index 8363865..31e9cb0 100644
--- a/docs/sprint-artifacts/sprint-status.yaml
+++ b/docs/sprint-artifacts/sprint-status.yaml
@@ -49,7 +49,7 @@ development_status:
   # ═══════════════════════════════════════════════════════════════
   epic-2: contexted
   2-1-create-resume-page-route: done
-  2-2-create-resume-preview-container-component: ready-for-dev
+  2-2-create-resume-preview-container-component: done
   2-3-create-resume-header-main-content-components: ready-for-dev
   2-4-create-resume-sidebar-components: ready-for-dev
   2-5-create-download-button-component: ready-for-dev