# Diese *Website*

Ohne Framework, ohne Cookies, die Startseite in einer einzigen Datei. Und trotzdem mit fünf Schachrätseln, einer feindlichen KI-Übernahme und zwei Sprachen, die sich in Pixel auflösen.

> Projektseite: https://clemenshoeller.at/projekte/diese-website
> Gattung: web/meta

## Eckdaten

- **Stack** · HTML, CSS, Vanilla JS
- **Hosting** · Vercel + GitHub
- **Seit** · 2026
- **Stand** · wird laufend erweitert

## /01 Das Konzept

Die Seite erzählt eine einzige Idee, und zwar mit ihrer eigenen Bauweise: **zwei Ebenen, eine Schnittstelle**. Hinten liegt eine dunkle Code-Ebene mit Raster und echten Snippets, vorne stehen helle Editorial-Karten mit Serifen-Überschriften. Dazwischen bricht der Code immer wieder durch die schöne Oberfläche.

Das ist keine Dekoration, sondern die Berufsbeschreibung. Wirtschaftsinformatik heißt, zwischen diesen beiden Welten zu übersetzen, und statt das in einen Satz über mich zu schreiben, macht es die Seite vor: Kanten sind angefressen, Karten korrumpieren, Text läuft an den Rissen als Code weiter.

Die gesamte Deko ist JS-generiert und **seeded**: Ein Zufallsgenerator mit festem Startwert erzeugt Risse, Pixel und Glyphen pro Seitenaufruf neu, aber pro Neuaufbau identisch. Deshalb bleibt beim Sprachwechsel die komplette Deko exakt stehen und nur der Text blendet. Ohne das würfelt jeder Wechsel alles neu und das Geflacker macht ihn unruhig.

## /02 Was drinsteckt

### Effekte

- **Decode-Intro.** Der Name im Kopf entsteht aus grünen Mono-Glyphen, flackert und löst sich von links nach rechts auf. Jede Sektionsüberschrift wiederholt das im Kleinen, sobald man sie hereinscrollt.
- **Scroll-Reveal.** Sektionen faden mit leichtem Anstieg ein. Wiederholbar: Verlässt eine Sektion den Viewport ganz, läuft der Effekt beim nächsten Mal erneut.
- **Maus-Spotlight.** Ein akzentfarbener Schein folgt dem Zeiger und hellt per mix-blend-mode: screen nur Dunkles auf. Papier und Text bleiben unberührt, die Code-Ebene und die Risse leuchten mit.
- **Rasterglut.** Neben dem Schein glimmen unter dem Zeiger auch die Rasterlinien der Code-Ebene selbst auf, und die Code-Schnipsel in seiner Nähe werden kurz lesbar. Ein Canvas hinter dem Papier malt nur die Linienstücke im Umkreis, der Effekt kostet deshalb keine Bildrate. Die dunklen Fenster in den Karten tragen eigene kleine Canvases, pixelgenau ausgerichtet, damit die Glut über deren Kanten hinweg fluchtet.
- **Pixel-Risse.** Hero, Erfahrung, Ausbildung, Skills, Projekte und Kontakt haben aufgerissene Kanten mit Rinnsalen, Tropfen und Pools. Jede Risstiefe wird aus den echten Elementpositionen gedeckelt, damit nie Inhalt weggeschnitten wird.
- **Korrumpierte Karte.** Die Projektkarte über diese Website ist selbst befallen: rechte Hälfte dunkel, Zeichen kippen laufend in grüne Mono-Glyphen, alle sieben Sekunden ein Zucken.

### Zwei Easter Eggs

- **Die Schach-Ecke.** Fünf spielbare Rätsel in aufsteigender Schwierigkeit, von Matt in 1 bis zu Philidors ersticktem Matt in 4. Drag & Drop oder Klick-Klick, Schwarz antwortet gescriptet und animiert, nach drei Fehlversuchen gibt es einen Hinweis. Jede Stellung ist handverifiziert: Jede Antwort ist erzwungen oder alle Alternativen sind ebenfalls matt.
- **ai_takeover.exe.** Der Button in der Fußzeile startet eine KI-Übernahme: bis zu 4.000 Pixel fluten die Seite, sämtliche Texte korrumpieren zeichenweise, eine Prozentzahl zählt hoch, und bei 100 % tippt sich ein KI-Log mit einer Pointe ins Bild. Danach stellt sich alles zeichengenau wieder her, weil die Originaltexte vorher in einer Map gesichert werden.

### Zwei Sprachen, ein Pflegeort

Deutsch steht im HTML, Englisch in einem Wörterbuch im Skript, das per CSS-Selektor tauscht. Ein Pflegeort, drei Auslieferungen: Die Seite hat drei sehr verschiedene Leser, und nur einer davon führt JavaScript aus.

- **Der Leser mit Browser.** Sichtbare Karten lösen sich in bis zu 180 Partikel auf, gut die Hälfte davon grüne Code-Glyphen. Nach 240 Millisekunden steht die Karte auf unsichtbar, genau dort wird getauscht, dann kommt sie in 50-Millisekunden-Staffeln zurück und die Überschriften decodieren neu. Damit dabei nichts springt, wird jede Karte vorher auf die größere der beiden Sprachhöhen genagelt.
- **Der Leser ohne JavaScript.** /en war lange nur eine Umschreibung auf dieselbe deutsche Datei. Im Browser sah das englisch aus, für LinkedIn, Slack und die meisten KI-Crawler lag dort aber deutsches Roh-HTML mit deutschem Titel, dazu ein Canonical auf /, während die hreflang-Tags Englisch behaupteten. Solche Widersprüche löst Google zugunsten des Canonicals auf, die englische Fassung rankt dann nie. Heute baut ein Node-Skript aus dem deutschen Original echte englische Dateien, für die Startseite und für alle Projektseiten.
- **Der Generator ist zugleich der Test.** Er zieht das Wörterbuch aus dem Original und dupliziert nichts, und er bricht laut ab, sobald einer seiner Selektoren ins Leere greift. Genau das passiert beim Umsortieren zweier Blöcke, wenn ein nth-of-type still auf den falschen zeigt. Früher fiel so ein Bruch erst live auf, jetzt vor dem Commit.
- **Der Leser ohne CSS.** Die Projektseiten tragen beide Sprachen nebeneinander im HTML, das CSS blendet die jeweils andere aus. Das erspart die Umsortier-Fallen des Wörterbuchs, ergibt ohne Stylesheet aber einen Text, in dem sich deutsche und englische Sätze abwechseln, und die Diagrammwerte entstehen ohnehin erst per JavaScript aus data-n. Deshalb liegt neben jeder Seite eine Markdown-Fassung: einsprachig, Balken als Aufzählung, Matrizen als Tabelle.

## /03 Wie sie betrieben wird

- Frameworks: 0 kein React, kein Build
- Cookies: 0 Analytics cookielos
- Hauptseite: 1 Datei HTML, CSS und JS inline
- Sprachen: 2 DE und EN je eigene URL

### Stack und Auslieferung

- **Vercel** als Hosting, angebunden an **GitHub**: Ein Push auf main ist das Deployment. Kein Build-Schritt, weil es nichts zu bauen gibt.
- **Zwei Domains**, clemenshoeller.at und clemenshöller.at. Alle Nebenvarianten inklusive www und der Punycode-Fassung laufen als dauerhafte Weiterleitung auf die Hauptdomain, wobei der Pfad erhalten bleibt.
- **Sprach-URLs:** / ist deutsch, /en englisch, beide als eigene Datei aus derselben Quelle generiert. Der Pfad gewinnt über die gemerkte Sprachwahl, damit ein geteilter Link richtig aufmacht.
- **Deeplinks** auf einzelne Projekte: /#gvc springt zur Projektsektion und öffnet direkt das passende Fenster. Praktisch für Bewerbungen.
- **Eigene Projektseiten** unter /projekte/, je eine pro Projektkarte, erreichbar über „Mehr erfahren“ im Projekt-Fenster. Sie teilen sich ein Stylesheet und ein Skript und tragen dieselben Effekte wie die Startseite.
- **Eigene 404-Seite** im selben Zwei-Ebenen-Look, mit gekürzter Navigation, eigenem Sprach-Wörterbuch und derselben Wechsel-Choreografie.

### Sicherheit

Die Seite setzt Security-Header, unter anderem nosniff, eine strenge Referrer-Policy, X-Frame-Options gegen Einbettung, eine Permissions-Policy, die Kamera, Mikrofon und Standort abschaltet, und eine **Content Security Policy**, die alle Quellen auf die eigene Domain begrenzt. Das ist der Grund, warum es hier keine Chart-Library und keine geladenen Schriften gibt: Die Diagramme auf den Projektseiten sind HTML und CSS, die Schriften kommen aus dem System.

## /04 Wie sie gefunden wird

Die Seite ist bewusst offen für Maschinen gebaut, und zwar für zwei Sorten: klassische Suchmaschinen und Sprachmodelle, die für Recruiter recherchieren.

- **llms.txt** im Wurzelverzeichnis fasst Profil, Skills, Projekte, Dokumente und Kontakt in einer maschinenlesbaren Datei zusammen. Wenn ein Modell diese Seite liest, muss es die Kernfakten nicht aus der Deko herausklauben.
- **sitemap.xml** mit allen Seiten, Dokumenten und beiden Sprachfassungen, jeweils mit hreflang-Verweisen aufeinander.
- **Strukturierte Daten** als JSON-LD: Person, Rolle, Arbeitgeber, Ausbildung und Themen auf der Startseite, wissenschaftliche Arbeit je Projektseite.
- **Eine permissive robots.txt.** Kein Ausschluss von KI-Crawlern, weil genau das hier der Punkt ist.
- **Favicon als echte Dateien** in vier Formaten statt als data-URI. Google konnte die eingebettete Variante nicht crawlen, und ohne gecrawltes Favicon steht in den Suchergebnissen nur ein grauer Platzhalter.

### Was mich das gelehrt hat

Vor allem, dass die Details die Arbeit sind. Eine Karte, die beim Sprachwechsel um vier Pixel springt, fällt sofort auf. Ein Riss, der zwei Prozent zu tief geht, frisst eine Textzeile. Ein Decode-Effekt, dessen Mono-Glyphen breiter sind als die Serifen, lässt eine Überschrift kurz zweizeilig umbrechen und die ganze Karte hüpfen. Nichts davon steht in einem Tutorial, alles davon merkt man erst, wenn man es sich hundertmal ansieht.

Und dass „ohne Framework“ keine Härteprüfung ist, sondern eine Entscheidung mit Konsequenzen: Man schreibt mehr selbst, versteht dafür jede Zeile, und die Seite lädt in einem einzigen Request.

**Skills daraus:** HTML / CSS / JS · Interaktionsdesign · Barrierefreiheit · Technisches SEO · Security-Header & CSP · Vercel & Git · Zweisprachige Umsetzung

## /05 Verwandte Projekte

Die Projekte hängen stärker zusammen, als die Kacheln auf der Startseite vermuten lassen. Hier stehen alle anderen, sortiert nach Nähe zu diesem Projekt:

- [Prompt Injection](https://clemenshoeller.at/projekte/prompt-injection)
- [KI-Automatisierungen](https://clemenshoeller.at/projekte/ki-automatisierungen)
- [Google vs. ChatGPT](https://clemenshoeller.at/projekte/google-vs-chatgpt)
- [Healthcare Fraud Detection](https://clemenshoeller.at/projekte/fraud-detection)
- [LLMs & Kreativität](https://clemenshoeller.at/projekte/llms-kreativitaet)
- [Consulting-Cases](https://clemenshoeller.at/projekte/consulting-cases)
- [AURORA](https://clemenshoeller.at/projekte/aurora)
- [Zotter-Marketingplan](https://clemenshoeller.at/projekte/zotter-marketingplan)
- [AI Talent Gap](https://clemenshoeller.at/projekte/ai-talent-gap)
- [VWA: Entstehung des Internets](https://clemenshoeller.at/projekte/vwa)

---
*Englische Fassung: https://clemenshoeller.at/en/projects/diese-website.md*
*Wie clemenshoeller.at gebaut ist: zwei Ebenen als Konzept, Pixel-Zerfall und Decode-Effekte, Schachrätsel und ein KI-Übernahme-Easter-Egg, betrieben über Vercel und GitHub, ohne Framework und ohne Cookies.*