Goal

Design and implement a lightweight, self-hosted portfolio website to document and organize long-term technical projects.

Requirements

The site needed to be simple, fast, and maintainable without requiring a complex web stack or ongoing hosting costs. It had to support:
- A sortable index of projects
- Rich project pages with galleries, specifications, and materials lists
- Easy creation of new projects using a repeatable template
- Mobile usability
- Hosting via GitHub Pages without custom build tooling

Result / Current Incarnation

The site is now live and actively used to document personal engineering projects. Projects can be added by creating a single Markdown file and dropping assets into a folder.
The result is intentionally minimal and utilitarian, inspired by catalog-style websites (e.g., McMaster-Carr): clean, functional, and content-first.
The development process relied heavily on AI-assisted "vibe-coding" to rapidly iterate on layout, Liquid logic, JavaScript behavior, and CSS styling.
Rather than replacing understanding, this accelerated experimentation and helped explore design options quickly while debugging edge cases manually.
This entire page (except this line) was generated using free ChatGPT use. This page contains the only AI generated content on the site.

Specifications

Overview:
- Static site built with Jekyll and GitHub Pages
- Project-driven architecture using Markdown + YAML front matter
- No backend, database, or build pipeline beyond GitHub Pages

Site features:
- Sortable project index (date, status, favorites, budget)
- Per-project pages with structured sections
- Automatically generated image/video galleries
- Lazy-loaded thumbnails with full-screen lightbox viewer
- CSV-based materials/parts lists embedded per project
- Related-project linking via project slugs

Technical stack:
- GitHub Pages (Jekyll)
- Liquid templates for content generation
- Vanilla JavaScript (no frameworks)
- Custom CSS with mobile-first layout considerations

Development process:
- Extensive AI-assisted iteration for layout, logic, and styling
- Manual debugging of Liquid edge cases and GitHub Pages behavior
- Incremental refinement driven by usability on desktop and mobile

Cost breakdown:
- $0 hosting (GitHub Pages)
- $0 software licenses
- Primary investment: time and iteration