Interactive build // browser-generated PDF

Live

Resume on Demand

Interactive demo that lets visitors pick which Resume sections, jobs, and skills to include in a downloadable PDF — generated entirely in the browser from a structured expertise collection.

AstroReactTypeScript@react-pdf/rendererTailwind CSS
Open interactive demo →
  • OutputTailored PDF
  • RuntimeBrowser only
  • SourceExpertise data
Resume builderReady
Resume on Demand mark

Choose the evidence that matters, preview the result, and download a focused resume.

Resume on Demand

A live demo where the visitor curates what goes into a PDF resume before downloading it. The data source is the same expertise content collection that backs /resume, so there is no duplication and no backend call to generate the PDF.

Try the demo → · Project page · Resume

Demo

Selection panel

The selection panel groups items by kind. The profile is always included — it carries the visitor’s identity (name, location, contact links), and an anonymous PDF isn’t a useful resume. The default selection covers the profile, the latest experience entry, and every skill group; everything else is opt-in.

Live PDF preview

The right pane streams a live PDF preview rendered by @react-pdf/renderer that updates as toggles change. The Download PDF button exports the same document with a filename derived from the profile name plus today’s date:

Victor Hugo Vargas Servin -- Resume -- 2026-08-20.pdf

What’s inside

Profile (mandatory)

Name, location, email, LinkedIn, GitHub, portfolio URL, photo, summary line, and the bio paragraphs.

8 experience entries

Metrimex, Didcom, DoneHQ (WordPress Developer — ACF Pro, ContentKing, SEO), Welo, eCloud, SofiaXT, Teknol, Lanix.

8 AI skill groups (top of the Skills section)

Title Focus
AI Tooling Tools I use day to day
AI Prompt Engineering System prompts, templates, few-shot, instruction tuning
MCP & Tool Calling MCP servers / clients, tool registry, JSON schemas
AI Skills Authoring Project + global Skills, skill schemas, AGENTS.md
Harness & Agent Engineering Agent loops, tool integration, sandbox, streaming
RAG Architecture ChromaDB, vector search, chunking, reranking
Local LLM Operations llama.cpp, GGUF, CPU + GPU inference
Open-Weight Model Optimization Quantization (GGUF, GPTQ, AWQ), LoRA, QLoRA, distillation
AI Cost & Privacy Strategy Hybrid routing, on-prem, data sovereignty

11 general skill groups

Programming languages, databases, web frameworks, mobile, maps & geolocation, desktop, containers, DevOps & cloud, testing, top strengths, and the original “AI Tooling” anchor.

2 education entries

ITESCA (Ingeniería en Sistemas, 2014) and UTH (TSU en Redes y Telecomunicaciones, 2010).

2 spoken languages

Spanish (native) and English (conversational).

Placeholders for new content

Empty directories for side-projects/, talks/, and courses/ — content can be dropped in without schema changes.

Architecture

  • Single content source. src/content/expertise/*.mdx defines a discriminated union over the eight kinds. /resume, /api/expertise.json, /docs.json (chat-bot source), and the demo all read from this one collection.
  • Pure selection logic lives in demo/lib/selection.ts (groupByKind, defaultSelection, toggleSelection, selectedItemsForPdf) and is covered by vitest unit specs.
  • Browser-side PDF via @react-pdf/renderer. There is no backend round-trip for document generation.
  • Per-section anti-orphan. Each section View sets wrap={false}, so the heading and its body always travel together. If a section can’t fit at the bottom of a page, the whole section moves to the next page.
  • Mandatory profile in selectedItemsForPdf — the profile is always prepended to the payload, regardless of selection state.

Trade-offs

  • @react-pdf/renderer ships its own font + layout engine, around 150 KB gzipped. It only loads on /demos/resume-generator, not on the rest of the site.
  • Filename is computed from the visitor’s profile name and the local date. If they uncheck the profile and leave everything else blank, the download button disables — a profile without jobs / skills isn’t a useful resume.

Try the demo

The live version is at sersofts.org/demos/resume-generator. No signup, no deploy, no email — open it, pick what you want, hit download.

Run locally

pnpm install
pnpm dev

Then open the demo at http://localhost:4321/demos/resume-generator.

Files of note

  • demo/PdfDocument.tsx — react-pdf document. Monochrome style, chip-wrap layout, anti-orphan sections.
  • demo/components/SelectionPanel.tsx — grouped checklist. Profile is disabled with a Required badge.
  • demo/components/DownloadButton.tsx — PDFDownloadLink with a dynamic <name> -- Resume -- YYYY-MM-DD.pdf filename.
  • demo/lib/selection.ts — pure selection logic + payload builder. Profile is always prepended in the payload.
  • demo/hooks/useExpertise.ts — fetch + selection state.
  • tests/unit/ — vitest specs for selection logic.
  • tests/e2e/ — Playwright specs for default selection, mandatory profile, and PDF blob validity.