stack.html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Interactive engineering stack and capability matrix for Anne Beth Andersen."><title>Engineering Stack | AB</title><link rel="stylesheet" href="style.css"><style>
.stack-shell{padding:72px 0 110px}.stack-hero{max-width:920px}.stack-hero h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.92;letter-spacing:-.065em;margin:0}.stack-hero h1 span{color:var(--accent)}.stack-hero p{color:var(--muted);font-size:1.05rem;line-height:1.7}.stack-tools{position:sticky;top:72px;z-index:5;margin:28px 0 18px;padding:12px;border:1px solid var(--border);border-radius:16px;background:rgba(7,16,29,.88);backdrop-filter:blur(14px);display:grid;grid-template-columns:1fr auto;gap:10px}.stack-search{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.035);color:var(--text);font:inherit}.stack-search:focus{outline:2px solid var(--accent);outline-offset:2px}.stack-count{align-self:center;color:var(--muted);font:700 .7rem ui-monospace,monospace;white-space:nowrap}.stack-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.stack-filter{border:1px solid var(--border);background:rgba(255,255,255,.035);color:var(--text);padding:8px 11px;border-radius:999px;cursor:pointer;font-weight:750}.stack-filter.active,.stack-filter:hover{border-color:var(--accent);color:var(--accent)}.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.stack-card{position:relative;padding:20px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,rgba(16,29,48,.75),rgba(7,16,29,.55));transition:.18s}.stack-card:hover,.stack-card:focus-within{transform:translateY(-3px);border-color:rgba(112,224,177,.55);box-shadow:0 18px 50px rgba(0,0,0,.18)}.stack-card[data-hidden="true"]{display:none}.stack-card small{color:var(--accent);font:800 .62rem ui-monospace,monospace;letter-spacing:.11em}.stack-card h2{margin:9px 0 7px;font-size:1.08rem}.stack-card p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.55}.stack-card .evidence{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.stack-card .evidence span{padding:5px 8px;border:1px solid var(--border);border-radius:999px;color:#cbd6e7;font-size:.65rem}.stack-card a{display:inline-block;margin-top:15px;color:#cbd9ff;font-size:.72rem;font-weight:800}.status-pill{position:absolute;top:17px;right:17px;padding:5px 7px;border:1px solid var(--border);border-radius:999px;font:800 .58rem ui-monospace,monospace}.status-pill.implemented{color:var(--accent)}.status-pill.demo{color:#cbd9ff}.status-pill.boundary{color:#ffd78a}.stack-note{margin-top:24px;padding:16px;border-left:3px solid var(--accent2);background:rgba(125,167,255,.06);color:var(--muted);font-size:.78rem;line-height:1.6}.stack-empty{display:none;padding:25px;border:1px dashed var(--border);border-radius:14px;color:var(--muted);text-align:center}.stack-empty.show{display:block}@media(max-width:900px){.stack-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.stack-tools{grid-template-columns:1fr;top:60px}.stack-grid{grid-template-columns:1fr}.stack-count{justify-self:start}}
</style></head><body><header class="site-header"><nav class="nav container"><a class="brand" href="index.html">AB<span>.</span></a><div class="nav-links"><a href="index.html">Profile</a><a href="projects.html">Portfolio</a><a href="stack.html" aria-current="page">Stack</a><a href="engineering-map.html">Engineering Map</a><a href="evidence-lab.html">Research</a><a href="game-lab.html">Interactive Lab</a></div><a class="nav-cta" href="https://github.com/abla86" target="_blank" rel="noopener">GitHub ↗</a></nav></header><main class="stack-shell"><div class="container"><section class="stack-hero"><p class="eyebrow">ENGINEERING STACK · 2026</p><h1>Technology is only useful when there is <span>evidence.</span></h1><p>This matrix maps the technologies and competencies identified from the target engineering roles to the most natural canonical project. “Implemented” means there is concrete repository evidence; “Demo” means a bounded technical demonstration; “Boundary” means it is deliberately not claimed yet.</p></section><div class="stack-tools"><input id="stack-search" class="stack-search" type="search" placeholder="Search C#, Node, security, data, requirements…" aria-label="Search engineering capabilities"><span id="stack-count" class="stack-count"></span></div><div class="stack-filters" role="toolbar" aria-label="Filter engineering capabilities"><button class="stack-filter active" type="button" data-filter="all">All</button><button class="stack-filter" type="button" data-filter="frontend">Frontend</button><button class="stack-filter" type="button" data-filter="backend">Backend</button><button class="stack-filter" type="button" data-filter="platform">Platform</button><button class="stack-filter" type="button" data-filter="security">Security</button><button class="stack-filter" type="button" data-filter="data">Data / AI</button><button class="stack-filter" type="button" data-filter="engineering">Engineering</button></div><section class="stack-grid" id="stack-grid" aria-live="polite">
<article class="stack-card" data-group="frontend" data-status="implemented" data-search="react typescript frontend ui full stack"><span class="status-pill implemented">IMPLEMENTED</span><small>FRONTEND</small><h2>React / TypeScript</h2><p>Interactive browser applications, typed UI state and reusable interfaces.</p><div class="evidence"><span>React</span><span>TypeScript</span><span>UI</span></div><a href="https://github.com/abla86/developer-portfolio">Portfolio source ↗</a></article>
<article class="stack-card" data-group="frontend" data-status="demo" data-search="angular frontend web ui full stack"><span class="status-pill demo">DEMO TARGET</span><small>FRONTEND</small><h2>Angular</h2><p>Natural fit for a dedicated client against the existing API systems; kept as a bounded frontend demonstration rather than mixed into unrelated applications.</p><div class="evidence"><span>Angular</span><span>REST</span><span>UI</span></div><a href="engineering-map.html">Engineering evidence ↗</a></article>
<article class="stack-card" data-group="frontend" data-status="demo" data-search="blazor c sharp dotnet ui web full stack"><span class="status-pill demo">DEMO TARGET</span><small>FRONTEND</small><h2>Blazor</h2><p>Natural .NET UI companion for the HealthTech/API family and a stronger demonstration of end-to-end C#.</p><div class="evidence"><span>Blazor</span><span>C#</span><span>.NET</span></div><a href="https://github.com/abla86/HealthTechDeviceApi">HealthTech API ↗</a></article>
<article class="stack-card" data-group="backend" data-status="implemented" data-search="c sharp dotnet aspnet core api backend web services database"><span class="status-pill implemented">IMPLEMENTED</span><small>BACKEND</small><h2>C# / .NET / ASP.NET Core</h2><p>Public healthcare API work with backend services, validation, tests, Docker and CI.</p><div class="evidence"><span>C#</span><span>.NET</span><span>ASP.NET Core</span><span>API</span></div><a href="https://github.com/abla86/HealthTechDeviceApi">HealthTechDeviceApi ↗</a></article>
<article class="stack-card" data-group="backend" data-status="implemented" data-search="node nodejs javascript typescript api event driven web services backend kafka"><span class="status-pill implemented">IMPLEMENTED</span><small>BACKEND</small><h2>Node.js / TypeScript</h2><p>EventForge uses a Node/TypeScript API as an actual service boundary in a polyglot event-driven system.</p><div class="evidence"><span>Node.js</span><span>TypeScript</span><span>Kafka</span><span>API</span></div><a href="https://github.com/abla86/AB-Engineering-Lab/tree/main/projects/eventforge">EventForge ↗</a></article>
<article class="stack-card" data-group="backend" data-status="implemented" data-search="python fastapi api backend pydantic"><span class="status-pill implemented">IMPLEMENTED</span><small>BACKEND</small><h2>Python / FastAPI</h2><p>Typed API boundaries and data tooling are represented in the engineering lab and analytics projects.</p><div class="evidence"><span>Python</span><span>FastAPI</span><span>Pydantic</span></div><a href="https://github.com/abla86/AB-Engineering-Lab">Engineering Lab ↗</a></article>
<article class="stack-card" data-group="backend" data-status="implemented" data-search="java kotlin go kafka event consumer backend"><span class="status-pill implemented">IMPLEMENTED</span><small>POLYGLOT BACKEND</small><h2>Java / Kotlin / Go</h2><p>EventForge uses separate JVM and Go consumers to demonstrate real service boundaries rather than language-name badges.</p><div class="evidence"><span>Java</span><span>Kotlin</span><span>Go</span><span>Kafka</span></div><a href="https://github.com/abla86/AB-Engineering-Lab/tree/main/projects/eventforge">EventForge ↗</a></article>
<article class="stack-card" data-group="platform" data-status="implemented" data-search="docker kubernetes azure cicd cloud devops"><span class="status-pill implemented">IMPLEMENTED</span><small>PLATFORM</small><h2>Docker / Kubernetes / Azure</h2><p>Cloud platform engineering, containers, Kubernetes, infrastructure and automated delivery are demonstrated publicly.</p><div class="evidence"><span>Docker</span><span>Kubernetes</span><span>Azure</span><span>CI/CD</span></div><a href="https://github.com/abla86/azure-kubernetes-showcase">Azure Showcase ↗</a></article>
<article class="stack-card" data-group="platform" data-status="implemented" data-search="aspire .net aspire distributed orchestration postgres kafka node go"><span class="status-pill implemented">IMPLEMENTED</span><small>DISTRIBUTED SYSTEMS</small><h2>.NET Aspire</h2><p>EventForge models PostgreSQL, Kafka, Node API and Go consumer in one development-time distributed application model.</p><div class="evidence"><span>Aspire</span><span>PostgreSQL</span><span>Kafka</span></div><a href="https://github.com/abla86/AB-Engineering-Lab/tree/main/projects/eventforge">AppHost ↗</a></article>
<article class="stack-card" data-group="backend" data-status="implemented" data-search="wolverine kafka message handler c sharp dotnet messaging"><span class="status-pill implemented">IMPLEMENTED</span><small>MESSAGING</small><h2>Wolverine</h2><p>A Wolverine-based Kafka consumer demonstrates message-handler routing and transport abstraction alongside the lower-level consumer.</p><div class="evidence"><span>Wolverine</span><span>Kafka</span><span>C#</span></div><a href="https://github.com/abla86/AB-Engineering-Lab/tree/main/projects/eventforge">EventForge ↗</a></article>
<article class="stack-card" data-group="data" data-status="implemented" data-search="sql postgresql database relational data"><span class="status-pill implemented">IMPLEMENTED</span><small>DATA</small><h2>SQL / PostgreSQL</h2><p>Relational modelling, SQL analysis and PostgreSQL-backed application components are present across the portfolio.</p><div class="evidence"><span>SQL</span><span>PostgreSQL</span><span>EF Core</span></div><a href="https://github.com/abla86/workforce-competence-management">SQL evidence ↗</a></article>
<article class="stack-card" data-group="security" data-status="implemented" data-search="security authentication authorization secrets devsecops encryption"><span class="status-pill implemented">IMPLEMENTED</span><small>SECURITY</small><h2>Security / Authentication / DevSecOps</h2><p>Security is represented through secure boundaries, authentication/authorization concepts, CI security and repository verification.</p><div class="evidence"><span>Auth</span><span>RBAC</span><span>CodeQL</span><span>Secrets</span></div><a href="security-lab.html">Security Lab ↗</a></article>
<article class="stack-card" data-group="security" data-status="demo" data-search="digital signatures encryption cryptography integrity security"><span class="status-pill demo">INTEGRATION TARGET</span><small>SECURITY</small><h2>Digital signatures / encryption</h2><p>These belong in the HealthTech security boundary, where integrity and confidentiality have a real domain purpose. They are not counted as implemented until executable evidence is present.</p><div class="evidence"><span>Integrity</span><span>Confidentiality</span><span>Crypto</span></div><a href="https://github.com/abla86/HealthTechDeviceApi">HealthTech boundary ↗</a></article>
<article class="stack-card" data-group="data" data-status="implemented" data-search="data science python analytics healthcare statistics"><span class="status-pill implemented">IMPLEMENTED</span><small>DATA SCIENCE</small><h2>Data Science</h2><p>Healthcare data analysis is kept as a separate analytical capability with synthetic-data boundaries and automated validation.</p><div class="evidence"><span>Python</span><span>Analysis</span><span>Validation</span></div><a href="https://github.com/abla86/HealthTechDeviceApi">Data analyzer ↗</a></article>
<article class="stack-card" data-group="data" data-status="demo" data-search="vector embeddings retrieval ai neural networks machine learning"><span class="status-pill demo">DEMO / BOUNDARY</span><small>AI / DATA</small><h2>Vector / neural networks</h2><p>Vector retrieval belongs naturally in local research tooling. A neural-network claim is kept bounded until a model, training/evaluation and reproducible evidence are part of a public implementation.</p><div class="evidence"><span>Vector</span><span>Embeddings</span><span>Evaluation</span></div><a href="https://github.com/abla86/complete-evidence-appraisal-tool">Research tooling ↗</a></article>
<article class="stack-card" data-group="engineering" data-status="implemented" data-search="requirements analysis quality assurance technical consulting analytical problem solving communication root cause continuous improvement context"><span class="status-pill implemented">IMPLEMENTED</span><small>ENGINEERING PRACTICE</small><h2>Requirements / QA / problem solving</h2><p>Requirements, acceptance criteria, quality gates, root-cause analysis and continuous-improvement documentation are treated as engineering artifacts.</p><div class="evidence"><span>Requirements</span><span>QA</span><span>RCA</span><span>CI</span></div><a href="https://github.com/abla86/azure-kubernetes-showcase">Platform evidence ↗</a></article>
<article class="stack-card" data-group="engineering" data-status="boundary" data-search="net framework legacy framework"><span class="status-pill boundary">NOT TARGETED</span><small>LEGACY</small><h2>.NET Framework</h2><p>Kept as contextual knowledge rather than a new-build target. Current work uses modern .NET.</p><div class="evidence"><span>Modern .NET</span><span>Migration awareness</span></div><a href="engineering-map.html">Capability map ↗</a></article>
<article class="stack-card" data-group="engineering" data-status="implemented" data-search="full stack web applications web services backend frontend application integration"><span class="status-pill implemented">IMPLEMENTED</span><small>FULL STACK</small><h2>Full-stack application integration</h2><p>The portfolio combines browser clients, APIs, databases, messaging, containers and deployment rather than treating frontend and backend as isolated skills.</p><div class="evidence"><span>UI</span><span>API</span><span>DB</span><span>Delivery</span></div><a href="projects.html">Project atlas ↗</a></article>
<article class="stack-card" data-group="engineering" data-status="implemented" data-search="structured finance finance risk analytics"><span class="status-pill implemented">SEPARATE DOMAIN</span><small>FINANCE</small><h2>Structured finance / risk</h2><p>Finance-related work remains isolated to the finance/strategy project family instead of being artificially inserted into healthcare or platform systems.</p><div class="evidence"><span>Finance</span><span>Risk</span><span>Analytics</span></div><a href="https://github.com/abla86/AB-Engineering-Lab">Finance lab ↗</a></article>
</section><div id="stack-empty" class="stack-empty">No capability matches the current search and filter.</div><div class="stack-note">Portfolio rule: do not turn a technology keyword into a false claim. A capability is marked implemented only when the repository contains inspectable code, tests, CI, documentation tied to implementation, or an explicitly bounded demonstration.</div></div></main><footer class="site-footer"><div class="container"><span>Build · test · document · validate</span><a href="index.html">Back to profile</a></div></footer><script>
(()=>{const cards=[...document.querySelectorAll('.stack-card')],search=document.getElementById('stack-search'),count=document.getElementById('stack-count'),empty=document.getElementById('stack-empty');let filter='all';const apply=()=>{const q=search.value.trim().toLowerCase();let n=0;cards.forEach(c=>{const ok=(filter==='all'||c.dataset.group===filter)&&(!q||c.dataset.search.includes(q));c.dataset.hidden=ok?'false':'true';if(ok)n++});count.textContent=`${n} / ${cards.length} capabilities`;empty.classList.toggle('show',n===0)};document.querySelectorAll('.stack-filter').forEach(b=>b.addEventListener('click',()=>{document.querySelectorAll('.stack-filter').forEach(x=>x.classList.remove('active'));b.classList.add('active');filter=b.dataset.filter;apply()}));search.addEventListener('input',apply);document.addEventListener('keydown',e=>{if(e.key==='/'&&document.activeElement!==search){e.preventDefault();search.focus()}});apply()})();
</script></body></html>