From 35de7cacc26b4ba59f1c19e85808a496291ac25e Mon Sep 17 00:00:00 2001
From: Pouya <>
Date: Thu, 4 Jun 2026 17:35:01 +0200
Subject: [PATCH] feat: feature the agentic-environment guide on the landing
 page; add a site favicon

---
 agentic-setup/agentic-setup-overview.html     |   1 +
 .../password-manager-overview.html            |   1 +
 favicon.svg                                   |   8 +
 index.html                                    | 214 ++++++++----------
 4 files changed, 110 insertions(+), 114 deletions(-)
 create mode 100644 favicon.svg
diff --git a/agentic-setup/agentic-setup-overview.html b/agentic-setup/agentic-setup-overview.html
index 56af375..620d1f0 100644
--- a/agentic-setup/agentic-setup-overview.html
+++ b/agentic-setup/agentic-setup-overview.html
@@ -3,6 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <title data-i18n data-en="Your Agentic Environment — A Field Guide" data-de="Deine agentische Umgebung — ein Feldführer">Your Agentic Environment — A Field Guide</title>
 <style>
 /* =========================================================================
diff --git a/bitwarden-switch/password-manager-overview.html b/bitwarden-switch/password-manager-overview.html
index a8c11e9..9f34028 100644
--- a/bitwarden-switch/password-manager-overview.html
+++ b/bitwarden-switch/password-manager-overview.html
@@ -3,6 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <title data-i18n="page_title">Your Passwords Are the Keys to Your Whole Life</title>
 <style>
 /* =========================================================================
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..b933918
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Field Guides">
+  <rect width="32" height="32" rx="7" fill="#6d4aff"/>
+  <!-- open field-guide (book) in white on the violet brand tile -->
+  <g fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M16 10.6C13.5 9 10.6 8.6 7.8 9.2v12.7c2.8-.6 5.7-.2 8.2 1.4 2.5-1.6 5.4-2 8.2-1.4V9.2c-2.8-.6-5.7-.2-8.2 1.4z"/>
+    <path d="M16 10.6v12.7"/>
+  </g>
+</svg>
diff --git a/index.html b/index.html
index 2200347..079f708 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <title>Field Guides — Plain-English Tutorials</title>
 <meta name="description" content="A small library of plain-English field guides for people who don't (and shouldn't have to) think about tech all day. Start with the guide to password managers and Bitwarden.">
 <style>
@@ -539,27 +540,27 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
     <div class="sec-head">
       <span class="tag">FEATURED</span>
       <h2 id="featured-h">The flagship guide</h2>
-      <p class="note">Start here. It's the one almost everyone needs first.</p>
+      <p class="note">The big build — your own team of AI specialists.</p>
     </div>
 
-    <a class="featured reveal" href="bitwarden-switch/password-manager-overview.html"
-       aria-label="Read the field guide: Your Passwords Are the Keys to Your Whole Life">
+    <a class="featured reveal" href="agentic-setup/agentic-setup-overview.html"
+       aria-label="Read the field guide: Your Agentic Environment — A Field Guide">
       <div class="ft-body">
         <div class="ft-stamp">
           <span class="ft-tag">Featured</span>
           <span class="ft-no num">01</span>
-          <span class="ft-avail num"><span class="lc">EN</span> <span class="sep">&middot;</span> <span class="lc">DE</span> <span class="sep">&middot;</span> <span class="lc">FA</span></span>
+          <span class="ft-avail num"><span class="lc">EN</span> <span class="sep">&middot;</span> <span class="lc">DE</span></span>
         </div>
 
-        <h3>Your Passwords Are the Keys to Your Whole Life</h3>
-        <p class="ft-premise">A plain-English guide for people who don't (and shouldn't have
-        to) think about hackers all day. <b>From "I reuse the same password" to "I don't have
-        to worry about this anymore."</b></p>
+        <h3>Your Agentic Environment — A Field Guide</h3>
+        <p class="ft-premise">A personal team of AI experts for your homelab, code, and ideas —
+        <b>from one forgetful chat to a versioned, governed team of specialists that gets
+        sharper over time.</b></p>
 
         <div class="ft-meta">
-          <span class="chip">Password managers</span>
-          <span class="chip">The Bitwarden switch</span>
-          <span class="chip">Start here</span>
+          <span class="chip">Claude Code</span>
+          <span class="chip">Self-improving agents</span>
+          <span class="chip">Field guide</span>
         </div>
 
         <span class="ft-cta">
@@ -570,58 +571,43 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
         </span>
       </div>
 
-      <!-- the centerpiece: one master key, fanning out to the many locks it opens.
-           Composition is balanced on a single centerline (y=130): the key bow sits
-           in a soft concentric "secured" halo at left; the blade runs to a shoulder
-           node at x=196; three symmetric bezier strands fan to three identical
-           padlocks stacked and vertically centred at right (top 70 · mid 130 · bot 190),
-           each held clear of the frame edge. -->
+      <!-- the centerpiece: a coordinating hub node wired out to a team of specialist
+           agent nodes — the same "team of agents" motif as the AGT-01 shelf card,
+           scaled up to fill the hero panel. Composition is balanced about the hub at
+           (170,130): six specialists ring the hub on a soft orbit; connection strands
+           are drawn first (under the nodes); a faint orbit + halo gives depth without
+           clutter. Accent-coloured via currentColor, theme-aware. -->
       <div class="ft-art" aria-hidden="true">
         <svg viewBox="0 0 340 260" fill="none" stroke="currentColor" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round">
-          <!-- soft concentric "secured" halo behind the key bow -->
+          <!-- soft concentric "coordination" halo + orbit behind the hub -->
           <g stroke="currentColor" fill="none">
-            <circle cx="58" cy="130" r="46" stroke-width="1.2" opacity=".18"/>
-            <circle cx="58" cy="130" r="38" stroke-width="1.2" opacity=".30"/>
+            <circle cx="170" cy="130" r="100" stroke-width="1.2" opacity=".16"/>
+            <circle cx="170" cy="130" r="62" stroke-width="1.2" opacity=".28"/>
           </g>
 
-          <!-- the single master key, on the centreline -->
-          <g>
-            <circle cx="58" cy="130" r="27"/>
-            <circle cx="58" cy="130" r="9" stroke-width="2.6"/>
-            <!-- blade -->
-            <path d="M85 130 H196"/>
-            <!-- evenly-spaced teeth, mirrored about the blade for a key-like silhouette -->
-            <path d="M150 130 v15 M168 130 v20 M186 130 v13"/>
+          <!-- connection strands from the hub to each specialist (under the nodes) -->
+          <g stroke-width="2.6" opacity=".6">
+            <path d="M170 130 L170 48"/>
+            <path d="M170 130 L240 70"/>
+            <path d="M170 130 L240 190"/>
+            <path d="M170 130 L170 212"/>
+            <path d="M170 130 L100 190"/>
+            <path d="M170 130 L100 70"/>
           </g>
 
-          <!-- shoulder node where the three strands depart -->
-          <circle cx="196" cy="130" r="4.6" fill="currentColor" stroke="none"/>
-
-          <!-- three symmetric strands fanning to the three locks -->
-          <g stroke-width="2.4" opacity=".8">
-            <path d="M199 127 C232 104 244 84 262 72"/>
-            <path d="M201 130 H258"/>
-            <path d="M199 133 C232 156 244 176 262 188"/>
+          <!-- the six specialist agent nodes ringing the hub -->
+          <g stroke-width="3.4" fill="none">
+            <circle cx="170" cy="48"  r="17"/>
+            <circle cx="240" cy="70"  r="17"/>
+            <circle cx="240" cy="190" r="17"/>
+            <circle cx="170" cy="212" r="17"/>
+            <circle cx="100" cy="190" r="17"/>
+            <circle cx="100" cy="70"  r="17"/>
           </g>
 
-          <!-- three identical padlocks the one key opens (centres x=283, kept off the edge) -->
-          <g stroke-width="2.8">
-            <!-- top lock, centred at y=70 -->
-            <rect x="266" y="62" width="34" height="30" rx="5"/>
-            <path d="M272 62 v-7 a11 11 0 0 1 22 0 v7" stroke-width="2.6"/>
-            <circle cx="283" cy="74" r="3.4" stroke-width="2.2"/>
-            <path d="M283 77 v5.5" stroke-width="2.2"/>
-            <!-- middle lock, centred at y=130 -->
-            <rect x="266" y="122" width="34" height="30" rx="5"/>
-            <path d="M272 122 v-7 a11 11 0 0 1 22 0 v7" stroke-width="2.6"/>
-            <circle cx="283" cy="134" r="3.4" stroke-width="2.2"/>
-            <path d="M283 137 v5.5" stroke-width="2.2"/>
-            <!-- bottom lock, centred at y=190 -->
-            <rect x="266" y="182" width="34" height="30" rx="5"/>
-            <path d="M272 182 v-7 a11 11 0 0 1 22 0 v7" stroke-width="2.6"/>
-            <circle cx="283" cy="194" r="3.4" stroke-width="2.2"/>
-            <path d="M283 197 v5.5" stroke-width="2.2"/>
-          </g>
+          <!-- the coordinating hub: filled core inside a ring -->
+          <circle cx="170" cy="130" r="29" stroke-width="3.8" fill="none"/>
+          <circle cx="170" cy="130" r="11" fill="currentColor" stroke="none"/>
         </svg>
       </div>
     </a>
@@ -638,70 +624,13 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
     <div class="specimens">
 
       <!-- ========================================================================
-           SPECIMEN SEC-01 — Password security field guide (also the featured one)
+           SPECIMEN AGT-01 — Agentic environment field guide (also the featured one)
            ======================================================================== -->
-      <a class="specimen reveal" href="bitwarden-switch/password-manager-overview.html"
-         aria-label="Specimen 01, SEC-01, Security: Your Passwords Are the Keys to Your Whole Life. Read the guide.">
+      <a class="specimen reveal" href="agentic-setup/agentic-setup-overview.html"
+         aria-label="Specimen 01, AGT-01, Agentic dev: Your Agentic Environment, a field guide. Read the guide.">
 
         <div class="sp-rail">
           <span class="sp-index num" aria-hidden="true">01</span>
-          <span class="sp-codes">
-            <span class="sp-docid num">SEC-01</span>
-            <span class="sp-topic">Security</span>
-          </span>
-          <span class="sp-rail-glyph" aria-hidden="true">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-          </span>
-        </div>
-
-        <div class="sp-art" aria-hidden="true">
-          <!-- key + padlock motif, accent stroke -->
-          <svg viewBox="0 0 200 120" fill="none" role="img" aria-hidden="true">
-            <!-- faint baseline rule -->
-            <line x1="10" y1="104" x2="190" y2="104" stroke="currentColor" stroke-width="1" opacity=".22" stroke-dasharray="3 5"/>
-            <!-- padlock body -->
-            <rect x="96" y="48" width="74" height="56" rx="9" stroke="currentColor" stroke-width="3.5"/>
-            <!-- padlock shackle -->
-            <path d="M110 48V36a23 23 0 0 1 46 0v12" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
-            <!-- keyhole -->
-            <circle cx="133" cy="72" r="7.5" stroke="currentColor" stroke-width="3.2"/>
-            <path d="M133 79v11" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/>
-            <!-- key, pointing toward the lock -->
-            <circle cx="40" cy="70" r="17" stroke="currentColor" stroke-width="3.5"/>
-            <circle cx="40" cy="70" r="6" stroke="currentColor" stroke-width="3"/>
-            <path d="M57 70h34" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
-            <path d="M78 70v11M88 70v8" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
-          </svg>
-        </div>
-
-        <div class="sp-body">
-          <h3 class="sp-title">Your Passwords Are the Keys to Your Whole Life</h3>
-          <p class="sp-premise">A plain-English guide for people who don't (and shouldn't have to)
-          think about hackers all day.</p>
-        </div>
-
-        <div class="sp-meta" aria-label="Guide details">
-          <span class="m lang"><span class="mk">Lang</span><span class="mv">EN · DE · FA</span></span>
-          <span class="m"><span class="mk">Level</span><span class="mv">Starter</span></span>
-          <span class="m"><span class="mk">Format</span><span class="mv">Walkthrough</span></span>
-        </div>
-
-        <div class="sp-foot">
-          <span class="sp-stamp num">SAFE·01</span>
-          <span class="sp-read">Read
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
-          </span>
-        </div>
-      </a>
-
-      <!-- ========================================================================
-           SPECIMEN AGT-01 — Agentic environment field guide
-           ======================================================================== -->
-      <a class="specimen reveal" href="agentic-setup/agentic-setup-overview.html"
-         aria-label="Specimen 02, AGT-01, Agentic dev: Your Agentic Environment, a field guide. Read the guide.">
-
-        <div class="sp-rail">
-          <span class="sp-index num" aria-hidden="true">02</span>
           <span class="sp-codes">
             <span class="sp-docid num">AGT-01</span>
             <span class="sp-topic">Agentic Dev</span>
@@ -758,6 +687,63 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
         </div>
       </a>
 
+      <!-- ========================================================================
+           SPECIMEN SEC-01 — Password security field guide
+           ======================================================================== -->
+      <a class="specimen reveal" href="bitwarden-switch/password-manager-overview.html"
+         aria-label="Specimen 02, SEC-01, Security: Your Passwords Are the Keys to Your Whole Life. Read the guide.">
+
+        <div class="sp-rail">
+          <span class="sp-index num" aria-hidden="true">02</span>
+          <span class="sp-codes">
+            <span class="sp-docid num">SEC-01</span>
+            <span class="sp-topic">Security</span>
+          </span>
+          <span class="sp-rail-glyph" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+          </span>
+        </div>
+
+        <div class="sp-art" aria-hidden="true">
+          <!-- key + padlock motif, accent stroke -->
+          <svg viewBox="0 0 200 120" fill="none" role="img" aria-hidden="true">
+            <!-- faint baseline rule -->
+            <line x1="10" y1="104" x2="190" y2="104" stroke="currentColor" stroke-width="1" opacity=".22" stroke-dasharray="3 5"/>
+            <!-- padlock body -->
+            <rect x="96" y="48" width="74" height="56" rx="9" stroke="currentColor" stroke-width="3.5"/>
+            <!-- padlock shackle -->
+            <path d="M110 48V36a23 23 0 0 1 46 0v12" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
+            <!-- keyhole -->
+            <circle cx="133" cy="72" r="7.5" stroke="currentColor" stroke-width="3.2"/>
+            <path d="M133 79v11" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/>
+            <!-- key, pointing toward the lock -->
+            <circle cx="40" cy="70" r="17" stroke="currentColor" stroke-width="3.5"/>
+            <circle cx="40" cy="70" r="6" stroke="currentColor" stroke-width="3"/>
+            <path d="M57 70h34" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
+            <path d="M78 70v11M88 70v8" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+
+        <div class="sp-body">
+          <h3 class="sp-title">Your Passwords Are the Keys to Your Whole Life</h3>
+          <p class="sp-premise">A plain-English guide for people who don't (and shouldn't have to)
+          think about hackers all day.</p>
+        </div>
+
+        <div class="sp-meta" aria-label="Guide details">
+          <span class="m lang"><span class="mk">Lang</span><span class="mv">EN · DE · FA</span></span>
+          <span class="m"><span class="mk">Level</span><span class="mv">Starter</span></span>
+          <span class="m"><span class="mk">Format</span><span class="mv">Walkthrough</span></span>
+        </div>
+
+        <div class="sp-foot">
+          <span class="sp-stamp num">SAFE·01</span>
+          <span class="sp-read">Read
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+          </span>
+        </div>
+      </a>
+
       <!-- ========================================================================
            NEXT SPECIMENS GO HERE.
            Copy an <a class="specimen"> block above, then update:
