Wie diese Seite programmiert wurde

Kein Framework

Diese Seite läuft ohne React, Vue oder sonst was. Nur reines HTML, CSS und ein paar Zeilen JavaScript. Kein Build-Schritt, kein npm install — eine Datei öffnen, im Browser anschauen, fertig. Für eine kleine Seite mit ein paar Unterseiten ist das mehr als genug und bleibt einfach wartbar.

Struktur der Dateien

Jede Unterseite ist eine eigene .html-Datei, die sich ein gemeinsames Stylesheet teilt:

Ordnerstruktur

index.html        → Startseite
guides.html       → Übersicht aller Guides
guides/           → einzelne Guide-Artikel
css/style.css     → ein zentrales Stylesheet für alle Seiten
images/           → Favicon & Assets

Jede Seite bindet dasselbe style.css ein, dadurch sieht alles konsistent aus, ohne dass CSS mehrfach gepflegt werden muss.

Design: dunkel, minimal, monospace

Die Schrift ist Geist Mono von Google Fonts, per @import eingebunden. Farben liegen als CSS-Variablen im :root, dadurch lässt sich das ganze Farbschema an einer Stelle ändern:

css/style.css

:root {
  --bg: #0f0f0f;
  --text: #ededed;
  --muted: #888;
  --border: #2a2a2a;
  --subtle: #555;
}

Der gesamte Inhalt steckt in einem .page-Container mit max-width: 560px — das hält Zeilen kurz und angenehm lesbar, egal wie breit der Bildschirm ist.

Kleine JavaScript-Spielereien

Auf der Startseite läuft eine kleine Uhr, die die lokale Zeit (UTC+2) jede Sekunde neu berechnet und anzeigt:

index.html

function tick() {
  const now = new Date();
  const utc = now.getTime() + now.getTimezoneOffset() * 60000;
  const local = new Date(utc + 2 * 3600000);
  // ... Stunden/Minuten formatieren und anzeigen
}
setInterval(tick, 1000);

Der Minecraft-Skin und die UUID unter "Minecraft" kommen nicht von mir selbst eingetragen, sondern werden live per fetch() von der playerdb.co-API geladen — ändert sich der Skin, muss ich nichts anpassen.

Der "Kopieren"-Button in Guides

Jeder Code-Block in diesen Guides hat einen Button, der den Text per navigator.clipboard.writeText() in die Zwischenablage kopiert und kurz "Kopiert!" anzeigt:

JavaScript

function copy(id, btn) {
  navigator.clipboard.writeText(document.getElementById(id).textContent);
  btn.textContent = 'Kopiert!';
  setTimeout(() => btn.textContent = 'Kopieren', 2000);
}

Warum so simpel?

Kein Framework heißt: keine Abhängigkeiten, die irgendwann veraltet sind, kein Build-Prozess, der kaputtgehen kann, und jede Datei lässt sich in Sekunden verstehen und anpassen. Für eine persönliche Seite mit ein paar Unterseiten ist das genau richtig — Komplexität nur dort, wo sie wirklich etwas bringt.