130 lines
7.4 KiB
HTML
130 lines
7.4 KiB
HTML
<!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 & 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>
|