initial commit

1 files changed, 154 insertions, 0 deletions

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