Component System

This section explains how reusable components are designed and managed to enforce consistency, speed up development, and simplify maintenance across the portfolio site.

System Philosophy

The portfolio site follows a lightweight component philosophy centered around HTML partials injected dynamically into the DOM. Unlike traditional frameworks, this system remains framework-agnostic and avoids JavaScript-heavy render layers.

  • All components are standalone and context-aware
  • No reliance on React/Vue; simplicity and accessibility are prioritized
  • Injected using project-loader.js with Turbo support

Reusable Patterns

Reusable patterns like cards, headers, navigations, and typographic elements follow strict class groupings and are never styled ad hoc. Each usage is predictable and visually consistent regardless of placement.

Card Example

Standard layout for sectioned content.

class="bg-cardLight dark:bg-cardDark p-4 rounded border"

Icon Link Row

Used for next/prev navigation and buttons.

class="inline-flex items-center gap-1 group"

File Injection

Header, sidebar, and footer components are not embedded in every HTML file. Instead, a single loader script dynamically injects them at runtime, keeping HTML pages lean and DRY. 


document.querySelectorAll('[data-turbo-permanent]').forEach(el => {
  const target = el.id.replace('-placeholder', '');
  fetch(`../includes/${target}.html`)
    .then(res => res.text())
    .then(html => el.innerHTML = html);
});

This architecture supports serverless hosting and allows updates to structural elements without touching every page.

Scoped Utility Classes

Utility classes are tightly scoped within semantic containers. For instance, cards and sections use padding, border, and background themes that reflect your Tailwind config and shift responsively. 


class="rounded-lg p-6 border border-borderLight dark:border-borderDark bg-cardLight dark:bg-cardDark"

This strategy ensures color alignment across light and dark modes and enforces visual cohesion across all components.

Advantages

  • Content and layout separation with reduced duplication
  • Components remain editable without build tools
  • Supports graceful degradation and mobile-first rendering
  • Fast to load and SEO-friendly due to no client-side render blocking

While not as dynamic as JS frameworks, this method is optimized for maintainability and scalability in documentation-heavy portfolios.