j-riv.com Personal Site

live

A static personal portfolio and technical blog showcasing full-stack development, e-commerce integrations, infrastructure work, and project architecture through a terminal-inspired interface.

Eleventy Nunjucks TypeScript esbuild Node.js GitHub Actions GitHub Pages @11ty/eleventy-img

cat architecture.md

Source Content and Project Data

Nunjucks templates define page layouts, navigation, project views, taxonomy pages, and the homepage
Markdown files provide blog posts with front matter for titles, dates, categories, and images
TypeScript data modules define site metadata, projects, taxonomies, redirects, and homepage highlights

TypeScript Build Pipeline

esbuild compiles the Eleventy configuration, project data, taxonomy data, redirect data, and browser code
Generated JavaScript data files provide the compiled content consumed by Eleventy
Strict TypeScript checking runs before the production site is generated

Static Site Generation

Eleventy renders the homepage, project pages, taxonomy pages, blog pages, feeds, sitemap, and JSON project index
Project data is merged into paginated views for projects, categories, technologies, statuses, and groups
Client-side browser code provides the homepage boot sequence and interactive project search and filtering

Optimized Assets

Eleventy Image generates responsive image sizes and WebP/fallback formats for blog and project imagery
Syntax highlighting is applied to code blocks and architecture-related content
Static assets such as fonts, favicon files, CSS, JavaScript, and images are copied into the generated site

GitHub Pages Deployment

GitHub Actions installs dependencies, builds the static site, and uploads the generated _site directory
The deployment supports GitHub Pages path prefixes and a configured custom domain
Build-time validation checks project routes, taxonomies, sitemap entries, redirects, JSON output, and generated page views

# Why use static site generation?: The portfolio and blog are content-driven and do not require a server-side application or database. Rendering HTML during the build keeps deployment simple while producing fast, cacheable pages that can be hosted directly by GitHub Pages.
# Why separate TypeScript data from templates?: Project and site metadata remain type-checked and reusable while Nunjucks focuses on presentation. esbuild converts those data modules into the generated files consumed by Eleventy.
# Why generate project taxonomies?: The project catalog is organized from shared metadata such as categories, technologies, statuses, and groups. Generating those views keeps taxonomy pages, links, pagination, feeds, and sitemap entries synchronized with the project records.
# Why optimize images during the build?: Responsive image generation allows browsers to receive an appropriately sized asset instead of downloading a single unnecessarily large source image. WebP and fallback formats provide broader browser compatibility.
# How is reliability handled?: Strict type checking, generated-route validation, required image alt text, sitemap checks, and generated-page smoke checks catch content and build regressions before deployment.