marcel/familienarchiv
1
0
Fork 0
Code Issues 110 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(document): move document domain core to document/ package

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-05 12:39:20 +02:00
parent bb7d872a61
commit e85057bed2
2371 changed files with 385726 additions and 1971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
docs/presentation/personas/00-anatomy.html Normal file
View File

@@ -0,0 +1,347 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aufbau einer Persona</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0D1117;--surface:#161B22;--surface-2:#1C2128;--border:#21262D;
--text:#C9D1D9;--text-muted:#6E7681;--text-bright:#F0F6FC;
/* per-persona accent colors */
--amber:#F59E0B;
--blue:#60A5FA;
--green:#34D399;
--purple:#A78BFA;
--orange:#FB923C;
--red:#F87171;
--cyan:#22D3EE;
}
body{
background:var(--bg);
color:var(--text);
font-family:'Inter',system-ui,sans-serif;
height:100vh;
display:flex;
align-items:stretch;
padding:14px;
}
/* ── Outer shell ── */
.card{
width:100%;
display:flex;
flex-direction:column;
background:var(--surface);
border:1px solid var(--border);
border-radius:12px;
overflow:hidden;
position:relative;
}
.card::before{
content:'';
position:absolute;
inset:0;
background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);
background-size:26px 26px;
pointer-events:none;
}
/* ── Top bar ── */
.topbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 32px;
border-bottom:1px solid var(--border);
border-left:4px solid #4B5563;
font-family:'JetBrains Mono',monospace;
font-size:13px;
color:var(--text-muted);
}
.topbar .file{color:var(--text);font-weight:500}
.topbar .right{display:flex;gap:20px;align-items:center}
.topbar .project{color:#6B7280;font-weight:700;letter-spacing:1px;font-size:12px}
/* ── Layout: two columns ── */
.body{
flex:1;
display:grid;
grid-template-columns:270px 1fr;
min-height:0;
overflow:hidden;
position:relative;
}
/* ── Left: file outline ── */
.outline{
border-right:1px solid var(--border);
padding:22px 18px;
display:flex;
flex-direction:column;
gap:5px;
overflow:hidden;
}
.outline-title{
font-family:'JetBrains Mono',monospace;
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1.5px;
color:var(--text-muted);
margin-bottom:12px;
padding-left:4px;
}
.outline-item{
font-family:'JetBrains Mono',monospace;
font-size:13px;
padding:6px 10px;
border-radius:4px;
color:var(--text-muted);
display:flex;
align-items:center;
gap:9px;
cursor:default;
transition:background .15s;
}
.outline-item .num{
font-size:11px;
color:#4B5563;
flex-shrink:0;
width:16px;
text-align:right;
}
.outline-item.header-item{ color:var(--text); font-weight:500; }
.outline-item.active{
background:var(--surface-2);
color:var(--text-bright);
font-weight:500;
}
/* accent dot per section */
.outline-item .dot{
width:7px; height:7px; border-radius:50%;
flex-shrink:0;
}
/* ── Right: content ── */
.content{
padding:14px 26px;
display:flex;
flex-direction:column;
gap:8px;
overflow:hidden;
}
/* ── Section row ── */
.section{
flex:1;
background:var(--surface-2);
border:1px solid var(--border);
border-radius:8px;
padding:12px 18px;
display:grid;
grid-template-columns:auto 1fr;
gap:0 20px;
align-items:center;
border-left:3px solid transparent;
transition:border-color .15s;
}
.section:hover{ border-left-color:var(--section-accent, #4B5563); }
.section-label-col{
display:flex;
flex-direction:column;
gap:5px;
align-items:flex-start;
padding-top:2px;
}
.section-heading{
font-family:'JetBrains Mono',monospace;
font-size:13px;
font-weight:700;
color:var(--text-muted);
white-space:nowrap;
}
.from-badge{
font-family:'JetBrains Mono',monospace;
font-size:11px;
font-weight:700;
padding:3px 9px;
border-radius:3px;
white-space:nowrap;
letter-spacing:.3px;
}
.section-text{
font-size:14px;
line-height:1.65;
color:var(--text-muted);
}
.section-text strong{
color:var(--text-bright);
font-weight:600;
}
/* ── identity section (wider badge, top of file) ── */
.section.identity{
background:transparent;
border-color:transparent;
border-left:3px solid #4B5563;
padding-left:14px;
}
/* Accent per persona */
.acc-red { --section-accent:var(--red); background:color-mix(in srgb,var(--red) 10%,transparent); color:var(--red); border-color:color-mix(in srgb,var(--red) 35%,transparent); }
.acc-cyan { --section-accent:var(--cyan); background:color-mix(in srgb,var(--cyan) 10%,transparent); color:var(--cyan); border-color:color-mix(in srgb,var(--cyan) 35%,transparent); }
.acc-purple{ --section-accent:var(--purple); background:color-mix(in srgb,var(--purple)10%,transparent); color:var(--purple); border-color:color-mix(in srgb,var(--purple)35%,transparent); }
</style>
</head>
<body>
<div class="card">
<!-- top bar -->
<div class="topbar">
<div>
<span class="dir" style="color:var(--text-muted)">.claude/personas/</span>
<span class="file">*.md</span>
<span style="margin-left:12px;color:#4B5563">— alle Personas, gleicher Aufbau</span>
</div>
<div class="right">
<span>7 Dateien · gleiche Struktur</span>
<span class="project">FAMILIENARCHIV</span>
</div>
</div>
<div class="body">
<!-- left: outline panel -->
<div class="outline">
<div class="outline-title">Outline</div>
<div class="outline-item header-item">
<span class="num">#</span>
<span>identity</span>
</div>
<div class="outline-item">
<span class="num">##</span>
<span>hard_limits</span>
</div>
<div class="outline-item" style="height:10px"></div>
<div class="outline-item active">
<span class="num">##</span>
<div class="dot" style="background:var(--red)"></div>
<span>readable_code</span>
</div>
<div class="outline-item active">
<span class="num">##</span>
<div class="dot" style="background:var(--cyan)"></div>
<span>reliable_code</span>
</div>
<div class="outline-item active">
<span class="num">##</span>
<div class="dot" style="background:var(--red)"></div>
<span>modern_code</span>
</div>
<div class="outline-item active">
<span class="num">##</span>
<div class="dot" style="background:var(--purple)"></div>
<span>secure_code</span>
</div>
<div class="outline-item active">
<span class="num">##</span>
<div class="dot" style="background:var(--purple)"></div>
<span>testable_code</span>
</div>
<div class="outline-item" style="height:10px"></div>
<div class="outline-item header-item">
<span class="num">##</span>
<span>domain_expertise</span>
</div>
<div class="outline-item" style="color:#4B5563;font-size:10px;padding-left:22px">
(persona-spezifisch)
</div>
</div>
<!-- right: content -->
<div class="content">
<!-- identity – neutral -->
<div class="section identity">
<div class="section-label-col">
<span class="section-heading" style="color:#6B7280"># identity</span>
<span class="from-badge" style="background:#21262D;color:#6B7280;border:1px solid #30363D">
alle
</span>
</div>
<div class="section-text">
Name · Rolle · Philosophie · Hard Limits — was diese Persona <strong>niemals</strong> tut.
Der Hard-Limits-Abschnitt ist die entscheidende Disziplinkontrolle.
</div>
</div>
<!-- readable_code → Security -->
<div class="section" style="--section-accent:var(--red)">
<div class="section-label-col">
<span class="section-heading" style="color:var(--red)">## readable_code</span>
<span class="from-badge acc-red">Nora "NullX"</span>
</div>
<div class="section-text">
<strong>Security-Code muss der lesbarste Code im gesamten Codebase sein</strong> — weil er am wahrscheinlichsten während eines Incident Response auditiert, hinterfragt und unter Zeitdruck gelesen wird. Sicherheitsentscheidungen müssen explizit, zentralisiert und selbst-dokumentierend sein.
</div>
</div>
<!-- reliable_code → DevOps -->
<div class="section" style="--section-accent:var(--cyan)">
<div class="section-label-col">
<span class="section-heading" style="color:var(--cyan)">## reliable_code</span>
<span class="from-badge acc-cyan">Tobias "tobi"</span>
</div>
<div class="section-text">
Zuverlässige Infrastruktur bedeutet, dass das System ohne menschlichen Eingriff aus Fehlern zurückfindet. <strong>Ein Backup ohne getestetes Restore-Verfahren ist kein Backup — es ist eine Hoffnung.</strong>
</div>
</div>
<!-- modern_code → Security -->
<div class="section" style="--section-accent:var(--red)">
<div class="section-label-col">
<span class="section-heading" style="color:var(--red)">## modern_code</span>
<span class="from-badge acc-red">Nora "NullX"</span>
</div>
<div class="section-text">
<strong>Moderne Security nutzt Framework-eigene Controls, anstatt Schutzmechanismen selbst zu bauen.</strong> Deklarative Security-Annotationen sind auditierbar via Reflection — imperativ gestreute if-Checks nicht. Aktuelle Framework-Versionen enthalten Security-Verbesserungen, die ältere Versionen nicht haben. Aktuell bleiben ist eine Sicherheitsstrategie.
</div>
</div>
<!-- secure_code → UX -->
<div class="section" style="--section-accent:var(--purple)">
<div class="section-label-col">
<span class="section-heading" style="color:var(--purple)">## secure_code</span>
<span class="from-badge acc-purple">Leonie Voss</span>
</div>
<div class="section-text">
UI-Security schützt Nutzer vor schädlichen Interaktionen — irreführende Interfaces, exponierte Daten, unsichtbare Fallen. <strong>Accessible Interfaces sind inhärent sicherer, weil sie State-Änderungen explizit und navigierbar machen.</strong> Sicherheit und Usability sind Verbündete, keine Trade-offs.
</div>
</div>
<!-- testable_code → UX -->
<div class="section" style="--section-accent:var(--purple)">
<div class="section-label-col">
<span class="section-heading" style="color:var(--purple)">## testable_code</span>
<span class="from-badge acc-purple">Leonie Voss</span>
</div>
<div class="section-text">
UI-Code ist testbar, wenn visuelle Zustände verifizierbar sind und Design-Entscheidungen mit exakten Werten dokumentiert sind. <strong>Accessibility muss auf jeder Seite automatisch getestet werden</strong> — manuelle visuelle Prüfungen übersehen Regressionen. Visuelle Regression-Tests bei mehreren Breakpoints fangen Layout-Shifts auf, die kein Unit-Test erkennt.
</div>
</div>
</div><!-- /content -->
</div><!-- /body -->
</div>
</body>
</html>

130
docs/presentation/personas/01-elicit.html Normal file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elicit — Requirements Engineer</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--accent:#F59E0B;
--bg:#0D1117;--surface:#161B22;--surface-2:#1C2128;--border:#21262D;
--text:#C9D1D9;--text-muted:#6E7681;--text-bright:#F0F6FC;
--red:#F85149;--red-bg:rgba(248,81,73,0.07);--red-border:rgba(248,81,73,0.28);
}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;height:100vh;display:flex;align-items:stretch;padding:14px}
.card{width:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative}
.card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--border);border-left:4px solid var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted)}
.topbar-path .dir{color:var(--text-muted)}.topbar-path .file{color:var(--accent);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:20px}
.status{display:flex;align-items:center;gap:5px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.project-label{color:var(--accent);font-weight:700;letter-spacing:1px;font-size:10px}
.card-body{border-left:4px solid var(--accent);flex:1;display:flex;flex-direction:column;padding:0 32px 24px 32px;position:relative}
.header{display:flex;align-items:center;gap:20px;padding-top:24px;padding-bottom:20px}
.avatar{width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--accent);flex-shrink:0;letter-spacing:-1px}
.persona-name{font-size:30px;font-weight:800;color:var(--text-bright);letter-spacing:-.5px;line-height:1.1}
.persona-sub{display:flex;align-items:center;gap:10px;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted)}
.persona-sub .accent{color:var(--accent)}.persona-sub .sep{color:var(--border)}
.quote{border-left:3px solid var(--accent);padding:10px 16px;margin-bottom:20px;font-style:italic;font-size:13.5px;line-height:1.65;color:var(--text-muted);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 6px 6px 0}
.skills-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.skill{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;padding:3px 10px;border-radius:4px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.section-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:9px}
.does-box{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:13px 14px}
.does-box .section-label{color:var(--accent)}
.item-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.item-list li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.4;color:var(--text)}
.item-list li .icon{flex-shrink:0}
.does-box .icon{color:var(--accent)}
.never-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:7px;padding:13px 14px}
.never-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--red);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.never-box .icon{color:var(--red)}
.review-box{background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:7px;padding:12px 16px}
.review-items{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:7px}
.review-item{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.review-item::before{content:'→';color:var(--accent);font-size:11px}
</style>
</head>
<body>
<div class="card">
<div class="topbar">
<div class="topbar-path">
<span class="dir">.claude/personas/</span><span class="file">req_engineer.md</span>
</div>
<div class="topbar-right">
<div class="status"><div class="status-dot"></div><span>active</span></div>
<span class="sep">·</span>
<span>mode: BROWNFIELD</span>
<span class="sep">·</span>
<span class="project-label">FAMILIENARCHIV</span>
</div>
</div>
<div class="card-body">
<div class="header">
<div class="avatar">EL</div>
<div class="name-block">
<div class="persona-name">Elicit</div>
<div class="persona-sub">
<span>Requirements Engineer &amp; Business Analyst</span>
<span class="sep">·</span>
<span class="accent">20+ Jahre XP</span>
<span class="sep">·</span>
<span>BABOK · JTBD · IEEE 830</span>
</div>
</div>
</div>
<div class="quote">
"You don't know what you want until you can't articulate what you don't want."
</div>
<div class="skills-row">
<span class="skill">BABOK v3</span>
<span class="skill">JTBD</span>
<span class="skill">Story Mapping</span>
<span class="skill">Impact Mapping</span>
<span class="skill">IEEE 830</span>
<span class="skill">Gherkin</span>
<span class="skill">5 Whys</span>
</div>
<div class="columns">
<div class="does-box">
<div class="section-label">// does</div>
<ul class="item-list">
<li><span class="icon">✓</span> Strukturiertes Interview führen</li>
<li><span class="icon">✓</span> User Journey in Prosa dokumentieren</li>
<li><span class="icon">✓</span> E2E-Szenarien (Given/When/Then) schreiben</li>
<li><span class="icon">✓</span> Fehlende NFRs und Widersprüche benennen</li>
</ul>
</div>
<div class="never-box">
<div class="never-label">⊘ hard limits</div>
<ul class="item-list">
<li><span class="icon">✗</span> Produktionscode oder SQL schreiben</li>
<li><span class="icon">✗</span> Architektur- oder Hosting-Entscheidungen treffen</li>
<li><span class="icon">✗</span> Pixel-genaue Mockups oder Figma-Files liefern</li>
<li><span class="icon">✗</span> Frameworks empfehlen (nur als Constraint framen)</li>
</ul>
</div>
</div>
<div class="review-box">
<div class="section-label">// review focus</div>
<div class="review-items">
<span class="review-item">Fehlende User Journeys</span>
<span class="review-item">Untestbare Requirements</span>
<span class="review-item">Scope Creep</span>
<span class="review-item">Fehlende NFRs</span>
<span class="review-item">Kein expliziter Out-of-Scope</span>
</div>
</div>
</div>
</div>
</body>
</html>

130
docs/presentation/personas/02-markus-keller.html Normal file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markus Keller — Architect</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--accent:#60A5FA;
--bg:#0D1117;--surface:#161B22;--surface-2:#1C2128;--border:#21262D;
--text:#C9D1D9;--text-muted:#6E7681;--text-bright:#F0F6FC;
--red:#F85149;--red-bg:rgba(248,81,73,0.07);--red-border:rgba(248,81,73,0.28);
}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;height:100vh;display:flex;align-items:stretch;padding:14px}
.card{width:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative}
.card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--border);border-left:4px solid var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted)}
.topbar-path .dir{color:var(--text-muted)}.topbar-path .file{color:var(--accent);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:20px}
.status{display:flex;align-items:center;gap:5px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.project-label{color:var(--accent);font-weight:700;letter-spacing:1px;font-size:10px}
.card-body{border-left:4px solid var(--accent);flex:1;display:flex;flex-direction:column;padding:0 32px 24px 32px;position:relative}
.header{display:flex;align-items:center;gap:20px;padding-top:24px;padding-bottom:20px}
.avatar{width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--accent);flex-shrink:0;letter-spacing:-1px}
.persona-name{font-size:30px;font-weight:800;color:var(--text-bright);letter-spacing:-.5px;line-height:1.1}
.persona-sub{display:flex;align-items:center;gap:10px;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted)}
.persona-sub .accent{color:var(--accent)}.persona-sub .sep{color:var(--border)}
.quote{border-left:3px solid var(--accent);padding:10px 16px;margin-bottom:20px;font-style:italic;font-size:13.5px;line-height:1.65;color:var(--text-muted);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 6px 6px 0}
.skills-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.skill{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;padding:3px 10px;border-radius:4px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.section-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:9px}
.does-box{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:13px 14px}
.does-box .section-label{color:var(--accent)}
.item-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.item-list li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.4;color:var(--text)}
.item-list li .icon{flex-shrink:0}
.does-box .icon{color:var(--accent)}
.never-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:7px;padding:13px 14px}
.never-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--red);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.never-box .icon{color:var(--red)}
.review-box{background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:7px;padding:12px 16px}
.review-items{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:7px}
.review-item{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.review-item::before{content:'→';color:var(--accent);font-size:11px}
</style>
</head>
<body>
<div class="card">
<div class="topbar">
<div class="topbar-path">
<span class="dir">.claude/personas/</span><span class="file">architect.md</span>
</div>
<div class="topbar-right">
<div class="status"><div class="status-dot"></div><span>active</span></div>
<span>·</span>
<span>philosophy: boring-tech-wins</span>
<span>·</span>
<span class="project-label">FAMILIENARCHIV</span>
</div>
</div>
<div class="card-body">
<div class="header">
<div class="avatar">MK</div>
<div class="name-block">
<div class="persona-name">Markus Keller</div>
<div class="persona-sub">
<span>Senior Application Architect</span>
<span class="sep">·</span>
<span class="accent">15+ Jahre XP</span>
<span class="sep">·</span>
<span>@mkeller</span>
</div>
</div>
</div>
<div class="quote">
"Boring technology wins. Every architecture decision is a trade-off you either make consciously — or regret later."
</div>
<div class="skills-row">
<span class="skill">C4 Model</span>
<span class="skill">DDD</span>
<span class="skill">SOLID</span>
<span class="skill">ADRs</span>
<span class="skill">Modular Monolith</span>
<span class="skill">Spring Boot 4</span>
<span class="skill">PostgreSQL</span>
</div>
<div class="columns">
<div class="does-box">
<div class="section-label">// does</div>
<ul class="item-list">
<li><span class="icon">✓</span> ADRs vor jeder strukturellen Entscheidung schreiben</li>
<li><span class="icon">✓</span> Domain-Grenzen definieren und durchsetzen</li>
<li><span class="icon">✓</span> Trade-off-Analysen liefern (nicht nur Meinung)</li>
<li><span class="icon">✓</span> Layering-Verletzungen mit konkreter Alternative benennen</li>
</ul>
</div>
<div class="never-box">
<div class="never-label">⊘ hard limits</div>
<ul class="item-list">
<li><span class="icon">✗</span> Implementierungscode schreiben</li>
<li><span class="icon">✗</span> Microservices ohne konkrete Begründung empfehlen</li>
<li><span class="icon">✗</span> Test-Implementierungen oder UI-Pixel-Entscheidungen</li>
<li><span class="icon">✗</span> „Best practice" als Begründung akzeptieren</li>
</ul>
</div>
</div>
<div class="review-box">
<div class="section-label">// review focus</div>
<div class="review-items">
<span class="review-item">Layering-Verletzungen</span>
<span class="review-item">Cross-Domain-Coupling</span>
<span class="review-item">Fehlende ADRs</span>
<span class="review-item">Premature Complexity</span>
<span class="review-item">Service-Grenzen</span>
</div>
</div>
</div>
</div>
</body>
</html>

131
docs/presentation/personas/03-felix-brandt.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Felix Brandt — Developer</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--accent:#34D399;
--bg:#0D1117;--surface:#161B22;--surface-2:#1C2128;--border:#21262D;
--text:#C9D1D9;--text-muted:#6E7681;--text-bright:#F0F6FC;
--red:#F85149;--red-bg:rgba(248,81,73,0.07);--red-border:rgba(248,81,73,0.28);
}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;height:100vh;display:flex;align-items:stretch;padding:14px}
.card{width:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative}
.card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;border-bottom:1px solid var(--border);border-left:4px solid var(--accent);font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--text-muted)}
.topbar-path .dir{color:var(--text-muted)}.topbar-path .file{color:var(--accent);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:20px}
.status{display:flex;align-items:center;gap:5px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.project-label{color:var(--accent);font-weight:700;letter-spacing:1px;font-size:14px}
.card-body{border-left:4px solid var(--accent);flex:1;display:flex;flex-direction:column;padding:0 40px 28px 40px;position:relative}
.header{display:flex;align-items:center;gap:24px;padding-top:28px;padding-bottom:22px}
.avatar{width:96px;height:96px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:700;color:var(--accent);flex-shrink:0;letter-spacing:-1px}
.persona-name{font-size:42px;font-weight:800;color:var(--text-bright);letter-spacing:-.5px;line-height:1.1}
.persona-sub{display:flex;align-items:center;gap:10px;margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--text-muted)}
.persona-sub .accent{color:var(--accent)}.persona-sub .sep{color:var(--border)}
.quote{border-left:3px solid var(--accent);padding:14px 20px;margin-bottom:24px;font-style:italic;font-size:19px;line-height:1.65;color:var(--text-muted);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 6px 6px 0}
.skills-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.skill{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:500;padding:5px 14px;border-radius:4px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.section-label{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:11px}
.does-box{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:16px 18px}
.does-box .section-label{color:var(--accent)}
.item-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.item-list li{display:flex;align-items:flex-start;gap:10px;font-size:17px;line-height:1.4;color:var(--text)}
.item-list li .icon{flex-shrink:0}
.does-box .icon{color:var(--accent)}
.never-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:7px;padding:16px 18px}
.never-label{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--red);margin-bottom:11px;display:flex;align-items:center;gap:6px}
.never-box .icon{color:var(--red)}
.review-box{background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:7px;padding:16px 20px}
.review-items{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:9px}
.review-item{font-size:16px;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.review-item::before{content:'→';color:var(--accent);font-size:14px}
</style>
</head>
<body>
<div class="card">
<div class="topbar">
<div class="topbar-path">
<span class="dir">.claude/personas/</span><span class="file">developer.md</span>
</div>
<div class="topbar-right">
<div class="status"><div class="status-dot"></div><span>active</span></div>
<span>·</span>
<span>red_step: NEVER_SKIP</span>
<span>·</span>
<span class="project-label">FAMILIENARCHIV</span>
</div>
</div>
<div class="card-body">
<div class="header">
<div class="avatar">FB</div>
<div class="name-block">
<div class="persona-name">Felix Brandt</div>
<div class="persona-sub">
<span>Senior Fullstack Developer</span>
<span class="sep">·</span>
<span class="accent">8+ Jahre XP</span>
<span class="sep">·</span>
<span>@felixbrandt</span>
<span class="sep">·</span>
<span>SvelteKit · Spring Boot · TDD</span>
</div>
</div>
</div>
<div class="quote">
"If the test was written after the code, it's not a test. It's documentation."
</div>
<div class="skills-row">
<span class="skill">TDD</span>
<span class="skill">Spring Boot 4</span>
<span class="skill">SvelteKit 5</span>
<span class="skill">Clean Code</span>
<span class="skill">SOLID</span>
<span class="skill">Refactoring</span>
<span class="skill">TypeScript</span>
</div>
<div class="columns">
<div class="does-box">
<div class="section-label">// does</div>
<ul class="item-list">
<li><span class="icon">✓</span> Failing test schreiben — immer zuerst</li>
<li><span class="icon">✓</span> Red/Green/Refactor-Zyklus konsequent einhalten</li>
<li><span class="icon">✓</span> Test + Implementierung im selben atomaren Commit</li>
<li><span class="icon">✓</span> Zeilennummern in jedem Review-Kommentar</li>
</ul>
</div>
<div class="never-box">
<div class="never-label">⊘ hard limits</div>
<ul class="item-list">
<li><span class="icon">✗</span> Test nachträglich schreiben um Code zu rechtfertigen</li>
<li><span class="icon">✗</span> Red-Schritt überspringen — auch bei „offensichtlichen" Fixes</li>
<li><span class="icon">✗</span> Mehrere logische Changes in einem einzigen Commit bündeln</li>
</ul>
</div>
</div>
<div class="review-box">
<div class="section-label">// review focus</div>
<div class="review-items">
<span class="review-item">TDD-Compliance</span>
<span class="review-item">Naming &amp; Abstraktionen</span>
<span class="review-item">SOLID-Verletzungen</span>
<span class="review-item">Dead Code</span>
<span class="review-item">Commit-Struktur</span>
</div>
</div>
</div>
</div>
</body>
</html>

129
docs/presentation/personas/04-leonie-voss.html Normal file
View File

@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leonie Voss — UX Designer</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--accent:#A78BFA;
--bg:#0D1117;--surface:#161B22;--surface-2:#1C2128;--border:#21262D;
--text:#C9D1D9;--text-muted:#6E7681;--text-bright:#F0F6FC;
--red:#F85149;--red-bg:rgba(248,81,73,0.07);--red-border:rgba(248,81,73,0.28);
}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;height:100vh;display:flex;align-items:stretch;padding:14px}
.card{width:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative}
.card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--border);border-left:4px solid var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted)}
.topbar-path .dir{color:var(--text-muted)}.topbar-path .file{color:var(--accent);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:20px}
.status{display:flex;align-items:center;gap:5px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.project-label{color:var(--accent);font-weight:700;letter-spacing:1px;font-size:10px}
.card-body{border-left:4px solid var(--accent);flex:1;display:flex;flex-direction:column;padding:0 32px 24px 32px;position:relative}
.header{display:flex;align-items:center;gap:20px;padding-top:24px;padding-bottom:20px}
.avatar{width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--accent);flex-shrink:0;letter-spacing:-1px}
.persona-name{font-size:30px;font-weight:800;color:var(--text-bright);letter-spacing:-.5px;line-height:1.1}
.persona-sub{display:flex;align-items:center;gap:10px;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted)}
.persona-sub .accent{color:var(--accent)}.persona-sub .sep{color:var(--border)}
.quote{border-left:3px solid var(--accent);padding:10px 16px;margin-bottom:20px;font-style:italic;font-size:13.5px;line-height:1.65;color:var(--text-muted);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 6px 6px 0}
.skills-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.skill{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;padding:3px 10px;border-radius:4px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.section-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:9px}
.does-box{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:13px 14px}
.does-box .section-label{color:var(--accent)}
.item-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.item-list li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.4;color:var(--text)}
.item-list li .icon{flex-shrink:0}
.does-box .icon{color:var(--accent)}
.never-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:7px;padding:13px 14px}
.never-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--red);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.never-box .icon{color:var(--red)}
.review-box{background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:7px;padding:12px 16px}
.review-items{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:7px}
.review-item{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.review-item::before{content:'→';color:var(--accent);font-size:11px}
</style>
</head>
<body>
<div class="card">
<div class="topbar">
<div class="topbar-path">
<span class="dir">.claude/personas/</span><span class="file">ui_expert.md</span>
</div>
<div class="topbar-right">
<div class="status"><div class="status-dot"></div><span>active</span></div>
<span>·</span>
<span>a11y: WCAG_2.1_AA</span>
<span>·</span>
<span class="project-label">FAMILIENARCHIV</span>
</div>
</div>
<div class="card-body">
<div class="header">
<div class="avatar">LV</div>
<div class="name-block">
<div class="persona-name">Leonie Voss</div>
<div class="persona-sub">
<span>UI/UX Design Lead &amp; Accessibility Advocate</span>
<span class="sep">·</span>
<span class="accent">12+ Jahre XP</span>
<span class="sep">·</span>
<span>@leonievoss</span>
</div>
</div>
</div>
<div class="quote">
"Design for the hardest constraint first. If it works for a 67-year-old in bright sunlight, it works for everyone."
</div>
<div class="skills-row">
<span class="skill">WCAG 2.1 AA</span>
<span class="skill">Tailwind CSS 4</span>
<span class="skill">Figma</span>
<span class="skill">Responsive Design</span>
<span class="skill">Brand Systems</span>
<span class="skill">ARIA</span>
<span class="skill">Svelte 5</span>
</div>
<div class="columns">
<div class="does-box">
<div class="section-label">// does</div>
<ul class="item-list">
<li><span class="icon">✓</span> Kontrast-Verhältnisse messen (min. 4.5:1 Text)</li>
<li><span class="icon">✓</span> Touch-Targets auf ≥44px prüfen</li>
<li><span class="icon">✓</span> Brand-Compliance (Navy/Mint/Sand) sicherstellen</li>
<li><span class="icon">✓</span> Jeden Critique mit konkretem Fix liefern</li>
</ul>
</div>
<div class="never-box">
<div class="never-label">⊘ hard limits</div>
<ul class="item-list">
<li><span class="icon">✗</span> Backend-Code oder Datenbank-Design</li>
<li><span class="icon">✗</span> Performance-Profiling oder Infrastruktur</li>
<li><span class="icon">✗</span> Accessibility-Mängel ohne Fix-Vorschlag benennen</li>
</ul>
</div>
</div>
<div class="review-box">
<div class="section-label">// review focus</div>
<div class="review-items">
<span class="review-item">Kontrast-Verhältnisse</span>
<span class="review-item">Touch Targets ≥44px</span>
<span class="review-item">Keyboard Navigation</span>
<span class="review-item">Responsive Breakpoints</span>
<span class="review-item">Fokus-Ringe sichtbar</span>
</div>
</div>
</div>
</div>
</body>
</html>

129
docs/presentation/personas/05-sara-holt.html Normal file
View File

@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sara Holt — QA Engineer</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--accent:#FB923C;
--bg:#0D1117;--surface:#161B22;--surface-2:#1C2128;--border:#21262D;
--text:#C9D1D9;--text-muted:#6E7681;--text-bright:#F0F6FC;
--red:#F85149;--red-bg:rgba(248,81,73,0.07);--red-border:rgba(248,81,73,0.28);
}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;height:100vh;display:flex;align-items:stretch;padding:14px}
.card{width:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative}
.card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--border);border-left:4px solid var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted)}
.topbar-path .dir{color:var(--text-muted)}.topbar-path .file{color:var(--accent);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:20px}
.status{display:flex;align-items:center;gap:5px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.project-label{color:var(--accent);font-weight:700;letter-spacing:1px;font-size:10px}
.card-body{border-left:4px solid var(--accent);flex:1;display:flex;flex-direction:column;padding:0 32px 24px 32px;position:relative}
.header{display:flex;align-items:center;gap:20px;padding-top:24px;padding-bottom:20px}
.avatar{width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--accent);flex-shrink:0;letter-spacing:-1px}
.persona-name{font-size:30px;font-weight:800;color:var(--text-bright);letter-spacing:-.5px;line-height:1.1}
.persona-sub{display:flex;align-items:center;gap:10px;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted)}
.persona-sub .accent{color:var(--accent)}.persona-sub .sep{color:var(--border)}
.quote{border-left:3px solid var(--accent);padding:10px 16px;margin-bottom:20px;font-style:italic;font-size:13.5px;line-height:1.65;color:var(--text-muted);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 6px 6px 0}
.skills-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.skill{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;padding:3px 10px;border-radius:4px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.section-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:9px}
.does-box{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:13px 14px}
.does-box .section-label{color:var(--accent)}
.item-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.item-list li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.4;color:var(--text)}
.item-list li .icon{flex-shrink:0}
.does-box .icon{color:var(--accent)}
.never-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:7px;padding:13px 14px}
.never-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--red);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.never-box .icon{color:var(--red)}
.review-box{background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:7px;padding:12px 16px}
.review-items{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:7px}
.review-item{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.review-item::before{content:'→';color:var(--accent);font-size:11px}
</style>
</head>
<body>
<div class="card">
<div class="topbar">
<div class="topbar-path">
<span class="dir">.claude/personas/</span><span class="file">tester.md</span>
</div>
<div class="topbar-right">
<div class="status"><div class="status-dot"></div><span>active</span></div>
<span>·</span>
<span>flaky_tests: NOT_ACCEPTABLE</span>
<span>·</span>
<span class="project-label">FAMILIENARCHIV</span>
</div>
</div>
<div class="card-body">
<div class="header">
<div class="avatar">SH</div>
<div class="name-block">
<div class="persona-name">Sara Holt</div>
<div class="persona-sub">
<span>Senior QA Engineer &amp; Test Automation Specialist</span>
<span class="sep">·</span>
<span class="accent">10+ Jahre XP</span>
<span class="sep">·</span>
<span>@saraholt</span>
</div>
</div>
</div>
<div class="quote">
"A passing test that was never failing is a lie with a green checkmark."
</div>
<div class="skills-row">
<span class="skill">Playwright</span>
<span class="skill">Vitest</span>
<span class="skill">JUnit 5</span>
<span class="skill">Testcontainers</span>
<span class="skill">Test Pyramid</span>
<span class="skill">Mutation Testing</span>
<span class="skill">@WebMvcTest</span>
</div>
<div class="columns">
<div class="does-box">
<div class="section-label">// does</div>
<ul class="item-list">
<li><span class="icon">✓</span> E2E-Szenarien aus Issue-Gherkin ableiten</li>
<li><span class="icon">✓</span> Test-Pyramide auf allen drei Ebenen durchsetzen</li>
<li><span class="icon">✓</span> Randfälle und Fehlerpfade explizit benennen</li>
<li><span class="icon">✓</span> Arrange-Act-Assert in jedem Test sicherstellen</li>
</ul>
</div>
<div class="never-box">
<div class="never-label">⊘ hard limits</div>
<ul class="item-list">
<li><span class="icon">✗</span> Produktionscode oder Deployments schreiben</li>
<li><span class="icon">✗</span> Flaky Tests akzeptieren — auch unter Zeitdruck</li>
<li><span class="icon">✗</span> Test-Namen wie <code>test1()</code> oder <code>shouldWork()</code></li>
</ul>
</div>
</div>
<div class="review-box">
<div class="section-label">// review focus</div>
<div class="review-items">
<span class="review-item">Fehlende Randfälle</span>
<span class="review-item">Flaky-Test-Muster</span>
<span class="review-item">Ungetestete Happy Paths</span>
<span class="review-item">AAA-Verletzungen</span>
<span class="review-item">Kein Red-Beweis</span>
</div>
</div>
</div>
</div>
</body>
</html>

135
docs/presentation/personas/06-nora-steiner.html Normal file
View File

@@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nora "NullX" Steiner — Security Engineer</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--accent:#F87171;
--bg:#0D1117;--surface:#161B22;--surface-2:#1C2128;--border:#21262D;
--text:#C9D1D9;--text-muted:#6E7681;--text-bright:#F0F6FC;
--red:#F85149;--red-bg:rgba(248,81,73,0.07);--red-border:rgba(248,81,73,0.28);
}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;height:100vh;display:flex;align-items:stretch;padding:14px}
.card{width:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative}
.card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--border);border-left:4px solid var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted)}
.topbar-path .dir{color:var(--text-muted)}.topbar-path .file{color:var(--accent);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:20px}
.status{display:flex;align-items:center;gap:5px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.project-label{color:var(--accent);font-weight:700;letter-spacing:1px;font-size:10px}
.card-body{border-left:4px solid var(--accent);flex:1;display:flex;flex-direction:column;padding:0 32px 24px 32px;position:relative}
.header{display:flex;align-items:center;gap:20px;padding-top:24px;padding-bottom:20px}
.avatar{width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--accent);flex-shrink:0;letter-spacing:-1px}
.persona-name{font-size:30px;font-weight:800;color:var(--text-bright);letter-spacing:-.5px;line-height:1.1}
.persona-sub{display:flex;align-items:center;gap:10px;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted)}
.persona-sub .accent{color:var(--accent)}.persona-sub .sep{color:var(--border)}
.quote{border-left:3px solid var(--accent);padding:10px 16px;margin-bottom:20px;font-style:italic;font-size:13.5px;line-height:1.65;color:var(--text-muted);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 6px 6px 0}
.skills-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.skill{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;padding:3px 10px;border-radius:4px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.section-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:9px}
.does-box{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:13px 14px}
.does-box .section-label{color:var(--accent)}
.item-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.item-list li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.4;color:var(--text)}
.item-list li .icon{flex-shrink:0}
.does-box .icon{color:var(--accent)}
.never-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:7px;padding:13px 14px}
.never-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--red);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.never-box .icon{color:var(--red)}
.review-box{background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:7px;padding:12px 16px}
.review-items{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:7px}
.review-item{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.review-item::before{content:'→';color:var(--accent);font-size:11px}
.cert-badges{display:flex;gap:8px;margin-top:4px}
.cert{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 8px;border-radius:3px;background:color-mix(in srgb,var(--accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);font-weight:700}
</style>
</head>
<body>
<div class="card">
<div class="topbar">
<div class="topbar-path">
<span class="dir">.claude/personas/</span><span class="file">security_expert.md</span>
</div>
<div class="topbar-right">
<div class="status"><div class="status-dot"></div><span>active</span></div>
<span>·</span>
<span>mindset: adversarial</span>
<span>·</span>
<span class="project-label">FAMILIENARCHIV</span>
</div>
</div>
<div class="card-body">
<div class="header">
<div class="avatar">N0</div>
<div class="name-block">
<div class="persona-name">Nora <span style="color:var(--accent)">"NullX"</span> Steiner</div>
<div class="persona-sub">
<span>Application Security Engineer · Ethical Hacker</span>
<span class="sep">·</span>
<span class="accent">8+ Jahre XP</span>
<span class="sep">·</span>
<span>@nullx</span>
</div>
<div class="cert-badges">
<span class="cert">OSWE</span>
<span class="cert">BSCP</span>
</div>
</div>
</div>
<div class="quote">
"Trust no one. Validate everything. Especially the things that look safe."
</div>
<div class="skills-row">
<span class="skill">OWASP Top 10</span>
<span class="skill">Spring Security</span>
<span class="skill">Burp Suite</span>
<span class="skill">SQL Injection</span>
<span class="skill">XSS</span>
<span class="skill">JWT</span>
<span class="skill">CSRF</span>
</div>
<div class="columns">
<div class="does-box">
<div class="section-label">// does</div>
<ul class="item-list">
<li><span class="icon">✓</span> Auth-Audit bei jedem neuen Endpoint</li>
<li><span class="icon">✓</span> Jede Lücke mit Exploit-Szenario und Fix liefern</li>
<li><span class="icon">✓</span> Sicherheitskommentare mit Threat-Model-Kontext</li>
<li><span class="icon">✓</span> Entwickler aufklären — niemals beschämen</li>
</ul>
</div>
<div class="never-box">
<div class="never-label">⊘ hard limits</div>
<ul class="item-list">
<li><span class="icon">✗</span> Feature-Implementierung oder UI-Entscheidungen</li>
<li><span class="icon">✗</span> Security-Findings ohne Fix-Vorschlag posten</li>
<li><span class="icon">✗</span> Performance-Optimierungen bewerten</li>
</ul>
</div>
</div>
<div class="review-box">
<div class="section-label">// review focus</div>
<div class="review-items">
<span class="review-item">@RequirePermission auf jedem Endpoint</span>
<span class="review-item">Injection-Vektoren</span>
<span class="review-item">Sensitive Data Exposure</span>
<span class="review-item">Session Handling</span>
<span class="review-item">Actuator-Endpoints</span>
</div>
</div>
</div>
</div>
</body>
</html>

129
docs/presentation/personas/07-tobias-wendt.html Normal file
View File

@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tobias "tobi" Wendt — DevOps</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--accent:#22D3EE;
--bg:#0D1117;--surface:#161B22;--surface-2:#1C2128;--border:#21262D;
--text:#C9D1D9;--text-muted:#6E7681;--text-bright:#F0F6FC;
--red:#F85149;--red-bg:rgba(248,81,73,0.07);--red-border:rgba(248,81,73,0.28);
}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;height:100vh;display:flex;align-items:stretch;padding:14px}
.card{width:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative}
.card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--border);border-left:4px solid var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted)}
.topbar-path .dir{color:var(--text-muted)}.topbar-path .file{color:var(--accent);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:20px}
.status{display:flex;align-items:center;gap:5px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.project-label{color:var(--accent);font-weight:700;letter-spacing:1px;font-size:10px}
.card-body{border-left:4px solid var(--accent);flex:1;display:flex;flex-direction:column;padding:0 32px 24px 32px;position:relative}
.header{display:flex;align-items:center;gap:20px;padding-top:24px;padding-bottom:20px}
.avatar{width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--accent);flex-shrink:0;letter-spacing:-1px}
.persona-name{font-size:30px;font-weight:800;color:var(--text-bright);letter-spacing:-.5px;line-height:1.1}
.persona-sub{display:flex;align-items:center;gap:10px;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted)}
.persona-sub .accent{color:var(--accent)}.persona-sub .sep{color:var(--border)}
.quote{border-left:3px solid var(--accent);padding:10px 16px;margin-bottom:20px;font-style:italic;font-size:13.5px;line-height:1.65;color:var(--text-muted);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 6px 6px 0}
.skills-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.skill{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;padding:3px 10px;border-radius:4px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.section-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:9px}
.does-box{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:13px 14px}
.does-box .section-label{color:var(--accent)}
.item-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.item-list li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.4;color:var(--text)}
.item-list li .icon{flex-shrink:0}
.does-box .icon{color:var(--accent)}
.never-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:7px;padding:13px 14px}
.never-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--red);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.never-box .icon{color:var(--red)}
.review-box{background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:7px;padding:12px 16px}
.review-items{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:7px}
.review-item{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.review-item::before{content:'→';color:var(--accent);font-size:11px}
</style>
</head>
<body>
<div class="card">
<div class="topbar">
<div class="topbar-path">
<span class="dir">.claude/personas/</span><span class="file">devops.md</span>
</div>
<div class="topbar-right">
<div class="status"><div class="status-dot"></div><span>active</span></div>
<span>·</span>
<span>complexity: LIABILITY_NOT_FEATURE</span>
<span>·</span>
<span class="project-label">FAMILIENARCHIV</span>
</div>
</div>
<div class="card-body">
<div class="header">
<div class="avatar">TW</div>
<div class="name-block">
<div class="persona-name">Tobias <span style="color:var(--accent)">"tobi"</span> Wendt</div>
<div class="persona-sub">
<span>DevOps &amp; Platform Engineer</span>
<span class="sep">·</span>
<span class="accent">10+ Jahre XP</span>
<span class="sep">·</span>
<span>@tobiwendt</span>
</div>
</div>
</div>
<div class="quote">
"Every added tool is a new failure mode. If it's not in Docker Compose, it doesn't exist."
</div>
<div class="skills-row">
<span class="skill">Docker Compose</span>
<span class="skill">Gitea Actions</span>
<span class="skill">PostgreSQL Ops</span>
<span class="skill">MinIO</span>
<span class="skill">Caddy</span>
<span class="skill">Renovate</span>
<span class="skill">Flyway</span>
</div>
<div class="columns">
<div class="does-box">
<div class="section-label">// does</div>
<ul class="item-list">
<li><span class="icon">✓</span> Docker Image-Tags auf spezifische Versionen pinnen</li>
<li><span class="icon">✓</span> Health Checks für jeden Service definieren</li>
<li><span class="icon">✓</span> Rollback-Strategie in jedem Deployment-Change</li>
<li><span class="icon">✓</span> Komplexität mit konkreter Begründung rechtfertigen</li>
</ul>
</div>
<div class="never-box">
<div class="never-label">⊘ hard limits</div>
<ul class="item-list">
<li><span class="icon">✗</span> Anwendungscode oder Business-Logik schreiben</li>
<li><span class="icon">✗</span> Kafka/RabbitMQ empfehlen bevor PostgreSQL ausgeschöpft</li>
<li><span class="icon">✗</span> Microservices ohne messbaren Scaling-Bedarf</li>
</ul>
</div>
</div>
<div class="review-box">
<div class="section-label">// review focus</div>
<div class="review-items">
<span class="review-item">Fehlende Health Checks</span>
<span class="review-item">Hardcoded Secrets</span>
<span class="review-item">Ungepinnte Image-Tags</span>
<span class="review-item">Kein Rollback-Plan</span>
<span class="review-item">Premature Infra-Complexity</span>
</div>
</div>
</div>
</div>
</body>
</html>

241
docs/presentation/personas/_card.css Normal file
View File

@@ -0,0 +1,241 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0D1117;
--surface: #161B22;
--surface-2: #1C2128;
--border: #21262D;
--text: #C9D1D9;
--text-muted: #6E7681;
--text-bright: #F0F6FC;
--red: #F85149;
--red-bg: rgba(248,81,73,0.07);
--red-border: rgba(248,81,73,0.28);
/* --accent set per file */
}
body {
background: var(--bg);
color: var(--text);
font-family: 'Inter', system-ui, sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
}
/* ── Card shell ── */
.card {
width: 100%;
max-width: 1080px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
position: relative;
}
/* dot grid */
.card::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 26px 26px;
pointer-events: none;
border-radius: 12px;
}
/* accent left stripe */
.card-body {
border-left: 4px solid var(--accent);
padding: 0 32px 28px 32px;
position: relative;
}
/* ── Top bar ── */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 32px 14px 32px;
border-bottom: 1px solid var(--border);
border-left: 4px solid var(--accent);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-muted);
position: relative;
}
.topbar-path { display: flex; align-items: center; gap: 6px; }
.topbar-path .dir { color: var(--text-muted); }
.topbar-path .file { color: var(--accent); font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.status { display: flex; align-items: center; gap: 5px; }
.status-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 6px var(--accent);
animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
0%,100% { opacity: 1; }
50% { opacity: 0.4; }
}
.project-label { color: var(--accent); font-weight: 700; letter-spacing: 1px; font-size: 10px; }
/* ── Header ── */
.header {
display: flex;
align-items: center;
gap: 20px;
padding-top: 24px;
padding-bottom: 20px;
}
.avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 14%, transparent);
border: 2px solid var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 22px;
font-weight: 700;
color: var(--accent);
flex-shrink: 0;
letter-spacing: -1px;
}
.name-block {}
.persona-name {
font-size: 30px;
font-weight: 800;
color: var(--text-bright);
letter-spacing: -0.5px;
line-height: 1.1;
}
.persona-sub {
display: flex;
align-items: center;
gap: 10px;
margin-top: 5px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--text-muted);
}
.persona-sub .accent { color: var(--accent); }
.persona-sub .sep { color: var(--border); }
.persona-sub .handle { color: var(--text-muted); }
/* ── Quote ── */
.quote {
border-left: 3px solid var(--accent);
padding: 10px 16px;
margin-bottom: 20px;
font-style: italic;
font-size: 13.5px;
line-height: 1.65;
color: var(--text-muted);
background: color-mix(in srgb, var(--accent) 5%, transparent);
border-radius: 0 6px 6px 0;
}
.quote em { color: color-mix(in srgb, var(--accent) 80%, white); font-style: normal; }
/* ── Skills ── */
.skills-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.skill {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
padding: 3px 10px;
border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent);
}
/* ── Two-column ── */
.columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 16px;
}
.section-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-muted);
margin-bottom: 9px;
}
.does-box {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 7px;
padding: 13px 14px;
}
.does-box .section-label { color: var(--accent); }
.item-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.item-list li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12.5px; line-height: 1.4; color: var(--text);
}
.item-list li .icon { flex-shrink: 0; font-style: normal; }
.does-box .icon { color: var(--accent); }
.never-box {
background: var(--red-bg);
border: 1px solid var(--red-border);
border-radius: 7px;
padding: 13px 14px;
}
.never-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--red);
margin-bottom: 9px;
display: flex; align-items: center; gap: 6px;
}
.never-box .icon { color: var(--red); }
/* ── Review Focus ── */
.review-box {
background: color-mix(in srgb, var(--accent) 7%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
border-radius: 7px;
padding: 12px 16px;
}
.review-items {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 7px;
}
.review-item {
font-size: 12px;
color: var(--text-muted);
display: flex; align-items: center; gap: 5px;
}
.review-item::before { content: '→'; color: var(--accent); font-size: 11px; }