@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)
/_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">
    © 2026 // gurupanguji //
    <span class="das-wesentliche" style="letter-spacing: 2px; font-size: 0.5rem">Das Wesentliche.</span>
  </div>
</footer>

✍️ Writing Content

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).
    • Code: Use triple backticks for code blocks (rendered in a contrasted box).
    • Embeds: For new Jekyll posts, prefer native HTML or markdown embeds over legacy wp-* WordPress block markup when a clean native option exists.
  4. Images:
    • Place images in assets/images/blog/.
    • Reference them using absolute paths: ![](/assets/images/blog/filename.jpg).
  5. Social Snippets: Create a companion file in _snippets/ with the same YYYY-MM-DD-slug.md filename. Include platform-specific copy for Twitter, Tumblr, LinkedIn, Threads, Bluesky, Mastodon, Instagram, and Pixelfed.
  6. Local Preview: Run bundle exec jekyll serve and check http://localhost:4000/blog/ before committing.

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

🛠 Development Notes

Updated March 2026