public/tutorials
1
0
Fork 0
Code Actions Activity

feat: feature the agentic-environment guide on the landing page; add a site favicon
Deploy / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Pouya
2026-06-04 17:35:01 +02:00
parent 7964d0ac43
commit 35de7cacc2
4 changed files with 110 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
agentic-setup/agentic-setup-overview.html
+1
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <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> <style>
/* ========================================================================= /* =========================================================================
bitwarden-switch/password-manager-overview.html
+1
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <title data-i18n="page_title">Your Passwords Are the Keys to Your Whole Life</title>
<style> <style>
/* ========================================================================= /* =========================================================================
favicon.svg
+8
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 490 B

index.html
+100 -114
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <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."> <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> <style>
@@ -539,27 +540,27 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
<div class="sec-head"> <div class="sec-head">
<span class="tag">FEATURED</span> <span class="tag">FEATURED</span>
<h2 id="featured-h">The flagship guide</h2> <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> </div>
<a class="featured reveal" href="bitwarden-switch/password-manager-overview.html" <a class="featured reveal" href="agentic-setup/agentic-setup-overview.html"
aria-label="Read the field guide: Your Passwords Are the Keys to Your Whole Life"> aria-label="Read the field guide: Your Agentic Environment — A Field Guide">
<div class="ft-body"> <div class="ft-body">
<div class="ft-stamp"> <div class="ft-stamp">
<span class="ft-tag">Featured</span> <span class="ft-tag">Featured</span>
<span class="ft-no num">01</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> </div>
<h3>Your Passwords Are the Keys to Your Whole Life</h3> <h3>Your Agentic Environment — A Field Guide</h3>
<p class="ft-premise">A plain-English guide for people who don't (and shouldn't have <p class="ft-premise">A personal team of AI experts for your homelab, code, and ideas —
to) think about hackers all day. <b>From "I reuse the same password" to "I don't have <b>from one forgetful chat to a versioned, governed team of specialists that gets
to worry about this anymore."</b></p> sharper over time.</b></p>
<div class="ft-meta"> <div class="ft-meta">
<span class="chip">Password managers</span> <span class="chip">Claude Code</span>
<span class="chip">The Bitwarden switch</span> <span class="chip">Self-improving agents</span>
<span class="chip">Start here</span> <span class="chip">Field guide</span>
</div> </div>
<span class="ft-cta"> <span class="ft-cta">
@@ -570,58 +571,43 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
</span> </span>
</div> </div>
<!-- the centerpiece: one master key, fanning out to the many locks it opens. <!-- the centerpiece: a coordinating hub node wired out to a team of specialist
Composition is balanced on a single centerline (y=130): the key bow sits agent nodes — the same "team of agents" motif as the AGT-01 shelf card,
in a soft concentric "secured" halo at left; the blade runs to a shoulder scaled up to fill the hero panel. Composition is balanced about the hub at
node at x=196; three symmetric bezier strands fan to three identical (170,130): six specialists ring the hub on a soft orbit; connection strands
padlocks stacked and vertically centred at right (top 70 · mid 130 · bot 190), are drawn first (under the nodes); a faint orbit + halo gives depth without
each held clear of the frame edge. --> clutter. Accent-coloured via currentColor, theme-aware. -->
<div class="ft-art" aria-hidden="true"> <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"> <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"> <g stroke="currentColor" fill="none">
<circle cx="58" cy="130" r="46" stroke-width="1.2" opacity=".18"/> <circle cx="170" cy="130" r="100" stroke-width="1.2" opacity=".16"/>
<circle cx="58" cy="130" r="38" stroke-width="1.2" opacity=".30"/> <circle cx="170" cy="130" r="62" stroke-width="1.2" opacity=".28"/>
</g> </g>
<!-- the single master key, on the centreline --> <!-- connection strands from the hub to each specialist (under the nodes) -->
<g> <g stroke-width="2.6" opacity=".6">
<circle cx="58" cy="130" r="27"/> <path d="M170 130 L170 48"/>
<circle cx="58" cy="130" r="9" stroke-width="2.6"/> <path d="M170 130 L240 70"/>
<!-- blade --> <path d="M170 130 L240 190"/>
<path d="M85 130 H196"/> <path d="M170 130 L170 212"/>
<!-- evenly-spaced teeth, mirrored about the blade for a key-like silhouette --> <path d="M170 130 L100 190"/>
<path d="M150 130 v15 M168 130 v20 M186 130 v13"/> <path d="M170 130 L100 70"/>
</g> </g>
<!-- shoulder node where the three strands depart --> <!-- the six specialist agent nodes ringing the hub -->
<circle cx="196" cy="130" r="4.6" fill="currentColor" stroke="none"/> <g stroke-width="3.4" fill="none">
<circle cx="170" cy="48" r="17"/>
<!-- three symmetric strands fanning to the three locks --> <circle cx="240" cy="70" r="17"/>
<g stroke-width="2.4" opacity=".8"> <circle cx="240" cy="190" r="17"/>
<path d="M199 127 C232 104 244 84 262 72"/> <circle cx="170" cy="212" r="17"/>
<path d="M201 130 H258"/> <circle cx="100" cy="190" r="17"/>
<path d="M199 133 C232 156 244 176 262 188"/> <circle cx="100" cy="70" r="17"/>
</g> </g>
<!-- three identical padlocks the one key opens (centres x=283, kept off the edge) --> <!-- the coordinating hub: filled core inside a ring -->
<g stroke-width="2.8"> <circle cx="170" cy="130" r="29" stroke-width="3.8" fill="none"/>
<!-- top lock, centred at y=70 --> <circle cx="170" cy="130" r="11" fill="currentColor" stroke="none"/>
<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>
</svg> </svg>
</div> </div>
</a> </a>
@@ -638,70 +624,13 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
<div class="specimens"> <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" <a class="specimen reveal" href="agentic-setup/agentic-setup-overview.html"
aria-label="Specimen 01, SEC-01, Security: Your Passwords Are the Keys to Your Whole Life. Read the guide."> aria-label="Specimen 01, AGT-01, Agentic dev: Your Agentic Environment, a field guide. Read the guide.">
<div class="sp-rail"> <div class="sp-rail">
<span class="sp-index num" aria-hidden="true">01</span> <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-codes">
<span class="sp-docid num">AGT-01</span> <span class="sp-docid num">AGT-01</span>
<span class="sp-topic">Agentic Dev</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> </div>
</a> </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. NEXT SPECIMENS GO HERE.
Copy an <a class="specimen"> block above, then update: Copy an <a class="specimen"> block above, then update: