docs(readme): rewrite in a personal voice

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

.dockerignore

@@ -1,6 +1,6 @@
 # Git- und Projekt-Metadaten werden nicht in den Docker-Build-Kontext kopiert
 .git
-.github
+.gitea
 .husky
 .claude
 
@@ -12,6 +12,7 @@
 .angular
 node_modules
 dist
+public
 .npm-cache
 coverage
 .eslintcache

.env.example

@@ -1,3 +1,2 @@
 IMAGE_TAG=latest
 MAIN_PORT=3000
-NG_ALLOWED_HOSTS=fraujulian.xyz,www.fraujulian.xyz,test.fraujulian.xyz

.gitea/ISSUE_TEMPLATE/bug.yaml

@@ -1,6 +1,7 @@
 name: 🐛 Bug Report
-description: Report a bug or unexpected behavior
+about: Report a bug or unexpected behavior
 title: '🐛 [BUG]: '
+ref: main
 body:
   - type: textarea
     id: information

.gitea/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,2 @@
+# Require one of the structured issue templates below.
+blank_issues_enabled: false

.gitea/ISSUE_TEMPLATE/feature.yaml

@@ -1,6 +1,7 @@
 name: 💡 Enhancement
-description: Suggest a new feature or improvement
+about: Suggest a new feature or improvement
 title: '💡 [ENHANCEMENT]: '
+ref: main
 body:
   - type: textarea
     id: description

.gitea/ISSUE_TEMPLATE/improvement.yaml

@@ -1,6 +1,7 @@
 name: ⚙️ Improvement
-description: Suggest an improvement to existing functionality, code quality, or performance
+about: Suggest an improvement to existing functionality, code quality, or performance
 title: '⚙️ [Improvement]: '
+ref: main
 body:
   - type: textarea
     id: context

.gitea/actions/publish/action.yml

@@ -0,0 +1,133 @@
+name: Publish portfolio
+description: Build the image and create the matching Gitea release
+
+inputs:
+  image-tag:
+    description: Docker image tag
+    required: true
+  prerelease:
+    description: Whether the Gitea release is a pre-release
+    required: true
+  registry-username:
+    description: Registry username
+    required: true
+  registry-password:
+    description: Registry password or token
+    required: true
+  gitea-token:
+    description: Token for Gitea releases
+    required: true
+
+runs:
+  using: composite
+  steps:
+    - name: Use Node.js v24.15.0
+      uses: actions/setup-node@v4
+      with:
+        node-version: '24.15.0'
+
+    - name: Set build version
+      shell: bash
+      run: npm run version:set
+
+    - name: Read version from package.json
+      id: version
+      shell: bash
+      env:
+        PRERELEASE: ${{ inputs.prerelease }}
+      run: |
+        version=$(node -p 'require("./package.json").version')
+        release_tag="v${version//+/-}"
+        if [ "$PRERELEASE" = true ]; then
+          release_tag="${release_tag}-dev"
+        fi
+        echo "value=$version" >> "$GITHUB_OUTPUT"
+        echo "release_tag=$release_tag" >> "$GITHUB_OUTPUT"
+        echo "revision=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+
+    - name: Log in to registry
+      uses: docker/login-action@v3
+      with:
+        registry: docker.lechner-systems.at
+        username: ${{ inputs.registry-username }}
+        password: ${{ inputs.registry-password }}
+
+    - name: Build and push image
+      uses: docker/build-push-action@v6
+      with:
+        context: .
+        push: true
+        provenance: false
+        build-args: |
+          APP_VERSION=${{ steps.version.outputs.value }}
+          VCS_REF=${{ steps.version.outputs.revision }}
+        tags: docker.lechner-systems.at/lechnersystems/portfolio:${{ inputs.image-tag }}
+
+    - name: Create Gitea release
+      shell: bash
+      env:
+        GITEA_TOKEN: ${{ inputs.gitea-token }}
+        RELEASE_TAG: ${{ steps.version.outputs.release_tag }}
+        PRERELEASE: ${{ inputs.prerelease }}
+      run: |
+        commit_sha="$(git rev-parse HEAD)"
+        api_url="${{ gitea.server_url }}/api/v1/repos/${{ gitea.repository }}/releases"
+        # ponytail: 50 recent releases cover normal reruns; paginate if old releases are rebuilt.
+        releases="$(curl --fail-with-body --silent --show-error \
+            --header "Authorization: token ${GITEA_TOKEN}" \
+            "${api_url}?limit=50")"
+        previous_tag="$(printf '%s' "$releases" | jq -r \
+            --arg tag "$RELEASE_TAG" \
+            --argjson prerelease "$PRERELEASE" \
+            '[.[] | select(.draft == false and .prerelease == $prerelease and .tag_name != $tag)][0].tag_name // empty')"
+
+        if [ -n "$previous_tag" ]; then
+            commit_messages="$(git log --reverse --format='- %s' "${previous_tag}..${commit_sha}")"
+            full_changelog="${{ gitea.server_url }}/${{ gitea.repository }}/compare/${previous_tag}...${RELEASE_TAG}"
+        else
+            commit_messages="$(git log --reverse --format='- %s' "$commit_sha")"
+            full_changelog=""
+        fi
+
+        if [ -z "$commit_messages" ]; then
+            commit_messages='- No commits since the previous release'
+        fi
+
+        {
+            echo '## Changes'
+            echo
+            printf '%s\n' "$commit_messages"
+            echo
+            if [ -n "$full_changelog" ]; then
+                echo "**Full Changelog**: ${full_changelog}"
+            fi
+        } > release-notes.md
+
+        jq --null-input \
+            --arg tag "$RELEASE_TAG" \
+            --arg target "$commit_sha" \
+            --argjson prerelease "$PRERELEASE" \
+            --rawfile body release-notes.md \
+            '{tag_name: $tag, target_commitish: $target, name: $tag, body: $body, prerelease: $prerelease}' \
+            > release.json
+
+        release_id="$(printf '%s' "$releases" | jq -r \
+            --arg tag "$RELEASE_TAG" \
+            '.[] | select(.tag_name == $tag) | .id')"
+        if [ -n "$release_id" ]; then
+            method=PATCH
+            release_url="${api_url}/${release_id}"
+        else
+            method=POST
+            release_url="$api_url"
+        fi
+
+        curl --fail-with-body --silent --show-error \
+            --request "$method" \
+            --header "Authorization: token ${GITEA_TOKEN}" \
+            --header 'Content-Type: application/json' \
+            --data-binary @release.json \
+            "$release_url"

.gitea/workflows/CD Development.yml

@@ -0,0 +1,65 @@
+name: CD Development
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 23 * * *'
+
+jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      code: read
+    outputs:
+      changed: ${{ steps.changes.outputs.changed }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Check changes since previous development release
+        id: changes
+        env:
+          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
+          API_URL: ${{ gitea.server_url }}/api/v1/repos/${{ gitea.repository }}/actions/workflows/CD%20Development.yml/runs
+        run: |
+          runs="$(curl --fail-with-body --silent --show-error \
+            --header "Authorization: token ${GITEA_TOKEN}" \
+            "${API_URL}?branch=main&limit=50")"
+          previous_sha="$(printf '%s' "$runs" | jq -r \
+            --argjson current_run "$GITHUB_RUN_ID" \
+            '[.workflow_runs[] | select(.id != $current_run and .status == "success" and (.event == "schedule" or .event == "workflow_dispatch"))][0].head_sha // empty')"
+          if [ -z "$previous_sha" ]; then
+            echo 'changed=true' >> "$GITHUB_OUTPUT"
+          else
+            git cat-file -e "${previous_sha}^{commit}"
+            if git diff --quiet "$previous_sha" HEAD; then
+              echo 'changed=false' >> "$GITHUB_OUTPUT"
+              echo 'No changes since the previous successful development release.'
+            else
+              echo 'changed=true' >> "$GITHUB_OUTPUT"
+            fi
+          fi
+
+  publish:
+    needs: changes
+    if: needs.changes.outputs.changed == 'true'
+    runs-on: ubuntu-latest
+    permissions:
+      code: read
+      releases: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Publish development image and pre-release
+        uses: ./.gitea/actions/publish
+        with:
+          image-tag: dev
+          prerelease: 'true'
+          registry-username: ${{ secrets.DOCKER_REGISTRY_USERNAME }}
+          registry-password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
+          gitea-token: ${{ secrets.GITEA_TOKEN }}

.gitea/workflows/CD Production.yml

@@ -0,0 +1,25 @@
+name: CD Production
+
+on:
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      code: read
+      releases: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Publish latest image and stable release
+        uses: ./.gitea/actions/publish
+        with:
+          image-tag: latest
+          prerelease: 'false'
+          registry-username: ${{ secrets.DOCKER_REGISTRY_USERNAME }}
+          registry-password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
+          gitea-token: ${{ secrets.GITEA_TOKEN }}

.gitea/workflows/CI.yml

@@ -0,0 +1,63 @@
+name: CI
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    permissions:
+      code: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24.15.0'
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+
+  formatting:
+    runs-on: ubuntu-latest
+    permissions:
+      code: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24.15.0'
+          cache: npm
+      - run: npm ci
+      - run: npm run format:check
+
+  metadata:
+    runs-on: ubuntu-latest
+    permissions:
+      code: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24.15.0'
+          cache: npm
+      - run: npm ci
+      - run: npm run version:check
+      - run: npm run text:check
+
+  tests:
+    runs-on: ubuntu-latest
+    permissions:
+      code: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24.15.0'
+          cache: npm
+      - run: npm ci
+      - run: npm run test

.github/FUNDING.yml

@@ -1,15 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single patreon username
-open_collective: # Replace with a single Open Collective username
-ko_fi: fraujulian
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-polar: # Replace with a single Polar username
-buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
-thanks_dev: # Replace with a single thanks dev username
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +0,0 @@
-blank_issues_enabled: false

.github/dependabot.yml

@@ -1,11 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
-version: 2
-updates:
-  - package-ecosystem: 'npm'
-    directory: '/'
-    schedule:
-      interval: 'daily'

.github/workflows/BuildDev.yml

@@ -1,63 +0,0 @@
-name: Build Docker Image - Dev
-
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - main
-
-env:
-  REGISTRY: docker.lechner-systems.at
-  IMAGE_NAME: lechnersystems/portfolio
-
-jobs:
-  docker:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Use Node.js v24.14.0
-        uses: actions/setup-node@v4
-        with:
-          node-version: '24.14.0'
-
-      - name: Set build version
-        run: npm run version:set
-
-      - name: Read version from package.json
-        id: version
-        run: |
-          version=$(node -p 'require("./package.json").version')
-          docker_tag=$version
-          echo "value=$version" >> "$GITHUB_OUTPUT"
-          echo "docker_tag=$docker_tag" >> "$GITHUB_OUTPUT"
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ secrets.DOCKER_REGISTRY_USERNAME }}
-          password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
-
-      - name: Build and push dev image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: true
-          provenance: false
-          build-args: |
-            APP_VERSION=${{ steps.version.outputs.value }}
-          tags: |
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:dev
-          #                     ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.version.outputs.docker_tag }}
-          labels: |
-            org.opencontainers.image.version=${{ steps.version.outputs.value }}
-            org.opencontainers.image.revision=${{ github.sha }}
-            org.opencontainers.image.source=https://github.com/${{ github.repository }}

.github/workflows/BuildLatest.yml

@@ -1,97 +0,0 @@
-name: Build Docker Image - Latest
-
-on:
-  workflow_dispatch:
-
-env:
-  REGISTRY: docker.lechner-systems.at
-  IMAGE_NAME: lechnersystems/portfolio
-
-jobs:
-  docker:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Use Node.js v24.14.0
-        uses: actions/setup-node@v4
-        with:
-          node-version: '24.14.0'
-
-      - name: Set build version
-        run: npm run version:set
-
-      - name: Read version from package.json
-        id: version
-        run: |
-          version=$(node -p 'require("./package.json").version')
-          docker_tag=${version//+/-}
-          echo "value=$version" >> "$GITHUB_OUTPUT"
-          echo "docker_tag=$docker_tag" >> "$GITHUB_OUTPUT"
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ secrets.DOCKER_REGISTRY_USERNAME }}
-          password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
-
-      - name: Build and push latest image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: true
-          provenance: false
-          build-args: |
-            APP_VERSION=${{ steps.version.outputs.value }}
-          tags: |
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.version.outputs.docker_tag }}
-          labels: |
-            org.opencontainers.image.version=${{ steps.version.outputs.value }}
-            org.opencontainers.image.revision=${{ github.sha }}
-            org.opencontainers.image.source=https://github.com/${{ github.repository }}
-
-      - name: Create GitHub release
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          RELEASE_TAG: v${{ steps.version.outputs.docker_tag }}
-        run: |
-          previous_tag="$(gh api repos/${{ github.repository }}/releases --paginate --jq '.[] | select(.draft == false) | .tag_name' | grep -Fxv "$RELEASE_TAG" | head -n 1 || true)"
-
-          if [ -n "$previous_tag" ]; then
-              commit_messages="$(git log --reverse --format='- %s' "${previous_tag}..${GITHUB_SHA}")"
-              full_changelog="https://github.com/${{ github.repository }}/compare/${previous_tag}...${RELEASE_TAG}"
-          else
-              commit_messages="$(git log --reverse --format='- %s' "${GITHUB_SHA}")"
-              full_changelog=""
-          fi
-
-          if [ -z "$commit_messages" ]; then
-              commit_messages='- No commits since the previous release'
-          fi
-
-          {
-              echo '## Changes'
-              echo
-              printf '%s\n' "$commit_messages"
-              echo
-              if [ -n "$full_changelog" ]; then
-                  echo "**Full Changelog**: ${full_changelog}"
-              fi
-          } > release-notes.md
-
-          if gh release view "$RELEASE_TAG" >/dev/null 2>&1; then
-              gh release edit "$RELEASE_TAG" --title "$RELEASE_TAG" --notes-file release-notes.md
-          else
-              gh release create "$RELEASE_TAG" --target "${GITHUB_SHA}" --title "$RELEASE_TAG" --notes-file release-notes.md
-          fi

.github/workflows/BuildValidation.yml

@@ -1,32 +0,0 @@
-name: Build Validation
-
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - main
-  pull_request:
-    types: [opened, synchronize, reopened]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout Repository
-        uses: actions/checkout@v4
-
-      - name: use NodeJS v24.14.0
-        uses: actions/setup-node@v4
-        with:
-          node-version: '24.14.0'
-
-      - name: install Dependencies
-        run: npm install
-
-      - name: run Build Validation
-        run: npm run check
-
-      - name: run Tests
-        run: npm run test
-        env:
-          CHROME_BIN: google-chrome

.gitignore

@@ -9,6 +9,7 @@
 # Generierte Build- und Test-Ausgaben
 /dist
 /coverage
+/public
 /src/assets/optimized
 
 # Betriebssystem-Dateileichen

.prettierignore

@@ -1,39 +1,39 @@
-# Paketmanager-Abhaengigkeiten werden nicht formatiert
+# Dependencies
 /node_modules
 
-# Lokale Tool-Caches
-.npm-cache
-.eslintcache
-
-# Generierte Build- und Test-Ausgaben
+# Build, coverage, and generated output
 /dist
 /coverage
+/.angular
+/public
+src/assets/Resources/CSS/Tailwind.css
+src/assets/optimized
 
-# Betriebssystem-Dateileichen
-.DS_Store
-Thumbs.db
+# Package manager and tool caches
+.npm-cache
+.eslintcache
+.prettier-cache
+*.tsbuildinfo
 
-# Editor- und IDE-Konfigurationen
-/.idea
-/.vscode
-
-# Lokale Log- und Debug-Dateien
+# Logs and debug output
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-*.log
-*.tsbuildinfo
 
-# Lokale Secrets und Umgebungsdateien
+# Local environment and secrets
 .env
 .env.*
 backend/.env
 backend/.env.*
 
-# Angular-CLI-Cache
-/.angular
+# Editor, IDE, and OS files
+/.idea
+/.vscode
+.DS_Store
+Thumbs.db
 
-# Generierte Tailwind-Ausgabe wird aus dem Quell-CSS erzeugt
-src/assets/Resources/CSS/Tailwind.css
+# Markdown is maintained manually and excluded from Prettier formatting
+*.md

AGENTS.md

@@ -1,208 +1,223 @@
-# Repository Instructions
+# Repository Guidelines
 
-These instructions apply to this repository unless a more specific `AGENTS.md`
-exists in a subdirectory.
+## Project Context
 
-## Required Verification
+This is an Angular portfolio application using Angular 22, TypeScript, SCSS,
+Vitest tests, and static hosting for production output. Production
+application code lives in `src/app`; the client entry point lives in
+`src/main.ts`.
 
-- Always verify changes with:
-  - `npm run check`
-  - `npm run test`
-- If verification fails, `npm run fix` may help, but do not assume it resolves
-  every issue.
-- Respect the existing `tsconfig`, ESLint, and Prettier configurations.
+Feature views live in folders such as `src/app/home`, `src/app/footer`, and
+`src/app/imprint`. Reusable generic UI building blocks belong in
+`src/app/shared`; reusable services belong in `src/app/services`. Assets and
+language content live in `src/assets` and `src/languages`. Do not manually
+maintain generated or copied output in `public/assets/optimized` or `dist`.
 
-## Assets
+## Agent Workflow
 
-- Do not edit generated optimized assets by hand.
-- Update source assets in `src/assets/unoptimized/`.
-- Regenerate optimized assets through the provided scripts, usually via
-  `npm run generate:assets` or commands that already include asset generation.
+- Read relevant project files before making changes and follow existing
+  patterns.
+- Always validate every change with `npm run check`.
+- Do not run a build unless the user explicitly asks for it.
+- If `npm run check` fails, read the cause first. `npm run fix` may be used, but
+  it cannot fix every issue.
+- Always follow the active ESLint, Prettier, and `tsconfig` rules.
+- Change only files that are relevant to the task.
+- Do not revert unrelated or unclear local changes.
+- Commit, push, or open PRs only when explicitly asked.
 
-## Localization
+## Important Commands
 
-- Keep localized text synchronized between:
-  - `src/languages/de.ts`
-  - `src/languages/en.ts`
-- When changing user-facing text, update both language files unless the change
-  is intentionally language-specific.
+- `npm run dev`: generates assets and starts the Angular development server.
+- `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 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
+  formats the project.
 
-## Architecture
+Use Node `>=24.14.0` and npm `>=11.12.0`.
 
-- Create components with exactly one clear responsibility.
-- Keep components focused on UI, user interaction, and view state.
-- Move business logic into focused services.
-- Structure code by feature or domain where appropriate.
-- Put reusable generic elements in `shared/`.
-- Put domain-specific logic and components in the relevant feature folder.
-- Separate container and presentational components when a view becomes complex.
-- Avoid cyclic dependencies between modules, services, and components.
-- Add abstractions only when at least two real use cases exist.
-- Keep services focused on one business or technical responsibility.
+## Code Style
 
-## TypeScript
-
-- Keep strict TypeScript enabled.
-- Use explicit types for public methods, service APIs, and complex return
-  values.
-- Prefer `unknown` over `any` when a value still needs validation.
-- Use `any` only when technically necessary and document the reason.
-- Use union types for fixed value ranges.
-- Use `readonly` for data that should not be mutated.
-- Prefer `const` over `let` when reassignment is not needed.
-- Check `null` and `undefined` explicitly before accessing nested values.
-- Separate API DTOs from internal UI or domain models.
-- Map external API data deliberately into internal models.
-- Use clear names for interfaces, types, classes, variables, inputs, and
-  outputs.
-- Avoid type casts when clean type narrowing is possible.
+- TypeScript strict mode is enabled. `strictTemplates` is enabled.
+- Prettier is authoritative: 2 spaces, single quotes, semicolons, trailing
+  commas, and default print width 100.
+- Markdown wraps at 80 characters.
+- Angular selectors use the `app` prefix.
+- Components follow the pattern `feature.component.ts`,
+  `feature.component.html`, and `feature.component.spec.ts`.
+- Services follow the pattern `name.service.ts`.
+- Place shared types in `*.types.ts` files when that matches the local pattern.
+- Explicitly type public methods, service APIs, and complex return values.
+- Use `unknown` instead of `any` when a value must be checked first.
+- Use `any` only when technically necessary, and document the reason.
+- Use `const` instead of `let` when reassignment is not needed.
+- Use `readonly` for data that should not be changed.
+- Do not use non-null assertions to hide real nullability issues.
 - Do not suppress type errors with `as unknown as`.
-- Do not use non-null assertions to hide real nullability problems.
+- Use union types for fixed value sets instead of magic strings.
+- Keep API DTOs separate from internal UI or domain models.
+
+## Angular Architecture
+
+- Components must have exactly one clear responsibility.
+- Keep components primarily responsible for UI, user interaction, and view state.
+- Put business logic, HTTP access, mapping, and shared state into focused
+  services.
+- Structure code by features or domains, not only by file types.
+- Put domain-specific logic and domain-specific components in the relevant
+  feature folder.
+- Put generic reusable elements in `shared/`.
+- Split container components from presentational components when a view becomes
+  complex.
+- Create abstractions only when at least two real use cases exist.
+- Avoid cyclic dependencies between components, services, and modules.
+- Do not use services as unordered global storage.
 
 ## Angular Components
 
-- Use `OnPush` change detection unless there is a clear reason not to.
-- Use inputs for externally provided data.
-- Use outputs for events emitted to parent components.
-- Use required inputs when a component cannot work without the data.
+- Use `ChangeDetectionStrategy.OnPush` unless there is a concrete reason not to.
+- Use required inputs when a component cannot work meaningfully without the
+  data.
+- Name inputs and outputs clearly after their purpose.
+- Do not mutate input data directly.
 - Keep component classes small and readable.
-- Extract repeated UI blocks into dedicated components.
-- Use lifecycle hooks only when they are necessary.
-- Keep constructors limited to dependency injection.
-- Initialize data clearly and predictably.
-- Do not make god components.
-- Do not mix API access, mapping, business logic, and UI logic in one component.
-- Prefer composition over component inheritance.
+- Extract repeated UI blocks into their own components.
+- Use lifecycle hooks only when they are truly necessary.
+- Keep constructors free of logic; prefer dependency injection with `inject()`
+  when it fits the existing code.
+- Do not manipulate the DOM directly when Angular APIs are sufficient.
+- Do not use component inheritance when composition is simpler.
 
-## Angular State
+## State, RxJS, and Data Flows
 
 - Use Signals for local synchronous component state.
+- Use computed Signals for derived synchronous values.
 - Use RxJS for asynchronous data streams and complex event chains.
-- Use services for shared state across multiple components.
+- Encapsulate shared state in services.
 - Keep state as close as possible to where it is needed.
-- Avoid global state when local state is enough.
-- Make state changes explicit and understandable.
-- Avoid hidden state mutation across multiple services.
-- Do not store derived values redundantly when they can be computed.
-
-## RxJS
-
+- Make state changes explicit and easy to follow.
 - Name Observables with a `$` suffix.
-- Use the `async` pipe when a stream is displayed directly in a template.
-- Use `switchMap` for requests where older requests should be canceled.
-- Use `concatMap` when ordering must be guaranteed.
-- Use `mergeMap` when parallel processing is intended.
-- Use `exhaustMap` when new events should be ignored while work is running.
-- Use `combineLatest` for dependent live values.
-- Use `forkJoin` for multiple one-time requests that complete together.
-- Clean up manual subscriptions with `takeUntilDestroyed` or an equivalent.
-- Handle errors with `catchError` at the appropriate level.
-- Return controlled fallback state when useful.
-- Do not hide errors that matter for debugging or UX.
-- Do not use `subscribe()` inside `subscribe()`.
+- Use the `async` pipe when a stream is displayed directly in the template.
+- Choose `switchMap`, `concatMap`, `mergeMap`, and `exhaustMap` deliberately
+  based on their semantics.
+- Use `combineLatest` for dependent live values and `forkJoin` for multiple
+  one-time requests.
+- End manual subscriptions with `takeUntilDestroyed` or an equivalent mechanism.
+- Do not write `subscribe()` inside `subscribe()`.
+- Handle errors with `catchError` in the right place and do not blindly swallow
+  them with `EMPTY`.
 - Do not use RxJS for trivial synchronous state.
-- Avoid duplicate identical requests from independent subscriptions.
 
 ## HTTP and API
 
 - Encapsulate all HTTP calls in services.
 - Define response types for API responses.
-- Use central API configuration through environments or injection tokens.
-- Use interceptors for repeated technical concerns such as auth, headers, and
-  error handling.
-- Implement loading, error, and empty states where requests affect UI.
-- Treat API data defensively when quality is uncertain.
-- Validate or normalize external data before broad UI usage.
-- Avoid duplicate API calls through shared streams or caching where appropriate.
+- Keep API configuration centralized through environments or injection tokens.
+- Use interceptors for recurring technical tasks such as auth, headers, or error
+  handling.
+- Include loading, error, and empty states for slow or failed requests.
+- Treat external data defensively, and validate or normalize it before broad UI
+  use.
+- Map external API data deliberately into internal models.
+- Avoid duplicate API calls through shared stream or cache handling.
 - Do not hardcode API URLs, tokens, roles, or secrets in components.
 
 ## Templates
 
 - Keep templates declarative and easy to read.
-- Use templates for presentation and simple bindings only.
-- Move complex conditions into component code or computed signals.
+- Use templates only for presentation and simple bindings.
+- Move complex conditions into component code or computed Signals.
 - Use `@if` for conditional rendering.
-- Use `@for` with `track` for lists.
-- Track with a stable unique ID when available.
+- Always use `@for` with `track`.
+- Use stable unique IDs for `track`; use the index only when no stable ID
+  exists.
+- Do not put business rules, complex ternaries, or expensive method calls in
+  templates.
+- Use pipes only for pure formatting.
+- Break large templates into smaller components.
 - Keep binding expressions short.
-- Do not put business rules or complex ternaries into templates.
-- Do not call expensive methods directly from templates.
-- Split large templates into smaller components.
 
 ## Forms
 
 - Use Reactive Forms for complex forms.
 - Define validators explicitly.
 - Show validation errors clearly in the UI.
+- Validate critical rules again on the backend.
 - Keep form models and API DTOs separate when they differ.
-- Map form data deliberately before submitting.
-- Disable submit while requests are running when duplicate submits are a risk.
-- Surface server-side validation errors in the form.
+- Map form data deliberately before sending it.
+- Disable submit during active requests when repeated submission is problematic.
+- Show server errors visibly in the form.
 
 ## Styling
 
 - Prefer component-scoped styling.
-- Use global styles only for truly global rules.
-- Use a consistent design system or consistent utility classes.
-- Reuse classes or components for repeated UI patterns.
-- Account for responsive design in every new view.
-- Prefer semantic HTML before complex CSS.
+- Use global styles in `src/styles.scss` only for truly global rules.
+- Use consistent design tokens, utility classes, or reusable components for
+  recurring UI patterns.
+- Consider responsive design for every new view.
+- Use semantic HTML before adding complex CSS.
 - Keep spacing, colors, and font sizes consistent.
-- Use inline styles only for dynamic exceptions.
+- Use inline styles only for dynamic edge cases.
 - Do not use `::ng-deep` as a default solution.
-- Do not create global CSS rules that unintentionally affect other components.
-- Avoid fixed pixel layouts without responsive behavior.
+- Do not write global CSS rules that unintentionally affect unrelated
+  components.
+- Do not build fixed-pixel layouts without responsive behavior.
 
 ## Security
 
 - Treat all external data as potentially unsafe.
 - Never trust user input without validation.
-- Do not store secrets in frontend code.
-- Implement roles and permissions server-side.
-- Use frontend role checks only for UX, not as a security boundary.
-- Render API-provided HTML only after controlled sanitization.
-- Use `bypassSecurityTrustHtml` only after explicit security review.
-- Validate redirect URLs against an allowlist.
+- Do not store secrets in the frontend or repository.
+- Use `.env.example` as the documented template; keep real environment-specific
+  values out of version control.
+- Enforce roles and permissions server-side; use frontend checks only for UX.
+- Render HTML from APIs only after controlled sanitization.
+- Use `bypassSecurityTrustHtml` only after an explicit security review.
+- Check redirect URLs against an allowlist.
 - Protect auth flows against XSS and CSRF risks.
 - Store tokens only with a deliberate security concept.
 
 ## Performance
 
-- Use lazy loading for larger features.
+- Lazy-load larger features.
 - Use `OnPush` to reduce unnecessary change detection.
-- Use `track` in lists.
-- Use virtual scrolling for large lists.
-- Avoid expensive computations in templates.
-- Move expensive computations into computed signals, memoization, or services.
-- Avoid large dependencies for small helper functions.
-- Check bundle size impact before adding libraries.
+- Always render lists with stable `track` values.
+- Consider virtual scrolling for large lists.
+- Do not run expensive calculations in templates.
+- Move expensive calculations into computed Signals, memoization, or services.
+- Do not add a large dependency for a small helper function.
+- Check value, risk, and bundle cost before adding a dependency.
 - Optimize images and assets.
-- Measure performance issues before adding complex optimizations.
+- Measure performance problems before implementing complex optimizations.
 
-## Testing
+## Tests
 
-- Test services that contain business logic.
+- Keep tests next to the code under test with `*.spec.ts`.
+- Test services that contain domain logic.
 - Test complex component logic.
-- Test critical user flows with E2E tests where appropriate.
+- Cover critical user flows with E2E tests when an E2E setup exists or is
+  requested.
 - Mock external dependencies in unit tests.
-- Avoid real HTTP calls in unit tests.
-- Write tests with clear behavioral assertions.
-- Cover edge cases and error paths.
-- Keep tests independent from internal implementation details.
-- Use test names that describe behavior.
-- Do not write tests only for coverage.
-- Do not use snapshots as a substitute for concrete assertions.
+- Do not use real HTTP calls in unit tests.
+- Write tests with a clear domain-level assertion.
+- Test edge cases and failure cases.
+- Do not couple tests unnecessarily to implementation details.
+- Test names should describe behavior rather than implementation.
 
-## Code Quality
+## Code Quality and Project Practice
 
-- Use ESLint and Prettier.
-- Keep naming consistent.
 - Remove unused code and unused imports.
-- Do not leave commented-out code blocks.
-- Keep changes focused.
-- Write commits with concrete messages.
-- Use comments only for context that is not obvious from the code.
+- Do not leave commented-out code blocks in the repository.
+- Leave TODOs only with context, a ticket, or a documented decision.
+- Use comments sparingly and only for context that is not obvious from the code.
 - Keep files small enough to understand quickly.
 - Follow existing project conventions.
-- Do not leave TODOs without context, a ticket, or a documented decision.
-- Do not add dependencies without checking value, risk, and bundle cost.
+- Prefer small, focused pull requests.
+- Write commit messages with a concrete statement, for example `fix:` or
+  `improve:` followed by a short summary.
+- Do not write commits named only `fix`, `stuff`, `update`, or `changes`.
+- Document workarounds when they are unavoidable.

Dockerfile

@@ -1,4 +1,7 @@
-FROM node:24.14.0-bookworm-slim AS build
+ARG VCS_REF=unknown
+ARG APP_VERSION=unknown
+
+FROM node:24.15.0-bookworm-slim AS build
 
 WORKDIR /app
 ENV HUSKY=0
@@ -9,24 +12,26 @@ RUN npm ci --no-audit --no-fund
 COPY . .
 RUN npm run build
 
-FROM node:24.14.0-bookworm-slim AS prod-deps
+FROM node:24.15.0-bookworm-slim AS runtime
 
-WORKDIR /app
-ENV HUSKY=0
-
-COPY package.json package-lock.json ./
-RUN npm ci --omit=dev --ignore-scripts --no-audit --no-fund
-
-FROM node:24.14.0-bookworm-slim AS runtime
+ARG VCS_REF
+ARG APP_VERSION
 
 WORKDIR /app
 ENV NODE_ENV=production
 
-COPY --from=prod-deps --chown=node:node /app/node_modules ./node_modules
+LABEL org.opencontainers.image.title="Personal Portfolio Website"
+LABEL org.opencontainers.image.description="👋 My portfolio website built with Angular v22 — a concise introduction to who I am and what I build."
+LABEL org.opencontainers.image.licenses="GPL-3.0-only"
+LABEL org.opencontainers.image.version="${APP_VERSION}"
+LABEL org.opencontainers.image.revision="${VCS_REF}"
+LABEL org.opencontainers.image.source="https://git.lechner-systems.at/fraujulian/Personal-Portfolio-Website"
+
 COPY --from=build --chown=node:node /app/dist ./dist
+COPY --chown=node:node scripts/static-server.mjs ./scripts/static-server.mjs
 
 USER node
 
 EXPOSE 3000
 
-CMD ["node", "dist/server/server.mjs"]
+CMD ["node", "scripts/static-server.mjs"]

README.md

@@ -1,68 +1,86 @@
-# 🖼️ FrauJulian's Portfolio Website
+# Hey, I'm Julian 👋
 
-### [🙋‍♂️ Website Preview](https://fraujulian.xyz/)
+This is the source code of my personal portfolio at
+[fraujulian.xyz](https://fraujulian.xyz/). It's where I show who I am, what I
+work on, and how you can reach me.
 
-<img width="2551" height="1175" alt="image" src="https://github.com/user-attachments/assets/24657c0a-4f95-4573-8472-092984d6cc4e" />
+I'm a full-stack developer from Austria. I care about reliable systems, clean
+code, and privacy. Most of my day happens on the move, usually on a train, and
+when I'm not coding, I'm probably scuba diving somewhere in an Austrian lake. 🤿
 
-## 👂 Languages / Framework / Packages
+## What you'll find on the site
 
-- Angular v21 (with SSR)
-- TypeScript
-- SCSS
-- Angular Material
-- FontAwesome
+- A short introduction about me and the skills I work with
+- My current jobs and projects
+- Ways to get in touch: email, phone, Signal, Gitea, and LinkedIn
+- English and German versions (add `?lang=de` for German)
+- A small portrait gallery: click the photo to see a bit more of my life
+- Imprint and privacy information
 
-## 💻 Development
+## Built with
 
-### Development Preview
+I kept the stack small and modern on purpose:
+
+- Angular 22 with standalone components, signals, and zoneless change detection
+- TypeScript and SCSS
+- Vitest for tests
+- A tiny Node.js static server with security headers and compression
+
+The site is fully static. There is no tracking, no cookies, and no third-party
+requests. Even the font is self-hosted. 🔒
+
+## Running it locally
+
+You need Node.js 24.15 or newer and npm 11.12 or newer.
 
 ```bash
+npm ci
 npm run dev
 ```
 
-### Building
+This generates the optimized assets and starts the dev server at
+`http://localhost:4200`.
+
+To build and serve the production version:
 
 ```bash
 npm run build
+npm start
 ```
 
-This will compile your project and store the build artifacts in the `dist/`
-directory. The production build optimizes your application for performance and
-speed.
+The build lands in `dist/browser`, and the static server runs at
+`http://localhost:3000`.
 
-### Start compiled Project
-
-```bash
-npm run start
-```
-
-## 🔍 Code Quality
-
-### Lint & Format check
-
-```bash
-npm run check
-```
-
-### Auto-fix lint & format issues
-
-```bash
-npm run fix
-```
-
-## 🧪 Running Unit Tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test
-runner, use the following command:
+## Tests and checks
 
 ```bash
 npm run test
+npm run check
 ```
 
-## 🤝 Enjoy?
+`npm run test` runs the Vitest suite in jsdom. `npm run check` runs linting,
+formatting, version, and source text checks. Please run it before you open a
+pull request.
 
-~ made by [**FrauJulian**](https://fraujulian.xyz/).  
-Give it a star ⭐ on
-[GitHub](https://github.com/FrauJulian/Personal-Portfolio-Website)!
+## Project structure
 
-### Greetings from Austria! ⛰️
+- `src/app/home`: the portfolio landing page
+- `src/app/imprint`: imprint and privacy page
+- `src/app/footer`: site footer
+- `src/app/shared`: reusable UI building blocks
+- `src/app/services`: language, preference, and SEO services
+- `src/languages`: English and German content
+- `scripts`: asset generation, versioning, and the static server
+
+More notes:
+
+- [Nginx Proxy Manager deployment notes](npm.md)
+- [Project conventions](AGENTS.md)
+
+## License
+
+The code is licensed under the
+[GNU Affero General Public License v3.0](LICENSE). The content of the website,
+such as texts and photos, is mine and not covered by that license.
+
+Thanks for stopping by! ✨

angular.json

@@ -15,32 +15,41 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist",
-            "index": "src/index.html",
+            "outputPath": {
+              "base": "dist",
+              "browser": "browser",
+              "media": "media"
+            },
+            "outputMode": "static",
+            "index": {
+              "input": "src/index.html",
+              "output": "index.html",
+              "preloadInitial": true
+            },
             "browser": "src/main.ts",
+            "server": false,
             "polyfills": [],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
+            "stylePreprocessorOptions": {
+              "includePaths": ["src"]
+            },
+            "security": {
+              "autoCsp": true
+            },
+            "clearScreen": false,
             "assets": [
               {
                 "glob": "**/*",
                 "input": "src/assets/optimized",
                 "output": "assets/optimized"
-              },
-              {
-                "glob": "**/*",
-                "input": "public"
               }
             ],
             "styles": ["src/styles.scss"],
             "scripts": [],
-            "server": "src/main.server.ts",
-            "prerender": true,
-            "ssr": {
-              "entry": "src/server.ts"
-            }
+            "serviceWorker": false
           },
           "configurations": {
             "production": {
@@ -48,13 +57,16 @@
                 "scripts": true,
                 "styles": {
                   "minify": true,
-                  "inlineCritical": true
+                  "inlineCritical": true,
+                  "removeSpecialComments": true
                 },
                 "fonts": {
                   "inline": true
                 }
               },
               "outputHashing": "all",
+              "crossOrigin": "anonymous",
+              "subresourceIntegrity": true,
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
@@ -69,22 +81,32 @@
                   "type": "anyComponentStyle",
                   "maximumWarning": "4kB",
                   "maximumError": "8kB"
+                },
+                {
+                  "type": "anyScript",
+                  "maximumWarning": "350kB",
+                  "maximumError": "500kB"
                 }
               ]
             },
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true,
+              "sourceMap": {
+                "scripts": true,
+                "styles": true,
+                "vendor": false,
+                "sourcesContent": true
+              },
               "namedChunks": true
             }
           },
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
-            "port": 3000
+            "port": 4200
           },
           "configurations": {
             "production": {
@@ -97,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,
-            "browsers": "ChromeHeadless",
-            "polyfills": ["zone.js", "zone.js/testing"],
+            "buildTarget": "::development",
             "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "src/assets/optimized",
-                "output": "assets/optimized"
-              },
-              {
-                "glob": "**/*",
-                "input": "public",
-                "output": "public"
-              }
-            ],
-            "styles": ["src/styles.scss"],
-            "scripts": []
+            "watch": false
           }
         }
       }

docker-compose.yml

@@ -1,14 +1,9 @@
 services:
   portfolio:
-    image: docker.lechner-systems.at/lechnersystems/portfolio:${IMAGE_TAG}
-    build:
-      context: .
-      dockerfile: Dockerfile
+    image: docker.lechner-systems.at/lechnersystems/portfolio:${IMAGE_TAG:-latest}
     restart: unless-stopped
-    env_file:
-      - .env
     dns:
       - 192.168.100.2
       - 192.168.100.6
     ports:
-      - ${MAIN_PORT}:3000
+      - '${MAIN_PORT:-3000}:3000'

npm.md

@@ -1,12 +1,16 @@
-Create a new custom location:
+# Nginx Proxy Manager Notes
 
-Location: ~*
-Path: \.(?:js|css|mjs|webp|avif|png|jpg|jpeg|gif|svg|ico|woff2?)$
-Scheme/Hostname/Port: same as Origin
-Extra Options:
+## Custom Location
 
----
+Create a new custom location with these values:
 
+- Location: `~*`
+- Path: `\.(?:js|css|mjs|webp|avif|png|jpg|jpeg|gif|svg|ico|woff2?)$`
+- Scheme/Hostname/Port: `same as Origin`
+
+Use the following extra options:
+
+```nginx
 proxy_http_version 1.1;
 proxy_set_header Connection "";
 proxy_set_header Host $host;
@@ -17,13 +21,13 @@ proxy_buffering on;
 expires 1y;
 add_header Cache-Control "public, max-age=31536000, immutable" always;
 add_header Vary "Accept-Encoding" always;
+```
 
----
+## General Configuration
 
-General Configuration:
-
----
+Use the following general proxy configuration:
 
+```nginx
 proxy_http_version 1.1;
 proxy_set_header Connection "";
 proxy_set_header Host $host;
@@ -57,7 +61,6 @@ gzip_types
   text/plain
   text/xml;
 
-# Nur aktiv lassen, wenn dein NPMplus-Image brotli unterstützt.
 brotli on;
 brotli_comp_level 5;
 brotli_min_length 1024;
@@ -75,3 +78,4 @@ brotli_types
 
 add_header Cache-Control "no-cache, must-revalidate" always;
 add_header Vary "Accept-Encoding" always;
+```

package.json

@@ -3,7 +3,7 @@
   "version": "YYDDDhhmm+GIT_HASH",
   "currentVersion": "3.2.0",
   "engines": {
-    "node": ">=24.14.0",
+    "node": ">=24.15.0",
     "npm": ">=11.12.0"
   },
   "scripts": {
@@ -31,7 +31,7 @@
     "------ STARTUP": "",
     "test": "npm run generate:assets && ng test",
     "dev": "npm run generate:assets && ng serve",
-    "start": "node dist/server/server.mjs",
+    "start": "node scripts/static-server.mjs",
     "------ CONFIGS": "",
     "prepare": "husky"
   },
@@ -44,8 +44,8 @@
       "prettier --write"
     ]
   },
-  "repository": "https://github.com/FrauJulian/Personal-Portfolio-Website",
-  "bugs": "https://github.com/FrauJulian/Personal-Portfolio-Website/issues",
+  "repository": "https://git.lechner-systems.at/fraujulian/Personal-Portfolio-Website",
+  "bugs": "https://git.lechner-systems.at/fraujulian/Personal-Portfolio-Website/issues",
   "author": {
     "name": "Lechner Julian",
     "nickname": "FrauJulian",
@@ -54,56 +54,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.2.13",
-    "@angular/cdk": "^21.2.11",
-    "@angular/common": "^21.2.13",
-    "@angular/compiler": "^21.2.13",
-    "@angular/core": "^21.2.13",
-    "@angular/forms": "^21.2.13",
-    "@angular/material": "^21.2.11",
-    "@angular/platform-browser": "^21.2.13",
-    "@angular/platform-browser-dynamic": "^21.2.13",
-    "@angular/platform-server": "^21.2.13",
-    "@angular/router": "^21.2.13",
-    "@angular/ssr": "^21.2.11",
-    "@types/markdown-it": "^14.1.2",
-    "express": "^5.2.1",
-    "markdown-it": "^14.1.1",
+    "@angular/common": "^22.2.1",
+    "@angular/compiler": "^22.2.1",
+    "@angular/core": "^22.2.1",
+    "@angular/platform-browser": "^22.2.1",
+    "@angular/router": "^22.2.1",
     "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.16.2"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^21.2.11",
-    "@angular/cli": "^21.2.11",
-    "@angular/compiler-cli": "^21.2.13",
-    "@types/express": "^5.0.6",
-    "@types/jasmine": "~6.0.0",
+    "@angular/build": "^22.2.1",
+    "@angular/cli": "^22.2.1",
+    "@angular/compiler-cli": "^22.2.1",
     "@types/node": "^25.7.0",
-    "@types/showdown": "^2.0.6",
-    "@typescript-eslint/eslint-plugin": "8.59.3",
-    "@typescript-eslint/parser": "8.59.3",
-    "angular-eslint": "21.4.0",
-    "del-cli": "^7.0.0",
+    "@typescript-eslint/eslint-plugin": "8.71.1",
+    "@typescript-eslint/parser": "8.71.1",
+    "angular-eslint": "22.5.0",
     "esbuild": "^0.28.0",
-    "eslint": "9.39.4",
-    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint": "^9.39.4",
+    "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-n": "18.0.1",
+    "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",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.2.0",
-    "postcss": "^8.5.14",
+    "jsdom": "^30.1.2",
+    "postcss": "^8.5.29",
     "postcss-selector-parser": "^7.1.1",
     "prettier": "^3.8.1",
-    "sharp": "^0.34.5",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "8.59.3"
+    "sharp": "^0.35.5",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "8.71.1",
+    "vitest": "^5.0.3"
   }
 }

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

@@ -0,0 +1,218 @@
+import { createReadStream } from 'node:fs';
+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);
+
+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'],
+  ['.png', 'image/png'],
+  ['.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';
+}
+
+function getCacheControl(filePath) {
+  const normalizedPath = filePath.replace(/\\/g, '/');
+  const fileName = path.basename(filePath);
+  const extension = path.extname(fileName).toLowerCase();
+
+  if (extension === '.html') {
+    return 'no-cache, must-revalidate';
+  }
+
+  if (/\-[A-Z0-9]{8,}\.(css|js)$/i.test(fileName)) {
+    return 'public, max-age=31536000, immutable';
+  }
+
+  if (
+    [
+      '.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'
+      : 'public, max-age=86400, stale-while-revalidate=3600';
+  }
+
+  return 'public, max-age=3600';
+}
+
+async function isFile(targetPath) {
+  try {
+    return (await stat(targetPath)).isFile();
+  } 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(/^\/+/, '');
+
+  for (const root of [distRoot, browserRoot]) {
+    const candidate = resolveInside(root, relativePath);
+    if (candidate === null) {
+      return null;
+    }
+
+    if (await isFile(candidate)) {
+      return candidate;
+    }
+  }
+
+  return null;
+}
+
+function getEncoding(request, filePath) {
+  if (!compressibleExtensions.has(path.extname(filePath).toLowerCase())) {
+    return null;
+  }
+
+  const acceptEncoding = request.headers['accept-encoding'] ?? '';
+  if (/\bbr\b/.test(acceptEncoding)) {
+    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;
+  }
+
+  const source = createReadStream(filePath);
+  if (encoding === null) {
+    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',
+  });
+  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) {
+    if (!response.headersSent) {
+      sendText(response, 500, 'Internal server error');
+    } else {
+      response.destroy();
+    }
+    console.error(error);
+  }
+});
+
+server.listen(port, '0.0.0.0', () => {
+  console.log(`Serving static app on port ${port}`);
+});

scripts/static-site.config.cjs

@@ -1,13 +1,13 @@
+const lastModified = '2026-10-15';
+
 module.exports = {
   siteUrl: 'https://fraujulian.xyz',
   sitemap: {
     routes: [
-      {
-        path: '/',
-        lastModified: '2026-04-17',
-        changeFrequency: 'monthly',
-        priority: '1.0',
-      },
+      { path: '/', lastModified, changeFrequency: 'monthly', priority: '1.0' },
+      { path: '/?lang=de', lastModified, changeFrequency: 'monthly', priority: '1.0' },
+      { path: '/imprint', lastModified, changeFrequency: 'yearly', priority: '0.3' },
+      { path: '/imprint?lang=de', lastModified, changeFrequency: 'yearly', priority: '0.3' },
     ],
   },
   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()) {
-  <div
-    class="language-overlay"
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="language-title"
-    (click)="closeLanguageSelectorOnBackdrop($event)"
-  >
+<dialog
+  #languageDialog
+  class="language-overlay"
+  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()).toBeFalse();
+    expect(comp.isLanguageSelectorOpen()).toBe(false);
     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()).toBeFalse();
+    expect(restoredComponent.isLanguageSelectorOpen()).toBe(false);
   });
 
   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 {
-  private readonly document = inject(DOCUMENT);
+export class AppComponent implements OnInit {
+  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 isLanguageConfirmed = this.shellLanguageService.isLanguageConfirmed;
+  protected readonly currentLanguageCode = this.languagePreferenceService.languageCode;
   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() {
-    effect((): void => {
-      const overflowValue = this.isLanguageSelectorOpen() ? 'hidden' : '';
-      this.document.body.style.overflow = overflowValue;
-      this.document.documentElement.style.overflow = overflowValue;
-    });
-  }
+  private readonly syncDialog = afterRenderEffect((): void => {
+    const dialog = this.languageDialog().nativeElement;
+    if (this.isLanguageSelectorOpen() && !dialog.open) {
+      dialog.showModal();
+    } else if (!this.isLanguageSelectorOpen() && dialog.open) {
+      dialog.close();
+    }
+  });
 
   ngOnInit(): void {
-    const initialLanguage = this.shellLanguageService.initializeFromStorage();
-    this.selectedLanguage.set(initialLanguage);
+    this.selectedLanguage.set(this.languagePreferenceService.initialize());
   }
 
   protected chooseLanguage(language: LanguageCode): void {
     this.selectedLanguage.set(language);
-    this.confirmLanguage();
-  }
-
-  protected confirmLanguage(): void {
-    this.shellLanguageService.confirmLanguage(this.selectedLanguage());
+    this.languagePreferenceService.confirmLanguage(language);
     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.server.ts

@@ -1,11 +0,0 @@
-import { provideServerRendering } from '@angular/ssr';
-import type { ApplicationConfig } from '@angular/core';
-import { mergeApplicationConfig } from '@angular/core';
-
-import { appConfig } from './app.config';
-
-const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering()],
-};
-
-export const config: ApplicationConfig = mergeApplicationConfig(appConfig, serverConfig);

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>
-    <a routerLink="/imprint">{{ content().footer.imprintLink }}</a>
+    @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/home/home.component.html

@@ -11,67 +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://github.com/fraujulian" aria-label="GitHub 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>
-
-      <div class="hero-meta">
-        <div>
-          <span class="meta-label">{{ currentBioEntry.label }}</span
-          ><strong>{{ currentBioEntry.value }}</strong>
+        <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>
       </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"
-                [attr.srcset]="currentPortraitHighlight.imageSrcset"
-                [attr.sizes]="currentPortraitHighlight.imageSizes"
-                [width]="currentPortraitHighlight.imageWidth"
-                [height]="currentPortraitHighlight.imageHeight"
+                [src]="highlight.image"
+                [attr.srcset]="highlight.imageSrcset"
+                [attr.sizes]="highlight.imageSizes"
+                [width]="highlight.imageWidth"
+                [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>
+      </a>
     </div>
   </section>
 
@@ -87,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
-          ><app-icon [icon]="isLongBioShown ? arrowDownIcon : arrowRightIcon"></app-icon>
+          <span>{{ isLongBioShown() ? content().home.detailToggleClose : content().home.detailToggleOpen }}</span
+          ><app-icon [icon]="isLongBioShown() ? arrowDownIcon : arrowRightIcon"></app-icon>
         </button>
-        @if (isLongBioMounted) {
-          <div class="detail-panel" [class.detail-panel-enter]="isLongBioShown" [class.detail-panel-leave]="!isLongBioShown">
+        @if (isLongBioMounted()) {
+          <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>
@@ -109,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"
@@ -123,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
-              [alt]="project.title + ' icon'"
+              loading="eager"
+              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>
-              </div>
-              <div class="project-languages" [attr.aria-label]="content().home.projectLanguagesAriaLabel">
-                @for (language of project.skills; track language + '-' + $index) {
-                  <span class="project-language-chip">{{ language }}</span>
-                }
+                <span class="project-link"
+                  >{{ project.titleHead
+                  }}<span class="project-title-tail"
+                    >{{ project.titleTail }}<app-icon class="project-arrow" [icon]="arrowRightIcon"></app-icon></span
+                ></span>
               </div>
             </div>
             <p class="project-description">{{ project.description }}</p>
@@ -151,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 {
-  LanguageBioTextEntry,
-  LanguagePortraitHighlight,
-} from '../../languages/language.types';
+import type { 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;
-    isLongBioShown: boolean;
-    isLongBioMounted: boolean;
-    isPortraitSwitching: boolean;
-    currentPortraitHighlightIndex: number;
+    currentIndex: WritableSignal<number>;
+    isBioTickerPaused: WritableSignal<boolean>;
+    isLongBioShown: WritableSignal<boolean>;
+    isLongBioMounted: WritableSignal<boolean>;
+    isPortraitSwitching: WritableSignal<boolean>;
+    currentPortraitHighlightIndex: WritableSignal<number>;
+    portraitHighlights: Signal<LanguagePortraitHighlight[]>;
     bioHideTimeoutId: number | null;
-    scrollAnimationFrameId: number | null;
-    projectEntryAnimationFrameId: number | null;
-    aboutSectionAnimationFrameId: number | null;
-    scheduleNameGradientUpdate(): void;
-    scheduleProjectEntryRevealUpdate(): void;
-    scheduleAboutSectionScrollAnimationUpdate(): void;
+    scrollEffectsAnimationFrameId: number | null;
+    scheduleScrollEffectsUpdate(): void;
     shouldEnableScrollEffects(): boolean;
     toggleBio(): void;
     showNextPortraitHighlight(): void;
     scrollToAboutSection(): void;
     scrollToProjectsSection(): void;
     scrollToContactLinks(): void;
-    currentBioEntry: LanguageBioTextEntry;
-    currentPortraitHighlight: LanguagePortraitHighlight | null;
+    currentBioText: Signal<string>;
+    currentPortraitHighlight: Signal<LanguagePortraitHighlight | null>;
   }
 
   let comp: ComponentAccess;
@@ -46,13 +63,7 @@ describe('HomeComponent', (): void => {
   beforeEach(async (): Promise<void> => {
     await TestBed.configureTestingModule({
       imports: [HomeComponent],
-      providers: [
-        provideRouter([]),
-        {
-          provide: IMAGE_LOADER,
-          useValue: (config: ImageLoaderConfig): string => config.src,
-        },
-      ],
+      providers: [provideRouter([])],
     }).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.
-    // Without this, the real setInterval keeps the browser's event loop alive after
-    // the test suite completes, causing Karma to disconnect with a 30 s timeout.
+    // Explicitly destroy to stop the bio ticker interval started after the first render.
+    // Without this, the interval keeps firing after the test has finished.
     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;
-      expect(comp.currentBioEntry).toEqual(enLanguage.bioTextsList[0]);
+      comp.currentIndex.set(0);
+      expect(comp.currentBioText()).toEqual(enLanguage.bioTextsList[0]);
     });
 
     it('should return the correct entry when index changes', (): void => {
-      comp.currentIndex = 3;
-      expect(comp.currentBioEntry).toEqual(enLanguage.bioTextsList[3]);
+      comp.currentIndex.set(3);
+      expect(comp.currentBioText()).toEqual(enLanguage.bioTextsList[3]);
     });
 
-    it('should return the fallback entry when index is out of range', (): void => {
-      comp.currentIndex = 99999;
-      expect(comp.currentBioEntry.label).toBeDefined();
-      expect(comp.currentBioEntry.value).toBeDefined();
+    it('should return an empty text when index is out of range', (): void => {
+      comp.currentIndex.set(99999);
+      expect(comp.currentBioText()).toBe('');
     });
   });
 
   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;
-      expect(comp.currentBioEntry).toEqual(enLanguage.bioTextsList[last]);
-      comp.currentIndex = (last + 1) % enLanguage.bioTextsList.length;
-      expect(comp.currentIndex).toBe(0);
-      expect(comp.currentBioEntry).toEqual(enLanguage.bioTextsList[0]);
+      comp.currentIndex.set(last);
+      expect(comp.currentBioText()).toEqual(enLanguage.bioTextsList[last]);
+      comp.currentIndex.set((last + 1) % enLanguage.bioTextsList.length);
+      expect(comp.currentIndex()).toBe(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;
-      expect(comp.currentPortraitHighlight).toEqual(enLanguage.portraitHighlights[0]);
+      comp.currentPortraitHighlightIndex.set(0);
+      expect(comp.currentPortraitHighlight()).toEqual(enLanguage.portraitHighlights[0]);
     });
 
     it('should return null when index is out of range', (): void => {
-      comp.currentPortraitHighlightIndex = 99999;
-      expect(comp.currentPortraitHighlight).toBeNull();
+      comp.currentPortraitHighlightIndex.set(99999);
+      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[] })
-        .portraitHighlights;
+      const highlights = comp.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);
-      expect(comp.currentPortraitHighlightIndex).toBe(1);
-      tick(125);
-      discardPeriodicTasks();
-    }));
+      await vi.advanceTimersByTimeAsync(125);
+      expect(comp.currentPortraitHighlightIndex()).toBe(1);
+      await vi.advanceTimersByTimeAsync(125);
+    });
 
-    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);
-      expect(comp.isPortraitSwitching).toBeFalse();
-      discardPeriodicTasks();
-    }));
+      await vi.advanceTimersByTimeAsync(250);
+      expect(comp.isPortraitSwitching()).toBe(false);
+    });
 
-    it('should wrap portrait index from the last position back to 0', fakeAsync((): void => {
-      comp.currentPortraitHighlightIndex = enLanguage.portraitHighlights.length - 1;
+    it('should wrap portrait index from the last position back to 0', async (): Promise<void> => {
+      comp.currentPortraitHighlightIndex.set(enLanguage.portraitHighlights.length - 1);
       const zone = TestBed.inject(NgZone);
       zone.runOutsideAngular((): void => {
         comp.showNextPortraitHighlight();
       });
-      tick(125);
-      expect(comp.currentPortraitHighlightIndex).toBe(0);
-      tick(125);
-      discardPeriodicTasks();
-    }));
+      await vi.advanceTimersByTimeAsync(125);
+      expect(comp.currentPortraitHighlightIndex()).toBe(0);
+      await vi.advanceTimersByTimeAsync(125);
+    });
   });
 
   // ── 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();
-      tick(100);
-      discardPeriodicTasks();
-    }));
+      expect(comp.isLongBioMounted()).toBe(true);
+      await vi.advanceTimersByTimeAsync(100);
+    });
 
-    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();
-      discardPeriodicTasks();
-    }));
+      expect(comp.isLongBioShown()).toBe(true);
+    });
 
-    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();
-      tick(300);
-      discardPeriodicTasks();
-    }));
+      expect(comp.isLongBioShown()).toBe(false);
+      await vi.advanceTimersByTimeAsync(300);
+    });
 
-    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);
-      expect(comp.isLongBioMounted).toBeTrue();
+      await vi.advanceTimersByTimeAsync(299);
+      expect(comp.isLongBioMounted()).toBe(true);
 
-      tick(1);
+      await vi.advanceTimersByTimeAsync(1);
       fixture.detectChanges();
-      expect(comp.isLongBioMounted).toBeFalse();
-      discardPeriodicTasks();
-    }));
+      expect(comp.isLongBioMounted()).toBe(false);
+    });
 
-    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.isLongBioShown).toBeTrue();
+      expect(comp.isLongBioMounted()).toBe(true);
+      expect(comp.isLongBioShown()).toBe(true);
 
-      tick(500);
-      discardPeriodicTasks();
-    }));
+      await vi.advanceTimersByTimeAsync(500);
+    });
   });
 
   // ── 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 => {
-      // The RAF registered during beforeEach's ngOnInit lives outside this fakeAsync zone.
+    it('should batch all scroll effects into a single requestAnimationFrame', async (): Promise<void> => {
+      // 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.scheduleNameGradientUpdate();
-      comp.scheduleNameGradientUpdate();
+      comp.scheduleScrollEffectsUpdate();
+      comp.scheduleScrollEffectsUpdate();
+      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,70 +1,52 @@
-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 { interval } from 'rxjs';
+import { filter, interval } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { global } from '../../global';
-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 projectEntryAnimationFrameId: number | null = null;
-  private aboutSectionAnimationFrameId: number | null = null;
-  private readonly scheduleNameGradientUpdate: () => void = (): void => {
-    if (this.scrollAnimationFrameId !== null || typeof window === 'undefined') return;
-    this.scrollAnimationFrameId = window.requestAnimationFrame((): void => {
-      this.scrollAnimationFrameId = null;
+  private scrollEffectsAnimationFrameId: number | null = null;
+  private readonly scheduleScrollEffectsUpdate: () => void = (): void => {
+    if (this.scrollEffectsAnimationFrameId !== null) return;
+    this.scrollEffectsAnimationFrameId = window.requestAnimationFrame((): void => {
+      this.scrollEffectsAnimationFrameId = 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();
     });
   };
 
@@ -75,66 +57,47 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   protected readonly arrowDownIcon = arrowDownIcon;
   protected readonly envelopeIcon = envelopeIcon;
   protected readonly phoneIcon = phoneIcon;
-  protected readonly discordIcon = discordIcon;
-  protected readonly githubIcon = githubIcon;
+  protected readonly signalIcon = signalIcon;
+  protected readonly giteaIcon = giteaIcon;
   protected readonly linkedinIcon = linkedinIcon;
 
-  private readonly isLongBioShownState = signal(false);
-  private readonly isLongBioMountedState = signal(false);
-  private readonly currentPortraitHighlightIndexState = signal(0);
-  private readonly isPortraitSwitchingState = signal(false);
-  private readonly currentIndexState = signal(0);
+  protected readonly isLongBioShown = signal(false);
+  protected readonly isLongBioMounted = signal(false);
+  protected readonly currentPortraitHighlightIndex = signal(0);
+  protected readonly isPortraitSwitching = signal(false);
+  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 {
-    return this.isLongBioShownState();
-  }
-  protected set isLongBioShown(value: boolean) {
-    this.isLongBioShownState.set(value);
-  }
-  protected get isLongBioMounted(): boolean {
-    return this.isLongBioMountedState();
-  }
-  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 portraitHighlights = computed(() => this.content().portraitHighlights);
+  /** Splits off the last title word so the arrow stays glued to it and never wraps alone. */
+  protected readonly projects = computed(() =>
+    this.content().projects.map((project) => {
+      const tailStart = project.title.lastIndexOf(' ') + 1;
+      return {
+        ...project,
+        titleHead: project.title.slice(0, tailStart),
+        titleTail: project.title.slice(tailStart),
+      };
+    }),
+  );
+  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
@@ -142,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.destroyProjectEntryRevealObserver();
-    this.destroyAboutSectionScrollAnimation();
+    this.destroyScrollEffects();
   }
 
   protected toggleBio(): void {
-    if (this.isLongBioShown) {
-      this.isLongBioShown = false;
-      if (typeof window !== 'undefined') {
-        if (this.bioHideTimeoutId !== null) window.clearTimeout(this.bioHideTimeoutId);
-        this.bioHideTimeoutId = window.setTimeout((): void => {
-          this.isLongBioMounted = false;
-          this.bioHideTimeoutId = null;
-        }, 300);
-      } else {
-        this.isLongBioMounted = false;
-      }
+    if (this.isLongBioShown()) {
+      this.isLongBioShown.set(false);
+      if (this.bioHideTimeoutId !== null) window.clearTimeout(this.bioHideTimeoutId);
+      this.bioHideTimeoutId = window.setTimeout((): void => {
+        this.isLongBioMounted.set(false);
+        this.bioHideTimeoutId = null;
+      }, 300);
       return;
     }
-    if (this.bioHideTimeoutId !== null && typeof window !== 'undefined') {
+    if (this.bioHideTimeoutId !== null) {
       window.clearTimeout(this.bioHideTimeoutId);
       this.bioHideTimeoutId = null;
     }
-    this.isLongBioMounted = true;
-    if (typeof window !== 'undefined') {
+    this.isLongBioMounted.set(true);
+    window.requestAnimationFrame((): void => {
       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;
-    this.isPortraitSwitching = true;
+    if (this.portraitHighlights().length <= 1 || this.isPortraitSwitching()) return;
+    this.isPortraitSwitching.set(true);
     this.portraitSwitchTimeoutId = window.setTimeout((): void => {
-      this.currentPortraitHighlightIndex =
-        (this.currentPortraitHighlightIndex + 1) % this.portraitHighlights.length;
+      this.currentPortraitHighlightIndex.update(
+        (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);
   }
@@ -237,62 +170,47 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     return !prefersReducedMotion;
   }
 
-  private initNameGradientScrollAnimation(): void {
-    if (!this.shouldEnableScrollEffects()) return;
-    window.addEventListener('scroll', this.scheduleNameGradientUpdate, { passive: true });
-    window.addEventListener('resize', this.scheduleNameGradientUpdate, { passive: true });
-    this.scheduleNameGradientUpdate();
-  }
-  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;
-    window.removeEventListener('scroll', this.scheduleProjectEntryRevealUpdate);
-    window.removeEventListener('resize', this.scheduleProjectEntryRevealUpdate);
-    if (this.projectEntryAnimationFrameId !== null) {
-      window.cancelAnimationFrame(this.projectEntryAnimationFrameId);
-      this.projectEntryAnimationFrameId = null;
+  /** Loads the other highlight images at low priority so a click swaps them without a visible delay. */
+  private preloadPortraitHighlights(): void {
+    const current = this.currentPortraitHighlight();
+    for (const highlight of this.portraitHighlights()) {
+      if (highlight === current) continue;
+      const image = new Image();
+      image.fetchPriority = 'low';
+      image.sizes = highlight.imageSizes;
+      image.srcset = highlight.imageSrcset;
+      image.src = highlight.image;
     }
+  }
+
+  private startBioTicker(): void {
+    interval(HomeComponent.bioTickerIntervalMs)
+      .pipe(
+        filter((): boolean => !this.isBioTickerPaused()),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .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;
@@ -303,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 =
@@ -324,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();
@@ -337,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.privacyLeftParagraphs[1] }}</p>
-        <p>{{ content().imprint.privacyLeftParagraphs[2] }}</p>
+        <p>{{ content().imprint.privacyLeft }}</p>
       </div>
       <div class="story-detail">
-        <p>{{ content().imprint.privacyRightParagraphs[0] }}</p>
-        <p>{{ content().imprint.privacyRightParagraphs[1] }}</p>
-        <p>{{ content().imprint.privacyRightParagraphs[2] }}</p>
+        <p>{{ content().imprint.privacyRight }}</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);
-    if (storedLanguage === 'de' || storedLanguage === 'en') {
-      this.currentLanguageCode.set(storedLanguage);
-    }
+    const candidates = [
+      new URLSearchParams(window.location.search).get('lang'),
+      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 isLanguageConfirmed = this.languagePreferenceService.isLanguageConfirmed;
-  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;
-  }
+  readonly content = computed<LanguagePack>(() =>
+    this.languageCode() === '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 = {
-  viewBox: '0 0 576 512',
-  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',
+// Signal logo from Simple Icons (CC0 1.0).
+export const signalIcon: SvgIcon = {
+  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 = {
-  viewBox: '0 0 512 512',
-  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',
+// Gitea logo from Simple Icons (CC0 1.0).
+export const giteaIcon: SvgIcon = {
+  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/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,18 +1,6 @@
 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:
@@ -41,79 +29,87 @@ export const deLanguage: LanguagePack = {
     getInTouch: 'Kontaktiere mich!',
     projectsEyebrow: 'Aktuelle Jobs & Projekte',
     openProjectPrefix: 'Projekt öffnen',
-    projectLanguagesAriaLabel: 'Projekt-Technologien',
-    fallbackBioLabel: 'Tech Stack',
+    projectIconAltSuffix: 'Logo',
+    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',
-    privacyLeftParagraphs: [
-      'Verantwortlicher für die Datenverarbeitung im Sinne der Datenschutz-Grundverordnung (DSGVO) ist {{firstname}} {{lastname}}, erreichbar unter {{contactMail}} sowie telefonisch unter {{contactPhone}}.',
-      'Diese Website verwendet nach aktuellem Stand kein eigenes Tracking, keine Analyse-Cookies, keine Marketing-Cookies und keine langfristigen persönlichen Nutzungsprofile.',
-      '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.',
-    ],
-    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.',
-    ],
+    privacyTitle: 'Keine Datensammlung',
+    privacyLeft:
+      '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).',
+    privacyRight:
+      '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.',
     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.',
-      'Jede Nutzung außerhalb der gesetzlichen Schranken des Urheberrechts benötigt eine vorherige schriftliche Zustimmung des jeweiligen Rechteinhabers.',
+      'Alle Inhalte aller Websites von {{firstname}} {{lastname}}, insbesondere Texte, Bilder, Fotos, Grafiken und Design, sind urheberrechtlich geschützt. Alle Rechte vorbehalten.',
+      '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.',
-      'Es gilt ausschließlich österreichisches Recht, sofern keine zwingenden Verbraucherschutzbestimmungen etwas anderes vorgeben.',
+      'Für Inhalte verlinkter externer Websites übernehme ich keine Haftung. Dafür sind ausschließlich deren Betreiber verantwortlich.',
+      'Es gilt österreichisches Recht, soweit zwingende Verbraucherschutzvorschriften nichts anderes vorsehen.',
     ],
   },
   bioTextsList: [
-    { label: 'Sprachen', value: 'C#' },
-    { label: 'Sprachen', value: 'TypeScript' },
-    { label: 'Sprachen', value: 'Bash' },
-    { label: 'Frontend', value: 'Angular' },
-    { label: 'Frontend', value: 'WPF' },
-    { label: 'Frontend', value: 'Avalonia' },
-    { label: 'Backend', value: '.NET' },
-    { label: 'Backend', value: 'ASP.NET Core' },
-    { label: 'Backend', value: 'Entity Framework Core' },
-    { label: 'Backend', value: 'Node.js' },
-    { label: 'Backend', value: 'REST' },
-    { label: 'Backend', value: 'Swagger' },
-    { label: 'Datenbank', value: 'Microsoft SQL' },
-    { label: 'Datenbank', value: 'MariaDB' },
-    { label: 'DevOps', value: 'Git' },
-    { label: 'DevOps', value: 'GitHub & GitLab' },
-    { label: 'DevOps', value: 'Azure DevOps' },
-    { label: 'DevOps', value: 'Docker' },
-    { label: 'DevOps', value: 'Ubuntu' },
-    { label: 'DevOps', value: 'Arch' },
-    { label: 'Deklarative Sprachen', value: 'XAML' },
-    { label: 'Deklarative Sprachen', value: 'YAML' },
-    { label: 'Deklarative Sprachen', value: 'Markdown' },
+    'C#',
+    'TypeScript',
+    'JavaScript',
+    'Java',
+    'SQL',
+    'Bash',
+    'Windows PowerShell',
+    '.NET Core',
+    '.NET-Framework',
+    'ASP.NET',
+    'Entity Framework (EF) Core',
+    'Windows Presentation Foundation (WPF)',
+    'Model View ViewModel (MVVM)',
+    'Model View Controller (MVC)',
+    'Webentwicklung',
+    'AngularJS',
+    'Node.js',
+    'Microsoft SQL Server',
+    'MariaDB',
+    'Git',
+    'GitHub',
+    'GitLab',
+    '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: [
     {
@@ -166,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.',
-      skills: ['TypeScript', 'C#', 'Microsoft SQL', 'WPF', 'YML/XML'],
+        '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.',
       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',
@@ -195,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',
@@ -209,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',
@@ -218,10 +201,9 @@ export const deLanguage: LanguagePack = {
     },
     {
       title: 'Discord Audio Stream Library',
-      link: 'https://github.com/FrauJulian/Discord-Audio-Stream',
+      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',
@@ -233,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,
@@ -247,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,18 +1,6 @@
 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:
@@ -41,79 +29,87 @@ export const enLanguage: LanguagePack = {
     getInTouch: 'Get in touch!',
     projectsEyebrow: 'Current Jobs & Projects',
     openProjectPrefix: 'Open project',
-    projectLanguagesAriaLabel: 'Project languages',
-    fallbackBioLabel: 'my stack',
+    projectIconAltSuffix: 'logo',
+    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',
-    privacyLeftParagraphs: [
-      '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}}.',
-      'As currently implemented, this website does not use its own tracking, analytics cookies, marketing cookies, or long-term personal usage profiling.',
-      '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.',
-    ],
-    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.',
-    ],
+    privacyTitle: 'No Data Collection',
+    privacyLeft:
+      '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).',
+    privacyRight:
+      '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.',
     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.',
-      'Any use beyond statutory exceptions requires prior written consent of the respective rights holder.',
+      '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 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.',
-      'Austrian law applies exclusively, unless mandatory consumer protection provisions require otherwise.',
+      'I accept no liability for the content of linked external websites. Their operators are solely responsible for it.',
+      'Austrian law applies, unless mandatory consumer protection provisions provide otherwise.',
     ],
   },
   bioTextsList: [
-    { label: 'Languages', value: 'C#' },
-    { label: 'Languages', value: 'TypeScript' },
-    { label: 'Languages', value: 'Bash' },
-    { label: 'Frontend', value: 'Angular' },
-    { label: 'Frontend', value: 'WPF' },
-    { label: 'Frontend', value: 'Avalonia' },
-    { label: 'Backend', value: '.NET' },
-    { label: 'Backend', value: 'ASP.NET Core' },
-    { label: 'Backend', value: 'Entity Framework Core' },
-    { label: 'Backend', value: 'Node.js' },
-    { label: 'Backend', value: 'REST' },
-    { label: 'Backend', value: 'Swagger' },
-    { label: 'Database', value: 'Microsoft SQL' },
-    { label: 'Database', value: 'MariaDB' },
-    { label: 'DevOps', value: 'Git' },
-    { label: 'DevOps', value: 'GitHub & GitLab' },
-    { label: 'DevOps', value: 'Azure DevOps' },
-    { label: 'DevOps', value: 'Docker' },
-    { label: 'DevOps', value: 'Ubuntu' },
-    { label: 'DevOps', value: 'Arch' },
-    { label: 'Declarative Languages', value: 'XAML' },
-    { label: 'Declarative Languages', value: 'YAML' },
-    { label: 'Declarative Languages', value: 'Markdown' },
+    'C#',
+    'TypeScript',
+    'JavaScript',
+    'Java',
+    'SQL',
+    'Bash',
+    'Windows PowerShell',
+    '.NET Core',
+    '.NET Framework',
+    'ASP.NET',
+    'Entity Framework (EF) Core',
+    'Windows Presentation Foundation (WPF)',
+    'Model View ViewModel (MVVM)',
+    'Model View Controller (MVC)',
+    'Web Development',
+    'AngularJS',
+    'Node.js',
+    'Microsoft SQL Server',
+    'MariaDB',
+    'Git',
+    'GitHub',
+    'GitLab',
+    '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: [
     {
@@ -166,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: [
     {
@@ -183,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',
@@ -195,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',
@@ -209,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',
@@ -218,10 +201,9 @@ export const enLanguage: LanguagePack = {
     },
     {
       title: 'Discord Audio Stream Library',
-      link: 'https://github.com/FrauJulian/Discord-Audio-Stream',
+      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',
@@ -233,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,
@@ -247,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,9 +31,17 @@ 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;
@@ -59,8 +61,14 @@ export interface LanguagePack {
     getInTouch: string;
     projectsEyebrow: string;
     openProjectPrefix: string;
-    projectLanguagesAriaLabel: string;
-    fallbackBioLabel: string;
+    projectIconAltSuffix: string;
+    mailAriaLabel: string;
+    phoneAriaLabel: string;
+    signalAriaLabel: string;
+    giteaAriaLabel: string;
+    linkedinAriaLabel: string;
+    skillsLabel: string;
+    skillsLinkAriaLabel: string;
   };
   imprint: {
     legalEyebrow: string;
@@ -72,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[];
-    privacyRightParagraphs: string[];
+    privacyLeft: string;
+    privacyRight: string;
     rightsEyebrow: string;
     rightsTitle: string;
     rightsLeft: string;
@@ -89,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/main.server.ts

@@ -1,12 +0,0 @@
-import type { BootstrapContext } from '@angular/platform-browser';
-import { bootstrapApplication } from '@angular/platform-browser';
-import type { ApplicationRef } from '@angular/core';
-
-import { AppComponent } from './app/app.component';
-import { config } from './app/app.config.server';
-
-const bootstrap: (context: BootstrapContext) => Promise<ApplicationRef> = (
-  context: BootstrapContext,
-): Promise<ApplicationRef> => bootstrapApplication(AppComponent, config, context);
-
-export default bootstrap;

src/server.ts

@@ -1,54 +0,0 @@
-import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine, isMainModule } from '@angular/ssr/node';
-import type { Express, NextFunction, Request, Response } from 'express';
-import express from 'express';
-import { dirname, join, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import bootstrap from './main.server';
-
-const serverDistFolder: string = dirname(fileURLToPath(import.meta.url));
-const browserDistFolder: string = resolve(serverDistFolder, '../browser');
-const indexHtml: string = join(serverDistFolder, 'index.server.html');
-const allowedHosts: readonly string[] = [
-  'fraujulian.xyz',
-  'www.fraujulian.xyz',
-  'test.fraujulian.xyz',
-  'localhost',
-  '127.0.0.1',
-];
-
-const app: Express = express();
-const commonEngine: CommonEngine = new CommonEngine({ allowedHosts });
-
-app.use(
-  express.static(browserDistFolder, {
-    maxAge: '1y',
-    index: 'index.html',
-  }),
-);
-
-app.get('/{*splat}', (req: Request, res: Response, next: NextFunction): void => {
-  const { protocol, originalUrl, baseUrl, headers } = req;
-
-  commonEngine
-    .render({
-      bootstrap,
-      documentFilePath: indexHtml,
-      url: `${protocol}://${headers.host}${originalUrl}`,
-      publicPath: browserDistFolder,
-      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
-    })
-    .then((html: string): Response => res.send(html))
-    .catch((err: Error): void => next(err));
-});
-
-if (isMainModule(import.meta.url)) {
-  const port: number = 3000;
-
-  app.listen(port, (): void => {
-    console.log(`Listening on port ${port}`);
-  });
-}
-
-export default app;

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:
-    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;
+  background: $page-background;
   -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 {
@@ -437,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);
@@ -497,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);
-  padding: 0.5rem 0.9rem;
-  border-radius: 0.65rem;
-  background: #ffffff;
-  color: #000000;
-  font-size: 1.02rem;
-  font-weight: 700;
-  line-height: 1.2;
+  color: var(--accent-strong);
 }
 
 .hero-note {
@@ -810,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 {
@@ -836,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 {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.45rem;
-  max-width: 22rem;
+.project-title-tail {
+  white-space: nowrap;
 }
 
-.project-language-chip {
-  display: inline-flex;
-  align-items: center;
-  min-height: 1.9rem;
-  padding: 0.15rem 0.65rem;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text-muted);
-  font-size: 0.82rem;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.01em;
+.project-arrow {
+  margin-left: 0.45em;
+  font-size: 0.6em;
+  vertical-align: 0.2em;
+  transition: transform var(--transition-fast);
+}
+
+.project-entry:hover .project-arrow,
+.project-entry:focus-visible .project-arrow {
+  transform: translateX(4px);
 }
 
 .project-description {
@@ -891,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;
 }
@@ -1007,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);
   }
@@ -1045,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);
   }
@@ -1113,12 +1153,9 @@ hr {
 
   .hero-actions {
     order: 3;
-    margin-top: var(--space-4);
-  }
-
-  .hero-meta {
-    order: 4;
-    margin-top: var(--space-3);
+    // 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,
@@ -1177,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 {
@@ -1214,12 +1245,6 @@ hr {
     justify-items: center;
   }
 
-  .panel,
-  .language-overlay,
-  .language-switcher {
-    backdrop-filter: none;
-  }
-
   .projects-section,
   .story-section,
   .legal-section {
@@ -1240,11 +1265,7 @@ hr {
     inset: 0;
     z-index: -1;
     pointer-events: none;
-    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;
+    background: $page-background;
   }
 }
 
@@ -1312,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:
@@ -1325,6 +1356,14 @@ hr {
   backdrop-filter: blur(18px);
 }
 
+.language-overlay[open] {
+  display: grid;
+}
+
+.language-overlay::backdrop {
+  background: transparent;
+}
+
 .language-card {
   position: relative;
   display: grid;
@@ -1525,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.app.json

@@ -1,9 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "./dist/out-tsc/app",
+    "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": ["src/main.ts", "src/main.server.ts", "src/server.ts"],
-  "include": ["src/**/*.d.ts"]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
 }

tsconfig.json

@@ -1,26 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022",
-    "lib": ["ES2022", "DOM"],
-    "types": []
+    "module": "preserve"
   },
   "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
     "strictTemplates": true
   },
-  "exclude": ["node_modules"]
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
 }

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"]
 }