docs(readme): document lang parameter and drop OpenPGP feature

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.gitea/workflows/CI.yml

@@ -59,12 +59,5 @@ jobs:
         with:
           node-version: '24.15.0'
           cache: npm
-      - uses: browser-actions/setup-chrome@v2
-        id: setup-chrome
-        with:
-          install-dependencies: true
       - run: npm ci
-      - name: Run tests
+      - run: npm run test
-        run: npm run test -- --browsers=ChromeHeadlessNoSandbox
-        env:
-          CHROME_BIN: ${{ steps.setup-chrome.outputs.chrome-path }}

AGENTS.md

@@ -2,8 +2,8 @@
 
 ## Project Context
 
-This is an Angular portfolio application using Angular 21, TypeScript, SCSS,
+This is an Angular portfolio application using Angular 22, TypeScript, SCSS,
-Karma/Jasmine tests, and static hosting for production output. Production
+Vitest tests, and static hosting for production output. Production
 application code lives in `src/app`; the client entry point lives in
 `src/main.ts`.
 
@@ -32,7 +32,7 @@ maintain generated or copied output in `public/assets/optimized` or `dist`.
 - `npm run build`: generates assets, builds the production app, and copies
   static root files. Run this only when explicitly requested.
 - `npm start`: serves the built static app through `scripts/static-server.mjs`.
-- `npm test`: generates assets and starts Angular tests with Karma/Jasmine.
+- `npm test`: generates assets and starts Angular tests with Vitest.
 - `npm run check`: runs linting, format checks, version checks, and source text
   checks. Always use this as the final validation.
 - `npm run fix`: places version data, runs ESLint fixes, fixes source text, and

README.md

@@ -9,13 +9,13 @@ Visit the live website at [fraujulian.xyz](https://fraujulian.xyz/).
 - Angular 22
 - TypeScript
 - SCSS
-- Karma and Jasmine for tests
+- Vitest for tests
 
 ## Features
 
-- English and German language options
+- English and German language options (`?lang=de` selects German)
 - About, work, and project portfolio
-- Contact links and downloadable OpenPGP public key
+- Contact links
 - Imprint and privacy information
 - Interactive portrait highlights
 
@@ -59,7 +59,7 @@ built site at `http://localhost:3000`.
 npm run test
 ```
 
-This generates assets and runs the Karma/Jasmine tests in ChromeHeadless.
+This generates assets and runs the Vitest tests in jsdom.
 
 ## Docs
 

angular.json

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": {
               "base": "dist",
@@ -45,10 +45,6 @@
                 "glob": "**/*",
                 "input": "src/assets/optimized",
                 "output": "assets/optimized"
-              },
-              {
-                "glob": "**/*",
-                "input": "public"
               }
             ],
             "styles": ["src/styles.scss"],
@@ -108,7 +104,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "port": 4200
           },
@@ -123,30 +119,14 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "watch": false,
+            "buildTarget": "::development",
-            "browsers": "ChromeHeadless",
-            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
+            "watch": false
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "src/assets/optimized",
-                "output": "assets/optimized"
-              },
-              {
-                "glob": "**/*",
-                "input": "public",
-                "output": "public"
-              }
-            ],
-            "styles": ["src/styles.scss"],
-            "scripts": []
           }
         }
       }

package.json

@@ -26,8 +26,7 @@
     "------ BUILD": "",
     "generate:static-files": "node scripts/generate-static-files.cjs",
     "generate:optimized-assets": "node scripts/generate-optimized-assets.cjs",
-    "generate:openpgp-assets": "node scripts/generate-openpgp-assets.cjs",
+    "generate:assets": "npm run generate:static-files && npm run generate:optimized-assets",
-    "generate:assets": "npm run generate:static-files && npm run generate:optimized-assets && npm run generate:openpgp-assets",
     "build": "npm run generate:assets && ng build --configuration production && node scripts/copy-static-root-files.cjs",
     "------ STARTUP": "",
     "test": "npm run generate:assets && ng test",
@@ -55,56 +54,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^22.2.1",
-    "@angular/cdk": "^22.2.1",
     "@angular/common": "^22.2.1",
     "@angular/compiler": "^22.2.1",
     "@angular/core": "^22.2.1",
-    "@angular/forms": "^22.2.1",
-    "@angular/material": "^22.2.1",
     "@angular/platform-browser": "^22.2.1",
-    "@angular/platform-browser-dynamic": "^22.2.1",
-    "@angular/platform-server": "^22.2.1",
     "@angular/router": "^22.2.1",
-    "@angular/ssr": "^22.2.1",
-    "@types/markdown-it": "^14.1.2",
-    "express": "^5.2.1",
-    "markdown-it": "^14.1.1",
     "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
+    "tslib": "^2.3.0"
-    "zone.js": "~0.16.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^22.2.1",
+    "@angular/build": "^22.2.1",
     "@angular/cli": "^22.2.1",
     "@angular/compiler-cli": "^22.2.1",
-    "@types/express": "^5.0.6",
-    "@types/jasmine": "~6.0.0",
     "@types/node": "^25.7.0",
-    "@types/showdown": "^2.0.6",
+    "@typescript-eslint/eslint-plugin": "8.71.1",
-    "@typescript-eslint/eslint-plugin": "8.71.0",
+    "@typescript-eslint/parser": "8.71.1",
-    "@typescript-eslint/parser": "8.71.0",
     "angular-eslint": "22.5.0",
-    "del-cli": "^7.0.0",
     "esbuild": "^0.28.0",
     "eslint": "^9.39.4",
     "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-n": "^18.4.0",
+    "eslint-plugin-n": "^18.4.1",
     "eslint-plugin-promise": "7.3.0",
     "eslint-plugin-unused-imports": "4.4.1",
     "husky": "^9.1.7",
-    "jasmine-core": "~6.2.0",
+    "jsdom": "^30.1.2",
-    "karma": "~6.4.0",
+    "postcss": "^8.5.29",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.3.0",
-    "postcss": "^8.5.14",
     "postcss-selector-parser": "^7.1.1",
     "prettier": "^3.8.1",
     "sharp": "^0.35.5",
     "typescript": "~6.0.3",
-    "typescript-eslint": "8.71.0"
+    "typescript-eslint": "8.71.1",
+    "vitest": "^5.0.3"
   }
 }

scripts/generate-openpgp-assets.cjs

@@ -1,180 +0,0 @@
-const crypto = require('node:crypto');
-const fs = require('node:fs');
-const path = require('node:path');
-
-const workspaceRoot = process.cwd();
-const sourceKeyPath = path.join(workspaceRoot, 'src', 'assets', 'unoptimized', 'public.asc');
-const publicKeyOutputPath = path.join(workspaceRoot, 'public', 'keys', 'public.asc');
-const generatedModulePath = path.join(
-  workspaceRoot,
-  'src',
-  'app',
-  'generated',
-  'openpgp-key.generated.ts',
-);
-
-function ensureDirectory(directoryPath) {
-  fs.mkdirSync(directoryPath, { recursive: true });
-}
-
-function readAsciiArmoredKey(filePath) {
-  if (!fs.existsSync(filePath)) {
-    throw new Error(`Missing OpenPGP public key file at ${filePath}`);
-  }
-
-  return fs.readFileSync(filePath, 'utf8');
-}
-
-function decodeArmoredKey(armoredKey) {
-  const base64Lines = armoredKey
-    .split(/\r?\n/u)
-    .map((line) => line.trim())
-    .filter(
-      (line) =>
-        line.length > 0 &&
-        !line.startsWith('-----BEGIN ') &&
-        !line.startsWith('-----END ') &&
-        !line.includes(':') &&
-        !line.startsWith('='),
-    );
-
-  if (base64Lines.length === 0) {
-    throw new Error('OpenPGP public key armor did not contain any base64 payload.');
-  }
-
-  return Buffer.from(base64Lines.join(''), 'base64');
-}
-
-function parsePacketLength(buffer, offset, newFormat, lengthType) {
-  if (newFormat) {
-    const firstLengthOctet = buffer[offset];
-    if (firstLengthOctet < 192) {
-      return { headerLength: 1, packetLength: firstLengthOctet };
-    }
-
-    if (firstLengthOctet < 224) {
-      const secondLengthOctet = buffer[offset + 1];
-      const packetLength = ((firstLengthOctet - 192) << 8) + secondLengthOctet + 192;
-      return { headerLength: 2, packetLength };
-    }
-
-    if (firstLengthOctet === 255) {
-      return {
-        headerLength: 5,
-        packetLength: buffer.readUInt32BE(offset + 1),
-      };
-    }
-
-    throw new Error('OpenPGP partial body lengths are not supported by this generator.');
-  }
-
-  if (lengthType === 0) {
-    return { headerLength: 1, packetLength: buffer[offset] };
-  }
-
-  if (lengthType === 1) {
-    return { headerLength: 2, packetLength: buffer.readUInt16BE(offset) };
-  }
-
-  if (lengthType === 2) {
-    return { headerLength: 4, packetLength: buffer.readUInt32BE(offset) };
-  }
-
-  return { headerLength: 0, packetLength: buffer.length - offset };
-}
-
-function readPackets(buffer) {
-  const packets = [];
-  let offset = 0;
-
-  while (offset < buffer.length) {
-    const headerOctet = buffer[offset];
-    if ((headerOctet & 0x80) === 0) {
-      throw new Error(`Invalid OpenPGP packet header at byte offset ${offset}.`);
-    }
-
-    offset += 1;
-
-    const newFormat = (headerOctet & 0x40) !== 0;
-    const tag = newFormat ? headerOctet & 0x3f : (headerOctet >> 2) & 0x0f;
-    const lengthType = headerOctet & 0x03;
-    const { headerLength, packetLength } = parsePacketLength(buffer, offset, newFormat, lengthType);
-
-    offset += headerLength;
-    const body = buffer.subarray(offset, offset + packetLength);
-    packets.push({ tag, body });
-    offset += packetLength;
-  }
-
-  return packets;
-}
-
-function calculateFingerprintFromPacket(publicKeyPacketBody) {
-  const version = publicKeyPacketBody[0];
-
-  if (version === 4) {
-    const lengthBytes = Buffer.alloc(2);
-    lengthBytes.writeUInt16BE(publicKeyPacketBody.length, 0);
-    return crypto
-      .createHash('sha1')
-      .update(Buffer.concat([Buffer.from([0x99]), lengthBytes, publicKeyPacketBody]))
-      .digest('hex')
-      .toUpperCase();
-  }
-
-  if (version === 5 || version === 6) {
-    const lengthBytes = Buffer.alloc(4);
-    lengthBytes.writeUInt32BE(publicKeyPacketBody.length, 0);
-    return crypto
-      .createHash('sha256')
-      .update(Buffer.concat([Buffer.from([0x9a]), lengthBytes, publicKeyPacketBody]))
-      .digest('hex')
-      .toUpperCase();
-  }
-
-  throw new Error(`Unsupported OpenPGP public key version ${version}.`);
-}
-
-function formatFingerprint(fingerprint) {
-  return fingerprint.match(/.{1,4}/gu)?.join(' ') ?? fingerprint;
-}
-
-function buildGeneratedModule(assetPath, fingerprint) {
-  return [
-    'export const openPgpKey = {',
-    `  assetPath: '${assetPath}',`,
-    `  fingerprint: '${fingerprint}',`,
-    `  formattedFingerprint: '${formatFingerprint(fingerprint)}',`,
-    '} as const;',
-    '',
-  ].join('\n');
-}
-
-function run() {
-  const armoredKey = readAsciiArmoredKey(sourceKeyPath);
-  const binaryKey = decodeArmoredKey(armoredKey);
-  const packets = readPackets(binaryKey);
-  const publicKeyPacket = packets.find((packet) => packet.tag === 6);
-
-  if (!publicKeyPacket) {
-    throw new Error('Could not find a public-key packet in the provided OpenPGP key.');
-  }
-
-  const fingerprint = calculateFingerprintFromPacket(publicKeyPacket.body);
-
-  ensureDirectory(path.dirname(publicKeyOutputPath));
-  ensureDirectory(path.dirname(generatedModulePath));
-
-  fs.copyFileSync(sourceKeyPath, publicKeyOutputPath);
-  fs.writeFileSync(
-    generatedModulePath,
-    buildGeneratedModule('/keys/public.asc', fingerprint),
-    'utf8',
-  );
-
-  console.log(`Copied ${path.relative(workspaceRoot, publicKeyOutputPath)}`);
-  console.log(`Generated ${path.relative(workspaceRoot, generatedModulePath)}`);
-  console.log(`OpenPGP fingerprint: ${formatFingerprint(fingerprint)}`);
-}
-
-run();

scripts/generate-optimized-assets.cjs

@@ -15,7 +15,7 @@ const rasterExtensions = new Set([
   '.tif',
   '.tiff',
 ]);
-const passthroughExtensions = new Set(['.svg']);
+const passthroughExtensions = new Set(['.svg', '.woff2']);
 
 function collectFilesRecursively(directoryPath) {
   if (!fs.existsSync(directoryPath)) {
@@ -139,6 +139,32 @@ async function writeOptimizedAsset(sourceFilePath) {
   };
 }
 
+const iconSourcePath = path.join(sourceRoot, 'portrait', 'me.png');
+const iconOutputs = [
+  { fileName: 'icons/favicon-32.png', width: 32, height: 32, fit: 'cover', format: 'png' },
+  { fileName: 'icons/apple-touch-icon.png', width: 180, height: 180, fit: 'cover', format: 'png' },
+  { fileName: 'icons/og-image.jpg', width: 1200, height: 630, fit: 'contain', format: 'jpeg' },
+];
+
+// Favicons and social previews need PNG/JPEG because not every client accepts WebP.
+async function writeIconAssets() {
+  if (!fs.existsSync(iconSourcePath)) {
+    console.warn('Icon generation skipped: portrait/me.png not found.');
+    return;
+  }
+
+  for (const { fileName, width, height, fit, format } of iconOutputs) {
+    const targetFilePath = path.join(targetRoot, fileName);
+    fs.mkdirSync(path.dirname(targetFilePath), { recursive: true });
+    await sharp(iconSourcePath)
+      .resize({ width, height, fit, position: 'top', background: '#08080b' })
+      .flatten({ background: '#08080b' })
+      .toFormat(format, { quality: 86 })
+      .toFile(targetFilePath);
+    console.log(`Generated: ${fileName}`);
+  }
+}
+
 async function run() {
   if (!fs.existsSync(sourceRoot)) {
     console.log('Optimized asset generation skipped: no unoptimized asset directory found.');
@@ -175,6 +201,8 @@ async function run() {
     );
   }
 
+  await writeIconAssets();
+
   console.log(
     `Optimized asset generation complete. Converted: ${convertedCount}, copied: ${copiedCount}, net saved: ${totalSavedBytes} bytes.`,
   );

scripts/static-server.mjs

@@ -1,8 +1,10 @@
 import { createReadStream } from 'node:fs';
-import { access, stat } from 'node:fs/promises';
+import { stat } from 'node:fs/promises';
 import { createServer } from 'node:http';
 import path from 'node:path';
+import { pipeline } from 'node:stream/promises';
 import { fileURLToPath } from 'node:url';
+import { createBrotliCompress, createGzip } from 'node:zlib';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -11,11 +13,15 @@ const appRoot = path.resolve(__dirname, '..');
 const distRoot = path.join(appRoot, 'dist');
 const browserRoot = path.join(distRoot, 'browser');
 const port = 3000;
+const indexPath = path.join(browserRoot, 'index.html');
+// Keep in sync with src/app/app.routes.ts.
+const appRoutes = new Set(['/', '/imprint']);
 
 const mimeTypes = new Map([
   ['.css', 'text/css; charset=utf-8'],
   ['.html', 'text/html; charset=utf-8'],
   ['.ico', 'image/x-icon'],
+  ['.jpg', 'image/jpeg'],
   ['.js', 'text/javascript; charset=utf-8'],
   ['.json', 'application/json; charset=utf-8'],
   ['.map', 'application/json; charset=utf-8'],
@@ -23,9 +29,29 @@ const mimeTypes = new Map([
   ['.svg', 'image/svg+xml'],
   ['.txt', 'text/plain; charset=utf-8'],
   ['.webp', 'image/webp'],
+  ['.woff2', 'font/woff2'],
   ['.xml', 'application/xml; charset=utf-8'],
 ]);
 
+const compressibleExtensions = new Set([
+  '.css',
+  '.html',
+  '.js',
+  '.json',
+  '.map',
+  '.svg',
+  '.txt',
+  '.xml',
+]);
+
+const securityHeaders = {
+  'Permissions-Policy': 'camera=(), geolocation=(), microphone=()',
+  'Referrer-Policy': 'strict-origin-when-cross-origin',
+  'Strict-Transport-Security': 'max-age=31536000',
+  'X-Content-Type-Options': 'nosniff',
+  'X-Frame-Options': 'DENY',
+};
+
 function getContentType(filePath) {
   return mimeTypes.get(path.extname(filePath).toLowerCase()) ?? 'application/octet-stream';
 }
@@ -44,9 +70,20 @@ function getCacheControl(filePath) {
   }
 
   if (
-    ['.css', '.ico', '.js', '.json', '.map', '.png', '.svg', '.txt', '.webp', '.xml'].includes(
+    [
-      extension,
+      '.css',
-    )
+      '.ico',
+      '.jpg',
+      '.js',
+      '.json',
+      '.map',
+      '.png',
+      '.svg',
+      '.txt',
+      '.webp',
+      '.woff2',
+      '.xml',
+    ].includes(extension)
   ) {
     return normalizedPath.includes('/browser/')
       ? 'public, max-age=604800, stale-while-revalidate=86400'
@@ -56,55 +93,122 @@ function getCacheControl(filePath) {
   return 'public, max-age=3600';
 }
 
-async function pathExists(targetPath) {
+async function isFile(targetPath) {
   try {
-    await access(targetPath);
+    return (await stat(targetPath)).isFile();
-    return true;
   } catch {
     return false;
   }
 }
 
+function resolveInside(root, relativePath) {
+  const candidate = path.resolve(root, relativePath);
+  return candidate === root || candidate.startsWith(`${root}${path.sep}`) ? candidate : null;
+}
+
 async function resolveFile(urlPath) {
   const normalized = path.posix.normalize(decodeURIComponent(urlPath));
-  const relativePath = normalized.replace(/^(\.\.(\/|\\|$))+/, '').replace(/^\/+/, '');
+  const relativePath = normalized.replace(/^\/+/, '');
 
-  const rootCandidate = path.join(distRoot, relativePath);
+  for (const root of [distRoot, browserRoot]) {
-  if ((await pathExists(rootCandidate)) && (await stat(rootCandidate)).isFile()) {
+    const candidate = resolveInside(root, relativePath);
-    return rootCandidate;
+    if (candidate === null) {
+      return null;
     }
 
-  const browserCandidate = path.join(browserRoot, relativePath);
+    if (await isFile(candidate)) {
-  if ((await pathExists(browserCandidate)) && (await stat(browserCandidate)).isFile()) {
+      return candidate;
-    return browserCandidate;
     }
-
-  if (!path.posix.extname(normalized)) {
-    return path.join(browserRoot, 'index.html');
   }
 
   return null;
 }
 
-const server = createServer(async (request, response) => {
+function getEncoding(request, filePath) {
-  try {
+  if (!compressibleExtensions.has(path.extname(filePath).toLowerCase())) {
-    const requestUrl = new URL(request.url ?? '/', `http://${request.headers.host ?? 'localhost'}`);
+    return null;
-    const filePath = await resolveFile(requestUrl.pathname);
+  }
 
-    if (!filePath) {
+  const acceptEncoding = request.headers['accept-encoding'] ?? '';
-      response.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+  if (/\bbr\b/.test(acceptEncoding)) {
-      response.end('Not found');
+    return 'br';
+  }
+
+  return /\bgzip\b/.test(acceptEncoding) ? 'gzip' : null;
+}
+
+async function sendFile(request, response, filePath, statusCode) {
+  const encoding = getEncoding(request, filePath);
+  const headers = {
+    ...securityHeaders,
+    'Cache-Control': statusCode === 200 ? getCacheControl(filePath) : 'no-cache',
+    'Content-Type': getContentType(filePath),
+    Vary: 'Accept-Encoding',
+  };
+
+  if (encoding !== null) {
+    headers['Content-Encoding'] = encoding;
+  }
+
+  response.writeHead(statusCode, headers);
+
+  if (request.method === 'HEAD') {
+    response.end();
     return;
   }
 
-    response.writeHead(200, {
+  const source = createReadStream(filePath);
-      'Cache-Control': getCacheControl(filePath),
+  if (encoding === null) {
-      'Content-Type': getContentType(filePath),
+    await pipeline(source, response);
+    return;
+  }
+
+  await pipeline(source, encoding === 'br' ? createBrotliCompress() : createGzip(), response);
+}
+
+function sendText(response, statusCode, message, extraHeaders = {}) {
+  response.writeHead(statusCode, {
+    ...securityHeaders,
+    ...extraHeaders,
+    'Content-Type': 'text/plain; charset=utf-8',
   });
-    createReadStream(filePath).pipe(response);
+  response.end(message);
+}
+
+const server = createServer(async (request, response) => {
+  try {
+    if (request.method !== 'GET' && request.method !== 'HEAD') {
+      sendText(response, 405, 'Method not allowed', { Allow: 'GET, HEAD' });
+      return;
+    }
+
+    const requestUrl = new URL(request.url ?? '/', `http://${request.headers.host ?? 'localhost'}`);
+    const filePath = await resolveFile(requestUrl.pathname);
+
+    if (filePath) {
+      await sendFile(request, response, filePath, 200);
+      return;
+    }
+
+    const routePath = requestUrl.pathname.replace(/(.)\/+$/, '$1');
+    if (appRoutes.has(routePath)) {
+      await sendFile(request, response, indexPath, 200);
+      return;
+    }
+
+    // Unknown routes get a 404 status but still boot the app, which redirects to the start page.
+    if (!path.posix.extname(requestUrl.pathname)) {
+      await sendFile(request, response, indexPath, 404);
+      return;
+    }
+
+    sendText(response, 404, 'Not found');
   } catch (error) {
-    response.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
+    if (!response.headersSent) {
-    response.end('Internal server error');
+      sendText(response, 500, 'Internal server error');
+    } else {
+      response.destroy();
+    }
     console.error(error);
   }
 });

scripts/static-site.config.cjs

@@ -1,13 +1,13 @@
+const lastModified = '2026-10-15';
+
 module.exports = {
   siteUrl: 'https://fraujulian.xyz',
   sitemap: {
     routes: [
-      {
+      { path: '/', lastModified, changeFrequency: 'monthly', priority: '1.0' },
-        path: '/',
+      { path: '/?lang=de', lastModified, changeFrequency: 'monthly', priority: '1.0' },
-        lastModified: '2026-04-17',
+      { path: '/imprint', lastModified, changeFrequency: 'yearly', priority: '0.3' },
-        changeFrequency: 'monthly',
+      { path: '/imprint?lang=de', lastModified, changeFrequency: 'yearly', priority: '0.3' },
-        priority: '1.0',
-      },
     ],
   },
   robots: {

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div class="app-content" [attr.aria-hidden]="isLanguageSelectorOpen() ? 'true' : null" [attr.inert]="isLanguageSelectorOpen() ? '' : null">
+<div class="app-content">
   <router-outlet></router-outlet>
 </div>
 
@@ -16,14 +16,14 @@
   </span>
 </button>
 
-@if (isLanguageSelectorOpen()) {
+<dialog
-  <div
+  #languageDialog
   class="language-overlay"
-    role="dialog"
-    aria-modal="true"
   aria-labelledby="language-title"
+  (close)="closeLanguageSelector()"
   (click)="closeLanguageSelectorOnBackdrop($event)"
-  >
+>
+  @if (isLanguageSelectorOpen()) {
     <section class="language-card panel">
       <div class="language-card-header">
         <div class="language-copy">
@@ -57,5 +57,5 @@
         }
       </div>
     </section>
-  </div>
+  }
-}
+</dialog>

src/app/app.component.spec.ts

@@ -27,11 +27,13 @@ describe('AppComponent', (): void => {
 
   it('should keep the language selector closed on first visit', (): void => {
     const el = fixture.nativeElement as HTMLElement;
-    expect(el.querySelector('.language-overlay')).toBeNull();
+    expect(el.querySelector<HTMLDialogElement>('dialog.language-overlay')?.open).toBe(false);
   });
 
   it('should preselect English by default', (): void => {
-    const comp = component as unknown as { selectedLanguage(): string };
+    const comp = component as unknown as {
+      selectedLanguage(): string;
+    };
     expect(comp.selectedLanguage()).toBe('en');
   });
 
@@ -49,7 +51,6 @@ describe('AppComponent', (): void => {
     const comp = component as unknown as {
       chooseLanguage(language: 'en' | 'de'): void;
       currentLanguageCode(): string;
-      isLanguageConfirmed(): boolean;
       isLanguageSelectorOpen(): boolean;
     };
 
@@ -57,8 +58,7 @@ describe('AppComponent', (): void => {
     fixture.detectChanges();
 
     expect(comp.currentLanguageCode()).toBe('de');
-    expect(comp.isLanguageConfirmed()).toBeTrue();
+    expect(comp.isLanguageSelectorOpen()).toBe(false);
-    expect(comp.isLanguageSelectorOpen()).toBeFalse();
     expect(localStorage.getItem('portfolio-language')).toBe('de');
   });
 
@@ -69,13 +69,11 @@ describe('AppComponent', (): void => {
     restoredFixture.detectChanges();
     const restoredComponent = restoredFixture.componentInstance as unknown as {
       currentLanguageCode(): string;
-      isLanguageConfirmed(): boolean;
       isLanguageSelectorOpen(): boolean;
     };
 
     expect(restoredComponent.currentLanguageCode()).toBe('de');
-    expect(restoredComponent.isLanguageConfirmed()).toBeTrue();
+    expect(restoredComponent.isLanguageSelectorOpen()).toBe(false);
-    expect(restoredComponent.isLanguageSelectorOpen()).toBeFalse();
   });
 
   it('should reopen the selector after confirmation', (): void => {
@@ -89,6 +87,20 @@ describe('AppComponent', (): void => {
     comp.reopenLanguageSelector();
     fixture.detectChanges();
 
-    expect(comp.isLanguageSelectorOpen()).toBeTrue();
+    expect(comp.isLanguageSelectorOpen()).toBe(true);
+  });
+
+  it('should sync the selector state when the dialog closes natively', (): void => {
+    const comp = component as unknown as {
+      reopenLanguageSelector(): void;
+      isLanguageSelectorOpen(): boolean;
+    };
+    comp.reopenLanguageSelector();
+    fixture.detectChanges();
+
+    const dialog = (fixture.nativeElement as HTMLElement).querySelector('dialog');
+    dialog?.dispatchEvent(new Event('close'));
+
+    expect(comp.isLanguageSelectorOpen()).toBe(false);
   });
 });

src/app/app.component.ts

@@ -1,17 +1,18 @@
-import { DOCUMENT } from '@angular/common';
 import {
+  afterRenderEffect,
   ChangeDetectionStrategy,
   Component,
   computed,
-  effect,
   inject,
   signal,
+  viewChild,
 } from '@angular/core';
-import type { OnDestroy, OnInit } from '@angular/core';
+import type { ElementRef, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import type { LanguageCode } from '../languages/language.types';
 import type { LanguageOption } from './app.types';
+import { LanguagePreferenceService } from './services/language-preference.service';
 import { ShellLanguageService } from './services/shell-language.service';
 
 @Component({
@@ -21,13 +22,14 @@ import { ShellLanguageService } from './services/shell-language.service';
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnInit {
-  private readonly document = inject(DOCUMENT);
+  private readonly languagePreferenceService = inject(LanguagePreferenceService);
   private readonly shellLanguageService = inject(ShellLanguageService);
+  private readonly languageDialog =
+    viewChild.required<ElementRef<HTMLDialogElement>>('languageDialog');
 
   protected readonly content = this.shellLanguageService.content;
-  protected readonly currentLanguageCode = this.shellLanguageService.languageCode;
+  protected readonly currentLanguageCode = this.languagePreferenceService.languageCode;
-  protected readonly isLanguageConfirmed = this.shellLanguageService.isLanguageConfirmed;
   protected readonly isLanguageSelectorOpen = signal(false);
   protected readonly selectedLanguage = signal<LanguageCode>('en');
   protected readonly languageOptions: readonly LanguageOption[] = [
@@ -41,26 +43,22 @@ export class AppComponent implements OnInit, OnDestroy {
     this.getLanguageLabel(this.currentLanguageCode(), this.content()),
   );
 
-  constructor() {
+  private readonly syncDialog = afterRenderEffect((): void => {
-    effect((): void => {
+    const dialog = this.languageDialog().nativeElement;
-      const overflowValue = this.isLanguageSelectorOpen() ? 'hidden' : '';
+    if (this.isLanguageSelectorOpen() && !dialog.open) {
-      this.document.body.style.overflow = overflowValue;
+      dialog.showModal();
-      this.document.documentElement.style.overflow = overflowValue;
+    } else if (!this.isLanguageSelectorOpen() && dialog.open) {
-    });
+      dialog.close();
     }
+  });
 
   ngOnInit(): void {
-    const initialLanguage = this.shellLanguageService.initializeFromStorage();
+    this.selectedLanguage.set(this.languagePreferenceService.initialize());
-    this.selectedLanguage.set(initialLanguage);
   }
 
   protected chooseLanguage(language: LanguageCode): void {
     this.selectedLanguage.set(language);
-    this.confirmLanguage();
+    this.languagePreferenceService.confirmLanguage(language);
-  }
-
-  protected confirmLanguage(): void {
-    this.shellLanguageService.confirmLanguage(this.selectedLanguage());
     this.isLanguageSelectorOpen.set(false);
   }
 
@@ -69,6 +67,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.isLanguageSelectorOpen.set(true);
   }
 
+  /** Also runs when the dialog closes natively, e.g. via Escape. */
   protected closeLanguageSelector(): void {
     this.selectedLanguage.set(this.currentLanguageCode());
     this.isLanguageSelectorOpen.set(false);
@@ -83,9 +82,4 @@ export class AppComponent implements OnInit, OnDestroy {
   protected getLanguageLabel(language: LanguageCode, content = this.dialogContent()): string {
     return language === 'de' ? content.app.languageGerman : content.app.languageEnglish;
   }
-
-  ngOnDestroy(): void {
-    this.document.body.style.overflow = '';
-    this.document.documentElement.style.overflow = '';
-  }
 }

src/app/app.config.ts

@@ -1,8 +1,9 @@
 import type { ApplicationConfig } from '@angular/core';
-import { provideZonelessChangeDetection } from '@angular/core';
+import { inject, provideAppInitializer, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter, withInMemoryScrolling } from '@angular/router';
 
 import { routes } from './app.routes';
+import { SeoService } from './services/seo.service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -14,5 +15,8 @@ export const appConfig: ApplicationConfig = {
         scrollPositionRestoration: 'top',
       }),
     ),
+    provideAppInitializer((): void => {
+      inject(SeoService);
+    }),
   ],
 };

src/app/footer/footer.component.html

@@ -1,14 +1,10 @@
-<noscript>
-  <div class="page-shell footer-shell">
-    <div class="panel noscript-panel">
-      <h2 id="loading-text" class="warning-text">{{ content().footer.noscriptMessage }}</h2>
-    </div>
-  </div>
-</noscript>
-
 <footer class="site-footer">
   <div class="footer-inner">
     <p>&copy; 2023 - {{ currentYear }} {{ global.firstname }} {{ global.lastname }}</p>
+    @if (showImprintLink()) {
       <a routerLink="/imprint">{{ content().footer.imprintLink }}</a>
+    } @else {
+      <a routerLink="/">{{ content().footer.homeLink }}</a>
+    }
   </div>
 </footer>

src/app/footer/footer.component.spec.ts

@@ -80,6 +80,13 @@ describe('FooterComponent', (): void => {
       expect(imprintLink).toBeTruthy();
     });
 
+    it('should link back to the portfolio instead of the imprint on the imprint page', (): void => {
+      fixture.componentRef.setInput('showImprintLink', false);
+      fixture.detectChanges();
+      const links = Array.from((fixture.nativeElement as HTMLElement).querySelectorAll('a'));
+      expect(links.map((a): string => a.textContent?.trim() ?? '')).toEqual(['Portfolio']);
+    });
+
     it('should contain a footer element', (): void => {
       const el = fixture.nativeElement as HTMLElement;
       expect(el.querySelector('footer')).not.toBeNull();

src/app/footer/footer.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { global } from '../../global';
 import { ShellLanguageService } from '../services/shell-language.service';
@@ -16,4 +16,7 @@ export class FooterComponent {
   protected readonly content = this.shellLanguageService.content;
   protected readonly global = global;
   protected readonly currentYear = new Date().getFullYear();
+
+  /** The imprint page links back to the portfolio instead of to itself. */
+  readonly showImprintLink = input(true);
 }

src/app/generated/openpgp-key.generated.ts

@@ -1,5 +0,0 @@
-export const openPgpKey = {
-  assetPath: '/keys/public.asc',
-  fingerprint: '98FA30F85F2030A70F45AAEB3CDEA2DE5424B8E7',
-  formattedFingerprint: '98FA 30F8 5F20 30A7 0F45 AAEB 3CDE A2DE 5424 B8E7',
-} as const;

src/app/home/home.component.html

@@ -11,85 +11,75 @@
       </div>
 
       <div class="hero-actions">
-        <div class="hero-contact-block">
-          <p class="hero-contact-title">{{ content().home.contactTitle }}</p>
-          <div id="contact-links" class="contact-area hero-contact-area">
-            <a [href]="contactMailHref" aria-label="Send mail"><app-icon [icon]="envelopeIcon" size="lg"></app-icon></a>
-            <a href="tel:{{ global.hrefContactPhone }}" aria-label="Call phone number"
-              ><app-icon [icon]="phoneIcon" size="lg"></app-icon
-            ></a>
-            <a href="https://discord.com/users/860206216893693973" aria-label="Discord profile"
-              ><app-icon [icon]="discordIcon" size="lg"></app-icon
-            ></a>
-            <a href="https://git.lechner-systems.at/fraujulian" aria-label="Gitea profile"
-              ><app-icon [icon]="githubIcon" size="lg"></app-icon
-            ></a>
-            <a href="https://www.linkedin.com/in/julian-lechner-98b377356/" aria-label="LinkedIn profile"
-              ><app-icon [icon]="linkedinIcon" size="lg"></app-icon
-            ></a>
-          </div>
-        </div>
-
         <div class="hero-action-links">
           <button class="action-link" type="button" (click)="scrollToProjectsSection()">{{ content().home.viewProjects }}</button>
           <button class="action-link" type="button" (click)="scrollToAboutSection()">{{ content().home.aboutMe }}</button>
         </div>
+        <div class="hero-contact-block">
+          <p class="hero-contact-title">{{ content().home.contactTitle }}</p>
+          <div id="contact-links" class="contact-area hero-contact-area">
+            <a [href]="contactMailHref" [attr.aria-label]="content().home.mailAriaLabel"
+              ><app-icon [icon]="envelopeIcon" size="lg"></app-icon
+            ></a>
+            <a href="tel:{{ global.hrefContactPhone }}" [attr.aria-label]="content().home.phoneAriaLabel"
+              ><app-icon [icon]="phoneIcon" size="lg"></app-icon
+            ></a>
+            <a [href]="global.signalUrl" [attr.aria-label]="content().home.signalAriaLabel"
+              ><app-icon [icon]="signalIcon" size="lg"></app-icon
+            ></a>
+            <a href="https://git.lechner-systems.at/fraujulian" [attr.aria-label]="content().home.giteaAriaLabel"
+              ><app-icon [icon]="giteaIcon" size="lg"></app-icon
+            ></a>
+            <a href="https://www.linkedin.com/in/julianlechner2009/" [attr.aria-label]="content().home.linkedinAriaLabel"
+              ><app-icon [icon]="linkedinIcon" size="lg"></app-icon
+            ></a>
           </div>
-
-      <div class="hero-meta">
-        <div>
-          <span class="meta-label">{{ currentBioEntry.label }}</span
-          ><strong>{{ currentBioEntry.value }}</strong>
         </div>
       </div>
     </div>
 
     <div class="hero-visual">
-      @if (currentPortraitHighlight) {
+      @if (currentPortraitHighlight(); as highlight) {
         <div class="portrait-highlight">
           <button
             type="button"
             class="portrait-highlight-button"
             (click)="showNextPortraitHighlight()"
             [attr.aria-label]="content().home.nextHighlightAriaLabel"
-            [title]="portraitHighlights.length > 1 ? content().home.nextHighlightTitle : content().home.singleHighlightTitle"
+            [title]="portraitHighlights().length > 1 ? content().home.nextHighlightTitle : content().home.singleHighlightTitle"
           >
-            <div class="portrait-media" [class.portrait-media-switching]="isPortraitSwitching">
+            <div class="portrait-media" [class.portrait-media-switching]="isPortraitSwitching()">
               <img
                 class="hero-feature-image"
-                [src]="currentPortraitHighlight.image"
+                [src]="highlight.image"
-                [attr.srcset]="currentPortraitHighlight.imageSrcset"
+                [attr.srcset]="highlight.imageSrcset"
-                [attr.sizes]="currentPortraitHighlight.imageSizes"
+                [attr.sizes]="highlight.imageSizes"
-                [width]="currentPortraitHighlight.imageWidth"
+                [width]="highlight.imageWidth"
-                [height]="currentPortraitHighlight.imageHeight"
+                [height]="highlight.imageHeight"
                 fetchpriority="high"
                 decoding="async"
-                [alt]="currentPortraitHighlight.text + ' ' + content().home.portraitAltSuffix"
+                [alt]="highlight.text + ' ' + content().home.portraitAltSuffix"
               />
-              @if (currentPortraitHighlightIndex === 0) {
+              @if (currentPortraitHighlightIndex() === 0) {
                 <span class="portrait-click-hint">{{ content().home.clickHint }}</span>
               }
-              <span class="portrait-caption">{{ currentPortraitHighlight.text }}</span>
+              <span class="portrait-caption">{{ highlight.text }}</span>
             </div>
           </button>
         </div>
       }
+      <a
+        class="hero-meta"
+        [href]="global.linkedinSkillsUrl"
+        [attr.aria-label]="content().home.skillsLinkAriaLabel"
+        (mouseenter)="isBioTickerPaused.set(true)"
+        (mouseleave)="isBioTickerPaused.set(false)"
+      >
+        <div>
+          <span class="meta-label">{{ content().home.skillsLabel }}</span
+          ><strong>{{ currentBioText() }}</strong>
         </div>
-  </section>
-
-  <section class="panel openpgp-section">
-    <div class="openpgp-copy">
-      <p class="eyebrow">{{ content().home.openPgpTitle }}</p>
-      <p class="openpgp-description">{{ content().home.openPgpDescription }}</p>
-    </div>
-    <div class="openpgp-actions">
-      <a class="action-link openpgp-download-link" [href]="openPgpKey.assetPath" download="julian-lechner-public.asc">
-        {{ content().home.openPgpDownload }}
       </a>
-      <p class="openpgp-fingerprint">
-        <span>{{ content().home.openPgpFingerprintLabel }}</span>
-        <strong>{{ openPgpKey.formattedFingerprint }}</strong>
-      </p>
     </div>
   </section>
 
@@ -105,11 +95,11 @@
       </div>
       <div class="story-detail">
         <button class="detail-toggle" type="button" (click)="toggleBio()">
-          <span>{{ isLongBioShown ? content().home.detailToggleClose : content().home.detailToggleOpen }}</span
+          <span>{{ isLongBioShown() ? content().home.detailToggleClose : content().home.detailToggleOpen }}</span
-          ><app-icon [icon]="isLongBioShown ? arrowDownIcon : arrowRightIcon"></app-icon>
+          ><app-icon [icon]="isLongBioShown() ? arrowDownIcon : arrowRightIcon"></app-icon>
         </button>
-        @if (isLongBioMounted) {
+        @if (isLongBioMounted()) {
-          <div class="detail-panel" [class.detail-panel-enter]="isLongBioShown" [class.detail-panel-leave]="!isLongBioShown">
+          <div class="detail-panel" [class.detail-panel-enter]="isLongBioShown()" [class.detail-panel-leave]="!isLongBioShown()">
             <p>{{ content().home.detailParagraphs[0] }}</p>
             <p>{{ content().home.detailParagraphs[1] }}</p>
             <p>{{ content().home.detailParagraphs[2] }}</p>
@@ -127,7 +117,7 @@
       <p class="eyebrow">{{ content().home.projectsEyebrow }}</p>
     </div>
     <div class="project-list">
-      @for (project of projects; track project.link + '-' + $index; let i = $index) {
+      @for (project of projects(); track project.link + '-' + $index; let i = $index) {
         <a
           class="panel project-entry"
           [class.project-entry-reverse]="i % 2 === 1"
@@ -141,24 +131,25 @@
             <img
               class="project-icon"
               [class.project-icon-circle]="project.circleIcon !== false"
-              [ngSrc]="project.icon"
+              [src]="project.icon"
               [attr.srcset]="project.iconSrcset ?? null"
               [attr.sizes]="project.iconSizes ?? null"
               [width]="project.iconWidth ?? 216"
               [height]="project.iconHeight ?? 216"
-              disableOptimizedSrcset
+              loading="eager"
-              [alt]="project.title + ' icon'"
+              fetchpriority="low"
+              decoding="async"
+              [alt]="project.title + ' ' + content().home.projectIconAltSuffix"
             />
           }
           <div class="project-copy">
             <div class="project-header">
               <div class="project-title-wrap">
-                <span class="project-link">{{ project.title }}</span>
+                <span class="project-link"
-              </div>
+                  >{{ project.titleHead
-              <div class="project-languages" [attr.aria-label]="content().home.projectLanguagesAriaLabel">
+                  }}<span class="project-title-tail"
-                @for (language of project.skills; track language + '-' + $index) {
+                    >{{ project.titleTail }}<app-icon class="project-arrow" [icon]="arrowRightIcon"></app-icon></span
-                  <span class="project-language-chip">{{ language }}</span>
+                ></span>
-                }
               </div>
             </div>
             <p class="project-description">{{ project.description }}</p>
@@ -169,4 +160,4 @@
   </section>
 </main>
 
-<app-footer ngSkipHydration></app-footer>
+<app-footer></app-footer>

src/app/home/home.component.spec.ts

@@ -1,44 +1,61 @@
+import type { Mock } from 'vitest';
 import type { ComponentFixture } from '@angular/core/testing';
-import { TestBed, fakeAsync, tick, discardPeriodicTasks } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
-import { IMAGE_LOADER } from '@angular/common';
-import type { ImageLoaderConfig } from '@angular/common';
 import { NgZone } from '@angular/core';
+import type { Signal, WritableSignal } from '@angular/core';
 
 import { HomeComponent } from './home.component';
 import { global } from '../../global';
 import { enLanguage } from '../../languages/en';
-import type {
+import type { LanguagePortraitHighlight } from '../../languages/language.types';
-  LanguageBioTextEntry,
-  LanguagePortraitHighlight,
-} from '../../languages/language.types';
 
 describe('HomeComponent', (): void => {
+  beforeEach((): void => {
+    // performance stays real so the change detection timing tests keep measuring.
+    vi.useFakeTimers({
+      toFake: [
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+      ],
+    });
+    // jsdom does not implement matchMedia.
+    vi.stubGlobal('matchMedia', (): MediaQueryList => ({ matches: false }) as MediaQueryList);
+  });
+
+  afterEach((): void => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  });
+
   let fixture: ComponentFixture<HomeComponent>;
   let component: HomeComponent;
 
   interface ComponentAccess {
     age: number;
-    currentIndex: number;
+    currentIndex: WritableSignal<number>;
-    isLongBioShown: boolean;
+    isBioTickerPaused: WritableSignal<boolean>;
-    isLongBioMounted: boolean;
+    isLongBioShown: WritableSignal<boolean>;
-    isPortraitSwitching: boolean;
+    isLongBioMounted: WritableSignal<boolean>;
-    currentPortraitHighlightIndex: number;
+    isPortraitSwitching: WritableSignal<boolean>;
+    currentPortraitHighlightIndex: WritableSignal<number>;
+    portraitHighlights: Signal<LanguagePortraitHighlight[]>;
     bioHideTimeoutId: number | null;
-    scrollAnimationFrameId: number | null;
+    scrollEffectsAnimationFrameId: number | null;
-    projectEntryAnimationFrameId: number | null;
+    scheduleScrollEffectsUpdate(): void;
-    aboutSectionAnimationFrameId: number | null;
-    scheduleNameGradientUpdate(): void;
-    scheduleProjectEntryRevealUpdate(): void;
-    scheduleAboutSectionScrollAnimationUpdate(): void;
     shouldEnableScrollEffects(): boolean;
     toggleBio(): void;
     showNextPortraitHighlight(): void;
     scrollToAboutSection(): void;
     scrollToProjectsSection(): void;
     scrollToContactLinks(): void;
-    currentBioEntry: LanguageBioTextEntry;
+    currentBioText: Signal<string>;
-    currentPortraitHighlight: LanguagePortraitHighlight | null;
+    currentPortraitHighlight: Signal<LanguagePortraitHighlight | null>;
   }
 
   let comp: ComponentAccess;
@@ -46,13 +63,7 @@ describe('HomeComponent', (): void => {
   beforeEach(async (): Promise<void> => {
     await TestBed.configureTestingModule({
       imports: [HomeComponent],
-      providers: [
+      providers: [provideRouter([])],
-        provideRouter([]),
-        {
-          provide: IMAGE_LOADER,
-          useValue: (config: ImageLoaderConfig): string => config.src,
-        },
-      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(HomeComponent);
@@ -62,9 +73,8 @@ describe('HomeComponent', (): void => {
   });
 
   afterEach((): void => {
-    // Explicitly destroy to stop the interval(1000) subscription started in ngOnInit.
+    // Explicitly destroy to stop the bio ticker interval started after the first render.
-    // Without this, the real setInterval keeps the browser's event loop alive after
+    // Without this, the interval keeps firing after the test has finished.
-    // the test suite completes, causing Karma to disconnect with a 30 s timeout.
     fixture.destroy();
   });
 
@@ -93,40 +103,69 @@ describe('HomeComponent', (): void => {
 
   // ── Bio cycling ────────────────────────────────────────────────────────────
 
-  describe('currentBioEntry getter', (): void => {
+  describe('currentBioText', (): void => {
     it('should return the first bioTextsList entry at index 0', (): void => {
-      comp.currentIndex = 0;
+      comp.currentIndex.set(0);
-      expect(comp.currentBioEntry).toEqual(enLanguage.bioTextsList[0]);
+      expect(comp.currentBioText()).toEqual(enLanguage.bioTextsList[0]);
     });
 
     it('should return the correct entry when index changes', (): void => {
-      comp.currentIndex = 3;
+      comp.currentIndex.set(3);
-      expect(comp.currentBioEntry).toEqual(enLanguage.bioTextsList[3]);
+      expect(comp.currentBioText()).toEqual(enLanguage.bioTextsList[3]);
     });
 
-    it('should return the fallback entry when index is out of range', (): void => {
+    it('should return an empty text when index is out of range', (): void => {
-      comp.currentIndex = 99999;
+      comp.currentIndex.set(99999);
-      expect(comp.currentBioEntry.label).toBeDefined();
+      expect(comp.currentBioText()).toBe('');
-      expect(comp.currentBioEntry.value).toBeDefined();
     });
   });
 
   describe('interval-driven bio cycling', (): void => {
+    it('should advance to the next entry every 1250 ms', async (): Promise<void> => {
+      await vi.advanceTimersByTimeAsync(1249);
+      expect(comp.currentIndex()).toBe(0);
+      await vi.advanceTimersByTimeAsync(1);
+      expect(comp.currentIndex()).toBe(1);
+    });
+
+    it('should pause while the bio is hovered', async (): Promise<void> => {
+      const meta = (fixture.nativeElement as HTMLElement).querySelector('.hero-meta');
+      meta?.dispatchEvent(new MouseEvent('mouseenter'));
+      await vi.advanceTimersByTimeAsync(2500);
+      expect(comp.currentIndex()).toBe(0);
+
+      meta?.dispatchEvent(new MouseEvent('mouseleave'));
+      await vi.advanceTimersByTimeAsync(1250);
+      expect(comp.currentIndex()).toBe(1);
+    });
+
+    it('should not cycle when reduced motion is requested', async (): Promise<void> => {
+      vi.stubGlobal('matchMedia', (): MediaQueryList => ({ matches: true }) as MediaQueryList);
+      const reducedFixture = TestBed.createComponent(HomeComponent);
+      reducedFixture.detectChanges();
+      const reduced = reducedFixture.componentInstance as unknown as ComponentAccess;
+
+      await vi.advanceTimersByTimeAsync(5000);
+
+      expect(reduced.currentIndex()).toBe(0);
+      reducedFixture.destroy();
+    });
+
     it('should start with currentIndex 0', (): void => {
-      expect(comp.currentIndex).toBe(0);
+      expect(comp.currentIndex()).toBe(0);
     });
 
     it('should expose a valid bio entry for the current index', (): void => {
-      expect(comp.currentBioEntry).toEqual(enLanguage.bioTextsList[0]);
+      expect(comp.currentBioText()).toEqual(enLanguage.bioTextsList[0]);
     });
 
     it('should correctly wrap from the last entry back to 0 using modulo', (): void => {
       const last = enLanguage.bioTextsList.length - 1;
-      comp.currentIndex = last;
+      comp.currentIndex.set(last);
-      expect(comp.currentBioEntry).toEqual(enLanguage.bioTextsList[last]);
+      expect(comp.currentBioText()).toEqual(enLanguage.bioTextsList[last]);
-      comp.currentIndex = (last + 1) % enLanguage.bioTextsList.length;
+      comp.currentIndex.set((last + 1) % enLanguage.bioTextsList.length);
-      expect(comp.currentIndex).toBe(0);
+      expect(comp.currentIndex()).toBe(0);
-      expect(comp.currentBioEntry).toEqual(enLanguage.bioTextsList[0]);
+      expect(comp.currentBioText()).toEqual(enLanguage.bioTextsList[0]);
     });
   });
 
@@ -134,156 +173,165 @@ describe('HomeComponent', (): void => {
 
   describe('currentPortraitHighlight getter', (): void => {
     it('should return the highlight at the current index', (): void => {
-      comp.currentPortraitHighlightIndex = 0;
+      comp.currentPortraitHighlightIndex.set(0);
-      expect(comp.currentPortraitHighlight).toEqual(enLanguage.portraitHighlights[0]);
+      expect(comp.currentPortraitHighlight()).toEqual(enLanguage.portraitHighlights[0]);
     });
 
     it('should return null when index is out of range', (): void => {
-      comp.currentPortraitHighlightIndex = 99999;
+      comp.currentPortraitHighlightIndex.set(99999);
-      expect(comp.currentPortraitHighlight).toBeNull();
+      expect(comp.currentPortraitHighlight()).toBeNull();
+    });
+  });
+
+  describe('portrait preloading', (): void => {
+    it('should preload every highlight image except the visible one', (): void => {
+      const preloaded: string[] = [];
+      vi.spyOn(window, 'Image').mockImplementation(function (): HTMLImageElement {
+        const image = document.createElement('img');
+        Object.defineProperty(image, 'src', {
+          set: (value: string): void => {
+            preloaded.push(value);
+          },
+        });
+        return image;
+      });
+
+      const preloadFixture = TestBed.createComponent(HomeComponent);
+      preloadFixture.detectChanges();
+
+      expect(preloaded).toEqual(enLanguage.portraitHighlights.slice(1).map((h) => h.image));
+      preloadFixture.destroy();
     });
   });
 
   describe('showNextPortraitHighlight', (): void => {
-    // Timer tests run outside Angular zone to prevent NgOptimizedImage from
-    // throwing NG02953 when height/width inputs change during re-render.
-
     it('should set isPortraitSwitching to true immediately', (): void => {
-      comp.isPortraitSwitching = false;
+      comp.isPortraitSwitching.set(false);
       comp.showNextPortraitHighlight();
-      expect(comp.isPortraitSwitching).toBeTrue();
+      expect(comp.isPortraitSwitching()).toBe(true);
     });
 
     it('should not advance index when already switching', (): void => {
-      comp.isPortraitSwitching = true;
+      comp.isPortraitSwitching.set(true);
       comp.showNextPortraitHighlight();
-      expect(comp.currentPortraitHighlightIndex).toBe(0);
+      expect(comp.currentPortraitHighlightIndex()).toBe(0);
     });
 
     it('should not call setTimeout when only one portrait exists', (): void => {
-      const highlights = (comp as unknown as { portraitHighlights: LanguagePortraitHighlight[] })
+      const highlights = comp.portraitHighlights();
-        .portraitHighlights;
       const saved = [...highlights]; // snapshot before mutation
       highlights.splice(1, saved.length - 1); // reduce to a single entry
 
-      const setSpy = spyOn(window, 'setTimeout');
+      const setSpy = vi.spyOn(window, 'setTimeout');
       comp.showNextPortraitHighlight();
       expect(setSpy).not.toHaveBeenCalled();
 
       highlights.splice(0, highlights.length, ...saved); // restore from snapshot
     });
 
-    it('should advance the portrait index after 125 ms', fakeAsync((): void => {
+    it('should advance the portrait index after 125 ms', async (): Promise<void> => {
       const zone = TestBed.inject(NgZone);
       zone.runOutsideAngular((): void => {
         comp.showNextPortraitHighlight();
       });
-      tick(125);
+      await vi.advanceTimersByTimeAsync(125);
-      expect(comp.currentPortraitHighlightIndex).toBe(1);
+      expect(comp.currentPortraitHighlightIndex()).toBe(1);
-      tick(125);
+      await vi.advanceTimersByTimeAsync(125);
-      discardPeriodicTasks();
+    });
-    }));
 
-    it('should reset isPortraitSwitching to false after 250 ms', fakeAsync((): void => {
+    it('should reset isPortraitSwitching to false after 250 ms', async (): Promise<void> => {
       const zone = TestBed.inject(NgZone);
       zone.runOutsideAngular((): void => {
         comp.showNextPortraitHighlight();
       });
-      tick(250);
+      await vi.advanceTimersByTimeAsync(250);
-      expect(comp.isPortraitSwitching).toBeFalse();
+      expect(comp.isPortraitSwitching()).toBe(false);
-      discardPeriodicTasks();
+    });
-    }));
 
-    it('should wrap portrait index from the last position back to 0', fakeAsync((): void => {
+    it('should wrap portrait index from the last position back to 0', async (): Promise<void> => {
-      comp.currentPortraitHighlightIndex = enLanguage.portraitHighlights.length - 1;
+      comp.currentPortraitHighlightIndex.set(enLanguage.portraitHighlights.length - 1);
       const zone = TestBed.inject(NgZone);
       zone.runOutsideAngular((): void => {
         comp.showNextPortraitHighlight();
       });
-      tick(125);
+      await vi.advanceTimersByTimeAsync(125);
-      expect(comp.currentPortraitHighlightIndex).toBe(0);
+      expect(comp.currentPortraitHighlightIndex()).toBe(0);
-      tick(125);
+      await vi.advanceTimersByTimeAsync(125);
-      discardPeriodicTasks();
+    });
-    }));
   });
 
   // ── Bio toggle ─────────────────────────────────────────────────────────────
 
   describe('toggleBio', (): void => {
-    it('should mount bio immediately on opening', fakeAsync((): void => {
+    it('should mount bio immediately on opening', async (): Promise<void> => {
       comp.toggleBio();
-      expect(comp.isLongBioMounted).toBeTrue();
+      expect(comp.isLongBioMounted()).toBe(true);
-      tick(100);
+      await vi.advanceTimersByTimeAsync(100);
-      discardPeriodicTasks();
+    });
-    }));
 
-    it('should set isLongBioShown to true after the double-rAF delay', fakeAsync((): void => {
+    it('should set isLongBioShown to true after the double-rAF delay', async (): Promise<void> => {
       comp.toggleBio();
-      tick(50); // allow both nested requestAnimationFrame calls to execute
+      await vi.advanceTimersByTimeAsync(50); // allow both nested requestAnimationFrame calls to execute
       fixture.detectChanges();
-      expect(comp.isLongBioShown).toBeTrue();
+      expect(comp.isLongBioShown()).toBe(true);
-      discardPeriodicTasks();
+    });
-    }));
 
-    it('should set isLongBioShown to false immediately on close', fakeAsync((): void => {
+    it('should set isLongBioShown to false immediately on close', async (): Promise<void> => {
       // Open first
       comp.toggleBio();
-      tick(50);
+      await vi.advanceTimersByTimeAsync(50);
       fixture.detectChanges();
 
       // Close
       comp.toggleBio();
       fixture.detectChanges();
-      expect(comp.isLongBioShown).toBeFalse();
+      expect(comp.isLongBioShown()).toBe(false);
-      tick(300);
+      await vi.advanceTimersByTimeAsync(300);
-      discardPeriodicTasks();
+    });
-    }));
 
-    it('should keep isLongBioMounted true during the 300 ms close animation', fakeAsync((): void => {
+    it('should keep isLongBioMounted true during the 300 ms close animation', async (): Promise<void> => {
       comp.toggleBio();
-      tick(50);
+      await vi.advanceTimersByTimeAsync(50);
       fixture.detectChanges();
 
       comp.toggleBio();
       fixture.detectChanges();
-      expect(comp.isLongBioMounted).toBeTrue();
+      expect(comp.isLongBioMounted()).toBe(true);
 
-      tick(299);
+      await vi.advanceTimersByTimeAsync(299);
-      expect(comp.isLongBioMounted).toBeTrue();
+      expect(comp.isLongBioMounted()).toBe(true);
 
-      tick(1);
+      await vi.advanceTimersByTimeAsync(1);
       fixture.detectChanges();
-      expect(comp.isLongBioMounted).toBeFalse();
+      expect(comp.isLongBioMounted()).toBe(false);
-      discardPeriodicTasks();
+    });
-    }));
 
-    it('should cancel pending close timeout when re-opened during animation', fakeAsync((): void => {
+    it('should cancel pending close timeout when re-opened during animation', async (): Promise<void> => {
       comp.toggleBio();
-      tick(50);
+      await vi.advanceTimersByTimeAsync(50);
       fixture.detectChanges();
 
       comp.toggleBio(); // start closing
-      tick(150); // halfway through 300 ms
+      await vi.advanceTimersByTimeAsync(150); // halfway through 300 ms
 
       comp.toggleBio(); // re-open before unmount
-      tick(50);
+      await vi.advanceTimersByTimeAsync(50);
       fixture.detectChanges();
 
-      expect(comp.isLongBioMounted).toBeTrue();
+      expect(comp.isLongBioMounted()).toBe(true);
-      expect(comp.isLongBioShown).toBeTrue();
+      expect(comp.isLongBioShown()).toBe(true);
 
-      tick(500);
+      await vi.advanceTimersByTimeAsync(500);
-      discardPeriodicTasks();
+    });
-    }));
   });
 
   // ── Scroll helpers ─────────────────────────────────────────────────────────
 
   describe('scroll helpers', (): void => {
-    let scrollSpy: jasmine.Spy;
+    let scrollSpy: Mock;
 
     beforeEach((): void => {
-      scrollSpy = spyOn(window, 'scrollTo');
+      scrollSpy = vi.spyOn(window, 'scrollTo').mockReturnValue(undefined);
     });
 
     it('should call window.scrollTo when scrolling to the about section', (): void => {
@@ -349,20 +397,18 @@ describe('HomeComponent', (): void => {
   // ── Lifecycle cleanup ──────────────────────────────────────────────────────
 
   describe('ngOnDestroy', (): void => {
-    it('should clear pending portrait switch timers on destroy', fakeAsync((): void => {
+    it('should clear pending portrait switch timers on destroy', async (): Promise<void> => {
       comp.showNextPortraitHighlight();
-      const clearSpy = spyOn(window, 'clearTimeout').and.callThrough();
+      const clearSpy = vi.spyOn(window, 'clearTimeout');
 
       fixture.destroy();
 
       expect(clearSpy).toHaveBeenCalled();
-      discardPeriodicTasks();
+    });
-    }));
 
-    it('should not throw when destroyed', fakeAsync((): void => {
+    it('should not throw when destroyed', async (): Promise<void> => {
       expect((): void => fixture.destroy()).not.toThrow();
-      discardPeriodicTasks();
+    });
-    }));
   });
 
   // ── Template rendering ─────────────────────────────────────────────────────
@@ -385,7 +431,13 @@ describe('HomeComponent', (): void => {
       expect(h1?.textContent).toContain(global.lastname);
     });
 
-    it('should render the bio label from the current bioTextsList entry', (): void => {
+    it('should link the skills box to the LinkedIn skills page', (): void => {
+      const el = fixture.nativeElement as HTMLElement;
+      const link = el.querySelector<HTMLAnchorElement>('a.hero-meta');
+      expect(link?.getAttribute('href')).toBe(global.linkedinSkillsUrl);
+    });
+
+    it('should render the skills label above the rotating skill', (): void => {
       const el = fixture.nativeElement as HTMLElement;
       expect(el.querySelector('.meta-label')).not.toBeNull();
     });
@@ -411,6 +463,17 @@ describe('HomeComponent', (): void => {
       expect(entries.length).toBe(enLanguage.projects.length);
     });
 
+    it('should keep the arrow on the same line as the last title word', (): void => {
+      const el = fixture.nativeElement as HTMLElement;
+      const tails = Array.from(el.querySelectorAll('.project-title-tail'));
+      expect(tails.map((tail): string => tail.textContent?.trim() ?? '')).toEqual(
+        enLanguage.projects.map((project): string => project.title.split(' ').at(-1) ?? ''),
+      );
+      tails.forEach((tail): void => {
+        expect(tail.querySelector('.project-arrow')).not.toBeNull();
+      });
+    });
+
     it('should render all project titles', (): void => {
       const el = fixture.nativeElement as HTMLElement;
       enLanguage.projects.forEach((project): void => {
@@ -430,7 +493,7 @@ describe('HomeComponent', (): void => {
 
   describe('Performance', (): void => {
     it('should keep scroll effects enabled on desktop pointers when motion is allowed', (): void => {
-      spyOn(window, 'matchMedia').and.callFake(
+      vi.spyOn(window, 'matchMedia').mockImplementation(
         (query: string): MediaQueryList =>
           ({
             matches:
@@ -439,29 +502,29 @@ describe('HomeComponent', (): void => {
           }) as MediaQueryList,
       );
 
-      expect(comp.shouldEnableScrollEffects()).toBeTrue();
+      expect(comp.shouldEnableScrollEffects()).toBe(true);
     });
 
     it('should keep scroll effects enabled on coarse touch pointers when motion is allowed', (): void => {
-      spyOn(window, 'matchMedia').and.callFake(
+      vi.spyOn(window, 'matchMedia').mockImplementation(
         (query: string): MediaQueryList =>
           ({
             matches: query === '(hover: none) and (pointer: coarse)',
           }) as MediaQueryList,
       );
 
-      expect(comp.shouldEnableScrollEffects()).toBeTrue();
+      expect(comp.shouldEnableScrollEffects()).toBe(true);
     });
 
     it('should disable scroll effects when reduced motion is requested', (): void => {
-      spyOn(window, 'matchMedia').and.callFake(
+      vi.spyOn(window, 'matchMedia').mockImplementation(
         (query: string): MediaQueryList =>
           ({
             matches: query === '(prefers-reduced-motion: reduce)',
           }) as MediaQueryList,
       );
 
-      expect(comp.shouldEnableScrollEffects()).toBeFalse();
+      expect(comp.shouldEnableScrollEffects()).toBe(false);
     });
 
     it('should create and run initial change detection within 200 ms', (): void => {
@@ -480,57 +543,22 @@ describe('HomeComponent', (): void => {
       expect(performance.now() - start).toBeLessThan(100);
     });
 
-    it('should deduplicate rapid schedule calls to a single requestAnimationFrame', fakeAsync((): void => {
+    it('should batch all scroll effects into a single requestAnimationFrame', async (): Promise<void> => {
-      // The RAF registered during beforeEach's ngOnInit lives outside this fakeAsync zone.
+      // The RAF registered after the first render is still pending under fake timers.
       // Resetting the ID to null makes the schedule function treat the slot as free.
-      comp.scrollAnimationFrameId = null;
+      comp.scrollEffectsAnimationFrameId = null;
 
       let rafCallCount = 0;
-      spyOn(window, 'requestAnimationFrame').and.callFake((): number => {
+      vi.spyOn(window, 'requestAnimationFrame').mockImplementation((): number => {
         rafCallCount++;
         return rafCallCount; // returns non-null so subsequent calls deduplicate
       });
 
-      comp.scheduleNameGradientUpdate();
+      comp.scheduleScrollEffectsUpdate();
-      comp.scheduleNameGradientUpdate();
+      comp.scheduleScrollEffectsUpdate();
-      comp.scheduleNameGradientUpdate();
+      comp.scheduleScrollEffectsUpdate();
 
       expect(rafCallCount).toBe(1);
-      discardPeriodicTasks();
-    }));
-
-    it('should deduplicate project-entry reveal scheduling the same way', fakeAsync((): void => {
-      comp.projectEntryAnimationFrameId = null;
-
-      let rafCallCount = 0;
-      spyOn(window, 'requestAnimationFrame').and.callFake((): number => {
-        rafCallCount++;
-        return rafCallCount;
     });
-
-      comp.scheduleProjectEntryRevealUpdate();
-      comp.scheduleProjectEntryRevealUpdate();
-      comp.scheduleProjectEntryRevealUpdate();
-
-      expect(rafCallCount).toBe(1);
-      discardPeriodicTasks();
-    }));
-
-    it('should deduplicate about-section scroll scheduling the same way', fakeAsync((): void => {
-      comp.aboutSectionAnimationFrameId = null;
-
-      let rafCallCount = 0;
-      spyOn(window, 'requestAnimationFrame').and.callFake((): number => {
-        rafCallCount++;
-        return rafCallCount;
-      });
-
-      comp.scheduleAboutSectionScrollAnimationUpdate();
-      comp.scheduleAboutSectionScrollAnimationUpdate();
-      comp.scheduleAboutSectionScrollAnimationUpdate();
-
-      expect(rafCallCount).toBe(1);
-      discardPeriodicTasks();
-    }));
   });
 });

src/app/home/home.component.ts

@@ -1,142 +1,103 @@
-import type { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
+import type { OnDestroy } from '@angular/core';
 import {
+  afterNextRender,
   ChangeDetectionStrategy,
   Component,
+  computed,
   DestroyRef,
   inject,
-  NgZone,
   signal,
 } from '@angular/core';
-import { NgOptimizedImage } from '@angular/common';
+import { filter, interval } from 'rxjs';
-import { interval } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { global } from '../../global';
-import { openPgpKey } from '../generated/openpgp-key.generated';
-import type {
-  LanguageBioTextEntry,
-  LanguagePortraitHighlight,
-  LanguageProject,
-} from '../../languages/language.types';
 import { FooterComponent } from '../footer/footer.component';
 import { LanguageService } from '../services/language.service';
 import { IconComponent } from '../shared/icon/icon.component';
 import {
   arrowDownIcon,
   arrowRightIcon,
-  discordIcon,
   envelopeIcon,
-  githubIcon,
+  giteaIcon,
   linkedinIcon,
   phoneIcon,
+  signalIcon,
 } from '../shared/icon/icons';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [FooterComponent, IconComponent, NgOptimizedImage],
+  imports: [FooterComponent, IconComponent],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
+export class HomeComponent implements OnDestroy {
+  private static readonly bioTickerIntervalMs = 1250;
+
   private readonly destroyRef = inject(DestroyRef);
-  private readonly zone = inject(NgZone);
   private readonly languageService = inject(LanguageService);
   protected readonly content = this.languageService.content;
 
-  private scrollAnimationFrameId: number | null = null;
+  private scrollEffectsAnimationFrameId: number | null = null;
-  private projectEntryAnimationFrameId: number | null = null;
+  private readonly scheduleScrollEffectsUpdate: () => void = (): void => {
-  private aboutSectionAnimationFrameId: number | null = null;
+    if (this.scrollEffectsAnimationFrameId !== null) return;
-  private readonly scheduleNameGradientUpdate: () => void = (): void => {
+    this.scrollEffectsAnimationFrameId = window.requestAnimationFrame((): void => {
-    if (this.scrollAnimationFrameId !== null || typeof window === 'undefined') return;
+      this.scrollEffectsAnimationFrameId = null;
-    this.scrollAnimationFrameId = window.requestAnimationFrame((): void => {
-      this.scrollAnimationFrameId = null;
       this.updateNameGradientProgress();
-    });
-  };
-  private readonly scheduleProjectEntryRevealUpdate: () => void = (): void => {
-    if (this.projectEntryAnimationFrameId !== null || typeof window === 'undefined') return;
-    this.projectEntryAnimationFrameId = window.requestAnimationFrame((): void => {
-      this.projectEntryAnimationFrameId = null;
-      this.updateProjectEntryRevealProgress();
-    });
-  };
-  private readonly scheduleAboutSectionScrollAnimationUpdate: () => void = (): void => {
-    if (this.aboutSectionAnimationFrameId !== null || typeof window === 'undefined') return;
-    this.aboutSectionAnimationFrameId = window.requestAnimationFrame((): void => {
-      this.aboutSectionAnimationFrameId = null;
       this.updateAboutSectionScrollProgress();
+      this.updateProjectEntryRevealProgress();
     });
   };
 
   protected readonly global = global;
   protected readonly age = this.calculateAge(global.birthdate);
   protected readonly contactMailHref = `mailto:${global.contactMail}`;
-  protected readonly openPgpKey = openPgpKey;
   protected readonly arrowRightIcon = arrowRightIcon;
   protected readonly arrowDownIcon = arrowDownIcon;
   protected readonly envelopeIcon = envelopeIcon;
   protected readonly phoneIcon = phoneIcon;
-  protected readonly discordIcon = discordIcon;
+  protected readonly signalIcon = signalIcon;
-  protected readonly githubIcon = githubIcon;
+  protected readonly giteaIcon = giteaIcon;
   protected readonly linkedinIcon = linkedinIcon;
 
-  private readonly isLongBioShownState = signal(false);
+  protected readonly isLongBioShown = signal(false);
-  private readonly isLongBioMountedState = signal(false);
+  protected readonly isLongBioMounted = signal(false);
-  private readonly currentPortraitHighlightIndexState = signal(0);
+  protected readonly currentPortraitHighlightIndex = signal(0);
-  private readonly isPortraitSwitchingState = signal(false);
+  protected readonly isPortraitSwitching = signal(false);
-  private readonly currentIndexState = signal(0);
+  protected readonly currentIndex = signal(0);
+  protected readonly isBioTickerPaused = signal(false);
   private bioHideTimeoutId: number | null = null;
   private portraitSwitchTimeoutId: number | null = null;
   private portraitSwitchDoneTimeoutId: number | null = null;
 
-  protected get isLongBioShown(): boolean {
+  protected readonly portraitHighlights = computed(() => this.content().portraitHighlights);
-    return this.isLongBioShownState();
+  /** Splits off the last title word so the arrow stays glued to it and never wraps alone. */
-  }
+  protected readonly projects = computed(() =>
-  protected set isLongBioShown(value: boolean) {
+    this.content().projects.map((project) => {
-    this.isLongBioShownState.set(value);
+      const tailStart = project.title.lastIndexOf(' ') + 1;
-  }
+      return {
-  protected get isLongBioMounted(): boolean {
+        ...project,
-    return this.isLongBioMountedState();
+        titleHead: project.title.slice(0, tailStart),
-  }
+        titleTail: project.title.slice(tailStart),
-  protected set isLongBioMounted(value: boolean) {
+      };
-    this.isLongBioMountedState.set(value);
+    }),
-  }
-  protected get currentPortraitHighlightIndex(): number {
-    return this.currentPortraitHighlightIndexState();
-  }
-  protected set currentPortraitHighlightIndex(value: number) {
-    this.currentPortraitHighlightIndexState.set(value);
-  }
-  protected get isPortraitSwitching(): boolean {
-    return this.isPortraitSwitchingState();
-  }
-  protected set isPortraitSwitching(value: boolean) {
-    this.isPortraitSwitchingState.set(value);
-  }
-  protected get currentIndex(): number {
-    return this.currentIndexState();
-  }
-  protected set currentIndex(value: number) {
-    this.currentIndexState.set(value);
-  }
-  protected get portraitHighlights(): LanguagePortraitHighlight[] {
-    return this.content().portraitHighlights;
-  }
-  protected get projects(): LanguageProject[] {
-    return this.content().projects;
-  }
-  protected get currentPortraitHighlight(): LanguagePortraitHighlight | null {
-    return this.portraitHighlights[this.currentPortraitHighlightIndexState()] ?? null;
-  }
-  protected get currentBioEntry(): LanguageBioTextEntry {
-    return (
-      this.content().bioTextsList[this.currentIndexState()] ?? {
-        label: this.content().home.fallbackBioLabel,
-        value: '',
-      }
   );
-  }
+  protected readonly currentPortraitHighlight = computed(
+    () => this.portraitHighlights()[this.currentPortraitHighlightIndex()] ?? null,
+  );
+  protected readonly currentBioText = computed(
+    (): string => this.content().bioTextsList[this.currentIndex()] ?? '',
+  );
+
+  private readonly startBrowserEffects = afterNextRender((): void => {
+    this.preloadPortraitHighlights();
+    if (!this.shouldEnableScrollEffects()) return;
+    this.startBioTicker();
+    window.addEventListener('scroll', this.scheduleScrollEffectsUpdate, { passive: true });
+    window.addEventListener('resize', this.scheduleScrollEffectsUpdate, { passive: true });
+    this.scheduleScrollEffectsUpdate();
+  });
 
   protected interpolate(text: string): string {
     return text
@@ -144,78 +105,48 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
       .replaceAll('{{age}}', String(this.age));
   }
 
-  ngOnInit(): void {
-    this.zone.runOutsideAngular((): void => {
-      this.initNameGradientScrollAnimation();
-    });
-    this.zone.runOutsideAngular((): void => {
-      interval(1000)
-        .pipe(takeUntilDestroyed(this.destroyRef))
-        .subscribe((): void => {
-          this.zone.run((): void => {
-            const len = this.content().bioTextsList.length;
-            this.currentIndex = len > 0 ? (this.currentIndex + 1) % len : 0;
-          });
-        });
-    });
-  }
-
-  ngAfterViewInit(): void {
-    this.zone.runOutsideAngular((): void => {
-      this.initProjectEntryRevealObserver();
-      this.initAboutSectionScrollAnimation();
-    });
-  }
   ngOnDestroy(): void {
+    if (typeof window === 'undefined') return;
     if (this.bioHideTimeoutId !== null) {
       window.clearTimeout(this.bioHideTimeoutId);
       this.bioHideTimeoutId = null;
     }
     this.clearPortraitSwitchTimeouts();
-    this.destroyNameGradientScrollAnimation();
+    this.destroyScrollEffects();
-    this.destroyProjectEntryRevealObserver();
-    this.destroyAboutSectionScrollAnimation();
   }
 
   protected toggleBio(): void {
-    if (this.isLongBioShown) {
+    if (this.isLongBioShown()) {
-      this.isLongBioShown = false;
+      this.isLongBioShown.set(false);
-      if (typeof window !== 'undefined') {
       if (this.bioHideTimeoutId !== null) window.clearTimeout(this.bioHideTimeoutId);
       this.bioHideTimeoutId = window.setTimeout((): void => {
-          this.isLongBioMounted = false;
+        this.isLongBioMounted.set(false);
         this.bioHideTimeoutId = null;
       }, 300);
-      } else {
-        this.isLongBioMounted = false;
-      }
       return;
     }
-    if (this.bioHideTimeoutId !== null && typeof window !== 'undefined') {
+    if (this.bioHideTimeoutId !== null) {
       window.clearTimeout(this.bioHideTimeoutId);
       this.bioHideTimeoutId = null;
     }
-    this.isLongBioMounted = true;
+    this.isLongBioMounted.set(true);
-    if (typeof window !== 'undefined') {
     window.requestAnimationFrame((): void => {
       window.requestAnimationFrame((): void => {
-          this.isLongBioShown = true;
+        this.isLongBioShown.set(true);
       });
     });
-    } else {
-      this.isLongBioShown = true;
-    }
   }
   protected showNextPortraitHighlight(): void {
-    if (this.portraitHighlights.length <= 1 || this.isPortraitSwitching) return;
+    if (this.portraitHighlights().length <= 1 || this.isPortraitSwitching()) return;
-    this.isPortraitSwitching = true;
+    this.isPortraitSwitching.set(true);
     this.portraitSwitchTimeoutId = window.setTimeout((): void => {
-      this.currentPortraitHighlightIndex =
+      this.currentPortraitHighlightIndex.update(
-        (this.currentPortraitHighlightIndex + 1) % this.portraitHighlights.length;
+        (index: number): number => (index + 1) % this.portraitHighlights().length,
+      );
       this.portraitSwitchTimeoutId = null;
     }, 125);
     this.portraitSwitchDoneTimeoutId = window.setTimeout((): void => {
-      this.isPortraitSwitching = false;
+      this.isPortraitSwitching.set(false);
       this.portraitSwitchDoneTimeoutId = null;
     }, 250);
   }
@@ -239,62 +170,47 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     return !prefersReducedMotion;
   }
 
-  private initNameGradientScrollAnimation(): void {
+  /** Loads the other highlight images at low priority so a click swaps them without a visible delay. */
-    if (!this.shouldEnableScrollEffects()) return;
+  private preloadPortraitHighlights(): void {
-    window.addEventListener('scroll', this.scheduleNameGradientUpdate, { passive: true });
+    const current = this.currentPortraitHighlight();
-    window.addEventListener('resize', this.scheduleNameGradientUpdate, { passive: true });
+    for (const highlight of this.portraitHighlights()) {
-    this.scheduleNameGradientUpdate();
+      if (highlight === current) continue;
+      const image = new Image();
+      image.fetchPriority = 'low';
+      image.sizes = highlight.imageSizes;
+      image.srcset = highlight.imageSrcset;
+      image.src = highlight.image;
     }
-  private initProjectEntryRevealObserver(): void {
-    if (!this.shouldEnableScrollEffects()) return;
-    window.addEventListener('scroll', this.scheduleProjectEntryRevealUpdate, { passive: true });
-    window.addEventListener('resize', this.scheduleProjectEntryRevealUpdate, { passive: true });
-    this.scheduleProjectEntryRevealUpdate();
   }
-  private destroyProjectEntryRevealObserver(): void {
+
-    if (typeof window === 'undefined' || typeof document === 'undefined') return;
+  private startBioTicker(): void {
-    window.removeEventListener('scroll', this.scheduleProjectEntryRevealUpdate);
+    interval(HomeComponent.bioTickerIntervalMs)
-    window.removeEventListener('resize', this.scheduleProjectEntryRevealUpdate);
+      .pipe(
-    if (this.projectEntryAnimationFrameId !== null) {
+        filter((): boolean => !this.isBioTickerPaused()),
-      window.cancelAnimationFrame(this.projectEntryAnimationFrameId);
+        takeUntilDestroyed(this.destroyRef),
-      this.projectEntryAnimationFrameId = null;
+      )
+      .subscribe((): void => {
+        const length = this.content().bioTextsList.length;
+        this.currentIndex.update((index: number): number =>
+          length > 0 ? (index + 1) % length : 0,
+        );
+      });
   }
+
+  private destroyScrollEffects(): void {
+    window.removeEventListener('scroll', this.scheduleScrollEffectsUpdate);
+    window.removeEventListener('resize', this.scheduleScrollEffectsUpdate);
+    if (this.scrollEffectsAnimationFrameId !== null) {
+      window.cancelAnimationFrame(this.scrollEffectsAnimationFrameId);
+      this.scrollEffectsAnimationFrameId = null;
+    }
+    document.documentElement.style.removeProperty('--name-pride-progress');
+    document.getElementById('about')?.style.removeProperty('--about-scroll-progress');
     document.querySelectorAll<HTMLElement>('.project-entry').forEach((entry: HTMLElement): void => {
       entry.style.removeProperty('--project-entry-progress');
     });
   }
-  private initAboutSectionScrollAnimation(): void {
-    if (!this.shouldEnableScrollEffects()) return;
-    window.addEventListener('scroll', this.scheduleAboutSectionScrollAnimationUpdate, {
-      passive: true,
-    });
-    window.addEventListener('resize', this.scheduleAboutSectionScrollAnimationUpdate, {
-      passive: true,
-    });
-    this.scheduleAboutSectionScrollAnimationUpdate();
-  }
-  private destroyAboutSectionScrollAnimation(): void {
-    if (typeof window === 'undefined' || typeof document === 'undefined') return;
-    window.removeEventListener('scroll', this.scheduleAboutSectionScrollAnimationUpdate);
-    window.removeEventListener('resize', this.scheduleAboutSectionScrollAnimationUpdate);
-    if (this.aboutSectionAnimationFrameId !== null) {
-      window.cancelAnimationFrame(this.aboutSectionAnimationFrameId);
-      this.aboutSectionAnimationFrameId = null;
-    }
-    document.getElementById('about')?.style.removeProperty('--about-scroll-progress');
-  }
-  private destroyNameGradientScrollAnimation(): void {
-    if (typeof window === 'undefined') return;
-    window.removeEventListener('scroll', this.scheduleNameGradientUpdate);
-    window.removeEventListener('resize', this.scheduleNameGradientUpdate);
-    if (this.scrollAnimationFrameId !== null) {
-      window.cancelAnimationFrame(this.scrollAnimationFrameId);
-      this.scrollAnimationFrameId = null;
-    }
-    document.documentElement.style.removeProperty('--name-pride-progress');
-  }
   private clearPortraitSwitchTimeouts(): void {
-    if (typeof window === 'undefined') return;
     if (this.portraitSwitchTimeoutId !== null) {
       window.clearTimeout(this.portraitSwitchTimeoutId);
       this.portraitSwitchTimeoutId = null;
@@ -305,7 +221,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
   private updateNameGradientProgress(): void {
-    if (typeof window === 'undefined') return;
     const root: HTMLElement = document.documentElement;
     const portfolioEyebrow: HTMLElement | null = document.getElementById('portfolio-eyebrow');
     const portfolioTriggerY: number =
@@ -326,7 +241,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     root.style.setProperty('--name-pride-progress', progress.toFixed(4));
   }
   private updateAboutSectionScrollProgress(): void {
-    if (typeof window === 'undefined') return;
     const aboutSection: HTMLElement | null = document.getElementById('about');
     if (aboutSection === null) return;
     const sectionRect: DOMRect = aboutSection.getBoundingClientRect();
@@ -339,7 +253,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     aboutSection.style.setProperty('--about-scroll-progress', clampedProgress.toFixed(4));
   }
   private updateProjectEntryRevealProgress(): void {
-    if (typeof window === 'undefined' || typeof document === 'undefined') return;
     const projectEntries: NodeListOf<HTMLElement> = document.querySelectorAll('.project-entry');
     const viewportHeight: number = window.innerHeight || 1;
     const startY: number = viewportHeight * 0.98;

src/app/imprint/imprint.component.html

@@ -17,10 +17,8 @@
       <div class="portrait-highlight legal-contact-box">
         <p class="hero-contact-title">{{ content().imprint.provider }}</p>
         <p class="legal-provider-name">{{ global.firstname }} {{ global.lastname }}</p>
-        <p>- Lechner Systems -</p>
         <p>{{ global.address.street }} {{ global.address.houseNumber }}</p>
         <p>{{ global.address.zip }} {{ global.address.city }}</p>
-        <p>{{ global.address.state }}</p>
         <p>{{ global.address.country }}</p>
         <hr />
         <p class="hero-contact-title">{{ content().imprint.directContact }}</p>
@@ -37,20 +35,6 @@
     </div>
   </section>
 
-  <section class="story-section panel legal-section">
-    <div class="section-heading">
-      <p class="eyebrow">{{ content().imprint.scopeEyebrow }}</p>
-      <h2>{{ content().imprint.scopeTitle }}</h2>
-    </div>
-    <div class="story-grid">
-      <div class="story-copy">
-        <p>{{ content().imprint.scopeLeft }}</p>
-      </div>
-      <div class="story-detail">
-        <p>{{ content().imprint.scopeRight }}</p>
-      </div>
-    </div>
-  </section>
   <section class="story-section panel legal-section">
     <div class="section-heading compact">
       <p class="eyebrow">{{ content().imprint.privacyEyebrow }}</p>
@@ -58,17 +42,14 @@
     </div>
     <div class="story-grid">
       <div class="story-copy">
-        <p>{{ bind(content().imprint.privacyLeftParagraphs[0]) }}</p>
+        <p>{{ content().imprint.privacyLeft }}</p>
-        <p>{{ content().imprint.privacyLeftParagraphs[1] }}</p>
-        <p>{{ content().imprint.privacyLeftParagraphs[2] }}</p>
       </div>
       <div class="story-detail">
-        <p>{{ content().imprint.privacyRightParagraphs[0] }}</p>
+        <p>{{ content().imprint.privacyRight }}</p>
-        <p>{{ content().imprint.privacyRightParagraphs[1] }}</p>
-        <p>{{ content().imprint.privacyRightParagraphs[2] }}</p>
       </div>
     </div>
   </section>
+
   <section class="story-section panel legal-section">
     <div class="section-heading compact">
       <p class="eyebrow">{{ content().imprint.rightsEyebrow }}</p>
@@ -90,7 +71,7 @@
     </div>
     <div class="story-grid">
       <div class="story-copy">
-        <p>{{ content().imprint.copyrightLeftParagraphs[0] }}</p>
+        <p>{{ bind(content().imprint.copyrightLeftParagraphs[0]) }}</p>
         <p>{{ content().imprint.copyrightLeftParagraphs[1] }}</p>
       </div>
       <div class="story-detail">
@@ -101,4 +82,4 @@
   </section>
 </main>
 
-<app-footer ngSkipHydration></app-footer>
+<app-footer [showImprintLink]="false"></app-footer>

src/app/imprint/imprint.component.spec.ts

@@ -133,7 +133,7 @@ describe('ImprintComponent', (): void => {
     it('should render an "Imprint & Privacy" heading', (): void => {
       const el = fixture.nativeElement as HTMLElement;
       const headings = Array.from(el.querySelectorAll('h1'));
-      expect(headings.some((h): boolean => h.textContent?.includes('Imprint') === true)).toBeTrue();
+      expect(headings.some((h): boolean => h.textContent?.includes('Imprint') === true)).toBe(true);
     });
 
     it('should contain a back link to the portfolio root', (): void => {

src/app/services/language-preference.service.spec.ts

@@ -0,0 +1,52 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LanguagePreferenceService } from './language-preference.service';
+
+describe('LanguagePreferenceService', (): void => {
+  let service: LanguagePreferenceService;
+
+  beforeEach((): void => {
+    localStorage.clear();
+    window.history.replaceState(null, '', '/');
+    service = TestBed.inject(LanguagePreferenceService);
+  });
+
+  afterEach((): void => {
+    vi.restoreAllMocks();
+    window.history.replaceState(null, '', '/');
+  });
+
+  it('should fall back to English for unsupported browser languages', (): void => {
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('fr-FR');
+    expect(service.initialize()).toBe('en');
+  });
+
+  it('should use the browser language on the first visit', (): void => {
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('de-AT');
+    expect(service.initialize()).toBe('de');
+  });
+
+  it('should prefer a stored choice over the browser language', (): void => {
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('de-AT');
+    localStorage.setItem('portfolio-language', 'en');
+    expect(service.initialize()).toBe('en');
+  });
+
+  it('should prefer the lang query parameter over everything else', (): void => {
+    localStorage.setItem('portfolio-language', 'en');
+    window.history.replaceState(null, '', '/?lang=de');
+    expect(service.initialize()).toBe('de');
+  });
+
+  it('should ignore an unsupported lang query parameter', (): void => {
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
+    window.history.replaceState(null, '', '/?lang=fr');
+    expect(service.initialize()).toBe('en');
+  });
+
+  it('should persist a confirmed language', (): void => {
+    service.confirmLanguage('de');
+    expect(service.languageCode()).toBe('de');
+    expect(localStorage.getItem('portfolio-language')).toBe('de');
+  });
+});

src/app/services/language-preference.service.ts

@@ -2,31 +2,35 @@ import { Injectable, signal } from '@angular/core';
 
 import type { LanguageCode } from '../../languages/language.types';
 
+const isLanguageCode = (value: string | null): value is LanguageCode =>
+  value === 'en' || value === 'de';
+
 @Injectable({ providedIn: 'root' })
 export class LanguagePreferenceService {
   private static readonly storageKey = 'portfolio-language';
   private readonly currentLanguageCode = signal<LanguageCode>('en');
-  private readonly languageConfirmed = signal(true);
 
   readonly languageCode = this.currentLanguageCode.asReadonly();
-  readonly isLanguageConfirmed = this.languageConfirmed.asReadonly();
 
-  initializeFromStorage(): LanguageCode {
+  /** Picks the language from `?lang=`, then the stored choice, then the browser language. */
+  initialize(): LanguageCode {
     if (typeof window === 'undefined') {
       return this.currentLanguageCode();
     }
 
-    const storedLanguage = window.localStorage.getItem(LanguagePreferenceService.storageKey);
+    const candidates = [
-    if (storedLanguage === 'de' || storedLanguage === 'en') {
+      new URLSearchParams(window.location.search).get('lang'),
-      this.currentLanguageCode.set(storedLanguage);
+      window.localStorage.getItem(LanguagePreferenceService.storageKey),
-    }
+      window.navigator.language.slice(0, 2).toLowerCase(),
+    ];
+    const language = candidates.find(isLanguageCode) ?? 'en';
+    this.currentLanguageCode.set(language);
 
-    return this.currentLanguageCode();
+    return language;
   }
 
   confirmLanguage(code: LanguageCode): void {
     this.currentLanguageCode.set(code);
-    this.languageConfirmed.set(true);
 
     if (typeof window !== 'undefined') {
       window.localStorage.setItem(LanguagePreferenceService.storageKey, code);

src/app/services/language.service.ts

@@ -2,26 +2,15 @@ import { Injectable, computed, inject } from '@angular/core';
 
 import { deLanguage } from '../../languages/de';
 import { enLanguage } from '../../languages/en';
-import type { LanguageCode, LanguagePack } from '../../languages/language.types';
+import type { LanguagePack } from '../../languages/language.types';
 import { LanguagePreferenceService } from './language-preference.service';
 
+/** Page content for the lazy-loaded routes; kept apart from the shell texts to stay out of the initial bundle. */
 @Injectable({ providedIn: 'root' })
 export class LanguageService {
-  private readonly languagePreferenceService = inject(LanguagePreferenceService);
+  private readonly languageCode = inject(LanguagePreferenceService).languageCode;
 
-  readonly languageCode = this.languagePreferenceService.languageCode;
+  readonly content = computed<LanguagePack>(() =>
-  readonly isLanguageConfirmed = this.languagePreferenceService.isLanguageConfirmed;
+    this.languageCode() === 'de' ? deLanguage : enLanguage,
-  readonly content = computed<LanguagePack>(() => this.getPack(this.languageCode()));
+  );
-
-  initializeFromStorage(): LanguageCode {
-    return this.languagePreferenceService.initializeFromStorage();
-  }
-
-  confirmLanguage(code: LanguageCode): void {
-    this.languagePreferenceService.confirmLanguage(code);
-  }
-
-  getPack(code: LanguageCode): LanguagePack {
-    return code === 'de' ? deLanguage : enLanguage;
-  }
 }

src/app/services/seo.service.spec.ts

@@ -0,0 +1,79 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter, Router } from '@angular/router';
+import { Component } from '@angular/core';
+
+import { LanguagePreferenceService } from './language-preference.service';
+import { SeoService } from './seo.service';
+
+@Component({ template: '' })
+class EmptyComponent {}
+
+describe('SeoService', (): void => {
+  const getHref = (selector: string): string | null =>
+    document.head.querySelector(selector)?.getAttribute('href') ?? null;
+
+  beforeEach(async (): Promise<void> => {
+    localStorage.clear();
+    TestBed.configureTestingModule({
+      providers: [
+        provideRouter([
+          { path: '', component: EmptyComponent },
+          { path: 'imprint', component: EmptyComponent },
+        ]),
+      ],
+    });
+    TestBed.inject(SeoService);
+    await TestBed.inject(Router).navigateByUrl('/');
+    TestBed.tick();
+  });
+
+  it('should describe the English start page by default', (): void => {
+    expect(document.documentElement.lang).toBe('en');
+    expect(document.title).toContain('Julian Lechner');
+    expect(getHref('link[rel="canonical"]')).toBe('https://fraujulian.xyz/');
+    expect(getHref('link[hreflang="de"]')).toBe('https://fraujulian.xyz/?lang=de');
+    expect(getHref('link[hreflang="x-default"]')).toBe('https://fraujulian.xyz/');
+  });
+
+  it('should switch language, title and canonical URL together', async (): Promise<void> => {
+    TestBed.inject(LanguagePreferenceService).confirmLanguage('de');
+    await TestBed.inject(Router).navigateByUrl('/imprint');
+    TestBed.tick();
+
+    expect(document.documentElement.lang).toBe('de');
+    expect(document.title).toContain('Impressum');
+    expect(getHref('link[rel="canonical"]')).toBe('https://fraujulian.xyz/imprint?lang=de');
+    expect(document.head.querySelector('meta[property="og:locale"]')?.getAttribute('content')).toBe(
+      'de_AT',
+    );
+  });
+
+  describe('home title', (): void => {
+    beforeEach(async (): Promise<void> => {
+      TestBed.resetTestingModule();
+      vi.useFakeTimers();
+      TestBed.configureTestingModule({
+        providers: [provideRouter([{ path: '', component: EmptyComponent }])],
+      });
+      TestBed.inject(SeoService);
+      await TestBed.inject(Router).navigateByUrl('/');
+      TestBed.tick();
+    });
+
+    afterEach((): void => {
+      vi.useRealTimers();
+    });
+
+    it('should alternate between name and role every 3.5 seconds', (): void => {
+      expect(document.title).toBe('Julian Lechner');
+
+      vi.advanceTimersByTime(3500);
+      TestBed.tick();
+      expect(document.title).toBe('Full Stack Developer');
+
+      vi.advanceTimersByTime(3500);
+      TestBed.tick();
+      expect(document.title).toBe('Julian Lechner');
+    });
+  });
+});

src/app/services/seo.service.ts

@@ -0,0 +1,89 @@
+import { DOCUMENT } from '@angular/common';
+import { Injectable, effect, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Meta, Title } from '@angular/platform-browser';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, interval, map } from 'rxjs';
+
+import { global } from '../../global';
+import type { LanguageCode } from '../../languages/language.types';
+import { LanguagePreferenceService } from './language-preference.service';
+import { ShellLanguageService } from './shell-language.service';
+
+const languageCodes: readonly LanguageCode[] = ['en', 'de'];
+const ogLocales: Readonly<Record<LanguageCode, string>> = { en: 'en_US', de: 'de_AT' };
+const homeTitles: readonly string[] = ['Julian Lechner', 'Full Stack Developer'];
+const homeTitleSwitchMs = 3500;
+
+/** Keeps `<html lang>`, title, description, canonical, hreflang and Open Graph tags in sync. */
+@Injectable({ providedIn: 'root' })
+export class SeoService {
+  private readonly document = inject(DOCUMENT);
+  private readonly title = inject(Title);
+  private readonly meta = inject(Meta);
+  private readonly router = inject(Router);
+  private readonly languageCode = inject(LanguagePreferenceService).languageCode;
+  private readonly content = inject(ShellLanguageService).content;
+  private readonly path = toSignal(
+    this.router.events.pipe(
+      filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+      map((event: NavigationEnd): string => event.urlAfterRedirects.split(/[?#]/u)[0] ?? '/'),
+    ),
+    { initialValue: '/' },
+  );
+  private readonly titleTick = toSignal(interval(homeTitleSwitchMs), { initialValue: -1 });
+
+  private readonly syncHead = effect((): void => {
+    this.update(this.languageCode(), this.path());
+  });
+
+  /** The start page title alternates in the browser tab; other pages keep a fixed title. */
+  private readonly syncTitle = effect((): void => {
+    const homeTitle = homeTitles[(this.titleTick() + 1) % homeTitles.length] ?? global.firstname;
+    this.title.setTitle(this.path() === '/imprint' ? this.content().meta.imprintTitle : homeTitle);
+  });
+
+  private update(language: LanguageCode, path: string): void {
+    const { meta } = this.content();
+    const pageTitle = path === '/imprint' ? meta.imprintTitle : meta.homeTitle;
+    const pageUrl = this.getPageUrl(path, language);
+
+    this.document.documentElement.lang = language;
+    this.meta.updateTag({ name: 'description', content: meta.description });
+    this.meta.updateTag({ property: 'og:title', content: pageTitle });
+    this.meta.updateTag({ property: 'og:description', content: meta.description });
+    this.meta.updateTag({ property: 'og:url', content: pageUrl });
+    this.meta.updateTag({ property: 'og:locale', content: ogLocales[language] });
+    this.setLink('link[rel="canonical"]', { rel: 'canonical', href: pageUrl });
+
+    for (const code of languageCodes) {
+      this.setLink(`link[rel="alternate"][hreflang="${code}"]`, {
+        rel: 'alternate',
+        hreflang: code,
+        href: this.getPageUrl(path, code),
+      });
+    }
+    this.setLink('link[rel="alternate"][hreflang="x-default"]', {
+      rel: 'alternate',
+      hreflang: 'x-default',
+      href: this.getPageUrl(path, 'en'),
+    });
+  }
+
+  /** English is the default and lives on the plain URL; other languages use `?lang=`. */
+  private getPageUrl(path: string, language: LanguageCode): string {
+    const pageUrl = `${global.siteUrl}${path}`;
+    return language === 'en' ? pageUrl : `${pageUrl}?lang=${language}`;
+  }
+
+  private setLink(selector: string, attributes: Readonly<Record<string, string>>): void {
+    let link = this.document.head.querySelector<HTMLLinkElement>(selector);
+    if (link === null) {
+      link = this.document.createElement('link');
+      this.document.head.appendChild(link);
+    }
+    for (const [name, value] of Object.entries(attributes)) {
+      link.setAttribute(name, value);
+    }
+  }
+}

src/app/services/shell-language.service.ts

@@ -6,20 +6,10 @@ import { LanguagePreferenceService } from './language-preference.service';
 
 @Injectable({ providedIn: 'root' })
 export class ShellLanguageService {
-  private readonly languagePreferenceService = inject(LanguagePreferenceService);
+  private readonly languageCode = inject(LanguagePreferenceService).languageCode;
 
-  readonly languageCode = this.languagePreferenceService.languageCode;
-  readonly isLanguageConfirmed = this.languagePreferenceService.isLanguageConfirmed;
   readonly content = computed<LanguageShellPack>(() => this.getPack(this.languageCode()));
 
-  initializeFromStorage(): LanguageCode {
-    return this.languagePreferenceService.initializeFromStorage();
-  }
-
-  confirmLanguage(code: LanguageCode): void {
-    this.languagePreferenceService.confirmLanguage(code);
-  }
-
   getPack(code: LanguageCode): LanguageShellPack {
     return code === 'de' ? deShellLanguage : enShellLanguage;
   }

src/app/shared/icon/icons.ts

@@ -15,9 +15,10 @@ export const arrowRightIcon: SvgIcon = {
   path: 'M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l370.7 0-105.4 105.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z',
 };
 
-export const discordIcon: SvgIcon = {
+// Signal logo from Simple Icons (CC0 1.0).
-  viewBox: '0 0 576 512',
+export const signalIcon: SvgIcon = {
-  path: 'M492.5 69.8c-.2-.3-.4-.6-.8-.7-38.1-17.5-78.4-30-119.7-37.1-.4-.1-.8 0-1.1 .1s-.6 .4-.8 .8c-5.5 9.9-10.5 20.2-14.9 30.6-44.6-6.8-89.9-6.8-134.4 0-4.5-10.5-9.5-20.7-15.1-30.6-.2-.3-.5-.6-.8-.8s-.7-.2-1.1-.2c-41.3 7.1-81.6 19.6-119.7 37.1-.3 .1-.6 .4-.8 .7-76.2 113.8-97.1 224.9-86.9 334.5 0 .3 .1 .5 .2 .8s.3 .4 .5 .6c44.4 32.9 94 58 146.8 74.2 .4 .1 .8 .1 1.1 0s.7-.4 .9-.7c11.3-15.4 21.4-31.8 30-48.8 .1-.2 .2-.5 .2-.8s0-.5-.1-.8-.2-.5-.4-.6-.4-.3-.7-.4c-15.8-6.1-31.2-13.4-45.9-21.9-.3-.2-.5-.4-.7-.6s-.3-.6-.3-.9 0-.6 .2-.9 .3-.5 .6-.7c3.1-2.3 6.2-4.7 9.1-7.1 .3-.2 .6-.4 .9-.4s.7 0 1 .1c96.2 43.9 200.4 43.9 295.5 0 .3-.1 .7-.2 1-.2s.7 .2 .9 .4c2.9 2.4 6 4.9 9.1 7.2 .2 .2 .4 .4 .6 .7s.2 .6 .2 .9-.1 .6-.3 .9-.4 .5-.6 .6c-14.7 8.6-30 15.9-45.9 21.8-.2 .1-.5 .2-.7 .4s-.3 .4-.4 .7-.1 .5-.1 .8 .1 .5 .2 .8c8.8 17 18.8 33.3 30 48.8 .2 .3 .6 .6 .9 .7s.8 .1 1.1 0c52.9-16.2 102.6-41.3 147.1-74.2 .2-.2 .4-.4 .5-.6s.2-.5 .2-.8c12.3-126.8-20.5-236.9-86.9-334.5zm-302 267.7c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.4 59.2-52.8 59.2zm195.4 0c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.2 59.2-52.8 59.2z',
+  viewBox: '0 0 24 24',
+  path: 'M12 0q-.934 0-1.83.139l.17 1.111a11 11 0 0 1 3.32 0l.172-1.111A12 12 0 0 0 12 0M9.152.34A12 12 0 0 0 5.77 1.742l.584.961a10.8 10.8 0 0 1 3.066-1.27zm5.696 0-.268 1.094a10.8 10.8 0 0 1 3.066 1.27l.584-.962A12 12 0 0 0 14.848.34M12 2.25a9.75 9.75 0 0 0-8.539 14.459c.074.134.1.292.064.441l-1.013 4.338 4.338-1.013a.62.62 0 0 1 .441.064A9.7 9.7 0 0 0 12 21.75c5.385 0 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25m-7.092.068a12 12 0 0 0-2.59 2.59l.909.664a11 11 0 0 1 2.345-2.345zm14.184 0-.664.909a11 11 0 0 1 2.345 2.345l.909-.664a12 12 0 0 0-2.59-2.59M1.742 5.77A12 12 0 0 0 .34 9.152l1.094.268a10.8 10.8 0 0 1 1.269-3.066zm20.516 0-.961.584a10.8 10.8 0 0 1 1.27 3.066l1.093-.268a12 12 0 0 0-1.402-3.383M.138 10.168A12 12 0 0 0 0 12q0 .934.139 1.83l1.111-.17A11 11 0 0 1 1.125 12q0-.848.125-1.66zm23.723.002-1.111.17q.125.812.125 1.66c0 .848-.042 1.12-.125 1.66l1.111.172a12.1 12.1 0 0 0 0-3.662M1.434 14.58l-1.094.268a12 12 0 0 0 .96 2.591l-.265 1.14 1.096.255.36-1.539-.188-.365a10.8 10.8 0 0 1-.87-2.35m21.133 0a10.8 10.8 0 0 1-1.27 3.067l.962.584a12 12 0 0 0 1.402-3.383zm-1.793 3.848a11 11 0 0 1-2.345 2.345l.664.909a12 12 0 0 0 2.59-2.59zm-19.959 1.1L.357 21.48a1.8 1.8 0 0 0 2.162 2.161l1.954-.455-.256-1.095-1.953.455a.675.675 0 0 1-.81-.81l.454-1.954zm16.832 1.769a10.8 10.8 0 0 1-3.066 1.27l.268 1.093a12 12 0 0 0 3.382-1.402zm-10.94.213-1.54.36.256 1.095 1.139-.266c.814.415 1.683.74 2.591.961l.268-1.094a10.8 10.8 0 0 1-2.35-.869zm3.634 1.24-.172 1.111a12.1 12.1 0 0 0 3.662 0l-.17-1.111q-.812.125-1.66.125a11 11 0 0 1-1.66-.125',
 };
 
 export const envelopeIcon: SvgIcon = {
@@ -25,9 +26,10 @@ export const envelopeIcon: SvgIcon = {
   path: 'M48 64c-26.5 0-48 21.5-48 48 0 15.1 7.1 29.3 19.2 38.4l208 156c17.1 12.8 40.5 12.8 57.6 0l208-156c12.1-9.1 19.2-23.3 19.2-38.4 0-26.5-21.5-48-48-48L48 64zM0 196L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-188-198.4 148.8c-34.1 25.6-81.1 25.6-115.2 0L0 196z',
 };
 
-export const githubIcon: SvgIcon = {
+// Gitea logo from Simple Icons (CC0 1.0).
-  viewBox: '0 0 512 512',
+export const giteaIcon: SvgIcon = {
-  path: 'M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM252.8 8c-138.7 0-244.8 105.3-244.8 244 0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1 100-33.2 167.8-128.1 167.8-239 0-138.7-112.5-244-251.2-244zM105.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z',
+  viewBox: '0 0 24 24',
+  path: 'M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z',
 };
 
 export const linkedinIcon: SvgIcon = {

src/assets/unoptimized/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2021 The Outfit Project Authors (https://github.com/Outfitio/Outfit-Fonts)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/assets/unoptimized/public.asc

@@ -1,91 +0,0 @@
------BEGIN PGP PUBLIC KEY BLOCK-----
-
-mQINBGoC8R8BEACq5XrqV728z2hYvEZCep8T3729VoFia70l7qoz1o6aDCovlIRG
-PGMpcRHin0rqI2pAVHha8bMJnm34JdlPY4Dk/KI31hwLNEoTw8xzfl+58ehEnSvG
-o1v3OkXC7bx4zxarFllo4/zgbiKRi1SihXZe/Ytonkm/OX0oHmwEsWlL4Gu2rX+p
-Wwg/ks+l6hJ9NiB3D+F9rGfryrFgFTzV90C+1P2bOn/4NXUrr50T92Dn9zXSA1oe
-k4ebnZ9df9uRlRaftNtcL/8nY7KGYr1tDBsgL2HWxknzhNoZQiFc0QJ5EjN4dz+s
-kkn2aKSlzlOzBGgDeCfk6xMAyLKEewoCtagD0Fo64Mg6W5nPa8lg9xG4soGXBC2d
-gUCyQPAcIw7sW71rawuFon12K+Sn02kZ0gHZVtCULh1Z66zTnw6D+fT2khbcAE85
-81tuBDVrfv5WjZtSH6t7FqHOmyvLDEPDpudJKOxxuVJfjpfhhXhK17K/8148zlJH
-Vmgar3Ilx/Ef0RerDD3boCXEWT0SRyFETY58iK1Vhu5hCojcn10cs/QK8X6RdQ6D
-Y2WtbQ7mebqFJWyetuV1ZAFDsNnXtonODBSvhHBtqzI4IL8hFZwiM6cgM3WqfGfk
-svTC5O1lePp0L/jrP0fiYjw8wv/f4wEKeM+0xOTkvXbFxlibLxZ9AS8NfQARAQAB
-tCNKdWxpYW4gTGVjaG5lciA8anVsaWFuQGxlY2huZXIudG9wPokCUQQTAQgAOxYh
-BJj6MPhfIDCnD0Wq6zzeot5UJLjnBQJqAvEfAhsDBQsJCAcCAiICBhUKCQgLAgQW
-AgMBAh4HAheAAAoJEDzeot5UJLjnBBYP/ilO+Fmxh3P9IUWC9MHi22RQUDTVUXFY
-5FZdRwcwISnZQiEO3OWcwUAPREL2LksWT18Hi+PQRsa/dHU7cePEKRVdfuBl0CU8
-P0aUdJA2/zFIAy7CdKZ8gnNcAkkb3xhuKcX1UPgzWP4N2E7qOEt/Vst4JFL8cU3T
-/MHQEq7iERtpLSXR/IcI+gcFKDxABYyb073W8rzt0CKAaLFjg2DXPHhFPKn5H6p4
-DvXHrKfa5F5YlO+hPKcSA2L73FOmMbB8sT6TVTgPmKce8c/nWfQq3oNF775k1vJk
-NBNB6Hy4cVjOOXBMxfAySWnBYaYHNzApXIyH6CUYesSWSY2wfkmlPNSstODah8Gd
-YT/DK+ATmjj6JMpM7ELKZvT5iZOaau7NS7bXn9DDiwttFgM9+lxbA6hq75NTMwLF
-PyLrl2Yne7y+jr9s4/v/1NxOjDwkpVyJFva4UPwR8RL93F+iomYzG3RTrjTV5j21
-+zxM1hdTtbmsdh8HQi9G4XF9QpG62W0uYmTgidfQvPvUDrF041yG2bc+tSh21Xcg
-EEnZuRxdKK4EtceJ20dUaG3PCy/oqg8fkGiBoHQJ3NtZDBGbYZIVXMz4mJzPOtPh
-3M/7GoodKkCSJ+KedngvgAFSY6QVJCeeW0H3bGpdTYXQIYt8JwEGuUt7yU8ucEsY
-NKz7VtAoYhHztCdKdWxpYW4gTGVjaG5lciA8ZnJhdWp1bGlhbkBsZWNobmVyLnRv
-cD6JAlEEEwEIADsWIQSY+jD4XyAwpw9Fqus83qLeVCS45wUCagL3pgIbAwULCQgH
-AgIiAgYVCgkICwIEFgIDAQIeBwIXgAAKCRA83qLeVCS45zqDD/9pHFvqCrqhF/HH
-xcwh3JbXzn8sEZ1vtbrQVrXeJsGo4NNpWem3B29ZVk3P2JHTVXEiBuzkBee+cd5a
-TfGTTY9c5HR1Z54j3ydFnCMUNIqqtB+WIeYNr+OU0oNHplLHZYj+MDutqP8MLZMX
-X400ITTd4nz7iZmc3cgREIFGbi8QuLRhNEIn6oNkPEqumRnKweLL3TqedyAEtG+k
-qsgDAMDb2LzOTWR+YLVM6g9zXmWI8fXxAC2Pda1IeTOCJd+GtldOkkbQjPLNuARi
-1uLjZav92vZ/Iw75TTAQzsM9eSuRHv1JxWjUbnNORoiGEQTvyyZ7VHWiQmOLKy8q
-z4OGAj2lpSgrSacqK9BD0CXi9y/DNVv1BR+akD5y77KTuF7n0d4E9dWrbr4DkLkx
-8ZKyLJfQX3Ma7A0uQkCEwF7epfAuWSGDvB9wCXKUtjyCb6gRMzNOu6JKHZ9pDdO1
-Hp8jGyOrs/4+Jx7RvzOeE4HlU8yv86qmjdEy7c1iJGKi3d4CQG5fVvVjZieIOhOv
-RUGTgS40CPAWoKD/SIejVvSjRgt6OMS75+/ZnqGZJX7DxWlbEsIDV455Kvitw21f
-WhTy8B+Hx+cbAJuRszEO1z3GGcIb61Sy4ctJZjn84wUXgJdspZtwP29a5zHfKH6x
-ap9z0lNZREN6G32L5txfvbqJ9js41rQqTGVjaG5lci1TeXN0ZW1zIDxhYnVzZUBs
-ZWNobmVyLXN5c3RlbXMuYXQ+iQJRBBMBCAA7FiEEmPow+F8gMKcPRarrPN6i3lQk
-uOcFAmoC978CGwMFCwkIBwICIgIGFQoJCAsCBBYCAwECHgcCF4AACgkQPN6i3lQk
-uOdFCA/9GU0NpoYiwajOL8tz+skzu9dZrqdRAgiDYam/iPgYEkqgisULkMBm67dk
-TKkJetWjK4zQ+raapRvr+pNMxwm0c88BxHCel+jcOacxOY+rBFKjZB+fVxB6aa0S
-epHLU/0gNEF1l325YtwgVgYvwBUaIos5yVnr2CJekWd5Kwijla92QoEsQb4nqAHc
-SP6BhTeqPmDPlVwKIXhb82IKRahQZwmB3RVw5XLa9/1ZjUpP9vdX/lxhTWlhcswd
-GgM3sQSLtW4THYUr+2esZHwO2+k9D00WiKWFuqOIqLZST3yg9UPdFxEOtGIAsdZ/
-eRcljDL/oNeZFT3H8oBbqJ9X1D26kYsVGbWfFbaJPi2Y7rST7eGOJnlPnOfKp9UA
-V3P8dIkQSgG++mY5S+TQhibZtceAkuAq/TUtKdk/OhiE9iNkWwwU24dxxNwQgp7u
-2WNEsLcW6LoTHW+62cFXHsFAzxy7o5QQPZ4PpCKzdgvLpbqohbIl/jfomYD8BAB1
-Yp/XgTGwSoFZ8zFoJ7Blbh7jXpfC4fyRMwzfFHryU8fAwRuVmIR8UFNI2lbzqjjw
-xtAagtUYQnml6bg6o8QMJnmwSbYY4C52fbXguCmqyDXK0L1olW/HjHzBGSx9ORBX
-04QektjQwcmM8CaM4Kq24H+EoN2Ys3C3UU8fqR8Hw821EefxzLS0K0xlY2huZXIt
-U3lzdGVtcyA8b2ZmaWNlQGxlY2huZXItc3lzdGVtcy5hdD6JAlEEEwEIADsWIQSY
-+jD4XyAwpw9Fqus83qLeVCS45wUCagL31QIbAwULCQgHAgIiAgYVCgkICwIEFgID
-AQIeBwIXgAAKCRA83qLeVCS451ArEACevHcb/8q6zTF/MPFb8BZNVj8x90D/yosN
-s9d9W2Gtj+NwGrroi1mvkLEvO2M5O4LLZHu2+mWV7Jfb8YuCADWEBEuwMXdxt5uj
-e9INi79MWTXhkgNYPKSd3ockmkPOMTTFoTBBh1Do2YLYO74M+91HeLRCxVn+dVWy
-hoWkUQWSGF8bPNRtW6pxCOFc2QnD0bkKer6UfIi9ZXD66ui5EaiKLg4T3XyrviYI
-LbDXFj1X92BzEc0ynThNN6e8zHezDiUrNdGzMK5FR55w/MC6j1rcths1SZhCxd7u
-gUnlzkIqLcOFUPsEBcYLc1kcODpGLTVEBFvy4WSkeUdc0zbl0ETl+3JaP8J3Lhv/
-USdhPdle3eBMA5xfgJGJ1XIljaAc9XCbDCIJ7RzWwE6+6t8rbPOaaR+cpt/rBHKq
-hZUyJdoGh/Ixi24EWgv3RGz6XIidgpNMUubU97k69sXJZcSQbKi6w/wUdwcgWRfF
-0dpiDg7pxthvhuqw+hPvKe0AF4TMrIPLhn7EzmauFNTKoowhvyHhdi5VOaI21Rkt
-yTAl+yQIV0pf3i8KcA7AjGuwXXoDU1lpCKcehJevnv6RUGNZr1SOKxwmGxxS+bFQ
-mDUByic2MmAqXY1+FU79YwolAOCe55npOaKNu4A21uizjTUFfjxBhdN71KGovN58
-MjYH3sEXQbkCDQRqAvEfARAAuden2frenqKhpwWJSBDBLMaOjop4oPzhrtdoG83j
-llqbF1uwXCHfa1C2c4HEg1AFxW1VToMSF7n4DKGyFZgNvbF3I43UeckofV7eQa4U
-5/hBvm1OWnJl3eqgz02o6VCuDjELMn0C2muYW+JKQDFmaJx9TbUvHst5HRZv5fhJ
-gG/0VibNZhJHCOICxseKkci4oz8J0Rrk/8GHsUcu34RSZ2XxMxAKd7o0QgRNn3dz
-P6BKEUfw3M4QEl/YTWZdcdWPfFACAqzBhE3uZpG1nqyeJ4PJvXhGkJwkQimYnbDL
-Wm+apl0QidmGyLh2ImxNlSC5PnXVEzpGCoOtSQ9Gfilm5txsyZSWYr7qDNN/dNay
-hTcWx2mx7z6CxG3sBMmQVJR755kuMebpaYdrLa4kTSvOZNJqhIStF/ra9YFHwQtx
-r/Fcw+MQlnP403JK2CKDBYgck4da0NePywj4Xv5BiE1+sq3NcGZDioFTm7egPjrp
-rZ100EPrSmMNZP5AwSk1pbjLunKtPSk950cUDcxNiZtX1bG/kzDxoAKm4uHR5xFm
-5hJDJwpBAjfliT/GBgomoHRf8+/sNpZ1/DkQXdh6KXYkDkHtFuqi2zkj7s8ubBja
-iWKH0mfYoXx8c9x4SuxLL4bAaW9z1tLvgymOfIYtTNVL0/qBPCwdZ/jmEPg0uf9i
-FHUAEQEAAYkCNgQYAQgAIBYhBJj6MPhfIDCnD0Wq6zzeot5UJLjnBQJqAvEfAhsM
-AAoJEDzeot5UJLjn33gP/RfRzcPheGBN+e8mNRYZ9AzNGvRfXz5UXkYpYeSOk7OW
-YajW7y/xSuifiHW2xfLpHPYcj+6kqEpEzzPUDUq2oADBkYMMy4IpGKyy6bZBg3CU
-trbAUrHPUXuO3F7m86SMHWR+5Lb3EucomFQDPRCDJzlv4huWFzltPGyAfGe7jgl4
-HuUZPkH/vP32FG73L2+3qsi54FdI7GUkOy/2F7jhaxk44ByiQEJDR7BhvbNNCQXy
-M2LkR5BKMUR9j5dIp4lLULGhhOuwGxTgrlS2ExGPcppLo8Rs9EXPAxxfpuPA64e4
-w/o6r1ougtcRjecuARqco2cWalIHfXJtOZiYGqAlLuqleMWhjTv/mJYf3o+FsbP5
-b9Fi6+bcS9m9HVi06hR/qZsV8Q1dNPkRxotdKLw+/z9yAaXiTRvBY+knq+ImwkgM
-rItfmohiXkwOeWpB76m4pzfD/fE4wMEguZgZMVN6iPwYxOL8sFZVSarEq0UqG9fR
-eqPMEfwjLe5ADQjuDkxMjA9Zc8tGndNBJEucNDi/Rn17A2uP1qOlFaVln/NWLYwn
-Gsjhzbgq9RN22BxGbSmYboLOcCLJ3eAooI6qh02U920yEDEd4lPPodDSw5wj3Sxl
-hbuSi9A8NgoBf0QYnVnCOi2Yw81ZZjkwmkIa15NEZNFRDSwjvfbiDgDHpJ7jDskz
-=kK3g
------END PGP PUBLIC KEY BLOCK-----

src/global.ts

@@ -3,8 +3,12 @@ import type { Global } from './global.types';
 export const global: Global = {
   firstname: 'Julian',
   lastname: 'Lechner',
-  contactMail: 'fraujulian@lechner.top',
+  siteUrl: 'https://fraujulian.xyz',
+  contactMail: 'julian@lechner.top',
   abuseMail: 'abuse@lechner-systems.at',
+  linkedinSkillsUrl: 'https://www.linkedin.com/in/julianlechner2009/details/skills/',
+  signalUrl:
+    'https://signal.me/#eu/4c3PvAZdPSjVHLJ1zJJ6HChUE_T_HTDyEraQMwK6TRNyQSZCs5ZK-KKS00T9na-0',
   contactPhone: '+43 660 9254001',
   hrefContactPhone: '+436609254001',
   birthdate: '2009-03-03',
@@ -13,7 +17,6 @@ export const global: Global = {
     houseNumber: 9,
     zip: 3380,
     city: 'Pöchlarn',
-    state: 'Niederösterreich',
     country: 'Österreich',
   },
 };

src/global.types.ts

@@ -3,15 +3,17 @@ export interface ImprintData {
   houseNumber: number;
   zip: number;
   city: string;
-  state: string;
   country: string;
 }
 
 export interface Global {
   firstname: string;
   lastname: string;
+  siteUrl: string;
   contactMail: string;
   abuseMail: string;
+  linkedinSkillsUrl: string;
+  signalUrl: string;
   contactPhone: string;
   hrefContactPhone: string;
   birthdate: string;

src/index.html

@@ -13,9 +13,51 @@
     <base href="/" />
 
     <link rel="icon" type="image/webp" sizes="128x128" href="assets/optimized/portrait/me-128.webp" />
-    <title>Lechner Julian</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/optimized/icons/favicon-32.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/optimized/icons/apple-touch-icon.png" />
+    <title>Julian Lechner</title>
+    <link rel="preload" as="image" fetchpriority="high" href="assets/optimized/background.webp" />
+    <link
+      rel="preload"
+      as="image"
+      fetchpriority="high"
+      href="assets/optimized/portrait/me.webp"
+      imagesrcset="assets/optimized/portrait/me-320.webp 320w, assets/optimized/portrait/me-384.webp 384w, assets/optimized/portrait/me-480.webp 480w, assets/optimized/portrait/me.webp 640w"
+      imagesizes="(max-width: 700px) calc(100vw - 4rem), (max-width: 900px) min(calc(100vw - 9rem), 560px), 320px"
+    />
+
+    <meta property="og:type" content="profile" />
+    <meta property="og:site_name" content="Julian Lechner" />
+    <meta property="og:image" content="https://fraujulian.xyz/assets/optimized/icons/og-image.jpg" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content="Portrait of Julian Lechner" />
+    <meta property="profile:first_name" content="Julian" />
+    <meta property="profile:last_name" content="Lechner" />
+    <meta name="twitter:card" content="summary_large_image" />
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Person",
+        "name": "Julian Lechner",
+        "alternateName": "FrauJulian",
+        "url": "https://fraujulian.xyz/",
+        "image": "https://fraujulian.xyz/assets/optimized/icons/og-image.jpg",
+        "jobTitle": "Full-Stack Developer",
+        "address": { "@type": "PostalAddress", "addressCountry": "AT" },
+        "sameAs": ["https://git.lechner-systems.at/fraujulian", "https://www.linkedin.com/in/julianlechner2009/"]
+      }
+    </script>
   </head>
   <body>
+    <noscript>
+      <div class="page-shell footer-shell">
+        <div class="panel noscript-panel">
+          <p class="warning-text">Please enable JavaScript for the full experience. / Bitte aktiviere JavaScript, um alles zu sehen.</p>
+        </div>
+      </div>
+    </noscript>
     <app-root></app-root>
   </body>
 </html>

src/languages/de.ts

@@ -1,27 +1,11 @@
 import type { LanguagePack } from './language.types';
 
 export const deLanguage: LanguagePack = {
-  app: {
-    selectorTitle: 'Sprache auswählen',
-    changeLanguage: 'Sprache',
-    changeLanguageAriaLabel: 'Sprache ändern',
-    closeSelector: 'Sprachauswahl schließen',
-    languageEnglish: 'Englisch',
-    languageGerman: 'Deutsch',
-  },
-  footer: {
-    noscriptMessage: 'Bitte aktiviere JavaScript um alles zu sehen.',
-    imprintLink: 'Impressum',
-  },
   home: {
     portfolioEyebrow: 'Portfolio',
     heroIntro:
       'Ich entwickle zuverlässige Systeme, übersichtliche Benutzeroberflächen und praktische digitale Lösungen, die sich in realen Kundensystemen bewähren.',
     contactTitle: 'Kontaktiere mich',
-    openPgpTitle: 'OpenPGP',
-    openPgpDescription: 'Verwende meinen Public Key für verschlüsselte Kommunikation.',
-    openPgpDownload: 'Public Key herunterladen',
-    openPgpFingerprintLabel: 'Fingerprint',
     viewProjects: 'Projekte',
     aboutMe: 'Über mich',
     nextHighlightAriaLabel: 'Nächstes Bild anzeigen',
@@ -45,79 +29,87 @@ export const deLanguage: LanguagePack = {
     getInTouch: 'Kontaktiere mich!',
     projectsEyebrow: 'Aktuelle Jobs & Projekte',
     openProjectPrefix: 'Projekt öffnen',
-    projectLanguagesAriaLabel: 'Projekt-Technologien',
+    projectIconAltSuffix: 'Logo',
-    fallbackBioLabel: 'Tech Stack',
+    mailAriaLabel: 'E-Mail senden',
+    phoneAriaLabel: 'Telefonnummer anrufen',
+    signalAriaLabel: 'Nachricht über Signal',
+    giteaAriaLabel: 'Gitea-Profil',
+    linkedinAriaLabel: 'LinkedIn-Profil',
+    skillsLabel: 'Kenntnisse',
+    skillsLinkAriaLabel: 'Alle Kenntnisse auf LinkedIn ansehen',
   },
   imprint: {
     legalEyebrow: 'Rechtliches',
     title: 'Impressum & Datenschutz',
     intro:
-      'Rechtliche Informationen nach österreichischem Recht sowie Datenschutzinformationen gemäß DSGVO für diese Website von {{firstname}} {{lastname}}, handelnd unter Lechner Systems.',
+      'Rechtliche Informationen nach österreichischem Recht sowie Datenschutzinformationen gemäß DSGVO für alle Websites von {{firstname}} {{lastname}}.',
     backToPortfolio: 'Zurück zum Portfolio',
     provider: 'Anbieter',
     directContact: 'Direkter Kontakt',
     phone: 'Telefon',
     contact: 'E-Mail',
     abuse: 'Abuse E-Mail',
-    scopeEyebrow: 'Geltungsbereich',
-    scopeTitle: 'Geltungsbereich dieser Hinweise',
-    scopeLeft:
-      'Diese Angaben gelten für diese Portfolio-Website und für Inhalte, die unmittelbar über diese Domain bereitgestellt werden. Für verlinkte externe Websites gelten die Hinweise der jeweiligen Betreiber.',
-    scopeRight:
-      'Die Website dient der Darstellung von Projekten, technischen Dienstleistungen und Kontaktmöglichkeiten im Bereich Softwareentwicklung, IT und digitale Systeme. Ein Vertragsabschluss erfolgt nicht automatisch über diese Website.',
     privacyEyebrow: 'Datenschutz',
-    privacyTitle: 'Datenschutz & Datenverarbeitung',
+    privacyTitle: 'Keine Datensammlung',
-    privacyLeftParagraphs: [
+    privacyLeft:
-      'Verantwortlicher für die Datenverarbeitung im Sinne der Datenschutz-Grundverordnung (DSGVO) ist {{firstname}} {{lastname}}, erreichbar unter {{contactMail}} sowie telefonisch unter {{contactPhone}}.',
+      'Diese Website sammelt und verarbeitet keine personenbezogenen Daten. Ausgenommen sind nur Informationen, die beim Aufruf einer Website technisch bedingt übermittelt werden, etwa IP-Adresse, Datum und Uhrzeit, aufgerufene Seite, Referrer sowie Browser- und Betriebssysteminformationen (User-Agent).',
-      'Diese Website verwendet nach aktuellem Stand kein eigenes Tracking, keine Analyse-Cookies, keine Marketing-Cookies und keine langfristigen persönlichen Nutzungsprofile.',
+    privacyRight:
-      'Beim Aufruf der Website können technisch notwendige Server- und Verbindungsdaten verarbeitet werden, insbesondere IP-Adresse, Datum und Uhrzeit des Zugriffs, angeforderte Ressource, übertragene Datenmenge, Browser- und Betriebssysteminformationen sowie Referrer, soweit diese Daten vom Browser übermittelt werden.',
+      'Diese Daten dienen ausschließlich dem sicheren und stabilen Betrieb der Website (Art. 6 Abs. 1 lit. f DSGVO). Es gibt kein Tracking und keine Cookies. Die gewählte Sprache wird nur lokal in deinem Browser gespeichert.',
-    ],
-    privacyRightParagraphs: [
-      'Die Verarbeitung erfolgt zur Bereitstellung der Website, zur Sicherstellung der technischen Stabilität und Sicherheit, zur Missbrauchsprävention, zur Fehleranalyse sowie zur Bearbeitung von Kontaktanfragen. Rechtsgrundlagen sind insbesondere Art. 6 Abs. 1 lit. f DSGVO und, bei vorvertraglicher Kommunikation, Art. 6 Abs. 1 lit. b DSGVO.',
-      'Wenn du per E-Mail oder Telefon Kontakt aufnimmst, werden die von dir übermittelten Angaben zur Bearbeitung der Anfrage und zur weiteren Kommunikation verarbeitet. Eine Weitergabe personenbezogener Daten erfolgt nur, wenn sie gesetzlich erforderlich ist, zur Rechtsdurchsetzung benötigt wird oder von dir veranlasst wurde.',
-      'Personenbezogene Daten werden nur so lange gespeichert, wie es für die genannten Zwecke, gesetzliche Aufbewahrungspflichten oder die Abwehr und Durchsetzung rechtlicher Ansprüche erforderlich ist.',
-    ],
     rightsEyebrow: 'Rechte',
-    rightsTitle: 'Betroffenenrechte & Beschwerden',
+    rightsTitle: 'Deine Rechte nach der DSGVO',
     rightsLeft:
-      'Betroffene Personen haben im Rahmen der gesetzlichen Voraussetzungen Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit und Widerspruch. Soweit eine Verarbeitung auf Einwilligung beruht, kann diese Einwilligung jederzeit mit Wirkung für die Zukunft widerrufen werden.',
+      'Du hast das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit und Widerspruch. Anfragen richtest du an die oben genannte E-Mail-Adresse.',
     rightsRight:
-      'Beschwerden können bei der österreichischen Datenschutzbehörde eingebracht werden: Barichgasse 40-42, 1030 Wien, E-Mail dsb@dsb.gv.at, Website dsb.gv.at.',
+      'Beschwerden richtest du an die Österreichische Datenschutzbehörde, Barichgasse 40-42, 1030 Wien, dsb@dsb.gv.at.',
     copyrightEyebrow: 'Urheberrecht',
-    copyrightTitle: 'Urheberrecht, externe Links & anwendbares Recht',
+    copyrightTitle: 'Urheberrecht & Haftung',
     copyrightLeftParagraphs: [
-      'Alle Inhalte dieser Website, einschließlich Texte, Bilder, Grafiken, Fotos, Layouts, Quellcode und sonstige Werke, sind urheberrechtlich geschützt, sofern nicht anders angegeben.',
+      'Alle Inhalte aller Websites von {{firstname}} {{lastname}}, insbesondere Texte, Bilder, Fotos, Grafiken und Design, sind urheberrechtlich geschützt. Alle Rechte vorbehalten.',
-      'Jede Nutzung außerhalb der gesetzlichen Schranken des Urheberrechts benötigt eine vorherige schriftliche Zustimmung des jeweiligen Rechteinhabers.',
+      'Jede Vervielfältigung, Bearbeitung, Verbreitung oder sonstige Nutzung ist ohne meine vorherige schriftliche Zustimmung untersagt. Für den Quellcode gilt ausschließlich die im Repository angegebene Lizenz.',
     ],
     copyrightRightParagraphs: [
-      'Diese Website kann Links zu externen Websites enthalten. Für deren Inhalte, Datenschutzpraxis und technische Sicherheit sind ausschließlich die jeweiligen Betreiber verantwortlich.',
+      'Für Inhalte verlinkter externer Websites übernehme ich keine Haftung. Dafür sind ausschließlich deren Betreiber verantwortlich.',
-      'Es gilt ausschließlich österreichisches Recht, sofern keine zwingenden Verbraucherschutzbestimmungen etwas anderes vorgeben.',
+      'Es gilt österreichisches Recht, soweit zwingende Verbraucherschutzvorschriften nichts anderes vorsehen.',
     ],
   },
   bioTextsList: [
-    { label: 'Sprachen', value: 'C#' },
+    'C#',
-    { label: 'Sprachen', value: 'TypeScript' },
+    'TypeScript',
-    { label: 'Sprachen', value: 'Bash' },
+    'JavaScript',
-    { label: 'Frontend', value: 'Angular' },
+    'Java',
-    { label: 'Frontend', value: 'WPF' },
+    'SQL',
-    { label: 'Frontend', value: 'Avalonia' },
+    'Bash',
-    { label: 'Backend', value: '.NET' },
+    'Windows PowerShell',
-    { label: 'Backend', value: 'ASP.NET Core' },
+    '.NET Core',
-    { label: 'Backend', value: 'Entity Framework Core' },
+    '.NET-Framework',
-    { label: 'Backend', value: 'Node.js' },
+    'ASP.NET',
-    { label: 'Backend', value: 'REST' },
+    'Entity Framework (EF) Core',
-    { label: 'Backend', value: 'Swagger' },
+    'Windows Presentation Foundation (WPF)',
-    { label: 'Datenbank', value: 'Microsoft SQL' },
+    'Model View ViewModel (MVVM)',
-    { label: 'Datenbank', value: 'MariaDB' },
+    'Model View Controller (MVC)',
-    { label: 'DevOps', value: 'Git' },
+    'Webentwicklung',
-    { label: 'DevOps', value: 'GitHub & GitLab' },
+    'AngularJS',
-    { label: 'DevOps', value: 'Azure DevOps' },
+    'Node.js',
-    { label: 'DevOps', value: 'Docker' },
+    'Microsoft SQL Server',
-    { label: 'DevOps', value: 'Ubuntu' },
+    'MariaDB',
-    { label: 'DevOps', value: 'Arch' },
+    'Git',
-    { label: 'Deklarative Sprachen', value: 'XAML' },
+    'GitHub',
-    { label: 'Deklarative Sprachen', value: 'YAML' },
+    'GitLab',
-    { label: 'Deklarative Sprachen', value: 'Markdown' },
+    'Azure DevOps',
+    'Continuous Integration und Continuous Delivery (CI/CD)',
+    'Systemadministration',
+    'Linux-Server',
+    'Windows-Server',
+    'Proxmox',
+    'E-Mail-Sicherheit & Authentifizierung: SPF, DKIM, DMARC, DNSSEC/DANE & MTA-STS',
+    'Künstliche Intelligenz (KI)',
+    'KI-Agenten',
+    'Anthropic Claude',
+    'OpenAI Codex',
+    'Agile',
+    'Scrum',
+    'Projektmanagement',
+    'Projektkommunikation',
   ],
   portraitHighlights: [
     {
@@ -170,24 +162,13 @@ export const deLanguage: LanguagePack = {
       imageHeight: 480,
       text: 'Reisen',
     },
-    {
-      image: 'assets/optimized/portrait/culture.webp',
-      imageSrcset:
-        'assets/optimized/portrait/culture-320.webp 320w, assets/optimized/portrait/culture-384.webp 384w, assets/optimized/portrait/culture-480.webp 480w, assets/optimized/portrait/culture.webp 640w',
-      imageSizes:
-        '(max-width: 700px) calc(100vw - 4rem), (max-width: 900px) min(calc(100vw - 9rem), 560px), 320px',
-      imageWidth: 640,
-      imageHeight: 482,
-      text: 'Kultur',
-    },
   ],
   projects: [
     {
       title: 'SobIT GmbH',
       link: 'https://sobit.at/',
       description:
-        'Ich arbeite hauptsächlich für das wiener Unternehmen namens SobIT GmbH. Die Firma ist ein Tochter-Unternehmen des Wiener Sozialdienste. Wir entwickeln Software für den Gesundheitsbereich. - Entwicklung moderner Desktop-, Mobile- und Webanwendungen zur Unterstützung der Mobilen Pflege.',
+        'Ich arbeite hauptsächlich für die SobIT GmbH aus Wien, ein Tochterunternehmen der Wiener Sozialdienste. Wir entwickeln Software für den Gesundheitsbereich: moderne Desktop-, Mobile- und Webanwendungen zur Unterstützung der mobilen Pflege.',
-      skills: ['TypeScript', 'C#', 'Microsoft SQL', 'WPF', 'YML/XML'],
       icon: 'assets/optimized/logos/sobit.webp',
       iconSrcset:
         'assets/optimized/logos/sobit-64.webp 64w, assets/optimized/logos/sobit-128.webp 128w, assets/optimized/logos/sobit.webp 216w',
@@ -199,7 +180,6 @@ export const deLanguage: LanguagePack = {
       link: 'https://www.synhost.de/',
       description:
         'Ein Hosting-Dienstleister von GERLACH SYSTEMS, für die ich Schnittstellen zwischen einzelnen Systemen entwickle und technischen Support mache.',
-      skills: ['TypeScript', 'MariaDB', 'YML'],
       icon: 'assets/optimized/logos/synhost.webp',
       iconSrcset:
         'assets/optimized/logos/synhost-64.webp 64w, assets/optimized/logos/synhost-128.webp 128w, assets/optimized/logos/synhost.webp 216w',
@@ -213,7 +193,6 @@ export const deLanguage: LanguagePack = {
       link: 'https://www.synradio.de/',
       description:
         'Ein Internetradio, auch unter der Verwaltung von GERLACH SYSTEMS, für den ich die technische Umsetzung und Betreuung der digitalen Plattformen übernehme — Website, Bots und Plugins für Sprachchats und Spiele.',
-      skills: ['TypeScript', 'Angular', 'FFmpeg', 'YML'],
       icon: 'assets/optimized/logos/synradio.webp',
       iconSrcset:
         'assets/optimized/logos/synradio-64.webp 64w, assets/optimized/logos/synradio-128.webp 128w, assets/optimized/logos/synradio.webp 216w',
@@ -225,7 +204,6 @@ export const deLanguage: LanguagePack = {
       link: 'https://git.lechner-systems.at/fraujulian/Discord-Audio-Stream',
       description:
         'Eine TypeScript-Library für Discord, die Audiowiedergabe einfacher macht, mit Fokus auf stabile 24/7-Streams ohne Unterbrechungen.',
-      skills: ['TypeScript', 'YML'],
       icon: 'assets/optimized/logos/discord.webp',
       iconSrcset:
         'assets/optimized/logos/discord-64.webp 64w, assets/optimized/logos/discord-128.webp 128w, assets/optimized/logos/discord.webp 216w',
@@ -237,10 +215,9 @@ export const deLanguage: LanguagePack = {
       link: '#',
       description:
         'Diese Portfolio-Website, die du gerade anschaust, ist eines meiner aktiv gepflegten Projekte. 😁',
-      skills: ['TypeScript', 'Angular', 'YML'],
       icon: 'assets/optimized/portrait/me.webp',
       iconSrcset:
-        'assets/optimized/portrait/me-64.webp 64w, assets/optimized/portrait/me-128.webp 128w, assets/optimized/portrait/me.webp 216w',
+        'assets/optimized/portrait/me-128.webp 128w, assets/optimized/portrait/me-320.webp 320w',
       iconSizes: '(max-width: 700px) 64px, 108px',
       iconWidth: 320,
       iconHeight: 385,
@@ -251,7 +228,6 @@ export const deLanguage: LanguagePack = {
       link: 'https://tauchertreff-mostviertel.at/',
       description:
         'Ich unterstütze außerdem meinen lokalen Tauchverein, indem ich die digitale Infrastruktur entwickle, aufbaue und auch betreibe — E-Mail, Website, Cloud-Dienste und alles, was dazugehört.',
-      skills: ['TypeScript', 'MariaDB', 'Angular', 'YML'],
       icon: 'assets/optimized/logos/tauchertreff.webp',
       iconSrcset:
         'assets/optimized/logos/tauchertreff-64.webp 64w, assets/optimized/logos/tauchertreff-128.webp 128w, assets/optimized/logos/tauchertreff.webp 216w',

src/languages/en.ts

@@ -1,27 +1,11 @@
 import type { LanguagePack } from './language.types';
 
 export const enLanguage: LanguagePack = {
-  app: {
-    selectorTitle: 'Select language',
-    changeLanguage: 'Language',
-    changeLanguageAriaLabel: 'Change language',
-    closeSelector: 'Close language selection',
-    languageEnglish: 'English',
-    languageGerman: 'German',
-  },
-  footer: {
-    noscriptMessage: 'Please enable JavaScript for the full experience.',
-    imprintLink: 'Imprint',
-  },
   home: {
     portfolioEyebrow: 'Portfolio',
     heroIntro:
       'I build reliable systems, clean interfaces, and practical digital solutions that actually hold up in production.',
     contactTitle: 'Contact me',
-    openPgpTitle: 'OpenPGP',
-    openPgpDescription: 'Download my public key for encrypted communication.',
-    openPgpDownload: 'Download public key',
-    openPgpFingerprintLabel: 'Fingerprint',
     viewProjects: 'View projects',
     aboutMe: 'About me',
     nextHighlightAriaLabel: 'Show next image',
@@ -45,79 +29,87 @@ export const enLanguage: LanguagePack = {
     getInTouch: 'Get in touch!',
     projectsEyebrow: 'Current Jobs & Projects',
     openProjectPrefix: 'Open project',
-    projectLanguagesAriaLabel: 'Project languages',
+    projectIconAltSuffix: 'logo',
-    fallbackBioLabel: 'my stack',
+    mailAriaLabel: 'Send an email',
+    phoneAriaLabel: 'Call phone number',
+    signalAriaLabel: 'Message on Signal',
+    giteaAriaLabel: 'Gitea profile',
+    linkedinAriaLabel: 'LinkedIn profile',
+    skillsLabel: 'Skills',
+    skillsLinkAriaLabel: 'View all skills on LinkedIn',
   },
   imprint: {
     legalEyebrow: 'Legal',
     title: 'Imprint & Privacy',
     intro:
-      'Legal information under Austrian law and privacy information under the GDPR for this website operated by {{firstname}} {{lastname}}, trading as Lechner Systems.',
+      'Legal information under Austrian law and privacy information under the GDPR for all websites operated by {{firstname}} {{lastname}}.',
     backToPortfolio: 'Back to portfolio',
     provider: 'Provider',
     directContact: 'Direct Contact',
     phone: 'Phone',
     contact: 'Email',
     abuse: 'Abuse Email',
-    scopeEyebrow: 'Scope',
-    scopeTitle: 'Scope Of These Notices',
-    scopeLeft:
-      'These notices apply to this portfolio website and to content made available directly through this domain. Linked third-party websites are subject to the notices of their respective operators.',
-    scopeRight:
-      'The website presents projects, technical services, and contact options in the field of software engineering, IT, and digital systems. No contract is concluded automatically through this website.',
     privacyEyebrow: 'Privacy',
-    privacyTitle: 'Privacy And Data Processing',
+    privacyTitle: 'No Data Collection',
-    privacyLeftParagraphs: [
+    privacyLeft:
-      'The controller for data processing within the meaning of the General Data Protection Regulation (GDPR) is {{firstname}} {{lastname}}, reachable at {{contactMail}} and by phone at {{contactPhone}}.',
+      'This website does not collect or process personal data. The only exception is information that is technically transmitted when a website is accessed, such as IP address, date and time, requested page, referrer, and browser and operating system information (user agent).',
-      'As currently implemented, this website does not use its own tracking, analytics cookies, marketing cookies, or long-term personal usage profiling.',
+    privacyRight:
-      'When the website is accessed, technically necessary server and connection data may be processed, especially IP address, access date and time, requested resource, transferred data volume, browser and operating system information, and referrer where this data is transmitted by the browser.',
+      'This data is used solely to operate the website securely and reliably (Art. 6(1)(f) GDPR). There is no tracking and there are no cookies. Your chosen language is stored only locally in your browser.',
-    ],
-    privacyRightParagraphs: [
-      'Processing takes place to provide the website, maintain technical stability and security, prevent abuse, analyze errors, and handle contact requests. The legal bases include Art. 6(1)(f) GDPR and, for pre-contractual communication, Art. 6(1)(b) GDPR.',
-      'If you contact me by email or phone, the information you provide is processed to handle your request and continue communication. Personal data is disclosed only where legally required, needed for legal claims, or initiated by you.',
-      'Personal data is stored only as long as necessary for the stated purposes, statutory retention duties, or the establishment, exercise, or defense of legal claims.',
-    ],
     rightsEyebrow: 'Rights',
-    rightsTitle: 'Data Subject Rights And Complaints',
+    rightsTitle: 'Your Rights Under The GDPR',
     rightsLeft:
-      'Subject to statutory requirements, data subjects have rights of access, rectification, erasure, restriction of processing, data portability, and objection. Where processing is based on consent, that consent may be withdrawn at any time with effect for the future.',
+      'You have the right of access, rectification, erasure, restriction of processing, data portability, and objection. Send requests to the email address listed above.',
     rightsRight:
-      'Complaints can be submitted to the Austrian Data Protection Authority: Barichgasse 40-42, 1030 Vienna, email dsb@dsb.gv.at, website dsb.gv.at.',
+      'Complaints can be filed with the Austrian Data Protection Authority, Barichgasse 40-42, 1030 Vienna, dsb@dsb.gv.at.',
     copyrightEyebrow: 'Copyright',
-    copyrightTitle: 'Copyright, External Links, And Applicable Law',
+    copyrightTitle: 'Copyright & Liability',
     copyrightLeftParagraphs: [
-      'All content on this website, including texts, images, graphics, photographs, layouts, source code, and other works, is protected by copyright unless stated otherwise.',
+      'All content on all websites operated by {{firstname}} {{lastname}}, in particular texts, images, photographs, graphics, and design, is protected by copyright. All rights reserved.',
-      'Any use beyond statutory exceptions requires prior written consent of the respective rights holder.',
+      'Any reproduction, modification, distribution, or other use without my prior written consent is prohibited. The source code is governed solely by the license stated in its repository.',
     ],
     copyrightRightParagraphs: [
-      'This website may contain links to third-party websites. Their operators are solely responsible for their contents, privacy practices, and technical security.',
+      'I accept no liability for the content of linked external websites. Their operators are solely responsible for it.',
-      'Austrian law applies exclusively, unless mandatory consumer protection provisions require otherwise.',
+      'Austrian law applies, unless mandatory consumer protection provisions provide otherwise.',
     ],
   },
   bioTextsList: [
-    { label: 'Languages', value: 'C#' },
+    'C#',
-    { label: 'Languages', value: 'TypeScript' },
+    'TypeScript',
-    { label: 'Languages', value: 'Bash' },
+    'JavaScript',
-    { label: 'Frontend', value: 'Angular' },
+    'Java',
-    { label: 'Frontend', value: 'WPF' },
+    'SQL',
-    { label: 'Frontend', value: 'Avalonia' },
+    'Bash',
-    { label: 'Backend', value: '.NET' },
+    'Windows PowerShell',
-    { label: 'Backend', value: 'ASP.NET Core' },
+    '.NET Core',
-    { label: 'Backend', value: 'Entity Framework Core' },
+    '.NET Framework',
-    { label: 'Backend', value: 'Node.js' },
+    'ASP.NET',
-    { label: 'Backend', value: 'REST' },
+    'Entity Framework (EF) Core',
-    { label: 'Backend', value: 'Swagger' },
+    'Windows Presentation Foundation (WPF)',
-    { label: 'Database', value: 'Microsoft SQL' },
+    'Model View ViewModel (MVVM)',
-    { label: 'Database', value: 'MariaDB' },
+    'Model View Controller (MVC)',
-    { label: 'DevOps', value: 'Git' },
+    'Web Development',
-    { label: 'DevOps', value: 'GitHub & GitLab' },
+    'AngularJS',
-    { label: 'DevOps', value: 'Azure DevOps' },
+    'Node.js',
-    { label: 'DevOps', value: 'Docker' },
+    'Microsoft SQL Server',
-    { label: 'DevOps', value: 'Ubuntu' },
+    'MariaDB',
-    { label: 'DevOps', value: 'Arch' },
+    'Git',
-    { label: 'Declarative Languages', value: 'XAML' },
+    'GitHub',
-    { label: 'Declarative Languages', value: 'YAML' },
+    'GitLab',
-    { label: 'Declarative Languages', value: 'Markdown' },
+    'Azure DevOps',
+    'Continuous Integration and Continuous Delivery (CI/CD)',
+    'System Administration',
+    'Linux Server',
+    'Windows Server',
+    'Proxmox',
+    'Email Security & Authentication: SPF, DKIM, DMARC, DNSSEC/DANE & MTA-STS',
+    'Artificial Intelligence (AI)',
+    'AI Agents',
+    'Anthropic Claude',
+    'OpenAI Codex',
+    'Agile',
+    'Scrum',
+    'Project Management',
+    'Project Communication',
   ],
   portraitHighlights: [
     {
@@ -170,16 +162,6 @@ export const enLanguage: LanguagePack = {
       imageHeight: 480,
       text: 'Traveling',
     },
-    {
-      image: 'assets/optimized/portrait/culture.webp',
-      imageSrcset:
-        'assets/optimized/portrait/culture-320.webp 320w, assets/optimized/portrait/culture-384.webp 384w, assets/optimized/portrait/culture-480.webp 480w, assets/optimized/portrait/culture.webp 640w',
-      imageSizes:
-        '(max-width: 700px) calc(100vw - 4rem), (max-width: 900px) min(calc(100vw - 9rem), 560px), 320px',
-      imageWidth: 640,
-      imageHeight: 482,
-      text: 'Culture',
-    },
   ],
   projects: [
     {
@@ -187,7 +169,6 @@ export const enLanguage: LanguagePack = {
       link: 'https://sobit.at/',
       description:
         'I primarily work for SobIT GmbH, a Vienna-based subsidiary of Wiener Sozialdienste. We develop software for the healthcare sector, focusing on modern desktop, mobile, and web applications that support mobile care services.',
-      skills: ['TypeScript', 'C#', 'Microsoft SQL', 'WPF', 'YML/XML'],
       icon: 'assets/optimized/logos/sobit.webp',
       iconSrcset:
         'assets/optimized/logos/sobit-64.webp 64w, assets/optimized/logos/sobit-128.webp 128w, assets/optimized/logos/sobit.webp 216w',
@@ -199,7 +180,6 @@ export const enLanguage: LanguagePack = {
       link: 'https://www.synhost.de/',
       description:
         'A hosting service provider of GERLACH SYSTEMS, for whom I develop interfaces between individual systems and provide technical support.',
-      skills: ['TypeScript', 'MariaDB', 'YML'],
       icon: 'assets/optimized/logos/synhost.webp',
       iconSrcset:
         'assets/optimized/logos/synhost-64.webp 64w, assets/optimized/logos/synhost-128.webp 128w, assets/optimized/logos/synhost.webp 216w',
@@ -213,7 +193,6 @@ export const enLanguage: LanguagePack = {
       link: 'https://www.synradio.de/',
       description:
         'An online radio project, also operated by GERLACH SYSTEMS, where I build and maintain the technical side of its digital presence — including the website, bots, and plugins for voice chats and games.',
-      skills: ['TypeScript', 'Angular', 'FFmpeg', 'YML'],
       icon: 'assets/optimized/logos/synradio.webp',
       iconSrcset:
         'assets/optimized/logos/synradio-64.webp 64w, assets/optimized/logos/synradio-128.webp 128w, assets/optimized/logos/synradio.webp 216w',
@@ -225,7 +204,6 @@ export const enLanguage: LanguagePack = {
       link: 'https://git.lechner-systems.at/fraujulian/Discord-Audio-Stream',
       description:
         'A TypeScript library for Discord that simplifies audio playback, with a focus on stable 24/7 streaming without interruptions.',
-      skills: ['TypeScript', 'YML'],
       icon: 'assets/optimized/logos/discord.webp',
       iconSrcset:
         'assets/optimized/logos/discord-64.webp 64w, assets/optimized/logos/discord-128.webp 128w, assets/optimized/logos/discord.webp 216w',
@@ -237,10 +215,9 @@ export const enLanguage: LanguagePack = {
       link: '',
       description:
         'This portfolio website you’re currently viewing is one of my actively maintained projects. 😁',
-      skills: ['TypeScript', 'Angular', 'YML'],
       icon: 'assets/optimized/portrait/me.webp',
       iconSrcset:
-        'assets/optimized/portrait/me-64.webp 64w, assets/optimized/portrait/me-128.webp 128w, assets/optimized/portrait/me.webp 216w',
+        'assets/optimized/portrait/me-128.webp 128w, assets/optimized/portrait/me-320.webp 320w',
       iconSizes: '(max-width: 700px) 64px, 108px',
       iconWidth: 320,
       iconHeight: 385,
@@ -251,7 +228,6 @@ export const enLanguage: LanguagePack = {
       link: 'https://tauchertreff-mostviertel.at/',
       description:
         'I also support my local diving club by developing, setting up, and operating its digital infrastructure — including email, the website, cloud services, and everything that comes with it.',
-      skills: ['TypeScript', 'MariaDB', 'Angular', 'YML'],
       icon: 'assets/optimized/logos/tauchertreff.webp',
       iconSrcset:
         'assets/optimized/logos/tauchertreff-64.webp 64w, assets/optimized/logos/tauchertreff-128.webp 128w, assets/optimized/logos/tauchertreff.webp 216w',

src/languages/language.types.ts

@@ -4,7 +4,6 @@ export interface LanguageProject {
   title: string;
   link: string;
   description: string;
-  skills: string[];
   icon?: string;
   iconSrcset?: string;
   iconSizes?: string;
@@ -13,11 +12,6 @@ export interface LanguageProject {
   circleIcon?: boolean;
 }
 
-export interface LanguageBioTextEntry {
-  label: string;
-  value: string;
-}
-
 export interface LanguagePortraitHighlight {
   image: string;
   imageSrcset: string;
@@ -27,7 +21,7 @@ export interface LanguagePortraitHighlight {
   text: string;
 }
 
-export interface LanguagePack {
+export interface LanguageShellPack {
   app: {
     selectorTitle: string;
     changeLanguage: string;
@@ -37,17 +31,21 @@ export interface LanguagePack {
     languageGerman: string;
   };
   footer: {
-    noscriptMessage: string;
     imprintLink: string;
+    homeLink: string;
   };
+  meta: {
+    description: string;
+    homeTitle: string;
+    imprintTitle: string;
+  };
+}
+
+export interface LanguagePack {
   home: {
     portfolioEyebrow: string;
     heroIntro: string;
     contactTitle: string;
-    openPgpTitle: string;
-    openPgpDescription: string;
-    openPgpDownload: string;
-    openPgpFingerprintLabel: string;
     viewProjects: string;
     aboutMe: string;
     nextHighlightAriaLabel: string;
@@ -63,8 +61,14 @@ export interface LanguagePack {
     getInTouch: string;
     projectsEyebrow: string;
     openProjectPrefix: string;
-    projectLanguagesAriaLabel: string;
+    projectIconAltSuffix: string;
-    fallbackBioLabel: string;
+    mailAriaLabel: string;
+    phoneAriaLabel: string;
+    signalAriaLabel: string;
+    giteaAriaLabel: string;
+    linkedinAriaLabel: string;
+    skillsLabel: string;
+    skillsLinkAriaLabel: string;
   };
   imprint: {
     legalEyebrow: string;
@@ -76,14 +80,10 @@ export interface LanguagePack {
     phone: string;
     contact: string;
     abuse: string;
-    scopeEyebrow: string;
-    scopeTitle: string;
-    scopeLeft: string;
-    scopeRight: string;
     privacyEyebrow: string;
     privacyTitle: string;
-    privacyLeftParagraphs: string[];
+    privacyLeft: string;
-    privacyRightParagraphs: string[];
+    privacyRight: string;
     rightsEyebrow: string;
     rightsTitle: string;
     rightsLeft: string;
@@ -93,9 +93,7 @@ export interface LanguagePack {
     copyrightLeftParagraphs: string[];
     copyrightRightParagraphs: string[];
   };
-  bioTextsList: LanguageBioTextEntry[];
+  bioTextsList: string[];
   portraitHighlights: LanguagePortraitHighlight[];
   projects: LanguageProject[];
 }
-
-export type LanguageShellPack = Pick<LanguagePack, 'app' | 'footer'>;

src/languages/shell.ts

@@ -10,8 +10,14 @@ export const enShellLanguage: LanguageShellPack = {
     languageGerman: 'German',
   },
   footer: {
-    noscriptMessage: 'Please enable JavaScript for the full experience.',
     imprintLink: 'Imprint',
+    homeLink: 'Portfolio',
+  },
+  meta: {
+    description:
+      'Full-stack developer building reliable, high-performance systems and clean, maintainable code. Focused on practical solutions that actually hold up in production.',
+    homeTitle: 'Julian Lechner – Full-Stack Developer',
+    imprintTitle: 'Imprint & Privacy – Julian Lechner',
   },
 };
 
@@ -25,7 +31,13 @@ export const deShellLanguage: LanguageShellPack = {
     languageGerman: 'Deutsch',
   },
   footer: {
-    noscriptMessage: 'Bitte aktiviere JavaScript um alles zu sehen.',
     imprintLink: 'Impressum',
+    homeLink: 'Portfolio',
+  },
+  meta: {
+    description:
+      'Full-Stack-Entwickler für zuverlässige, performante Systeme und sauberen, wartbaren Code. Fokus auf praktische Lösungen, die sich im Produktivbetrieb bewähren.',
+    homeTitle: 'Julian Lechner – Full-Stack-Entwickler',
+    imprintTitle: 'Impressum & Datenschutz – Julian Lechner',
   },
 };

src/sitemap.xml

@@ -2,8 +2,26 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://fraujulian.xyz</loc>
-    <lastmod>2026-04-17</lastmod>
+    <lastmod>2026-10-15</lastmod>
     <changefreq>monthly</changefreq>
     <priority>1.0</priority>
   </url>
+  <url>
+    <loc>https://fraujulian.xyz/?lang=de</loc>
+    <lastmod>2026-10-15</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://fraujulian.xyz/imprint</loc>
+    <lastmod>2026-10-15</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>0.3</priority>
+  </url>
+  <url>
+    <loc>https://fraujulian.xyz/imprint?lang=de</loc>
+    <lastmod>2026-10-15</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>0.3</priority>
+  </url>
 </urlset>

src/styles.scss

@@ -1,3 +1,19 @@
+@font-face {
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('assets/optimized/fonts/outfit-latin.woff2') format('woff2');
+}
+
+// Shared by desktop and touch devices so both show the same tones. The absolute URL keeps the
+// file name stable so index.html can preload it.
+$page-background:
+  radial-gradient(circle at top left, rgba(217, 162, 140, 0.22), transparent 26%),
+  radial-gradient(circle at bottom right, rgba(127, 78, 63, 0.28), transparent 28%),
+  linear-gradient(180deg, rgba(9, 9, 12, 0.4), rgba(8, 8, 11, 0.82)),
+  url('/assets/optimized/background.webp') center / cover fixed no-repeat;
+
 :root {
   --page-max-width: 1000px;
   --content-max-width: 920px;
@@ -7,7 +23,7 @@
   --panel-background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
   --border-soft: rgba(255, 255, 255, 0.1);
   --text-primary: #f7f1ea;
-  --text-muted: rgba(247, 241, 234, 0.74);
+  --text-muted: rgba(247, 241, 234, 0.86);
   --accent: #d9a28c;
   --accent-strong: #efbf9d;
   --shadow: 0 28px 70px rgba(7, 7, 11, 0.34);
@@ -64,11 +80,7 @@ body {
   color: var(--text-primary);
   overflow-x: clip;
   background-color: #08080b;
-  background:
+  background: $page-background;
-    radial-gradient(circle at top left, rgba(217, 162, 140, 0.22), transparent 26%),
-    radial-gradient(circle at bottom right, rgba(127, 78, 63, 0.28), transparent 28%),
-    linear-gradient(180deg, rgba(9, 9, 12, 0.4), rgba(8, 8, 11, 0.82)),
-    url('assets/optimized/background.webp') center / cover fixed no-repeat;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -77,6 +89,10 @@ a {
   text-decoration: none;
 }
 
+button {
+  font-family: inherit;
+}
+
 img {
   max-width: 100%;
   display: block;
@@ -221,7 +237,6 @@ hr {
 .story-detail,
 .project-copy,
 .project-title-wrap,
-.project-languages,
 .legal-contact-box,
 .language-copy,
 .language-switcher-copy {
@@ -253,7 +268,6 @@ hr {
 .legal-contact-box p,
 .legal-provider-name,
 .project-link,
-.project-language-chip,
 .portrait-caption,
 .portrait-click-hint,
 .inline-link {
@@ -270,7 +284,7 @@ hr {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
-  margin-top: var(--space-5);
+  margin-top: var(--space-3);
   align-items: center;
 }
 
@@ -283,7 +297,8 @@ hr {
 
 .hero-contact-block {
   display: grid;
-  justify-items: center;
+  justify-items: start;
+  margin-top: var(--space-3);
   gap: 0.45rem;
   width: min(100%, 22rem);
 }
@@ -295,7 +310,7 @@ hr {
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--text-muted);
-  text-align: center;
+  text-align: left;
 }
 
 .hero-contact-area {
@@ -317,61 +332,6 @@ hr {
   aspect-ratio: 1;
 }
 
-.openpgp-section {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--space-4);
-  align-items: center;
-  margin-top: var(--space-4);
-  padding: 1.25rem 1.4rem;
-}
-
-.openpgp-copy,
-.openpgp-actions {
-  min-width: 0;
-}
-
-.openpgp-copy {
-  display: grid;
-  gap: 0.45rem;
-}
-
-.openpgp-description,
-.openpgp-fingerprint {
-  margin: 0;
-}
-
-.openpgp-description {
-  color: var(--text-muted);
-  line-height: 1.6;
-}
-
-.openpgp-actions {
-  display: grid;
-  gap: 0.7rem;
-  justify-items: end;
-}
-
-.openpgp-download-link {
-  width: 100%;
-  min-width: min(100%, 15rem);
-}
-
-.openpgp-fingerprint {
-  display: grid;
-  gap: 0.2rem;
-  text-align: right;
-  color: var(--text-muted);
-  font-size: 0.8rem;
-}
-
-.openpgp-fingerprint strong {
-  color: var(--text-primary);
-  line-height: 1.55;
-  letter-spacing: 0.06em;
-  word-break: break-word;
-}
-
 .action-link {
   display: inline-flex;
   align-items: center;
@@ -492,6 +452,35 @@ hr {
   border-top: 1px solid var(--border-soft);
 }
 
+.hero-visual .hero-meta {
+  max-width: none;
+  margin-top: 0;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+  background: rgba(12, 12, 16, 0.42);
+  border: 1px solid var(--border-soft);
+  box-shadow: var(--shadow-soft);
+  justify-items: center;
+  text-align: center;
+}
+
+.hero-visual .hero-meta {
+  transition:
+    border-color var(--transition-fast),
+    background var(--transition-fast);
+}
+
+.hero-visual .hero-meta:hover,
+.hero-visual .hero-meta:focus-visible {
+  border-color: rgba(239, 191, 157, 0.34);
+  background: rgba(12, 12, 16, 0.58);
+}
+
+.hero-visual .hero-meta div {
+  padding-top: 0;
+  border-top: 0;
+}
+
 .meta-label {
   display: block;
   margin-bottom: var(--space-1);
@@ -552,32 +541,30 @@ hr {
   box-shadow: 0 20px 48px rgba(9, 9, 12, 0.34);
 }
 
-.portrait-caption {
+.portrait-caption,
+.portrait-click-hint {
   position: absolute;
+  max-width: calc(100% - 2.2rem);
+  padding: 0.45rem 0.85rem;
+  border: 1px solid rgba(239, 191, 157, 0.28);
+  border-radius: 999px;
+  background: rgba(12, 12, 16, 0.78);
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.2;
+  backdrop-filter: blur(10px);
+}
+
+.portrait-caption {
   right: 1.1rem;
   bottom: 1.1rem;
-  max-width: calc(100% - 2.2rem);
-  padding: 0.5rem 0.9rem;
-  border-radius: 0.65rem;
-  background: #ffffff;
-  color: #000000;
-  font-size: 1.08rem;
-  font-weight: 700;
-  line-height: 1.2;
 }
 
 .portrait-click-hint {
-  position: absolute;
   left: 1.1rem;
   top: 1.1rem;
-  max-width: calc(100% - 2.2rem);
+  color: var(--accent-strong);
-  padding: 0.5rem 0.9rem;
-  border-radius: 0.65rem;
-  background: #ffffff;
-  color: #000000;
-  font-size: 1.02rem;
-  font-weight: 700;
-  line-height: 1.2;
 }
 
 .hero-note {
@@ -865,9 +852,9 @@ hr {
 
 .project-header {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: flex-start;
-  gap: var(--space-4);
+  gap: var(--space-3);
 }
 
 .project-title-wrap {
@@ -891,31 +878,25 @@ hr {
   transition: color var(--transition-fast);
 }
 
-.project-link:hover {
+.project-entry:hover .project-link,
+.project-entry:focus-visible .project-link {
   color: var(--accent-strong);
 }
 
-.project-languages {
+.project-title-tail {
-  display: flex;
+  white-space: nowrap;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.45rem;
-  max-width: 22rem;
 }
 
-.project-language-chip {
+.project-arrow {
-  display: inline-flex;
+  margin-left: 0.45em;
-  align-items: center;
+  font-size: 0.6em;
-  min-height: 1.9rem;
+  vertical-align: 0.2em;
-  padding: 0.15rem 0.65rem;
+  transition: transform var(--transition-fast);
-  border-radius: 999px;
+}
-  border: 1px solid rgba(255, 255, 255, 0.14);
+
-  background: rgba(255, 255, 255, 0.04);
+.project-entry:hover .project-arrow,
-  color: var(--text-muted);
+.project-entry:focus-visible .project-arrow {
-  font-size: 0.82rem;
+  transform: translateX(4px);
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.01em;
 }
 
 .project-description {
@@ -946,6 +927,11 @@ hr {
   grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
 }
 
+// First card on the page: starts at the same height as the home hero.
+.imprint-page .legal-hero {
+  margin-top: 0;
+}
+
 .legal-hero .back-link {
   margin-bottom: 0;
 }
@@ -1062,16 +1048,6 @@ hr {
     padding: clamp(1.1rem, 3.8vw, 1.5rem);
   }
 
-  .project-header {
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .project-languages {
-    justify-content: flex-start;
-    max-width: none;
-  }
-
   .legal-hero {
     gap: var(--space-4);
   }
@@ -1100,6 +1076,15 @@ hr {
     padding: var(--space-4) 0 var(--space-6);
   }
 
+  .hero-contact-block {
+    justify-items: center;
+    margin-inline: auto;
+  }
+
+  .hero-contact-title {
+    text-align: center;
+  }
+
   .hero-section {
     padding: clamp(1rem, 4vw, 1.2rem);
   }
@@ -1168,12 +1153,9 @@ hr {
 
   .hero-actions {
     order: 3;
-    margin-top: var(--space-4);
+    // Pulls the buttons up against the section gap so they sit as close to the skills box
-  }
+    // as the skills box sits to the portrait.
-
+    margin-top: calc(var(--space-4) - var(--space-6));
-  .hero-meta {
-    order: 4;
-    margin-top: var(--space-3);
   }
 
   .hero-meta,
@@ -1232,12 +1214,6 @@ hr {
     font-size: 0.93rem;
   }
 
-  .project-language-chip {
-    min-height: 1.6rem;
-    padding: 0.08rem 0.52rem;
-    font-size: 0.74rem;
-  }
-
   .hero-actions,
   .hero-contact-area,
   .hero-action-links {
@@ -1257,19 +1233,6 @@ hr {
     text-align: center;
   }
 
-  .openpgp-section {
-    grid-template-columns: 1fr;
-    justify-items: center;
-    text-align: center;
-  }
-
-  .openpgp-actions,
-  .openpgp-fingerprint {
-    width: 100%;
-    justify-items: center;
-    text-align: center;
-  }
-
   .hero-meta div {
     width: min(100%, 24rem);
   }
@@ -1282,12 +1245,6 @@ hr {
     justify-items: center;
   }
 
-  .panel,
-  .language-overlay,
-  .language-switcher {
-    backdrop-filter: none;
-  }
-
   .projects-section,
   .story-section,
   .legal-section {
@@ -1308,11 +1265,7 @@ hr {
     inset: 0;
     z-index: -1;
     pointer-events: none;
-    background:
+    background: $page-background;
-      radial-gradient(circle at top left, rgba(217, 162, 140, 0.18), transparent 28%),
-      radial-gradient(circle at bottom right, rgba(127, 78, 63, 0.24), transparent 32%),
-      linear-gradient(180deg, rgba(9, 9, 12, 0.72), rgba(8, 8, 11, 0.96)),
-      url('assets/optimized/background.webp') center / cover fixed no-repeat;
   }
 }
 
@@ -1380,11 +1333,21 @@ hr {
     will-change: auto;
   }
 }
+html:has(.language-overlay[open]) {
+  overflow: hidden;
+}
+
 .language-overlay {
   position: fixed;
   inset: 0;
   z-index: 9999;
-  display: grid;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  margin: 0;
+  border: 0;
+  color: inherit;
   place-items: center;
   padding: 1.25rem;
   background:
@@ -1393,6 +1356,14 @@ hr {
   backdrop-filter: blur(18px);
 }
 
+.language-overlay[open] {
+  display: grid;
+}
+
+.language-overlay::backdrop {
+  background: transparent;
+}
+
 .language-card {
   position: relative;
   display: grid;
@@ -1593,11 +1564,6 @@ hr {
   font-weight: 600;
 }
 
-.app-content[aria-hidden='true'] {
-  user-select: none;
-  pointer-events: none;
-}
-
 @media (max-width: 700px) {
   .language-card {
     width: min(100%, 440px);

tsconfig.spec.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./dist/out-tsc/spec",
-    "types": ["jasmine", "node"]
+    "types": ["vitest/globals", "node"]
   },
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }