v1.2.0: Performance, Impressum, README, Dynamic Stats

Neo · Neo · commit 43736b16453e · 2026-03-26T02:01:08.000+01:00
- Three.js Code-Split: dynamischer Import (~600KB weniger Initial-Bundle)
- Three.js auf Mobile komplett deaktiviert
- Hero-Stats live aus /api/stats.json statt hardcoded
- Changelog v1.2.0 mit allen Optimierungen
- Impressum &amp; Datenschutz Seiten erstellt
- Footer: Links zu Impressum/Datenschutz + v1.2.0
- README: Vollständige Projektdokumentation
diff --git a/README.md b/README.md
@@ -1,43 +1,64 @@
-# Astro Starter Kit: Minimal
+# NEO — Self-Hosted AI auf Custom Hardware
 
-```sh
-npm create astro@latest -- --template minimal
-```
+<p align="center">
+  <img src="public/img/og-image.png" alt="NEO — Self-Hosted AI" width="600" />
+</p>
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+> Ein KI-Agent. Ein MiniPC. Null Cloud. Gebaut von Merlin Lietz.
 
-## 🚀 Project Structure
+**[🌐 Live ansehen → neo.lietztech.com](https://neo.lietztech.com)**
 
-Inside of your Astro project, you'll see the following folders and files:
+---
 
-```text
-/
-├── public/
-├── src/
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
+## Was ist NEO?
+
+NEO ist mein persönliches Homelab-Projekt: ein vollständig self-hosted KI-System auf einem €200-MiniPC.
+Kein Cloud-Abo, kein Vendor Lock-in — alles läuft auf eigener Hardware.
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+Diese Website dokumentiert das Projekt als interaktives Showcase mit Live-Dashboard, Terminal-Demo und System-Statistiken in Echtzeit.
 
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+## Tech Stack
 
-Any static assets, like images, can be placed in the `public/` directory.
+| Kategorie | Technologie |
+|-----------|------------|
+| **Frontend** | Astro v6, Tailwind CSS v4, Three.js, GSAP |
+| **Hardware** | ACE Magic S (Intel N97, 16GB RAM) |
+| **Virtualisierung** | Proxmox VE 9 |
+| **Container** | Docker (8+ Services) |
+| **Reverse Proxy** | Caddy + Cloudflare Tunnel |
+| **KI** | LiteLLM, Ollama (11 Modelle) |
+| **Automatisierung** | n8n, Cron, OpenClaw Agent |
+| **DMS** | Paperless-ngx |
+| **Benachrichtigungen** | Gotify, Telegram Bot |
 
-## 🧞 Commands
+## Features
 
-All commands are run from the root of the project, from a terminal:
+- 🎨 **Cinematic 3D Background** — PBR-Orbs mit Fresnel-Shader (Three.js)
+- 📊 **Live Dashboard** — CPU, RAM, Disk, Docker-Stats in Echtzeit
+- 💻 **Terminal Demo** — Interaktiver Chat + 8 Bot-Szenarien
+- 📱 **Telegram Preview** — Echte Bot-Konversation als Mockup
+- 🤖 **AI Model Roster** — Alle 11 KI-Modelle mit Benchmarks
+- ⚡ **Automation Timeline** — 14 Automatisierungen visualisiert
+- 💰 **Cost Ticker** — Self-Hosted vs. Cloud Kostenvergleich
+- 🎯 **Performance** — Three.js Code-Split, Mobile-Disable, IntersectionObserver
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+## Entwicklung
+
+```bash
+npm install    # Dependencies
+npm run dev    # Dev-Server (localhost:4321)
+npm run build  # Produktions-Build
+```
+
+## Deployment
+
+Build via rsync auf Nginx-Server (LXC 113). Cloudflare Tunnel routet neo.lietztech.com.
+
+```bash
+npm run build
+rsync -avz dist/ root@192.168.8.113:/var/www/neo-website/
+```
 
-## 👀 Want to learn more?
+## Lizenz
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+MIT © Merlin Lietz
diff --git a/src/components/sections/Changelog.astro b/src/components/sections/Changelog.astro
@@ -3,13 +3,33 @@
  * Changelog — Website-Versionshistorie
  * Zeigt die Evolution dieser Seite, wann welche Features dazu kamen
  */
-const currentVersion = 'v1.1.0'
+const currentVersion = 'v1.2.0'
 
 const releases = [
+  {
+    version: 'v1.2.0',
+    date: '27. März 2026',
+    tag: 'current',
+    title: 'Performance & Professionalisierung',
+    changes: [
+      { type: 'perf', text: 'Three.js Code-Split — dynamischer Import, ~600KB weniger Initial-Bundle' },
+      { type: 'perf', text: 'Three.js auf Mobile komplett deaktiviert' },
+      { type: 'perf', text: 'Ticker & CostTicker pausieren offscreen (IntersectionObserver)' },
+      { type: 'perf', text: 'Three.js pausiert bei Tab-Wechsel (Visibility API)' },
+      { type: 'feat', text: 'Hero-Statistiken live aus /api/stats.json statt hardcoded' },
+      { type: 'feat', text: 'OG-Image als PNG (1200×630) für Social Media' },
+      { type: 'feat', text: 'Schema.org JSON-LD Structured Data' },
+      { type: 'feat', text: 'Dashboard Live/Cached-Badge' },
+      { type: 'feat', text: 'Impressum & Datenschutz Seiten' },
+      { type: 'fix', text: 'CostTicker große Zahlen animieren korrekt' },
+      { type: 'fix', text: 'Automations-Zähler überall auf 14 vereinheitlicht' },
+      { type: 'refactor', text: 'Accessibility: role=navigation, aria-live für Toasts' },
+    ],
+  },
   {
     version: 'v1.1.0',
     date: '26. März 2026',
-    tag: 'current',
+    tag: '',
     title: 'Changelog & Versionierung',
     changes: [
       { type: 'feat', text: 'Website-Changelog als eigene Section' },
diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
@@ -153,19 +153,32 @@
   }
   setTimeout(typeLoop, 800)
 
-  // Live Stats — static fallback values (no WP dependency)
+  // Live Stats — fetch from stats.json, fallback to known values
   function animateCounter(el: HTMLElement | null, target: number) {
     if (!el) return
     const start = performance.now()
     function step(now: number) { const p = Math.min((now - start) / 1200, 1); el!.textContent = String(Math.round(target * (1 - Math.pow(1 - p, 3)))); if (p < 1) requestAnimationFrame(step) }
     requestAnimationFrame(step)
   }
-  // Set known values directly — these are real stats from the server
-  animateCounter(document.getElementById('count-containers'), 8)
-  animateCounter(document.getElementById('count-automations'), 14)
-  animateCounter(document.getElementById('count-uptime-days'), 180)
-  const stEl = document.getElementById('status-text')
-  if (stEl) stEl.textContent = 'Alle Systeme online'
+
+  async function loadHeroStats() {
+    let containers = 8, automations = 14, uptimeDays = 180
+    try {
+      const res = await fetch('/api/stats.json')
+      if (res.ok) {
+        const data = await res.json()
+        if (data.docker_containers) containers = data.docker_containers
+        if (data.cron_jobs) automations = data.cron_jobs
+        if (data.uptime_days) uptimeDays = data.uptime_days
+      }
+    } catch { /* fallback values */ }
+    animateCounter(document.getElementById('count-containers'), containers)
+    animateCounter(document.getElementById('count-automations'), automations)
+    animateCounter(document.getElementById('count-uptime-days'), uptimeDays)
+    const stEl = document.getElementById('status-text')
+    if (stEl) stEl.textContent = 'Alle Systeme online'
+  }
+  loadHeroStats()
 
   // Live Proof — measure actual response time to this server
   async function measureResponseTime() {
diff --git a/src/components/ui/Footer.astro b/src/components/ui/Footer.astro
@@ -41,10 +41,12 @@
         Self-Hosted <span class="text-accent-cyan">AI</span> auf Custom Hardware
       </p>
       <p class="text-text-muted text-xs">
-        &copy; {new Date().getFullYear()} Merlin Lietz — Ein Homelab-Projekt
+        &copy; {new Date().getFullYear()} Merlin Lietz — Ein Homelab-Projekt ·
+        <a href="/impressum" class="hover:text-accent-cyan transition-colors">Impressum</a> ·
+        <a href="/datenschutz" class="hover:text-accent-cyan transition-colors">Datenschutz</a>
       </p>
       <p class="text-text-muted text-[10px] font-mono">
-        v1.1.0 · Astro v6 · Intel N97 MiniPC · Docker · Caddy · Cloudflare
+        v1.2.0 · Astro v6 · Intel N97 MiniPC · Docker · Caddy · Cloudflare
       </p>
     </div>
   </div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -91,13 +91,23 @@ const canonicalUrl = Astro.url.href
 
     <!-- GSAP + Three.js init -->
     <script>
-      import { initBackground } from '../lib/three-bg'
       import { initScrollAnimations } from '../lib/animations'
 
-      document.addEventListener('DOMContentLoaded', () => {
+      document.addEventListener('DOMContentLoaded', async () => {
+        // Three.js nur auf Desktop laden (hover-fähig + breiter Screen)
+        const isDesktop = window.matchMedia('(hover: hover) and (min-width: 768px)').matches
         const bgCanvas = document.getElementById('bg-canvas') as HTMLCanvasElement
         const fgCanvas = document.getElementById('fg-canvas') as HTMLCanvasElement
-        if (bgCanvas && fgCanvas) initBackground(bgCanvas, fgCanvas)
+
+        if (isDesktop && bgCanvas && fgCanvas) {
+          const { initBackground } = await import('../lib/three-bg')
+          initBackground(bgCanvas, fgCanvas)
+        } else {
+          // Mobile: Canvases ausblenden, kein Three.js
+          bgCanvas?.remove()
+          fgCanvas?.remove()
+        }
+
         initScrollAnimations()
 
         // Scroll progress bar
diff --git a/src/pages/datenschutz.astro b/src/pages/datenschutz.astro
@@ -0,0 +1,76 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Datenschutz — NEO" description="Datenschutzerklärung für neo.lietztech.com">
+  <main class="min-h-screen flex items-start justify-center px-4 sm:px-6 pt-24 pb-16">
+    <div class="glass-panel max-w-3xl w-full p-8 sm:p-12 space-y-6">
+      <a href="/" class="text-accent-cyan text-xs font-mono hover:text-accent-purple transition-colors">← Zurück zur Startseite</a>
+
+      <h1 class="text-3xl font-display font-bold bg-gradient-to-r from-accent-purple to-accent-cyan bg-clip-text text-transparent">
+        Datenschutzerklärung
+      </h1>
+
+      <div class="space-y-4 text-text-secondary text-sm leading-relaxed">
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">1. Verantwortlicher</h2>
+          <p>
+            Merlin Lietz<br />
+            E-Mail: <a href="mailto:merlin@lietztech.com" class="text-accent-purple hover:text-accent-cyan transition-colors">merlin@lietztech.com</a>
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">2. Hosting</h2>
+          <p>
+            Diese Website wird auf eigener Hardware (Self-Hosted) betrieben. Der Zugriff erfolgt über
+            Cloudflare Tunnel. Cloudflare kann dabei technische Daten wie IP-Adressen verarbeiten.
+            Weitere Informationen: <a href="https://www.cloudflare.com/privacypolicy/" target="_blank" rel="noopener" class="text-accent-purple hover:text-accent-cyan transition-colors">Cloudflare Privacy Policy</a>.
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">3. Zugriffsdaten / Server-Logs</h2>
+          <p>
+            Beim Besuch dieser Website werden automatisch technische Daten erhoben (z.B. IP-Adresse,
+            Browsertyp, Zeitstempel). Diese Daten werden ausschließlich zur Sicherstellung des Betriebs
+            verwendet und nicht mit anderen Daten zusammengeführt.
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">4. Cookies</h2>
+          <p>
+            Diese Website verwendet keine Cookies und kein Tracking. Es werden keine Analyse-Tools wie
+            Google Analytics eingesetzt.
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">5. Externe Dienste</h2>
+          <p>
+            <strong class="text-text-primary">Google Fonts:</strong> Diese Website lädt Schriftarten von Google Fonts.
+            Dabei wird eine Verbindung zu Servern von Google hergestellt. Weitere Informationen:
+            <a href="https://policies.google.com/privacy" target="_blank" rel="noopener" class="text-accent-purple hover:text-accent-cyan transition-colors">Google Datenschutzerklärung</a>.
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">6. Betroffenenrechte</h2>
+          <p>
+            Sie haben das Recht auf Auskunft, Berichtigung, Löschung und Einschränkung der Verarbeitung
+            Ihrer personenbezogenen Daten. Kontaktieren Sie mich hierfür per E-Mail.
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">7. Kontakt</h2>
+          <p>
+            Bei Fragen zum Datenschutz erreichen Sie mich unter:
+            <a href="mailto:merlin@lietztech.com" class="text-accent-purple hover:text-accent-cyan transition-colors">merlin@lietztech.com</a>
+          </p>
+        </section>
+      </div>
+    </div>
+  </main>
+</BaseLayout>
diff --git a/src/pages/impressum.astro b/src/pages/impressum.astro
@@ -0,0 +1,65 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Impressum — NEO" description="Impressum gemäß §5 TMG für neo.lietztech.com">
+  <main class="min-h-screen flex items-start justify-center px-4 sm:px-6 pt-24 pb-16">
+    <div class="glass-panel max-w-3xl w-full p-8 sm:p-12 space-y-6">
+      <a href="/" class="text-accent-cyan text-xs font-mono hover:text-accent-purple transition-colors">← Zurück zur Startseite</a>
+
+      <h1 class="text-3xl font-display font-bold bg-gradient-to-r from-accent-purple to-accent-cyan bg-clip-text text-transparent">
+        Impressum
+      </h1>
+
+      <div class="space-y-4 text-text-secondary text-sm leading-relaxed">
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">Angaben gemäß § 5 TMG</h2>
+          <p>
+            Merlin Lietz<br />
+            <!-- Postanschrift bitte manuell ergänzen -->
+            <span class="text-text-muted italic">[Anschrift bitte ergänzen]</span>
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">Kontakt</h2>
+          <p>
+            E-Mail: <a href="mailto:merlin@lietztech.com" class="text-accent-purple hover:text-accent-cyan transition-colors">merlin@lietztech.com</a>
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">Verantwortlich für den Inhalt</h2>
+          <p>Merlin Lietz (Anschrift wie oben)</p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">Haftung für Inhalte</h2>
+          <p>
+            Die Inhalte dieser Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und
+            Aktualität der Inhalte kann jedoch keine Gewähr übernommen werden. Als Diensteanbieter bin ich gemäß § 7 Abs. 1
+            TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich.
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">Haftung für Links</h2>
+          <p>
+            Diese Website enthält Links zu externen Websites Dritter, auf deren Inhalte ich keinen Einfluss habe.
+            Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter verantwortlich.
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-accent-cyan font-mono text-xs uppercase tracking-widest mb-2">Urheberrecht</h2>
+          <p>
+            Die durch den Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen
+            Urheberrecht. Beiträge Dritter sind als solche gekennzeichnet. Die Vervielfältigung, Bearbeitung und
+            jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der Zustimmung des jeweiligen
+            Autors bzw. Erstellers.
+          </p>
+        </section>
+      </div>
+    </div>
+  </main>
+</BaseLayout>
