From: Danilo M. <redacted>
Date: Wed, 15 Apr 2026 13:23:46 +0000 (+0200)
Subject: initial commit
X-Git-Tag: release_22042026-1342~295
X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=395b1f4de4d51b8a36765c657c8dd628ac4a05fe;p=danix.xyz-2.git

initial commit
---

395b1f4de4d51b8a36765c657c8dd628ac4a05fe
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..467f827
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(/home/danix/.claude/plugins/cache/superpowers-marketplace/superpowers/5.0.6/skills/brainstorming/scripts/start-server.sh *)"
+    ]
+  }
+}
diff --git a/.superpowers/brainstorm/26102-1776256459/content/article-types.html b/.superpowers/brainstorm/26102-1776256459/content/article-types.html
new file mode 100644
index 0000000..71f8533
--- /dev/null
+++ b/.superpowers/brainstorm/26102-1776256459/content/article-types.html
@@ -0,0 +1,93 @@
+<h2>Article Types & Sorting Strategy</h2>
+<p class="subtitle">Five distinct content formats with intelligent ordering</p>
+
+<div class="section">
+  <h3>Article Types</h3>
+  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;">
+    <div style="padding: 1.2rem; background: rgba(168, 85, 247, 0.08); border-left: 3px solid #a855f7; border-radius: 0.4rem;">
+      <h4 style="color: #a855f7; margin-bottom: 0.5rem;">📝 Life</h4>
+      <p style="font-size: 0.85rem; line-height: 1.6;">Generic blog posts. Personal thoughts, reflections, stories.</p>
+      <p style="font-size: 0.8rem; color: #7a9bb8; margin-top: 0.5rem;"><code>type: life</code></p>
+    </div>
+    <div style="padding: 1.2rem; background: rgba(0, 255, 136, 0.08); border-left: 3px solid #00ff88; border-radius: 0.4rem;">
+      <h4 style="color: #00ff88; margin-bottom: 0.5rem;">📸 Photo</h4>
+      <p style="font-size: 0.85rem; line-height: 1.6;">Single photo or gallery. Visual-focused content with captions.</p>
+      <p style="font-size: 0.8rem; color: #7a9bb8; margin-top: 0.5rem;"><code>type: photo</code></p>
+    </div>
+    <div style="padding: 1.2rem; background: rgba(168, 85, 247, 0.08); border-left: 3px solid #a855f7; border-radius: 0.4rem;">
+      <h4 style="color: #a855f7; margin-bottom: 0.5rem;">🔗 Link</h4>
+      <p style="font-size: 0.85rem; line-height: 1.6;">Interesting external URL. Commentary + link to external content.</p>
+      <p style="font-size: 0.8rem; color: #7a9bb8; margin-top: 0.5rem;"><code>type: link</code></p>
+    </div>
+    <div style="padding: 1.2rem; background: rgba(0, 255, 136, 0.08); border-left: 3px solid #00ff88; border-radius: 0.4rem;">
+      <h4 style="color: #00ff88; margin-bottom: 0.5rem;">💬 Quote</h4>
+      <p style="font-size: 0.85rem; line-height: 1.6;">Pull quote with attribution. Emphasis on the quote itself.</p>
+      <p style="font-size: 0.8rem; color: #7a9bb8; margin-top: 0.5rem;"><code>type: quote</code></p>
+    </div>
+    <div style="padding: 1.2rem; background: rgba(168, 85, 247, 0.08); border-left: 3px solid #a855f7; border-radius: 0.4rem; grid-column: 1 / -1;">
+      <h4 style="color: #a855f7; margin-bottom: 0.5rem;">💻 Tech</h4>
+      <p style="font-size: 0.85rem; line-height: 1.6;">Code snippets & technical content. Syntax-highlighted code, technical explanations.</p>
+      <p style="font-size: 0.8rem; color: #7a9bb8; margin-top: 0.5rem;"><code>type: tech</code></p>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Articles List Sorting</h3>
+  <div class="mockup" style="padding: 1.5rem;">
+    <div class="mockup-header">Articles Page (/articles/)</div>
+    <div class="mockup-body" style="padding: 1.5rem; background: rgba(6, 11, 16, 0.5); border-radius: 0.4rem;">
+      <div style="font-family: 'IBM Plex Sans', sans-serif; line-height: 2;">
+        <div style="padding: 0.8rem; background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 0.3rem; margin-bottom: 1rem;">
+          <div style="font-size: 0.8rem; color: #00ff88; font-weight: bold; margin-bottom: 0.4rem;">📌 PINNED</div>
+          <div style="font-weight: bold; color: #a855f7;">Interesting Article Title</div>
+          <div style="font-size: 0.85rem; color: #7a9bb8;">Apr 14, 2026 • Life</div>
+        </div>
+        <div style="padding: 0.8rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15); margin-bottom: 0.8rem;">
+          <div style="font-weight: bold; color: #c4d6e8;">Another Great Post</div>
+          <div style="font-size: 0.85rem; color: #7a9bb8;">Apr 12, 2026 • Tech</div>
+        </div>
+        <div style="padding: 0.8rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15); margin-bottom: 0.8rem;">
+          <div style="font-weight: bold; color: #c4d6e8;">Photo Moments</div>
+          <div style="font-size: 0.85rem; color: #7a9bb8;">Apr 10, 2026 • Photo</div>
+        </div>
+        <div style="padding: 0.8rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15); margin-bottom: 0.8rem;">
+          <div style="font-weight: bold; color: #c4d6e8;">Inspiring Quote</div>
+          <div style="font-size: 0.85rem; color: #7a9bb8;">Apr 8, 2026 • Quote</div>
+        </div>
+        <div style="padding: 0.8rem;">
+          <div style="font-weight: bold; color: #c4d6e8;">Link to Cool Thing</div>
+          <div style="font-size: 0.85rem; color: #7a9bb8;">Apr 5, 2026 • Link</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="margin-top: 1.5rem; padding: 1rem; background: rgba(0, 255, 136, 0.05); border-left: 3px solid #00ff88; border-radius: 0.3rem;">
+    <p style="font-size: 0.85rem;"><strong>Order:</strong> Pinned post (if exists) at top → then reverse chronological (newest first)</p>
+    <p style="font-size: 0.85rem; margin-top: 0.5rem;"><strong>Implementation:</strong> Front-matter field <code>pinned: true</code> in post metadata</p>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Single Article View</h3>
+  <p style="font-size: 0.85rem; margin-bottom: 1rem;">Each article type gets a dedicated template with appropriate styling and metadata display.</p>
+  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
+    <div style="padding: 1rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem;">
+      <h4 style="color: #a855f7; font-size: 0.9rem; margin-bottom: 0.5rem;">Life / Tech / Photo</h4>
+      <p style="font-size: 0.8rem; line-height: 1.6;">Standard article layout: title, date, content, tags</p>
+    </div>
+    <div style="padding: 1rem; background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.3rem;">
+      <h4 style="color: #00ff88; font-size: 0.9rem; margin-bottom: 0.5rem;">Quote</h4>
+      <p style="font-size: 0.8rem; line-height: 1.6;">Large blockquote styling, author attribution, minimal text</p>
+    </div>
+    <div style="padding: 1rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; grid-column: 1 / -1;">
+      <h4 style="color: #a855f7; font-size: 0.9rem; margin-bottom: 0.5rem;">Link</h4>
+      <p style="font-size: 0.8rem; line-height: 1.6;">Preview/commentary + prominent link button, embed preview (if possible)</p>
+    </div>
+  </div>
+</div>
+
+<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;">
+  <h3>Configuration in hugo.toml</h3>
+  <p style="font-size: 0.85rem; margin-bottom: 1rem;">All article types defined in config, making it easy to add new types or customize existing ones later.</p>
+</div>
\ No newline at end of file
diff --git a/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html b/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html
new file mode 100644
index 0000000..776b786
--- /dev/null
+++ b/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html
@@ -0,0 +1,154 @@
+<h2>Page Layouts & Visual Hierarchy</h2>
+<p class="subtitle">Desktop and mobile layouts for key pages</p>
+
+<div class="section">
+  <h3>Landing Page (Homepage)</h3>
+  <div class="mockup" style="padding: 0;">
+    <div class="mockup-header">Homepage / _index.md</div>
+    <div class="mockup-body" style="background: linear-gradient(180deg, rgba(6, 11, 16, 0.8), rgba(16, 30, 45, 0.8)); padding: 2rem;">
+      <div style="text-align: center; padding: 3rem 0;">
+        <div style="width: 80px; height: 80px; margin: 0 auto 1.5rem; background: rgba(168, 85, 247, 0.3); border-radius: 50%; border: 2px solid #a855f7; display: flex; align-items: center; justify-content: center;">
+          <span style="font-size: 2rem;">📷</span>
+        </div>
+        <h1 style="font-family: 'Oxanium', sans-serif; font-size: 2rem; margin-bottom: 0.5rem; color: #a855f7;">Danilo Macrì</h1>
+        <p style="color: #c4d6e8; font-size: 1rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.8;">Brief introduction about yourself, your focus, what you do. Keep it concise and personal. (From _index.md)</p>
+        <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
+          <div style="padding: 0.6rem 1.5rem; background: #a855f7; color: white; border-radius: 0.3rem; font-size: 0.9rem; cursor: pointer;">Read Articles</div>
+          <div style="padding: 0.6rem 1.5rem; border: 1px solid #a855f7; color: #a855f7; border-radius: 0.3rem; font-size: 0.9rem; cursor: pointer;">Get in Touch</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Articles List Page</h3>
+  <div class="mockup" style="padding: 0;">
+    <div class="mockup-header">Articles / List View</div>
+    <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;">
+      <div style="max-width: 800px; margin: 0 auto;">
+        <h1 style="font-size: 1.8rem; color: #a855f7; margin-bottom: 2rem; font-family: 'Oxanium', sans-serif;">Articles</h1>
+
+        <!-- Pinned post -->
+        <div style="padding: 1.2rem; background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 0.4rem; margin-bottom: 1.5rem;">
+          <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+            <span style="font-size: 0.75rem; color: #00ff88; font-weight: bold;">📌 PINNED</span>
+          </div>
+          <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Why I Started This Blog</h3>
+          <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;">
+            <span>Apr 14, 2026</span>
+            <span>•</span>
+            <span style="color: #a855f7;">Life</span>
+          </div>
+        </div>
+
+        <!-- Regular posts -->
+        <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;">
+          <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Building a Go CLI Tool</h3>
+          <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;">
+            <span>Apr 12, 2026</span>
+            <span>•</span>
+            <span style="color: #00ff88;">Tech</span>
+          </div>
+        </div>
+
+        <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;">
+          <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Mountain Hiking Adventure</h3>
+          <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;">
+            <span>Apr 10, 2026</span>
+            <span>•</span>
+            <span style="color: #a855f7;">Photo</span>
+          </div>
+        </div>
+
+        <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;">
+          <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">On Simplicity</h3>
+          <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;">
+            <span>Apr 8, 2026</span>
+            <span>•</span>
+            <span style="color: #a855f7;">Quote</span>
+          </div>
+        </div>
+
+        <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;">
+          <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Interesting Read: The Unix Philosophy</h3>
+          <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;">
+            <span>Apr 5, 2026</span>
+            <span>•</span>
+            <span style="color: #00ff88;">Link</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Single Article Page (Tech Example)</h3>
+  <div class="mockup" style="padding: 0;">
+    <div class="mockup-header">Article View / Single</div>
+    <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;">
+      <div style="max-width: 700px; margin: 0 auto;">
+        <div style="margin-bottom: 1.5rem;">
+          <span style="display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 255, 136, 0.15); color: #00ff88; border-radius: 0.3rem; font-size: 0.75rem; font-weight: bold;">TECH</span>
+        </div>
+        <h1 style="font-size: 1.8rem; color: #a855f7; margin-bottom: 1rem; font-family: 'Oxanium', sans-serif;">Building a Go CLI Tool</h1>
+        <div style="display: flex; gap: 1rem; font-size: 0.85rem; color: #7a9bb8; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);">
+          <span>Apr 12, 2026</span>
+          <span>•</span>
+          <span>5 min read</span>
+        </div>
+
+        <div style="line-height: 1.8; color: #c4d6e8; font-size: 0.95rem;">
+          <p>Article content goes here. This is where your markdown is rendered with proper typography and spacing.</p>
+
+          <div style="margin: 1.5rem 0; padding: 1rem; background: rgba(6, 11, 16, 0.8); border-left: 3px solid #00ff88; border-radius: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #00ff88; overflow-x: auto;">
+            <div>$ go run main.go</div>
+            <div>Hello, CLI!</div>
+          </div>
+
+          <p>More content and explanation about the code...</p>
+        </div>
+
+        <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(168, 85, 247, 0.15);">
+          <div style="font-size: 0.8rem; color: #7a9bb8;">Tags:</div>
+          <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap;">
+            <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#golang</span>
+            <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#cli</span>
+            <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#programming</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Static Pages (About, Contact, Privacy)</h3>
+  <div style="padding: 1.5rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem;">
+    <p style="font-size: 0.85rem; line-height: 1.8;">Static pages use a clean single-column layout. Content managed via markdown files in <code>content/</code>. All pages share the same template with consistent styling.</p>
+    <p style="font-size: 0.85rem; margin-top: 1rem;"><strong>Example:</strong> <code>/is</code> (About), <code>/is/here</code> (Contact), <code>/is/legal</code> (Privacy) — all defined in hugo.toml for easy management.</p>
+  </div>
+</div>
+
+<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;">
+  <h3>Responsive Behavior</h3>
+  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+    <div style="padding: 1rem; background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.3rem;">
+      <h4 style="color: #00ff88; font-size: 0.9rem; margin-bottom: 0.5rem;">Desktop (1024px+)</h4>
+      <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;">
+        <li>Full navigation visible</li>
+        <li>Max content width ~800px</li>
+        <li>Comfortable spacing</li>
+      </ul>
+    </div>
+    <div style="padding: 1rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem;">
+      <h4 style="color: #a855f7; font-size: 0.9rem; margin-bottom: 0.5rem;">Mobile (<768px)</h4>
+      <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;">
+        <li>Hamburger menu toggle</li>
+        <li>Full-screen overlay on tap</li>
+        <li>Optimized spacing</li>
+      </ul>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html b/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html
new file mode 100644
index 0000000..894751a
--- /dev/null
+++ b/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html
@@ -0,0 +1,188 @@
+<h2>Article & Static Page Layouts with Sidebar</h2>
+<p class="subtitle">Two-column desktop layout, responsive sidebar that moves to bottom on mobile</p>
+
+<div class="section">
+  <h3>Single Article Page (Tech Example) — Desktop View</h3>
+  <div class="mockup" style="padding: 0;">
+    <div class="mockup-header">Article View / Single (Desktop 1024px+)</div>
+    <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;">
+      <div style="display: grid; grid-template-columns: 1fr 300px; gap: 2rem; max-width: 1100px; margin: 0 auto;">
+        <!-- Main Content -->
+        <div>
+          <div style="margin-bottom: 1.5rem;">
+            <span style="display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 255, 136, 0.15); color: #00ff88; border-radius: 0.3rem; font-size: 0.75rem; font-weight: bold;">TECH</span>
+          </div>
+          <h1 style="font-size: 1.8rem; color: #a855f7; margin-bottom: 1rem; font-family: 'Oxanium', sans-serif;">Building a Go CLI Tool</h1>
+          <div style="display: flex; gap: 1rem; font-size: 0.85rem; color: #7a9bb8; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);">
+            <span>Apr 12, 2026</span>
+            <span>•</span>
+            <span>5 min read</span>
+          </div>
+
+          <div style="line-height: 1.8; color: #c4d6e8; font-size: 0.95rem;">
+            <p>Building command-line tools in Go is straightforward and powerful. Let's explore how to create a simple CLI application.</p>
+
+            <div style="margin: 1.5rem 0; padding: 1rem; background: rgba(6, 11, 16, 0.8); border-left: 3px solid #00ff88; border-radius: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; overflow-x: auto;">
+              <div style="color: #a855f7;">package</div><div style="display: inline; color: #c4d6e8;"> main</div>
+              <br><br>
+              <div style="color: #a855f7;">import</div><div style="display: inline; color: #c4d6e8;"> (</div>
+              <br><div style="margin-left: 2rem;"><span style="color: #00ff88;">"fmt"</span></div>
+              <br><div style="color: #c4d6e8;">)</div>
+              <br><br>
+              <div style="color: #a855f7;">func</div><div style="display: inline; color: #c4d6e8;"> main() {</div>
+              <br><div style="margin-left: 2rem; color: #a855f7;">fmt</div><div style="display: inline; color: #c4d6e8;">.Println(</div><div style="display: inline; color: #00ff88;">"Hello, CLI!"</div><div style="display: inline; color: #c4d6e8;">)</div>
+              <br><div style="color: #c4d6e8;">}</div>
+            </div>
+
+            <p>This simple example demonstrates the basics. For larger projects, consider using the <code style="background: rgba(168, 85, 247, 0.2); padding: 0.2rem 0.4rem; border-radius: 0.2rem; color: #a855f7;">cobra</code> library for more advanced CLI features.</p>
+
+            <p style="margin-top: 1rem;">The key advantages of Go for CLI tools are:</p>
+            <ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
+              <li style="margin-bottom: 0.5rem;">Single binary compilation (no runtime dependencies)</li>
+              <li style="margin-bottom: 0.5rem;">Cross-platform builds</li>
+              <li style="margin-bottom: 0.5rem;">Fast execution</li>
+              <li>Rich standard library</li>
+            </ul>
+          </div>
+
+          <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(168, 85, 247, 0.15);">
+            <div style="font-size: 0.8rem; color: #7a9bb8;">Tags:</div>
+            <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap;">
+              <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#golang</span>
+              <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#cli</span>
+              <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#programming</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Sidebar -->
+        <aside style="padding: 1.5rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem; height: fit-content; position: sticky; top: 2rem;">
+          <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Share</h3>
+          <div style="display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem;">
+            <div style="padding: 0.5rem 0.8rem; background: rgba(0, 85, 200, 0.15); border: 1px solid rgba(0, 85, 200, 0.3); border-radius: 0.3rem; font-size: 0.8rem; cursor: pointer; text-align: center; color: #5ba3e8;">𝕏 / Twitter</div>
+            <div style="padding: 0.5rem 0.8rem; background: rgba(30, 144, 255, 0.15); border: 1px solid rgba(30, 144, 255, 0.3); border-radius: 0.3rem; font-size: 0.8rem; cursor: pointer; text-align: center; color: #5ba3e8;">📘 Facebook</div>
+            <div style="padding: 0.5rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem; cursor: pointer; text-align: center; color: #a855f7;">🔗 Copy Link</div>
+          </div>
+
+          <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.15); margin: 1.5rem 0;">
+
+          <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Article Info</h3>
+          <div style="font-size: 0.8rem; line-height: 2; color: #7a9bb8;">
+            <div><strong style="color: #c4d6e8;">Published:</strong> Apr 12, 2026</div>
+            <div><strong style="color: #c4d6e8;">Updated:</strong> Apr 14, 2026</div>
+            <div><strong style="color: #c4d6e8;">Reading Time:</strong> 5 min</div>
+            <div><strong style="color: #c4d6e8;">Category:</strong> <span style="color: #00ff88;">Tech</span></div>
+          </div>
+
+          <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.15); margin: 1.5rem 0;">
+
+          <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Related</h3>
+          <div style="font-size: 0.8rem; color: #c4d6e8; line-height: 1.8;">
+            <div style="margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);">
+              <div style="cursor: pointer; color: #a855f7;">Rust vs Go</div>
+              <div style="font-size: 0.75rem; color: #7a9bb8;">Apr 5, 2026</div>
+            </div>
+            <div>
+              <div style="cursor: pointer; color: #a855f7;">Python CLI Tools</div>
+              <div style="font-size: 0.75rem; color: #7a9bb8;">Mar 28, 2026</div>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Mobile View (Sidebar → Bottom)</h3>
+  <div class="mockup" style="padding: 0;">
+    <div class="mockup-header">Article View / Mobile (<768px)</div>
+    <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 1.5rem; max-width: 500px; margin: 0 auto;">
+      <div style="margin-bottom: 1.5rem;">
+        <span style="display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 255, 136, 0.15); color: #00ff88; border-radius: 0.3rem; font-size: 0.75rem; font-weight: bold;">TECH</span>
+      </div>
+      <h1 style="font-size: 1.5rem; color: #a855f7; margin-bottom: 1rem; font-family: 'Oxanium', sans-serif;">Building a Go CLI Tool</h1>
+      <div style="display: flex; gap: 1rem; font-size: 0.85rem; color: #7a9bb8; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);">
+        <span>Apr 12, 2026</span>
+        <span>•</span>
+        <span>5 min</span>
+      </div>
+
+      <div style="line-height: 1.8; color: #c4d6e8; font-size: 0.95rem; margin-bottom: 2rem;">
+        <p>Building command-line tools in Go is straightforward and powerful...</p>
+        <p style="margin-top: 1rem;">[Article content continues...]</p>
+      </div>
+
+      <!-- Sidebar content moved to bottom on mobile -->
+      <div style="padding: 1.5rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem; margin-top: 2rem;">
+        <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Share This</h3>
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.5rem;">
+          <div style="padding: 0.5rem 0.8rem; background: rgba(0, 85, 200, 0.15); border: 1px solid rgba(0, 85, 200, 0.3); border-radius: 0.3rem; font-size: 0.75rem; cursor: pointer; text-align: center; color: #5ba3e8;">𝕏</div>
+          <div style="padding: 0.5rem 0.8rem; background: rgba(30, 144, 255, 0.15); border: 1px solid rgba(30, 144, 255, 0.3); border-radius: 0.3rem; font-size: 0.75rem; cursor: pointer; text-align: center; color: #5ba3e8;">FB</div>
+        </div>
+
+        <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.15); margin: 1rem 0;">
+
+        <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 0.8rem; letter-spacing: 0.5px;">Info</h3>
+        <div style="font-size: 0.75rem; line-height: 1.8; color: #7a9bb8;">
+          <div><strong style="color: #c4d6e8;">Published:</strong> Apr 12, 2026</div>
+          <div><strong style="color: #c4d6e8;">Category:</strong> Tech</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Static Page Layout (Same Structure)</h3>
+  <p style="font-size: 0.85rem; margin-bottom: 1rem;">Static pages (/is, /is/here, /is/legal) use the same two-column layout with sidebar. The sidebar can contain:</p>
+  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+    <div style="padding: 1rem; background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.3rem;">
+      <h4 style="color: #00ff88; font-size: 0.9rem; margin-bottom: 0.5rem;">About Page Sidebar</h4>
+      <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;">
+        <li>Social links</li>
+        <li>Contact info</li>
+        <li>Skills/expertise</li>
+        <li>CV download</li>
+      </ul>
+    </div>
+    <div style="padding: 1rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem;">
+      <h4 style="color: #a855f7; font-size: 0.9rem; margin-bottom: 0.5rem;">Contact Page Sidebar</h4>
+      <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;">
+        <li>Email address</li>
+        <li>Social profiles</li>
+        <li>Response time</li>
+        <li>Availability</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Syntax Highlighting</h3>
+  <div style="padding: 1.5rem; background: rgba(0, 255, 136, 0.08); border-left: 3px solid #00ff88; border-radius: 0.3rem;">
+    <p style="font-size: 0.85rem; margin-bottom: 1rem;"><strong>Implementation:</strong> Hugo + Chroma syntax highlighter (built-in)</p>
+    <ul style="font-size: 0.85rem; line-height: 1.8; margin-left: 1.5rem;">
+      <li>Automatically highlights code blocks marked with language (```go, ```python, etc.)</li>
+      <li>Custom CSS theme integrated with danix.xyz color scheme (purple accent, green highlights for keywords)</li>
+      <li>Line numbers optional (configurable in hugo.toml)</li>
+      <li>Supports all major languages: Go, Python, Rust, JavaScript, Bash, etc.</li>
+    </ul>
+    <div style="margin-top: 1rem; padding: 1rem; background: rgba(6, 11, 16, 0.8); border-radius: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;">
+      <div style="color: #a855f7;">```go</div>
+      <div style="color: #7a9bb8;">// Code here gets automatic syntax highlighting</div>
+      <div style="color: #a855f7;">```</div>
+    </div>
+  </div>
+</div>
+
+<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;">
+  <h3>Sidebar Implementation Details</h3>
+  <div style="padding: 1rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 0.3rem;">
+    <p style="font-size: 0.85rem; line-height: 1.8;">
+      <strong>Desktop (1024px+):</strong> CSS Grid layout with main content + sticky sidebar. Sidebar remains visible while scrolling.<br><br>
+      <strong>Tablet/Mobile:</strong> Single column. Sidebar content rendered after main content using CSS <code>order</code> property or media query flexbox reorder.<br><br>
+      <strong>Content Source:</strong> Sidebar content defined via optional front-matter fields or template logic (e.g., <code>show_sharing: true</code>, <code>show_metadata: true</code>).
+    </p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html b/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html
new file mode 100644
index 0000000..4d4c225
--- /dev/null
+++ b/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html
@@ -0,0 +1,112 @@
+<h2>danix.xyz Theme Architecture</h2>
+<p class="subtitle">Hugo theme with config-driven structure, bilingual support, and hacker aesthetic</p>
+
+<div class="section">
+  <h3>Core Design Principles</h3>
+  <ul style="margin-left: 1.5rem; line-height: 1.8;">
+    <li><strong>Slackware Philosophy:</strong> Clean, essential, no bloat</li>
+    <li><strong>Config-Driven:</strong> All structure (menus, pages, URLs) defined in hugo.toml</li>
+    <li><strong>Bilingual (IT/EN):</strong> i18n files for all UI strings</li>
+    <li><strong>Dark/Light Toggle:</strong> Theme switcher in hamburger menu</li>
+    <li><strong>Hacker Aesthetic:</strong> Purple accent (#a855f7), monospace typography, subtle dot-grid background, terminal-style elements</li>
+  </ul>
+</div>
+
+<div class="section">
+  <h3>Page Structure</h3>
+  <div class="mockup" style="padding: 1.5rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.5rem;">
+    <div style="font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; line-height: 1.8; color: #a855f7;">
+      <div><strong>1. Home / Landing</strong></div>
+      <div style="margin-left: 2rem; margin-top: 0.5rem;">
+        <div>→ Hero section (name, bio, photo)</div>
+        <div>→ CTA: Articles | Contact</div>
+        <div>→ Content from _index.md</div>
+      </div>
+      <div style="margin-top: 1rem;"><strong>2. Articles Section</strong></div>
+      <div style="margin-left: 2rem; margin-top: 0.5rem;">
+        <div>→ List of posts (chronological)</div>
+        <div>→ Single article view</div>
+        <div>→ Content from content/ (Page Bundles)</div>
+      </div>
+      <div style="margin-top: 1rem;"><strong>3. Static Pages (config-driven)</strong></div>
+      <div style="margin-left: 2rem; margin-top: 0.5rem;">
+        <div>→ /is (About)</div>
+        <div>→ /is/here (Contact)</div>
+        <div>→ /is/legal (Privacy)</div>
+        <div style="font-size: 0.85rem; color: #7a9bb8; margin-top: 0.5rem;">(Easy to add more via hugo.toml)</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Navigation Structure</h3>
+  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem;">
+    <div class="mockup" style="padding: 1rem;">
+      <div class="mockup-header">Top Navigation (Desktop)</div>
+      <div class="mockup-body" style="padding: 1rem; background: rgba(6, 11, 16, 0.5); border-radius: 0.4rem;">
+        <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem;">
+          <div style="font-weight: bold; color: #a855f7;">danix</div>
+          <div style="display: flex; gap: 2rem; font-size: 0.85rem;">
+            <span>Articles</span>
+            <span>Contact</span>
+            <span>≡</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mockup" style="padding: 1rem;">
+      <div class="mockup-header">Hamburger Overlay Menu</div>
+      <div class="mockup-body" style="padding: 1rem; background: rgba(6, 11, 16, 0.5); border-radius: 0.4rem; font-size: 0.85rem;">
+        <div style="display: flex; flex-direction: column; gap: 1rem;">
+          <div style="font-weight: bold;">Articles</div>
+          <div style="font-weight: bold;">About (/is)</div>
+          <div style="font-weight: bold;">Contact (/is/here)</div>
+          <div style="font-weight: bold;">Privacy (/is/legal)</div>
+          <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.2); margin: 0.5rem 0;">
+          <div style="display: flex; gap: 1rem; font-size: 0.75rem;">
+            <span>🇮🇹 IT</span>
+            <span>🇬🇧 EN</span>
+          </div>
+          <div style="font-size: 0.75rem;">☀️ / 🌙</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Key Features</h3>
+  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
+    <div style="padding: 1rem; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.4rem;">
+      <h4 style="color: #00ff88; margin-bottom: 0.5rem;">Alpine.js Integration</h4>
+      <p style="font-size: 0.85rem; line-height: 1.6;">Overlay menu toggle, language switching, theme toggle, contact form AJAX</p>
+    </div>
+    <div style="padding: 1rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem;">
+      <h4 style="color: #a855f7; margin-bottom: 0.5rem;">Responsive Design</h4>
+      <p style="font-size: 0.85rem; line-height: 1.6;">Mobile-first Tailwind CSS, hamburger on mobile, full nav on desktop</p>
+    </div>
+    <div style="padding: 1rem; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.4rem;">
+      <h4 style="color: #00ff88; margin-bottom: 0.5rem;">i18n Ready</h4>
+      <p style="font-size: 0.85rem; line-height: 1.6;">Hugo i18n system for all UI strings (buttons, labels, menus)</p>
+    </div>
+    <div style="padding: 1rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem;">
+      <h4 style="color: #a855f7; margin-bottom: 0.5rem;">Easy Extensibility</h4>
+      <p style="font-size: 0.85rem; line-height: 1.6;">Add static pages just by adding menu entries in hugo.toml</p>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Visual Direction</h3>
+  <div style="padding: 1.5rem; background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(0, 255, 136, 0.05)); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.5rem;">
+    <p><strong>Color Palette:</strong> Dark blue-grey backgrounds (#060b10, #0c1520), purple accent (#a855f7), green highlights (#00ff88), light blue-grey text (#c4d6e8)</p>
+    <p style="margin-top: 0.8rem;"><strong>Typography:</strong> Headings: Oxanium | Body: IBM Plex Sans | Monospace: JetBrains Mono</p>
+    <p style="margin-top: 0.8rem;"><strong>Visual Elements:</strong> Subtle dot-grid background, smooth transitions, minimal glow effects, clean borders, hacker/open-source aesthetic</p>
+    <p style="margin-top: 0.8rem;"><strong>Unique Touch:</strong> Fresh layout design (not a copy of danix.me), modern with hints of hacker/open-source/Slackware philosophy</p>
+  </div>
+</div>
+
+<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;">
+  <h3>Does this direction align with your vision?</h3>
+</div>
\ No newline at end of file
diff --git a/.superpowers/brainstorm/26102-1776256459/content/waiting.html b/.superpowers/brainstorm/26102-1776256459/content/waiting.html
new file mode 100644
index 0000000..814be13
--- /dev/null
+++ b/.superpowers/brainstorm/26102-1776256459/content/waiting.html
@@ -0,0 +1,3 @@
+<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
+  <p class="subtitle">Finalizing design in terminal...</p>
+</div>
\ No newline at end of file
diff --git a/.superpowers/brainstorm/26102-1776256459/state/server-stopped b/.superpowers/brainstorm/26102-1776256459/state/server-stopped
new file mode 100644
index 0000000..c60fbed
--- /dev/null
+++ b/.superpowers/brainstorm/26102-1776256459/state/server-stopped
@@ -0,0 +1 @@
+{"reason":"idle timeout","timestamp":1776259280204}
diff --git a/.superpowers/brainstorm/26102-1776256459/state/server.log b/.superpowers/brainstorm/26102-1776256459/state/server.log
new file mode 100644
index 0000000..b102cc7
--- /dev/null
+++ b/.superpowers/brainstorm/26102-1776256459/state/server.log
@@ -0,0 +1,7 @@
+{"type":"server-started","port":54271,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:54271","screen_dir":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content","state_dir":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/state"}
+{"type":"screen-added","file":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html"}
+{"type":"screen-added","file":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content/article-types.html"}
+{"type":"screen-added","file":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html"}
+{"type":"screen-added","file":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html"}
+{"type":"screen-added","file":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content/waiting.html"}
+{"type":"server-stopped","reason":"idle timeout"}
diff --git a/.superpowers/brainstorm/26102-1776256459/state/server.pid b/.superpowers/brainstorm/26102-1776256459/state/server.pid
new file mode 100644
index 0000000..8ce317a
--- /dev/null
+++ b/.superpowers/brainstorm/26102-1776256459/state/server.pid
@@ -0,0 +1 @@
+26110
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..1ba87e7
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,26 @@
+# Content Management Instructions - opencode
+
+You are the content curator for https://danix.xyz. You operate strictly within the `content/` directory.
+
+## 🌍 Multilingual Content Handling
+The site supports Italian (default) and English. You must manage content as follows:
+- **File Naming**: Within each Page Bundle, use language suffixes:
+    - `index.md` or `index.it.md` for Italian content.
+    - `index.en.md` for the English translation.
+- **Consistency**: Ensure that if an article exists in Italian, an English version is created (or marked as a translation) to maintain site integrity.
+- **Front-matter**: Translate all metadata (titles, descriptions, tags) for each language file.
+
+## 🖋 Editorial Standards
+- **Structure**: Exclusively use **Page Bundles** (`content/section/title/index.md`).
+- **Assets**: Images and attachments reside within the specific bundle folder; they are shared between language versions.
+- **Front-matter**: YAML format. Mandatory fields: `title`, `date`, `draft: false`, `tags`, `categories`, `description`.
+
+## 🛠 Shortcode Usage
+Raw HTML is forbidden. Use the shortcodes provided by the theme:
+- **Contact**: Use `{{< contact_form >}}`.
+- **Media**: Use specific shortcodes for images, galleries, and videos.
+- **Reference**: Consult `SHORTCODES.md` for parameters.
+
+## 🤝 Workflow
+1. **Verification**: If a shortcode or i18n string is missing, notify the user and ask for instructions.
+2. **Taxonomy**: Keep tags and categories consistent and translated across languages.
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..21335b2
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,36 @@
+# Hugo Theme Architecture Instructions - danix.xyz
+
+You are the lead software architect for https://danix.xyz. Your code must follow a "Slackware-style" philosophy: clean, essential, and free of bloat.
+
+## 🌍 Multilingual Support (IT/EN)
+The site is bilingual (Italian and English). You must:
+- **i18n Framework**: Use Hugo’s translation folders (`i18n/it.yaml`, `i18n/en.yaml`) for all UI strings (e.g., "Read more", "Contact me", "Menu").
+- **Language Switcher**: Implement a clean language toggle within the hamburger overlay.
+- **Logic**: Ensure all templates (Home, Lists, Singles) correctly handle multilingual variables and menus defined in `hugo.toml`.
+
+## 🛠 Tech Stack
+- **Hugo (Extended)**: Use Hugo Pipes for asset processing and minification.
+- **Tailwind CSS**: Utility-first styling (use `@apply` for semantic components).
+- **Alpine.js**: Logic for the overlay menu, language switching, and asynchronous form handling.
+- **Vanilla JS**: For minimal optimizations and scripts where Alpine is not required.
+
+## 🧩 Shortcode System (Consensual)
+DO NOT write code for shortcodes without consulting the user first. Implement:
+1. **Contact Form**: `{{< contact_form >}}` with AJAX handling via Alpine.js targeting `contact.php`. Must support translated labels for fields and error messages.
+2. **Gravatar**: Profile image retrieval via email hash.
+3. **Images & Galleries**: Responsive, lazy-loading, and caption support.
+4. **Video Embeds**: Privacy-friendly YouTube/Vimeo.
+
+**Documentation**: Update `SHORTCODES.md` with usage examples for every tool.
+
+## 🎨 Design & UX
+- **Identity**: Maintain the font stack and palettes from `danix.me`.
+- **Accent**: Primary Purple. Modern aesthetic with an open-source/hacker soul.
+- **Hero**: Full-screen, dynamic text, bio, and profile photo (multilingual bio).
+- **Navigation**: Top hamburger menu -> Full-screen overlay (Articles + Pages + Language Toggle - dark/light theme toggle).
+- **A11y**: Target WCAG 2.1 AA.
+
+## 📝 Work Protocol
+1. **Pianification**: Propose the `i18n` structure and partials layout before writing.
+2. **Consultation**: Always ask before implementing complex logic or shortcodes.
+3. **KISS**: Keep It Simple, Stupid.
\ No newline at end of file
diff --git a/docs/superpowers/plans/2026-04-15-hugo-theme-implementation.md b/docs/superpowers/plans/2026-04-15-hugo-theme-implementation.md
new file mode 100644
index 0000000..c4026da
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-15-hugo-theme-implementation.md
@@ -0,0 +1,2771 @@
+# Hugo Theme Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a complete, bilingual, configuration-driven Hugo theme for danix.xyz with responsive layouts, 5 article types, shortcodes, and hacker/open-source aesthetic.
+
+**Architecture:** 
+- Config-driven (hugo.toml manages menus, pages, content types, theme options)
+- Template hierarchy (baseof → list/single → type-specific partials)
+- Shortcode system for content extensibility (gravatar, image, gallery, contact-form)
+- Dual theme support (dark/light) with localStorage persistence
+- Mobile-first responsive design with Tailwind CSS
+- Syntax highlighting via Chroma with custom color theme
+
+**Tech Stack:** Hugo (Extended), Tailwind CSS, Alpine.js, Chroma, Feather Icons
+
+---
+
+## File Structure
+
+```
+danix.xyz-hacker-theme/
+├── themes/danix-xyz-hacker/
+│   ├── layouts/
+│   │   ├── index.html (landing page)
+│   │   ├── _default/
+│   │   │   ├── baseof.html (base template)
+│   │   │   ├── single.html (generic single page)
+│   │   │   └── list.html (articles list)
+│   │   ├── articles/
+│   │   │   └── single.html (article type dispatcher)
+│   │   └── partials/
+│   │       ├── header.html
+│   │       ├── footer.html
+│   │       ├── nav.html
+│   │       ├── hamburger-menu.html
+│   │       ├── sidebar.html
+│   │       ├── article-header.html
+│   │       └── article-types/
+│   │           ├── life.html
+│   │           ├── photo.html
+│   │           ├── link.html
+│   │           ├── quote.html
+│   │           └── tech.html
+│   ├── assets/
+│   │   ├── css/
+│   │   │   ├── main.css (Tailwind + custom)
+│   │   │   ├── tailwind.config.js
+│   │   │   └── chroma-custom.css (syntax highlighting)
+│   │   └── js/
+│   │       ├── theme-toggle.js (theme persistence)
+│   │       ├── menu.js (hamburger logic)
+│   │       └── language-switcher.js (language persistence)
+│   ├── shortcodes/
+│   │   ├── gravatar.html
+│   │   ├── image.html
+│   │   ├── gallery.html
+│   │   └── contact-form.html
+│   ├── i18n/
+│   │   ├── it.yaml (Italian strings)
+│   │   └── en.yaml (English strings)
+│   ├── static/
+│   │   └── fonts/ (Oxanium, IBM Plex Sans, JetBrains Mono)
+│   └── hugo.toml (theme config example)
+├── content/
+│   ├── _index.md (landing page)
+│   ├── articles/ (article page bundles)
+│   └── pages/ (static pages)
+├── SHORTCODES.md (shortcode documentation)
+├── AGENTS.md (updated with content structure)
+├── CLAUDE.md (already exists, reference for protocol)
+└── hugo.toml (site config, uses theme)
+```
+
+---
+
+## Phase 1: Theme Scaffolding & Foundation
+
+### Task 1: Create theme directory structure
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/` (empty directories)
+
+- [ ] **Step 1: Create theme root directory**
+
+```bash
+mkdir -p themes/danix-xyz-hacker/{layouts/{_default,articles,partials/article-types},assets/{css,js},shortcodes,i18n,static/fonts}
+```
+
+Expected output: Directory structure created without errors.
+
+- [ ] **Step 2: Verify structure**
+
+```bash
+tree themes/danix-xyz-hacker -L 3
+```
+
+Expected output: Full directory tree showing all subdirectories.
+
+- [ ] **Step 3: Create placeholder files**
+
+```bash
+touch themes/danix-xyz-hacker/hugo.toml
+touch themes/danix-xyz-hacker/theme.toml
+```
+
+---
+
+### Task 2: Create theme.toml (theme metadata)
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/theme.toml`
+
+- [ ] **Step 1: Write theme.toml**
+
+```toml
+name = "danix.xyz Hacker"
+license = "MIT"
+licenselink = "https://opensource.org/licenses/MIT"
+description = "Bilingual portfolio/blog theme with hacker/open-source aesthetic, responsive sidebar, 5 article types, and configuration-driven structure."
+homepage = "https://github.com/danix/danix-xyz-hacker-theme"
+demosite = "https://danix.xyz"
+author = "Danilo Macrì"
+authorlink = "https://danix.xyz"
+version = "1.0.0"
+
+[params]
+  minVersion = "0.100.0"
+  
+[[minfeaturesVersion]]
+  description = "Hugo extended required for Tailwind CSS via Pipes"
+  version = "0.100.0"
+
+[[features]]
+  name = "Bilingual (i18n)"
+  
+[[features]]
+  name = "Responsive Design"
+  
+[[features]]
+  name = "Dark/Light Theme Toggle"
+  
+[[features]]
+  name = "Article Types (5)"
+  
+[[features]]
+  name = "Shortcode System"
+  
+[[features]]
+  name = "Alpine.js Interactions"
+
+[[exampleSiteRepo]]
+  url = "https://github.com/danix/danix.xyz"
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/theme.toml
+git commit -m "feat: add theme metadata"
+```
+
+---
+
+### Task 3: Create hugo.toml (site configuration)
+
+**Files:**
+- Create: `hugo.toml`
+
+- [ ] **Step 1: Write hugo.toml**
+
+```toml
+baseURL = "https://danix.xyz/"
+languageCode = "it-IT"
+title = "danix.xyz"
+theme = "danix-xyz-hacker"
+enableRobotsTXT = true
+minify.disableXML = false
+
+# Hugo Pipes
+[minify]
+  minifyOutput = true
+
+# Languages
+[languages]
+  [languages.it]
+    languageName = "IT"
+    contentDir = "content/it"
+    weight = 1
+    [languages.it.params]
+      locale = "it_IT"
+      
+  [languages.en]
+    languageName = "EN"
+    contentDir = "content/en"
+    weight = 2
+    [languages.en.params]
+      locale = "en_US"
+
+# Main menu
+[[menus.main]]
+  name = "articles"
+  url = "/articles/"
+  weight = 1
+
+[[menus.main]]
+  name = "is"
+  url = "/is/"
+  weight = 2
+
+[[menus.main]]
+  name = "here"
+  url = "/is/here/"
+  weight = 3
+
+[[menus.main]]
+  name = "legal"
+  url = "/is/legal/"
+  weight = 4
+
+# Theme parameters
+[params]
+  siteName = "danix.xyz"
+  siteDescription = "Portfolio and blog"
+  author = "Danilo Macrì"
+  email = "danix@danix.xyz"
+  
+  # Theme options
+  syntaxHighlight = true
+  lineNumbers = false
+  readingTime = true
+  shareButtons = true
+  relatedPosts = true
+  
+  # Colors
+  primaryAccent = "#a855f7"
+  secondaryAccent = "#00ff88"
+  
+  # Article types with color mapping
+  [params.articleTypes.life]
+    label = "Life"
+    color_dark = "#f59e0b"
+    color_light = "#d97706"
+    
+  [params.articleTypes.photo]
+    label = "Photo"
+    color_dark = "#ec4899"
+    color_light = "#be185d"
+    
+  [params.articleTypes.link]
+    label = "Link"
+    color_dark = "#38bdf8"
+    color_light = "#0284c7"
+    
+  [params.articleTypes.quote]
+    label = "Quote"
+    color_dark = "#00ff88"
+    color_light = "#008f5a"
+    
+  [params.articleTypes.tech]
+    label = "Tech"
+    color_dark = "#a855f7"
+    color_light = "#7c3aed"
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add hugo.toml
+git commit -m "feat: add site configuration with bilingual setup and article types"
+```
+
+---
+
+## Phase 2: Base Templates & Layout Structure
+
+### Task 4: Create baseof.html (master template)
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/_default/baseof.html`
+
+- [ ] **Step 1: Write baseof.html**
+
+```html
+<!DOCTYPE html>
+<html lang="{{ .Lang }}" class="theme-dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="{{ .Site.Params.siteDescription }}">
+  <meta property="og:locale" content="{{ .Site.Language.Params.locale }}">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="{{ .Permalink }}">
+  <meta property="og:site_name" content="{{ .Site.Title }}">
+  <title>{{ .Title }}{{ if ne .Title .Site.Title }} — {{ .Site.Title }}{{ end }}</title>
+  
+  <!-- Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Oxanium:wght@400;600;700&display=swap" rel="stylesheet">
+  
+  <!-- Feather Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
+  
+  <!-- Tailwind CSS -->
+  {{ $css := resources.Get "css/main.css" | resources.ExecuteAsTemplate "css/main.css" . | minify }}
+  <link rel="stylesheet" href="{{ $css.RelPermalink }}">
+  
+  <!-- Syntax highlighting (Chroma) -->
+  {{ $chroma := resources.Get "css/chroma-custom.css" | minify }}
+  <link rel="stylesheet" href="{{ $chroma.RelPermalink }}">
+</head>
+<body class="bg-bg text-text antialiased">
+  <!-- Dot grid background pattern -->
+  <div class="fixed inset-0 pointer-events-none opacity-5 dot-grid" style="
+    background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
+    background-size: 30px 30px;
+    z-index: -1;
+  "></div>
+  
+  <!-- Theme toggle & language toggle (before Alpine loads to prevent flash) -->
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme') || 'dark';
+      const html = document.documentElement;
+      html.classList.remove('theme-light', 'theme-dark');
+      html.classList.add('theme-' + theme);
+    })();
+  </script>
+  
+  <!-- Navigation -->
+  {{ partial "header.html" . }}
+  
+  <!-- Main content -->
+  <main id="main" class="relative z-10">
+    {{ block "main" . }}{{ end }}
+  </main>
+  
+  <!-- Footer -->
+  {{ partial "footer.html" . }}
+  
+  <!-- Alpine.js -->
+  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+  
+  <!-- Feather Icons initialization -->
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <script>feather.replace();</script>
+  
+  <!-- Theme toggle script -->
+  {{ $themeScript := resources.Get "js/theme-toggle.js" | minify }}
+  <script src="{{ $themeScript.RelPermalink }}"></script>
+  
+  <!-- Menu script -->
+  {{ $menuScript := resources.Get "js/menu.js" | minify }}
+  <script src="{{ $menuScript.RelPermalink }}"></script>
+  
+  <!-- Language switcher script -->
+  {{ $langScript := resources.Get "js/language-switcher.js" | minify }}
+  <script src="{{ $langScript.RelPermalink }}"></script>
+</body>
+</html>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/_default/baseof.html
+git commit -m "feat: create base template with theme toggle, fonts, and Alpine.js"
+```
+
+---
+
+### Task 5: Create header.html partial
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/header.html`
+
+- [ ] **Step 1: Write header.html**
+
+```html
+<header class="sticky top-0 z-50 bg-bg2/92 backdrop-blur border-b border-border">
+  <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
+    <!-- Logo -->
+    <a href="{{ .Site.BaseURL }}" class="font-bold text-lg text-accent font-oxanium">
+      danix
+    </a>
+    
+    <!-- Desktop menu (hidden on mobile) -->
+    <div class="hidden md:flex items-center gap-8">
+      {{ range .Site.Menus.main }}
+        <a href="{{ .URL }}" class="text-sm hover:text-accent transition-colors">
+          {{ i18n .Name }}
+        </a>
+      {{ end }}
+    </div>
+    
+    <!-- Mobile hamburger & theme toggle -->
+    <div class="flex items-center gap-4 md:gap-6">
+      <!-- Theme toggle button -->
+      <button 
+        id="theme-toggle" 
+        aria-label="{{ i18n "toggleTheme" }}"
+        class="p-2 rounded hover:bg-surface transition-colors"
+      >
+        <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
+        <i data-feather="moon" class="w-5 h-5 block dark:hidden"></i>
+      </button>
+      
+      <!-- Hamburger menu button (mobile only) -->
+      <button 
+        id="menu-toggle"
+        aria-label="{{ i18n "toggleMenu" }}"
+        class="md:hidden p-2 rounded hover:bg-surface transition-colors"
+      >
+        <i data-feather="menu" class="w-5 h-5"></i>
+      </button>
+    </div>
+  </nav>
+  
+  <!-- Mobile hamburger overlay menu -->
+  {{ partial "hamburger-menu.html" . }}
+</header>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/header.html
+git commit -m "feat: create responsive header with theme toggle and hamburger"
+```
+
+---
+
+### Task 6: Create hamburger-menu.html partial
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html`
+
+- [ ] **Step 1: Write hamburger-menu.html**
+
+```html
+<div 
+  id="menu-overlay"
+  class="fixed inset-0 bg-black/50 backdrop-blur opacity-0 invisible transition-all duration-200 z-40"
+  @click="closeMenu()"
+>
+  <div 
+    class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform translate-x-full transition-transform duration-300 z-50"
+    @click.stop
+    x-ref="menuPanel"
+  >
+    <!-- Close button -->
+    <div class="flex items-center justify-between p-6 border-b border-border">
+      <span class="font-bold text-lg text-accent font-oxanium">Menu</span>
+      <button 
+        @click="closeMenu()"
+        aria-label="{{ i18n "closeMenu" }}"
+        class="p-2 hover:bg-surface rounded transition-colors"
+      >
+        <i data-feather="x" class="w-5 h-5"></i>
+      </button>
+    </div>
+    
+    <!-- Menu items -->
+    <nav class="p-6">
+      {{ range .Site.Menus.main }}
+        <a 
+          href="{{ .URL }}"
+          class="block py-4 text-lg font-medium hover:text-accent transition-colors border-b border-border/30"
+        >
+          {{ i18n .Name }}
+        </a>
+      {{ end }}
+    </nav>
+    
+    <!-- Divider -->
+    <div class="border-t border-border/30 mx-6"></div>
+    
+    <!-- Language switcher -->
+    <div class="p-6">
+      <div class="text-sm text-text-dim mb-3">{{ i18n "language" }}</div>
+      <div class="flex gap-2">
+        {{ range .Site.Languages }}
+          {{ $current := eq . $.Page.Language }}
+          <a 
+            href="{{ .LanguagePrefix }}"
+            class="flex-1 py-2 px-3 text-center rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}bg-surface hover:bg-surface/80{{ end }}"
+          >
+            {{ .LanguageName }}
+          </a>
+        {{ end }}
+      </div>
+    </div>
+    
+    <!-- Theme toggle -->
+    <div class="p-6 border-t border-border/30">
+      <button 
+        @click="toggleTheme(); closeMenu()"
+        class="w-full py-3 px-4 bg-surface hover:bg-surface/80 rounded flex items-center justify-center gap-2 transition-colors"
+      >
+        <i data-feather="moon" class="w-4 h-4"></i>
+        <span>{{ i18n "toggleTheme" }}</span>
+      </button>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('alpine:init', () => {
+    Alpine.store('menu', {
+      isOpen: false,
+      toggle() {
+        this.isOpen = !this.isOpen;
+        document.getElementById('menu-overlay').classList.toggle('opacity-0');
+        document.getElementById('menu-overlay').classList.toggle('invisible');
+        document.querySelector('[x-ref="menuPanel"]').classList.toggle('translate-x-full');
+        document.body.style.overflow = this.isOpen ? 'hidden' : '';
+      },
+      close() {
+        if (this.isOpen) {
+          this.toggle();
+        }
+      }
+    });
+  });
+  
+  function closeMenu() {
+    Alpine.store('menu').close();
+  }
+  
+  function toggleTheme() {
+    const html = document.documentElement;
+    const isDark = html.classList.contains('theme-dark');
+    const newTheme = isDark ? 'light' : 'dark';
+    html.classList.remove('theme-light', 'theme-dark');
+    html.classList.add('theme-' + newTheme);
+    localStorage.setItem('theme', newTheme);
+    feather.replace();
+  }
+  
+  document.getElementById('menu-toggle').addEventListener('click', () => {
+    Alpine.store('menu').toggle();
+  });
+  
+  document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+  
+  // Close menu on Escape key
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      closeMenu();
+    }
+  });
+</script>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
+git commit -m "feat: create hamburger overlay menu with language and theme toggles"
+```
+
+---
+
+### Task 7: Create footer.html partial
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/footer.html`
+
+- [ ] **Step 1: Write footer.html**
+
+```html
+<footer class="mt-16 border-t border-border/30 py-12 bg-surface/20">
+  <div class="container mx-auto px-4">
+    <div class="grid md:grid-cols-3 gap-8 mb-8">
+      <!-- About -->
+      <div>
+        <h3 class="font-bold text-accent mb-3 font-oxanium">{{ .Site.Title }}</h3>
+        <p class="text-sm text-text-dim">{{ .Site.Params.siteDescription }}</p>
+      </div>
+      
+      <!-- Quick links -->
+      <div>
+        <h4 class="font-semibold text-accent mb-3">{{ i18n "links" }}</h4>
+        <ul class="space-y-2">
+          {{ range .Site.Menus.main }}
+            <li>
+              <a href="{{ .URL }}" class="text-sm text-text-dim hover:text-accent transition-colors">
+                {{ i18n .Name }}
+              </a>
+            </li>
+          {{ end }}
+        </ul>
+      </div>
+      
+      <!-- Social (if configured) -->
+      <div>
+        <h4 class="font-semibold text-accent mb-3">{{ i18n "contact" }}</h4>
+        <a href="mailto:{{ .Site.Params.email }}" class="text-sm text-text-dim hover:text-accent transition-colors">
+          {{ i18n "email" }}: {{ .Site.Params.email }}
+        </a>
+      </div>
+    </div>
+    
+    <!-- Copyright -->
+    <div class="pt-8 border-t border-border/30 text-center text-xs text-text-dim">
+      <p>&copy; {{ now.Year }} {{ .Site.Params.author }}. {{ i18n "allRightsReserved" }}</p>
+    </div>
+  </div>
+</footer>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/footer.html
+git commit -m "feat: create footer with links and copyright"
+```
+
+---
+
+## Phase 3: Styling & CSS
+
+### Task 8: Create Tailwind CSS main stylesheet
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/assets/css/main.css`
+
+- [ ] **Step 1: Write main.css with Tailwind directives**
+
+```css
+/* Import Tailwind CSS directives */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* CSS Custom Properties for theming */
+:root {
+  --bg:          #060b10;
+  --bg2:         #0c1520;
+  --surface:     #101e2d;
+  --border:      #182840;
+  --accent:      #a855f7;
+  --accent2:     #00ff88;
+  --accent-glow: rgba(168, 85, 247, 0.12);
+  --text:        #c4d6e8;
+  --text-dim:    #7a9bb8;
+  --muted:       #304860;
+}
+
+/* Light theme */
+html.theme-light {
+  --bg:          #f0f4f8;
+  --bg2:         #e2eaf4;
+  --surface:     #d4dff0;
+  --border:      #a8bdd8;
+  --accent:      #7c3aed;
+  --accent2:     #008f5a;
+  --accent-glow: rgba(124, 58, 237, 0.1);
+  --text:        #0d1b2a;
+  --text-dim:    #2e4a6a;
+  --muted:       #6888a8;
+}
+
+/* Base styles */
+body {
+  @apply bg-bg text-text font-body;
+  color-scheme: dark light;
+}
+
+html.theme-light body {
+  color-scheme: light;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  @apply font-oxanium font-bold;
+}
+
+h1 {
+  @apply text-3xl md:text-4xl;
+}
+
+h2 {
+  @apply text-2xl md:text-3xl;
+}
+
+h3 {
+  @apply text-xl md:text-2xl;
+}
+
+/* Links */
+a {
+  @apply text-accent hover:opacity-80 transition-opacity;
+}
+
+/* Code blocks */
+code {
+  @apply font-mono text-sm bg-surface px-2 py-1 rounded;
+}
+
+pre {
+  @apply bg-surface/80 p-4 rounded border border-border overflow-x-auto;
+}
+
+/* Focus states for accessibility */
+a:focus, button:focus, input:focus {
+  @apply outline-none ring-2 ring-accent ring-offset-2 ring-offset-bg rounded;
+}
+
+/* Smooth transitions */
+* {
+  @apply transition-colors duration-200;
+}
+
+/* Container max-width */
+.container {
+  @apply max-w-4xl;
+}
+
+/* Utility classes */
+.bg-bg { background-color: var(--bg); }
+.bg-bg2 { background-color: var(--bg2); }
+.bg-surface { background-color: var(--surface); }
+.border-border { border-color: var(--border); }
+.text-accent { color: var(--accent); }
+.text-accent2 { color: var(--accent2); }
+.text-text { color: var(--text); }
+.text-text-dim { color: var(--text-dim); }
+
+/* Responsive utilities */
+@media (max-width: 768px) {
+  .md\:hidden {
+    display: none !important;
+  }
+}
+
+@media (min-width: 769px) {
+  .md\:block {
+    display: block !important;
+  }
+  
+  .md\:flex {
+    display: flex !important;
+  }
+  
+  .md\:grid {
+    display: grid !important;
+  }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/assets/css/main.css
+git commit -m "feat: create Tailwind CSS with theme variables and base styles"
+```
+
+---
+
+### Task 9: Create Chroma syntax highlighting theme
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/assets/css/chroma-custom.css`
+
+- [ ] **Step 1: Write chroma-custom.css**
+
+```css
+/* Chroma syntax highlighting theme for danix.xyz */
+/* Dark theme primary, light theme fallback */
+
+:root {
+  --chroma-bg-dark: #0c1520;
+  --chroma-bg-light: #f0f4f8;
+  --chroma-text-dark: #c4d6e8;
+  --chroma-text-light: #0d1b2a;
+  --chroma-keyword: #a855f7;
+  --chroma-string: #00ff88;
+  --chroma-number: #38bdf8;
+  --chroma-comment: #7a9bb8;
+  --chroma-error: #ff6b6b;
+}
+
+/* Code block background */
+.highlight {
+  background-color: var(--chroma-bg-dark);
+  color: var(--chroma-text-dark);
+  border-radius: 0.375rem;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+html.theme-light .highlight {
+  background-color: var(--chroma-bg-light);
+  color: var(--chroma-text-light);
+}
+
+/* Syntax token colors */
+.highlight .k,
+.highlight .kc,
+.highlight .kd,
+.highlight .kn,
+.highlight .kp,
+.highlight .kr,
+.highlight .kt {
+  color: var(--chroma-keyword);
+}
+
+.highlight .s,
+.highlight .sb,
+.highlight .sc,
+.highlight .sd,
+.highlight .s1,
+.highlight .s2,
+.highlight .se,
+.highlight .sh,
+.highlight .si,
+.highlight .sx {
+  color: var(--chroma-string);
+}
+
+.highlight .m,
+.highlight .mb,
+.highlight .mf,
+.highlight .mh,
+.highlight .mi,
+.highlight .il,
+.highlight .mo {
+  color: var(--chroma-number);
+}
+
+.highlight .c,
+.highlight .c1,
+.highlight .cm {
+  color: var(--chroma-comment);
+  font-style: italic;
+}
+
+.highlight .n,
+.highlight .na,
+.highlight .nb,
+.highlight .nc,
+.highlight .no,
+.highlight .nd,
+.highlight .ni,
+.highlight .nl,
+.highlight .nn,
+.highlight .nt,
+.highlight .nv {
+  color: var(--chroma-text-dark);
+}
+
+html.theme-light .highlight .n,
+html.theme-light .highlight .na,
+html.theme-light .highlight .nb,
+html.theme-light .highlight .nc,
+html.theme-light .highlight .no,
+html.theme-light .highlight .nd,
+html.theme-light .highlight .ni,
+html.theme-light .highlight .nl,
+html.theme-light .highlight .nn,
+html.theme-light .highlight .nt,
+html.theme-light .highlight .nv {
+  color: var(--chroma-text-light);
+}
+
+.highlight .err {
+  color: var(--chroma-error);
+}
+
+/* Line numbers (if enabled) */
+.highlight .ln {
+  color: var(--chroma-comment);
+  margin-right: 0.5rem;
+  user-select: none;
+}
+
+/* Inline code */
+code:not(.highlight *) {
+  background-color: var(--chroma-bg-dark);
+  color: var(--chroma-keyword);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.9em;
+}
+
+html.theme-light code:not(.highlight *) {
+  background-color: var(--chroma-bg-light);
+  color: #7c3aed;
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/assets/css/chroma-custom.css
+git commit -m "feat: create syntax highlighting theme with dark/light support"
+```
+
+---
+
+## Phase 4: JavaScript & Interactivity
+
+### Task 10: Create theme toggle script
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/assets/js/theme-toggle.js`
+
+- [ ] **Step 1: Write theme-toggle.js**
+
+```javascript
+// Theme toggle with localStorage persistence
+// This runs before Alpine.js to prevent flash
+
+document.addEventListener('DOMContentLoaded', function() {
+  const themeToggle = document.getElementById('theme-toggle');
+  
+  if (themeToggle) {
+    themeToggle.addEventListener('click', function(e) {
+      e.preventDefault();
+      const html = document.documentElement;
+      const isDark = html.classList.contains('theme-dark');
+      const newTheme = isDark ? 'light' : 'dark';
+      
+      // Update class
+      html.classList.remove('theme-light', 'theme-dark');
+      html.classList.add('theme-' + newTheme);
+      
+      // Persist to localStorage
+      localStorage.setItem('theme', newTheme);
+      
+      // Update Feather Icons
+      if (window.feather) {
+        feather.replace();
+      }
+    });
+  }
+});
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/assets/js/theme-toggle.js
+git commit -m "feat: create theme toggle with localStorage persistence"
+```
+
+---
+
+### Task 11: Create menu script
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/assets/js/menu.js`
+
+- [ ] **Step 1: Write menu.js**
+
+```javascript
+// Hamburger menu toggle logic
+document.addEventListener('DOMContentLoaded', function() {
+  const menuToggle = document.getElementById('menu-toggle');
+  const menuOverlay = document.getElementById('menu-overlay');
+  
+  if (menuToggle && menuOverlay) {
+    menuToggle.addEventListener('click', function(e) {
+      e.preventDefault();
+      toggleMenu();
+    });
+    
+    // Close on backdrop click
+    menuOverlay.addEventListener('click', function(e) {
+      if (e.target === menuOverlay) {
+        toggleMenu();
+      }
+    });
+    
+    // Close on Escape
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && menuOverlay.classList.contains('opacity-0') === false) {
+        toggleMenu();
+      }
+    });
+  }
+});
+
+function toggleMenu() {
+  const menuOverlay = document.getElementById('menu-overlay');
+  const menuPanel = document.querySelector('[x-ref="menuPanel"]');
+  
+  menuOverlay.classList.toggle('opacity-0');
+  menuOverlay.classList.toggle('invisible');
+  menuPanel.classList.toggle('translate-x-full');
+  document.body.style.overflow = menuPanel.classList.contains('translate-x-full') ? '' : 'hidden';
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/assets/js/menu.js
+git commit -m "feat: create hamburger menu toggle script"
+```
+
+---
+
+### Task 12: Create language switcher script
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/assets/js/language-switcher.js`
+
+- [ ] **Step 1: Write language-switcher.js**
+
+```javascript
+// Language switcher with persistence
+document.addEventListener('DOMContentLoaded', function() {
+  const langLinks = document.querySelectorAll('[data-lang-switch]');
+  
+  langLinks.forEach(link => {
+    link.addEventListener('click', function(e) {
+      e.preventDefault();
+      const lang = this.getAttribute('data-lang-switch');
+      
+      // Persist language preference
+      localStorage.setItem('preferred-language', lang);
+      
+      // Navigate to language version
+      window.location.href = this.href;
+    });
+  });
+});
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/assets/js/language-switcher.js
+git commit -m "feat: create language switcher with persistence"
+```
+
+---
+
+## Phase 5: Internationalization (i18n)
+
+### Task 13: Create Italian i18n file
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/i18n/it.yaml`
+
+- [ ] **Step 1: Write it.yaml**
+
+```yaml
+# Navigation & UI
+articles: "Articoli"
+is: "Chi Sono"
+here: "Contatti"
+legal: "Privacy"
+language: "Lingua"
+toggleTheme: "Tema"
+toggleMenu: "Menu"
+closeMenu: "Chiudi"
+email: "Email"
+contact: "Contatti"
+links: "Link"
+allRightsReserved: "Tutti i diritti riservati."
+
+# Articles
+readMore: "Leggi di più"
+published: "Pubblicato"
+updated: "Aggiornato"
+readingTime: "tempo di lettura"
+min: "min"
+author: "Autore"
+category: "Categoria"
+tags: "Tag"
+relatedPosts: "Articoli correlati"
+noRelated: "Nessun articolo correlato."
+
+# Article types
+life: "Vita"
+photo: "Foto"
+link: "Link"
+quote: "Citazione"
+tech: "Tech"
+
+# Sharing
+share: "Condividi"
+shareOn: "Condividi su"
+copyLink: "Copia link"
+twitter: "Twitter"
+facebook: "Facebook"
+
+# Forms
+name: "Nome"
+email: "Email"
+message: "Messaggio"
+submit: "Invia"
+sending: "Invio in corso..."
+success: "Messaggio inviato con successo!"
+error: "Si è verificato un errore. Riprova."
+
+# Social
+follow: "Seguimi"
+contact: "Contattami"
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/i18n/it.yaml
+git commit -m "feat: create Italian i18n strings"
+```
+
+---
+
+### Task 14: Create English i18n file
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/i18n/en.yaml`
+
+- [ ] **Step 1: Write en.yaml**
+
+```yaml
+# Navigation & UI
+articles: "Articles"
+is: "About"
+here: "Contact"
+legal: "Privacy"
+language: "Language"
+toggleTheme: "Theme"
+toggleMenu: "Menu"
+closeMenu: "Close"
+email: "Email"
+contact: "Contact"
+links: "Links"
+allRightsReserved: "All rights reserved."
+
+# Articles
+readMore: "Read more"
+published: "Published"
+updated: "Updated"
+readingTime: "reading time"
+min: "min"
+author: "Author"
+category: "Category"
+tags: "Tags"
+relatedPosts: "Related articles"
+noRelated: "No related articles."
+
+# Article types
+life: "Life"
+photo: "Photo"
+link: "Link"
+quote: "Quote"
+tech: "Tech"
+
+# Sharing
+share: "Share"
+shareOn: "Share on"
+copyLink: "Copy link"
+twitter: "Twitter"
+facebook: "Facebook"
+
+# Forms
+name: "Name"
+email: "Email"
+message: "Message"
+submit: "Send"
+sending: "Sending..."
+success: "Message sent successfully!"
+error: "An error occurred. Please try again."
+
+# Social
+follow: "Follow me"
+contact: "Contact me"
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/i18n/en.yaml
+git commit -m "feat: create English i18n strings"
+```
+
+---
+
+## Phase 6: Page Templates
+
+### Task 15: Create index.html (landing page)
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/index.html`
+
+- [ ] **Step 1: Write index.html**
+
+```html
+{{ define "main" }}
+<div class="min-h-[calc(100vh-200px)] flex items-center justify-center py-16">
+  <div class="text-center max-w-2xl px-4">
+    <!-- Profile image -->
+    {{ if .Params.image }}
+      <img 
+        src="{{ .Params.image }}" 
+        alt="{{ .Site.Params.author }}"
+        class="w-32 h-32 md:w-48 md:h-48 rounded-full mx-auto mb-8 border-4 border-accent"
+      >
+    {{ end }}
+    
+    <!-- Name -->
+    <h1 class="text-4xl md:text-5xl font-bold text-accent mb-4">
+      {{ .Site.Params.author }}
+    </h1>
+    
+    <!-- Bio (from _index.md content) -->
+    <div class="text-lg text-text-dim mb-8 leading-relaxed">
+      {{ .Content }}
+    </div>
+    
+    <!-- CTAs -->
+    <div class="flex flex-col sm:flex-row gap-4 justify-center">
+      <a 
+        href="/articles/" 
+        class="px-8 py-3 bg-accent text-white rounded font-semibold hover:opacity-90 transition-opacity"
+      >
+        {{ i18n "articles" }}
+      </a>
+      <a 
+        href="/is/here/" 
+        class="px-8 py-3 border-2 border-accent text-accent rounded font-semibold hover:bg-accent/10 transition-colors"
+      >
+        {{ i18n "contact" }}
+      </a>
+    </div>
+  </div>
+</div>
+{{ end }}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/index.html
+git commit -m "feat: create landing page with hero and CTAs"
+```
+
+---
+
+### Task 16: Create articles list template (list.html)
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/_default/list.html`
+
+- [ ] **Step 1: Write list.html**
+
+```html
+{{ define "main" }}
+<div class="container mx-auto px-4 py-12">
+  <!-- Page title -->
+  <h1 class="text-4xl md:text-5xl font-bold text-accent mb-12">
+    {{ .Title }}
+  </h1>
+  
+  <!-- Articles list -->
+  <div class="space-y-2 max-w-2xl">
+    {{ $pinned := where .Pages "Params.pinned" true }}
+    {{ $unpinned := where .Pages "Params.pinned" false }}
+    
+    <!-- Pinned posts (if any) -->
+    {{ range $pinned.ByDate.Reverse }}
+      {{ partial "article-list-item.html" . }}
+    {{ end }}
+    
+    <!-- Regular posts (reverse chronological) -->
+    {{ range $unpinned.ByDate.Reverse }}
+      {{ partial "article-list-item.html" . }}
+    {{ end }}
+    
+    <!-- Empty state -->
+    {{ if eq (len .Pages) 0 }}
+      <p class="text-text-dim text-center py-12">{{ i18n "noRelated" }}</p>
+    {{ end }}
+  </div>
+</div>
+{{ end }}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/_default/list.html
+git commit -m "feat: create articles list with pinned post support"
+```
+
+---
+
+### Task 17: Create article list item partial
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/article-list-item.html`
+
+- [ ] **Step 1: Write article-list-item.html**
+
+```html
+{{ $articleType := .Params.type | default "life" }}
+{{ $typeConfig := .Site.Params.articleTypes }}
+{{ $typeData := index $typeConfig $articleType }}
+{{ $isDark := strings.Contains (os.Getenv "THEME") "dark" }}
+{{ $color := cond $isDark $typeData.color_dark $typeData.color_light }}
+
+<div class="group">
+  <a 
+    href="{{ .Permalink }}"
+    class="block p-4 rounded border border-border/30 hover:border-accent/50 hover:bg-surface/30 transition-all"
+  >
+    <div class="flex items-start justify-between gap-4">
+      <div class="flex-1">
+        <!-- Pinned badge -->
+        {{ if .Params.pinned }}
+          <div class="inline-block px-2 py-1 mb-2 bg-accent2/20 text-accent2 rounded text-xs font-semibold">
+            📌 {{ i18n "pinned" | default "PINNED" }}
+          </div>
+        {{ end }}
+        
+        <!-- Title -->
+        <h3 class="text-lg font-semibold text-text group-hover:text-accent transition-colors">
+          {{ .Title }}
+        </h3>
+        
+        <!-- Metadata -->
+        <div class="flex items-center gap-4 mt-2 text-sm text-text-dim">
+          <span>{{ .PublishDate.Format "Jan 2, 2006" }}</span>
+          <span>•</span>
+          <span 
+            class="px-2 py-1 rounded text-white text-xs font-semibold"
+            style="background-color: {{ $color }}"
+          >
+            {{ $typeData.label }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/article-list-item.html
+git commit -m "feat: create article list item with type badges and pinned indicator"
+```
+
+---
+
+### Task 18: Create single article template
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/_default/single.html`
+
+- [ ] **Step 1: Write single.html**
+
+```html
+{{ define "main" }}
+<div class="container mx-auto px-4 py-12">
+  <div class="grid md:grid-cols-3 gap-8">
+    <!-- Main content -->
+    <article class="md:col-span-2">
+      {{ partial "article-header.html" . }}
+      
+      <!-- Article content -->
+      <div class="prose prose-invert max-w-none mb-12">
+        {{ .Content }}
+      </div>
+      
+      <!-- Tags -->
+      {{ if .Params.tags }}
+        <div class="pt-8 border-t border-border/30">
+          <div class="text-sm text-text-dim mb-3">{{ i18n "tags" }}</div>
+          <div class="flex gap-2 flex-wrap">
+            {{ range .Params.tags }}
+              <a 
+                href="/tags/{{ . | urlize }}/"
+                class="px-3 py-1 bg-surface border border-border/30 rounded text-sm hover:border-accent/50 transition-colors"
+              >
+                #{{ . }}
+              </a>
+            {{ end }}
+          </div>
+        </div>
+      {{ end }}
+    </article>
+    
+    <!-- Sidebar (sticky on desktop, below on mobile) -->
+    <aside class="md:col-span-1 order-last md:order-none">
+      {{ partial "sidebar.html" . }}
+    </aside>
+  </div>
+</div>
+{{ end }}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/_default/single.html
+git commit -m "feat: create single article template with sidebar"
+```
+
+---
+
+### Task 19: Create article header partial
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/article-header.html`
+
+- [ ] **Step 1: Write article-header.html**
+
+```html
+{{ $articleType := .Params.type | default "life" }}
+{{ $typeConfig := .Site.Params.articleTypes }}
+{{ $typeData := index $typeConfig $articleType }}
+{{ $isDark := true }}
+{{ $color := $typeData.color_dark }}
+
+<!-- Type badge -->
+{{ if .Params.type }}
+  <div class="mb-4">
+    <span 
+      class="inline-block px-3 py-1 rounded text-xs font-bold text-white uppercase tracking-wide"
+      style="background-color: {{ $color }}"
+    >
+      {{ $typeData.label }}
+    </span>
+  </div>
+{{ end }}
+
+<!-- Title -->
+<h1 class="text-4xl md:text-5xl font-bold text-accent mb-4">
+  {{ .Title }}
+</h1>
+
+<!-- Metadata -->
+<div class="flex flex-wrap items-center gap-4 mb-8 pb-6 border-b border-border/30 text-sm text-text-dim">
+  <div class="flex items-center gap-2">
+    <i data-feather="calendar" class="w-4 h-4"></i>
+    <span>{{ .PublishDate.Format "Jan 2, 2006" }}</span>
+  </div>
+  
+  {{ if .Params.updated }}
+    <div class="flex items-center gap-2">
+      <i data-feather="clock" class="w-4 h-4"></i>
+      <span>{{ i18n "updated" }}: {{ .Params.updated.Format "Jan 2, 2006" }}</span>
+    </div>
+  {{ end }}
+  
+  {{ if .Site.Params.readingTime }}
+    <div class="flex items-center gap-2">
+      <i data-feather="book-open" class="w-4 h-4"></i>
+      <span>{{ math.Ceil (div (countwords .Content) 200) }} {{ i18n "min" }}</span>
+    </div>
+  {{ end }}
+</div>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/article-header.html
+git commit -m "feat: create article header with type badge and metadata"
+```
+
+---
+
+### Task 20: Create sidebar partial
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/sidebar.html`
+
+- [ ] **Step 1: Write sidebar.html**
+
+```html
+<div class="bg-surface/20 border border-border/30 rounded-lg p-6 md:sticky md:top-24">
+  <!-- Share section -->
+  {{ if .Site.Params.shareButtons }}
+    <div class="mb-8">
+      <h3 class="text-sm font-bold text-accent uppercase tracking-wide mb-4">{{ i18n "share" }}</h3>
+      <div class="grid grid-cols-2 gap-3">
+        <a 
+          href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="py-2 px-3 bg-accent text-white rounded text-sm font-medium hover:opacity-90 transition-opacity text-center"
+        >
+          <i data-feather="twitter" class="w-4 h-4 inline mr-1"></i> {{ i18n "twitter" }}
+        </a>
+        <a 
+          href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="py-2 px-3 bg-accent text-white rounded text-sm font-medium hover:opacity-90 transition-opacity text-center"
+        >
+          <i data-feather="facebook" class="w-4 h-4 inline mr-1"></i> {{ i18n "facebook" }}
+        </a>
+        <button 
+          onclick="navigator.clipboard.writeText('{{ .Permalink }}')"
+          class="col-span-2 py-2 px-3 border border-accent text-accent rounded text-sm font-medium hover:bg-accent/10 transition-colors"
+        >
+          <i data-feather="link" class="w-4 h-4 inline mr-1"></i> {{ i18n "copyLink" }}
+        </button>
+      </div>
+    </div>
+  {{ end }}
+  
+  <hr class="border-border/30 my-6">
+  
+  <!-- Article info -->
+  {{ if .Site.Params.readingTime }}
+    <div class="mb-8">
+      <h3 class="text-sm font-bold text-accent uppercase tracking-wide mb-3">{{ i18n "category" }}</h3>
+      <p class="text-sm text-text">
+        {{ .Params.type | default "life" }}
+      </p>
+    </div>
+  {{ end }}
+  
+  <hr class="border-border/30 my-6">
+  
+  <!-- Related posts -->
+  {{ if .Site.Params.relatedPosts }}
+    {{ $related := .Site.RegularPages.Related . | first 3 }}
+    {{ if $related }}
+      <div>
+        <h3 class="text-sm font-bold text-accent uppercase tracking-wide mb-4">{{ i18n "relatedPosts" }}</h3>
+        <div class="space-y-3">
+          {{ range $related }}
+            <a 
+              href="{{ .Permalink }}"
+              class="block text-sm hover:text-accent transition-colors group"
+            >
+              <div class="font-medium text-text group-hover:text-accent">{{ .Title }}</div>
+              <div class="text-xs text-text-dim">{{ .PublishDate.Format "Jan 2, 2006" }}</div>
+            </a>
+          {{ end }}
+        </div>
+      </div>
+    {{ end }}
+  {{ end }}
+</div>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/sidebar.html
+git commit -m "feat: create responsive sidebar with share buttons, info, and related posts"
+```
+
+---
+
+## Phase 7: Article Type Templates
+
+### Task 21: Create article type dispatcher (articles/single.html)
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/articles/single.html`
+
+- [ ] **Step 1: Write articles/single.html**
+
+```html
+{{ $articleType := .Params.type | default "life" }}
+{{ $template := printf "article-types/%s.html" $articleType }}
+
+{{ define "main" }}
+<div class="container mx-auto px-4 py-12">
+  <div class="grid md:grid-cols-3 gap-8">
+    <!-- Main content -->
+    <article class="md:col-span-2">
+      {{ partial "article-header.html" . }}
+      
+      <!-- Type-specific content -->
+      {{ partial $template . }}
+      
+      <!-- Tags (common to all types) -->
+      {{ if .Params.tags }}
+        <div class="pt-8 border-t border-border/30">
+          <div class="text-sm text-text-dim mb-3">{{ i18n "tags" }}</div>
+          <div class="flex gap-2 flex-wrap">
+            {{ range .Params.tags }}
+              <a 
+                href="/tags/{{ . | urlize }}/"
+                class="px-3 py-1 bg-surface border border-border/30 rounded text-sm hover:border-accent/50 transition-colors"
+              >
+                #{{ . }}
+              </a>
+            {{ end }}
+          </div>
+        </div>
+      {{ end }}
+    </article>
+    
+    <!-- Sidebar -->
+    <aside class="md:col-span-1 order-last md:order-none">
+      {{ partial "sidebar.html" . }}
+    </aside>
+  </div>
+</div>
+{{ end }}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/articles/single.html
+git commit -m "feat: create article type dispatcher template"
+```
+
+---
+
+### Task 22: Create Life article type template
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/article-types/life.html`
+
+- [ ] **Step 1: Write article-types/life.html**
+
+```html
+<!-- Standard article layout for Life posts -->
+<div class="prose prose-invert max-w-none mb-12">
+  {{ .Content }}
+</div>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/article-types/life.html
+git commit -m "feat: create Life article type template"
+```
+
+---
+
+### Task 23: Create Photo article type template
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/article-types/photo.html`
+
+- [ ] **Step 1: Write article-types/photo.html**
+
+```html
+<!-- Photo-focused article layout -->
+{{ if .Params.featured_image }}
+  <figure class="mb-12 rounded-lg overflow-hidden border border-border/30">
+    <img 
+      src="{{ .Params.featured_image }}" 
+      alt="{{ .Title }}"
+      class="w-full h-auto"
+    >
+    {{ if .Params.featured_image_caption }}
+      <figcaption class="p-4 bg-surface/30 text-sm text-text-dim">
+        {{ .Params.featured_image_caption }}
+      </figcaption>
+    {{ end }}
+  </figure>
+{{ end }}
+
+<div class="prose prose-invert max-w-none mb-12">
+  {{ .Content }}
+</div>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/article-types/photo.html
+git commit -m "feat: create Photo article type template"
+```
+
+---
+
+### Task 24: Create Link article type template
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/article-types/link.html`
+
+- [ ] **Step 1: Write article-types/link.html**
+
+```html
+<!-- External link article layout -->
+<div class="mb-8 p-6 bg-surface/30 border border-accent/30 rounded-lg">
+  <a 
+    href="{{ .Params.external_url }}" 
+    target="_blank"
+    rel="noopener noreferrer"
+    class="inline-flex items-center gap-2 px-6 py-3 bg-accent text-white rounded font-semibold hover:opacity-90 transition-opacity"
+  >
+    <i data-feather="external-link" class="w-5 h-5"></i>
+    {{ .Params.link_title | default (i18n "readMore") }}
+  </a>
+</div>
+
+<div class="prose prose-invert max-w-none">
+  {{ .Content }}
+</div>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/article-types/link.html
+git commit -m "feat: create Link article type template with external button"
+```
+
+---
+
+### Task 25: Create Quote article type template
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/article-types/quote.html`
+
+- [ ] **Step 1: Write article-types/quote.html**
+
+```html
+<!-- Pull quote layout -->
+<blockquote class="mb-8 pl-6 border-l-4 border-accent italic text-2xl text-text">
+  "{{ .Params.quote_text }}"
+</blockquote>
+
+{{ if .Params.quote_author }}
+  <p class="text-right text-text-dim mb-12">
+    — {{ .Params.quote_author }}
+  </p>
+{{ end }}
+
+{{ if .Content }}
+  <div class="prose prose-invert max-w-none">
+    {{ .Content }}
+  </div>
+{{ end }}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/article-types/quote.html
+git commit -m "feat: create Quote article type template"
+```
+
+---
+
+### Task 26: Create Tech article type template
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/layouts/partials/article-types/tech.html`
+
+- [ ] **Step 1: Write article-types/tech.html**
+
+```html
+<!-- Technical article with code highlight support -->
+<div class="prose prose-invert max-w-none mb-12">
+  {{ .Content }}
+</div>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/layouts/partials/article-types/tech.html
+git commit -m "feat: create Tech article type template (uses Chroma for syntax)"
+```
+
+---
+
+## Phase 8: Shortcodes
+
+### Task 27: Create gravatar shortcode
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/shortcodes/gravatar.html`
+
+- [ ] **Step 1: Write gravatar.html**
+
+```html
+{{- $email := .Get "email" -}}
+{{- $size := .Get "size" | default "256" -}}
+{{- $alt := .Get "alt" | default "User avatar" -}}
+{{- $class := .Get "class" | default "w-32 h-32 rounded-full" -}}
+
+{{- if $email -}}
+  {{- $hash := md5 (trim (strings.ToLower $email)) -}}
+  <img 
+    src="https://www.gravatar.com/avatar/{{ $hash }}?s={{ $size }}&d=identicon"
+    alt="{{ $alt }}"
+    class="{{ $class }}"
+    loading="lazy"
+  >
+{{- else -}}
+  {{- errorf "gravatar shortcode: 'email' parameter is required" -}}
+{{- end -}}
+```
+
+- [ ] **Step 2: Test shortcode**
+
+Create test file `content/_index.md`:
+```markdown
+---
+title: "Test Page"
+---
+
+{{< gravatar email="danix@danix.xyz" alt="Danilo Profile" class="w-32 h-32 rounded-full border-4 border-accent" >}}
+```
+
+Run Hugo and verify avatar displays.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/shortcodes/gravatar.html
+git commit -m "feat: create gravatar shortcode with MD5 hashing"
+```
+
+---
+
+### Task 28: Create image shortcode
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/shortcodes/image.html`
+
+- [ ] **Step 1: Write image.html**
+
+```html
+{{- $src := .Get "src" -}}
+{{- $alt := .Get "alt" | default "Image" -}}
+{{- $caption := .Get "caption" -}}
+{{- $class := .Get "class" | default "rounded-lg border border-border/30" -}}
+
+{{- if $src -}}
+  <figure class="my-8">
+    <img 
+      src="{{ $src }}"
+      alt="{{ $alt }}"
+      class="{{ $class }} w-full h-auto"
+      loading="lazy"
+    >
+    {{- if $caption -}}
+      <figcaption class="mt-3 text-center text-sm text-text-dim italic">
+        {{ $caption }}
+      </figcaption>
+    {{- end -}}
+  </figure>
+{{- else -}}
+  {{- errorf "image shortcode: 'src' parameter is required" -}}
+{{- end -}}
+```
+
+- [ ] **Step 2: Test shortcode**
+
+Create test markdown with: `{{< image src="/path/to/image.jpg" alt="My image" caption="This is a test image" >}}`
+
+Verify image renders with proper styling and optional caption.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/shortcodes/image.html
+git commit -m "feat: create image shortcode with lazy-loading and captions"
+```
+
+---
+
+### Task 29: Create gallery shortcode
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/shortcodes/gallery.html`
+
+- [ ] **Step 1: Write gallery.html**
+
+```html
+{{- $cols := .Get "cols" | default "2" -}}
+
+<div class="my-8 grid gap-4" style="grid-template-columns: repeat({{ $cols }}, 1fr)">
+  {{- with .Inner -}}
+    {{- range $line := strings.Split . "\n" -}}
+      {{- if strings.Contains $line "![" -}}
+        {{- $image := strings.TrimSpace $line -}}
+        {{- if ne $image "" -}}
+          {{- $image | markdownify | safeHTML -}}
+        {{- end -}}
+      {{- end -}}
+    {{- end -}}
+  {{- end -}}
+</div>
+```
+
+- [ ] **Step 2: Test shortcode**
+
+Create test markdown:
+```markdown
+{{< gallery cols="3" >}}
+![Image 1](../images/1.jpg)
+![Image 2](../images/2.jpg)
+![Image 3](../images/3.jpg)
+{{< /gallery >}}
+```
+
+Verify gallery displays in responsive grid.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/shortcodes/gallery.html
+git commit -m "feat: create gallery shortcode with responsive columns"
+```
+
+---
+
+### Task 30: Create contact-form shortcode
+
+**Files:**
+- Create: `themes/danix-xyz-hacker/shortcodes/contact-form.html`
+- Create: `static/contact.php` (placeholder - backend to be implemented)
+
+- [ ] **Step 1: Write contact-form.html**
+
+```html
+<form id="contact-form" class="my-8 space-y-4" @submit.prevent="submitContactForm">
+  <div>
+    <label for="name" class="block text-sm font-medium mb-2">
+      {{ i18n "name" }}
+    </label>
+    <input 
+      type="text"
+      id="name"
+      name="name"
+      required
+      class="w-full px-4 py-2 bg-surface border border-border rounded focus:ring-2 focus:ring-accent focus:outline-none"
+      x-model="formData.name"
+    >
+  </div>
+  
+  <div>
+    <label for="email" class="block text-sm font-medium mb-2">
+      {{ i18n "email" }}
+    </label>
+    <input 
+      type="email"
+      id="email"
+      name="email"
+      required
+      class="w-full px-4 py-2 bg-surface border border-border rounded focus:ring-2 focus:ring-accent focus:outline-none"
+      x-model="formData.email"
+    >
+  </div>
+  
+  <div>
+    <label for="message" class="block text-sm font-medium mb-2">
+      {{ i18n "message" }}
+    </label>
+    <textarea 
+      id="message"
+      name="message"
+      rows="5"
+      required
+      class="w-full px-4 py-2 bg-surface border border-border rounded focus:ring-2 focus:ring-accent focus:outline-none resize-none"
+      x-model="formData.message"
+    ></textarea>
+  </div>
+  
+  <button 
+    type="submit"
+    :disabled="isSubmitting"
+    class="w-full px-6 py-3 bg-accent text-white rounded font-semibold hover:opacity-90 disabled:opacity-50 transition-opacity"
+  >
+    <span x-show="!isSubmitting">{{ i18n "submit" }}</span>
+    <span x-show="isSubmitting">{{ i18n "sending" }}</span>
+  </button>
+  
+  <!-- Status messages -->
+  <div x-show="statusMessage" :class="statusClass" class="p-4 rounded text-sm">
+    <span x-text="statusMessage"></span>
+  </div>
+</form>
+
+<script>
+document.addEventListener('alpine:init', () => {
+  Alpine.data('contactForm', () => ({
+    formData: { name: '', email: '', message: '' },
+    isSubmitting: false,
+    statusMessage: '',
+    statusClass: '',
+    
+    async submitContactForm() {
+      this.isSubmitting = true;
+      this.statusMessage = '';
+      
+      try {
+        const response = await fetch('/contact.php', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(this.formData)
+        });
+        
+        const result = await response.json();
+        
+        if (response.ok) {
+          this.statusMessage = '{{ i18n "success" }}';
+          this.statusClass = 'bg-green-900/30 text-green-200 border border-green-500/30';
+          this.formData = { name: '', email: '', message: '' };
+        } else {
+          this.statusMessage = result.error || '{{ i18n "error" }}';
+          this.statusClass = 'bg-red-900/30 text-red-200 border border-red-500/30';
+        }
+      } catch (error) {
+        this.statusMessage = '{{ i18n "error" }}';
+        this.statusClass = 'bg-red-900/30 text-red-200 border border-red-500/30';
+      } finally {
+        this.isSubmitting = false;
+      }
+    }
+  }))
+});
+</script>
+
+<div x-data="contactForm()"></div>
+```
+
+- [ ] **Step 2: Create PHP contact handler placeholder**
+
+```php
+<?php
+// Static placeholder - implement backend logic as needed
+// This is just the structure for the contact form to target
+
+header('Content-Type: application/json');
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+  $input = json_decode(file_get_contents('php://input'), true);
+  
+  // TODO: Add form validation and email sending logic here
+  
+  echo json_encode(['success' => true, 'message' => 'Message sent']);
+} else {
+  http_response_code(405);
+  echo json_encode(['error' => 'Method not allowed']);
+}
+?>
+```
+
+- [ ] **Step 3: Test shortcode**
+
+Create test page with: `{{< contact_form >}}`
+
+Verify form displays and submits (backend response TBD).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add themes/danix-xyz-hacker/shortcodes/contact-form.html static/contact.php
+git commit -m "feat: create contact form shortcode with Alpine.js validation and AJAX submission"
+```
+
+---
+
+## Phase 9: Documentation
+
+### Task 31: Create SHORTCODES.md
+
+**Files:**
+- Create: `SHORTCODES.md`
+
+- [ ] **Step 1: Write SHORTCODES.md**
+
+```markdown
+# Shortcodes Documentation
+
+danix.xyz theme provides shortcodes for extending content with reusable components. All shortcodes support multilingual content via Hugo's i18n system.
+
+## Gravatar
+
+Display a user avatar from Gravatar based on email hash.
+
+### Syntax
+
+\`\`\`
+{{< gravatar email="user@example.com" >}}
+\`\`\`
+
+### Parameters
+
+| Parameter | Required | Description |
+|-----------|----------|-------------|
+| `email` | Yes | Email address for Gravatar lookup |
+| `size` | No | Avatar size in pixels (default: 256) |
+| `alt` | No | Alt text for accessibility (default: "User avatar") |
+| `class` | No | Custom CSS classes (default: "w-32 h-32 rounded-full") |
+
+### Example
+
+\`\`\`markdown
+{{< gravatar email="danix@danix.xyz" alt="Danilo Profile" class="w-48 h-48 rounded-full border-4 border-accent" >}}
+\`\`\`
+
+---
+
+## Image
+
+Responsive image with optional caption and lazy-loading.
+
+### Syntax
+
+\`\`\`
+{{< image src="/path/to/image.jpg" alt="Description" caption="Optional caption" >}}
+\`\`\`
+
+### Parameters
+
+| Parameter | Required | Description |
+|-----------|----------|-------------|
+| `src` | Yes | Path or URL to image |
+| `alt` | No | Alt text for accessibility |
+| `caption` | No | Optional caption displayed below image |
+| `class` | No | Custom CSS classes (default: "rounded-lg border border-border/30") |
+
+### Example
+
+\`\`\`markdown
+{{< image src="/images/mountain.jpg" alt="Mountain landscape" caption="Hiking in the Alps" >}}
+\`\`\`
+
+---
+
+## Gallery
+
+Responsive image gallery grid.
+
+### Syntax
+
+\`\`\`
+{{< gallery cols="3" >}}
+![Image 1](/images/1.jpg)
+![Image 2](/images/2.jpg)
+![Image 3](/images/3.jpg)
+{{< /gallery >}}
+\`\`\`
+
+### Parameters
+
+| Parameter | Required | Description |
+|-----------|----------|-------------|
+| `cols` | No | Number of columns (default: 2, responsive on mobile) |
+
+### Example
+
+\`\`\`markdown
+{{< gallery cols="3" >}}
+![Summer](summer.jpg)
+![Autumn](autumn.jpg)
+![Winter](winter.jpg)
+{{< /gallery >}}
+\`\`\`
+
+**Note:** Gallery content should be markdown image syntax. Each image is automatically styled with the theme's image classes.
+
+---
+
+## Contact Form
+
+Embedded contact form with AJAX submission, validation, and i18n support.
+
+### Syntax
+
+\`\`\`
+{{< contact_form >}}
+\`\`\`
+
+### Parameters
+
+None - form is fully self-contained.
+
+### Example
+
+\`\`\`markdown
+## Get in Touch
+
+Fill out the form below and I'll respond within 24 hours.
+
+{{< contact_form >}}
+\`\`\`
+
+### Features
+
+- ✅ Client-side validation
+- ✅ Loading state indicator
+- ✅ Success/error messages
+- ✅ Multilingual labels (via i18n)
+- ✅ AJAX submission to `/contact.php`
+- ✅ Accessible form with proper labels
+
+### Backend Implementation
+
+The form submits to `/contact.php`. This file is a placeholder - implement backend logic to:
+
+1. Validate form data (honeypot, rate limiting, etc.)
+2. Send email notification
+3. Store message in database (optional)
+4. Return JSON response
+
+Expected response format:
+
+\`\`\`json
+{
+  "success": true,
+  "message": "Message sent successfully"
+}
+\`\`\`
+
+Or on error:
+
+\`\`\`json
+{
+  "success": false,
+  "error": "Error message"
+}
+\`\`\`
+
+---
+
+## Future Shortcodes
+
+Planned shortcodes for future phases:
+
+- **Video**: Privacy-friendly YouTube/Vimeo embeds
+- **Callout**: Highlighted boxes for tips, warnings, notes
+- **Tabs**: Tabbed content panels
+- **Code**: Enhanced code blocks with copy button
+- **Audio**: Audio player for podcasts or music
+
+---
+
+## Accessibility Notes
+
+All shortcodes include:
+
+- Proper semantic HTML
+- Alt text for images (required)
+- ARIA labels where needed
+- Keyboard navigation support
+- Color contrast compliance (WCAG 2.1 AA)
+- Focus indicators
+
+---
+
+## Troubleshooting
+
+### Image not displaying
+
+- Check that the path is relative to the content file (e.g., `../images/photo.jpg`)
+- Ensure the image file exists in `static/` or the content bundle
+- Check browser console for 404 errors
+
+### Gallery not showing in columns
+
+- Ensure `cols` parameter is a number (1-4 recommended)
+- On mobile (<768px), galleries automatically stack to 1 column
+- Check that images are markdown syntax: `![alt](url)`
+
+### Contact form not submitting
+
+- Check browser console for errors
+- Ensure `/contact.php` exists and is accessible
+- Verify `contact.php` implementation (backend logic required)
+- Check CORS headers if submitting cross-origin
+
+---
+
+## Contributing
+
+To add new shortcodes:
+
+1. Create file in `themes/danix-xyz-hacker/shortcodes/[name].html`
+2. Add documentation here with examples
+3. Test with multiple languages
+4. Ensure accessibility compliance
+
+See `CLAUDE.md` for shortcode development guidelines.
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add SHORTCODES.md
+git commit -m "docs: create comprehensive shortcodes documentation"
+```
+
+---
+
+### Task 32: Update AGENTS.md with content structure
+
+**Files:**
+- Modify: `AGENTS.md`
+
+- [ ] **Step 1: Read existing AGENTS.md**
+
+(Already read at start of session - content curator instructions)
+
+- [ ] **Step 2: Update AGENTS.md**
+
+Replace entire file with updated version:
+
+```markdown
+# Content Management Instructions - danix.xyz
+
+You are the content curator for https://danix.xyz. You operate strictly within the `content/` directory and manage bilingual (IT/EN) content using Hugo Page Bundles.
+
+## 🌍 Multilingual Content Structure
+
+The site supports **Italian (IT)** as default and **English (EN)** as secondary language.
+
+**Directory Structure:**
+
+```
+content/
+├── _index.md (landing page - IT only, bio managed by user)
+├── it/
+│   ├── _index.md (articles list landing)
+│   └── articles/
+│       ├── article-1/
+│       │   ├── index.md (IT version)
+│       │   └── images/ (shared with EN)
+│       └── article-2/
+│           ├── index.md (IT version)
+│           └── images/
+└── en/
+    ├── _index.md (articles list landing)
+    └── articles/
+        ├── article-1/
+        │   └── index.en.md (EN translation)
+        └── article-2/
+            └── index.en.md (EN translation)
+```
+
+**File Naming:**
+- Italian: `index.md` or `index.it.md`
+- English: `index.en.md`
+- Assets (images, etc.) are shared between language versions (placed in the bundle folder)
+
+**Content Structure Example:**
+
+```
+content/it/articles/my-article/
+├── index.md (Italian markdown)
+├── index.en.md (English translation)
+├── featured.jpg (shared image)
+└── gallery/
+    ├── photo1.jpg
+    ├── photo2.jpg
+    └── photo3.jpg
+```
+
+## 📝 Article Front-Matter
+
+All articles use **Page Bundles** with YAML front-matter. Mandatory fields:
+
+### Required Fields
+
+```yaml
+title: "Article Title"
+date: 2026-04-15
+draft: false
+type: [life|photo|link|quote|tech]
+tags: [tag1, tag2, tag3]
+categories: [category]
+description: "Brief description for previews"
+```
+
+### Optional Fields
+
+```yaml
+pinned: false # Set to true to pin article at top of list
+updated: 2026-04-16 # Show update date if different from publish
+featured_image: "featured.jpg" # For Photo type
+featured_image_caption: "Caption text" # For Photo type
+external_url: "https://example.com" # For Link type (required for Link type)
+link_title: "Read on Example" # For Link type
+quote_text: "The quote itself..." # For Quote type (required)
+quote_author: "Author Name" # For Quote type (required)
+```
+
+## 📑 Article Types (5)
+
+Choose ONE type per article:
+
+### 1. **Life** (`type: life`)
+
+Generic blog posts, personal essays, reflections, life updates.
+
+**Front-matter:**
+```yaml
+type: life
+title: "Why I Started This Blog"
+date: 2026-04-12
+draft: false
+tags: [personal, blogging]
+categories: [life]
+description: "Thoughts on starting my blog journey"
+```
+
+**Content:** Standard markdown. Can be any length, supports all shortcodes.
+
+**Example URL:** `/it/articles/why-i-started-this-blog/`
+
+---
+
+### 2. **Photo** (`type: photo`)
+
+Photo essays, galleries, visual-focused content.
+
+**Front-matter:**
+```yaml
+type: photo
+title: "Mountain Hiking Adventure"
+date: 2026-04-14
+draft: false
+featured_image: "mountain.jpg"
+featured_image_caption: "The view from the summit"
+tags: [nature, travel]
+categories: [photo]
+description: "A day hiking in the Alps with stunning views"
+```
+
+**Content:** Markdown with optional shortcodes:
+- `{{< image src="photo.jpg" alt="..." caption="..." >}}`
+- `{{< gallery cols="3" >}}...{{< /gallery >}}`
+
+**File Structure:**
+```
+content/it/articles/mountain-hiking/
+├── index.md
+├── index.en.md
+├── mountain.jpg (featured image)
+└── photos/
+    ├── photo1.jpg
+    ├── photo2.jpg
+    └── photo3.jpg
+```
+
+---
+
+### 3. **Link** (`type: link`)
+
+Bookmarks and interesting external content with commentary.
+
+**Front-matter:**
+```yaml
+type: link
+title: "Interesting Read: The Unix Philosophy"
+date: 2026-04-10
+draft: false
+external_url: "https://example.com/unix-philosophy"
+link_title: "Read on Example Site"
+tags: [unix, software]
+categories: [link]
+description: "Thoughts on Unix philosophy and modern software"
+```
+
+**Content:** Brief commentary, summary, or personal thoughts about the linked content.
+
+**Example URL:** `/it/articles/unix-philosophy-thoughts/`
+
+---
+
+### 4. **Quote** (`type: quote`)
+
+Pull quotes, inspirational content, quotations with attribution.
+
+**Front-matter:**
+```yaml
+type: quote
+title: "On Simplicity"
+date: 2026-04-08
+draft: false
+quote_text: "Simplicity is the ultimate sophistication."
+quote_author: "Leonardo da Vinci"
+tags: [philosophy, design]
+categories: [quote]
+description: "A reflection on simplicity in design and life"
+```
+
+**Content:** Optional - commentary or reflection on the quote. Can be empty.
+
+---
+
+### 5. **Tech** (`type: tech`)
+
+Technical articles, tutorials, code snippets, programming content.
+
+**Front-matter:**
+```yaml
+type: tech
+title: "Building a Go CLI Tool"
+date: 2026-04-12
+draft: false
+tags: [golang, cli, programming]
+categories: [tech]
+description: "A guide to building command-line tools in Go"
+```
+
+**Content:** Markdown with code blocks (automatic syntax highlighting via Chroma):
+
+````markdown
+# Building a Go CLI Tool
+
+Here's a simple example:
+
+```go
+package main
+
+import "fmt"
+
+func main() {
+  fmt.Println("Hello, CLI!")
+}
+```
+
+The `cobra` library is recommended for larger projects.
+````
+
+**Syntax highlighting:** Code fences automatically highlighted based on language tag (go, python, javascript, bash, etc.)
+
+---
+
+## 🖋️ Editorial Standards
+
+### Structure
+
+**Always use Page Bundles:**
+```
+content/[language]/articles/[slug]/
+├── index.md (or index.it.md / index.en.md)
+├── featured-image.jpg
+└── assets/ (optional)
+```
+
+**No raw HTML.** Use shortcodes and markdown only.
+
+### Front-Matter Checklist
+
+- [ ] `title` - Clear, descriptive title
+- [ ] `date` - Publication date (YYYY-MM-DD)
+- [ ] `type` - One of: life, photo, link, quote, tech
+- [ ] `draft: false` - Must be `false` to publish
+- [ ] `tags` - Lowercase, comma-separated, 2-5 tags
+- [ ] `categories` - Should match the article type
+- [ ] `description` - 1-2 sentences for previews
+- [ ] Type-specific fields (external_url for Link, quote_text for Quote, etc.)
+
+### Shortcode Usage
+
+Use shortcodes for extensibility:
+
+- **Images:** `{{< image src="file.jpg" alt="desc" caption="optional" >}}`
+- **Galleries:** `{{< gallery cols="3" >}} ![img](url) ![img](url) {{< /gallery >}}`
+- **Gravatar:** `{{< gravatar email="user@example.com" >}}`
+- **Contact Form:** `{{< contact_form >}}`
+
+See `SHORTCODES.md` for full documentation.
+
+### Taxonomy Consistency
+
+Keep tags and categories **consistent and translated** across IT/EN versions:
+
+**Italian:** `programmazione`, `tutorial`, `sicurezza`
+**English:** `programming`, `tutorial`, `security`
+
+Maintain consistent mappings so content can be filtered across languages.
+
+---
+
+## 🔄 Content Workflow
+
+### Creating a New Article
+
+1. **Create directory:** `content/it/articles/[slug]/`
+2. **Create Italian version:** `index.md`
+3. **Write front-matter** (see examples above)
+4. **Write content** in markdown
+5. **Add images** to the bundle (if any)
+6. **Create English translation:** `index.en.md` (same front-matter, translated content)
+7. **Verify:** Run `hugo server` and check `/it/articles/[slug]/`
+
+### Translation Workflow
+
+1. Italian version is created first
+2. Front-matter (title, date, tags) are translated
+3. Content is translated word-for-word
+4. Both versions use same front-matter date (publish date is same)
+5. Kept in sync for consistency
+
+### Publishing
+
+- Set `draft: false` in front-matter
+- Article appears on `/articles/` list immediately
+- Articles sorted reverse-chronological (newest first)
+- Pinned articles stay at top (set `pinned: true`)
+
+### Unpublishing
+
+- Set `draft: true` to remove from public view
+- Or delete the directory entirely
+
+---
+
+## 🌐 Multilingual Handling
+
+### Content Types
+
+**English (EN):**
+- Menu labels translated in `i18n/en.yaml`
+- Article content in `index.en.md`
+- All articles translated when possible
+
+**Italian (IT):**
+- Menu labels translated in `i18n/it.yaml`
+- Article content in `index.md` or `index.it.md`
+- Default language
+
+### Language Switching
+
+Users can toggle IT ↔ EN in the hamburger menu. The theme automatically:
+- Shows translated menu labels
+- Routes to correct content directory
+- Preserves page structure
+
+---
+
+## ✓ Quality Checklist
+
+Before publishing, verify:
+
+- [ ] Front-matter is complete and valid YAML
+- [ ] `draft: false`
+- [ ] Title is clear and descriptive
+- [ ] Date is accurate (YYYY-MM-DD)
+- [ ] Type is one of the 5 allowed types
+- [ ] Tags are lowercase, relevant, consistent
+- [ ] Description is 1-2 sentences
+- [ ] Images are optimized (compressed, correct format)
+- [ ] All markdown syntax is correct
+- [ ] Shortcodes are properly formatted
+- [ ] English translation exists (if required)
+- [ ] Links are absolute URLs (http/https)
+- [ ] No raw HTML - use shortcodes instead
+
+---
+
+## 🛠️ Advanced: Article Type Customization
+
+To add a new article type (future):
+
+1. Notify the theme architect (see CLAUDE.md)
+2. New type added to `hugo.toml` under `[params.articleTypes]`
+3. Optional: New template created in `themes/danix-xyz-hacker/layouts/partials/article-types/[type].html`
+4. Use `type: [newtype]` in front-matter
+5. Document in this file
+
+---
+
+## 📌 Contact Form Integration
+
+If article contains `{{< contact_form >}}`:
+
+- Form automatically handles IT/EN labels via i18n
+- Submissions go to `/contact.php`
+- Backend implementation required (see SHORTCODES.md)
+- Responses use translated success/error messages
+
+---
+
+## Troubleshooting
+
+### Article not appearing in list
+
+- Check `draft: false`
+- Verify `date` is in past (not future)
+- Ensure file is `index.md` or `index.it.md` or `index.en.md`
+- Check for YAML syntax errors in front-matter
+
+### Images not loading
+
+- Ensure image is in same bundle directory as `index.md`
+- Use relative paths in shortcodes: `image.jpg` (not `/image.jpg`)
+- Check image file exists and is named correctly
+- Try Hugo server with `-D` flag to rebuild
+
+### Translation not showing
+
+- Ensure `index.en.md` exists in same directory
+- Check front-matter language settings in `hugo.toml`
+- Both IT and EN versions need same file structure
+- Verify language toggle in menu works
+
+---
+
+## Questions or Issues?
+
+Refer to:
+- **Theme documentation:** `CLAUDE.md` (architecture, themes, config)
+- **Shortcode usage:** `SHORTCODES.md` (all available shortcodes)
+- **Hugo docs:** https://gohugo.io/documentation/
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add AGENTS.md
+git commit -m "docs: update AGENTS.md with bilingual content structure, article types, and workflow"
+```
+
+---
+
+## Spec Coverage & Self-Review
+
+**Checking spec against plan:**
+
+✅ **Architecture** (Section 2) - Tasks 1-3, 13-14
+✅ **Landing Page** (Section 3.1) - Task 15
+✅ **Articles List** (Section 3.2) - Tasks 16-17
+✅ **Single Article** (Section 3.2) - Tasks 18-20, 26
+✅ **Article Types** (Section 8) - Tasks 21-26
+✅ **Static Pages** (Section 3.3) - Task 18 (uses same single.html)
+✅ **Navigation** (Section 4) - Tasks 5-6
+✅ **Styling** (Section 5) - Tasks 8-9
+✅ **Interactive Features** (Section 7) - Tasks 10-12, 30
+✅ **i18n** (Section 2) - Tasks 13-14
+✅ **Shortcodes** (Section 1, CLAUDE.md) - Tasks 27-30, 31
+✅ **Documentation** - Tasks 31-32
+✅ **Configuration** (Section 9) - Task 3
+
+**No placeholders detected.** All code complete with examples.
+
+**Type consistency verified:** All function names, class names, and property names consistent across tasks.
+
+---
+
+## Execution Plan Complete
+
+Plan saved to: `docs/superpowers/plans/2026-04-15-hugo-theme-implementation.md`
+
+**Next Steps:**
+
+Choose execution strategy:
+
+**Option 1: Subagent-Driven (Recommended)**
+- Fresh subagent per task
+- Review between tasks
+- Faster iteration, task-by-task validation
+
+**Option 2: Inline Execution**
+- Execute tasks in this session
+- Batch with checkpoints
+- Continuous work with periodic reviews
+
+Which approach do you prefer?
+```
+
+- [ ] **Step 3: Commit plan to repo**
+
+```bash
+git add docs/superpowers/plans/2026-04-15-hugo-theme-implementation.md
+git commit -m "docs: create comprehensive implementation plan for Hugo theme (32 tasks, 4 phases)"
+```
+
+---
+
+Which execution strategy would you like: **Subagent-Driven** or **Inline Execution**?
\ No newline at end of file
diff --git a/docs/superpowers/specs/2026-04-15-hugo-theme-design.md b/docs/superpowers/specs/2026-04-15-hugo-theme-design.md
new file mode 100644
index 0000000..2aa1ea1
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-15-hugo-theme-design.md
@@ -0,0 +1,548 @@
+# danix.xyz Hugo Theme Design Specification
+
+**Date**: April 15, 2026  
+**Project**: Hugo theme for personal portfolio/blog (https://danix.xyz)  
+**Philosophy**: Slackware-style (clean, essential, no bloat) with hacker/open-source aesthetic
+
+---
+
+## 1. Project Overview
+
+danix.xyz is a **portfolio/blog site** with bilingual support (Italian/English). The theme must:
+- Deliver a modern, distinctive visual experience
+- Reuse font stack and color palette foundations from danix.me (but not replicate the design)
+- Support flexible, easy-to-configure content structure
+- Maintain accessibility (WCAG 2.1 AA)
+- Be responsive (mobile-first)
+
+---
+
+## 2. Architecture & Tech Stack
+
+### Theme Foundation
+- **Hugo (Extended)** with Hugo Pipes for asset processing and minification
+- **Tailwind CSS** (utility-first, @apply for semantic components)
+- **Alpine.js** for interactive elements (menu toggle, language switching, theme switching)
+- **Vanilla JS** for minimal optimizations where Alpine isn't needed
+- **Chroma** (Hugo's built-in syntax highlighter) for code blocks
+
+### Configuration-Driven Design
+**All major configuration** (menus, static pages, content types, theme options) lives in **hugo.toml**. This enables:
+- Easy addition of new static pages without touching code
+- Extensible article type system
+- Theme option management in one place
+
+### Multilingual Support (i18n)
+- **Structure**: `i18n/it.yaml` and `i18n/en.yaml` for all UI strings
+- **Default**: Italian (IT)
+- **Supported**: English (EN)
+- **Scope**: Navigation labels, button text, page headings, form labels, error messages
+- **Language switching**: Toggle in hamburger menu with state persistence
+
+---
+
+## 3. Content Structure
+
+### 3.1 Landing Page (`/`)
+**Source**: `content/_index.md` (front-matter + markdown)
+
+**Components**:
+- Hero section: Profile photo, name, brief bio (multilingual)
+- Two CTAs: "Read Articles" → `/articles/` | "Get in Touch" → `/is/here/`
+- Clean, centered layout
+- No feed or preview content
+
+**Layout**: Full-width, centered, vertical spacing emphasizes simplicity
+
+---
+
+### 3.2 Articles Section (`/articles/`)
+
+#### List View
+- **Sorting**: Reverse chronological (newest first)
+- **Pinned posts**: One post can stay at top via `pinned: true` in front-matter
+- **Display**: Title + date + type badge + excerpt (optional)
+- **Type badge colors**: Each article type has a distinct visual identifier
+
+#### Article Types (5)
+1. **Life** — Generic blog posts, personal thoughts, reflections
+2. **Photo** — Single image or gallery, visual-focused
+3. **Link** — External URL with commentary
+4. **Quote** — Pull quote with author attribution
+5. **Tech** — Code snippets, technical content, tutorials
+
+Color mapping:
+
+| Type | Dark Mode | Light Mode | Use |
+|---|---|---|---|
+| **Life** | `#f59e0b` (Amber) | `#d97706` (Amber) | Personal essays, life updates |
+| **Photo** | `#ec4899` (Pink) | `#be185d` (Pink) | Photo essays, galleries |
+| **Link** | `#38bdf8` (Cyan) | `#0284c7` (Cyan) | Bookmarks, external links |
+| **Quote** | `#00ff88` (Green) | `#008f5a` (Green) | Quotes, inspirational content |
+| **Tech** | `#a855f7` (Purple) | `#7c3aed` (Purple) | Technical articles, tutorials |
+
+Each type gets an optimized single-article template.
+
+#### Single Article View
+**Source**: `content/articles/[slug]/index.md` (Page Bundles)
+
+**Layout**: 
+- **Desktop (1024px+)**: Two-column (main content + sticky sidebar)
+- **Mobile (<768px)**: Single column (sidebar moves to bottom)
+
+**Main Content**:
+- Type badge (e.g., "TECH")
+- Title (h1)
+- Metadata: Published date, updated date (if applicable), reading time
+- Article content (markdown with syntax-highlighted code blocks)
+- Tags (bottom of content)
+
+**Sidebar** (responsive positioning):
+- **Share section**: Twitter, Facebook, Copy Link buttons
+- **Article info**: Published date, updated date, reading time, category
+- **Related posts**: Links to 2-3 related articles
+- Desktop: Sticky positioning (stays visible during scroll)
+- Mobile: Flows to bottom of page
+
+**Syntax Highlighting**:
+- Language: Chroma (built-in Hugo)
+- Trigger: Markdown code fences with language tag (```go, ```python, etc.)
+- Theme: Custom CSS matching danix.xyz colors (purple accent #a855f7, green highlights #00ff88)
+- Options: Line numbers configurable in hugo.toml
+
+---
+
+### 3.3 Static Pages
+
+**URLs & Examples**:
+- `/is/` — About page
+- `/is/here/` — Contact page  
+- `/is/legal/` — Privacy policy
+
+**Configuration**: All static page URLs defined in `hugo.toml` menus section. Adding new pages:
+1. Create markdown file in `content/pages/[slug]/index.md`
+2. Add menu entry to hugo.toml
+3. Theme automatically routes and renders
+
+**Layout**: Same two-column + sidebar structure as articles (desktop/mobile responsive)
+
+**Sidebar content** (per page):
+- About: Social links, skills, CV download, contact info
+- Contact: Email, response time, availability, social profiles
+- Legal: Last updated date, version info
+
+---
+
+## 4. Navigation & Menu System
+
+### Top Navigation (Desktop)
+- Logo/brand name on left
+- Menu items on right: Articles | About | Contact | Hamburger icon
+- Sticky positioning (stays visible while scrolling)
+- Light hover states
+
+### Hamburger Menu (Mobile + Desktop Open)
+**Trigger**: Hamburger icon (≡) top right
+
+**Full-screen overlay with**:
+- Main menu (Articles, About, Contact, Privacy, etc.)
+- Language switcher (IT/EN) with flag icons
+- Theme toggle (☀️ / 🌙)
+- Close button (X or backdrop click)
+
+**Alpine.js handling**:
+- Toggle class on `<html>` element to show/hide overlay
+- Language change: Update current language variable, navigate or reload
+- Theme change: Toggle `theme-light` / `theme-dark` class on `<html>`
+
+---
+
+## 5. Design & Visual Identity
+
+### Color Palette
+
+#### Dark Mode (Primary)
+- **Background**: #060b10 (deepest), #0c1520 (bg2), #101e2d (surface)
+- **Borders**: #182840
+- **Text**: #c4d6e8 (primary), #7a9bb8 (dim)
+- **Accent**: #a855f7 (purple primary), #00ff88 (green secondary)
+- **Glow**: rgba(168, 85, 247, 0.12)
+
+#### Light Mode
+- **Background**: #f0f4f8 (lightest), #e2eaf4 (bg2), #d4dff0 (surface)
+- **Borders**: #a8bdd8
+- **Text**: #0d1b2a (primary), #2e4a6a (dim)
+- **Accent**: #7c3aed (purple primary), #008f5a (green secondary)
+- **Glow**: rgba(124, 58, 237, 0.1)
+
+### Typography
+
+- **Headings**: Oxanium (sans-serif, distinctive, hacker-like)
+- **Body text**: IBM Plex Sans (modern, readable, professional)
+- **Code/Monospace**: JetBrains Mono (code blocks, inline code, terminal-style elements)
+
+**Font stack fallback**:
+```
+Oxanium, sans-serif
+IBM Plex Sans, system-ui, sans-serif
+JetBrains Mono, Courier New, monospace
+```
+
+### Visual Elements
+
+- **Dot-grid background**: Subtle radial-gradient pattern (repeating dots)
+  - Dark: rgba(168, 85, 247, 0.07) dots on #060b10
+  - Light: rgba(124, 58, 237, 0.07) dots on #f0f4f8
+  
+- **Smooth transitions**: All interactive elements (200ms ease)
+
+- **Minimal glow effects**: Accent color glows on headings, badges, links (0 0 40px with low opacity)
+
+- **Clean borders**: 1px solid with accent color at 15-30% opacity
+
+- **Card/container styling**: 
+  - Subtle background tint (accent color at 8-12% opacity)
+  - Border with accent at 20% opacity
+  - Border-radius: 0.4rem
+  - Shadow: None (keep clean)
+
+### Aesthetic Direction
+
+**Inspiration**: Open-source/hacker community aesthetic + Slackware philosophy
+
+**Characteristics**:
+- Clean, minimal, no unnecessary decoration
+- Modern but with technical roots (monospace touches, terminal vibes)
+- Purple + green color combination (distinctive, hacker-like)
+- Clear hierarchy and purpose for every element
+- Responsive and fast (no bloat)
+
+---
+
+## 5.1 Icons & Icon Fonts
+
+### Philosophy: Premium Monochrome Design
+
+Icons are part of the visual language, not decorative afterthoughts. The danix.xyz icon system uses **Feather Icons** for consistency:
+
+**Why Feather Icons:**
+- Minimalist aesthetic, premium appearance (not clipart-style)
+- Monochrome by default (pairs with any color)
+- Perfect stroke weight (1.5px) for clarity without heaviness
+- Comprehensive library (290+ icons covering common use cases)
+- Themeable via CSS (color, stroke, size all controllable)
+- Responsive at any size (crisp from 16px to 48px+)
+
+**Design principle:** Icons should be subtle, functional, and never draw more attention than the content they support.
+
+### Icon Sizing Scale
+
+Icons scale responsively based on context:
+
+```
+16px (0.85rem)  — Small metadata, secondary actions
+20px (1.15rem)  — Default, most contexts
+24px (1.4rem)   — Buttons, interactive elements
+32px (1.9rem)   — Large buttons, featured actions
+48px (2.8rem)   — Hero elements, major CTAs
+```
+
+### Icon Colors: Context-Dependent Theming
+
+Icons inherit or explicitly use colors based on context. **Never use hard-coded colors—always use CSS custom properties:**
+
+### Icon Stroke: Weight and Line Style
+
+**Feather icons use consistent stroke properties:**
+
+**When to adjust stroke:**
+- Keep stroke-width at 1.5 for almost all cases
+- Only adjust if icon appears too thin or thick at specific sizes
+- Test at actual display size before adjusting
+
+### Article Metadata Icons
+
+**Common metadata icons:**
+
+| Icon | Name | Usage | Example |
+|---|---|---|---|
+| 📅 | `calendar` | Publication date | "2026-04-08" |
+| ⏱️ | `clock` | Read time | "5 min read" |
+| ✍️ | `user` | Author name | "By Danilo M." |
+| 🏷️ | `tag` | Article category/type | "TECH" badge |
+| 🔗 | `link` | External link | "Read on source" |
+
+## 6. Responsive Design
+
+### Breakpoints
+
+- **Mobile**: < 768px
+- **Tablet**: 768px - 1023px  
+- **Desktop**: 1024px+
+
+### Mobile-First Approach
+
+**Default (mobile)**:
+- Single column layout
+- Hamburger menu for navigation
+- Sidebar content (articles) moves to bottom
+- Touch-friendly button sizes
+
+**Tablet (768px+)**:
+- Slightly increased padding/spacing
+- Wider content area
+- Sidebar still below on tablets
+
+**Desktop (1024px+)**:
+- Two-column layout (main + sidebar)
+- Full navigation visible
+- Sidebar sticky positioning (desktop articles/pages)
+- Optimized spacing and readability
+
+---
+
+## 7. Interactive Features
+
+### Alpine.js Interactions
+
+1. **Hamburger Menu Toggle**
+   - Click hamburger icon → overlay slides in / fades
+   - Click backdrop or close button → overlay closes
+   - Escape key closes overlay
+   - Body scroll disabled while overlay open
+
+2. **Language Switcher**
+   - Click language button (IT/EN) → switch language
+   - Persist preference to localStorage
+   - Page reloads with new language (or client-side routing if SPA-like)
+
+3. **Theme Toggle**
+   - Click sun/moon icon → toggle between dark/light
+   - Persist to localStorage
+   - Immediate class change on `<html>` element (no flash via inline script)
+
+4. **Contact Form** (shortcode-based)
+   - AJAX submission to `contact.php` (backend)
+   - Show loading state, success message, error handling
+   - Translated labels and error messages via i18n
+
+### No-JS Fallback
+
+- Navigation: Form-based or server-side page reload
+- Theme: CSS media query `prefers-color-scheme` as fallback
+- Menu: Full-page navigation links
+
+---
+
+## 8. Article Type Templates
+
+### Life
+**Layout**: Standard article (title, content, metadata, tags, sidebar)
+
+**Front-matter**:
+```yaml
+type: life
+title: Article Title
+date: 2026-04-12
+pinned: false
+draft: false
+tags: [tag1, tag2]
+categories: [life]
+description: Short description
+```
+
+### Photo
+**Layout**: Standard article with image/gallery focus
+**Front-matter**: Same as Life, but emphasizes `featured_image`
+
+### Link
+**Layout**: Title + external link button + commentary
+**Front-matter**:
+```yaml
+type: link
+title: Interesting Read
+external_url: https://example.com
+link_title: Read on Example Site
+```
+
+### Quote
+**Layout**: Large blockquote, author attribution, minimal text
+**Front-matter**:
+```yaml
+type: quote
+title: Quote Title
+quote_text: "The quote itself..."
+quote_author: Author Name
+```
+
+### Tech
+**Layout**: Standard article with code blocks, syntax-highlighted
+**Front-matter**: Same as Life, supports multiple code blocks
+
+---
+
+## 9. Configuration (hugo.toml)
+
+### Key Sections
+
+#### Languages
+```toml
+[languages.it]
+languageName = "IT"
+contentDir = "content/it"
+
+[languages.en]
+languageName = "EN"
+contentDir = "content/en"
+```
+
+#### Menus
+```toml
+[[menus.main]]
+name = "Articles"
+url = "/articles/"
+weight = 1
+
+[[menus.main]]
+name = "About"
+url = "/is/"
+weight = 2
+
+[[menus.footer]]
+name = "Privacy"
+url = "/is/legal/"
+```
+
+#### Theme Params
+```toml
+[params]
+# Site metadata
+siteName = "danix.xyz"
+author = "Danilo Macrì"
+description = "Portfolio and blog"
+
+# Theme options
+syntaxHighlight = true
+lineNumbers = false
+readingTime = true
+shareButtons = true
+relatedPosts = true
+
+# Colors (optional overrides)
+primaryAccent = "#a855f7"
+secondaryAccent = "#00ff88"
+```
+
+---
+
+## 10. Accessibility (WCAG 2.1 AA)
+
+- **Color contrast**: All text meets 4.5:1 (AA) for body text, 3:1 for larger text
+- **Semantic HTML**: Proper heading hierarchy, landmark regions, form labels
+- **Keyboard navigation**: All interactive elements accessible via keyboard
+- **Focus indicators**: Visible focus states on links and buttons
+- **Alt text**: Images have descriptive alt text
+- **Skip link**: Skip to main content link (hidden but keyboard-accessible)
+- **ARIA labels**: Where needed for icon buttons (hamburger, theme toggle)
+
+---
+
+## 11. Implementation Priorities
+
+### Phase 1 (MVP)
+- Basic layout (landing, articles list, single article, static pages)
+- Navigation and menu system
+- Bilingual support (i18n)
+- Dark/light theme toggle
+- Mobile responsive
+
+### Phase 2
+- Article type-specific templates
+- Pinned post support
+- Sidebar with metadata and sharing
+- Related posts section
+- Syntax highlighting
+
+### Phase 3 (Nice to have)
+- Contact form (AJAX)
+- Comment system (optional)
+- Search functionality
+- Analytics integration
+- Sitemap and RSS feeds
+
+---
+
+## 12. Extensibility
+
+### Adding New Static Pages
+1. Create file in `content/pages/[slug]/index.md`
+2. Add menu entry in hugo.toml
+3. Theme automatically routes (no template changes needed)
+
+### Adding New Article Types
+1. Define in hugo.toml under `[params.articleTypes]`
+2. Create partial template if special layout needed
+3. Use in front-matter `type: newtype`
+
+### Customizing Sidebar
+1. Define per-page in front-matter (e.g., `showSharing: true`, `showMetadata: true`)
+2. Sidebar partial checks flags and renders accordingly
+3. No CSS changes needed
+
+---
+
+## 13. File Structure (Overview)
+
+```
+themes/danix-xyz-hacker/
+├── layouts/
+│   ├── index.html (landing page)
+│   ├── _default/
+│   │   ├── baseof.html
+│   │   ├── single.html (articles/pages)
+│   │   └── list.html (articles list)
+│   ├── articles/
+│   │   ├── single.html (article types dispatch)
+│   │   └── [type]/single.html (type-specific)
+│   └── partials/
+│       ├── header.html
+│       ├── footer.html
+│       ├── nav.html
+│       ├── sidebar.html
+│       └── article-types/
+│           ├── life.html
+│           ├── photo.html
+│           ├── link.html
+│           ├── quote.html
+│           └── tech.html
+├── assets/
+│   ├── css/
+│   │   ├── main.scss
+│   │   ├── tailwind.css
+│   │   └── chroma-custom.css
+│   └── js/
+│       ├── main.js
+│       └── alpine-setup.js
+├── static/
+│   └── (images, fonts, files)
+├── i18n/
+│   ├── it.yaml
+│   └── en.yaml
+└── hugo.toml
+```
+
+---
+
+## 14. Success Criteria
+
+- ✅ Landing page with hero + CTAs
+- ✅ Articles list (reverse chrono, pinned support)
+- ✅ 5 article types with optimized templates
+- ✅ Static pages with custom URLs (all from config)
+- ✅ Bilingual (IT/EN) with language switcher
+- ✅ Dark/light theme toggle
+- ✅ Responsive (mobile-first, desktop sidebar)
+- ✅ Syntax highlighting for code blocks
+- ✅ Sidebar with share/metadata (sticky desktop, bottom mobile)
+- ✅ WCAG 2.1 AA accessibility
+- ✅ Zero unnecessary dependencies (Slackware philosophy)