# Resume / CV Template — Research Brief

> **Assumption:** A single-page personal resume/CV for an individual knowledge worker — specifically a 6–8-year senior software engineer. Scrollable on screen; prints as one clean A4/Letter page via `@media print`. Not a portfolio, not a multi-page career site. The template is the resume.
>
> **Fictional persona:** **Nadia Costa** — Senior Software Engineer, 8 years. Previously: Staff Engineer at a fintech startup, SWE II at a mid-size SaaS company, one founding engineer gig. MSc Computer Science (Universidade de Lisboa), BSc Computer Engineering. Lives in Lisbon, open to remote. 4 jobs, 2 schools, 4 selected projects, typed skills grid.

---

## Audience & primary CTA

- **Who visits:** A recruiter or hiring manager who received a link, or a developer browsing someone's personal domain. Dwell time: 90 seconds max. They are deciding whether to open the attached PDF or reach out.
- **Primary CTA:** "Download PDF" — triggers `window.print()` with a locked `@page` stylesheet. This is the one feature that distinguishes a CV site from a portfolio.
- **Secondary CTAs:** Email link (mailto), LinkedIn profile link, GitHub profile link. All three in the header — one click to each channel.

---

## Reference sites (real businesses)

- https://brittanychiang.com — Frontend engineer; dark teal theme; Inter + JetBrains Mono; two-column sidebar on desktop; Resume PDF linked from nav. Notable: clean section hierarchy, tight information density, direct link to PDF. Inter is already used in Day 1 — avoid.
- https://alexnaraghi.com — Game dev; minimal off-white with red accent; portfolio grid + direct PDF download button. Notable: resume download positioned prominently, project thumbnails break text monotony.
- https://garysheng.com — Applied AI professional; near-monochrome, single-column, centered; zero decoration; confidence through restraint. Notable: proves that no accent color can still read as a strong personal brand.
- https://seanhalpin.xyz — Creative developer; floating navigation; modern dark/light; personality-forward. Notable: floating sticky nav on a resume-style site avoids "scroll back to top" UX friction.
- https://diogotc.com — Animated timeline with particles. Notable (negative): over-engineered for the resume use case; particles kill print viability entirely — explicit anti-pattern.
- https://bingalls.github.io — Plain GitHub Pages resume; no frills; real engineer; proves the GH Pages target market is real and the bar for improvement is low.
- https://mamunmalik.github.io — Two-column layout, photo included; readable but generic serif + blue convention. Notable (negative): the "sidebar photo + blue header" convention is the dominant cliché in this niche — we explicitly avoid it.
- https://standardresume.co — Web app (not a static template) but the visual register it targets (clean, minimal, ATS-neutral-ish, readable) is the correct aspiration. Notable: their "Parker" variant (from The Pragmatic Engineer) is the clearest comparable aesthetic: clean table structure, no decorative elements.

---

## Existing templates surveyed

- https://github.com/WebPraktikos/universal-resume — Tailwind CSS, print-first (Letter + A4), FiraGO typeface, two-column, non-commercial license. **Strength:** best-in-class print support of any free template. **Weakness:** non-commercial license (blocks MIT reuse), no dark mode, no Astro, visually dated, no JS interactivity layer.
- https://github.com/mnjul/html-resume — Pure HTML/CSS, shaded sidebar, browser print-to-PDF. **Strength:** zero dependencies, excellent for PDF. **Weakness:** Letter-only, sidebar design breaks on narrow screens, no A4, Firefox-specific about:config hacks required, Apache 2.0 only.
- https://github.com/EmaSuriano/astro-resume — Astro + Tailwind, Markdown-driven, Playwright PDF generation. **Strength:** Markdown data layer, Astro stack. **Weakness:** Playwright build dependency is heavy (Chromium download), not GH-Pages-native, no defined print stylesheet, generic Tailwind gray palette.
- https://github.com/srleom/astro-theme-resume — Astro + Tailwind, dark/light mode, RSS, blog. **Strength:** blog integration. **Weakness:** no documented print support, blog-first framing dilutes resume focus, generic palette, not differentiated visually.
- https://www.jsonresume.org/themes — 400+ community npm themes, JSON data-driven. **Strength:** data portability. **Weakness:** all themes require Node CLI to render, no GH Pages native deploy, themes range from "ugly" to "barely styled", no single one has strong visual identity.
- **Saturated pattern:** Two-column sidebar (dark left panel, light right), photo top-left, blue or teal header bars, Progress bar "skill meters." Fills Themeforest CV category, GitHub html-resume topic, and most free template galleries. Visually dated (2015 era), inaccessible (skill bar percentages are meaningless), breaks on print.
- **Missing in free tier:** A GH-Pages-native, MIT-licensed, Astro-built resume template with: (a) a locked single-page print stylesheet for both A4 and Letter, (b) `window.print()` PDF button, (c) zero sidebar/photo clichés, (d) strong editorial type hierarchy (no skill bars), (e) dark mode with system-pref detection, (f) specific fictional persona content (not lorem ipsum).

---

## Must-have sections (in order)

1. **Header** — Full name (display type, large), current title, location + open-to-remote flag, email + LinkedIn + GitHub icon links, "Download PDF" button. Sticky on screen, hidden in print (replaced by plain text header block).
2. **Summary** — 2–3 sentences. Who Nadia is, what she builds, what she's looking for. No "results-driven professional" boilerplate.
3. **Experience** — 4 entries, reverse-chronological. Each: company name, role title, date range (month/year), location, 2–3 bullet outcomes with metrics ("reduced p99 latency by 40%", "led migration of 3 services to Kubernetes").
4. **Selected Projects** — 4 entries. Name, one-line description, tech stack tags, GitHub link icon. Separate from employer work; signals self-direction.
5. **Education** — 2 entries. Degree, institution, year. GPA omitted (>5 years out). Thesis title optional.
6. **Skills** — Categorized, not bar-metered. Three rows: Languages, Frameworks & Tools, Platforms. Comma-separated tokens. ATS-readable, visually clean.
7. **Languages** — Human languages (English C2, Portuguese native, Spanish B2). One line.

### Not building

- **References section** — "References available upon request" is dead convention. Hiring managers contact references directly. Omitted entirely.
- **Photo** — Non-standard in US/UK/DACH tech hiring contexts; introduces bias risk; breaks print layout. Explicitly excluded.
- **Skill bar / progress meters** — "JavaScript 90%" is meaningless and inaccessible. Categorical skill lists only.
- **Age, marital status, nationality** — Illegal to request in many jurisdictions; never include.
- **Cover letter section** — Separate document in practice; out of scope for this template.
- **Testimonials / endorsements** — LinkedIn handles this; redundant on a CV page.

---

## Design conventions

- **Typography:** **Source Serif 4** (variable, Google Fonts) for name display + section headings — warm, editorial, print-tested, sharply distinct from all Day 1–8 fonts. **Inter Tight** (variable, Google Fonts) for body text, bullets, metadata — condensed enough to fit dense CV content without crowding. This pairing has no precedent in Days 1–8 and reads as "editorial print document" rather than tech-startup interface.
- **Color palette tendency:** **Editorial monochrome + one muted slate accent.** Base: pure `#FFFFFF`. Body text: `#111111` (near-black, not pure, avoids harsh screen rendering). Section labels + accent: `#334155` (Tailwind `slate-700`) — a cool blue-grey, completely distinct from Day 6's cobalt `#2563EB` and Days 1–7 accents. Divider lines: `#E2E8F0`. In dark mode: `#0F172A` background, `#F1F5F9` text, `#94A3B8` muted elements. No vivid accent color — this is intentional. The palette signals "professional document," not "SaaS landing page."
- **Imagery style:** Zero imagery. No photos, no illustrations, no abstract SVGs used decoratively. The only visual elements are typography weight/size contrast, thin horizontal rules, and the structured grid of the skills section. Print-document aesthetic throughout.
- **Density:** High-information but not cramped. Single-column on mobile, two-column on desktop (main content 65%, aside 35% for skills + education + languages). Print view collapses to single-column with tighter margins. Section spacing: generous on screen (4–6rem gaps), compressed on print (1.5–2rem gaps via `@media print` override).
- **Light/dark:** Light-default. Dark mode via `prefers-color-scheme` system pref + localStorage toggle button in header. Print always renders light regardless of mode setting (explicit `@media print` forces white background + black text).

---

## Trust signals to include

- Specific employer names (fictional but plausible: "Mira Financial", "Cadence Systems", "Volta Labs") — not "Company Name"
- Outcome-metric bullets (percentages, user counts, time-to-ship figures) — signals impact, not just activity
- GitHub + LinkedIn links in header — one click to verify the person exists
- Education institution names (real-sounding: "Universidade de Lisboa") — not "University Name"
- Tech stack tags on projects — signals recency and specificity
- "Open to remote" flag in header — signals availability, reduces recruiter friction

---

## SEO / schema.org

- **Type:** `Person`
- **Required properties:** `name`, `jobTitle`, `url`, `email`, `sameAs[]` (LinkedIn, GitHub), `alumniOf[]` (two `EducationalOrganization` entries), `knowsAbout[]` (skill tokens), `worksFor` (current or most recent employer as `Organization`)
- **Suggested OG image direction:** Name in Source Serif 4 display weight on `#0F172A` (dark slate) background, current title in Inter Tight below, small location line. Static committed `og-resume.png`. Dimensions 1200×630. No photo of person — respects privacy for a template placeholder.

---

## Static-only fit

No concerns. Every feature in this niche is static-compatible:

- **PDF export:** `window.print()` triggered by the "Download PDF" button, combined with a locked `@page { size: A4; margin: 12mm 14mm; }` and `@media print` rules that hide the nav button and sticky header. No Puppeteer, no server. Same pattern proven in every browser since 2018.
- **A4 + Letter dual support:** Two `@page` size declarations; a `data-paper` attribute on `<body>` toggled by a small UI control (hidden on print) lets the user switch. Alternatively, ship A4 default and document the Letter override as a one-line CSS change.
- **Dark mode toggle:** localStorage + CSS class swap. 6 lines of vanilla JS. No framework dependency.
- **Schema JSON-LD:** Static `<script type="application/ld+json">` in Astro layout. Build-time string, zero runtime.
- **Contact links:** Mailto + HTTPS links. No form, no backend. Deliberate for a resume — the recruiter should reach out via their preferred channel.

---

## Differentiation — what we'll do better

1. **Locked print stylesheet, both A4 and Letter:** No free Astro resume template ships a tested `@page` stylesheet for both paper sizes. Universal-resume does this but is non-commercial. We ship MIT.
2. **`window.print()` PDF button — zero build dependency:** EmaSuriano's astro-resume uses Playwright (Chromium install, CI minutes). We use a browser-native button. Simpler, faster, GH Pages compatible.
3. **Source Serif 4 + Inter Tight pairing:** Unused in Days 1–8 and in every surveyed free template (all use Inter, system-ui, or Roboto). Editorial, print-tested, immediately distinctive.
4. **No skill bars, no sidebar photo, no "progress meters":** The two most-complained-about CV template anti-patterns. Every Themeforest and most GitHub html-resume templates ship these. We don't — and we document why in the template README.
5. **Specific fictional persona (Nadia Costa):** Every surveyed template ships "John Doe" or "Your Name." Nadia has real dates, real-sounding employers, outcome-metric bullets, and a plausible career arc. A visitor can evaluate the template immediately without imagination.
6. **Dark mode that doesn't break print:** srleom's and EmaSuriano's themes have dark mode but no documented behavior when a dark-mode user prints. We force `@media print { background: white; color: black; }` explicitly — the one rule that every dark-mode resume template forgets.
7. **GH Pages one-click deploy, MIT licensed:** Universal-resume (non-commercial), mnjul/html-resume (Apache 2.0 — close, but not MIT), Themeforest entries (commercial). Ours ships pre-wired `pages.yml`, MIT license, free forever.

---

## Explicitly NOT building

- **JSON Resume schema export / CLI tooling:** Data portability via JSON schema is valuable but requires a Node CLI or build plugin. Out of scope. The template's data lives in a single Astro data file or frontmatter — easy to read, easy to edit manually.
- **Multi-page CV with cover letter:** Cover letters are separate documents. Multi-page print layout requires complex CSS pagination and page-break management. Out of scope for a "single page, print-friendly" template.
- **ATS optimization claims:** Keyword stuffing and ATS-targeted formatting are SaaS product features (Teal, Kickresume, Zety). We are not an ATS optimizer. We are a well-designed, readable CV.
- **Mass-customization config UI:** No theme picker, no live font selector, no drag-and-drop sections. The user edits the Astro data file. That is the customization UX.
- **Applicant tracking integrations (Greenhouse, Lever, Workday):** Requires server-side auth. Completely out of scope.
- **Photo of the subject:** Excluded for bias, legal, and layout reasons documented above.
