index.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Softwareentwicklung Explorer</title>
<meta name="description" content="Interaktiver deutschsprachiger Explorer zu Softwareentwicklung, Architektur, APIs, Testing, DevOps, Security und AI Coding.">
<style>
:root {
  --bg:#f7f9fc; --card:#fff; --text:#152033; --muted:#64748b; --line:#dfe6ef;
  --accent:#2563eb; --accent2:#4f46e5; --soft:#eef4ff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#fbfdff 0,#f7f9fc 100%);color:var(--text)}
.wrap{max-width:1160px;margin:auto;padding:42px 22px 70px}
.hero{background:linear-gradient(135deg,#ffffff,#f1f5ff);border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:0 14px 40px rgba(15,23,42,.06)}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:var(--soft);padding:7px 10px;border-radius:999px}
h1{font-size:clamp(2rem,5vw,4rem);line-height:1.02;margin:18px 0 14px;letter-spacing:-.04em}
.lead{max-width:780px;font-size:1.08rem;line-height:1.65;color:var(--muted);margin:0}
.controls{display:grid;grid-template-columns:1fr auto;gap:12px;margin:24px 0 18px}
input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;font-size:1rem;background:#fff;outline:none}
input:focus{border-color:#9ab7ff;box-shadow:0 0 0 4px #edf3ff}
.count{display:flex;align-items:center;padding:0 14px;color:var(--muted);font-size:.92rem}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
button{border:1px solid var(--line);background:#fff;color:#334155;padding:9px 12px;border-radius:999px;cursor:pointer;font-weight:650}
button.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:19px;transition:.18s ease;min-height:170px}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,23,42,.07)}
.badge{font-size:.76rem;font-weight:750;color:var(--accent);background:var(--soft);border-radius:999px;padding:5px 8px;display:inline-block}
.card h2{font-size:1.05rem;margin:16px 0 8px}
.card p{font-size:.94rem;line-height:1.55;color:var(--muted);margin:0}
.empty{padding:34px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:18px;background:#fff;display:none}
.footer{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;line-height:1.6}
.footer a{color:var(--accent);text-decoration:none}
@media(max-width:850px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.wrap{padding:22px 14px 50px}.hero{padding:24px 20px}.grid{grid-template-columns:1fr}.controls{grid-template-columns:1fr}.count{padding:0}}
</style>
</head>
<body>
<main class="wrap">
<section class="hero">
<span class="eyebrow">Softwareentwicklung · Explorer</span>
<h1>Moderne Softwareentwicklung verstehen.</h1>
<p class="lead">Von Grundlagen und Architektur über APIs, Testing und DevOps bis zu Security, AI Coding und Coding Agents. Durchsuche die wichtigsten Bausteine moderner Softwareentwicklung.</p>
</section>

<div class="controls">
  <input id="search" type="search" placeholder="Begriff suchen, z. B. Microservices, Testing, Coding Agents …" aria-label="Suche">
  <div class="count" id="count"></div>
</div>
<div class="filters" id="filters"></div>
<section class="grid" id="grid"></section>
<div class="empty" id="empty">Keine passenden Themen gefunden.</div>

<div class="footer">
  <strong>Softwareentwicklung</strong> · Deutschsprachige technische Ressourcen zu Software Engineering, Architektur, DevOps und AI Coding.<br>
  Hugging Face: <a href="https://huggingface.co/softwareentwicklung" target="_blank" rel="noopener">huggingface.co/softwareentwicklung</a>
</div>
</main>

<script>
const items = [{"category": "Grundlagen", "title": "Programmierung", "desc": "Code, Programmiersprachen, Funktionen, Module und grundlegende Engineering-Prinzipien.", "key": "code"}, {"category": "Grundlagen", "title": "Software Engineering", "desc": "Planung, Entwicklung, Test, Betrieb und Wartung nachhaltiger Softwaresysteme.", "key": "engineering"}, {"category": "Grundlagen", "title": "Requirements Engineering", "desc": "Anforderungen verstehen, priorisieren und in überprüfbare Akzeptanzkriterien übersetzen.", "key": "requirements"}, {"category": "Architektur", "title": "Softwarearchitektur", "desc": "Komponenten, Verantwortlichkeiten, Schnittstellen, Datenflüsse und technische Entscheidungen.", "key": "architecture"}, {"category": "Architektur", "title": "Monolith & Modularer Monolith", "desc": "Einfache Deployment-Strukturen mit klaren internen Modulgrenzen.", "key": "monolith"}, {"category": "Architektur", "title": "Microservices", "desc": "Unabhängig deploybare Services mit zusätzlicher verteilter Systemkomplexität.", "key": "microservices"}, {"category": "Architektur", "title": "Event-Driven Architecture", "desc": "Lose gekoppelte Systeme mit Events, Queues und asynchroner Verarbeitung.", "key": "events"}, {"category": "Architektur", "title": "Domain-Driven Design", "desc": "Fachliche Modelle, Ubiquitous Language und Bounded Contexts für komplexe Domänen.", "key": "ddd"}, {"category": "Architektur", "title": "Clean / Hexagonal Architecture", "desc": "Trennung von Geschäftslogik und technischer Infrastruktur.", "key": "clean"}, {"category": "Schnittstellen", "title": "REST APIs", "desc": "Ressourcenorientierte HTTP-Schnittstellen, Statuscodes, Versionierung und Idempotenz.", "key": "rest"}, {"category": "Schnittstellen", "title": "GraphQL", "desc": "Flexible Datenabfragen mit typisiertem Schema und gezielter Feldauswahl.", "key": "graphql"}, {"category": "Schnittstellen", "title": "gRPC", "desc": "Performante, typisierte Service-Kommunikation für interne Systeme.", "key": "grpc"}, {"category": "Schnittstellen", "title": "Webhooks", "desc": "Ereignisbasierte Kommunikation mit Signaturen, Retries und Idempotenz.", "key": "webhooks"}, {"category": "Daten", "title": "Datenbanken", "desc": "Relationale und NoSQL-Datenbanken, Transaktionen, Indizes und Datenmodelle.", "key": "database"}, {"category": "Daten", "title": "Caching", "desc": "Latenz reduzieren, Last senken und Cache-Invalidierung beherrschen.", "key": "cache"}, {"category": "Daten", "title": "Messaging", "desc": "Queues, Topics, Dead-Letter Queues und robuste asynchrone Verarbeitung.", "key": "messaging"}, {"category": "Qualität", "title": "Unit Testing", "desc": "Schnelle Tests kleiner Codeeinheiten und klar definierter Logik.", "key": "unit"}, {"category": "Qualität", "title": "Integration Testing", "desc": "Zusammenspiel von Datenbank, APIs, Queues und Services prüfen.", "key": "integration"}, {"category": "Qualität", "title": "End-to-End Testing", "desc": "Komplette Nutzerabläufe unter realitätsnahen Bedingungen testen.", "key": "e2e"}, {"category": "Qualität", "title": "Code Review", "desc": "Änderungen prüfen, Wissen teilen und Fehler früh erkennen.", "key": "review"}, {"category": "Qualität", "title": "Static Analysis", "desc": "Code automatisiert auf Bugs, Stil- und Sicherheitsprobleme analysieren.", "key": "static"}, {"category": "DevOps", "title": "Git & Versionskontrolle", "desc": "Änderungen nachvollziehbar verwalten, Branches und Pull Requests nutzen.", "key": "git"}, {"category": "DevOps", "title": "CI/CD", "desc": "Build, Test und Deployment automatisieren und reproduzierbar machen.", "key": "cicd"}, {"category": "DevOps", "title": "Infrastructure as Code", "desc": "Infrastruktur versioniert, reviewbar und automatisiert bereitstellen.", "key": "iac"}, {"category": "DevOps", "title": "Container", "desc": "Anwendungen und Abhängigkeiten konsistent paketieren und deployen.", "key": "container"}, {"category": "DevOps", "title": "Kubernetes", "desc": "Container orchestrieren, skalieren und resilient betreiben.", "key": "kubernetes"}, {"category": "Betrieb", "title": "Observability", "desc": "Logs, Metrics, Traces und Events nutzen, um Systemverhalten zu verstehen.", "key": "observability"}, {"category": "Betrieb", "title": "Reliability Engineering", "desc": "Verfügbarkeit, Recovery, Error Budgets und robuste Fehlerbehandlung.", "key": "reliability"}, {"category": "Betrieb", "title": "Performance & Scalability", "desc": "Latenz, Durchsatz, Ressourcen und Wachstum gezielt messen und optimieren.", "key": "performance"}, {"category": "Security", "title": "Secure by Design", "desc": "Sicherheit bereits bei Architektur und Entwicklung berücksichtigen.", "key": "secure"}, {"category": "Security", "title": "DevSecOps", "desc": "Security Checks in Build-, Test- und Deployment-Pipelines integrieren.", "key": "devsecops"}, {"category": "Security", "title": "Secrets & Access Control", "desc": "Zugangsdaten schützen und Berechtigungen nach Least Privilege vergeben.", "key": "secrets"}, {"category": "AI Development", "title": "AI Coding", "desc": "KI für Codegenerierung, Debugging, Refactoring und Dokumentation einsetzen.", "key": "aicoding"}, {"category": "AI Development", "title": "Coding Agents", "desc": "Agenten analysieren Repositories, ändern Code, führen Tests aus und bereiten Pull Requests vor.", "key": "agents"}, {"category": "AI Development", "title": "Agentic Software Engineering", "desc": "Mehrstufige Entwicklungsprozesse mit Planner-, Coding-, Testing- und Review-Agenten.", "key": "agentic"}, {"category": "AI Development", "title": "Context Engineering", "desc": "Architekturregeln, Tests, Dokumentation und Repository-Kontext für KI-Systeme strukturieren.", "key": "context"}];
const categories = ["Grundlagen", "Architektur", "Schnittstellen", "Daten", "Qualität", "DevOps", "Betrieb", "Security", "AI Development"];
let active = "Alle";

const grid = document.getElementById("grid");
const filters = document.getElementById("filters");
const search = document.getElementById("search");
const count = document.getElementById("count");
const empty = document.getElementById("empty");

function esc(s) {
  return s.replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[m]);
}

function renderFilters() {
  filters.innerHTML = "";
  ["Alle", ...categories].forEach(cat => {
    const b = document.createElement("button");
    b.textContent = cat;
    b.className = cat === active ? "active" : "";
    b.onclick = () => { active = cat; renderFilters(); render(); };
    filters.appendChild(b);
  });
}

function render() {
  const q = search.value.trim().toLowerCase();
  const result = items.filter(x => {
    const inCat = active === "Alle" || x.category === active;
    const hay = (x.title + " " + x.desc + " " + x.category).toLowerCase();
    return inCat && (!q || hay.includes(q));
  });
  grid.innerHTML = result.map(x => `
    <article class="card">
      <span class="badge">${esc(x.category)}</span>
      <h2>${esc(x.title)}</h2>
      <p>${esc(x.desc)}</p>
    </article>
  `).join("");
  count.textContent = `${result.length} von ${items.length} Themen`;
  empty.style.display = result.length ? "none" : "block";
}

search.addEventListener("input", render);
renderFilters();
render();
</script>
</body>
</html>