136 lines
7.9 KiB
HTML
136 lines
7.9 KiB
HTML
<!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>
|