# This *Website*

No framework, no cookies, the home page in a single file. And still with five chess puzzles, a hostile AI takeover and two languages that dissolve into pixels.

> Project page: https://clemenshoeller.at/en/projects/diese-website
> Category: web/meta

## Key facts

- **Stack** · HTML, CSS, Vanilla JS
- **Hosting** · Vercel + GitHub
- **Since** · 2026
- **Status** · continuously growing

## /01 The concept

The site tells a single idea, and it tells it through its own construction: **two layers, one interface**. Behind sits a dark code layer with a grid and real snippets, in front stand light editorial cards with serif headlines. And the code keeps breaking through that polished surface.

That is not decoration but the job description. Business informatics means translating between those two worlds, and instead of writing a sentence about myself, the site demonstrates it: edges are eaten away, cards corrupt, text continues as code where it tears open.

All decoration is JS-generated and **seeded**: a random generator with a fixed seed produces tears, pixels and glyphs anew per page load but identically per rebuild. That is why the entire decoration stays exactly in place during a language switch and only the text fades. Without it, every switch reshuffles everything and the flicker makes it restless.

## /02 What is in it

### Effects

- **Decode intro.** The name in the header forms out of green mono glyphs, flickers and resolves left to right. Every section heading repeats that in miniature as you scroll it into view.
- **Scroll reveal.** Sections fade in with a slight rise. Repeatable: once a section leaves the viewport entirely, the effect runs again next time.
- **Mouse spotlight.** An accent-colored glow follows the pointer and, via mix-blend-mode: screen, brightens only dark areas. Paper and text stay untouched while the code layer and the tears light up.
- **Grid glow.** Next to the glow, the grid lines of the code layer themselves light up under the pointer, and the code snippets near it briefly become readable. A canvas behind the paper draws only the line segments within reach, so the effect costs no frame rate. The dark windows inside the cards carry their own small canvases, pixel-aligned so the glow lines up across their edges.
- **Pixel tears.** Hero, experience, education, skills, projects and contact have torn edges with trickles, drips and pools. Every tear depth is capped from the real element positions so content never gets cut off.
- **Corrupted card.** The project card about this website is infected itself: right half dark, characters constantly flipping into green mono glyphs, a twitch every seven seconds.

### Two easter eggs

- **The chess corner.** Five playable puzzles in ascending difficulty, from mate in 1 to Philidor's smothered mate in 4. Drag and drop or click-click, Black responds with scripted animated moves, and after three failed attempts you get a hint. Every position is hand-verified: each response is forced, or every alternative is also mate.
- **ai_takeover.exe.** The footer button starts an AI takeover: up to 4,000 pixels flood the page, all texts corrupt character by character, a percentage counts up, and at 100% an AI log types itself onto the screen with a punchline. Afterwards everything restores character-perfect, because the original texts were saved into a map beforehand.

### Two languages, one source

German sits in the HTML, English in a dictionary in the script that swaps by CSS selector. One place to edit, three things shipped: this site has three very different readers, and only one of them runs JavaScript.

- **The reader with a browser.** Visible cards dissolve into up to 180 particles, more than half of them green code glyphs. At 240 milliseconds the card sits at invisible, which is exactly when the text is swapped, then it returns in 50-millisecond stages while the headings decode anew. So that nothing jumps, every card is pinned beforehand to the taller of the two language heights.
- **The reader without JavaScript.** /en was long just a rewrite onto the same German file. In a browser it looked English, but LinkedIn, Slack and most AI crawlers found raw German HTML with a German title there, plus a canonical pointing at /, while the hreflang tags claimed English. Google resolves contradictions like that in favor of the canonical, so the English version never ranks. Today a Node script builds real English files out of the German original, for the home page and for all project pages.
- **The generator doubles as the test.** It pulls the dictionary out of the original, duplicating nothing, and fails loudly the moment one of its selectors grabs at nothing. Which is what happens when two blocks get reordered and an nth-of-type quietly points at the wrong one. That break used to surface only in production, now before the commit.
- **The reader without CSS.** The project pages carry both languages side by side in the HTML and the CSS hides the other one. That avoids the reordering traps of the dictionary, but without a stylesheet it reads as German and English sentences alternating, and the chart values only come into being through JavaScript from data-n anyway. So next to every page sits a Markdown version: single-language, bars as a list, matrices as a table.

## /03 How it runs

- Frameworks: 0 no React, no build step
- Cookies: 0 cookieless analytics
- Main page: 1 file HTML, CSS and JS inline
- Languages: 2 DE and EN, own URL each

### Stack and delivery

- **Vercel** for hosting, wired to **GitHub**: a push to main is the deployment. No build step, because there is nothing to build.
- **Two domains**, clemenshoeller.at and clemenshöller.at. All secondary variants including www and the punycode version run as permanent redirects to the main domain, preserving the path.
- **Language URLs:** / is German, /en English, each shipped as its own file generated from the same source. The path wins over the remembered language choice, so a shared link opens correctly.
- **Deep links** to individual projects: /#gvc jumps to the projects section and opens the matching panel directly. Useful for applications.
- **Dedicated project pages** under /projekte/, one per project card, reachable through “Read more” in the project panel. They share one stylesheet and one script and carry the same effects as the home page.
- **A custom 404 page** in the same two-layer look, with a shortened navigation, its own language dictionary and the same switching choreography.

### Security

The site sets security headers, among them nosniff, a strict referrer policy, X-Frame-Options against embedding, a permissions policy that switches off camera, microphone and location, and a **content security policy** restricting all sources to the site's own domain. That is why there is no chart library and no loaded fonts here: the diagrams on the project pages are HTML and CSS, and the typefaces come from the system.

## /04 How it gets found

The site is deliberately built to be open to machines, of two kinds: classic search engines and language models researching on behalf of recruiters.

- **llms.txt** in the root sums up profile, skills, projects, documents and contact in one machine-readable file. When a model reads this site, it does not have to dig the core facts out of the decoration.
- **sitemap.xml** with all pages, documents and both language versions, each with hreflang references to the other.
- **Structured data** as JSON-LD: person, role, employer, education and topics on the home page, and a scholarly-article record per project page.
- **A permissive robots.txt.** No exclusion of AI crawlers, because that is exactly the point here.
- **Favicon as real files** in four formats instead of a data URI. Google could not crawl the embedded variant, and without a crawled favicon the search results only show a grey placeholder.

### What it taught me

Above all that the details are the work. A card that jumps four pixels during a language switch is immediately noticeable. A tear that goes two percent too deep eats a line of text. A decode effect whose mono glyphs are wider than the serifs makes a heading briefly wrap onto two lines and the whole card hop. None of that is in a tutorial, and all of it only shows up once you have looked at it a hundred times.

And that "no framework" is not a test of toughness but a decision with consequences: you write more yourself, in exchange you understand every line, and the page loads in a single request.

**Skills gained:** HTML / CSS / JS · Interaction design · Accessibility · Technical SEO · Security headers & CSP · Vercel & Git · Bilingual delivery

## /05 Related projects

These projects connect more tightly than the tiles on the home page suggest. Here are all the others, sorted by how closely they relate to this one:

- [Prompt Injection](https://clemenshoeller.at/projekte/prompt-injection)
- [AI Automations](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 & Creativity](https://clemenshoeller.at/projekte/llms-kreativitaet)
- [Consulting Cases](https://clemenshoeller.at/projekte/consulting-cases)
- [AURORA](https://clemenshoeller.at/projekte/aurora)
- [Zotter Marketing Plan](https://clemenshoeller.at/projekte/zotter-marketingplan)
- [AI Talent Gap](https://clemenshoeller.at/projekte/ai-talent-gap)
- [VWA: Origin of the Internet](https://clemenshoeller.at/projekte/vwa)

---
*German version: https://clemenshoeller.at/projekte/diese-website.md*
*How clemenshoeller.at is built: two layers as a concept, pixel decay and decode effects, chess puzzles and an AI takeover easter egg, running on Vercel and GitHub, without a framework and without cookies.*