Colophon

Colophon

This page contains the technical details about this website’s design, tools, and philosophy.

🎨 Design Philosophy

This site embraces the Japanese web aesthetic (circa 1990s-2010s) while maintaining modern accessibility standards. Key design elements include:

  • Information density: Compact layouts with lots of content
  • Vibrant colors: Bright, saturated colors and thick borders
  • Typography: Modern humanist fonts with Japanese fallbacks
  • Authentic elements: Webrings, 88x31 badges, visitor counters

πŸ› οΈ Technical Stack

Static Site Generator

  • Hugo v0.148.2+extended - Fast static site generator written in Go
  • No JavaScript frameworks - Minimal JS for enhanced functionality only
  • Semantic HTML5 - Proper structure and accessibility

Design System

  • CSS Grid & Flexbox - Modern layout with fallbacks
  • Custom CSS - No frameworks, handcrafted styles
  • Responsive design - Mobile-first approach
  • CSS animations - Subtle effects with reduced motion support

Typography

  • Sans-serif: Seravek, ‘Gill Sans Nova’, Ubuntu, Calibri, ‘DejaVu Sans’, source-sans-pro
  • Serif: Charter, ‘Bitstream Charter’, ‘Sitka Text’, Cambria
  • Japanese fallbacks: MS PGothic/PMincho, Osaka, Hiragino Kaku/Mincho Pro

🌐 IndieWeb Implementation

This site is fully IndieWeb-compatible:

Microformats2

  • h-entry - Blog posts and pages
  • h-card - Author information
  • p-name, e-content, dt-published - Structured data

Protocols

  • Webmentions - Receive responses from other sites
  • Pingbacks - Traditional notification system
  • rel=“me” - Verified profile links
  • RSS/Atom - Syndication feeds

πŸ“ Project Structure

your-site/
β”œβ”€β”€ content/           # Markdown content
β”œβ”€β”€ layouts/           # Hugo templates
β”œβ”€β”€ static/           # CSS, JS, images
β”œβ”€β”€ archetypes/       # Content templates
└── hugo.toml         # Site configuration

🎯 Performance

  • Build time: <100ms for entire site
  • Page weight: <50KB per page
  • No external dependencies - Self-hosted everything
  • CDN-ready - Static assets optimized for caching

πŸ“œ Credits

Theme Development

  • Design: Your Name
  • Development: πŸ“ Berry House
  • License: MIT License

Inspirations

  • Japanese personal websites of the 1990s-2010s
  • IndieWeb community principles
  • Static site renaissance movement

Tools & Services

  • Hugo - Static site generator
  • Development Environment: Visual Studio Code
  • Version Control: Git

πŸ”§ Custom Features

Shortcodes

  • {{< colorbox >}} - Colored text boxes
  • {{< new-badge >}} - “NEW!” indicators
  • {{< quote-box >}} - Decorative quotes
  • {{< gallery >}} - Image galleries
  • {{< alert >}} - Alert messages

Widgets

  • Recent posts with “NEW!” badges
  • Tag cloud with weighted sizing
  • Archive by month/year
  • Functional visitor counter
  • Webring navigation
  • 88x31 badge grid

πŸ“Š Statistics

  • Posts: 17
  • Categories: 12
  • Tags: 33
  • Build date: 2026-02-08 09:43:29