feat: feature the agentic-environment guide on the landing page; add a site favicon
Deploy / deploy (push) Successful in 1s
Deploy / deploy (push) Successful in 1s
This commit is contained in:
Pouya
+100
-114
@@ -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">·</span> <span class="lc">DE</span> <span class="sep">·</span> <span class="lc">FA</span></span>
|
||||
<span class="ft-avail num"><span class="lc">EN</span> <span class="sep">·</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:
|
||||
|
||||
Reference in New Issue
Block a user