cobusgreyling · cobusgreyling · Jun 11, 2026 · Jun 11, 2026
@@ -38,6 +38,20 @@ A loop is a recursive goal: you define a purpose and the AI iterates (often with
   <strong><a href="https://cobusgreyling.substack.com/p/loop-engineering">→ Read the Loop Engineering essay on Substack</a></strong>
 </p>
 
+## Contents
+
+- [Quick Links](#quick-links)
+- [Why This Matters](#why-this-matters)
+- [The Five Building Blocks + Memory](#the-five-building-blocks--memory)
+- [Patterns](#patterns)
+- [Getting Started (5 minutes)](#getting-started-5-minutes)
+- [Examples by Tool](#examples-by-tool)
+- [Operating & Safety](#operating--safety)
+- [Caveats](#caveats)
+- [Contributing](#contributing)
+- [Sources](#sources)
+- [License](#license)
+
 ## Quick Links
 
 | Start here | Description |

@@ -56,7 +56,9 @@ a:hover { color: #6ff5d8; }
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 16px;
   height: 64px;
+  position: relative;
 }
 
 .logo {
@@ -82,6 +84,47 @@ a:hover { color: #6ff5d8; }
 
 .nav-links a:hover { color: var(--text); }
 
+.nav-menu {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+}
+
+.nav-toggle {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  cursor: pointer;
+}
+
+.nav-toggle-bar {
+  display: block;
+  width: 100%;
+  height: 2px;
+  background: var(--text);
+  border-radius: 2px;
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
+  opacity: 0;
+}
+
+.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -491,6 +534,24 @@ section {
   margin-bottom: 28px;
 }
 
+.cta-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.cta-stars {
+  display: inline-flex;
+  line-height: 0;
+}
+
+.cta-stars img {
+  display: block;
+  border-radius: 999px;
+}
+
 .footer {
   padding: 32px 24px;
   text-align: center;
@@ -503,7 +564,50 @@ section {
 .footer a:hover { color: var(--accent); }
 
 @media (max-width: 640px) {
-  .nav-links { display: none; }
+  .nav-toggle { display: flex; }
+
+  .nav-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    right: 0;
+    display: none;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+    padding: 20px;
+    background: rgba(7, 11, 18, 0.98);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
+  }
+
+  .nav-menu.open { display: flex; }
+
+  .nav-links {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+    width: 100%;
+  }
+
+  .nav-links a {
+    display: block;
+    padding: 10px 12px;
+    border-radius: 8px;
+  }
+
+  .nav-links a:hover {
+    background: rgba(62, 232, 197, 0.08);
+  }
+
+  .nav-menu .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  body.nav-open { overflow: hidden; }
+
   .hero { padding: 48px 0 40px; }
   .flow-arrow { display: none; }
 }

@@ -20,14 +20,28 @@
 <nav class="nav">
   <div class="wrap nav-inner">
     <a href="#" class="logo">Loop <span>Engineering</span></a>
-    <ul class="nav-links">
-      <li><a href="#patterns">Patterns</a></li>
-      <li><a href="#primitives">Primitives</a></li>
-      <li><a href="#start">Get Started</a></li>
-      <li><a href="https://cobusgreyling.substack.com/p/loop-engineering">Essay</a></li>
-      <li><a href="https://github.com/cobusgreyling/loop-engineering">GitHub</a></li>
-    </ul>
-    <a href="https://github.com/cobusgreyling/loop-engineering" class="btn btn-primary">View Repo</a>
+    <button
+      type="button"
+      class="nav-toggle"
+      aria-label="Open menu"
+      aria-expanded="false"
+      aria-controls="nav-menu"
+    >
+      <span class="nav-toggle-bar"></span>
+      <span class="nav-toggle-bar"></span>
+      <span class="nav-toggle-bar"></span>
+    </button>
+    <div id="nav-menu" class="nav-menu">
+      <ul class="nav-links">
+        <li><a href="#patterns">Patterns</a></li>
+        <li><a href="#primitives">Primitives</a></li>
+        <li><a href="#interactive">Picker</a></li>
+        <li><a href="#start">Get Started</a></li>
+        <li><a href="https://cobusgreyling.substack.com/p/loop-engineering">Essay</a></li>
+        <li><a href="https://github.com/cobusgreyling/loop-engineering">GitHub</a></li>
+      </ul>
+      <a href="https://github.com/cobusgreyling/loop-engineering" class="btn btn-primary">View Repo</a>
+    </div>
   </div>
 </nav>
 
@@ -402,8 +416,17 @@ <h3>loop-audit on every PR</h3>
 <div class="cta">
   <h2>Ready to stop prompting?</h2>
   <p>The best loops are boring, reliable, and transparent.</p>
-  <a href="https://github.com/cobusgreyling/loop-engineering" class="btn btn-primary">Star on GitHub</a>
-  <a href="https://github.com/cobusgreyling/loop-engineering/blob/main/CONTRIBUTING.md" class="btn btn-ghost" style="margin-left: 12px;">Contribute a pattern</a>
+  <div class="cta-actions">
+    <a href="https://github.com/cobusgreyling/loop-engineering" class="btn btn-primary">Star on GitHub</a>
+    <a href="https://github.com/cobusgreyling/loop-engineering/stargazers" class="cta-stars" aria-label="GitHub stars">
+      <img
+        src="https://img.shields.io/github/stars/cobusgreyling/loop-engineering?style=for-the-badge&logo=github&label=Stars&labelColor=111a28&color=3ee8c5"
+        alt="GitHub stars"
+        height="32"
+      />
+    </a>
+    <a href="https://github.com/cobusgreyling/loop-engineering/blob/main/CONTRIBUTING.md" class="btn btn-ghost">Contribute a pattern</a>
+  </div>
 </div>
 
 <footer class="footer">
@@ -625,8 +648,37 @@ <h2>Ready to stop prompting?</h2>
   computeLive();
 }
 
+function setupMobileNav() {
+  const toggle = document.querySelector('.nav-toggle');
+  const menu = document.getElementById('nav-menu');
+  if (!toggle || !menu) return;
+
+  const closeMenu = () => {
+    menu.classList.remove('open');
+    toggle.setAttribute('aria-expanded', 'false');
+    toggle.setAttribute('aria-label', 'Open menu');
+    document.body.classList.remove('nav-open');
+  };
+
+  toggle.addEventListener('click', () => {
+    const open = menu.classList.toggle('open');
+    toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+    toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
+    document.body.classList.toggle('nav-open', open);
+  });
+
+  menu.querySelectorAll('a').forEach((link) => {
+    link.addEventListener('click', closeMenu);
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeMenu();
+  });
+}
+
 // Boot
 document.addEventListener('DOMContentLoaded', () => {
+  setupMobileNav();
   setupPatternPicker();
   setupSimulator();
 });

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+IMAGE="${REPO_ROOT}/assets/visuals/social-preview.jpg"
+SETTINGS_URL="https://github.com/cobusgreyling/loop-engineering/settings"
+
+if [[ ! -f "${IMAGE}" ]]; then
+  echo "Missing ${IMAGE}"
+  echo "Regenerate with:"
+  echo "  sips -c 640 1280 assets/visuals/loop-engineering-social-banner.jpg --out assets/visuals/social-preview.jpg"
+  exit 1
+fi
+
+BYTES=$(wc -c < "${IMAGE}" | tr -d ' ')
+if (( BYTES > 1048576 )); then
+  echo "Warning: social preview should be under 1 MB (current: ${BYTES} bytes)"
+fi
+
+echo "Ready: ${IMAGE} ($(sips -g pixelWidth -g pixelHeight "${IMAGE}" 2>/dev/null | awk '/pixel/{print $2}' | tr '\n' 'x' | sed 's/x$//'))"
+echo
+echo "GitHub has no public API for social preview upload."
+echo "1. Open: ${SETTINGS_URL}"
+echo "2. Social preview → Edit → Upload an image"
+echo "3. Choose: assets/visuals/social-preview.jpg"
+echo
+
+if command -v open >/dev/null 2>&1; then
+  open "${SETTINGS_URL}"
+fi