Portfolio Engine
A zero-dependency static site pipeline that turns structured project data into a themed, social-ready portfolio.
Overview
This repo doubles as its own first project: a tiny publishing pipeline that turns project.json files into a full portfolio site.
Projects contain only data and media. Every page is generated from templates in theme/, so the design is enforced across all projects — restyle once, rebuild, and every page past and future picks it up.
Media
Features
Enforced templates
Pages are generated, never hand-written. The build fails if a project is missing required fields, alt text, or referenced media files.
Inline media with controls
Screenshots open in a lightbox, videos get a native player, and before/after comparisons get a draggable slider — all driven by the media manifest.
Social-ready pages
Each page bakes in Open Graph tags from project data, so shared links unfurl with the right title, description, and hero image.
Zero dependencies
Plain Node, vanilla CSS and JS. Nothing to install, nothing to go stale.
Technical
scripts/build.js scans projects/, validates each project.json (required fields, media files on disk, alt text), and stamps out index.html pages from theme/templates/. Validation errors abort the build — that is the enforcement mechanism.
The theme is a small design-token system in CSS custom properties with automatic dark mode, plus about 100 lines of vanilla JS for the lightbox and compare slider.
Open Graph baked in
Generated pages carry per-project og: tags so link previews work on LinkedIn, X, and Slack — the reason pages are generated instead of client-rendered.
Fail-loud validation
A missing screenshot or alt text stops the build with a pointed error instead of shipping a broken page.