← Build Log

$ cat git-cv studio.md

Git-CV Studio

A standalone, local-first web application and rendering engine that visualizes developer resumes as interactive, multi-branch Git commit graphs. Offers real-time canvas previewing, multi-profile JSON management, and deterministic, pixel-perfect native A4 vector PDF generation via headless Chromium.

Source Code↗

Spec sheet

type
web app
stack
Node.js, JavaScript, Puppeteer, SVG, CSS3, Vector Graphics, Developer Tools
status
● active · since 2026
repo
https://github.com/Chrimo02/git-cv-studio
git-cv studio — preview
Split-screen interface of Git-CV Studio displaying the visual timeline customizer and a real-time Git graph resume preview with A4 pagination guides.
fig. 01 · interface previewscale 1:1 · rev 2026

Overview

Software developers often struggle with generic resume builders that fail to represent non-linear career paths—such as concurrent freelance work, academic degrees, and open-source contributions. Git-CV Studio solves this by modeling professional milestones as an authentic Git version tree, complete with feature branches, merge commits, and status tags.

Built as a lightweight, zero-dependency local application, it decouples resume generation from bloated web frameworks and erratic browser print dialogs (window.print()). The project aims to provide engineers with total typographical and topological control over their resumes, delivering deterministic, publication-grade vector PDFs ready for job applications.

Key Features

  • Deterministic Git-Graph Topology Engine: Automatically parses chronological milestones into Git branches, calculating commit positions, parentage resolution, merge paths, and smooth SVG Bezier curves in real time.
  • Dual-Engine Preview Pipeline: Switch seamlessly between a zero-latency live design canvas with dynamic A4 page-boundary guidelines and an embedded true binary PDF viewer.
  • Smart A4 DOM Pagination: An in-browser layout engine measures physical millimetre dimensions, prevents orphan nodes, and cleanly splits station entries across pages using continuation bridges.
  • Comprehensive Profile Management: Create, duplicate, reorder, and persist multiple tailored resumes via structured JSON profiles (default-en.json, default-de.json), complete with one-click import/export.
  • One-Click Native Vector PDF Export: Generates high-resolution, vector-accurate A4 PDFs directly through headless Chrome, accessible via the web UI or an automated CLI script (npm run export).

Architecture & Tech Stack

  • Runtime & Backend: Node.js (node:http, node:fs, node:path) structured as a native ES Module service without external web framework overhead.
  • PDF Rendering Pipeline: Headless Chromium automated via Puppeteer, evaluating pre-paginated DOM trees into vector PDFs.
  • Frontend Architecture: Vanilla JavaScript (ESM), HTML5, and responsive CSS Grid/Flexbox with zero bundlers or build steps.
  • Graphics & Geometry: Mathematical coordinate calculation mapping career timeframes to dynamic SVG paths and branch lanes.

Highlights & Learnings

  • Mastering Physical Print Pagination: Standard CSS Paged Media (@page, break-inside: avoid) behaves inconsistently across browser engines. Solving this required engineering a custom client-side measurement and splitting algorithm (paginateCvDom) that dynamically calculates element bounding boxes in physical millimetres and injects visual bridge lines across page splits.
  • Resilient Branch-Parent Resolution: Enabling or disabling individual stations can easily break standard directed graphs. Designing an ancestor fallback algorithm ensured that disabling an intermediate station causes child branches to gracefully re-anchor to their nearest active ancestor or fall back to main.