hub intro text

AGENTS.md

@@ -189,6 +189,10 @@ python3 -m venv .venv
 .venv/bin/python scripts/github-aggregator/aggregate.py
 ```
 
+## Text / Stil
+
+- Keine Em-Dashes (—) verwenden, stattdessen umformulieren (Komma, Satzzeichen, neu formulieren)
+
 ## Python / pip
 
 - Niemals `pip install` direkt ausführen

hub/eleventy.config.js

@@ -5,6 +5,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy({ "shared/base.css": "shared-base.css" });
   eleventyConfig.addPassthroughCopy({ "shared/favicon/hub.svg": "favicon.svg" });
   eleventyConfig.addPassthroughCopy({ "hub/robots.txt": "robots.txt" });
+  eleventyConfig.addPassthroughCopy({ "hub/stefan-koelle-foto.jpg": "stefan-koelle-foto.jpg" });
 
   return {
     dir: {

hub/index.njk

@@ -47,4 +47,14 @@ sections:
         href: "https://aztec-project.org"
         emoji: "🔷"
 ---
+<div class="intro">
+  <div class="intro-text">
+    <h1>Hey, I'm Stefan 👋</h1>
+    <p>Welcome to moonweb, my personal corner on the internet. This is where I document my homelab, smart home setups, infrastructure experiments, retro hardware, and the code that ties it all together.</p>
+    <p>I'm a Senior Software Developer &amp; Architect based in Munich with 20+ years in the trenches, from Turbo Pascal on the 486 to .NET Core, Kubernetes, and AI-driven development today. By day I build microservices and cloud architecture, by night I tinker with MQTT brokers, restore retro computers, and automate things that don't necessarily need automating.</p>
+    <p>Everything here runs on a homelab that has been evolving since the mid-90s, from multiple 486s and Pentiums back in the day to today's Proxmox cluster. Have a look around.</p>
+  </div>
+  <img class="intro-photo" src="/stefan-koelle-foto.jpg" alt="Stefan Koelle" width="280" height="280">
+</div>
+
 {% include "card-grid.njk" %}

shared/base.css

@@ -40,6 +40,36 @@ body {
 
 main { max-width: 1100px; margin: 0 auto; padding: 2rem; }
 
+.intro {
+  display: flex;
+  gap: 2.5rem;
+  align-items: center;
+  margin-bottom: 2.5rem;
+}
+.intro-text h1 {
+  font-size: 1.8rem;
+  margin: 0 0 0.75rem;
+  color: var(--text);
+}
+.intro-text p {
+  margin: 0 0 0.6rem;
+  font-size: 0.95rem;
+  color: #444;
+  line-height: 1.6;
+}
+.intro-photo {
+  width: 280px;
+  height: 280px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid var(--accent);
+  flex-shrink: 0;
+}
+@media (max-width: 700px) {
+  .intro { flex-direction: column-reverse; text-align: center; }
+  .intro-photo { width: 180px; height: 180px; }
+}
+
 .card-section { margin-bottom: 2.5rem; }
 .card-section h2 {
   font-size: 1rem;