@gurupanguji

Technical Specification: /uses Page

Overview

This specification details the creation of a /uses page for gurupanguji.com, following the community standard for developers and creators to share their tools (hardware, software, photography gear).

Architecture & Integration

The /uses page is implemented as a Markdown file that leverages the existing post Jekyll layout. This ensures:

• Visual consistency with the rest of the blog.
• Automatic support for light/dark themes via CSS variables.
• Ease of content updates without modifying complex HTML structures.

Implementation Details

Page Structure

• File Path: uses/index.md
• Layout: post
• Styling: In-page <style> block to:
  • Hide post-specific metadata (date) from the header.
  • Style sections with custom borders and spacing.
  • Create a custom bullet point (›) that matches the site’s accent colors.
  • Use Manrope for body text and Outfit for technical labels (consistent with the site’s typography).

Content Sections

• Hardware: Lists workstations (Mac Studio, MacBook Pro), storage (Zima Cube NAS), ZSA Voyager keyboard, and daily mobile device (iPhone 17 Pro).
• Photography: Details camera bodies (Fujifilm X100VI, Leica M11-P) and specific lenses (Voigtlander, Thypoch).
• Software: Lists primary productivity and knowledge management apps (Obsidian, Chrome, Alfred 5, Zed).
• CLI Tools: Highlights terminal workflow tools (Tmux, Zsh, eza, bat, ripgrep, fzf, zoxide) and AI tools (Gemini CLI, Codex, Pi).

Navigation Integration

The navigation menu has been updated globally to include a “Uses” link.

• Menu Items: About, Blog, Photography, Uses.
• Files Modified:
  • index.html: Added to the main homepage links.
  • _layouts/post.html: Added to the persistent header for all blog posts.
  • Root index pages for major sections: about/index.html, reviews/index.html, labs/index.html, rss/index.html.
  • Specific long-form review pages: reviews/camera/fujifilm/x100vi/index.html, reviews/camera/leica/m11-p/index.html, labs/is-it-time-to-upgrade-to-tahoe-yet/index.html.

Accessibility & SEO

• Aria Labels: Primary navigation is wrapped in <nav aria-label="Primary">.
• Title Tag: Set to “Uses // @gurupanguji” via the layout.
• Semantics: Uses <h2 class="uses-section"> for clear content hierarchy.