personal website

A fully hand-crafted static portfolio site with no frameworks, no dependencies, and no build pipeline. Pages, projects, and games are organized into a clear directory hierarchy and share UI components inlined at build time.

Shared UI lives in a components/ directory: navigation header, footer, and CSS background pattern. Each HTML page contains empty placeholder <div id="header"> elements. Running page_bldr.py crawls every HTML file and replaces each placeholder with the component's inlined content. The builder uses a depth-counting pass over the raw HTML string to locate the matching </div> for each placeholder before swapping it out

This approach avoids the runtime penalty of fetch-on-load dynamic component loading without reaching for a full JavaScript framework. All markup is present in the HTML file on first load.

JavaScript is used sparingly and only for behaviors CSS can't handle. projects-filter.js reads data-tags attributes on project cards and applies an AND filter across independent filter groups, hiding cards that don't match every active selection. lightbox.js injects a single overlay element on page load and wires up all [data-lightbox] images to it, including keyboard Escape to dismiss. game-embed.js defers itch.io iframe creation until the user clicks a placeholder, avoiding up-front load cost for embeds that most visitors won't interact with.