@gurupanguji

gurupanguji.github.io // Documentation

This repository houses the personal portfolio and review site for @gurupanguji. It is built as a high-end static site using Jekyll, following the philosophy of “Das Wesentliche” (The Essential).

🏷 Naming Policy

🏗 Site Architecture

The site uses Jekyll to generate a static portfolio and a 1,200+ post blog archive:

/_config.yml                # Jekyll Configuration (Pagination, SEO, Timezone)
/Gemfile                    # Ruby dependencies (with Ruby 4.0 compatibility patches)
/index.html                 # Home: Portal to Blog & Reviews (Jekyll powered)
/404.html                   # Custom 404 & Legacy WP Link Redirector
/GEMINI.md                  # Core Agent Mandates (Branching Policy)
/docs/
    /superpowers/
        /plans/             # Implementation plans (tracked in branches)
        /specs/             # Technical specifications (tracked in branches)
/scripts/
    /generate_social_snippets.py # Generator for _snippets/ artifacts
    /publish_social.py           # Core engine for social media API publishing
    /validate_posts.py           # CI validator for post dates and snippet coverage
/.github/workflows/
    /publish_social.yml          # Manual social media publisher
    /validate_posts.yml          # CI check for post/snippet integrity
    /validate_html.yml           # CI check for markdown leaks in HTML
/_layouts/
    /post.html              # Standard layout for blog posts & archive
/_posts/
    /YYYY-MM-DD-slug.md     # 1,200+ migrated WordPress posts
/_snippets/
    /YYYY-MM-DD-slug.md     # Companion social snippets for each blog post
/about/
    /index.html             # About page
/blog/
    /index.html             # Jekyll-paginated Blog Archive
/rss/
    /index.html             # RSS Feed Portal
    /photography.xml        # Photography RSS Feed
/assets/
    /gurupanguji.jpeg       # Profile image (Favicon & Avatar)
    /whatsapp-preview.jpg   # Default social preview image (OG/Twitter/WhatsApp)
    /css/style.css          # Global Design System (Resets, Header, Footer)
    /images/blog/           # Locally hosted images for blog posts
/reviews/
    /index.html             # Visual Portal for all reviews
    /camera/
        /$brand/$model/     # e.g., /reviews/camera/leica/m11-p/ or /reviews/camera/fujifilm/x100vi/
            /index.html     # The review content
            /images/        # Published assets referenced by the review

🌳 Git Workflow & Branching Policy

To ensure the stability of the main branch, all changes must follow these rules:

🎨 Design System: “Das Wesentliche”

The design is inspired by German precision engineering (Leica):

Shared UI Components

1. Background Dot Grid

Every page should include this div immediately after the <body> tag:

<div class="dot-grid"></div>

2. Premium Header (.header-minimal)

Used on all pages. Note: Use absolute paths (/about/index.html, /assets/...) to ensure consistency across Jekyll’s nested directory structure.

<header class="header-minimal">
  <a href="/" class="logo-link">
    <img src="/assets/gurupanguji.jpeg" alt="Avatar" class="avatar avatar-sm">
    gurupanguji
  </a>
  <nav class="nav-links">
    <a href="/about/index.html" class="nav-link">About</a>
    <a href="/blog/index.html" class="nav-link">Blog</a>
    <a href="/reviews/index.html" class="nav-link">Photography</a>
  </nav>
</header>

Standardized copyright signature and 6 social icons.

<footer>
  <!-- Social Links -->
  <div class="copyright">
      © <time datetime="2026">2026</time> // gurupanguji //
      <span class="das-wesentliche" style="letter-spacing: 2px; font-size: 0.5rem"
        >Das Wesentliche.</span
      >
  </div>
</footer>

✍️ Writing Content

Voice Calibration Notes

Adding a New Post

  1. Create File: Create a new Markdown file in _posts/ following the YYYY-MM-DD-slug.md naming convention.
  2. YAML Front Matter: Every post MUST start with this block: 
    ---
layout: post
title: "Your Post Title"
date: YYYY-MM-DD HH:MM:SS +0000
categories: ["category1", "category2"]
tags: ["tag1", "tag2"]
---

    Note: Using +0000 ensures the URL date matches your filename exactly.

  3. Markdown Styling:
    • Quotes: Use > for blockquotes (rendered in Newsreader serif).
    • Source Line: Link posts (🔗) must use the exact format *Source:* [Title](URL). Do not use pipes (|) in the link text.
    • Code: Use triple backticks for code blocks (rendered in a contrasted box).
    • Embeds: Always use the canonical iframe embed format (<iframe ... src="https://www.youtube.com/embed/VIDEO_ID" ...></iframe>) for standalone videos. Standalone URLs will fail CI validation. For other embeds, prefer native HTML or markdown over legacy wp-* markup.
  4. Images:
    • Place images in assets/images/blog/.
    • Reference them using absolute paths: ![](/assets/images/blog/filename.jpg).
  5. Social Snippets: Every post requires a companion artifact in _snippets/ using the same YYYY-MM-DD-slug.md filename. You MUST use the social-snippets skill to generate this file in the canonical format.
  6. Obsidian Snippet Migration: To migrate snippets from the rr vault, use the scripts/migrate_snippets.py script from the snippet-posts skill. This handles YAML transformation, resolves publish timestamps, and syncs the is_blogged status back to Obsidian.
  7. Editor’s Desk Pass: Before posting any new blog post, always run an Editor’s Desk pass first. Fix factual issues and clarity breaks first, then tighten cadence without sanding off authored texture.
  8. Local Preview: Run bundle exec jekyll serve and check http://localhost:4000/blog/ before committing.
  9. Direct In-File Edit Pause: If the author wants to edit the post directly, create the real _posts/YYYY-MM-DD-slug.md file first, then pause snippet generation, commit, and push until those edits are done.

Adding a New Review

  1. Create a folder in reviews/camera/ or reviews/lens/.
  2. Add assets to a local images/ subfolder.
  3. Update reviews/index.html and assets/photography.json (for RSS).

🤖 Automations & SEO

To prevent 404s for old WordPress blog links, 404.html acts as a routing layer:

SEO & Discoverability

Social Media Automation

🛠 Development Notes

Updated March 2026