@mpelka/resumegenerator 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Marek Pelka
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,120 @@
+# resumegenerator
+
+Markdown-to-PDF resume generator. Write your resume in markdown, get a styled, ATS-friendly PDF.
+
+## Install
+
+Requires [Bun](https://bun.sh).
+
+```bash
+bun i -g @mpelka/resumegenerator
+```
+
+This installs the CLI tool and Chromium browser automatically. Fonts are downloaded from Google Fonts on first run and cached locally.
+
+## Usage
+
+```bash
+resumegenerator --filename resume.md
+```
+
+| Flag | Description |
+|------|-------------|
+| `--filename` | Path to the markdown resume (required) |
+| `--template` | Template name (default: `modern`) |
+| `--initials` | Override auto-derived monogram initials |
+| `--output-filename` | Override the output PDF filename |
+| `--spacing` | Spacing multiplier (e.g. `0.8` = 80% of default gaps) |
+
+The PDF is written next to the source `.md` file. Initials for the monogram are auto-derived from the `h1` name.
+
+## Markdown format
+
+```markdown
+# Full Name
+
+**Job Title**
+
+Location • email@example.com • linkedin.com/in/handle
+
+Summary paragraph with optional **bold** keywords.
+
+## Work Experience
+
+### Company Name
+**Role Title** | Start Date - End Date
+
+* Achievement with **keyword** highlights
+
+*Technologies used: Tech1, Tech2, Tech3.*
+
+## Education
+
+### University Name
+**Degree** | Start Year - End Year
+
+## Skills
+
+- **Category:** Item1 • Item2 • Item3
+```
+
+YAML frontmatter is supported and stripped before rendering.
+
+## Templates
+
+Each template defines its own fonts, colors, and layout features. Pass `--template <name>` to switch.
+
+| Template | Description |
+|----------|-------------|
+| `modern` (default) | Clean sans-serif (IBM Plex Sans) with monogram badge and section divider lines |
+| `technical` | Monospace (IBM Plex Mono) with outlined circle monogram and minimal section labels |
+
+Templates live in `templates/<name>/` with two files:
+- `style.css` — layout, margins (`@page`), and visual styling
+- `template.js` — config (fonts, colors, feature flags)
+
+## Customizing templates
+
+To create a new template, add a directory under `templates/` with:
+
+**`template.js`** — exports a config object:
+
+```js
+export default {
+  fonts: { primary: "IBM Plex Sans", secondary: "IBM Plex Mono" },
+  colors: {
+    body: "#323336",
+    subtitle: "#707678",
+    sectionLabel: "#a6aaad",
+    accent: "#42f398",
+    border: "#e0e0e0",
+  },
+  features: {
+    monogram: true,        // render initials badge
+    sectionDividers: true, // "EXPERIENCE ————" style dividers
+  },
+};
+```
+
+**`style.css`** — template-specific styles, including page margins via `@page`. Uses CSS variables (`--font-primary`, `--font-secondary`, `--color-*`) injected from the config at build time.
+
+Font families must be present in the `GOOGLE_FONTS_URL` map in `src/utils.js`.
+
+## How it works
+
+The CLI parses your markdown, renders it to semantic HTML with configurable templates, downloads and caches Google Fonts as TTF files, then uses Playwright's Chromium to generate a tagged PDF. The result is an ATS-optimized document with proper text selection, heading structure, and PDF link annotations.
+
+## ATS optimization
+
+The generated PDFs are optimized for Applicant Tracking Systems and AI-based resume screening:
+
+- **Tagged PDF** — embeds a structural tag tree (headings, paragraphs, lists) for correct semantic parsing
+- **PDF metadata** — title is set to `Name - Resume` (not the temp filename)
+- **Single-column layout** — no tables, columns, or complex layouts that break ATS parsers
+- **Real text** — all content is selectable text, not images
+- **Semantic HTML** — clean heading hierarchy (h1/h2/h3) with standard section names
+- **Hyperlinks** — email, LinkedIn, and GitHub are embedded as proper PDF link annotations
+
+## Font strategy
+
+The CLI downloads full TTF files from Google Fonts rather than using CDN `<link>` tags. Google Fonts CDN serves WOFF2 files split into `unicode-range` subsets, and when Playwright embeds these into a PDF the character-to-glyph mapping fragments — text looks correct but copy-paste produces garbled output, breaking ATS parsers. Fetching with a basic Linux User-Agent returns un-subsetted TTF URLs that produce clean character maps. A temp HTML file is written so the page loads with a `file://` origin, which is required for Chromium to access the locally cached font files.

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@mpelka/resumegenerator",
+  "version": "1.0.0",
+  "description": "Markdown-to-PDF resume generator with templates and ATS optimization",
+  "type": "module",
+  "license": "MIT",
+  "bin": {
+    "resumegenerator": "src/cli.js"
+  },
+  "files": [
+    "src/cli.js",
+    "src/render.js",
+    "src/utils.js",
+    "src/base.css",
+    "templates/"
+  ],
+  "scripts": {
+    "generate": "bun src/cli.js",
+    "test": "bun test",
+    "check": "bunx @biomejs/biome check --write .",
+    "lint": "bunx @biomejs/biome lint .",
+    "postinstall": "npx playwright install chromium"
+  },
+  "keywords": [
+    "resume",
+    "pdf",
+    "markdown",
+    "cli",
+    "ats"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mpelka/resumegenerator"
+  },
+  "engines": {
+    "bun": ">=1.0"
+  },
+  "dependencies": {
+    "commander": "^14.0.3",
+    "playwright": "^1.58.2"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.6"
+  }
+}

package/src/base.css

@@ -0,0 +1,48 @@
+/* Preflight (subset of Tailwind's reset relevant to this document) */
+*,
+::after,
+::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0 solid;
+}
+
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+/* Base */
+body {
+  font-family: var(--font-primary);
+  color: var(--color-body);
+  background: #fff;
+  -webkit-font-smoothing: antialiased;
+}

package/src/cli.js

@@ -0,0 +1,192 @@
+#!/usr/bin/env bun
+import { existsSync, mkdirSync, readdirSync, readFileSync, unlinkSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { program } from "commander";
+import { chromium } from "playwright";
+import { renderResume } from "./render.js";
+import { buildHtml, buildPdfName, deriveInitials, GOOGLE_FONTS_URL, parseFontFaces, parseFrontmatter } from "./utils.js";
+
+if (typeof Bun === "undefined") {
+  console.error("This tool requires Bun. Install it at https://bun.sh");
+  process.exit(1);
+}
+
+const ROOT = resolve(import.meta.dirname, "..");
+const FONTS_DIR = resolve(ROOT, ".fonts");
+
+async function ensureFont(fontFamily) {
+  const url = GOOGLE_FONTS_URL[fontFamily];
+  if (!url) return null;
+
+  mkdirSync(FONTS_DIR, { recursive: true });
+
+  // Return cached CSS if available
+  const cacheFile = resolve(FONTS_DIR, `${fontFamily}.css`);
+  if (existsSync(cacheFile)) {
+    return readFileSync(cacheFile, "utf-8");
+  }
+
+  console.log(`Downloading fonts for ${fontFamily} (one-time)...`);
+
+  // Fetch with basic UA to get un-subsetted TTF URLs (no unicode-range splitting)
+  const res = await fetch(url, {
+    headers: { "User-Agent": "Mozilla/5.0 (X11; Linux x86_64)" },
+  });
+  const cssText = await res.text();
+  const faces = parseFontFaces(cssText, fontFamily);
+
+  const cssRules = [];
+  for (const face of faces) {
+    const filePath = resolve(FONTS_DIR, face.filename);
+
+    if (!existsSync(filePath)) {
+      const fontRes = await fetch(face.fileUrl);
+      writeFileSync(filePath, Buffer.from(await fontRes.arrayBuffer()));
+    }
+
+    cssRules.push(`@font-face {
+      font-family: '${fontFamily}';
+      src: url('${pathToFileURL(filePath).href}') format('truetype');
+      font-weight: ${face.weight};
+      font-style: ${face.style};
+    }`);
+  }
+
+  const result = cssRules.join("\n");
+  writeFileSync(cacheFile, result);
+  return result;
+}
+
+async function ensureFonts(families) {
+  const results = [];
+  for (const family of families) {
+    const css = await ensureFont(family);
+    if (css) results.push(css);
+  }
+  return results.join("\n") || null;
+}
+
+program
+  .description("Generate a styled PDF resume from markdown")
+  .requiredOption("--filename <path>", "path to the markdown resume")
+  .option("--template <name>", "template name", "modern")
+  .option("--initials <letters>", "override auto-derived monogram initials")
+  .option("--output-filename <name>", "override the output PDF filename")
+  .option("--spacing <multiplier>", "scale vertical gaps (e.g. 0.8 = 80%)")
+  .parse();
+
+const opts = program.opts();
+const filename = opts.filename;
+const outputFilename = opts.outputFilename;
+
+// Load template
+const templateName = opts.template;
+const templateDir = resolve(ROOT, "templates", templateName);
+
+if (!existsSync(templateDir)) {
+  const available = readdirSync(resolve(ROOT, "templates"), { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name);
+  console.error(`Template "${templateName}" not found. Available templates: ${available.join(", ")}`);
+  process.exit(1);
+}
+
+const templateConfig = (await import(resolve(templateDir, "template.js"))).default;
+const templateCSS = readFileSync(resolve(templateDir, "style.css"), "utf-8");
+const baseCSS = readFileSync(resolve(ROOT, "src", "base.css"), "utf-8");
+
+// Read and validate markdown
+const mdPath = resolve(process.cwd(), filename);
+const outputDir = dirname(mdPath);
+
+let raw;
+try {
+  raw = readFileSync(mdPath, "utf-8");
+} catch {
+  console.error(`File not found: ${mdPath}`);
+  process.exit(1);
+}
+
+const { markdown } = parseFrontmatter(raw);
+
+const nameMatch = markdown.match(/^#\s+(.+)$/m);
+if (!nameMatch) {
+  console.error("Error: markdown must contain an h1 heading (# Name)");
+  process.exit(1);
+}
+
+// Derive initials from h1 or use CLI override
+const initials = opts.initials || deriveInitials(nameMatch[1]);
+
+// Render markdown to HTML
+const bodyHtml = renderResume(markdown, { initials, features: templateConfig.features });
+
+// Download/cache fonts
+const fontFamilies = Object.values(templateConfig.fonts);
+const fontFaceCSS = await ensureFonts(fontFamilies);
+
+// Build spacing overrides if provided (multiplier, e.g. 0.8 = 80% of default gaps)
+let spacingCSS = "";
+const spacing = opts.spacing ? parseFloat(opts.spacing) : null;
+if (spacing != null) {
+  const s = spacing;
+  spacingCSS = [
+    `header { margin-bottom: ${20 * s}px !important; }`,
+    `.section-divider { margin-top: ${28 * s}px !important; margin-bottom: ${20 * s}px !important; }`,
+    `h3 { margin-top: ${32 * s}px !important; }`,
+    `ul { margin-top: ${6 * s}px !important; }`,
+    `ul + p { margin-top: ${6 * s}px !important; }`,
+  ].join("\n");
+}
+
+// Build CSS: base + template + spacing overrides
+const css = `${baseCSS}\n${templateCSS}\n${spacingCSS}`;
+
+let varsCSS = ":root {";
+varsCSS += ` --font-primary: '${templateConfig.fonts.primary}', sans-serif;`;
+if (templateConfig.fonts.secondary) {
+  varsCSS += ` --font-secondary: '${templateConfig.fonts.secondary}', serif;`;
+}
+for (const [key, value] of Object.entries(templateConfig.colors)) {
+  const prop = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+  varsCSS += ` --color-${prop}: ${value};`;
+}
+varsCSS += " }";
+
+const pdfTitle = `${nameMatch[1]} - Resume`;
+const fullHtml = buildHtml({ bodyHtml, fontFaceCSS, css, fontOverride: varsCSS, pdfTitle });
+
+// Generate PDF with Playwright
+const tmpHtml = resolve(outputDir, ".tmp-resume.html");
+writeFileSync(tmpHtml, fullHtml);
+
+const primaryFont = templateConfig.fonts.primary;
+console.log(
+  `Generating PDF (template: ${templateName}, font: ${primaryFont}, source: ${fontFaceCSS ? "Google Fonts (cached)" : "system fallback"})...`,
+);
+let browser;
+try {
+  browser = await chromium.launch();
+} catch {
+  console.error("Chromium not found. Run: npx playwright install chromium");
+  unlinkSync(tmpHtml);
+  process.exit(1);
+}
+const page = await browser.newPage();
+await page.goto(pathToFileURL(tmpHtml).href, { waitUntil: "networkidle" });
+await page.evaluateHandle("document.fonts.ready");
+
+const pdfName = buildPdfName(filename, outputFilename);
+const pdfPath = resolve(outputDir, pdfName);
+
+await page.pdf({
+  path: pdfPath,
+  format: "A4",
+  printBackground: true,
+  tagged: true,
+});
+
+await browser.close();
+unlinkSync(tmpHtml);
+console.log(`PDF saved to: ${pdfPath}`);

package/src/render.js

@@ -0,0 +1,39 @@
+/**
+ * Takes raw resume markdown and returns an HTML string.
+ * Uses Bun.markdown.html() for parsing, then post-processes
+ * headings (header with initials, section dividers).
+ * Everything else uses standard GFM HTML output, styled via CSS.
+ *
+ * @param {string} markdown
+ * @param {{ initials?: string, features?: { monogram?: boolean, sectionDividers?: boolean } }} options
+ */
+export function renderResume(markdown, { initials, features = {} } = {}) {
+  let html = Bun.markdown.html(markdown);
+
+  // Transform h1 into header, optionally with monogram
+  let inHeader = true;
+  html = html.replace(/<h1>(.*?)<\/h1>/s, (_, content) => {
+    const monogram =
+      features.monogram !== false && initials
+        ? `<div class="initials"><span>${initials[0]}</span><span>${initials[1]}</span></div>`
+        : "";
+    return `<header>${monogram}<h1>${content}</h1>`;
+  });
+
+  // Transform h2 — section dividers or plain headings depending on features
+  html = html.replace(/<h2>(.*?)<\/h2>/g, (_, content) => {
+    const closeHeader = inHeader ? "</header>" : "";
+    inHeader = false;
+    if (features.sectionDividers === false) {
+      return `${closeHeader}<h2>${content}</h2>`;
+    }
+    return `${closeHeader}
+          <div class="section-divider">
+            <span>${content}</span>
+            <div class="divider-line"></div>
+          </div>`;
+  });
+
+  const closingTag = inHeader ? "</header>" : "";
+  return `<div class="resume-page">${html}${closingTag}</div>`;
+}

package/src/utils.js

@@ -0,0 +1,75 @@
+import { basename } from "node:path";
+
+export function deriveInitials(name) {
+  return name
+    .split(/\s+/)
+    .map((w) => w[0])
+    .join("")
+    .toUpperCase();
+}
+
+export function parseFrontmatter(raw) {
+  const match = raw.match(/^---\n([\s\S]+?)\n---\n([\s\S]*)$/);
+  if (!match) return { meta: {}, markdown: raw };
+  return { meta: Bun.YAML.parse(match[1]), markdown: match[2] };
+}
+
+export const GOOGLE_FONTS_URL = {
+  "Source Sans 3":
+    "https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap",
+  "IBM Plex Sans":
+    "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap",
+  "Fira Sans":
+    "https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap",
+  Lato: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap",
+  Inter: "https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap",
+  "DM Sans":
+    "https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap",
+  "IBM Plex Mono":
+    "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap",
+};
+
+export function buildPdfName(filename, outputFilename) {
+  if (outputFilename) return outputFilename;
+  return `${basename(filename, ".md")}.pdf`;
+}
+
+export function buildHtml({ bodyHtml, fontFaceCSS, css, fontOverride, pdfTitle }) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>${pdfTitle}</title>
+  <style>${fontFaceCSS ?? ""}</style>
+  <style>${css}</style>
+  <style>${fontOverride}</style>
+</head>
+<body>
+  ${bodyHtml}
+</body>
+</html>`;
+}
+
+
+export function parseFontFaces(cssText, fontFamily) {
+  const faces = [];
+  const faceRegex = /@font-face\s*\{([^}]+)\}/g;
+
+  for (const match of cssText.matchAll(faceRegex)) {
+    const block = match[1];
+    const urlMatch = block.match(/url\(([^)]+)\)/);
+    const weightMatch = block.match(/font-weight:\s*(\d+)/);
+    const styleMatch = block.match(/font-style:\s*(\w+)/);
+
+    if (!urlMatch) continue;
+
+    faces.push({
+      fileUrl: urlMatch[1],
+      weight: weightMatch?.[1] || "400",
+      style: styleMatch?.[1] || "normal",
+      filename: `${fontFamily}-${weightMatch?.[1] || "400"}-${styleMatch?.[1] || "normal"}.ttf`,
+    });
+  }
+
+  return faces;
+}

package/templates/modern/style.css

@@ -0,0 +1,168 @@
+/* Page container */
+.resume-page {
+  max-width: 210mm;
+  margin: 0 auto;
+  padding: 56px 96px;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+/* Header */
+header {
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.initials {
+  position: absolute;
+  left: -15mm;
+  top: 0;
+  width: 36px;
+  height: 36px;
+  background: var(--color-accent);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+header h1 {
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  line-height: 1.2;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+}
+
+/* Title (first p after h1) — markdown wraps in <strong>, unbold it */
+header p:nth-of-type(1) {
+  font-size: 14px;
+  color: var(--color-body);
+  margin-bottom: 6px;
+}
+
+header p:nth-of-type(1) strong {
+  font-weight: normal;
+}
+
+/* Contact (second p) */
+header p:nth-of-type(2) {
+  font-size: 11px;
+  color: var(--color-subtitle);
+  margin-bottom: 14px;
+}
+
+/* Summary (third p) */
+header p:nth-of-type(3) {
+  font-size: 12.5px;
+  line-height: 1.4;
+  color: var(--color-body);
+}
+
+/* Section dividers */
+.section-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 28px;
+  margin-bottom: 20px;
+}
+
+.section-divider span {
+  font-family: var(--font-secondary, var(--font-primary));
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-section-label);
+  white-space: nowrap;
+}
+
+.divider-line {
+  flex: 1;
+  border-top: 1px solid var(--color-border);
+}
+
+/* Entry headings (h3 = company) */
+h3 {
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-top: 32px;
+}
+
+/* First h3 after section divider needs no top margin */
+.section-divider + h3 {
+  margin-top: 0;
+}
+
+/* Role & dates (p right after h3) — markdown wraps role in <strong>, unbold it */
+h3 + p {
+  font-size: 12px;
+  color: var(--color-subtitle);
+  margin-top: 2px;
+}
+
+h3 + p strong {
+  font-weight: normal;
+}
+
+/* Bullet lists */
+ul {
+  list-style: disc outside;
+  margin-left: 20px;
+  margin-top: 6px;
+  font-size: 12.5px;
+  line-height: 1.4;
+}
+
+li {
+  margin-bottom: 2px;
+}
+
+/* Technologies line (italic paragraphs) */
+ul + p,
+li em {
+  font-size: 12px;
+  font-weight: 300;
+  color: var(--color-subtitle);
+}
+
+ul + p {
+  margin-top: 6px;
+}
+
+/* Skills section — no bullets, tighter layout */
+.section-divider:last-of-type + ul {
+  list-style: none;
+  margin-left: 0;
+}
+
+/* Entry grouping */
+h3 ~ ul {
+  break-inside: avoid;
+}
+
+/* Print styles */
+@media print {
+  @page {
+    size: A4;
+    margin: 20mm 0;
+  }
+
+  body {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .resume-page {
+    max-width: none;
+    padding: 0 25mm;
+  }
+}

package/templates/modern/template.js

@@ -0,0 +1,14 @@
+export default {
+  fonts: { primary: "IBM Plex Sans", secondary: "IBM Plex Mono" },
+  colors: {
+    body: "#323336",
+    subtitle: "#707678",
+    sectionLabel: "#a6aaad",
+    accent: "#42f398",
+    border: "#e0e0e0",
+  },
+  features: {
+    monogram: true,
+    sectionDividers: true,
+  },
+};

package/templates/technical/style.css

@@ -0,0 +1,168 @@
+/* Page container */
+.resume-page {
+  max-width: 210mm;
+  margin: 0 auto;
+  padding: 56px 96px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* Header */
+header {
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.initials {
+  position: absolute;
+  left: -18mm;
+  top: 0;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: 1.5px solid var(--color-accent);
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-accent);
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+header h1 {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  line-height: 1.2;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+}
+
+/* Title (first p after h1) — markdown wraps in <strong>, unbold it */
+header p:nth-of-type(1) {
+  font-size: 13px;
+  color: var(--color-body);
+  margin-bottom: 6px;
+}
+
+header p:nth-of-type(1) strong {
+  font-weight: normal;
+}
+
+/* Contact (second p) */
+header p:nth-of-type(2) {
+  font-size: 10.5px;
+  color: var(--color-subtitle);
+  margin-bottom: 14px;
+}
+
+/* Summary (third p) */
+header p:nth-of-type(3) {
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--color-body);
+}
+
+/* Section dividers — label only, no line */
+.section-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 28px;
+  margin-bottom: 20px;
+}
+
+.section-divider span {
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-section-label);
+  white-space: nowrap;
+}
+
+.divider-line {
+  display: none;
+}
+
+/* Entry headings (h3 = company) */
+h3 {
+  font-size: 12.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-top: 26px;
+  break-after: avoid;
+}
+
+/* First h3 after section divider needs no top margin */
+.section-divider + h3 {
+  margin-top: 0;
+}
+
+/* Role & dates (p right after h3) — markdown wraps role in <strong>, unbold it */
+h3 + p {
+  font-size: 11.5px;
+  color: var(--color-subtitle);
+  margin-top: 2px;
+  break-after: avoid;
+}
+
+h3 + p strong {
+  font-weight: normal;
+}
+
+/* Bullet lists */
+ul {
+  list-style: disc outside;
+  margin-left: 18px;
+  margin-top: 6px;
+  font-size: 11.5px;
+  line-height: 1.45;
+}
+
+li {
+  margin-bottom: 3px;
+}
+
+/* Technologies line (italic paragraphs) */
+ul + p,
+li em {
+  font-size: 11px;
+  font-weight: 300;
+  color: var(--color-subtitle);
+}
+
+ul + p {
+  margin-top: 6px;
+}
+
+/* Skills section — no bullets, tighter layout */
+.section-divider:last-of-type + ul {
+  list-style: none;
+  margin-left: 0;
+}
+
+/* Print styles */
+@media print {
+  @page {
+    size: A4;
+    margin-top: 20mm;
+    margin-bottom: 20mm;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  body {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .resume-page {
+    max-width: none;
+    padding: 0 25mm;
+  }
+}

package/templates/technical/template.js

@@ -0,0 +1,14 @@
+export default {
+  fonts: { primary: "IBM Plex Mono" },
+  colors: {
+    body: "#323336",
+    subtitle: "#636669",
+    sectionLabel: "#a6aaad",
+    accent: "rgb(79, 106, 246)",
+    border: "#e0e0e0",
+  },
+  features: {
+    monogram: true,
+    sectionDividers: true,
+  },
+};