Changelog

Astro/TypeScript aufgeräumt

npx astro check war fehlerhaft und ist jetzt wieder vollständig clean:

• 0 Errors
• 0 Warnings
• 0 Hints

Was wurde konkret gefixt?

Blog Pagination typisiert

In src/pages/blog/[...page].astro wurde die Pagination sauber typisiert (Page<CollectionEntry<'blog'>>), damit page.data, page.url, currentPage usw. wieder korrekt erkannt werden.

Homelab Script null-safe gemacht

In src/pages/homelab.astro wurden die DOM-Zugriffe strikt abgesichert:

• Element-Guards mit instanceof HTMLElement
• Typed QuerySelector für .node-group und .mt-card
• Keine unsicheren dataset/null Zugriffe mehr

Accessibility: Skip-Link Ziel korrigiert

Der globale Skip-Link (#main-content) funktioniert jetzt auch auf der Homelab-Seite korrekt, weil <main> dort die passende ID erhalten hat.

Kleine Cleanups

• Unbenutzter/deprecated ViewTransitions Import aus BaseLayout entfernt
• JSON-LD Script-Tags explizit mit is:inline markiert
• Unbenutzten Import in changelog.astro entfernt
• BlogPost Layout um TOC-Feature erweitert (automatisch aus h2/h3)

Betroffene Dateien

• src/pages/blog/[...page].astro
• src/pages/homelab.astro
• src/layouts/BaseLayout.astro
• src/layouts/BlogPost.astro
• src/pages/index.astro
• src/pages/changelog.astro

Status: ✅ Technisch wieder sauber und wartbar.

Topology-Überarbeitung: Bugfixes + Mobile-View

Die interaktive Netzwerktopologie hat ein größeres Update bekommen — sowohl unter der Haube als auch sichtbar.

SVG-Fehler behoben

Das Diagramm hatte ein paar stille Bugs, die beim näheren Hinschauen aufgefallen sind:

• Verbindungslinie repariert: line-router-down endete 20px in der Luft und war mit keinem Node verbunden — entfernt, Router-Unraid-Verbindung startet jetzt korrekt vom Router-Bottom
• Unraid → nginx → Storage: Fehlende Verbindungskette nachgetragen inkl. animiertem Datenpaket
• Smart TV doppelt: Node existierte einmal im IoT-VLAN und einmal als eigener Node mit langer kreuzender VPN-Linie — bereinigt, VPN-Info ist jetzt im IoT-VLAN-Detail
• AdGuard-Verortung: Subtitle zeigt jetzt DNS • Unraid Docker — macht klarer, dass AdGuard auf dem Unraid-Server läuft, nicht eigenständig

Inhaltliche Korrekturen

• LTE-Label-Widerspruch: Node zeigte Primary obwohl DSL 60% der Last trägt — korrigiert auf 270M ↓ / mwan3 40%
• nodeData aktualisiert: AdGuard, VPN, IoT-VLAN mit klareren Beschreibungen
• Legende erweitert: Graue Standardverbindung war bisher nicht erklärt

Detail-Panel: Redesign

Das Info-Panel das beim Klick auf einen Node aufgeht wurde überarbeitet:

• Pulsierender ONLINE-Badge mit grünem Statusdot
• Frosted-Glass-Header mit backdrop-filter
• Section-Titel jetzt im Terminal-Stil: // Verbindungsdetails
• Jede Section als eigene Card mit Hover-Highlight auf Listeneinträgen
• Overlay bekommt leichten Blur-Effekt
• Geschmeidigere Transition mit cubic-bezier

Mobile-View

Auf kleinen Screens war die Topologie bisher eine horizontale Scrollwüste. Jetzt gibt’s eine dedizierte Mobile-Ansicht:

• SVG wird auf ≤768px ausgeblendet
• Stattdessen: Card-basiertes Layout — vier gestapelte Layer-Blöcke (WAN → Router → Services → VLANs)
• Jede Kachel ist tippbar und öffnet dasselbe Detail-Panel
• VLAN-Kacheln mit farbiger linker Border (orange / rot / grün)
• Detail-Panel kommt als Bottom Sheet von unten — mit Drag-Handle, daumenfreundlich
• Hint-Text wechselt kontextabhängig: Klicke vs. Tippe

URL: /homelab

Accessibility-Verbesserungen

Skip-Link

• “Zum Hauptinhalt springen” Link für Keyboard-Nutzer
• Nur sichtbar bei Fokus (Tab-Taste)
• Springt direkt zum <main> Content

Fokus-Styles

• Klare sichtbare Fokus-Indikatoren für alle interaktiven Elemente
• Cyan Outline + Glow-Effekt
• Bessere Sichtbarkeit bei Keyboard-Navigation

ARIA-Attribute

• aria-expanded für Hamburger-Menü
• aria-controls verknüpft Button mit Menü
• role="menu" für Mobile Navigation

Reduced Motion

• prefers-reduced-motion Media Query
• Animationen werden für Nutzer mit Bewegungsempfindlichkeit reduziert
• Respektiert System-Einstellungen

Status: ✅ Barrierefreier!

HTML-Validierungs-Fixes

Problem

Buttons ohne type Attribut sind standardmäßig type="submit". Das kann zu unerwartetem Verhalten führen und ist nicht valide.

Lösung

Allen Buttons type="button" hinzugefügt:

• Nav: Lang-Toggle, Hamburger-Menu
• BackToTop: Scroll-to-Top Button
• Blog: Filter-Buttons, Sort-Button
• Index: Devlog-Close Button
• Homelab: Panel-Close Button

Betroffene Dateien

• src/components/Nav.astro
• src/components/BackToTop.astro
• src/pages/blog/[...page].astro
• src/pages/index.astro
• src/pages/homelab.astro

Status: ✅ HTML jetzt valider!

Pagination für den Blog

Problem: Mit 11 Posts wurde die Blog-Übersicht zu lang.

Lösung: Paginierung mit 6 Posts pro Seite

Features

• 6 Posts pro Seite - Optimal für die Übersicht
• SEO-freundliche URLs:
  • /blog/ - Seite 1
  • /blog/2/ - Seite 2
  • usw.
• Seitennavigation:
  • “Neuere Posts” / “Ältere Posts” Buttons
  • Seitenzahlen (1, 2, 3…)
  • Prev/Next Meta-Tags für SEO
• Responsive - Auch auf Mobile gut bedienbar

Technisch

• getStaticPaths() mit Astro’s paginate() Helper
• Server-seitige Generierung aller Seiten
• Kategorie-Filter funktioniert weiterhin pro Seite
• Sortierung funktioniert weiterhin

Redirects vorbereitet

In astro.config.mjs ist jetzt eine Redirect-Konfiguration vorbereitet für zukünftige URL-Änderungen.

Status: Live! Blog ist jetzt paginiert. 📄

Google PageSpeed Boost

Vorher: ~59% PageSpeed, 10s+ First Contentful Paint
Nachher: ~79% PageSpeed, 1,5s First Contentful Paint

Umgesetzt

Bilder: PNG/JPG → WebP

Bild	Vorher	Nachher	Ersparnis
avatar.png	248 KB	20 KB	92%
city_tycoon.jpg	112 KB	71 KB	37%

• <picture> Element mit WebP-Source und PNG/JPG-Fallback
• width/height Attribute gegen Layout Shift

Fonts: Reduzierte Ladezeit

Vorher: 7 Inter Fonts (2,2 MB) + 3 JetBrains Mono (330 KB)
Nachher: 4 Inter Fonts (1,2 MB) + 1 JetBrains Mono (110 KB)

• Preload auf nur 2 kritische Fonts (400 + 700)
• Bessere System-Font-Fallbacks
• Ersparnis: ~1,2 MB weniger kritische Ressourcen

Betroffene Dateien

• BaseLayout.astro - Preloads optimiert
• index.astro - WebP Bilder
• Nav.astro + homelab.astro - WebP Avatare
• fonts.css - Weniger Schriftschnitte

Status: Live. Deutlich schnelleres Laden! 🚀

Google PageSpeed Boost

Problem: PageSpeed Score bei ~59% - zu langsames Rendering durch blockierende Fonts und große Bilder.

Umgesetzt

Bilder: PNG/JPG → WebP

Bild	Vorher	Nachher	Ersparnis
avatar.png	248 KB	20 KB	92%
city_tycoon.jpg	112 KB	71 KB	37%

• <picture> Element mit WebP-Source und PNG/JPG-Fallback
• width/height Attribute hinzugefügt (verhindert Layout Shift)
• Avatar preloaded im <head>

Fonts: Preloading

<link rel="preload" href="/fonts/inter-400.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/fonts/inter-500.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/fonts/inter-700.ttf" as="font" type="font/ttf" crossorigin>

Ergebnis: Fonts werden parallel zum CSS geladen, blockieren nicht das Rendering.

Betroffene Dateien

• src/layouts/BaseLayout.astro - Preloads hinzugefügt
• src/pages/index.astro - WebP Bilder
• src/components/Nav.astro - WebP Avatar
• src/pages/homelab.astro - WebP Avatar

Status: Deployed. Sollte deutlich schneller laden! 🚀

Die Entscheidung

View Transitions sind wieder draußen. Nach stundenlangem Debugging war klar: Die Animation ist nicht wert, wenn sie Scripts kaputt macht.

Was war das Problem?

• Changelog-Seite ist ausgefadet und nicht wiedergekommen
• Blog Filter & Sortierung funktionierten nicht mehr
• Snake Game war nach Navigation tot
• Edge Cases bei schnellem Hin-und-Her-Navigieren

Die Lösung

Alle transition:* Direktiven entfernt:

• transition:persist von Header, Footer, Background
• transition:animate vom Main-Content
• <ViewTransitions /> Component aus BaseLayout

Scripts umgestellt auf DOMContentLoaded statt nur astro:page-load.

Das Ergebnis

• ~50ms schnelleres Laden
• Keine Fade-In/Out Bugs mehr
• Blog Filter & Sortierung funktionieren zuverlässig
• Snake läuft stabil
• Einfacherer Code

Fazit: Manchmal ist “boring” besser als “fancy”.

Status: Produktiv. Keine Animation, keine Probleme.

Der Idle City Tycoon Card wurde ein interaktiver Fortschrittsbalken hinzugefügt:

• Aktueller Stand: 21% Fertigstellung
• Schätzung: Q3 2026
• Interaktiv: Klick öffnet Mini-Devlog mit Entwicklungshinweisen
• Animation: Glänzender Shimmer-Effekt auf dem Balken

Außerdem wurde eine Dummy manifest.json für lokale Entwicklung hinzugefügt (wird nicht deployed, da Live-Daten vom Server kommen).

Neue Seite: Interaktive Dokumentation meines Homelab-Setups

• SVG-Netzwerkdiagramm mit animierten Datenpaketen
• Klickbare Knoten mit Detail-Informationen
• Neofetch-Style System-Info
• Evolution-Timeline (2014-2025)
• Hardware-Specs Grid
• Konami Code Easter Egg 🎮
• Vollständig bilingual (DE/EN)

URL: /homelab

Das Problem

Snake hat nach Navigation via View Transitions nicht mehr funktioniert. Erst nach Reload ging es wieder.

Ursache

Das Canvas-Element und die DOM-Referenzen werden bei View Transitions ersetzt, aber das Script behielt alte Referenzen.

Lösung

Kompletter Rewrite mit:

• Frischem DOM-Lookup bei jedem Frame
• Verzögertem Start nach astro:page-load
• Rigoroser Cleanup alter Timer

Status: Snake läuft jetzt auch nach Navigation!

Kategorien für Blog

Neue Filter in der Blog-Übersicht:

• Alle
• Homelab 🖥️
• Website 🌐
• GameDev 🎮

Funktioniert mit JavaScript, kein Page-Reload nötig.

Changelog-Seite

Neue Seite /changelog dokumentiert alle Änderungen.

Wichtig: Manuell gepflegt (keine GitHub-API). Ich entscheide, was öffentlich ist.

Format: Markdown-Dateien in src/content/changelog/

Blog-Layout verbessert

Blog-Posts nutzen jetzt das gleiche Layout wie die Hauptseite:

• Dark Theme mit animiertem Hintergrund
• Navigation und Footer
• BackToTop Button
• Single-Page-Feeling

Status: Jetzt alles konsistent.

404-Seite

Nicht langweiliges “Seite nicht gefunden”, sondern Terminal-Style mit sarkastischen Nachrichten:

• “Diese Seite hat sich in Luft aufgelöst…”
• “404 - Die Seite ist auf einem Server, der keine Seiten hat”
• “Du hast die Matrix durchbrochen…”

Zufällige Auswahl bei jedem Reload.

Konami Code

↑↑↓↓←→←→BA aktiviert Matrix-Digital-Rain über die ganze Seite.

Technik:

• Canvas-Animation
• Katakana-Zeichen (wie im Film)
• Trail-Effekt mit halbtransparenten Overlays
• 10 Sekunden Laufzeit

Hinweis unter dem Terminal: “ob der konami code noch funktioniert?”

Warum?

Weil eine Website nicht nur funktional sein muss. Sie sollte Persönlichkeit haben. Wer den Konami Code eingibt, ist mein Mensch.

Schriften optimieren

font-display: swap Alle 10 Schriftarten bekommen font-display: swap. Text erscheint sofort mit Fallback-Font, wird dann zum Custom Font getauscht.

Ergebnis: Kein “Invisible Text” mehr beim Laden.

Bilder optimieren

Hero-Avatar: fetchpriority="high" für schnellen LCP (Largest Contentful Paint) Blog-Bilder: Automatisches Lazy Loading Idle City Screenshot: Lazy loaded mit Hover-Zoom-Effekt

Prefetching

Aktiviert: Seiten werden beim Hovern über Links im Hintergrund geladen.

Ergebnis: Die Seite lädt spürbar schneller, besonders auf langsamen Verbindungen.

Was war zu tun?

Eine Website ohne Besucher ist nur ein Tagebuch. Zeit für SEO.

Umgesetzt

Sitemap & robots.txt

• Automatisch generiert aus allen Seiten
• Blog-Posts inkludiert
• Für Google/Bing Crawler

Meta-Tags

• Open Graph (Facebook, Discord, LinkedIn)
• Twitter Cards
• Canonical URLs

JSON-LD (Structured Data)

• Person-Schema für die Homepage
• BlogPosting-Schema für Artikel
• Hilft Google bei Rich Snippets

Tools

• Google Search Console eingerichtet
• Lighthouse für Performance-Checks
• Alles grün (fast).

Status: SEO-technisch auf dem neuesten Stand.

Die Idee

Seitenwechsel sollen sich anfühlen wie eine App, nicht wie klassisches Website-Herumgeklicke. Astro hat dafür ein experimentelles Feature: View Transitions.

Implementierung

Einfacher als gedacht:

<head>
  <ViewTransitions />
</head>

Optimierungen:

• Navigation bleibt mit transition:persist stehen (kein Flackern)
• Main-Content gleitet mit transition:animate="slide"
• Blog-Posts haben eigenen Animation-Style

Bugfix

Problem: JavaScript-Event-Listener funktionierten nicht nach Transition. Lösung: astro:page-load Event nutzen statt nur DOMContentLoaded.

Ergebnis: Die Seite fühlt sich deutlich flüssiger an.

Das Problem mit Astro.glob()

Astro.glob('./blog/*.md') hat funktioniert, aber:

• Keine Autocomplete-Unterstützung
• Keine Validierung der Frontmatter-Daten
• Keine Type-Safety

Content Collections

Astro’s Lösung: Collections mit Zod-Schema.

Schema definiert:

• title (string, required)
• description (string, required)
• date (date, required)
• tags (array of strings)
• category (enum: Homelab, Website, GameDev)
• draft (boolean, optional)

Vorteil: Wenn ich ein Pflichtfeld vergesse, gibt es einen Build-Fehler. So soll es sein.

Draft-System

Neue Funktion: draft: true im Frontmatter.

• In Development sichtbar
• In Production ausgeblendet

Perfekt für Posts, an denen ich noch schreibe.

Warum Astro?

Die HTML-Version wurde unübersichtlich. Jede Änderung am Layout musste in drei Dateien gemacht werden. Blog-Posts waren mühsam zu pflegen.

Astro verspricht:

• Komponenten (Layout einmal definieren)
• Markdown-Support für Blog
• Statischer Export (kein Server nötig)
• Kein Client-JavaScript-Framework (kein React, Vue, etc. nötig)

Die Migration

Aufwand: Ein voller Tag Schritte:

1. Astro-Projekt initialisieren
2. Layouts erstellen (BaseLayout, PortfolioLayout)
3. Komponenten auslagern (Nav, Footer)
4. Blog-Posts zu Markdown konvertieren
5. Styling übertragen

Ergebnis

Vorher: 500+ Zeilen HTML in einer Datei Nachher: Saubere Struktur mit Layouts und Komponenten

Build: npm run build → dist/-Ordner mit purem HTML/CSS/JS

Fazit: Hat sich gelohnt. Die Seite ist jetzt wartbar.

Warum ein Blog?

Ich wollte dokumentieren, was ich lerne. Nicht für andere (okay, vielleicht ein bisschen), sondern für mich selbst. Wenn ich in 2 Jahren vergessen habe, wie das Homelab-Setup funktioniert, kann ich hier nachlesen.

Erste Posts

“Live-Daten vom Homelab auf die Website”

• Wie das Terminal-Widget funktioniert
• n8n-Workflow erklärt
• Code-Beispiele

“Von statischem HTML zu Astro”

• Warum ich von purem HTML weg wollte
• Was Astro bietet
• Migrationsschritte

Technik

Noch reines HTML für die Posts. Jeder Post ist eine Markdown-Datei, die ich manuell in HTML umwandle. Geht, aber ist mühsam.

Gedanke: Es muss einen besseren Weg geben…

Das Problem

Bisher waren die Homelab-Daten statisch. “Unraid 7.2.3”, “53 days uptime” - aber das war hartcodiert. Langweilig.

Die Lösung

Stack:

• Unraid-Server mit API
• n8n-Workflow (läuft auf meinem Server)
• JSON-Datei, die alle 15 Minuten aktualisiert wird

Daten:

• OS und Uptime
• RAM-Auslastung
• Storage-Status
• Docker-Container mit Status

Der Code

fetch('manifest.json?t=' + Date.now())
  .then(res => res.json())
  .then(data => updateTerminal(data));

Der ?t=-Parameter verhindert Caching. Wichtig!

Lessons Learned

• Fallback-Werte sind Pflicht (wenn der Server mal down ist)
• “stats.json” als Name funktioniert nicht (Adblocker!)
• manifest.json ist der bessere Name

Status: Live-Daten funktionieren, automatisches Update alle 15 Minuten.

Die Idee

Jede Portfolio-Seite braucht einen Clou. Meiner sollte ein Spiel sein. Nicht irgendeins - Snake. Klassisch, retro, passend zum Terminal-Look.

Implementierung

Technik:

• Canvas-Element
• BFS-Pathfinding für die AI (die Schlange spielt sich selbst)
• Retro CRT-Look mit Scanlines und Glitch-Effekt

Herausforderungen:

• Die AI war zu gut, musste langsam gemacht werden
• Mobile-Version brauchte eigenen Screen (zu klein für Widget)
• Performance-Optimierung (Raf-Loops sind tricky)

Desktop vs Mobile

Desktop: Snake als Widget direkt auf der Hauptseite, embedded im Terminal-Look Mobile: Link zu /snake mit Vollbild-Version

Status: Spielbar, AI funktioniert, sieht cool aus.

Erster Wurf

Drei HTML-Dateien:

• index.html - Hauptseite mit Hero, Homelab-Widget, Projekten
• impressum.html - Juristen-Text
• datenschutz.html - Mehr Juristen-Text

Design-Entscheidungen

Farben:

• Hintergrund: #0a0a0f (fast schwarz)
• Akzent: #00d9ff (Cyan) für Homelab-Tech
• Sekundär: #ff3366 (Pink/Rot) für GameDev

Schriftarten:

• Inter für Text
• JetBrains Mono für Code/Terminal
• Orbitron für Snake (Retro-Look)

Das Homelab-Widget

Erste Version des Terminal-Widgets gebaut. Statische Daten, aber das Design stand:

• Neofetch-Style
• Docker-Container-Liste
• Live-Indikator (noch nicht wirklich live, aber sah gut aus)

Gelernt: CSS Grid ist mächtig, aber manchmal frustrierend.

Warum überhaupt?

Ich brauchte eine Website. Nicht nur irgendeine, sondern eine, die zeigt was ich mache: Homelab, GameDev, Systemadministration. Und die sollte anders sein als diese Standard-WordPress-Dinger.

Die ersten Skizzen

Erste Gedanken auf Papier:

• Dark Theme (hell ist out)
• Terminal-Style für das Homelab
• Snake-Game als Easter Egg
• Blog für Tutorials und Updates

Technologie? Erstmal gar nicht festgelegt. HTML/CSS/JS wäre der einfache Weg. Aber ich wusste, dass ich irgendwann mehr wollen würde.

Domain registriert

sven-neurath.de ist jetzt mein. Hosting wird auf meinem eigenen Server laufen, aber erstmal lokal entwickeln.

Status: Konzept steht, Zeit zu bauen.