Skip to content

Phase 1B: PDF Rendering — ResumePDF.tsx + step5-render-pdf.ts #3

Description

@rohitm-1729

Agent: B — PDF Rendering

Worktree: feature/pdf

Blocked by: #1 (Foundation)

Goal

Build the @react-pdf/renderer component that replicates rohit_cv_2026.pdf pixel-accurately, and the step5 render function.

Files to create

src/components/ResumePDF.tsx
src/lib/pipeline/step5-render-pdf.ts

Reference files (read these first)

  • n8n_experiments/base_resume_structured.json — data shape
  • n8n_experiments/rohit_cv_2026.pdf (or BASE_TEMPLATE_TEST.pdf) — visual target

ResumePDF.tsx — layout spec

Sections in order:

  1. Header — centered name in Times-Roman 26pt, contact row below: phone · email · linkedin · institution
  2. Technical Skills — each skills[] entry as Category: items text
  3. Professional Experience — for each ExperienceEntry:
    • Row: Company (bold) + Location (right-aligned)
    • Row: Title (bold italic) + Dates (right-aligned)
    • Row: Summary/team info (italic, both sides)
    • Each key_project: project name (bold, no bullet) → bullet list → Tech Stack bullet
    • leadership[]: label (bold inline) + description
  4. Recognition & Awards — bulleted list (only if awards is non-empty)
  5. Education — school + location row, degree + dates row, coursework bullets

Styling rules:

  • Section headers: Helvetica-Bold 11pt + full-width borderBottom: 0.5pt
  • Two-column rows: flexDirection: 'row' + justifyContent: 'space-between'
  • Inline bold in bullet text: split on **...** → render mixed <Text> spans
  • Bullet prefix: in fixed-width <Text width={10}>
  • Page margins: 40pt all sides
  • Fonts: Times-Roman (body), Times-Bold (bold spans), Helvetica-Bold (section headers)
  • Font sizes: body 10pt, header 11pt, name 26pt

step5-render-pdf.ts

async function renderPdf(resume: TailoredResume): Promise<{ buffer: Buffer, pages: number }>
  • pdf(<ResumePDF resume={resume} />).toBuffer()
  • Extract page count from rendered PDF
  • Return { buffer, pages }

Done when

  • renderPdf(fixtureResume) returns a non-empty buffer
  • Visual spot-check: PDF layout matches original

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions