Merge pull request 'feature/Update' (#38) from feature/Update into main

Reviewed-on: #38

.gitattributes

@@ -34,7 +34,7 @@ Dockerfile  text eol=lf
 *.adoc text eol=lf
 *.txt  text eol=lf
 *.csv  text eol=lf
-*.svg  text eol=lf   # svg ist Text
+*.svg  text eol=lf
 
 # ---- binary files never convert ----
 *.jar  binary

.gitea/workflows/build-Frontend-a.yml

@@ -52,21 +52,24 @@ jobs:
       - name: Lint & Type Check
         run: npm run lint --if-present
 
-      # 2. Unit Tests (Logik) Not necessary, because atm no tests written
+      # 2. i18n key sync (en/de must share the same keys)
-      #- name: Unit Tests
+      - name: i18n Key Check
-      #  run: npx ng test --watch=false --browsers=ChromeHeadless
+        run: npm run i18n:check
 
-      # 3. Build Production (necessary for lighthouse)      
+      # 3. Unit Tests (Logic) — browser/launcher configured in karma.conf.js
+      - name: Unit Tests
+        run: npx ng test --watch=false
+
+      # 4. Build Production (necessary for lighthouse)
       - name: Build Production
         run: npx ng build --configuration production
 
-      # 4. Lighthouse Audit (Performance & SEO)
+      # 5. Lighthouse Audit (Performance & SEO)
-      - name: Install Puppeteer
+      # Puppeteer is a devDependency, so `npm ci` already installed it and
-        run: npm install puppeteer --no-save
+      # downloaded Chrome. executablePath() is async in Puppeteer v25, so await it.
-      
       - name: Lighthouse CI
         run: |
-          CHROME_PATH=$(node -e 'console.log(require("puppeteer").executablePath())')                    
+          CHROME_PATH=$(node -e 'require("puppeteer").executablePath().then(p => console.log(p))')
           export CHROME_PATH=$CHROME_PATH
           npx lhci autorun
 

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

CLAUDE.md

@@ -10,7 +10,7 @@ This is the frontend of the Playground project, built with Angular 21 and Angula
 *   **Internationalization:** ngx-translate
 *   **Server:** NGINX (for serving the SPA)
 *   **Containerization:** Docker
-*   **CI/CD:** GitHub Actions
+*   **CI/CD:** Gitea Actions (self-hosted, `git.andreas-dahm.eu`)
 
 ## Building and Running
 
@@ -77,7 +77,7 @@ ng build
 
 *   **Language:** TypeScript
 *   **Framework:** Angular
-*   **Styling:** Tailwind CSS (v3) is the primary styling approach. Use utility classes in templates. SCSS (`styles.scss`) is only for Angular Material theme setup, Material component overrides with `!important`, Swiper `::part()` selectors, and component `:host` blocks. Shared Tailwind component classes live in `src/tailwind.css` via `@layer components`.
+*   **Styling:** Tailwind CSS (v4, CSS-first config) is the primary styling approach. Use utility classes in templates. Theme tokens and custom variants are declared in `src/tailwind.css` via `@theme` and `@custom-variant` — there is no `tailwind.config.js`. Preflight stays disabled by importing `tailwindcss/theme.css` and `tailwindcss/utilities.css` individually, so Angular Material's reset stays in charge. SCSS (`styles.scss`) is only for Angular Material theme setup, Material component overrides with `!important`, Swiper `::part()` selectors, and component `:host` blocks. Shared Tailwind component classes live in `src/tailwind.css` via `@utility`.
 *   **Linting:** ESLint is configured (see `eslint.config.js` and `package.json` scripts).
 *   **Internationalization:** Uses `ngx-translate` with `en.json` and `de.json` asset files.
 

Dockerfile

@@ -1,6 +1,8 @@
 # Build
 FROM node:22-alpine AS build
 WORKDIR /app
+# The production build never runs tests, so skip Puppeteer's Chrome download.
+ENV PUPPETEER_SKIP_DOWNLOAD=1
 COPY package*.json ./
 RUN npm ci
 COPY . .

README.md

@@ -1,9 +1,8 @@
-## 📗 `playground-frontend/README.md`
-
 # 🎨 Playground Frontend
 
 This is the **frontend** of the Playground project.
-Built with **Angular 21** and **Angular Material**, including a simple light/dark theme toggle and multi-language support via **ngx-translate**.
+Built with **Angular 21** and **Angular Material**, including a light/dark theme toggle and
+multi-language support (EN/DE) via **ngx-translate**.
 
 The app is built as a static **Single Page Application (SPA)** served by **NGINX**,
 deployed at:
@@ -12,84 +11,136 @@ deployed at:
 ---
 
 ## 🧩 Tech Stack
+
 | Component | Purpose |
-|------------|----------|
+| --------- | ------- |
-| Angular 21 | Frontend framework |
+| Angular 21 | Frontend framework (standalone components, signals, zoneless change detection) |
-| Angular Material | UI components & theming |
+| Angular Material 21 | UI components & theming |
-| ngx-translate | i18n / instant translation |
+| Tailwind CSS 4 | Utility-first styling (CSS-first config, no `tailwind.config.js`) |
+| ngx-translate 18 | i18n / instant translation |
+| Babylon.js 9 | WebGL/WebGPU rendering for the algorithm demos |
+| Swiper 14 | Image carousels in the project dialogs |
+| Angular Service Worker | PWA / offline caching |
 | NGINX | Serves the compiled SPA |
-| Docker + GitHub Actions | Automated build & image publishing |
+| Docker + Gitea Actions | Automated build, test & image publishing |
+
+Requires **Node.js 22**.
 
 ---
 
 ## 📁 Project Structure
+
+```
 playground-frontend/
 ├─ src/
-│ ├─ app/
+│  ├─ app/
-│ │ ├─ app.component.ts
+│  │  ├─ layout/            # app shell, topbar, dialogs
-│ │ ├─ theme.service.ts
+│  │  ├─ pages/             # about, projects, algorithms, imprint, stopwatch, not-found
-│ │ └─ ...
+│  │  ├─ service/           # theme, language, SEO, GPU capability
-│ ├─ assets/i18n/
+│  │  ├─ shared/            # reusable components & helpers
-│ │ ├─ en.json
+│  │  ├─ constants/
-│ │ └─ de.json
+│  │  ├─ app.config.ts
-│ └─ index.html
+│  │  └─ app.routes.ts
+│  ├─ assets/
+│  │  ├─ i18n/              # en.json / de.json (keys must stay in sync)
+│  │  ├─ logos/, flags/, icons/
+│  │  └─ projects/          # project screenshots
+│  ├─ tailwind.css          # Tailwind entry + @theme tokens
+│  ├─ styles.scss           # Material theme setup & component overrides
+│  └─ index.html
+├─ scripts/check-i18n.mjs   # fails the build on i18n key drift
 ├─ Dockerfile
 ├─ nginx.conf
-└─ .github/workflows/docker.yml
+├─ ngsw-config.json         # service worker caching rules
+├─ lighthouserc.json
+└─ .gitea/workflows/build-Frontend-a.yml
+```
 
 ---
 
 ## 🚀 Local Development
 
-# 1. Install dependencies
+**1. Install dependencies**
 ```bash
 npm install
 ```
 
-# 2. Start development server
+**2. Start development server**
 ```bash
 ng serve --open
 ```
-
 App runs at http://localhost:4200
 
-
+**3. Docker build (local)**
-# 3. 🐳 Docker Build (local)
 ```bash
 docker build -t playground-frontend:local .
 docker run -p 8080:80 playground-frontend:local
 ```
-
 Then open http://localhost:8080
 
-## ⚙️ GitHub Actions (CI/CD)
+---
 
-On every push to main, GitHub Actions will:
+## 🧪 Scripts
 
-Build the Angular project
+| Command | Purpose |
+| ------- | ------- |
+| `npm start` | Dev server |
+| `npm run build` | Production build |
+| `npm run watch` | Rebuild on change (development configuration) |
+| `npm test` | Unit tests (Karma + Jasmine, headless Chrome) |
+| `npm run lint` | ESLint over `src/**/*.ts` and `src/**/*.html` |
+| `npm run i18n:check` | Verifies `en.json` and `de.json` share the exact same keys |
 
-1. Create a Docker image
+---
-2. Push it to Docker Hub (docker.io/andreasdahm/playground-frontend:main)
-3. Workflow file: .github/workflows/docker.yml
 
-Required repository secrets:
+## ⚙️ Gitea Actions (CI/CD)
 
-Name	Description
+CI/CD runs on a **self-hosted Gitea instance** at `git.andreas-dahm.eu`.
-DOCKERHUB_USERNAME	Your Docker Hub username
+Workflow file: `.gitea/workflows/build-Frontend-a.yml`
-DOCKERHUB_TOKEN	Personal access token for Docker Hub
+
+Triggered on every push to `main` and on pull requests targeting `main`.
+
+**Job 1 — `quality-check`** (runs on both pushes and PRs):
+
+1. Lint & type check — `npm run lint`
+2. i18n key sync — `npm run i18n:check`
+3. Unit tests — `npx ng test --watch=false`
+4. Production build — `npx ng build --configuration production`
+5. Lighthouse audit — `npx lhci autorun` (performance & SEO)
+
+**Job 2 — `docker`** (only on a push to `main`, and only if `quality-check` passed):
+
+Builds the image and pushes it to the Gitea container registry at `git.andreas-dahm.eu`
+with these tags:
+
+```
+git.andreas-dahm.eu/<owner>/playground:frontend-a-<branch>
+git.andreas-dahm.eu/<owner>/playground:frontend-a-<branch>-<short-sha>
+git.andreas-dahm.eu/<owner>/playground:frontend-a-main
+```
+
+**Required repository secret:**
+
+| Name | Description |
+| ---- | ----------- |
+| `TOKEN_GITEA` | Gitea access token used to authenticate against the container registry |
+
+---
 
 ## 🌐 Deployment
 
-The built image is deployed via
+The built image is deployed via the `playground-deploy` repository on the Hostinger KVM
-https://github.com/lobothedark/playground-deploy
+server using **Traefik**:
-
-on the Hostinger KVM server using Traefik.
 
+```bash
 docker compose pull
 docker compose up -d
+```
 
 ✅ Live site at https://app.andreas-dahm.eu
 
+---
+
 ## 🪄 Maintainer
 
 Andreas Dahm

angular.json

@@ -29,6 +29,7 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/assets/favicon.ico",
+              "src/manifest.webmanifest",
               {
                 "glob": "**/*",
                 "input": "public"
@@ -59,7 +60,8 @@
                   "maximumError": "8kB"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "serviceWorker": "ngsw-config.json"
             },
             "development": {
               "optimization": false,
@@ -87,6 +89,7 @@
         "test": {
           "builder": "@angular/build:karma",
           "options": {
+            "karmaConfig": "karma.conf.js",
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": [

karma.conf.js

@@ -0,0 +1,43 @@
+const os = require('os');
+const path = require('path');
+const { computeExecutablePath, Browser } = require('@puppeteer/browsers');
+const puppeteer = require('puppeteer');
+
+// Resolve the Chrome that Puppeteer downloaded so tests run without a
+// system-installed browser, both locally and in CI containers.
+// Puppeteer v25 made executablePath() async, which a sync karma.conf cannot
+// await — so we compute the path synchronously via @puppeteer/browsers instead.
+const buildId = puppeteer.PUPPETEER_REVISIONS.chrome;
+const cacheDir = process.env.PUPPETEER_CACHE_DIR || path.join(os.homedir(), '.cache', 'puppeteer');
+process.env.CHROME_BIN = computeExecutablePath({ browser: Browser.CHROME, buildId, cacheDir });
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+    ],
+    jasmineHtmlReporter: {
+      suppressAll: true,
+    },
+    coverageReporter: {
+      dir: path.join(__dirname, 'coverage', 'playground-frontend'),
+      subdir: '.',
+      reporters: [{ type: 'html' }, { type: 'text-summary' }],
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['ChromeHeadlessNoSandbox'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        // CI containers run as root with no sandbox; /dev/shm is often too small.
+        flags: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage'],
+      },
+    },
+    restartOnFileChange: true,
+  });
+};

nginx.conf

@@ -11,6 +11,30 @@ server {
     try_files $uri =404;
   }
 
+  # Service worker control files must never be cached hard, otherwise the
+  # PWA can no longer pick up new deployments. Exact matches win over the
+  # generic *.js rule below.
+  location = /ngsw-worker.js {
+    add_header Cache-Control "no-cache, max-age=0, must-revalidate";
+    try_files $uri =404;
+  }
+  location = /ngsw.json {
+    add_header Cache-Control "no-cache, max-age=0, must-revalidate";
+    try_files $uri =404;
+  }
+  location = /safety-worker.js {
+    add_header Cache-Control "no-cache, max-age=0, must-revalidate";
+    try_files $uri =404;
+  }
+  location = /worker-basic.min.js {
+    add_header Cache-Control "no-cache, max-age=0, must-revalidate";
+    try_files $uri =404;
+  }
+  location = /manifest.webmanifest {
+    add_header Cache-Control "no-cache, max-age=0, must-revalidate";
+    try_files $uri =404;
+  }
+
   # Angular Bundles cache hard
   location ~* \.(?:js|css)$ {
     add_header Cache-Control "public, max-age=31536000, immutable";

ngsw-config.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ],
+  "dataGroups": [
+    {
+      "name": "i18n",
+      "urls": ["/assets/i18n/**"],
+      "cacheConfig": {
+        "maxSize": 10,
+        "maxAge": "7d",
+        "strategy": "freshness"
+      }
+    }
+  ]
+}

package.json

@@ -7,44 +7,58 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "lint": "ng lint"
+    "lint": "ng lint",
+    "i18n:check": "node scripts/check-i18n.mjs"
   },
   "private": true,
   "dependencies": {
     "@angular-slider/ngx-slider": "^21.0.0",
-    "@angular/animations": "~21.2.9",
+    "@angular/animations": "~21.2.21",
     "@angular/cdk": "~21.2.6",
-    "@angular/common": "~21.2.9",
+    "@angular/common": "~21.2.21",
-    "@angular/compiler": "~21.2.9",
+    "@angular/compiler": "~21.2.21",
-    "@angular/core": "~21.2.9",
+    "@angular/core": "~21.2.21",
-    "@angular/forms": "~21.2.9",
+    "@angular/forms": "~21.2.21",
     "@angular/material": "~21.2.6",
-    "@angular/platform-browser": "~21.2.9",
+    "@angular/platform-browser": "~21.2.21",
-    "@angular/router": "~21.2.9",
+    "@angular/router": "~21.2.21",
-    "@babylonjs/core": "^8.54.1",
+    "@angular/service-worker": "~21.2.21",
-    "@ngx-translate/core": "^17.0.0",
+    "@babylonjs/core": "^9.22.0",
-    "@ngx-translate/http-loader": "^17.0.0",
+    "@ngx-translate/core": "^18.0.0",
-    "inquirer": "^13.3.0",
+    "@ngx-translate/http-loader": "^18.0.0",
     "rxjs": "~7.8.2",
-    "swiper": "~12.1.0",
+    "swiper": "^14.1.0",
     "tslib": "~2.8.1"
   },
   "devDependencies": {
-    "@angular/build": "~21.2.7",
+    "@angular/build": "~21.2.21",
     "@angular/cli": "~21.2.7",
-    "@angular/compiler-cli": "~21.2.9",
+    "@angular/compiler-cli": "~21.2.21",
     "@eslint/js": "~10.0.1",
     "@lhci/cli": "^0.15.1",
+    "@puppeteer/browsers": "3.2.1",
+    "@tailwindcss/postcss": "^4.3.3",
     "@types/jasmine": "~6.0.0",
+    "@webgpu/types": "^0.1.72",
     "angular-eslint": "21.3.1",
     "eslint": "^10.0.3",
-    "jasmine-core": "~6.1.0",
+    "jasmine-core": "^7.0.2",
-    "tailwindcss": "^3.4.19",
+    "karma": "^6.4.4",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage": "^2.2.1",
+    "karma-jasmine": "^5.1.0",
+    "karma-jasmine-html-reporter": "^2.2.0",
+    "puppeteer": "^25.1.0",
+    "tailwindcss": "^4.3.3",
     "typescript": "~5.9.3",
-    "typescript-eslint": "8.58.2"
+    "typescript-eslint": "^8.67.0"
   },
   "overrides": {
     "tmp": "^0.2.3",
-    "ip-address": "^10.1.1"
+    "ip-address": "^10.1.1",
+    "@lhci/cli": {
+      "lighthouse": "^13.4.1",
+      "uuid": "^11.1.1"
+    }
   }
 }

scripts/check-i18n.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+// Verifies that all i18n translation files share the exact same set of keys.
+// Exits with a non-zero status (and prints the differences) if any key is
+// present in one language but missing in another, so CI can catch drift.
+
+import { readFileSync, readdirSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const scriptDir = dirname(fileURLToPath(import.meta.url));
+const i18nDir = join(scriptDir, '..', 'src', 'assets', 'i18n');
+
+function collectLeafKeys(value, prefix, keys) {
+  for (const key of Object.keys(value)) {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    const child = value[key];
+    const isNestedObject = child !== null && typeof child === 'object' && !Array.isArray(child);
+    if (isNestedObject) {
+      collectLeafKeys(child, fullKey, keys);
+    } else {
+      keys.add(fullKey);
+    }
+  }
+  return keys;
+}
+
+function loadKeys(fileName) {
+  const content = readFileSync(join(i18nDir, fileName), 'utf8');
+  const parsed = JSON.parse(content);
+  return collectLeafKeys(parsed, '', new Set());
+}
+
+const files = readdirSync(i18nDir).filter((name) => name.endsWith('.json'));
+if (files.length < 2) {
+  console.log('i18n check: nothing to compare (fewer than two language files).');
+  process.exit(0);
+}
+
+const keysByFile = new Map(files.map((file) => [file, loadKeys(file)]));
+
+const allKeys = new Set();
+for (const keys of keysByFile.values()) {
+  for (const key of keys) {
+    allKeys.add(key);
+  }
+}
+
+let hasError = false;
+for (const [file, keys] of keysByFile) {
+  const missing = [...allKeys].filter((key) => !keys.has(key)).sort();
+  if (missing.length > 0) {
+    hasError = true;
+    console.error(`\n[${file}] missing ${missing.length} key(s):`);
+    for (const key of missing) {
+      console.error(`  - ${key}`);
+    }
+  }
+}
+
+if (hasError) {
+  console.error('\ni18n check failed: translation files are out of sync.');
+  process.exit(1);
+}
+
+console.log(`i18n check passed: ${files.join(', ')} share ${allKeys.size} keys.`);

src/app/app.config.ts

@@ -1,9 +1,10 @@
-import {ApplicationConfig, inject, provideAppInitializer, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection} from '@angular/core';
+import {ApplicationConfig, inject, isDevMode, provideAppInitializer, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection} from '@angular/core';
 import { provideRouter, withInMemoryScrolling  } from '@angular/router';
 
 import { routes } from './app.routes';
 import {provideAnimations} from '@angular/platform-browser/animations';
 import {provideHttpClient} from '@angular/common/http';
+import {provideServiceWorker} from '@angular/service-worker';
 import {provideTranslateService} from '@ngx-translate/core';
 import {provideTranslateHttpLoader} from '@ngx-translate/http-loader';
 import {LocalStoreConstants} from './constants/LocalStoreConstants';
@@ -47,11 +48,15 @@ export const appConfig: ApplicationConfig = {
          sanitizer.bypassSecurityTrustResourceUrl('assets/logos/linkedIn.svg')
       );
     }),
+    provideServiceWorker('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      registrationStrategy: 'registerWhenStable:30000'
+    }),
   ]
 };
 
 function getInitialLang(): string {
-  const saved = localStorage.getItem(LocalStoreConstants.LANGUAGE_KEY);
+  const saved = typeof localStorage !== 'undefined' ? localStorage.getItem(LocalStoreConstants.LANGUAGE_KEY) : null;
   if (saved) return saved;
   const nav = typeof navigator !== 'undefined' ? navigator.language?.toLowerCase() : 'en';
   return nav?.startsWith('de') ? 'de' : 'en';

src/app/app.routes.ts

@@ -2,19 +2,20 @@ import { Routes } from '@angular/router';
 import {RouterConstants} from './constants/RouterConstants';
 
 export const routes: Routes = [
-  { path: '', loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent) },
+  { path: '', loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent), data: { seo: 'ABOUT' } },
-  { path: RouterConstants.ABOUT.PATH, loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent) },
+  { path: RouterConstants.ABOUT.PATH, loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent), data: { seo: 'ABOUT' } },
-  { path: RouterConstants.PROJECTS.PATH, loadComponent: () => import('./pages/projects/projects.component').then(m => m.ProjectsComponent) },
+  { path: RouterConstants.PROJECTS.PATH, loadComponent: () => import('./pages/projects/projects.component').then(m => m.ProjectsComponent), data: { seo: 'PROJECTS' } },
-  { path: RouterConstants.ALGORITHMS.PATH, loadComponent: () => import('./pages/algorithms/algorithms.component').then(m => m.AlgorithmsComponent) },
+  { path: RouterConstants.ALGORITHMS.PATH, loadComponent: () => import('./pages/algorithms/algorithms.component').then(m => m.AlgorithmsComponent), data: { seo: 'ALGORITHMS' } },
-  { path: RouterConstants.PATHFINDING.PATH, loadComponent: () => import('./pages/algorithms/pathfinding/pathfinding.component').then(m => m.PathfindingComponent) },
+  { path: RouterConstants.PATHFINDING.PATH, loadComponent: () => import('./pages/algorithms/pathfinding/pathfinding.component').then(m => m.PathfindingComponent), data: { seo: 'ALGORITHMS' } },
-  { path: RouterConstants.SORTING.PATH, loadComponent: () => import('./pages/algorithms/sorting/sorting.component').then(m => m.SortingComponent) },
+  { path: RouterConstants.SORTING.PATH, loadComponent: () => import('./pages/algorithms/sorting/sorting.component').then(m => m.SortingComponent), data: { seo: 'ALGORITHMS' } },
-  { path: RouterConstants.IMPRINT.PATH, loadComponent: () => import('./pages/imprint/imprint.component').then(m => m.ImprintComponent) },
+  { path: RouterConstants.IMPRINT.PATH, loadComponent: () => import('./pages/imprint/imprint.component').then(m => m.ImprintComponent), data: { seo: 'IMPRINT' } },
-  { path: RouterConstants.GOL.PATH, loadComponent: () => import('./pages/algorithms/conway-gol/conway-gol.component').then(m => m.ConwayGolComponent) },
+  { path: RouterConstants.GOL.PATH, loadComponent: () => import('./pages/algorithms/conway-gol/conway-gol.component').then(m => m.ConwayGolComponent), data: { seo: 'ALGORITHMS' } },
-  { path: RouterConstants.LABYRINTH.PATH, loadComponent: () => import('./pages/algorithms/pathfinding/labyrinth/labyrinth.component').then(m => m.LabyrinthComponent) },
+  { path: RouterConstants.LABYRINTH.PATH, loadComponent: () => import('./pages/algorithms/pathfinding/labyrinth/labyrinth.component').then(m => m.LabyrinthComponent), data: { seo: 'ALGORITHMS' } },
-  { path: RouterConstants.FRACTAL.PATH, loadComponent: () => import('./pages/algorithms/fractal/fractal.component').then(m => m.FractalComponent) },
+  { path: RouterConstants.FRACTAL.PATH, loadComponent: () => import('./pages/algorithms/fractal/fractal.component').then(m => m.FractalComponent), data: { seo: 'ALGORITHMS' } },
-  { path: RouterConstants.FRACTAL3d.PATH, loadComponent: () => import('./pages/algorithms/fractal3d/fractal3d.component').then(m => m.Fractal3dComponent) },
+  { path: RouterConstants.FRACTAL3d.PATH, loadComponent: () => import('./pages/algorithms/fractal3d/fractal3d.component').then(m => m.Fractal3dComponent), data: { seo: 'ALGORITHMS' } },
-  { path: RouterConstants.PENDULUM.PATH, loadComponent: () => import('./pages/algorithms/pendulum/pendulum.component').then(m => m.default) },
+  { path: RouterConstants.PENDULUM.PATH, loadComponent: () => import('./pages/algorithms/pendulum/pendulum.component').then(m => m.default), data: { seo: 'ALGORITHMS' } },
-  { path: RouterConstants.CLOTH.PATH, loadComponent: () => import('./pages/algorithms/cloth/cloth.component').then(m => m.ClothComponent) },
+  { path: RouterConstants.CLOTH.PATH, loadComponent: () => import('./pages/algorithms/cloth/cloth.component').then(m => m.ClothComponent), data: { seo: 'ALGORITHMS' } },
-  { path: RouterConstants.FOUR_COLOR.PATH, loadComponent: () => import('./pages/algorithms/four-color/four-color.component').then(m => m.FourColorComponent) },
+  { path: RouterConstants.FOUR_COLOR.PATH, loadComponent: () => import('./pages/algorithms/four-color/four-color.component').then(m => m.FourColorComponent), data: { seo: 'ALGORITHMS' } },
+  { path: RouterConstants.STOPWATCH.PATH, loadComponent: () => import('./pages/stopwatch/stopwatch.component').then(m => m.StopwatchComponent), data: { seo: 'STOPWATCH' } },
+  { path: '**', loadComponent: () => import('./pages/not-found/not-found.component').then(m => m.NotFoundComponent), data: { seo: 'NOT_FOUND' } },
 ];
-

src/app/constants/AssetsConstants.ts

@@ -1,7 +1,7 @@
 export class AssetsConstants {
 
   static readonly ME = '/assets/me.webp';
-  static readonly LOGO = '/assets/favicon.ico';
+  static readonly LOGO = '/assets/logos/logo-wolf.png';
   static readonly FLAG_DE = '/assets/flags/de.svg';
   static readonly FLAG_EN = '/assets/flags/gb.svg';
 
@@ -41,6 +41,10 @@ export class AssetsConstants {
     '/assets/projects/diploma/6.jpg'
   ];
 
+  static readonly CLAUDE_BOX_IMAGES = [
+    '/assets/projects/claude-in-a-box/1.svg'
+  ];
+
   static readonly TRIBBLE_IMAGES = [
     '/assets/projects/tribble-the-homeserver/1.png',
     '/assets/projects/tribble-the-homeserver/2.png',

src/app/constants/RouterConstants.ts

@@ -64,5 +64,10 @@
     PATH: 'imprint',
     LINK: '/imprint',
   };
+
+  static readonly STOPWATCH = {
+    PATH: 'stopwatch',
+    LINK: '/stopwatch',
+  };
 }
 

src/app/layout/app/app.component.html

@@ -1,9 +1,14 @@
 <app-particles-background></app-particles-background>
 <app-topbar />
-<main class="w-full max-w-app mx-auto mt-4 grow text-app-fg transition-colors duration-[220ms]">
+<main class="w-full max-w-app mx-auto mt-4 grow text-app-fg transition-colors duration-220">
   <router-outlet />
 </main>
 
-<footer class="border-t border-black/[.08] p-fluid-md text-center opacity-80 bg-app-bg">
+<footer class="border-t border-black/8 p-fluid-md text-center opacity-80 bg-app-bg">
   <small>© {{ currentYear }} Andreas Dahm - {{ `APP.COPYRIGHT` | translate }}</small>
+  <br />
+  <small>
+    {{ 'APP.AI_NOTICE' | translate }}
+    <a [routerLink]="['/projects']" [queryParams]="{ project: 'claude-in-a-box' }">{{ 'APP.AI_NOTICE_LINK' | translate }}</a>
+  </small>
 </footer>

src/app/layout/app/app.component.ts

@@ -1,16 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterLink, RouterOutlet } from '@angular/router';
 import {TopbarComponent} from '../topbar/topbar.component';
 import {TranslatePipe} from '@ngx-translate/core';
 import {ParticleBackgroundComponent} from '../../shared/components/particles-background/particles-background.component';
+import {SeoService} from '../../service/seo.service';
 
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, TopbarComponent, TranslatePipe, ParticleBackgroundComponent],
+  imports: [RouterLink, RouterOutlet, TopbarComponent, TranslatePipe, ParticleBackgroundComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
 export class AppComponent {
+  private readonly seo = inject(SeoService);
   currentYear = new Date().getFullYear();
+
+  constructor() {
+    this.seo.init();
+  }
 }

src/app/layout/topbar/topbar.component.html

@@ -1,18 +1,20 @@
-<mat-toolbar class="!flex !items-center !p-[clamp(0.5rem,1vw,1rem)] !backdrop-blur-[8px] !backdrop-saturate-[1.1] !bg-white/80 dark:!bg-[#313131]/80 !border-b !border-black/[.08]" color="primary" (keydown)="onKeydown($event)">
+<mat-toolbar class="flex! items-center! p-[clamp(0.5rem,1vw,1rem)]! backdrop-blur-sm! backdrop-saturate-[1.1]! bg-white/80! dark:bg-[#313131]/80! border-b! border-black/8!" color="primary" (keydown)="onKeydown($event)">
   <a class="flex items-center gap-[clamp(0.4rem,1vw,0.6rem)] text-inherit no-underline" routerLink="/">
-    <img class="w-[clamp(36px,10vw,48px)] h-[clamp(36px,10vw,48px)] rounded-full" src="{{AssetsConstants.LOGO}}" alt="" aria-hidden="true" draggable="false"
+    <img class="w-[clamp(36px,10vw,48px)] h-auto rounded-full" src="{{AssetsConstants.LOGO}}" width="117" height="128" alt="" aria-hidden="true" draggable="false"
       oncontextmenu="return false;">
     <span class="font-semibold tracking-[0.2px] text-[clamp(1rem,3vw,1.2rem)]">{{ 'APP.TITLE' | translate }}</span>
   </a>
 
   <nav class="absolute left-1/2 -translate-x-1/2 flex gap-[clamp(0.25rem,1vw,0.5rem)] justify-center mobile:hidden">
-    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
+    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-xs after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
        [routerLink]="RouterConstants.ABOUT.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
-    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
+    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-xs after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
        [routerLink]="RouterConstants.PROJECTS.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
-    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
+    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-xs after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
        [routerLink]="RouterConstants.ALGORITHMS.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.ALGORITHMS' | translate }}</a>
-    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-sm after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
+    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-xs after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
+       [routerLink]="RouterConstants.STOPWATCH.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.STOPWATCH' | translate }}</a>
+    <a class="opacity-70 transition-opacity duration-150 hover:opacity-100 relative after:content-[''] after:absolute after:bottom-1 after:left-2.5 after:right-2.5 after:h-0.5 after:bg-current after:rounded-xs after:scale-x-0 after:transition-transform [&.active]:opacity-100 [&.active]:after:scale-x-100"
        [routerLink]="RouterConstants.IMPRINT.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.IMPRINT' | translate }}</a>
   </nav>
 
@@ -34,6 +36,9 @@
     <button mat-menu-item [routerLink]="RouterConstants.ALGORITHMS.LINK">
       {{ 'TOPBAR.ALGORITHMS' | translate }}
     </button>
+    <button mat-menu-item [routerLink]="RouterConstants.STOPWATCH.LINK">
+      {{ 'TOPBAR.STOPWATCH' | translate }}
+    </button>
     <button mat-menu-item [routerLink]="RouterConstants.IMPRINT.LINK">
       {{ 'TOPBAR.IMPRINT' | translate }}
     </button>

src/app/layout/topbar/topbar.component.ts

@@ -5,7 +5,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { ThemeService } from '../../service/theme.service';
 import { LanguageService } from '../../service/language.service';
 import { MatDivider } from '@angular/material/divider';
@@ -17,7 +17,7 @@ import {RouterConstants} from '../../constants/RouterConstants';
   imports: [
     RouterLink, RouterLinkActive,
     MatToolbarModule, MatIconModule, MatButtonModule, MatMenuModule, MatTooltipModule,
-    TranslateModule, MatDivider
+    TranslatePipe, MatDivider
   ],
   templateUrl: './topbar.component.html',
   styleUrl: './topbar.component.scss'

src/app/pages/about/about.component.html

@@ -1,5 +1,5 @@
 <section class="grid gap-fluid-md max-w-app mx-4 mt-auto">
-  <mat-card>
+  <mat-card class="card-gradient-bar">
     <div class="flex flex-wrap gap-fluid-lg p-fluid-md items-start">
       <div class="flex-[1_1_min(100%,425px)] max-w-full flex justify-center">
         <img class="block w-full h-auto max-w-[425px] rounded-xl shadow-[0_6px_24px_rgba(0,0,0,0.25)] object-cover"
@@ -13,7 +13,7 @@
           {{ 'ABOUT.LEAD' | translate }}
         </p>
 
-        <div class="flex flex-col gap-1 mb-2">
+        <div class="flex flex-col gap-1 mb-4">
           <div class="flex items-center flex-wrap gap-[0.4rem]">
             <mat-icon aria-hidden="true">work</mat-icon>
             <span>{{ 'ABOUT.ROLE' | translate }}</span>
@@ -24,18 +24,26 @@
           </div>
           <div class="flex items-center flex-wrap gap-[0.4rem]">
             <mat-icon aria-hidden="true">email</mat-icon>
-            <a href="" (click)="SharedFunctions.openMail($event)">
+            <button type="button" class="link-button" data-testid="contact-mail"
+              (click)="SharedFunctions.openMail($event)">
               {{ 'ABOUT.CONTACT_ME' | translate }}
-            </a>
+            </button>
           </div>
           <div class="flex items-center flex-wrap gap-[0.4rem]">
-            <mat-icon>data_object</mat-icon>
+            <mat-icon aria-hidden="true">data_object</mat-icon>
             <a href="{{UrlConstants.CODEBERG}}" target="_blank" rel="noopener">Codeberg</a>
             <span>·</span>
-            <mat-icon svgIcon="linkedin"></mat-icon>
+            <mat-icon svgIcon="linkedin" aria-hidden="true"></mat-icon>
             <a href="{{UrlConstants.LINKED_IN}}" target="_blank" rel="noopener">LinkedIn</a>
           </div>
         </div>
+
+        <div class="flex flex-wrap gap-fluid-sm">
+          <a mat-flat-button [routerLink]="['/projects']">
+            <mat-icon aria-hidden="true">grid_view</mat-icon>
+            {{ 'ABOUT.VIEW_PROJECTS' | translate }}
+          </a>
+        </div>
       </div>
     </div>
   </mat-card>
@@ -43,72 +51,62 @@
   <mat-card class="p-[clamp(5px,2vw,15px)]">
     <h2 class="mt-1 ml-1 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.SKILLS' | translate }}</h2>
     <div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,250px),1fr))] gap-fluid-sm ml-1 mb-2">
+      @for (group of skillGroups; track group.titleKey) {
       <div>
-        <h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.BACKEND_ARCH' | translate }}</h3>
+        <h3 class="my-1 text-[0.95rem] opacity-85">{{ group.titleKey | translate }}</h3>
-        <mat-chip-set aria-label="Backend and Architecture">
+        <mat-chip-set [attr.aria-label]="group.titleKey | translate">
-          @for (s of skillsArchitecture; track s) {
+          @for (skillKey of group.skillKeys; track skillKey) {
-          <mat-chip>{{ s | translate }}</mat-chip>
+          <mat-chip>{{ skillKey | translate }}</mat-chip>
-          }
-        </mat-chip-set>
-      </div>
-
-      <div>
-        <h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.INFRA_CLOUD' | translate }}</h3>
-        <mat-chip-set aria-label="Infrastructure and Cloud">
-          @for (s of skillsCore; track s) {
-          <mat-chip>{{ s | translate }}</mat-chip>
-          }
-        </mat-chip-set>
-      </div>
-
-      <div>
-        <h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.SIM_ALGO' | translate }}</h3>
-        <mat-chip-set aria-label="Simulation and Algorithms">
-          @for (s of skillsEngineering; track s) {
-          <mat-chip>{{ s | translate }}</mat-chip>
           }
         </mat-chip-set>
       </div>
+      }
     </div>
   </mat-card>
 
   <mat-card class="p-[clamp(5px,2vw,15px)]">
     <h2 class="mt-1 ml-2 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
-    <div class="ml-1 grid gap-fluid-sm">
-      @for (entry of xpKeys; track entry.key) {
-      <div>
-        <div class="grid grid-cols-[auto_1fr] gap-x-3">
-          <div class="row-span-2 col-start-1 flex items-center">
-            <img src="{{entry.logo}}" alt="" class="w-10 h-10 object-contain opacity-90 rounded-[10%] bg-logo-bg" aria-hidden="true" />
-          </div>
-          <div class="row-start-1 col-start-2 flex flex-wrap items-baseline gap-x-4 gap-y-1">
-            <strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]">{{ (entry.key + '.ROLE') | translate }}</strong>
-            <span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (entry.key + '.TIME') | translate }}</span>
-          </div>
-
-          <div class="row-start-2 col-start-2 mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
-            {{ (entry.key + '.COMPANY') | translate }}
-          </div>
 
+    <div class="relative ml-2">
+      <span class="absolute left-5 top-2 bottom-2 w-px bg-current opacity-15" aria-hidden="true"></span>
+      @for (entry of visibleExperience(); track entry.key; let i = $index) {
+      <div class="relative pl-14 pb-fluid-sm">
+        @if (isFirstRoleAtCompany(i)) {
+        <img src="{{entry.logo}}" alt="" aria-hidden="true"
+          class="absolute left-0 top-0 w-10 h-10 object-contain opacity-90 rounded-[10%] bg-logo-bg" />
+        <div class="font-semibold opacity-90 text-[clamp(0.9rem,2.2vw,1.05rem)] leading-10" data-testid="company">
+          {{ (entry.key + '.COMPANY') | translate }}
         </div>
-        @if (!entry.no_highlights) {
+        } @else {
-          <div class="mt-[0.4rem] ml-[clamp(0.25rem,1vw,0.75rem)] pl-[clamp(0.8rem,2vw,1.2rem)]">
+        <span class="absolute left-5 top-[0.6rem] -translate-x-1/2 w-2 h-2 rounded-full bg-current opacity-30"
-            <ul>
+          aria-hidden="true"></span>
-              <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
+        }
-              <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
+
-              <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
+        <div class="flex flex-wrap items-baseline gap-x-4 gap-y-1">
-            </ul>
+          <strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]" data-testid="role">{{ (entry.key + '.ROLE') | translate }}</strong>
-          </div>
+          <span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (entry.key + '.TIME') | translate }}</span>
+        </div>
+
+        <ul class="mt-[0.4rem]">
+          @for (highlight of highlightKeys(entry); track highlight) {
+          <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ highlight | translate }}</li>
+          }
+        </ul>
+
+        @if (isLastRoleAtCompany(i) && !$last) {
+        <mat-divider class="mt-fluid-sm!"></mat-divider>
         }
       </div>
-
-        @if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
-        {
-          <mat-divider></mat-divider>
-        }
       }
     </div>
+
+    <button mat-button type="button" class="mt-1 ml-2" data-testid="toggle-experience" (click)="toggleEarlierExperience()"
+      [attr.aria-expanded]="showEarlierExperience()">
+      <mat-icon aria-hidden="true">{{ showEarlierExperience() ? 'expand_less' : 'expand_more' }}</mat-icon>
+      {{ (showEarlierExperience() ? 'ABOUT.SECTION.SHOW_LESS' : 'ABOUT.SECTION.SHOW_EARLIER_XP') | translate }}
+    </button>
   </mat-card>
+
   <mat-card class="p-[clamp(5px,2vw,15px)]">
     <h2 class="mt-1 ml-1 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.PROJECTS' | translate }}</h2>
 
@@ -124,7 +122,7 @@
         @if (entry.externalLink) {
         <div class="mt-[0.1rem] opacity-85">
           <a class="inline-flex items-center gap-[0.35rem] leading-none" href="{{entry.externalLink}}" target="_blank" rel="noopener noreferrer">
-            <mat-icon class="!text-[18px] !w-[18px] !h-[18px]">open_in_new</mat-icon>
+            <mat-icon class="text-[18px]! w-[18px]! h-[18px]!" aria-hidden="true">open_in_new</mat-icon>
             {{ (entry.key + '.LINK_EXTERNAL') | translate }}
           </a>
         </div>
@@ -132,7 +130,7 @@
         <div class="mt-[0.1rem] opacity-85">
           <a class="inline-flex items-center gap-[0.35rem] leading-none" [routerLink]="['/projects']" [queryParams]="{ project: entry.identifier }"
             rel="noopener noreferrer">
-            <mat-icon class="!text-[18px] !w-[18px] !h-[18px]">link</mat-icon>
+            <mat-icon class="text-[18px]! w-[18px]! h-[18px]!" aria-hidden="true">link</mat-icon>
             {{ (entry.key + '.LINK_INTERNAL') | translate }}
           </a>
         </div>
@@ -145,8 +143,7 @@
         </div>
       </div>
 
-      @if(entry.key !== projectKeys.at(projectKeys.length-1)?.key)
+      @if (!$last) {
-      {
       <mat-divider></mat-divider>
       }
       }
@@ -158,21 +155,25 @@
 
     <div class="ml-1 grid gap-fluid-sm">
       <div>
-        @for (entry of educationKeys; track entry.key) {
+        @for (key of visibleEducationKeys(); track key) {
         <div class="flex flex-wrap items-baseline gap-x-4 gap-y-1">
-          <strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]">{{ (entry.key + '.WHERE') | translate }}</strong>
+          <strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]" data-testid="education-where">{{ (key + '.WHERE') | translate }}</strong>
-          <span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (entry.key + '.WHEN') | translate }}</span>
+          <span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (key + '.WHEN') | translate }}</span>
         </div>
         <div class="mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
-          {{ (entry.key + '.WHAT') | translate }}
+          {{ (key + '.WHAT') | translate }}
         </div>
-
+        @if (!$last) {
-        @if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
+        <mat-divider class="my-2!"></mat-divider>
-        {
-        <mat-divider class="!my-2"></mat-divider>
         }
         }
       </div>
     </div>
+
+    <button mat-button type="button" class="mt-1" data-testid="toggle-education" (click)="toggleEarlierEducation()"
+      [attr.aria-expanded]="showEarlierEducation()">
+      <mat-icon aria-hidden="true">{{ showEarlierEducation() ? 'expand_less' : 'expand_more' }}</mat-icon>
+      {{ (showEarlierEducation() ? 'ABOUT.SECTION.SHOW_LESS' : 'ABOUT.SECTION.SHOW_EARLIER_EDU') | translate }}
+    </button>
   </mat-card>
 </section>

src/app/pages/about/about.component.spec.ts

@@ -0,0 +1,214 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, provideZonelessChangeDetection } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { By } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import { provideTranslateService } from '@ngx-translate/core';
+import { AboutComponent } from './about.component';
+
+/**
+ * No translations are loaded, so the translate pipe echoes the key back. That is
+ * exactly what these tests want: they assert which key is rendered where, which
+ * is what the mismatched skill headings got wrong. Expected values are written
+ * out literally rather than read off the component, so a change to the component
+ * cannot silently move the assertion with it.
+ */
+describe('AboutComponent', () => {
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AboutComponent],
+      providers: [
+        provideZonelessChangeDetection(),
+        provideRouter([]),
+        provideTranslateService({ lang: 'en', fallbackLang: 'en' }),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AboutComponent);
+    fixture.detectChanges();
+  });
+
+  function textOf(selector: string): string[] {
+    return fixture.debugElement
+      .queryAll(By.css(selector))
+      .map(element => element.nativeElement.textContent.trim());
+  }
+
+  function click(testId: string): void {
+    fixture.debugElement
+      .query(By.css(`[data-testid="${testId}"]`))
+      .nativeElement.click();
+    fixture.detectChanges();
+  }
+
+  function skillGroupTexts(): { heading: string; chips: string[] }[] {
+    return fixture.debugElement.queryAll(By.css('mat-chip-set')).map(chipSet => {
+      const group = chipSet.parent!;
+      const heading = group.query(By.css('h3')).nativeElement.textContent.trim();
+      const chips = group
+        .queryAll(By.css('mat-chip'))
+        .map(chip => chip.nativeElement.textContent.trim());
+      return { heading, chips };
+    });
+  }
+
+  describe('skills', () => {
+    it('renders the skill groups in the documented order', () => {
+      expect(skillGroupTexts().map(group => group.heading)).toEqual([
+        'ABOUT.SECTION.LANGUAGES',
+        'ABOUT.SECTION.ARCH_CLOUD',
+        'ABOUT.SECTION.SIM_ALGO',
+        'ABOUT.SECTION.AI_ENG',
+      ]);
+    });
+
+    it('lists languages under the languages heading, not under architecture', () => {
+      const languages = skillGroupTexts().find(group => group.heading === 'ABOUT.SECTION.LANGUAGES');
+
+      expect(languages).toBeDefined();
+      expect(languages!.chips).toContain('ABOUT.SKILLS.JAVA');
+      expect(languages!.chips).not.toContain('ABOUT.TOOLS.DOCKER');
+    });
+
+    it('lists infrastructure tools under the architecture heading', () => {
+      const architecture = skillGroupTexts().find(group => group.heading === 'ABOUT.SECTION.ARCH_CLOUD');
+
+      expect(architecture).toBeDefined();
+      expect(architecture!.chips).toContain('ABOUT.TOOLS.DOCKER');
+      expect(architecture!.chips).not.toContain('ABOUT.SKILLS.JAVA');
+    });
+
+    it('advertises AI-assisted engineering as its own group', () => {
+      const ai = skillGroupTexts().find(group => group.heading === 'ABOUT.SECTION.AI_ENG');
+
+      expect(ai).toBeDefined();
+      expect(ai!.chips).toContain('ABOUT.SKILLS.AI_HARNESS');
+    });
+  });
+
+  describe('experience', () => {
+    it('hides the pre-2010 positions until they are requested', () => {
+      expect(textOf('[data-testid="role"]')).toContain('ABOUT.XP.COMPANY9.ROLE');
+      expect(textOf('[data-testid="role"]')).not.toContain('ABOUT.XP.COMPANY0.ROLE');
+    });
+
+    it('reveals the earlier positions when the toggle button is clicked', () => {
+      click('toggle-experience');
+
+      expect(textOf('[data-testid="role"]')).toContain('ABOUT.XP.COMPANY0.ROLE');
+    });
+
+    it('reports the expanded state of the experience toggle to assistive technology', () => {
+      const toggle = fixture.debugElement.query(By.css('[data-testid="toggle-experience"]')).nativeElement;
+      expect(toggle.getAttribute('aria-expanded')).toBe('false');
+
+      click('toggle-experience');
+
+      expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    });
+
+    it('draws the employer header once per run of consecutive roles', () => {
+      const companies = textOf('[data-testid="company"]');
+
+      // COMPANY5/4/3 are three consecutive Assyst roles and share one header.
+      expect(companies).toContain('ABOUT.XP.COMPANY5.COMPANY');
+      expect(companies).not.toContain('ABOUT.XP.COMPANY4.COMPANY');
+      expect(companies).not.toContain('ABOUT.XP.COMPANY3.COMPANY');
+    });
+
+    it('treats the two ColorDigital spells as separate blocks so the timeline stays chronological', () => {
+      const companies = textOf('[data-testid="company"]');
+
+      expect(companies).toContain('ABOUT.XP.COMPANY9.COMPANY');
+      expect(companies).toContain('ABOUT.XP.COMPANY7.COMPANY');
+    });
+
+    it('keeps the employer header at the seam when the earlier roles are appended', () => {
+      click('toggle-experience');
+
+      // COMPANY3 (Assyst) and COMPANY2 (TH Bingen) meet at the seam, so the
+      // first earlier role must still get its own header.
+      expect(textOf('[data-testid="company"]')).toContain('ABOUT.XP.COMPANY2.COMPANY');
+    });
+  });
+
+  describe('education', () => {
+    it('shows only the post-school entries until the toggle button is clicked', () => {
+      expect(textOf('[data-testid="education-where"]')).toContain('ABOUT.EDUCATION.E6.WHERE');
+      expect(textOf('[data-testid="education-where"]')).not.toContain('ABOUT.EDUCATION.E0.WHERE');
+
+      click('toggle-education');
+
+      expect(textOf('[data-testid="education-where"]')).toContain('ABOUT.EDUCATION.E0.WHERE');
+    });
+  });
+
+  describe('call to action', () => {
+    it('offers no download link, so nothing can point at a missing file', () => {
+      expect(fixture.debugElement.queryAll(By.css('a[download]')).length).toBe(0);
+    });
+
+    it('exposes the mail contact as a button rather than an empty link', () => {
+      const emptyLinks = fixture.debugElement
+        .queryAll(By.css('a'))
+        .filter(anchor => anchor.nativeElement.getAttribute('href') === '');
+
+      expect(emptyLinks.length).toBe(0);
+      expect(fixture.debugElement.query(By.css('[data-testid="contact-mail"]'))).toBeTruthy();
+    });
+
+    it('keeps the mail button in the same font as the links it sits next to', () => {
+      const mailButton = fixture.debugElement.query(By.css('[data-testid="contact-mail"]')).nativeElement;
+      const siblingLink = fixture.debugElement
+        .queryAll(By.css('a'))
+        .find(anchor => anchor.nativeElement.textContent.trim() === 'Codeberg')!.nativeElement;
+
+      const buttonStyle = getComputedStyle(mailButton);
+      const linkStyle = getComputedStyle(siblingLink);
+
+      expect(buttonStyle.fontSize).toBe(linkStyle.fontSize);
+      expect(buttonStyle.fontFamily).toBe(linkStyle.fontFamily);
+    });
+  });
+});
+
+/**
+ * Material typography (`brand-family` in styles.scss) and the Tailwind body
+ * stack are declared in two separate places and are easy to change apart. When
+ * they disagree, only visitors who happen to have the extra font installed
+ * locally see it, so it will not show up in review.
+ */
+describe('global font stack', () => {
+  @Component({
+    imports: [MatCardModule],
+    template: `<mat-card><mat-card-title>probe</mat-card-title></mat-card>`,
+  })
+  class FontProbeComponent {}
+
+  function normalizeStack(value: string): string {
+    return value
+      .replace(/["']/g, '')
+      .split(',')
+      .map(family => family.trim())
+      .filter(family => family.length > 0)
+      .join(', ');
+  }
+
+  it('resolves Material card titles to the same font stack as body copy', async () => {
+    await TestBed.configureTestingModule({
+      imports: [FontProbeComponent],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+
+    const probe = TestBed.createComponent(FontProbeComponent);
+    probe.detectChanges();
+
+    const title = probe.nativeElement.querySelector('.mat-mdc-card-title') as HTMLElement;
+    const titleStack = normalizeStack(getComputedStyle(title).fontFamily);
+    const bodyStack = normalizeStack(getComputedStyle(document.body).fontFamily);
+
+    expect(titleStack).toBe(bodyStack);
+  });
+});

src/app/pages/about/about.component.ts

@@ -1,16 +1,28 @@
-import { Component} from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { NgOptimizedImage } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import {UrlConstants} from '../../constants/UrlConstants';
 import {AssetsConstants} from '../../constants/AssetsConstants';
 import {RouterLink} from '@angular/router';
 import {SharedFunctions} from '../../shared/SharedFunctions';
 
+/** One role. Consecutive entries sharing a `company` render as a single employer block. */
+interface ExperienceEntry {
+  key: string;
+  company: string;
+  logo: string;
+  highlightCount: number;
+}
+
+interface SkillGroup {
+  titleKey: string;
+  skillKeys: string[];
+}
 
 @Component({
   selector: 'app-about',
@@ -21,7 +33,7 @@ import {SharedFunctions} from '../../shared/SharedFunctions';
     MatIconModule,
     MatButtonModule,
     MatDividerModule,
-    TranslateModule,
+    TranslatePipe,
     RouterLink
   ],
   templateUrl: './about.component.html',
@@ -29,51 +41,83 @@ import {SharedFunctions} from '../../shared/SharedFunctions';
 })
 export class AboutComponent {
 
-  xpKeys = [
+  /** Roles older than the current decade are hidden until the reader asks for them. */
+  readonly showEarlierExperience = signal(false);
+  readonly showEarlierEducation = signal(false);
+
+  readonly recentExperience: ExperienceEntry[] = [
     {
       key: 'ABOUT.XP.COMPANY9',
+      company: 'colordigital',
       logo: AssetsConstants.COLORDIGITAL_LOGO,
-      no_highlights: false
+      highlightCount: 3
     },
     {
       key: 'ABOUT.XP.COMPANY8',
-      logo: AssetsConstants.TERAPORT_LOGO
+      company: 'teraport',
+      logo: AssetsConstants.TERAPORT_LOGO,
+      highlightCount: 3
     },
     {
       key: 'ABOUT.XP.COMPANY7',
-      logo: AssetsConstants.COLORDIGITAL_LOGO
+      company: 'colordigital-earlier',
+      logo: AssetsConstants.COLORDIGITAL_LOGO,
+      highlightCount: 3
     },
     {
       key: 'ABOUT.XP.COMPANY6',
-      logo: AssetsConstants.COLORDIGITAL_LOGO
+      company: 'colordigital-earlier',
+      logo: AssetsConstants.COLORDIGITAL_LOGO,
+      highlightCount: 3
     },
     {
       key: 'ABOUT.XP.COMPANY5',
-      logo: AssetsConstants.ASSYST_LOGO
+      company: 'assyst',
+      logo: AssetsConstants.ASSYST_LOGO,
+      highlightCount: 3
     },
     {
       key: 'ABOUT.XP.COMPANY4',
-      logo: AssetsConstants.ASSYST_LOGO
+      company: 'assyst',
+      logo: AssetsConstants.ASSYST_LOGO,
+      highlightCount: 3
     },
     {
       key: 'ABOUT.XP.COMPANY3',
-      logo: AssetsConstants.ASSYST_LOGO
+      company: 'assyst',
-    },
+      logo: AssetsConstants.ASSYST_LOGO,
-    {
+      highlightCount: 3
-      key: 'ABOUT.XP.COMPANY2',
-      logo: AssetsConstants.TH_BINGEN_LOGO
-    },
-    {
-      key: 'ABOUT.XP.COMPANY1',
-      logo: AssetsConstants.TH_BINGEN_LOGO
-    },
-    {
-      key: 'ABOUT.XP.COMPANY0',
-      logo: AssetsConstants.CHAMAELEON_LOGO
     }
   ];
 
-  projectKeys = [
+  readonly earlierExperience: ExperienceEntry[] = [
+    {
+      key: 'ABOUT.XP.COMPANY2',
+      company: 'th-bingen',
+      logo: AssetsConstants.TH_BINGEN_LOGO,
+      highlightCount: 3
+    },
+    {
+      key: 'ABOUT.XP.COMPANY1',
+      company: 'th-bingen',
+      logo: AssetsConstants.TH_BINGEN_LOGO,
+      highlightCount: 3
+    },
+    {
+      key: 'ABOUT.XP.COMPANY0',
+      company: 'chamaeleon',
+      logo: AssetsConstants.CHAMAELEON_LOGO,
+      highlightCount: 3
+    }
+  ];
+
+  readonly projectKeys = [
+    {
+      key: 'ABOUT.PROJECT.CLAUDE_BOX',
+      externalLink: '',
+      internalLink: 'projects',
+      identifier: 'claude-in-a-box',
+    },
     {
       key: 'ABOUT.PROJECT.P2',
       externalLink: 'https://andreas-dahm.eu/',
@@ -106,59 +150,114 @@ export class AboutComponent {
     }
   ];
 
-  educationKeys = [
+  readonly recentEducationKeys = [
+    'ABOUT.EDUCATION.E6',
+    'ABOUT.EDUCATION.E5',
+    'ABOUT.EDUCATION.E4'
+  ];
+
+  readonly earlierEducationKeys = [
+    'ABOUT.EDUCATION.E3',
+    'ABOUT.EDUCATION.E2',
+    'ABOUT.EDUCATION.E1',
+    'ABOUT.EDUCATION.E0'
+  ];
+
+  /**
+   * Heading and chips travel together so the two can no longer drift apart —
+   * they used to be declared in separate places and had ended up mismatched.
+   */
+  readonly skillGroups: SkillGroup[] = [
     {
-      key: 'ABOUT.EDUCATION.E6'
+      titleKey: 'ABOUT.SECTION.LANGUAGES',
+      skillKeys: [
+        'ABOUT.SKILLS.JAVA',
+        'ABOUT.SKILLS.SPRING',
+        'ABOUT.SKILLS.TYPESCRIPT',
+        'ABOUT.SKILLS.ANGULAR',
+        'ABOUT.SKILLS.CSHARP',
+        'ABOUT.SKILLS.PYTHON',
+        'ABOUT.SKILLS.VUE',
+        'ABOUT.SKILLS.REACT'
+      ]
     },
     {
-      key: 'ABOUT.EDUCATION.E5'
+      titleKey: 'ABOUT.SECTION.ARCH_CLOUD',
+      skillKeys: [
+        'ABOUT.SKILLS.ARCH_MICROSERVICES',
+        'ABOUT.SKILLS.ARCH_CLOUD',
+        'ABOUT.TOOLS.DOCKER',
+        'ABOUT.TOOLS.K8S',
+        'ABOUT.TOOLS.POSTGRES',
+        'ABOUT.TOOLS.MONGO',
+        'ABOUT.TOOLS.GITLAB',
+        'ABOUT.TOOLS.JENKINS'
+      ]
     },
     {
-      key: 'ABOUT.EDUCATION.E4'
+      titleKey: 'ABOUT.SECTION.SIM_ALGO',
+      skillKeys: [
+        'ABOUT.SKILLS.ENG_ALGO',
+        'ABOUT.SKILLS.ENG_SIM',
+        'ABOUT.SKILLS.ENG_GPU',
+        'ABOUT.SKILLS.ENG_PERF',
+        'ABOUT.SKILLS.UNITY'
+      ]
     },
     {
-      key: 'ABOUT.EDUCATION.E3'
+      titleKey: 'ABOUT.SECTION.AI_ENG',
-    },
+      skillKeys: [
-    {
+        'ABOUT.SKILLS.AI_AGENTS',
-      key: 'ABOUT.EDUCATION.E2'
+        'ABOUT.SKILLS.AI_MCP',
-    },
+        'ABOUT.SKILLS.AI_CONTEXT',
-    {
+        'ABOUT.SKILLS.AI_HARNESS',
-      key: 'ABOUT.EDUCATION.E1'
+        'ABOUT.SKILLS.AI_GATES'
-    },
+      ]
-    {
-      key: 'ABOUT.EDUCATION.E0'
     }
-  ]
-
-  skillsCore = [
-    'ABOUT.SKILLS.JAVA',
-    'ABOUT.SKILLS.SPRING',
-    'ABOUT.SKILLS.ANGULAR',
-    'ABOUT.SKILLS.VUE',
-    'ABOUT.SKILLS.REACT',
-    'ABOUT.SKILLS.TYPESCRIPT',
-    'ABOUT.SKILLS.CSHARP',
-    'ABOUT.SKILLS.PYTHON'
   ];
 
-  skillsArchitecture = [
+  readonly visibleExperience = computed(() => {
-    'ABOUT.SKILLS.ARCH_MICROSERVICES',
+    if (this.showEarlierExperience()) {
-    'ABOUT.SKILLS.ARCH_CLOUD',
+      return [...this.recentExperience, ...this.earlierExperience];
-    'ABOUT.TOOLS.DOCKER',
+    }
-    'ABOUT.TOOLS.K8S',
+    return this.recentExperience;
-    'ABOUT.TOOLS.JENKINS',
+  });
-    'ABOUT.TOOLS.POSTGRES',
-    'ABOUT.TOOLS.MONGO',
-    'ABOUT.TOOLS.GITLAB'
-  ];
 
-  skillsEngineering = [
+  readonly visibleEducationKeys = computed(() => {
-    'ABOUT.SKILLS.ENG_ALGO',
+    if (this.showEarlierEducation()) {
-    'ABOUT.SKILLS.ENG_SIM',
+      return [...this.recentEducationKeys, ...this.earlierEducationKeys];
-    'ABOUT.SKILLS.ENG_GPU',
+    }
-    'ABOUT.SKILLS.UNITY',
+    return this.recentEducationKeys;
-    'ABOUT.SKILLS.ENG_PERF'
+  });
-  ];
+
+  toggleEarlierExperience(): void {
+    this.showEarlierExperience.update(shown => !shown);
+  }
+
+  toggleEarlierEducation(): void {
+    this.showEarlierEducation.update(shown => !shown);
+  }
+
+  /** The employer header is drawn once per run of consecutive roles at the same company. */
+  isFirstRoleAtCompany(index: number): boolean {
+    if (index === 0) {
+      return true;
+    }
+    const entries = this.visibleExperience();
+    return entries[index - 1].company !== entries[index].company;
+  }
+
+  isLastRoleAtCompany(index: number): boolean {
+    const entries = this.visibleExperience();
+    if (index === entries.length - 1) {
+      return true;
+    }
+    return entries[index + 1].company !== entries[index].company;
+  }
+
+  highlightKeys(entry: ExperienceEntry): string[] {
+    return Array.from({ length: entry.highlightCount }, (_, i) => `${entry.key}.HIGHLIGHTS.P${i + 1}`);
+  }
 
   protected readonly UrlConstants = UrlConstants;
   protected readonly AssetsConstants = AssetsConstants;

src/app/pages/algorithms/algorithms.component.html

@@ -5,8 +5,8 @@
   @for (category of categories; track category.id) {
     <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col cursor-pointer hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(0,0,0,0.12)]" [routerLink]="[category.routerLink]">
       <mat-card-content>
-        <div class="flex items-center text-[var(--mat-sys-primary)] mb-4">
+        <div class="flex items-center text-(--mat-sys-primary) mb-4">
-          <mat-icon class="!text-[26px] !w-[26px] !h-[26px]">{{ category.icon }}</mat-icon>
+          <mat-icon class="text-[26px]! w-[26px]! h-[26px]!">{{ category.icon }}</mat-icon>
         </div>
         <h3 class="text-[1.05rem] font-semibold mb-2 m-0">{{ category.title | translate }}</h3>
         <p class="m-0 opacity-75 text-sm leading-relaxed">{{ category.description | translate }}</p>

src/app/pages/algorithms/four-color/four-color.component.html

@@ -47,7 +47,7 @@
         <span><span class="legend-swatch bg-[#FFEB3B]"></span> {{ 'FOUR_COLOR.COLOR_4' | translate }}</span>
       </div>
 
-      <div class="mt-5 flex gap-2.5 py-2.5 px-4 rounded border-l-[5px] font-medium min-w-[300px] items-center"
+      <div class="mt-5 flex gap-2.5 py-2.5 px-4 rounded-sm border-l-[5px] font-medium min-w-[300px] items-center"
            [ngClass]="{
              'border-l-gray-500 bg-app-bg': solutionStatus === 'INCOMPLETE',
              'border-l-green-500 bg-green-50 text-green-800': solutionStatus === 'SOLVED',

src/app/pages/algorithms/four-color/four-color.component.ts

@@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {TranslatePipe, TranslateService} from '@ngx-translate/core';
 import {MatSnackBar} from '@angular/material/snack-bar';
 
 import {DEFAULT_GRID_COLS, DEFAULT_GRID_ROWS, MAX_GRID_PX, MAX_GRID_SIZE, MIN_GRID_SIZE, FourColorNode, Region} from './four-color.models';
@@ -25,7 +25,7 @@ import {UrlConstants} from '../../../constants/UrlConstants';
     MatCardModule,
     MatFormFieldModule,
     MatInputModule,
-    TranslateModule,
+    TranslatePipe,
     Information
   ],
   templateUrl: './four-color.component.html',

src/app/pages/algorithms/pathfinding/pathfinding.component.html

@@ -18,7 +18,7 @@
         </div>
 
         <div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
-          <mat-button-toggle-group class="rounded overflow-hidden" [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
+          <mat-button-toggle-group class="rounded-sm overflow-hidden" [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
             <mat-button-toggle [value]="NodeType.Start">{{ 'PATHFINDING.START_NODE' | translate }}</mat-button-toggle>
             <mat-button-toggle [value]="NodeType.End">{{ 'PATHFINDING.END_NODE' | translate }}</mat-button-toggle>
             <mat-button-toggle [value]="NodeType.Wall">{{ 'PATHFINDING.WALL' | translate }}</mat-button-toggle>

src/app/pages/algorithms/pathfinding/pathfinding.component.ts

@@ -8,7 +8,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
 import {MatSnackBar} from '@angular/material/snack-bar';
 
-import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {TranslatePipe, TranslateService} from '@ngx-translate/core';
 
 import {DEFAULT_GRID_COLS, DEFAULT_GRID_ROWS, MAX_GRID_PX, MAX_GRID_SIZE, MAX_RANDOM_WALLS_FACTORS, MIN_GRID_SIZE, Node} from './pathfinding.models';
 import {PathfindingService} from './service/pathfinding.service';
@@ -35,7 +35,7 @@ enum NodeType {
     MatButtonToggleModule,
     MatFormFieldModule,
     MatInputModule,
-    TranslateModule,
+    TranslatePipe,
     MatCard,
     MatCardHeader,
     MatCardTitle,

src/app/pages/algorithms/pathfinding/service/pathfinding.service.spec.ts

@@ -0,0 +1,121 @@
+import { PathfindingService } from './pathfinding.service';
+import { Node } from '../pathfinding.models';
+
+function createNode(row: number, col: number): Node {
+  return {
+    row,
+    col,
+    isStart: false,
+    isEnd: false,
+    isWall: false,
+    isVisited: false,
+    isPath: false,
+    nodeData: Infinity,
+    linkedNode: null,
+    fScore: Infinity,
+    hScore: Infinity,
+  };
+}
+
+function createGrid(rows: number, cols: number): Node[][] {
+  const grid: Node[][] = [];
+  for (let row = 0; row < rows; row++) {
+    const currentRow: Node[] = [];
+    for (let col = 0; col < cols; col++) {
+      currentRow.push(createNode(row, col));
+    }
+    grid.push(currentRow);
+  }
+  return grid;
+}
+
+describe('PathfindingService', () => {
+  let service: PathfindingService;
+
+  beforeEach(() => {
+    service = new PathfindingService();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('getUnvisitedNeighbors', () => {
+    it('returns the four orthogonal neighbors for an inner node', () => {
+      const grid = createGrid(3, 3);
+      const neighbors = service.getUnvisitedNeighbors(grid[1][1], grid);
+
+      expect(neighbors.length).toBe(4);
+    });
+
+    it('excludes walls and already visited nodes', () => {
+      const grid = createGrid(3, 3);
+      grid[0][1].isWall = true;
+      grid[1][0].isVisited = true;
+      const neighbors = service.getUnvisitedNeighbors(grid[1][1], grid);
+
+      expect(neighbors.length).toBe(2);
+    });
+
+    it('returns only in-bounds neighbors for a corner node', () => {
+      const grid = createGrid(3, 3);
+      const neighbors = service.getUnvisitedNeighbors(grid[0][0], grid);
+
+      expect(neighbors.length).toBe(2);
+    });
+  });
+
+  describe('getNodesInShortestPath', () => {
+    it('reconstructs the path by following linkedNode references', () => {
+      const grid = createGrid(1, 3);
+      grid[0][1].linkedNode = grid[0][0];
+      grid[0][2].linkedNode = grid[0][1];
+      const path = service.getNodesInShortestPath(grid[0][2]);
+
+      expect(path).toEqual([grid[0][0], grid[0][1], grid[0][2]]);
+    });
+  });
+
+  describe('dijkstra', () => {
+    it('finds the shortest path on an open grid', () => {
+      const grid = createGrid(5, 5);
+      const start = grid[0][0];
+      const end = grid[4][4];
+
+      const { visitedNodesInOrder, nodesInShortestPathOrder } = service.dijkstra(grid, start, end);
+
+      expect(visitedNodesInOrder).toContain(end);
+      // Manhattan distance 8 => 9 nodes including both endpoints.
+      expect(nodesInShortestPathOrder.length).toBe(9);
+      expect(nodesInShortestPathOrder[0]).toBe(start);
+      expect(nodesInShortestPathOrder[nodesInShortestPathOrder.length - 1]).toBe(end);
+    });
+
+    it('returns an empty path when the end node is walled off', () => {
+      const grid = createGrid(3, 3);
+      const start = grid[0][0];
+      const end = grid[2][2];
+      grid[1][2].isWall = true;
+      grid[2][1].isWall = true;
+
+      const { nodesInShortestPathOrder } = service.dijkstra(grid, start, end);
+
+      expect(nodesInShortestPathOrder).toEqual([]);
+    });
+  });
+
+  describe('aStar', () => {
+    it('reaches the end and returns a connected path on an open grid', () => {
+      const grid = createGrid(5, 5);
+      const start = grid[0][0];
+      const end = grid[4][4];
+
+      const { visitedNodesInOrder, nodesInShortestPathOrder } = service.aStar(grid, start, end);
+
+      expect(visitedNodesInOrder).toContain(end);
+      expect(nodesInShortestPathOrder.length).toBeGreaterThan(0);
+      expect(nodesInShortestPathOrder[0]).toBe(start);
+      expect(nodesInShortestPathOrder[nodesInShortestPathOrder.length - 1]).toBe(end);
+    });
+  });
+});

src/app/pages/algorithms/sorting/service/sorting.service.spec.ts

@@ -0,0 +1,57 @@
+import { SortingService } from './sorting.service';
+import { SortData, SortSnapshot } from '../sorting.models';
+
+function toSortData(values: number[]): SortData[] {
+  return values.map((value) => ({ value, state: 'unsorted' }));
+}
+
+function finalValues(snapshots: SortSnapshot[]): number[] {
+  const lastSnapshot = snapshots[snapshots.length - 1];
+  return lastSnapshot.array.map((item) => item.value);
+}
+
+function isAscending(values: number[]): boolean {
+  for (let i = 1; i < values.length; i++) {
+    if (values[i - 1] > values[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+describe('SortingService', () => {
+  let service: SortingService;
+  const unsorted = [5, 2, 9, 1, 5, 6, 3, 8, 7, 4];
+  const expectedSorted = [...unsorted].sort((a, b) => a - b);
+
+  beforeEach(() => {
+    service = new SortingService();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  for (const algorithm of [
+    'bubbleSort',
+    'cocktailSort',
+    'quickSort',
+    'heapSort',
+    'timSort',
+  ] as const) {
+    it(`${algorithm} should produce a fully sorted final snapshot`, () => {
+      const snapshots = service[algorithm](toSortData(unsorted));
+      const result = finalValues(snapshots);
+
+      expect(result).toEqual(expectedSorted);
+      expect(isAscending(result)).toBeTrue();
+    });
+
+    it(`${algorithm} should not mutate the input array`, () => {
+      const input = toSortData(unsorted);
+      service[algorithm](input);
+
+      expect(input.map((item) => item.value)).toEqual(unsorted);
+    });
+  }
+});

src/app/pages/algorithms/sorting/sorting.component.html

@@ -49,7 +49,7 @@
       <div class="flex items-end h-[clamp(200px,40vh,400px)] border-b border-app-fg mb-[clamp(10px,3vw,20px)] gap-px bg-card-bg">
         @for (item of sortArray; track $index) {
           <div
-            class="grow w-2.5 min-w-px transition-all duration-[50ms]"
+            class="grow w-2.5 min-w-px transition-all duration-50"
             [style.height.px]="item.value * 3"
             [ngClass]="{
               'bg-[#424242]': item.state === 'unsorted',

src/app/pages/algorithms/sorting/sorting.component.ts

@@ -5,7 +5,7 @@ import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatSelectModule} from "@angular/material/select";
 import {MatButtonModule} from "@angular/material/button";
 import {MatIconModule} from "@angular/material/icon";
-import {TranslateModule} from "@ngx-translate/core";
+import {TranslatePipe} from "@ngx-translate/core";
 import { SortingService } from './service/sorting.service';
 import { SortingAudioService } from './service/sorting-audio.service';
 import {SortData, SortSnapshot} from './sorting.models';
@@ -16,7 +16,7 @@ import {AlgorithmInformation} from '../information/information.models';
 import {Information} from '../information/information';
 @Component({
   selector: 'app-sorting',
-  imports: [CommonModule, MatCardModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatIconModule, TranslateModule, FormsModule, MatInput, Information],
+  imports: [CommonModule, MatCardModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatIconModule, TranslatePipe, FormsModule, MatInput, Information],
   templateUrl: './sorting.component.html',
   styleUrl: './sorting.component.scss'
 })

src/app/pages/imprint/imprint.component.html

@@ -7,8 +7,8 @@
 
       <p>
         Andreas Dahm<br />
-        Bgm.-Germeier-Str. 2<br />
+        Hauptstraße 37A<br />
-        85586 Poing<br />
+        85614 Kirchseeon<br />
         {{ 'IMPRINT.COUNTRY' | translate }}
       </p>
     </div>

src/app/pages/not-found/not-found.component.html

@@ -0,0 +1,10 @@
+<section class="grid gap-fluid-md max-w-app mx-4 mt-auto">
+  <mat-card class="p-fluid-md text-center">
+    <h1 class="m-0 mb-2 text-[clamp(3rem,12vw,6rem)] font-bold opacity-80">404</h1>
+    <h2 class="m-0 mb-4 text-[clamp(1rem,3vw,1.2rem)] font-semibold">{{ 'NOT_FOUND.TITLE' | translate }}</h2>
+    <p class="opacity-80 mb-6">{{ 'NOT_FOUND.MESSAGE' | translate }}</p>
+    <a mat-flat-button color="primary" [routerLink]="RouterConstants.ABOUT.LINK">
+      {{ 'NOT_FOUND.BACK_HOME' | translate }}
+    </a>
+  </mat-card>
+</section>

src/app/pages/not-found/not-found.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatCard } from '@angular/material/card';
+import { MatButton } from '@angular/material/button';
+import { TranslatePipe } from '@ngx-translate/core';
+import { RouterConstants } from '../../constants/RouterConstants';
+
+@Component({
+  selector: 'app-not-found',
+  imports: [RouterLink, MatCard, MatButton, TranslatePipe],
+  templateUrl: './not-found.component.html',
+})
+export class NotFoundComponent {
+  protected readonly RouterConstants = RouterConstants;
+}

src/app/pages/projects/dialog/project-dialog.component.html

@@ -13,9 +13,9 @@
       </div>
 
       <div class="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] sm-dialog:grid-cols-1 gap-4 mb-4">
-        <div class="p-5 rounded-xl bg-black/[.03] border border-black/[.05] dark:bg-white/[.05] dark:border-white/10">
+        <div class="p-5 rounded-xl bg-black/3 border border-black/5 dark:bg-white/5 dark:border-white/10">
           <div class="flex items-center gap-3 mb-3 text-link">
-            <mat-icon class="!text-[24px] !w-6 !h-6">settings_suggest</mat-icon>
+            <mat-icon class="text-[24px]! w-6! h-6!">settings_suggest</mat-icon>
             <h3 class="m-0 text-sm uppercase tracking-wider font-semibold">{{ 'PROJECTS.SECTION.TECHNICAL' | translate }}</h3>
           </div>
           <ul class="m-0 pl-5 text-[0.95rem] leading-relaxed opacity-85">
@@ -25,9 +25,9 @@
           </ul>
         </div>
 
-        <div class="p-5 rounded-xl bg-black/[.03] border border-black/[.05] dark:bg-white/[.05] dark:border-white/10">
+        <div class="p-5 rounded-xl bg-black/3 border border-black/5 dark:bg-white/5 dark:border-white/10">
           <div class="flex items-center gap-3 mb-3 text-link">
-            <mat-icon class="!text-[24px] !w-6 !h-6">psychology</mat-icon>
+            <mat-icon class="text-[24px]! w-6! h-6!">psychology</mat-icon>
             <h3 class="m-0 text-sm uppercase tracking-wider font-semibold">{{ 'PROJECTS.SECTION.LEARNINGS' | translate }}</h3>
           </div>
           <ul class="m-0 pl-5 text-[0.95rem] leading-relaxed opacity-85">
@@ -46,7 +46,7 @@
         [attr.pagination]="true" [attr.keyboard]="true" style="width: 100%;">
         @for (img of project.images; track img) {
         <swiper-slide class="rounded-xl overflow-hidden flex flex-col bg-[#222]">
-          <img class="w-full h-auto !max-h-[clamp(300px,60vh,512px)] object-contain block shrink-0" [src]="img.url" [alt]="project.title | translate" />
+          <img class="w-full h-auto max-h-[clamp(300px,60vh,512px)]! object-contain block shrink-0" [src]="img.url" [alt]="project.title | translate" />
           @if (img.source) {
           <div class="text-xs text-[#aaa] bg-[#2a2a2a] p-2 text-right border-t border-[#444]">
             {{ img.source }}

src/app/pages/projects/projects.component.html

@@ -1,6 +1,6 @@
 <div class="grid gap-fluid-md grid-cols-[repeat(auto-fill,minmax(min(100%,450px),1fr))] max-w-app mx-4 mt-auto">
   @if (featuredProject(); as project) {
-    <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col h-full col-span-full hover:-translate-y-[5px] hover:shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
+    <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col h-full col-span-full hover:translate-y-[-5px] hover:shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
       <mat-card-header class="pb-4">
         <mat-card-title>{{ project.title | translate }}</mat-card-title>
         <mat-card-subtitle>{{ project.shortDescription | translate }}</mat-card-subtitle>
@@ -27,7 +27,7 @@
   }
 
   @for (project of otherProjects(); track project) {
-    <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col h-full hover:-translate-y-[5px] hover:shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
+    <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col h-full hover:translate-y-[-5px] hover:shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
       <mat-card-header class="pb-4">
         <mat-card-title>{{ project.title | translate }}</mat-card-title>
       </mat-card-header>

src/app/pages/projects/projects.component.ts

@@ -53,6 +53,33 @@ export class ProjectsComponent implements OnInit, OnDestroy {
   private queryParamSub: Subscription | undefined;
 
   allProjects: Projects[] = [
+    {
+      identifier: "claude-in-a-box",
+      title: 'PROJECTS.CLAUDE_BOX.TITLE',
+      shortDescription: 'PROJECTS.CLAUDE_BOX.SHORT_DESCRIPTION',
+      introduction: 'PROJECTS.CLAUDE_BOX.INTRODUCTION',
+      images: AssetsConstants.CLAUDE_BOX_IMAGES.map(url => ({ url, source: '' })),
+      icon: 'smart_toy',
+      assets: '',
+      links: [],
+      bulletPoints: [
+        'PROJECTS.CLAUDE_BOX.BULLET_1',
+        'PROJECTS.CLAUDE_BOX.BULLET_2',
+        'PROJECTS.CLAUDE_BOX.BULLET_3',
+        'PROJECTS.CLAUDE_BOX.BULLET_4',
+      ],
+      challenges: [
+        'PROJECTS.CLAUDE_BOX.CHALLENGE_1',
+        'PROJECTS.CLAUDE_BOX.CHALLENGE_2',
+        'PROJECTS.CLAUDE_BOX.CHALLENGE_3',
+      ],
+      learnings: [
+        'PROJECTS.CLAUDE_BOX.LEARNING_1',
+        'PROJECTS.CLAUDE_BOX.LEARNING_2',
+      ],
+      isFeatured: false,
+      technologies: ['Claude Code', 'MCP', 'Docker', 'Bash', 'Node.js']
+    },
     {
       identifier: "playground",
       title: 'PROJECTS.PLAYGROUND.TITLE',

src/app/pages/stopwatch/stopwatch.component.html

@@ -0,0 +1,122 @@
+<mat-card class="w-full max-w-[1920px] p-5">
+  <mat-card-header>
+    <mat-card-title>{{ 'STOPWATCH.TITLE' | translate }}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="flex flex-col items-center gap-6 mt-4">
+      <div
+        class="font-mono tabular-nums tracking-wider text-[clamp(2.5rem,8vw,5rem)] font-semibold leading-none rounded-2xl px-6 py-3 ring-2 ring-transparent transition-all duration-300 ease-out"
+        [class]="flashing()
+          ? 'scale-110 text-(--mat-sys-primary)! ring-(--mat-sys-primary)! shadow-[0_0_40px_var(--mat-sys-primary)]'
+          : ''"
+      >
+        {{ display() }}
+      </div>
+
+      <div class="flex flex-wrap gap-3 justify-center">
+        <button mat-flat-button color="primary" (click)="start()" [disabled]="state() === 'running'">
+          <mat-icon>play_arrow</mat-icon>
+          {{ 'STOPWATCH.START' | translate }}
+        </button>
+        <button mat-flat-button color="accent" (click)="pause()" [disabled]="state() !== 'running'">
+          <mat-icon>pause</mat-icon>
+          {{ 'STOPWATCH.PAUSE' | translate }}
+        </button>
+        <button mat-stroked-button (click)="stop()" [disabled]="state() === 'idle' && elapsedMs() === 0">
+          <mat-icon>stop</mat-icon>
+          {{ 'STOPWATCH.STOP' | translate }}
+        </button>
+        <button mat-stroked-button (click)="reset()" [disabled]="elapsedMs() === 0 && state() === 'idle'">
+          <mat-icon>restart_alt</mat-icon>
+          {{ 'STOPWATCH.RESET' | translate }}
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-3 items-center w-full max-w-[520px]">
+        <mat-checkbox [checked]="intervalEnabled()" (change)="intervalEnabled.set($event.checked)">
+          {{ 'STOPWATCH.INTERVAL_ENABLED' | translate }}
+        </mat-checkbox>
+
+        <p class="m-0 font-medium text-sm">{{ 'STOPWATCH.FIRST_INTERVAL' | translate }}</p>
+
+        <div class="flex flex-wrap gap-3 items-center justify-center">
+          <mat-form-field appearance="outline" class="w-[160px]">
+            <mat-label>{{ 'STOPWATCH.INTERVAL_MINUTES' | translate }}</mat-label>
+            <input
+              matInput
+              type="number"
+              min="0"
+              step="1"
+              [disabled]="!intervalEnabled()"
+              [ngModel]="firstIntervalMinutes()"
+              (ngModelChange)="updateIntervalValue(firstIntervalMinutes, $event)"
+            />
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="w-[160px]">
+            <mat-label>{{ 'STOPWATCH.INTERVAL_SECONDS' | translate }}</mat-label>
+            <input
+              matInput
+              type="number"
+              min="0"
+              max="59"
+              step="1"
+              [disabled]="!intervalEnabled()"
+              [ngModel]="firstIntervalSeconds()"
+              (ngModelChange)="updateIntervalValue(firstIntervalSeconds, $event)"
+            />
+          </mat-form-field>
+        </div>
+
+        <mat-checkbox
+          [checked]="secondIntervalEnabled()"
+          [disabled]="!intervalEnabled()"
+          (change)="secondIntervalEnabled.set($event.checked)"
+        >
+          {{ 'STOPWATCH.SECOND_INTERVAL_ENABLED' | translate }}
+        </mat-checkbox>
+
+        @if (secondIntervalEnabled()) {
+          <div class="flex flex-wrap gap-3 items-center justify-center">
+            <mat-form-field appearance="outline" class="w-[160px]">
+              <mat-label>{{ 'STOPWATCH.INTERVAL_MINUTES' | translate }}</mat-label>
+              <input
+                matInput
+                type="number"
+                min="0"
+                step="1"
+                [disabled]="!intervalEnabled()"
+                [ngModel]="secondIntervalMinutes()"
+                (ngModelChange)="updateIntervalValue(secondIntervalMinutes, $event)"
+              />
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" class="w-[160px]">
+              <mat-label>{{ 'STOPWATCH.INTERVAL_SECONDS' | translate }}</mat-label>
+              <input
+                matInput
+                type="number"
+                min="0"
+                max="59"
+                step="1"
+                [disabled]="!intervalEnabled()"
+                [ngModel]="secondIntervalSeconds()"
+                (ngModelChange)="updateIntervalValue(secondIntervalSeconds, $event)"
+              />
+            </mat-form-field>
+          </div>
+        }
+
+        <p class="m-0 opacity-70 text-sm text-center">
+          {{ 'STOPWATCH.INTERVAL_HINT' | translate }}
+        </p>
+
+        @if (intervalEnabled() && schedulePreview()) {
+          <p class="m-0 opacity-70 text-sm text-center">
+            {{ 'STOPWATCH.INTERVAL_SCHEDULE' | translate }} {{ schedulePreview() }} …
+          </p>
+        }
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

src/app/pages/stopwatch/stopwatch.component.spec.ts

@@ -0,0 +1,39 @@
+import {collectBeepTimes, countBeeps, slotOfBeep} from './stopwatch.component';
+
+const MINUTE = 60_000;
+
+describe('stopwatch interval scheduling', () => {
+  const firstMs = 1 * MINUTE;
+  const secondMs = 2 * MINUTE;
+
+  it('counts no beeps without a configured first interval', () => {
+    expect(countBeeps(10 * MINUTE, 0, secondMs)).toBe(0);
+  });
+
+  it('falls back to a single repeating interval when the second one is off', () => {
+    expect(countBeeps(0.9 * MINUTE, firstMs, 0)).toBe(0);
+    expect(countBeeps(1 * MINUTE, firstMs, 0)).toBe(1);
+    expect(countBeeps(3 * MINUTE, firstMs, 0)).toBe(3);
+  });
+
+  it('alternates both intervals so beeps fall on 1, 3, 4, 6, 7 minutes', () => {
+    const expectedBeepCountPerMinute = [0, 1, 1, 2, 3, 3, 4, 5, 5, 6];
+
+    expectedBeepCountPerMinute.forEach((expected, minute) => {
+      expect(countBeeps(minute * MINUTE, firstMs, secondMs)).toBe(expected);
+    });
+  });
+
+  it('reports the alternating beep times', () => {
+    const times = collectBeepTimes(firstMs, secondMs, 5);
+
+    expect(times).toEqual([1 * MINUTE, 3 * MINUTE, 4 * MINUTE, 6 * MINUTE, 7 * MINUTE]);
+  });
+
+  it('assigns odd beeps to the first interval and even ones to the second', () => {
+    expect(slotOfBeep(1, secondMs)).toBe('first');
+    expect(slotOfBeep(2, secondMs)).toBe('second');
+    expect(slotOfBeep(3, secondMs)).toBe('first');
+    expect(slotOfBeep(2, 0)).toBe('first');
+  });
+});

src/app/pages/stopwatch/stopwatch.component.ts

@@ -0,0 +1,323 @@
+import {Component, computed, effect, inject, OnDestroy, signal, WritableSignal} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {Title} from '@angular/platform-browser';
+import {TranslatePipe} from '@ngx-translate/core';
+
+type StopwatchState = 'idle' | 'running' | 'paused';
+
+/** Which of the two configured intervals a beep belongs to. */
+type IntervalSlot = 'first' | 'second';
+
+const FIRST_INTERVAL_FREQUENCY_HZ = 880;
+const SECOND_INTERVAL_FREQUENCY_HZ = 587;
+
+@Component({
+  selector: 'app-stopwatch',
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatCheckboxModule,
+    TranslatePipe
+  ],
+  templateUrl: './stopwatch.component.html'
+})
+export class StopwatchComponent implements OnDestroy {
+  readonly state = signal<StopwatchState>('idle');
+  readonly elapsedMs = signal(0);
+
+  readonly intervalEnabled = signal(false);
+  readonly firstIntervalMinutes = signal(1);
+  readonly firstIntervalSeconds = signal(0);
+
+  readonly secondIntervalEnabled = signal(false);
+  readonly secondIntervalMinutes = signal(2);
+  readonly secondIntervalSeconds = signal(0);
+
+  readonly flashing = signal(false);
+
+  readonly display = computed(() => formatElapsed(this.elapsedMs()));
+
+  readonly firstIntervalMs = computed(
+    () => toMilliseconds(this.firstIntervalMinutes(), this.firstIntervalSeconds())
+  );
+
+  readonly secondIntervalMs = computed(() => {
+    if (!this.secondIntervalEnabled()) {
+      return 0;
+    }
+    return toMilliseconds(this.secondIntervalMinutes(), this.secondIntervalSeconds());
+  });
+
+  /** Absolute times of the upcoming beeps, used as a preview of the alternating schedule. */
+  readonly schedulePreview = computed(() => {
+    const beepTimes = collectBeepTimes(this.firstIntervalMs(), this.secondIntervalMs(), 4);
+    return beepTimes.map(formatElapsedShort).join(' · ');
+  });
+
+  private intervalId: number | null = null;
+  private startTimestamp = 0;
+  private accumulatedMs = 0;
+  private previousElapsedMs = 0;
+  private audioContext: AudioContext | null = null;
+  private flashTimeoutId: number | null = null;
+  private readonly titleService = inject(Title);
+  private readonly originalTitle = this.titleService.getTitle();
+
+  constructor() {
+    effect(() => {
+      const state = this.state();
+      const elapsed = this.elapsedMs();
+      this.updateDocumentTitle(state, elapsed);
+    });
+  }
+
+  start(): void {
+    if (this.state() === 'running') {
+      return;
+    }
+    this.ensureAudioContext();
+    this.resumeAudioContext();
+    this.startTimestamp = performance.now();
+    this.previousElapsedMs = this.accumulatedMs;
+    this.state.set('running');
+    this.startTicking();
+  }
+
+  pause(): void {
+    if (this.state() !== 'running') {
+      return;
+    }
+    this.accumulatedMs = this.elapsedMs();
+    this.cancelTick();
+    this.state.set('paused');
+  }
+
+  stop(): void {
+    this.cancelTick();
+    this.accumulatedMs = 0;
+    this.previousElapsedMs = 0;
+    this.elapsedMs.set(0);
+    this.state.set('idle');
+  }
+
+  reset(): void {
+    this.stop();
+  }
+
+  /** Number inputs can emit empty strings or negative values, so sanitize before storing. */
+  updateIntervalValue(target: WritableSignal<number>, value: unknown): void {
+    target.set(toNonNegativeInteger(value));
+  }
+
+  ngOnDestroy(): void {
+    this.cancelTick();
+    if (this.flashTimeoutId !== null) {
+      clearTimeout(this.flashTimeoutId);
+      this.flashTimeoutId = null;
+    }
+    if (this.audioContext) {
+      this.audioContext.close().catch(() => undefined);
+      this.audioContext = null;
+    }
+    this.titleService.setTitle(this.originalTitle);
+  }
+
+  private startTicking(): void {
+    this.cancelTick();
+    this.tick();
+    // setInterval keeps firing in background tabs (throttled to ~1s) so beeps still play when unfocused.
+    this.intervalId = window.setInterval(this.tick, 50);
+  }
+
+  private tick = (): void => {
+    if (this.state() !== 'running') {
+      return;
+    }
+    const now = performance.now();
+    const newElapsed = this.accumulatedMs + (now - this.startTimestamp);
+
+    this.checkIntervalCrossing(this.previousElapsedMs, newElapsed);
+    this.previousElapsedMs = newElapsed;
+    this.elapsedMs.set(newElapsed);
+  };
+
+  private cancelTick(): void {
+    if (this.intervalId !== null) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  private updateDocumentTitle(state: StopwatchState, elapsed: number): void {
+    if (state === 'idle') {
+      this.titleService.setTitle(this.originalTitle);
+      return;
+    }
+    const prefix = state === 'running' ? '▶' : '⏸';
+    this.titleService.setTitle(`${prefix} ${formatElapsedShort(elapsed)} · ${this.originalTitle}`);
+  }
+
+  private checkIntervalCrossing(prevMs: number, currMs: number): void {
+    if (!this.intervalEnabled()) {
+      return;
+    }
+    const firstMs = this.firstIntervalMs();
+    const secondMs = this.secondIntervalMs();
+
+    const previousBeeps = countBeeps(prevMs, firstMs, secondMs);
+    const currentBeeps = countBeeps(currMs, firstMs, secondMs);
+    if (currentBeeps <= previousBeeps) {
+      return;
+    }
+
+    const slot = slotOfBeep(currentBeeps, secondMs);
+    this.beep(slot === 'first' ? FIRST_INTERVAL_FREQUENCY_HZ : SECOND_INTERVAL_FREQUENCY_HZ);
+    this.triggerFlash();
+  }
+
+  private triggerFlash(): void {
+    if (this.flashTimeoutId !== null) {
+      clearTimeout(this.flashTimeoutId);
+    }
+    this.flashing.set(true);
+    this.flashTimeoutId = window.setTimeout(() => {
+      this.flashing.set(false);
+      this.flashTimeoutId = null;
+    }, 450);
+  }
+
+  private ensureAudioContext(): void {
+    if (this.audioContext) {
+      return;
+    }
+    const Ctor = window.AudioContext ?? (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+    if (Ctor) {
+      this.audioContext = new Ctor();
+    }
+  }
+
+  private resumeAudioContext(): void {
+    // Browsers suspend AudioContext until a user gesture; resume on start so beeps can play in background tabs.
+    if (this.audioContext && this.audioContext.state === 'suspended') {
+      this.audioContext.resume().catch(() => undefined);
+    }
+  }
+
+  private beep(frequencyHz: number): void {
+    if (!this.audioContext) {
+      return;
+    }
+    const ctx = this.audioContext;
+    const oscillator = ctx.createOscillator();
+    const gain = ctx.createGain();
+
+    oscillator.type = 'sine';
+    oscillator.frequency.value = frequencyHz;
+
+    const now = ctx.currentTime;
+    const duration = 0.18;
+    gain.gain.setValueAtTime(0, now);
+    gain.gain.linearRampToValueAtTime(0.25, now + 0.01);
+    gain.gain.linearRampToValueAtTime(0, now + duration);
+
+    oscillator.connect(gain);
+    gain.connect(ctx.destination);
+    oscillator.start(now);
+    oscillator.stop(now + duration);
+  }
+}
+
+function toMilliseconds(minutes: number, seconds: number): number {
+  return minutes * 60_000 + seconds * 1_000;
+}
+
+function toNonNegativeInteger(value: unknown): number {
+  const parsed = Math.floor(Number(value));
+  if (!Number.isFinite(parsed) || parsed < 0) {
+    return 0;
+  }
+  return parsed;
+}
+
+/**
+ * The two intervals alternate: the first beep lands after `firstMs`, the next one
+ * `secondMs` later, then `firstMs` again. With first = 1min and second = 2min the
+ * beeps therefore fall on 1, 3, 4, 6, 7 ... minutes.
+ */
+export function countBeeps(elapsedMs: number, firstMs: number, secondMs: number): number {
+  if (firstMs <= 0) {
+    return 0;
+  }
+  if (secondMs <= 0) {
+    return Math.floor(elapsedMs / firstMs);
+  }
+
+  const cycleMs = firstMs + secondMs;
+  const completedCycles = Math.floor(elapsedMs / cycleMs);
+  const remainderMs = elapsedMs % cycleMs;
+  const firstBeepOfCycleReached = remainderMs >= firstMs ? 1 : 0;
+
+  return completedCycles * 2 + firstBeepOfCycleReached;
+}
+
+/** Beeps alternate, so odd beep numbers end the first interval and even ones the second. */
+export function slotOfBeep(beepNumber: number, secondMs: number): IntervalSlot {
+  if (secondMs <= 0) {
+    return 'first';
+  }
+  return beepNumber % 2 === 1 ? 'first' : 'second';
+}
+
+export function collectBeepTimes(firstMs: number, secondMs: number, count: number): number[] {
+  if (firstMs <= 0) {
+    return [];
+  }
+
+  const times: number[] = [];
+  let current = 0;
+  for (let beepNumber = 1; beepNumber <= count; beepNumber++) {
+    const isFirstSlot = slotOfBeep(beepNumber, secondMs) === 'first';
+    current += isFirstSlot ? firstMs : secondMs;
+    times.push(current);
+  }
+  return times;
+}
+
+function formatElapsed(totalMs: number): string {
+  const ms = Math.floor(totalMs % 1000);
+  const totalSeconds = Math.floor(totalMs / 1000);
+  const seconds = totalSeconds % 60;
+  const totalMinutes = Math.floor(totalSeconds / 60);
+  const minutes = totalMinutes % 60;
+  const hours = Math.floor(totalMinutes / 60);
+
+  return `${pad(hours, 2)}:${pad(minutes, 2)}:${pad(seconds, 2)}.${pad(ms, 3)}`;
+}
+
+function formatElapsedShort(totalMs: number): string {
+  const totalSeconds = Math.floor(totalMs / 1000);
+  const seconds = totalSeconds % 60;
+  const totalMinutes = Math.floor(totalSeconds / 60);
+  const minutes = totalMinutes % 60;
+  const hours = Math.floor(totalMinutes / 60);
+
+  if (hours > 0) {
+    return `${pad(hours, 2)}:${pad(minutes, 2)}:${pad(seconds, 2)}`;
+  }
+  return `${pad(minutes, 2)}:${pad(seconds, 2)}`;
+}
+
+function pad(value: number, length: number): string {
+  return value.toString().padStart(length, '0');
+}

src/app/service/gpu-capability.service.spec.ts

@@ -0,0 +1,57 @@
+import { GpuCapabilityService } from './gpu-capability.service';
+
+describe('GpuCapabilityService', () => {
+  let service: GpuCapabilityService;
+  const originalGpu = (navigator as unknown as { gpu: unknown }).gpu;
+
+  function setGpu(value: unknown): void {
+    Object.defineProperty(navigator, 'gpu', { value, configurable: true });
+  }
+
+  beforeEach(() => {
+    service = new GpuCapabilityService();
+  });
+
+  afterEach(() => {
+    setGpu(originalGpu);
+  });
+
+  it('reports "webgpu" when an adapter is available', async () => {
+    setGpu({ requestAdapter: () => Promise.resolve({}) });
+
+    const tier = await service.detect();
+
+    expect(tier).toBe('webgpu');
+    expect(service.tier()).toBe('webgpu');
+  });
+
+  it('falls back to "webgl" when WebGPU is missing but a WebGL2 context exists', async () => {
+    setGpu(undefined);
+    const fakeCanvas = { getContext: () => ({}) } as unknown as HTMLCanvasElement;
+    spyOn(document, 'createElement').and.returnValue(fakeCanvas);
+
+    const tier = await service.detect();
+
+    expect(tier).toBe('webgl');
+  });
+
+  it('reports "none" when neither WebGPU nor WebGL is available', async () => {
+    setGpu(undefined);
+    const fakeCanvas = { getContext: () => null } as unknown as HTMLCanvasElement;
+    spyOn(document, 'createElement').and.returnValue(fakeCanvas);
+
+    const tier = await service.detect();
+
+    expect(tier).toBe('none');
+  });
+
+  it('caches the detected tier and probes only once', async () => {
+    setGpu({ requestAdapter: () => Promise.resolve({}) });
+
+    const first = await service.detect();
+    setGpu(undefined);
+    const second = await service.detect();
+
+    expect(second).toBe(first);
+  });
+});

src/app/service/gpu-capability.service.ts

@@ -31,7 +31,7 @@ export class GpuCapabilityService {
   }
 
   private async isWebGpuAvailable(): Promise<boolean> {
-    if (!navigator.gpu) {
+    if (typeof navigator === 'undefined' || !navigator.gpu) {
       return false;
     }
 
@@ -44,6 +44,10 @@ export class GpuCapabilityService {
   }
 
   private isWebGlAvailable(): boolean {
+    if (typeof document === 'undefined') {
+      return false;
+    }
+
     try {
       const canvas = document.createElement('canvas');
       const context = canvas.getContext('webgl2');

src/app/service/language.service.spec.ts

@@ -0,0 +1,57 @@
+import { TestBed } from '@angular/core/testing';
+import { TranslateService } from '@ngx-translate/core';
+import { LanguageService } from './language.service';
+import { LocalStoreConstants } from '../constants/LocalStoreConstants';
+
+describe('LanguageService', () => {
+  let translateSpy: jasmine.SpyObj<TranslateService>;
+
+  function createService(): LanguageService {
+    translateSpy = jasmine.createSpyObj<TranslateService>('TranslateService', ['use']);
+    TestBed.configureTestingModule({
+      providers: [{ provide: TranslateService, useValue: translateSpy }],
+    });
+    return TestBed.inject(LanguageService);
+  }
+
+  const documentLanguage = document.documentElement.lang;
+
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    localStorage.clear();
+    document.documentElement.lang = documentLanguage;
+  });
+
+  it('uses the stored language as the initial value', () => {
+    localStorage.setItem(LocalStoreConstants.LANGUAGE_KEY, 'de');
+    const service = createService();
+
+    expect(service.lang()).toBe('de');
+    expect(translateSpy.use).toHaveBeenCalledWith('de');
+  });
+
+  it('use() updates the signal, the translate service and localStorage', () => {
+    localStorage.setItem(LocalStoreConstants.LANGUAGE_KEY, 'en');
+    const service = createService();
+
+    service.use('de');
+
+    expect(service.lang()).toBe('de');
+    expect(translateSpy.use).toHaveBeenCalledWith('de');
+    expect(localStorage.getItem(LocalStoreConstants.LANGUAGE_KEY)).toBe('de');
+  });
+
+  it('marks the document with the active language so screen readers switch voice', () => {
+    localStorage.setItem(LocalStoreConstants.LANGUAGE_KEY, 'en');
+    const service = createService();
+
+    expect(document.documentElement.lang).toBe('en');
+
+    service.use('de');
+
+    expect(document.documentElement.lang).toBe('de');
+  });
+});

src/app/service/language.service.ts

@@ -1,4 +1,5 @@
 import { Injectable, inject, signal } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
 import {LocalStoreConstants} from '../constants/LocalStoreConstants';
 
@@ -7,26 +8,39 @@ type Lang = 'de' | 'en';
 @Injectable({ providedIn: 'root' })
 export class LanguageService {
   private readonly translate = inject(TranslateService);
+  private readonly document = inject(DOCUMENT);
   readonly lang = signal<Lang>(this.getInitial());
 
   constructor() {
     // translate service lang and fallback are already configured via provideTranslateService in app.config
     // just ensure the stored preference is active on startup
     this.translate.use(this.lang());
+    this.markDocumentLanguage(this.lang());
   }
 
   use(l: Lang) {
     this.lang.set(l);
     this.translate.use(l);
+    this.markDocumentLanguage(l);
     try { localStorage.setItem(LocalStoreConstants.LANGUAGE_KEY, l); } catch (e) { void e; }
   }
 
+  /**
+   * index.html ships a static lang="en". Without this the document keeps
+   * claiming English after a switch, so a screen reader reads the German
+   * content with an English voice.
+   */
+  private markDocumentLanguage(l: Lang): void {
+    this.document.documentElement.lang = l;
+  }
+
   private getInitial(): Lang {
     try {
       const stored = localStorage.getItem(LocalStoreConstants.LANGUAGE_KEY) as Lang | null;
       if (stored === 'de' || stored === 'en') return stored;
     } catch (e) { void e; }
-    const browser = (navigator.language || 'en').toLowerCase();
+    const browserLang = typeof navigator !== 'undefined' ? navigator.language : 'en';
+    const browser = (browserLang || 'en').toLowerCase();
     return browser.startsWith('de') ? 'de' : 'en';
   }
 }

src/app/service/seo.service.ts

@@ -0,0 +1,78 @@
+import { Injectable, inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Title, Meta } from '@angular/platform-browser';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { filter } from 'rxjs';
+
+const SITE_URL = 'https://andreas-dahm.eu';
+const DEFAULT_SEO_KEY = 'DEFAULT';
+
+/**
+ * Keeps the document title and SEO/social meta tags in sync with the active
+ * route and the selected language. Each route declares its translation key via
+ * `data: { seo: 'ABOUT' }`; the matching `SEO.<key>` i18n entry provides the
+ * localized title and description.
+ */
+@Injectable({ providedIn: 'root' })
+export class SeoService {
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+  private readonly title = inject(Title);
+  private readonly meta = inject(Meta);
+  private readonly translate = inject(TranslateService);
+  private readonly document = inject(DOCUMENT);
+
+  private currentSeoKey = DEFAULT_SEO_KEY;
+
+  init(): void {
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe(() => {
+        this.currentSeoKey = this.resolveSeoKey();
+        this.applyTags();
+      });
+
+    // Re-translate the tags when the user switches language.
+    this.translate.onLangChange.subscribe(() => this.applyTags());
+  }
+
+  private resolveSeoKey(): string {
+    let active = this.route;
+    while (active.firstChild) {
+      active = active.firstChild;
+    }
+    const seoKey = active.snapshot.data['seo'];
+    return typeof seoKey === 'string' ? seoKey : DEFAULT_SEO_KEY;
+  }
+
+  private applyTags(): void {
+    const titleKey = `SEO.${this.currentSeoKey}.TITLE`;
+    const descriptionKey = `SEO.${this.currentSeoKey}.DESCRIPTION`;
+
+    this.translate.get([titleKey, descriptionKey]).subscribe((translations) => {
+      const title = translations[titleKey];
+      const description = translations[descriptionKey];
+      const url = SITE_URL + this.router.url.split('?')[0];
+
+      this.title.setTitle(title);
+      this.meta.updateTag({ name: 'description', content: description });
+      this.meta.updateTag({ property: 'og:title', content: title });
+      this.meta.updateTag({ property: 'og:description', content: description });
+      this.meta.updateTag({ property: 'og:url', content: url });
+      this.meta.updateTag({ name: 'twitter:title', content: title });
+      this.meta.updateTag({ name: 'twitter:description', content: description });
+      this.updateCanonical(url);
+    });
+  }
+
+  private updateCanonical(url: string): void {
+    let link = this.document.querySelector<HTMLLinkElement>('link[rel="canonical"]');
+    if (!link) {
+      link = this.document.createElement('link');
+      link.setAttribute('rel', 'canonical');
+      this.document.head.appendChild(link);
+    }
+    link.setAttribute('href', url);
+  }
+}

src/app/service/theme.service.spec.ts

@@ -0,0 +1,46 @@
+import { TestBed } from '@angular/core/testing';
+import { ThemeService } from './theme.service';
+import { LocalStoreConstants } from '../constants/LocalStoreConstants';
+
+describe('ThemeService', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    localStorage.clear();
+  });
+
+  function createService(): ThemeService {
+    TestBed.configureTestingModule({});
+    return TestBed.inject(ThemeService);
+  }
+
+  it('uses the stored theme as the initial value', () => {
+    localStorage.setItem(LocalStoreConstants.THEME_KEY, 'dark');
+    const service = createService();
+
+    expect(service.theme()).toBe('dark');
+  });
+
+  it('toggle switches between light and dark', () => {
+    localStorage.setItem(LocalStoreConstants.THEME_KEY, 'light');
+    const service = createService();
+
+    service.toggle();
+    expect(service.theme()).toBe('dark');
+
+    service.toggle();
+    expect(service.theme()).toBe('light');
+  });
+
+  it('setTheme persists the selection to localStorage', () => {
+    localStorage.setItem(LocalStoreConstants.THEME_KEY, 'light');
+    const service = createService();
+
+    service.setTheme('dark');
+    TestBed.tick();
+
+    expect(localStorage.getItem(LocalStoreConstants.THEME_KEY)).toBe('dark');
+  });
+});

src/app/shared/components/generic-grid/generic-grid.html

@@ -1,5 +1,5 @@
 <div class="flex justify-center items-center w-full max-w-[1000px] mx-auto">
   <canvas #gridCanvas
-          class="block w-full h-auto aspect-square min-w-[200px] max-w-[1000px] touch-none rounded-[clamp(10px,2vw,20px)] outline-none">
+          class="block w-full h-auto aspect-square min-w-[200px] max-w-[1000px] touch-none rounded-[clamp(10px,2vw,20px)] outline-hidden">
   </canvas>
 </div>

src/app/shared/components/particles-background/particles-background.component.ts

@@ -1,4 +1,5 @@
-import {AfterViewInit, Component, ElementRef, HostListener, inject, NgZone, OnDestroy, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, HostListener, inject, NgZone, OnDestroy, PLATFORM_ID, ViewChild} from '@angular/core';
+import {isPlatformBrowser} from '@angular/common';
 
 @Component({
   selector: 'app-particles-background',
@@ -10,6 +11,7 @@ export class ParticleBackgroundComponent implements AfterViewInit, OnDestroy {
   @ViewChild('canvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;
 
   private readonly ngZone = inject(NgZone);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
   private ctx!: CanvasRenderingContext2D;
   private particles: any[] = [];
@@ -21,6 +23,11 @@ export class ParticleBackgroundComponent implements AfterViewInit, OnDestroy {
   private readonly particleSpeed = 0.8;
 
   ngAfterViewInit(): void {
+    // Canvas animation relies on browser-only APIs; skip it during SSR/prerender.
+    if (!this.isBrowser) {
+      return;
+    }
+
     const canvas = this.canvasRef.nativeElement;
     this.ctx = canvas.getContext('2d')!;
 
@@ -38,6 +45,10 @@ export class ParticleBackgroundComponent implements AfterViewInit, OnDestroy {
 
   @HostListener('window:resize')
   resizeCanvas(): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
     const canvas = this.canvasRef.nativeElement;
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;

src/app/shared/components/render-canvas/babylon-canvas.component.html

@@ -1,5 +1,5 @@
 <div class="flex justify-center items-center w-full max-w-[1000px] mx-auto">
   <canvas #renderCanvas
-          class="block w-full h-auto aspect-square min-w-[200px] max-w-[1000px] touch-none rounded-[clamp(10px,2vw,20px)] outline-none">
+          class="block w-full h-auto aspect-square min-w-[200px] max-w-[1000px] touch-none rounded-[clamp(10px,2vw,20px)] outline-hidden">
   </canvas>
 </div>

src/assets/i18n/de.json

@@ -1,36 +1,51 @@
 {
   "APP": {
     "TITLE": "Playground",
-    "COPYRIGHT": "Bilder und Sourcecode sind urheberrechtlich geschützt, keine Nutzung ohne Zustimmung!"
+    "COPYRIGHT": "Bilder und Sourcecode sind urheberrechtlich geschützt, keine Nutzung ohne Zustimmung!",
+    "AI_NOTICE": "Entstanden mit einem KI-gestützten Engineering-Workflow.",
+    "AI_NOTICE_LINK": "Wie ich mit KI arbeite"
   },
   "TOPBAR": {
     "ABOUT": "Über mich",
     "IMPRINT": "Impressum",
     "PROJECTS": "Projekte",
     "ALGORITHMS": "Algorithmen",
+    "STOPWATCH": "Stoppuhr",
     "SETTINGS": "Einstellungen",
     "LANGUAGE": "Sprache",
     "APPEARANCE": "Darstellung"
   },
-  "THEME": { "LIGHT": "Hell", "DARK": "Dunkel" },
+  "THEME": {
-  "LANG": { "LABEL": "Sprache", "EN": "Englisch", "DE": "Deutsch" },
+    "LIGHT": "Hell",
+    "DARK": "Dunkel"
+  },
+  "LANG": {
+    "LABEL": "Sprache",
+    "EN": "Englisch",
+    "DE": "Deutsch"
+  },
   "ABOUT": {
-    "ALT": { "PROFILE": "Profilfoto von Andreas Dahm" },
+    "ALT": {
+      "PROFILE": "Profilfoto von Andreas Dahm"
+    },
     "HELLO": "Hallo, ich bin Andreas.",
-    "LEAD": "Bereits in meiner Ausbildung zum Fachinformatiker habe ich gemerkt, wie sehr mich Softwareentwicklung interessiert. Nach meinem Studium der Angewandten Informatik an der FH Bingen arbeite ich seit 2010 durchgehend als Softwareentwickler. In dieser Zeit konnte ich in verschiedenen Bereichen Erfahrungen sammeln, darunter 3D-Simulation und moderne Web-Anwendungen. Auch privat beschäftige ich mich gern mit Softwareentwicklung, besonders mit Spieleentwicklung und algorithmischen Themen. Schön, dass du hier bist!",
+    "LEAD": "Ich arbeite seit 2010 als Softwareentwickler, die meiste Zeit davon in zwei recht unterschiedlichen Bereichen. Der eine ist Echtzeit-3D-Simulation: Stoffphysik, Kollisionserkennung, GPU-Shader. Der andere ist Cloud-Architektur für größere Unternehmensplattformen. Ein paar Jahre habe ich ein kleines Backend-Team geleitet, den Umbau eines großen Legacy-Monolithen Richtung Microservices geplant und zusammen mit meinem Bruder ein Spiel auf Steam veröffentlicht. Zuletzt stecke ich viel Zeit in Tooling rund um KI-gestützte Entwicklung, vor allem in die Frage, wie das Ergebnis überprüfbar bleibt. Privat baue ich Spiele und probiere Sachen mit Algorithmen aus. Das meiste davon landet irgendwann auf dieser Seite.",
     "ROLE": "Senior Software Entwickler / Full-Stack Entwickler / Softwarearchitekt",
     "LOCATION": "München · Remote",
-    "DOWNLOAD_CV": "Lebenslauf herunterladen",
     "VIEW_PROJECTS": "Projekte ansehen",
     "CONTACT_ME": "Kontaktiere mich",
     "SECTION": {
       "SKILLS": "Fähigkeiten & Stack",
-      "BACKEND_ARCH": "Backend & Architektur",
+      "LANGUAGES": "Sprachen & Frameworks",
-      "INFRA_CLOUD": "Infrastruktur & Cloud",
+      "ARCH_CLOUD": "Architektur & Cloud",
       "SIM_ALGO": "Simulation & Algorithmen",
+      "AI_ENG": "KI-gestütztes Engineering",
       "EXPERIENCE": "Erfahrung",
       "PROJECTS": "Projekte",
-      "EDUCATION": "Ausbildung"
+      "EDUCATION": "Ausbildung",
+      "SHOW_EARLIER_XP": "Frühere Stationen anzeigen",
+      "SHOW_EARLIER_EDU": "Frühere Ausbildung anzeigen",
+      "SHOW_LESS": "Weniger anzeigen"
     },
     "SKILLS": {
       "JAVA": "Java",
@@ -49,7 +64,12 @@
       "ENG_SIM": "3D Simulation",
       "ENG_GPU": "WebGPU / OpenGL / GLSL",
       "ENG_PERF": "Performance Optimization",
-      "ENG_3D": "3D-Scanner Tech"
+      "ENG_3D": "3D-Scanner Tech",
+      "AI_AGENTS": "Claude Code / Agent SDK",
+      "AI_MCP": "MCP-Server",
+      "AI_CONTEXT": "Context- & Prompt-Engineering",
+      "AI_HARNESS": "Agent-Harness-Design",
+      "AI_GATES": "Automatisierte Review-Gates"
     },
     "TOOLS": {
       "GIT": "Git",
@@ -159,12 +179,22 @@
         "TIME": "Jul. 2002 – Jun. 2005",
         "HIGHLIGHTS": {
           "P1": "Entwicklung in PERL, PHP und ASP.",
-          "P2": "Portierung, Wartung und Reengineering von bestender Software.",
+          "P2": "Portierung, Wartung und Reengineering von bestehender Software.",
           "P3": "Regelmäßige Durchführung von Systemtests und Qualitätskontrollen, sowie deren Dokumentation."
         }
       }
     },
     "PROJECT": {
+      "CLAUDE_BOX": {
+        "TITLE": "Claude-in-a-Box",
+        "DESCRIPTION": "Eine Entwicklungsumgebung im Container, in der ein KI-Coding-Agent nach einem festen Regelsatz arbeitet und nicht nach dem, was ich gerade eintippe. Er zieht sich die Regeln für den Stack, den er im Repository vorfindet, und ein Git-Hook stoppt den Commit, wenn Build oder Tests rot sind.",
+        "LINK_INTERNAL": "Projektdetails",
+        "HIGHLIGHTS": {
+          "P1": "Der Agent lädt die Regeln für den Stack, den er im Repo vorfindet. Ein Java-Service bekommt also andere als ein Frontend.",
+          "P2": "Ein Commit-Hook führt Build und Tests aus und blockiert den Commit, wenn sie fehlschlagen.",
+          "P3": "MCP-Server für Codesuche und lesenden Jira-Zugriff, dazu eigene Review-Agenten, die den Diff durchgehen."
+        }
+      },
       "P2": {
         "TITLE": "Playground",
         "DESCRIPTION": "Dieses Projekt ist, wie der Name schon sagt, ein persönlicher Playground, der im Laufe der Zeit wachsen soll. Es präsentiert verschiedene private Projekte, an denen ich arbeite, und dokumentiert deren Fortschritt, zentrale Ideen und wichtige Meilensteine.",
@@ -331,10 +361,24 @@
       "CHALLENGE_2": "Mathematische Stabilisierung der Integrationsverfahren bei hohen Krafteinwirkungen.",
       "LEARNING_1": "Transfer von theoretischen Forschungsarbeiten in produktiven, performanten Code.",
       "LEARNING_2": "Präzises Arbeiten und Dokumentation nach wissenschaftlichen Standards."
+    },
+    "CLAUDE_BOX": {
+      "TITLE": "Claude-in-a-Box",
+      "SHORT_DESCRIPTION": "Ein Container-Setup, um mit einem KI-Coding-Agenten nach einem festen Regelsatz zu arbeiten.",
+      "INTRODUCTION": "Ein KI-Coding-Agent produziert den ganzen Tag Code, ohne sich zu beschweren. Das Problem ist, dass das Ergebnis meistens vernünftig aussieht, auch wenn es falsch ist, und die ganzen Kosten damit im Review landen. Also habe ich ein Docker-Setup gebaut, das den Agenten denselben Regeln unterwirft wie alle anderen, die am Repository arbeiten. Er liest die Architekturregeln des Projekts, in dem er gerade steckt, und der Build muss durchlaufen, bevor ein Commit möglich ist. Auf den Hook, der genau das durchsetzt, komme ich immer wieder zurück, weil er das Einzige ist, woran der Agent nicht vorbeikommt.",
+      "BULLET_1": "Container mit festen Toolchains: JDKs und Maven über SDKMAN, Node und ein Home-Volume, das einen Rebuild übersteht.",
+      "BULLET_2": "Die Regeln werden per Erkennung geladen. Ein Repo mit pom.xml bekommt die Java- und Spring-Regeln, eines mit package.json die TypeScript-Regeln, und Repos mit eigenen Architekturnotizen bekommen diese zusätzlich.",
+      "BULLET_3": "Ein Commit-Hook ermittelt den Stack, führt den passenden Build und die Tests aus und verweigert den Commit, wenn sie fehlschlagen.",
+      "BULLET_4": "MCP-Server für Code-Graph-Abfragen und lesende Jira-Zugriffe, dazu Review-Agenten, die einen fertigen Diff prüfen, bevor er als erledigt gilt.",
+      "CHALLENGE_1": "Die Regeln kurz genug zu halten, dass sie noch etwas bringen. Lange allgemeine Richtlinien werden einfach ignoriert, also sind sie in Dateien pro Stack und pro Repo aufgeteilt, die nur bei Bedarf geladen werden.",
+      "CHALLENGE_2": "Das Quality Gate so zu bauen, dass der Agent sich nicht daran vorbeireden kann. Die Prüfung läuft als Git-Hook außerhalb des Agenten, ein fehlgeschlagener Build blockiert den Commit also unabhängig davon, was der Agent über seine eigene Arbeit denkt.",
+      "CHALLENGE_3": "Die Toolchains in einem Container ohne Root zum Laufen zu bringen. Builds, Browser und Sprach-Runtimes mussten alle in Volumes landen, die dem Entwickler-User gehören.",
+      "LEARNING_1": "Die Formulierung der Prompts war deutlich weniger wichtig, als ich dachte. Fast der ganze Unterschied kam vom Drumherum.",
+      "LEARNING_2": "Den Output des Agenten genauso zu reviewen und durch dieselben Gates zu schicken wie den Pull Request eines neuen Teammitglieds hat sich als die nützlichste Regel überhaupt herausgestellt."
     }
   },
   "IMPRINT": {
-    "TITLE" : "Impressum",
+    "TITLE": "Impressum",
     "PARAGRAPH": "Angaben gemäß § 5 DDG",
     "COUNTRY": "Deutschland",
     "CONTACT": "Kontakt"
@@ -377,11 +421,11 @@
     "ARRAY_SIZE": "Anzahl der Balken",
     "EXPLANATION": {
       "TITLE": "Algorithmen",
-      "BUBBLE_SORT_EXPLANATION":"vergleicht wiederholt benachbarte Elemente und tauscht sie, wenn sie in der falschen Reihenfolge stehen. Das größte Element \"blubbert\" dabei wie eine Luftblase ans Ende der Liste. Vorteil: Extrem einfach zu verstehen und zu implementieren; erkennt bereits sortierte Listen sehr schnell. Nachteil: Sehr ineffizient bei großen Listen (Laufzeit O(n²)). In der Praxis kaum genutzt.",
+      "BUBBLE_SORT_EXPLANATION": "vergleicht wiederholt benachbarte Elemente und tauscht sie, wenn sie in der falschen Reihenfolge stehen. Das größte Element \"blubbert\" dabei wie eine Luftblase ans Ende der Liste. Vorteil: Extrem einfach zu verstehen und zu implementieren; erkennt bereits sortierte Listen sehr schnell. Nachteil: Sehr ineffizient bei großen Listen (Laufzeit O(n²)). In der Praxis kaum genutzt.",
       "QUICK_SORT_EXPLANATION": "folgt dem \"Teile und Herrsche\"-Prinzip. Ein \"Pivot\"-Element wird gewählt, und das Array wird in zwei Hälften geteilt: Elemente kleiner als das Pivot und Elemente größer als das Pivot. Vorteil: Im Durchschnitt einer der schnellsten Sortieralgorithmen (O(n log n)); benötigt keinen zusätzlichen Speicher (In-Place). Nachteil: Im schlechtesten Fall (Worst Case) langsam (O(n²)), wenn das Pivot ungünstig gewählt wird. Ist nicht stabil (ändert Reihenfolge gleicher Elemente).",
       "HEAP_SORT_EXPLANATION": "organisiert die Daten zunächst in einer speziellen Baumstruktur (Binary Heap). Das größte Element (die Wurzel) wird entnommen und ans Ende sortiert, dann wird der Baum repariert. Vorteil: Garantiert eine schnelle Laufzeit von O(n log n), selbst im schlechtesten Fall. Benötigt fast keinen zusätzlichen Speicher. Nachteil: In der Praxis oft etwas langsamer als Quick Sort, da die Sprünge im Speicher (Heap-Struktur) den CPU-Cache schlechter nutzen.",
       "TIMSORT_EXPLANATION": "ist ein hybrider Sortieralgorithmus, der aus Merge Sort und Insertion Sort kombiniert ist. Er unterteilt das Array in kleine 'Runs' und sortiert jeden davon mit Insertion Sort, um sie anschließend schrittweise mit Merge Sort zusammenzuführen. Vorteil: Extrem effizient bei realen Daten, die oft teilweise sortiert sind – O(n log n) im schlechtesten und O(n) im besten Fall. Er ist der Standardalgorithmus in Python und Java. Nachteil: Komplexer zu implementieren als ein reiner Algorithmus und benötigt zusätzlichen Speicher für den Merge-Schritt.",
-      "COCKTAIL_SORT_EXPLANATION" : "(auch Shaker Sort) ist eine Erweiterung des Bubble Sort. Statt nur von links nach rechts zu gehen, wechselt er bei jedem Durchlauf die Richtung und schiebt abwechselnd das größte Element nach rechts und das kleinste nach links. Vorteil: Schneller als Bubble Sort, da kleine Elemente am Ende schneller nach vorne wandern (\"Schildkröten-Problem\" gelöst). Nachteil: Bleibt in der Laufzeitklasse O(n²), also für große Datenmengen ineffizient.",
+      "COCKTAIL_SORT_EXPLANATION": "(auch Shaker Sort) ist eine Erweiterung des Bubble Sort. Statt nur von links nach rechts zu gehen, wechselt er bei jedem Durchlauf die Richtung und schiebt abwechselnd das größte Element nach rechts und das kleinste nach links. Vorteil: Schneller als Bubble Sort, da kleine Elemente am Ende schneller nach vorne wandern (\"Schildkröten-Problem\" gelöst). Nachteil: Bleibt in der Laufzeitklasse O(n²), also für große Datenmengen ineffizient.",
       "DISCLAIMER": "Die Wahl des \"besten\" Sortieralgorithmus hängt stark von den Daten und den Rahmenbedingungen ab. In der Informatik betrachtet man oft drei Szenarien:",
       "DISCLAIMER_1": "Best Case: Die Daten sind schon fast sortiert (hier glänzt z.B. Bubble Sort).",
       "DISCLAIMER_2": "Average Case: Der statistische Normalfall.",
@@ -403,7 +447,7 @@
     "SPEED": "Zeit pro Generation",
     "EXPLANATION": {
       "TITLE": "Erklärung",
-      "EXPLANATION" : "Das Spiel läuft schrittweise ab. Zunächst wird eine Anfangsgeneration von lebenden Zellen auf dem Spielfeld definiert. Aus der vorliegenden Generation (dem Gesamtbild des Spielfeldes) wird die Folgegeneration ermittelt. Der Zustand jeder einzelnen Zelle in der Folgegeneration ergibt sich dabei nach einfachen Regeln aus ihrem aktuellen Zustand sowie den aktuellen Zuständen ihrer acht Nachbarzellen (Moore-Nachbarschaft).",
+      "EXPLANATION": "Das Spiel läuft schrittweise ab. Zunächst wird eine Anfangsgeneration von lebenden Zellen auf dem Spielfeld definiert. Aus der vorliegenden Generation (dem Gesamtbild des Spielfeldes) wird die Folgegeneration ermittelt. Der Zustand jeder einzelnen Zelle in der Folgegeneration ergibt sich dabei nach einfachen Regeln aus ihrem aktuellen Zustand sowie den aktuellen Zuständen ihrer acht Nachbarzellen (Moore-Nachbarschaft).",
       "DISCLAIMER": "Nach Conways ursprünglicher Regel lebt eine Zelle in der nächsten Runde, wenn zuvor in ihrer 3x3-Umgebung insgesamt genau drei Zellen leben, wobei sie selbst nur bei Bedarf mitgezählt wird, das heißt:",
       "DISCLAIMER_1": "Eine lebende Zelle lebt auch in der Folgegeneration, wenn sie entweder zwei oder drei lebende Nachbarn hat.",
       "DISCLAIMER_2": "Eine tote Zelle „wird geboren“ (lebt in der Folgegeneration), wenn sie genau drei lebende Nachbarn hat.",
@@ -576,7 +620,8 @@
       "CONFLICTS": "Achtung: Benachbarte Regionen haben die gleiche Farbe!",
       "INVALID": "Karte ist vollständig, enthält aber Fehler."
     },
-    "EXPLANATION": {      "TITLE": "Der Vier-Farben-Satz",
+    "EXPLANATION": {
+      "TITLE": "Der Vier-Farben-Satz",
       "EXPLANATION": "Der Vier-Farben-Satz besagt, dass jede Landkarte in der Ebene mit maximal vier Farben so eingefärbt werden kann, dass keine zwei aneinandergrenzenden Gebiete dieselbe Farbe besitzen.",
       "DISCLAIMER": "Dieser Algorithmus verwendet Backtracking, um eine gültige Färbung für die generierten Regionen zu finden.",
       "DISCLAIMER_1": "Kartengenerierung: Regionen werden mittels eines zufälligen Seed-Wachstumsalgorithmus (Voronoi-ähnlich) auf einem Gitter erzeugt.",
@@ -588,5 +633,54 @@
     "ALERT": {
       "NO_SOLUTION": "Keine Lösung gefunden (das sollte bei einer planaren Karte nicht passieren!)."
     }
+  },
+  "STOPWATCH": {
+    "TITLE": "Stoppuhr",
+    "START": "Start",
+    "PAUSE": "Pause",
+    "STOP": "Stopp",
+    "RESET": "Zurücksetzen",
+    "INTERVAL_ENABLED": "Signalton bei Intervall",
+    "FIRST_INTERVAL": "Erstes Intervall",
+    "INTERVAL_MINUTES": "Minuten",
+    "INTERVAL_SECONDS": "Sekunden",
+    "SECOND_INTERVAL_ENABLED": "Zweites, abwechselndes Intervall hinzufügen",
+    "INTERVAL_HINT": "Spielt einen kurzen Ton ab, sobald ein Intervall abgelaufen ist. Mit aktiviertem zweiten Intervall wechseln sich beide ab, das zweite startet direkt nach dem ersten.",
+    "INTERVAL_SCHEDULE": "Nächste Signaltöne bei:"
+  },
+  "NOT_FOUND": {
+    "TITLE": "Seite nicht gefunden",
+    "MESSAGE": "Die gesuchte Seite existiert nicht oder wurde verschoben.",
+    "BACK_HOME": "Zurück zum Start"
+  },
+  "SEO": {
+    "DEFAULT": {
+      "TITLE": "Andreas Dahm – Playground",
+      "DESCRIPTION": "Portfolio und interaktiver Playground von Andreas Dahm, Senior Software Developer: Algorithmus-Visualisierungen, GPU-Simulationen und persönliche Projekte."
+    },
+    "ABOUT": {
+      "TITLE": "Über mich – Andreas Dahm",
+      "DESCRIPTION": "Andreas Dahm, Senior Softwareentwickler und Architekt aus München: Erfahrung, Fähigkeiten und Projekte in Full-Stack-Entwicklung, 3D-Simulation, Algorithmen und KI-gestütztem Engineering."
+    },
+    "PROJECTS": {
+      "TITLE": "Projekte – Andreas Dahm",
+      "DESCRIPTION": "Ausgewählte Projekte von Andreas Dahm: ein Steam-Release, selbst gehostete Infrastruktur, Game Jams und eine wissenschaftliche Diplomarbeit."
+    },
+    "ALGORITHMS": {
+      "TITLE": "Algorithmen – Andreas Dahm",
+      "DESCRIPTION": "Interaktive Visualisierungen von Algorithmen und Simulationen: Pathfinding, Sortierung, Fraktale, Stoff- und Pendelphysik – direkt im Browser."
+    },
+    "IMPRINT": {
+      "TITLE": "Impressum – Andreas Dahm",
+      "DESCRIPTION": "Rechtliche Informationen und Kontaktdaten zur Website Andreas Dahm Playground."
+    },
+    "STOPWATCH": {
+      "TITLE": "Stoppuhr – Andreas Dahm",
+      "DESCRIPTION": "Eine einfache Online-Stoppuhr mit konfigurierbaren Intervall-Signaltönen."
+    },
+    "NOT_FOUND": {
+      "TITLE": "Seite nicht gefunden – Andreas Dahm",
+      "DESCRIPTION": "Die angeforderte Seite konnte nicht gefunden werden."
+    }
   }
 }

src/assets/i18n/en.json

@@ -1,36 +1,51 @@
 {
   "APP": {
     "TITLE": "Playground",
-    "COPYRIGHT": "Images and code protected by copyright, no use without permission!"
+    "COPYRIGHT": "Images and code protected by copyright, no use without permission!",
+    "AI_NOTICE": "Built with an AI-assisted engineering workflow.",
+    "AI_NOTICE_LINK": "How I build with AI"
   },
   "TOPBAR": {
     "ABOUT": "About me",
     "IMPRINT": "Impressum",
     "PROJECTS": "Projects",
     "ALGORITHMS": "Algorithms",
+    "STOPWATCH": "Stopwatch",
     "SETTINGS": "Settings",
     "LANGUAGE": "Language",
     "APPEARANCE": "Appearance"
   },
-  "THEME": { "LIGHT": "Light", "DARK": "Dark" },
+  "THEME": {
-  "LANG": { "LABEL": "Language", "EN": "English", "DE": "Deutsch" },
+    "LIGHT": "Light",
+    "DARK": "Dark"
+  },
+  "LANG": {
+    "LABEL": "Language",
+    "EN": "English",
+    "DE": "Deutsch"
+  },
   "ABOUT": {
-    "ALT": { "PROFILE": "Profile photo of Andreas Dahm" },
+    "ALT": {
+      "PROFILE": "Profile photo of Andreas Dahm"
+    },
     "HELLO": "Hello, I’m Andreas.",
-    "LEAD": "I first discovered my interest in software development during my training as an application developer. After completing my degree in Applied Computer Science at FH Bingen, I have been working continuously as a software developer since 2010. During this time, I have gained experience in various areas, including 3D simulation and modern web applications. I also enjoy working on personal software projects, particularly in game development and algorithmic topics. Thank you for stopping by!",
+    "LEAD": "I have been working as a software developer since 2010. Most of that time went into two fairly different corners. One is real-time 3D simulation: cloth physics, collision detection, GPU shaders. The other is cloud architecture for larger enterprise platforms. I led a small backend team for a few years, planned the move of a big legacy monolith towards microservices, and released a game on Steam together with my brother. Lately a lot of my time goes into tooling around AI-assisted development, mostly into making the output reviewable instead of just fast. In my free time I build games and mess around with algorithms. Most of that ends up somewhere on this site.",
     "ROLE": "Senior Software Developer / Full-Stack Developer / Software Architect",
     "LOCATION": "Munich · Remote",
-    "DOWNLOAD_CV": "Download CV",
     "VIEW_PROJECTS": "View projects",
     "CONTACT_ME": "Contact me",
     "SECTION": {
       "SKILLS": "Skills & Stack",
-      "BACKEND_ARCH": "Backend & Architecture",
+      "LANGUAGES": "Languages & Frameworks",
-      "INFRA_CLOUD": "Infrastructure & Cloud",
+      "ARCH_CLOUD": "Architecture & Cloud",
       "SIM_ALGO": "Simulation & Algorithms",
+      "AI_ENG": "AI-Assisted Engineering",
       "EXPERIENCE": "Experience",
       "PROJECTS": "Projects",
-      "EDUCATION": "Education"
+      "EDUCATION": "Education",
+      "SHOW_EARLIER_XP": "Show earlier positions",
+      "SHOW_EARLIER_EDU": "Show earlier education",
+      "SHOW_LESS": "Show less"
     },
     "SKILLS": {
       "JAVA": "Java",
@@ -49,7 +64,12 @@
       "ENG_SIM": "3D Simulation",
       "ENG_GPU": "WebGPU / OpenGL / GLSL",
       "ENG_PERF": "Performance Optimization",
-      "ENG_3D": "3D-Scanner Tech"
+      "ENG_3D": "3D-Scanner Tech",
+      "AI_AGENTS": "Claude Code / Agent SDK",
+      "AI_MCP": "MCP servers",
+      "AI_CONTEXT": "Context & prompt engineering",
+      "AI_HARNESS": "Agent harness design",
+      "AI_GATES": "Automated review gates"
     },
     "TOOLS": {
       "GIT": "Git",
@@ -145,7 +165,7 @@
       },
       "COMPANY1": {
         "COMPANY": "TH Bingen (University of Applied Sciences)",
-        "ROLE": "Research Asssitent",
+        "ROLE": "Research Assistant",
         "TIME": "Oct. 2007 – Apr. 2008",
         "HIGHLIGHTS": {
           "P1": "Evaluation of various Web 2.0 technologies.",
@@ -159,12 +179,22 @@
         "TIME": "Jul. 2002 – Jun. 2005",
         "HIGHLIGHTS": {
           "P1": "Development in PERL, PHP and ASP.",
-          "P2": "Portierung, Wartung und Reengineering von bestender Software.",
+          "P2": "Porting, maintenance and reengineering of existing software.",
           "P3": "Regular performance of system tests and quality controls, as well as their documentation."
         }
       }
     },
     "PROJECT": {
+      "CLAUDE_BOX": {
+        "TITLE": "Claude-in-a-Box",
+        "DESCRIPTION": "A development setup in a container where an AI coding agent works under a fixed set of rules rather than whatever I happen to type that day. It picks up the rules for whatever stack it finds in the repository, and a git hook stops the commit if the build or the tests are red.",
+        "LINK_INTERNAL": "Project details",
+        "HIGHLIGHTS": {
+          "P1": "The agent loads the rules for the stack it finds in the repo, so a Java service and a frontend get different ones.",
+          "P2": "A commit hook runs the build and the tests and blocks the commit when they fail.",
+          "P3": "MCP servers for code search and read-only Jira access, plus separate review agents that go over the diff."
+        }
+      },
       "P2": {
         "TITLE": "Playground",
         "DESCRIPTION": "This project is, as the name suggests, a personal playground that will grow over time. It showcases various private projects I’m working on and documents their progress, key ideas, and milestones.",
@@ -331,10 +361,24 @@
       "CHALLENGE_2": "Mathematical stabilization of integration methods under high force impacts.",
       "LEARNING_1": "Transferring theoretical research into productive, high-performance code.",
       "LEARNING_2": "Precise working and documentation according to scientific standards."
+    },
+    "CLAUDE_BOX": {
+      "TITLE": "Claude-in-a-Box",
+      "SHORT_DESCRIPTION": "A container setup for working with an AI coding agent under a fixed set of rules.",
+      "INTRODUCTION": "An AI coding agent will produce code all day without complaining. The trouble is that what comes out usually looks reasonable even when it is wrong, so all the cost lands in review. I built a Docker setup that puts the agent under the same constraints as anyone else working on the repo. It reads the architecture rules of whatever project it is in, and the build has to pass before a commit goes through. The hook that enforces that last part is the piece I keep coming back to, because it is the one thing the agent has no way around.",
+      "BULLET_1": "Container with fixed toolchains: JDKs and Maven through SDKMAN, Node, and a home volume that survives a rebuild.",
+      "BULLET_2": "Rules are loaded by detection. A repo with a pom.xml gets the Java and Spring rules, one with a package.json gets the TypeScript rules, and repos with their own architecture notes get those on top.",
+      "BULLET_3": "A commit hook works out the stack, runs the matching build and tests, and refuses the commit if they fail.",
+      "BULLET_4": "MCP servers for code graph queries and read-only Jira lookups, plus review agents that check a finished diff before it counts as done.",
+      "CHALLENGE_1": "Keeping the rules short enough to stay useful. Long general guidelines just get ignored, so they are split into per-stack and per-repo files that only load when they apply.",
+      "CHALLENGE_2": "Making the quality gate something the agent cannot talk its way past. The check runs as a git hook outside the agent, so a failing build blocks the commit no matter what the agent believes about its own work.",
+      "CHALLENGE_3": "Getting the toolchains installed in a container that has no root. Builds, browsers and language runtimes all had to go into volumes owned by the development user.",
+      "LEARNING_1": "Prompt wording mattered far less than I expected. Almost all of the difference came from the scaffolding.",
+      "LEARNING_2": "Reviewing and gating the agent's output the same way you would a new colleague's pull request turned out to be the most useful rule of the lot."
     }
   },
   "IMPRINT": {
-    "TITLE" : "Imprint",
+    "TITLE": "Imprint",
     "PARAGRAPH": "Information pursuant to Section 5 DDG",
     "COUNTRY": "Germany",
     "CONTACT": "Contact"
@@ -378,6 +422,7 @@
     "EXPLANATION": {
       "TITLE": "Algorithms",
       "BUBBLE_SORT_EXPLANATION": "repeatedly compares adjacent elements and swaps them if they are in the wrong order. The largest element \"bubbles\" to the end of the list like an air bubble. Advantage: Extremely simple to understand and implement; detects already sorted lists very quickly. Disadvantage: Very inefficient for large lists (runtime O(n²)). Rarely used in practice.",
+      "COCKTAIL_SORT_EXPLANATION": "(also Shaker Sort) is an extension of Bubble Sort. Instead of only moving from left to right, it reverses direction on each pass, alternately pushing the largest element to the right and the smallest to the left. Advantage: Faster than Bubble Sort, because small elements at the end move to the front more quickly (solving the \"turtle problem\"). Disadvantage: Stays in the O(n²) runtime class, so it remains inefficient for large data sets.",
       "QUICK_SORT_EXPLANATION": "follows the \"divide and conquer\" principle. A \"pivot\" element is selected, and the array is divided into two halves: elements smaller than the pivot and elements larger than the pivot. Advantage: On average one of the fastest sorting algorithms (O(n log n)); requires no additional memory (in-place). Disadvantage: Slow in the worst case (O(n²)) if the pivot is chosen poorly. Is not stable (changes order of equal elements).",
       "HEAP_SORT_EXPLANATION": "organizes the data initially into a special tree structure (Binary Heap). The largest element (the root) is extracted and sorted to the end, then the tree is repaired. Advantage: Guarantees a fast runtime of O(n log n), even in the worst case. Requires almost no additional memory. Disadvantage: Often slightly slower than Quick Sort in practice because the jumps in memory (heap structure) utilize the CPU cache less effectively.",
       "TIMSORT_EXPLANATION": "is a hybrid sorting algorithm derived from Merge Sort and Insertion Sort. It divides the array into small 'runs' and sorts each using Insertion Sort, then merges them step by step using Merge Sort. Advantage: Extremely efficient on real-world data that is often partially sorted — O(n log n) in the worst case and O(n) in the best case. It is the standard sorting algorithm in Python and Java. Disadvantage: More complex to implement than a pure algorithm and requires additional memory for the merge step.",
@@ -575,7 +620,8 @@
       "CONFLICTS": "Warning: Adjacent regions have the same color!",
       "INVALID": "Map is fully colored, but contains conflicts."
     },
-    "EXPLANATION": {      "TITLE": "Four Color Theorem",
+    "EXPLANATION": {
+      "TITLE": "Four Color Theorem",
       "EXPLANATION": "The four color theorem states that any map in a plane can be colored using at most four colors in such a way that regions sharing a common boundary (other than a single point) do not share the same color.",
       "DISCLAIMER": "This algorithm uses backtracking to find a valid coloring for the generated regions.",
       "DISCLAIMER_1": "Map Generation: Regions are generated using a random seed growth algorithm (Voronoi-like) on a grid.",
@@ -587,5 +633,54 @@
     "ALERT": {
       "NO_SOLUTION": "No solution found (this should not happen for a planar map!)."
     }
+  },
+  "STOPWATCH": {
+    "TITLE": "Stopwatch",
+    "START": "Start",
+    "PAUSE": "Pause",
+    "STOP": "Stop",
+    "RESET": "Reset",
+    "INTERVAL_ENABLED": "Beep at interval",
+    "FIRST_INTERVAL": "First interval",
+    "INTERVAL_MINUTES": "Minutes",
+    "INTERVAL_SECONDS": "Seconds",
+    "SECOND_INTERVAL_ENABLED": "Add a second, alternating interval",
+    "INTERVAL_HINT": "Plays a short tone every time an interval elapses. With a second interval enabled both alternate, so the second one starts right after the first.",
+    "INTERVAL_SCHEDULE": "Next beeps at:"
+  },
+  "NOT_FOUND": {
+    "TITLE": "Page not found",
+    "MESSAGE": "The page you are looking for does not exist or has been moved.",
+    "BACK_HOME": "Back to start"
+  },
+  "SEO": {
+    "DEFAULT": {
+      "TITLE": "Andreas Dahm – Playground",
+      "DESCRIPTION": "Portfolio and interactive playground of Andreas Dahm, senior software developer: algorithm visualizations, GPU simulations and personal projects."
+    },
+    "ABOUT": {
+      "TITLE": "About me – Andreas Dahm",
+      "DESCRIPTION": "Andreas Dahm, senior software developer and architect from Munich: experience, skills and projects in full-stack development, 3D simulation, algorithms and AI-assisted engineering."
+    },
+    "PROJECTS": {
+      "TITLE": "Projects – Andreas Dahm",
+      "DESCRIPTION": "Selected projects by Andreas Dahm: a Steam game release, self-hosted infrastructure, game jams and a scientific diploma thesis."
+    },
+    "ALGORITHMS": {
+      "TITLE": "Algorithms – Andreas Dahm",
+      "DESCRIPTION": "Interactive visualizations of algorithms and simulations: pathfinding, sorting, fractals, cloth and pendulum physics, running in the browser."
+    },
+    "IMPRINT": {
+      "TITLE": "Imprint – Andreas Dahm",
+      "DESCRIPTION": "Legal information and contact details for the Andreas Dahm Playground website."
+    },
+    "STOPWATCH": {
+      "TITLE": "Stopwatch – Andreas Dahm",
+      "DESCRIPTION": "A simple online stopwatch with configurable interval beeps."
+    },
+    "NOT_FOUND": {
+      "TITLE": "Page not found – Andreas Dahm",
+      "DESCRIPTION": "The requested page could not be found."
+    }
   }
 }

src/assets/icons/app-icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="Andreas Dahm">
+  <rect width="512" height="512" fill="#313131"/>
+  <text x="256" y="256" fill="#ffffff" font-family="'Roboto','Segoe UI',Arial,sans-serif"
+        font-size="240" font-weight="500" text-anchor="middle" dominant-baseline="central"
+        letter-spacing="-8">AD</text>
+</svg>

src/assets/projects/claude-in-a-box/1.svg

@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630" role="img" aria-labelledby="title desc">
+  <title id="title">Claude-in-a-Box</title>
+  <desc id="desc">A containerised agent: repository detection routes stack rules into the box, and a commit gate blocks anything with a failing build.</desc>
+
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e2530"/>
+      <stop offset="100%" stop-color="#15181d"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#26c6da"/>
+      <stop offset="100%" stop-color="#ffa726"/>
+    </linearGradient>
+    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#4a5563"/>
+    </marker>
+    <marker id="arrowCyan" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#26c6da"/>
+    </marker>
+  </defs>
+
+  <style>
+    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
+    .sans { font-family: Roboto, Arial, sans-serif; }
+    .lbl  { fill: #8b97a6; font-size: 17px; letter-spacing: .04em; }
+    .chip { fill: #cdd6e0; font-size: 19px; }
+    .cap  { fill: #6c7887; font-size: 15px; letter-spacing: .18em; }
+  </style>
+
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <rect x="0" y="0" width="1200" height="4" fill="url(#accent)"/>
+
+  <text x="64" y="72" class="mono" fill="#26c6da" font-size="26" font-weight="600">claude-in-a-box</text>
+  <text x="64" y="102" class="sans lbl">the harness, not the prompt</text>
+
+  <!-- ── Left: repository detection ─────────────────────────── -->
+  <text x="64" y="176" class="sans cap">detect</text>
+
+  <g>
+    <rect x="64" y="196" width="228" height="62" rx="10" fill="#212a35" stroke="#2f3a47"/>
+    <text x="86" y="223" class="mono chip">pom.xml</text>
+    <text x="86" y="245" class="sans lbl" font-size="15">→ java / spring rules</text>
+  </g>
+  <g>
+    <rect x="64" y="278" width="228" height="62" rx="10" fill="#212a35" stroke="#2f3a47"/>
+    <text x="86" y="305" class="mono chip">package.json</text>
+    <text x="86" y="327" class="sans lbl" font-size="15">→ typescript rules</text>
+  </g>
+  <g>
+    <rect x="64" y="360" width="228" height="62" rx="10" fill="#212a35" stroke="#2f3a47"/>
+    <text x="86" y="387" class="mono chip">pyproject.toml</text>
+    <text x="86" y="409" class="sans lbl" font-size="15">→ python rules</text>
+  </g>
+  <g>
+    <rect x="64" y="442" width="228" height="62" rx="10" fill="#212a35" stroke="#2f3a47" stroke-dasharray="4 4"/>
+    <text x="86" y="469" class="mono chip">&lt;repo&gt;.md</text>
+    <text x="86" y="491" class="sans lbl" font-size="15">→ architecture profile</text>
+  </g>
+
+  <path d="M 300 227 H 360" stroke="#4a5563" stroke-width="2" marker-end="url(#arrow)"/>
+  <path d="M 300 309 H 360" stroke="#4a5563" stroke-width="2" marker-end="url(#arrow)"/>
+  <path d="M 300 391 H 360" stroke="#4a5563" stroke-width="2" marker-end="url(#arrow)"/>
+  <path d="M 300 473 H 360" stroke="#4a5563" stroke-width="2" marker-end="url(#arrow)"/>
+
+  <!-- ── Centre: the container ──────────────────────────────── -->
+  <rect x="376" y="150" width="330" height="380" rx="18" fill="#1a222c" stroke="#26c6da" stroke-width="2"/>
+  <text x="400" y="184" class="sans cap" fill="#26c6da">container</text>
+
+  <rect x="404" y="212" width="274" height="96" rx="12" fill="#243040" stroke="#33475c"/>
+  <circle cx="440" cy="248" r="14" fill="none" stroke="#26c6da" stroke-width="2"/>
+  <circle cx="440" cy="248" r="5" fill="#26c6da"/>
+  <text x="470" y="246" class="sans" fill="#e3e9f0" font-size="21" font-weight="600">agent</text>
+  <text x="470" y="270" class="sans lbl" font-size="15">scoped context only</text>
+  <text x="424" y="296" class="mono" fill="#6c7887" font-size="14">/workspace · no root</text>
+
+  <text x="404" y="348" class="sans cap">pinned toolchain</text>
+  <g class="mono" font-size="16" fill="#9aa7b5">
+    <text x="404" y="380">sdkman · jdk · maven</text>
+    <text x="404" y="408">node · npm</text>
+    <text x="404" y="436">mcp: codegraph, jira (ro)</text>
+  </g>
+  <rect x="404" y="462" width="274" height="44" rx="10" fill="#2a2118" stroke="#5c4326"/>
+  <text x="424" y="490" class="mono" fill="#ffa726" font-size="16">review subagents</text>
+
+  <path d="M 714 340 H 776" stroke="#26c6da" stroke-width="2" marker-end="url(#arrowCyan)"/>
+
+  <!-- ── Right: the gate ────────────────────────────────────── -->
+  <text x="792" y="176" class="sans cap">gate</text>
+
+  <rect x="792" y="196" width="344" height="288" rx="14" fill="#1c242e" stroke="#2f3a47"/>
+
+  <g class="mono" font-size="17">
+    <circle cx="822" cy="243" r="7" fill="#4caf50"/>
+    <text x="844" y="249" fill="#cdd6e0">lint</text>
+    <circle cx="822" cy="291" r="7" fill="#4caf50"/>
+    <text x="844" y="297" fill="#cdd6e0">build</text>
+    <circle cx="822" cy="339" r="7" fill="#ef5350"/>
+    <text x="844" y="345" fill="#cdd6e0">tests</text>
+  </g>
+
+  <rect x="812" y="378" width="304" height="76" rx="10" fill="#2b1b1c" stroke="#7d3a3c"/>
+  <text x="836" y="408" class="mono" fill="#ef8b8d" font-size="17">git commit — blocked</text>
+  <text x="836" y="434" class="sans lbl" font-size="15">hook runs outside the agent</text>
+
+  <text x="792" y="524" class="sans lbl" font-size="16">a failing build cannot be argued with</text>
+
+  <line x1="64" y1="566" x2="1136" y2="566" stroke="#2a333e"/>
+  <text x="64" y="598" class="mono" fill="#5b6673" font-size="15">docker · claude code · mcp · hooks</text>
+</svg>

src/index.html

@@ -2,13 +2,43 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Andreas Dahm - Playground</title>
+  <title>Andreas Dahm – Playground</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <meta name="description" content="Portfolio and interactive playground of Andreas Dahm, senior software developer: algorithm visualizations, GPU simulations and personal projects.">
+  <meta name="author" content="Andreas Dahm">
+  <meta name="robots" content="index, follow">
+  <meta name="theme-color" content="#313131">
+  <link rel="canonical" href="https://andreas-dahm.eu/">
+  <link rel="manifest" href="manifest.webmanifest">
+  <link rel="apple-touch-icon" href="assets/icons/app-icon.svg">
+
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Andreas Dahm – Playground">
+  <meta property="og:title" content="Andreas Dahm – Playground">
+  <meta property="og:description" content="Portfolio and interactive playground of Andreas Dahm, senior software developer: algorithm visualizations, GPU simulations and personal projects.">
+  <meta property="og:url" content="https://andreas-dahm.eu/">
+  <meta property="og:image" content="https://andreas-dahm.eu/assets/me.webp">
+
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Andreas Dahm – Playground">
+  <meta name="twitter:description" content="Portfolio and interactive playground of Andreas Dahm, senior software developer: algorithm visualizations, GPU simulations and personal projects.">
+  <meta name="twitter:image" content="https://andreas-dahm.eu/assets/me.webp">
+
   <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
+
+  <!--
+    The LCP image lives in a lazily loaded route chunk, so the browser cannot
+    discover it until Angular has booted. Preloading it here is what makes it
+    fetch in parallel with the bundle instead of after it.
+  -->
+  <link rel="preload" as="image" href="assets/me.webp" fetchpriority="high">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap" rel="stylesheet">
 </head>
 <body>
   <app-root class="flex flex-col min-h-screen"></app-root>

src/manifest.webmanifest

@@ -0,0 +1,25 @@
+{
+  "name": "Andreas Dahm – Playground",
+  "short_name": "AD Playground",
+  "description": "Portfolio and interactive playground of Andreas Dahm: algorithm visualizations, GPU simulations and personal projects.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#313131",
+  "theme_color": "#313131",
+  "lang": "en",
+  "icons": [
+    {
+      "src": "assets/icons/app-icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "favicon.ico",
+      "sizes": "16x16 29x32",
+      "type": "image/x-icon"
+    }
+  ]
+}

src/styles.scss

@@ -2,7 +2,7 @@
 
 // ---- Themes ----
 $light-theme: mat.define-theme((color: (theme-type: light, primary: mat.$cyan-palette, tertiary: mat.$orange-palette ),
-      typography: (brand-family: 'Inter, Roboto, Arial, sans-serif', bold-weight: 600),
+      typography: (brand-family: 'Roboto, Arial, sans-serif', bold-weight: 600),
       density: (scale: 0),
     ));
 
@@ -31,8 +31,13 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
   --card-border-inset: rgba(255, 255, 255, 0.35);
   --card-border-inset-dark: rgba(0, 0, 0, 0.35);
 
-  --link-color: #38a7ff;
+  /*
-  --link-color-hover: #66bfff;
+    Chosen to clear WCAG AA *after* compositing: several link containers carry
+    opacity-85/opacity-80, which blends the text toward the surface. Worst case
+    (footer, 80% over #f1f4f3) is 4.73:1; a plain link on a card is 8.03:1.
+  */
+  --link-color: #0f4f8a;
+  --link-color-hover: #0a3a66;
 }
 
 .dark {

src/tailwind.css

@@ -1,6 +1,77 @@
-@tailwind base;
+/*
-@tailwind components;
+  Tailwind v4 dropped `corePlugins`, so preflight can no longer be switched off
-@tailwind utilities;
+  from the config. Importing the layers individually and leaving out
+  `preflight.css` keeps Angular Material's own reset in charge.
+*/
+@layer theme, base, components, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+/*
+  The theme is driven by the CSS custom properties that styles.scss sets per theme.
+  `inline` is required: the theme service toggles `.dark` on <body>, while a plain
+  `@theme` would resolve these references once at `:root` (<html>) and freeze the
+  light values. Inlining makes the utilities emit `var(--app-fg)` directly, so they
+  resolve on the element and follow the `.dark` override again.
+*/
+@theme inline {
+  --color-app-bg: var(--app-bg);
+  --color-app-fg: var(--app-fg);
+  --color-card-bg: var(--card-bg);
+  --color-link: var(--link-color);
+  --color-link-hover: var(--link-color-hover);
+  --color-logo-bg: var(--app-logo-bg);
+
+  --container-app: var(--app-maxWidth);
+  --radius-card: var(--card-radius);
+
+  --font-sans: Roboto, Arial, sans-serif;
+
+  --spacing-fluid-sm: clamp(0.5rem, 2vw, 1rem);
+  --spacing-fluid-md: clamp(1rem, 3vw, 1.5rem);
+  --spacing-fluid-lg: clamp(1rem, 4vw, 2rem);
+}
+
+/* The theme service toggles a `dark` class instead of relying on the media query. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@custom-variant mobile (@media (width <= 760px));
+@custom-variant sm-dialog (@media (width <= 600px));
+@custom-variant tablet (@media (width <= 900px));
+
+@utility legend-swatch {
+  @apply inline-block w-[15px] h-[15px] border border-gray-300 align-middle mr-[5px];
+}
+
+/*
+  Preflight is off, so a bare <button> keeps the UA font (13.33px Arial) instead of
+  the page font. Anything that should read as a link but has to stay a button for
+  accessibility uses this.
+*/
+@utility link-button {
+  font: inherit;
+  @apply text-link font-medium bg-transparent p-0 cursor-pointer hover:text-link-hover hover:underline;
+}
+
+@utility card-gradient-bar {
+  @apply relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      var(--mat-sys-primary),
+      var(--mat-sys-tertiary)
+    );
+    border-radius: var(--card-radius) var(--card-radius) 0 0;
+  }
+}
 
 @layer base {
   *,
@@ -17,7 +88,7 @@
 
   body {
     margin: 0;
-    font-family: Inter, Roboto, Arial, sans-serif;
+    font-family: Roboto, Arial, sans-serif;
     background-color: var(--app-bg);
     color: var(--app-fg);
     transition: background-color 220ms ease, color 220ms ease;
@@ -27,10 +98,6 @@
     @apply text-link no-underline font-medium hover:text-link-hover hover:underline;
   }
 
-  .material-symbols-outlined {
-    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
-  }
-
   .dark body {
     background: radial-gradient(ellipse at 50% 0%, #1e2530 0%, #1a1a1a 65%);
   }
@@ -44,24 +111,3 @@
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
   }
 }
-
-@layer components {
-  .legend-swatch {
-    @apply inline-block w-[15px] h-[15px] border border-gray-300 align-middle mr-[5px];
-  }
-
-  .card-gradient-bar {
-    @apply relative;
-  }
-
-  .card-gradient-bar::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(90deg, var(--mat-sys-primary), var(--mat-sys-tertiary));
-    border-radius: var(--card-radius) var(--card-radius) 0 0;
-  }
-}

tailwind.config.js

@@ -1,37 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{html,ts}'],
-  darkMode: 'class',
-  corePlugins: { preflight: false },
-  theme: {
-    extend: {
-      colors: {
-        'app-bg': 'var(--app-bg)',
-        'app-fg': 'var(--app-fg)',
-        'card-bg': 'var(--card-bg)',
-        'link': 'var(--link-color)',
-        'link-hover': 'var(--link-color-hover)',
-        'logo-bg': 'var(--app-logo-bg)',
-      },
-      maxWidth: {
-        'app': 'var(--app-maxWidth)',
-      },
-      borderRadius: {
-        'card': 'var(--card-radius)',
-      },
-      fontFamily: {
-        'sans': ['Inter', 'Roboto', 'Arial', 'sans-serif'],
-      },
-      spacing: {
-        'fluid-sm': 'clamp(0.5rem, 2vw, 1rem)',
-        'fluid-md': 'clamp(1rem, 3vw, 1.5rem)',
-        'fluid-lg': 'clamp(1rem, 4vw, 2rem)',
-      },
-      screens: {
-        'mobile': { 'max': '760px' },
-        'sm-dialog': { 'max': '600px' },
-        'tablet': { 'max': '900px' },
-      },
-    },
-  },
-};

tsconfig.app.json

@@ -5,7 +5,9 @@
   "compilerOptions": {
     "resolveJsonModule": true,
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "@webgpu/types"
+    ]
   },
   "include": [
     "src/**/*.ts"

tsconfig.spec.json

@@ -5,7 +5,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "@webgpu/types"
     ]
   },
   "include": [