initial commit

5 files changed, 550 insertions, 0 deletions

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