foundation: project guide, tooling, design tokens, bilingual shell and routing contracts

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/app.config.server.ts

@@ -4,9 +4,7 @@ import { appConfig } from './app.config';
 import { serverRoutes } from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering(withRoutes(serverRoutes))
-  ]
+  providers: [provideServerRendering(withRoutes(serverRoutes))],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/app.config.ts

@@ -1,12 +1,22 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
+import { provideRouter, withComponentInputBinding, withInMemoryScrolling } from '@angular/router';
 import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { PLACEHOLDER_CONTENT } from './core/content/placeholder-content';
+import { SITE_CONTENT } from './core/content/content.token';
+import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(routes), provideClientHydration(withEventReplay())
-  ]
+    provideRouter(
+      routes,
+      withComponentInputBinding(),
+      withInMemoryScrolling({
+        scrollPositionRestoration: 'enabled',
+        anchorScrolling: 'enabled',
+      }),
+    ),
+    provideClientHydration(withEventReplay()),
+    { provide: SITE_CONTENT, useValue: PLACEHOLDER_CONTENT },
+  ],
 };

src/app/app.html

@@ -1,12 +1,93 @@
-<app-dot-background></app-dot-background>
-<div [class.mobile]="isMobile()" [class.desktop]="isDesktop()">
-  <header>
-
+<a class="skip-link" href="#main-content">{{ shell().skipLink }}</a>
+<app-dot-background aria-hidden="true"></app-dot-background>
+<div class="site" [class.nav-collapsed]="!navOpen()">
+  <header class="site-header">
+    <div class="content-container site-header-inner glass-surface">
+      <a class="site-identity" [routerLink]="navigation.link('home')">
+        {{ siteConfig.personName }}
+      </a>
+      <button
+        type="button"
+        class="nav-toggle"
+        [attr.aria-expanded]="navOpen()"
+        aria-controls="primary-nav"
+        [attr.aria-label]="menuLabel()"
+        (click)="toggleNav()"
+      >
+        <span aria-hidden="true"></span>
+      </button>
+      <nav class="site-nav" [attr.aria-label]="shell().primaryNavLabel">
+        <ul class="primary-nav" id="primary-nav">
+          @for (item of navigation.primaryNav(); track item.routeId) {
+            <li>
+              <a
+                [routerLink]="item.link"
+                routerLinkActive="is-active"
+                [routerLinkActiveOptions]="{ exact: true }"
+                ariaCurrentWhenActive="page"
+                >{{ item.label }}</a
+              >
+              @if (item.children; as children) {
+                <ul>
+                  @for (child of children; track child.routeId) {
+                    <li>
+                      <a
+                        [routerLink]="child.link"
+                        routerLinkActive="is-active"
+                        [routerLinkActiveOptions]="{ exact: true }"
+                        ariaCurrentWhenActive="page"
+                        >{{ child.label }}</a
+                      >
+                    </li>
+                  }
+                </ul>
+              }
+            </li>
+          }
+        </ul>
+      </nav>
+      <div class="site-actions cluster">
+        <a
+          class="language-switch"
+          [routerLink]="navigation.alternateLocaleLink()"
+          [attr.hreflang]="otherHtmlLang()"
+          [attr.aria-label]="shell().languageSwitch"
+        >
+          {{ shell().otherLocaleName }}
+        </a>
+        <a
+          [href]="siteConfig.cvAssetPath"
+          [attr.download]="siteConfig.cvDownloadFileName"
+          type="application/pdf"
+        >
+          {{ shell().cvLabel }}
+        </a>
+        <a class="contact-cta" [routerLink]="navigation.contactLink()">{{ shell().contactCta }}</a>
+      </div>
+    </div>
   </header>
-  <main class="router">
-    <router-outlet></router-outlet>
+  <main id="main-content" class="site-main" tabindex="-1">
+    <router-outlet />
   </main>
-  <footer>
-
+  <footer class="site-footer">
+    <div class="content-container site-footer-inner cluster">
+      <p>{{ siteConfig.personName }}</p>
+      <a [href]="'mailto:' + siteConfig.contactEmail">{{ siteConfig.contactEmail }}</a>
+      <nav [attr.aria-label]="shell().footerNavLabel">
+        <ul class="cluster footer-nav">
+          @for (item of navigation.footerNav(); track item.routeId) {
+            <li>
+              <a
+                [routerLink]="item.link"
+                routerLinkActive="is-active"
+                [routerLinkActiveOptions]="{ exact: true }"
+                ariaCurrentWhenActive="page"
+                >{{ item.label }}</a
+              >
+            </li>
+          }
+        </ul>
+      </nav>
+    </div>
   </footer>
 </div>

src/app/app.routes.server.ts

@@ -1,8 +1,13 @@
-import { RenderMode, ServerRoute } from '@angular/ssr';
+import { RenderMode, type ServerRoute } from '@angular/ssr';
+import { prerenderableServerPaths } from './core/routing/route-paths';
 
 export const serverRoutes: ServerRoute[] = [
+  ...prerenderableServerPaths().map((path): ServerRoute => ({
+    path,
+    renderMode: RenderMode.Prerender,
+  })),
   {
     path: '**',
-    renderMode: RenderMode.Prerender
-  }
+    renderMode: RenderMode.Server,
+  },
 ];

src/app/app.routes.spec.ts

@@ -0,0 +1,55 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter, type Routes } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { routes } from './app.routes';
+import { PLACEHOLDER_CONTENT } from './core/content/placeholder-content';
+import { SITE_CONTENT } from './core/content/content.token';
+import { LocaleService } from './core/i18n/locale.service';
+import { type AppRouteData } from './core/routing/app-route-data';
+
+function flattenRoutes(tree: Routes, prefix = ''): Array<{ path: string; data?: AppRouteData }> {
+  const entries: Array<{ path: string; data?: AppRouteData }> = [];
+
+  for (const route of tree) {
+    const segment = route.path ?? '';
+    const path = [prefix, segment].filter((part) => part.length > 0).join('/');
+    entries.push({ path, data: route.data as AppRouteData | undefined });
+
+    if (route.children) {
+      entries.push(...flattenRoutes(route.children, path));
+    }
+  }
+
+  return entries;
+}
+
+describe('app routes', () => {
+  it('places the English subtree first and attaches locale data', () => {
+    expect(routes[0]?.path).toBe('en');
+
+    const flattened = flattenRoutes(routes);
+    const englishProjects = flattened.find((entry) => entry.path === 'en/projects');
+    const germanProjects = flattened.find((entry) => entry.path === 'projekte');
+    const englishWildcard = flattened.find((entry) => entry.path === 'en/**');
+    const germanWildcard = flattened.find((entry) => entry.path === '**');
+
+    expect(englishProjects?.data).toEqual({ routeId: 'projects', locale: 'en' });
+    expect(germanProjects?.data).toEqual({ routeId: 'projects', locale: 'de' });
+    expect(englishWildcard?.data).toEqual({ routeId: 'notFound', locale: 'en' });
+    expect(germanWildcard?.data).toEqual({ routeId: 'notFound', locale: 'de' });
+  });
+
+  it('navigates to the English projects placeholder', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: PLACEHOLDER_CONTENT }],
+    });
+
+    const harness = await RouterTestingHarness.create();
+    const locale = TestBed.inject(LocaleService);
+    await harness.navigateByUrl('/en/projects');
+
+    expect(locale.locale()).toBe('en');
+    expect(harness.routeNativeElement?.querySelector('h1')?.textContent).toContain('Projects');
+    expect(harness.routeNativeElement?.textContent).toContain('This page is being built.');
+  });
+});

src/app/app.routes.ts

@@ -1,6 +1,69 @@
-import { Routes } from '@angular/router';
-import {Skills} from './components/pages/skills/skills';
+import { type Type } from '@angular/core';
+import { type Routes } from '@angular/router';
+import { PLACEHOLDER_CONTENT } from './core/content/placeholder-content';
+import { localeResolver } from './core/i18n/locale.resolver';
+import { type AppLocale } from './core/i18n/locale';
+import { type AppRouteData } from './core/routing/app-route-data';
+import { ROUTE_IDS, type RouteId } from './core/routing/route-ids';
+import { LOCALE_PREFIX, ROUTE_SEGMENTS } from './core/routing/route-paths';
+
+type LazyPage = () => Promise<Type<unknown>>;
+
+const PAGE_LOADERS: Record<RouteId, LazyPage> = {
+  home: () => import('./features/home/home').then((module) => module.HomePage),
+  services: () => import('./features/services/services').then((module) => module.ServicesPage),
+  servicesSoftware: () =>
+    import('./features/services/software/software').then((module) => module.ServicesSoftwarePage),
+  servicesHardwareNetwork: () =>
+    import('./features/services/hardware-network/hardware-network').then(
+      (module) => module.ServicesHardwareNetworkPage,
+    ),
+  servicesClusters: () =>
+    import('./features/services/clusters/clusters').then((module) => module.ServicesClustersPage),
+  servicesAi: () =>
+    import('./features/services/ai-integration/ai-integration').then(
+      (module) => module.ServicesAiPage,
+    ),
+  projects: () => import('./features/projects/projects').then((module) => module.ProjectsPage),
+  stack: () => import('./features/stack/stack').then((module) => module.StackPage),
+  about: () => import('./features/about/about').then((module) => module.AboutPage),
+  contact: () => import('./features/contact/contact').then((module) => module.ContactPage),
+  imprint: () => import('./features/imprint/imprint').then((module) => module.ImprintPage),
+  privacy: () => import('./features/privacy/privacy').then((module) => module.PrivacyPage),
+  notFound: () => import('./features/not-found/not-found').then((module) => module.NotFoundPage),
+};
+
+function routeData(routeId: RouteId, locale: AppLocale): AppRouteData {
+  return { routeId, locale };
+}
+
+function localeRoutes(locale: AppLocale): Routes {
+  const segments = ROUTE_SEGMENTS[locale];
+  const pages = PLACEHOLDER_CONTENT[locale].pages;
+
+  return ROUTE_IDS.filter((routeId) => routeId !== 'notFound')
+    .map((routeId) => ({
+      path: segments[routeId],
+      loadComponent: PAGE_LOADERS[routeId],
+      data: routeData(routeId, locale),
+      title: pages[routeId]?.title,
+      resolve: { locale: localeResolver },
+    }))
+    .concat([
+      {
+        path: '**',
+        loadComponent: PAGE_LOADERS.notFound,
+        data: routeData('notFound', locale),
+        title: pages.notFound?.title,
+        resolve: { locale: localeResolver },
+      },
+    ]);
+}
 
 export const routes: Routes = [
-  {path: '', component: Skills}
+  {
+    path: LOCALE_PREFIX.en,
+    children: localeRoutes('en'),
+  },
+  ...localeRoutes('de'),
 ];

src/app/app.scss

@@ -0,0 +1,163 @@
+@use 'breakpoints' as bp;
+
+:host {
+  display: block;
+  min-height: 100vh;
+  color: var(--color-text);
+  font-family: var(--font-sans);
+}
+
+.site {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding-block: var(--space-3);
+}
+
+.site-header-inner {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--space-3);
+  align-items: start;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+}
+
+.site-identity,
+.site-nav a,
+.site-actions a,
+.site-footer a {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.site-identity {
+  font-weight: 600;
+}
+
+.nav-toggle {
+  justify-self: end;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid var(--surface-glass-border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text);
+}
+
+.nav-toggle span,
+.nav-toggle span::before,
+.nav-toggle span::after {
+  display: block;
+  width: 1rem;
+  height: 2px;
+  margin-inline: auto;
+  background: currentColor;
+}
+
+.nav-toggle span::before,
+.nav-toggle span::after {
+  content: '';
+  position: relative;
+}
+
+.nav-toggle span::before {
+  top: -0.35rem;
+}
+
+.nav-toggle span::after {
+  top: 0.25rem;
+}
+
+.site-nav,
+.site-actions {
+  grid-column: 1 / -1;
+}
+
+.primary-nav,
+.primary-nav ul,
+.footer-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.primary-nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.primary-nav ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding-inline-start: var(--space-4);
+}
+
+.contact-cta {
+  color: var(--color-text);
+}
+
+.is-active {
+  color: var(--color-accent-cool);
+}
+
+.nav-collapsed .site-nav,
+.nav-collapsed .site-actions {
+  display: none;
+}
+
+.site-main {
+  flex: 1;
+  outline: none;
+}
+
+.site-footer {
+  padding-block: var(--space-6);
+  color: var(--color-text-muted);
+}
+
+.site-footer-inner {
+  justify-content: space-between;
+}
+
+.site-footer p {
+  margin: 0;
+}
+
+@include bp.respond-to(md) {
+  .nav-toggle {
+    display: none;
+  }
+
+  .site-header-inner {
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+  }
+
+  .site-nav,
+  .site-actions,
+  .nav-collapsed .site-nav,
+  .nav-collapsed .site-actions {
+    display: flex;
+    grid-column: auto;
+  }
+
+  .primary-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--space-4);
+  }
+
+  .primary-nav ul {
+    padding-inline-start: 0;
+  }
+}

src/app/app.spec.ts

@@ -1,23 +1,46 @@
 import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
 import { App } from './app';
+import { routes } from './app.routes';
+import { PLACEHOLDER_CONTENT } from './core/content/placeholder-content';
+import { SITE_CONTENT } from './core/content/content.token';
 
 describe('App', () => {
   beforeEach(async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+
     await TestBed.configureTestingModule({
       imports: [App],
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: PLACEHOLDER_CONTENT }],
     }).compileComponents();
   });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(App);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+  afterEach(() => {
+    vi.restoreAllMocks();
   });
 
-  it('should render title', async () => {
+  it('should create the shell', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  it('should render an accessible application shell', async () => {
     const fixture = TestBed.createComponent(App);
     await fixture.whenStable();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, Portfolio');
+
+    const focusable = compiled.querySelectorAll(
+      'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    );
+    const firstFocusable = focusable.item(0);
+
+    expect(firstFocusable).toBeTruthy();
+    expect(firstFocusable.getAttribute('href')).toBe('#main-content');
+    expect(firstFocusable.classList.contains('skip-link')).toBe(true);
+    expect(compiled.querySelector('main#main-content')).toBeTruthy();
+    expect(compiled.querySelector('nav[aria-label]')).toBeTruthy();
+    expect(compiled.querySelector('a.language-switch[hreflang]')).toBeTruthy();
+    expect(compiled.querySelector('footer')).toBeTruthy();
   });
 });

src/app/app.ts

@@ -1,28 +1,33 @@
-import {Component, computed, HostListener, OnInit, signal} from '@angular/core';
-import {RouterOutlet} from '@angular/router';
-import {DotBackground} from './components/dot-background/dot-background';
-import {DeviceDetectionService} from './service/device-detection-service';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { DotBackground } from './components/dot-background/dot-background';
+import { SHELL_COPY } from './core/content/shell-copy';
+import { SITE_CONFIG } from './core/content/site-config';
+import { LOCALE_HTML_LANG, otherLocale } from './core/i18n/locale';
+import { LocaleService } from './core/i18n/locale.service';
+import { NavigationService } from './core/navigation/navigation.service';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, DotBackground],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, DotBackground],
   templateUrl: './app.html',
-  styleUrl: './app.scss'
+  styleUrl: './app.scss',
 })
-export class App implements OnInit {
-  protected readonly title = signal('Portfolio');
-  protected readonly isMobile = signal(false);
-  protected readonly isDesktop = computed(() => !this.isMobile());
+export class App {
+  protected readonly navigation = inject(NavigationService);
+  protected readonly localeService = inject(LocaleService);
+  protected readonly siteConfig = SITE_CONFIG;
+  protected readonly navOpen = signal(true);
 
-  constructor(private deviceDetectionService: DeviceDetectionService) {
-  }
+  protected readonly shell = computed(() => SHELL_COPY[this.localeService.locale()]);
+  protected readonly otherLocale = computed(() => otherLocale(this.localeService.locale()));
+  protected readonly otherHtmlLang = computed(() => LOCALE_HTML_LANG[this.otherLocale()]);
+  protected readonly menuLabel = computed(() =>
+    this.navOpen() ? this.shell().menuClose : this.shell().menuOpen,
+  );
 
-  ngOnInit(): void {
-    this.isMobile.set(this.deviceDetectionService.mobileCheck());
-  }
-
-  @HostListener('window:resize')
-  onResize() {
-    this.isMobile.set(this.deviceDetectionService.mobileCheck());
+  protected toggleNav(): void {
+    this.navOpen.update((open) => !open);
   }
 }

src/app/components/dot-background/dot-background.scss

@@ -2,7 +2,7 @@ canvas {
   position: fixed;
   inset: 0;
   z-index: -1;
-  background: #0a0a0f;
+  background: var(--color-surface);
 
   width: 100vw;
   height: 100vh;

src/app/components/dot-background/dot-background.spec.ts

@@ -7,16 +7,21 @@ describe('DotBackground', () => {
   let fixture: ComponentFixture<DotBackground>;
 
   beforeEach(async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+
     await TestBed.configureTestingModule({
-      imports: [DotBackground]
-    })
-    .compileComponents();
+      imports: [DotBackground],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(DotBackground);
     component = fixture.componentInstance;
     await fixture.whenStable();
   });
 
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });

src/app/components/dot-background/dot-background.ts

@@ -1,6 +1,14 @@
-import {afterNextRender, Component, ElementRef, NgZone, OnDestroy, ViewChild} from '@angular/core';
-import {Dot} from '../../models/dot';
-import {DeviceDetectionService} from '../../service/device-detection-service';
+import {
+  afterNextRender,
+  Component,
+  ElementRef,
+  inject,
+  NgZone,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import { isBrowserPlatform, prefersCoarsePointer } from '../../core/platform/browser';
+import { Dot } from '../../models/dot';
 
 @Component({
   selector: 'app-dot-background',
@@ -11,7 +19,10 @@ import {DeviceDetectionService} from '../../service/device-detection-service';
 export class DotBackground implements OnDestroy {
   @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;
 
-  private ctx!: CanvasRenderingContext2D;
+  private readonly ngZone = inject(NgZone);
+  private readonly coarsePointer = prefersCoarsePointer();
+
+  private ctx: CanvasRenderingContext2D | undefined;
   private dots: Dot[] = [];
   private mouse = { x: -1000, y: -1000 };
   private animationId = 0;
@@ -26,23 +37,41 @@ export class DotBackground implements OnDestroy {
   private ballSpawnId = 0;
   private ballSpawnNextColor = 0;
 
-  constructor(private ngZone: NgZone, private mobileService: DeviceDetectionService) {
+  constructor() {
     afterNextRender(() => {
       this.init();
     });
   }
 
   ngOnDestroy() {
-    if (!this.initialized) return;
+    if (!this.initialized) {
+      return;
+    }
 
     cancelAnimationFrame(this.animationId);
-    window.removeEventListener('resize', this.resize);
-    window.removeEventListener('mousemove', this.onMouseMove);
+
+    if (isBrowserPlatform()) {
+      window.removeEventListener('resize', this.resize);
+      window.removeEventListener('mousemove', this.onMouseMove);
+      window.removeEventListener('click', this.onMouseClick);
+    }
   }
 
   private init() {
     const canvas = this.canvasRef.nativeElement;
-    this.ctx = canvas.getContext('2d')!;
+    let ctx: CanvasRenderingContext2D | null = null;
+
+    try {
+      ctx = canvas.getContext('2d');
+    } catch {
+      return;
+    }
+
+    if (!ctx) {
+      return;
+    }
+
+    this.ctx = ctx;
     this.resize();
     this.initDots();
 
@@ -62,8 +91,7 @@ export class DotBackground implements OnDestroy {
     const dx = Math.abs(width - canvas.width) / width;
     const dy = Math.abs(height - canvas.height) / height;
 
-    if (!this.mobileService.mobileCheck() || dy > 0.2 || dx > 0.05) {
-      //sync canvas size to screen size
+    if (!this.coarsePointer || dy > 0.2 || dx > 0.05) {
       canvas.width = width;
       canvas.height = height;
 
@@ -74,13 +102,10 @@ export class DotBackground implements OnDestroy {
     }
   };
 
-
-
   private onMouseMove = (e: MouseEvent) => {
     const canvas = this.canvasRef.nativeElement;
-    // map real res to canvas res
-    this.mouse.x = e.clientX / window.innerWidth * canvas.width;
-    this.mouse.y = e.clientY / window.innerHeight * canvas.height;
+    this.mouse.x = (e.clientX / window.innerWidth) * canvas.width;
+    this.mouse.y = (e.clientY / window.innerHeight) * canvas.height;
   };
 
   private onMouseClick = () => {
@@ -91,16 +116,17 @@ export class DotBackground implements OnDestroy {
 
   private spawnDot(): Dot {
     const dotId = this.ballSpawnId++;
-    const max_count = this.mobileService.mobileCheck() ? this.MAX_DOT_COUNT_MOBILE : this.MAX_DOT_COUNT;
-    let dot;
-    if (dotId < max_count) {
+    const maxCount = this.coarsePointer ? this.MAX_DOT_COUNT_MOBILE : this.MAX_DOT_COUNT;
+    let dot: Dot;
+
+    if (dotId < maxCount) {
       dot = {
         x: 0,
         y: 0,
         vx: 0,
         vy: 0,
         radius: 1,
-        color: "#000000",
+        color: '#000000',
       };
 
       this.dots.push(dot);
@@ -114,7 +140,7 @@ export class DotBackground implements OnDestroy {
   }
 
   private populateDot(dot: Dot) {
-    const {width, height} = this.canvasRef.nativeElement;
+    const { width, height } = this.canvasRef.nativeElement;
 
     dot.x = Math.random() * width;
     dot.y = Math.random() * height;
@@ -132,8 +158,14 @@ export class DotBackground implements OnDestroy {
 
   private animate = () => {
     const canvas = this.canvasRef.nativeElement;
+    const ctx = this.ctx;
+
+    if (!ctx) {
+      return;
+    }
+
     const { width, height } = canvas;
-    this.ctx.clearRect(0, 0, width, height);
+    ctx.clearRect(0, 0, width, height);
 
     for (const dot of this.dots) {
       const dx = dot.x - this.mouse.x;
@@ -161,25 +193,24 @@ export class DotBackground implements OnDestroy {
         dot.vy = Math.random() * 0.2 - 0.1;
       }
 
-      // Bounce off edges (accounting for radius)
-      if (dot.x < dot.radius || dot.x > width - dot.radius) dot.vx *= -1;
-      if (dot.y < dot.radius || dot.y > height - dot.radius) dot.vy *= -1;
+      if (dot.x < dot.radius || dot.x > width - dot.radius) {
+        dot.vx *= -1;
+      }
+      if (dot.y < dot.radius || dot.y > height - dot.radius) {
+        dot.vy *= -1;
+      }
 
-      // Clamp to bounds
       dot.x = Math.max(dot.radius, Math.min(width - dot.radius, dot.x));
       dot.y = Math.max(dot.radius, Math.min(height - dot.radius, dot.y));
 
-      const gradient = this.ctx.createRadialGradient(
-        dot.x, dot.y, 0,
-        dot.x, dot.y, dot.radius
-      );
+      const gradient = ctx.createRadialGradient(dot.x, dot.y, 0, dot.x, dot.y, dot.radius);
       gradient.addColorStop(0, dot.color + '40');
       gradient.addColorStop(1, 'transparent');
 
-      this.ctx.beginPath();
-      this.ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
-      this.ctx.fillStyle = gradient;
-      this.ctx.fill();
+      ctx.beginPath();
+      ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
+      ctx.fillStyle = gradient;
+      ctx.fill();
     }
 
     this.animationId = requestAnimationFrame(this.animate);

src/app/components/pages/skills/skill-card/skill-card.html

@@ -1,10 +1,11 @@
-<div class="card">
+<div class="card glass-surface">
   <h3>{{ title }}</h3>
   <div class="icons">
     @for (skill of skills; track skill.icon) {
       <a
         [href]="skill.url"
         target="_blank"
+        rel="noopener noreferrer"
         [attr.aria-label]="skill.name"
       >
         <img

src/app/components/pages/skills/skill-card/skill-card.scss

@@ -1,43 +1,27 @@
-// skill-card.component.scss
 .card {
-  background: linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.05) 100%
-  );
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 16px;
-  padding: 1.5rem;
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
   height: 100%;
   display: flex;
   flex-direction: column;
-  box-shadow:
-    0 4px 24px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
-
-  :host-context(.desktop) &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.15);
-    border-color: rgba(255, 255, 255, 0.25);
-  }
+  transition:
+    transform var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard),
+    border-color var(--duration-base) var(--ease-standard);
 
   h3 {
-    margin: 0 0 1rem;
-    font-size: 0.875rem;
+    margin: 0 0 var(--space-4);
+    font-size: var(--text-xs);
     font-weight: 500;
     text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: rgba(255, 255, 255, 0.6);
+    letter-spacing: var(--tracking-wide);
+    color: var(--color-text-muted);
   }
 
   .icons {
     display: flex;
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: var(--space-4);
     align-items: center;
     flex: 1;
 
@@ -50,13 +34,23 @@
         height: 40px;
         object-fit: contain;
         filter: grayscale(100%) brightness(0.8);
-        transition: filter 0.2s ease, transform 0.2s ease;
-      }
-
-      :host-context(.desktop) &:hover img {
-        filter: none;
-        transform: scale(1.1);
+        transition:
+          filter var(--duration-fast) var(--ease-standard),
+          transform var(--duration-fast) var(--ease-standard);
       }
     }
   }
 }
+
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-raised);
+    border-color: var(--surface-glass-border-strong);
+  }
+
+  .card .icons a:hover img {
+    filter: none;
+    transform: scale(1.1);
+  }
+}

src/app/components/pages/skills/skill-card/skill-card.spec.ts

@@ -8,9 +8,8 @@ describe('SkillCard', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SkillCard]
-    })
-    .compileComponents();
+      imports: [SkillCard],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(SkillCard);
     component = fixture.componentInstance;

src/app/components/pages/skills/skill-card/skill-card.ts

@@ -1,5 +1,5 @@
-import {Component, Input} from '@angular/core';
-import {Skill} from '../../../../models/skill';
+import { Component, Input } from '@angular/core';
+import { Skill } from '../../../../models/skill';
 
 @Component({
   selector: 'app-skill-card',

src/app/components/pages/skills/skills-grid/skills-grid.scss

@@ -2,5 +2,5 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--space-3);
 }

src/app/components/pages/skills/skills-grid/skills-grid.spec.ts

@@ -8,9 +8,8 @@ describe('SkillsGrid', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SkillsGrid]
-    })
-    .compileComponents();
+      imports: [SkillsGrid],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(SkillsGrid);
     component = fixture.componentInstance;

src/app/components/pages/skills/skills-grid/skills-grid.ts

@@ -1,12 +1,10 @@
-import {Component} from '@angular/core';
-import {SkillCategory} from '../../../../models/skill-category';
-import {SkillCard} from '../skill-card/skill-card';
+import { Component } from '@angular/core';
+import { SkillCategory } from '../../../../models/skill-category';
+import { SkillCard } from '../skill-card/skill-card';
 
 @Component({
   selector: 'app-skills-grid',
-  imports: [
-    SkillCard
-  ],
+  imports: [SkillCard],
   templateUrl: './skills-grid.html',
   styleUrl: './skills-grid.scss',
 })
@@ -17,15 +15,19 @@ export class SkillsGrid {
       category: 'programming',
       gridArea: 'prog',
       skills: [
-        {name: 'TypeScript', icon: 'typescript', url: 'https://www.typescriptlang.org/'},
-        {name: 'JavaScript', icon: 'javascript', url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript'},
-        {name: 'Angular', icon: 'angular', url: 'https://angular.dev/'},
-        {name: 'Java', icon: 'java', url: 'https://www.java.com/'},
-        {name: 'Spring', icon: 'java-spring', url: 'https://spring.io/'},
-        {name: 'C#', icon: 'c-sharp', url: 'https://learn.microsoft.com/en-us/dotnet/csharp/'},
-        {name: '.NET', icon: 'c-sharp-net', url: 'https://dotnet.microsoft.com/'},
-        {name: 'Kafka', icon: 'kafka', url: 'https://kafka.apache.org/'},
-        {name: 'Elasticsearch', icon: 'elasticseach', url: 'https://www.elastic.co/'},
+        { name: 'TypeScript', icon: 'typescript', url: 'https://www.typescriptlang.org/' },
+        {
+          name: 'JavaScript',
+          icon: 'javascript',
+          url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript',
+        },
+        { name: 'Angular', icon: 'angular', url: 'https://angular.dev/' },
+        { name: 'Java', icon: 'java', url: 'https://www.java.com/' },
+        { name: 'Spring', icon: 'java-spring', url: 'https://spring.io/' },
+        { name: 'C#', icon: 'c-sharp', url: 'https://learn.microsoft.com/en-us/dotnet/csharp/' },
+        { name: '.NET', icon: 'c-sharp-net', url: 'https://dotnet.microsoft.com/' },
+        { name: 'Kafka', icon: 'kafka', url: 'https://kafka.apache.org/' },
+        { name: 'Elasticsearch', icon: 'elasticseach', url: 'https://www.elastic.co/' },
       ],
     },
     {
@@ -33,10 +35,14 @@ export class SkillsGrid {
       category: 'db',
       gridArea: 'db',
       skills: [
-        {name: 'SQL Server', icon: 'microsoftsqlserver', url: 'https://www.microsoft.com/en-us/sql-server'},
-        {name: 'PostgreSQL', icon: 'postgresql', url: 'https://www.postgresql.org/'},
-        {name: 'MySQL', icon: 'mysql', url: 'https://www.mysql.com/'},
-        {name: 'MariaDB', icon: 'mariadb', url: 'https://mariadb.org/'},
+        {
+          name: 'SQL Server',
+          icon: 'microsoftsqlserver',
+          url: 'https://www.microsoft.com/en-us/sql-server',
+        },
+        { name: 'PostgreSQL', icon: 'postgresql', url: 'https://www.postgresql.org/' },
+        { name: 'MySQL', icon: 'mysql', url: 'https://www.mysql.com/' },
+        { name: 'MariaDB', icon: 'mariadb', url: 'https://mariadb.org/' },
       ],
     },
     {
@@ -44,13 +50,17 @@ export class SkillsGrid {
       category: 'devops',
       gridArea: 'devops',
       skills: [
-        {name: 'Kubernetes', icon: 'kubernetes', url: 'https://kubernetes.io/'},
-        {name: 'Docker', icon: 'docker', url: 'https://www.docker.com/'},
-        {name: 'GitLab', icon: 'gitlab', url: 'https://gitlab.com/'},
-        {name: 'Azure DevOps', icon: 'devops', url: 'https://azure.microsoft.com/en-us/products/devops'},
-        {name: 'Azure', icon: 'azure', url: 'https://azure.microsoft.com/'},
-        {name: 'Hetzner', icon: 'hetzner', url: 'https://www.hetzner.com/'},
-        {name: 'Netcup', icon: 'netcup', url: 'https://www.netcup.eu/'},
+        { name: 'Kubernetes', icon: 'kubernetes', url: 'https://kubernetes.io/' },
+        { name: 'Docker', icon: 'docker', url: 'https://www.docker.com/' },
+        { name: 'GitLab', icon: 'gitlab', url: 'https://gitlab.com/' },
+        {
+          name: 'Azure DevOps',
+          icon: 'devops',
+          url: 'https://azure.microsoft.com/en-us/products/devops',
+        },
+        { name: 'Azure', icon: 'azure', url: 'https://azure.microsoft.com/' },
+        { name: 'Hetzner', icon: 'hetzner', url: 'https://www.hetzner.com/' },
+        { name: 'Netcup', icon: 'netcup', url: 'https://www.netcup.eu/' },
       ],
     },
     {
@@ -58,10 +68,10 @@ export class SkillsGrid {
       category: 'os',
       gridArea: 'os',
       skills: [
-        {name: 'Arch Linux', icon: 'arch', url: 'https://archlinux.org/'},
-        {name: 'Ubuntu', icon: 'ubuntu', url: 'https://ubuntu.com/'},
-        {name: 'macOS', icon: 'macos', url: 'https://www.apple.com/macos/'},
-        {name: 'Windows', icon: 'windows', url: 'https://www.microsoft.com/windows'},
+        { name: 'Arch Linux', icon: 'arch', url: 'https://archlinux.org/' },
+        { name: 'Ubuntu', icon: 'ubuntu', url: 'https://ubuntu.com/' },
+        { name: 'macOS', icon: 'macos', url: 'https://www.apple.com/macos/' },
+        { name: 'Windows', icon: 'windows', url: 'https://www.microsoft.com/windows' },
       ],
     },
     {
@@ -69,8 +79,8 @@ export class SkillsGrid {
       category: 'iac',
       gridArea: 'iac',
       skills: [
-        {name: 'Terraform', icon: 'terraform', url: 'https://www.terraform.io/'},
-        {name: 'Ansible', icon: 'ansible', url: 'https://www.ansible.com/'},
+        { name: 'Terraform', icon: 'terraform', url: 'https://www.terraform.io/' },
+        { name: 'Ansible', icon: 'ansible', url: 'https://www.ansible.com/' },
       ],
     },
     {
@@ -78,8 +88,12 @@ export class SkillsGrid {
       category: 'hyperviser',
       gridArea: 'hyper',
       skills: [
-        {name: 'Proxmox', icon: 'proxmox', url: 'https://www.proxmox.com/'},
-        {name: 'Hyper-V', icon: 'hyperv', url: 'https://learn.microsoft.com/en-us/virtualization/hyper-v-on-windows/'},
+        { name: 'Proxmox', icon: 'proxmox', url: 'https://www.proxmox.com/' },
+        {
+          name: 'Hyper-V',
+          icon: 'hyperv',
+          url: 'https://learn.microsoft.com/en-us/virtualization/hyper-v-on-windows/',
+        },
       ],
     },
     {
@@ -87,9 +101,13 @@ export class SkillsGrid {
       category: 'tools',
       gridArea: 'tools',
       skills: [
-        {name: 'JetBrains', icon: 'jetbrains', url: 'https://www.jetbrains.com/'},
-        {name: 'Visual Studio', icon: 'vs', url: 'https://visualstudio.microsoft.com/'},
-        {name: 'Microsoft Office', icon: 'office', url: 'https://www.microsoft.com/microsoft-365'},
+        { name: 'JetBrains', icon: 'jetbrains', url: 'https://www.jetbrains.com/' },
+        { name: 'Visual Studio', icon: 'vs', url: 'https://visualstudio.microsoft.com/' },
+        {
+          name: 'Microsoft Office',
+          icon: 'office',
+          url: 'https://www.microsoft.com/microsoft-365',
+        },
       ],
     },
   ];

src/app/components/pages/skills/skills.html

@@ -1,5 +1,7 @@
 <div class="main">
-  <h1>Antonio Ledebuhr</h1>
-  <p>Software Engineering & DevOps</p>
+  @if (page(); as copy) {
+    <h1>{{ copy.title }}</h1>
+    <p>{{ copy.description }}</p>
+  }
   <app-skills-grid></app-skills-grid>
 </div>

src/app/components/pages/skills/skills.scss

@@ -4,17 +4,19 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #fff;
-  font-family: system-ui, sans-serif;
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  padding: var(--space-8) var(--content-gutter);
 }
 
 h1 {
-  font-size: 3rem;
+  font-size: var(--text-3xl);
   font-weight: 600;
+  line-height: var(--leading-tight);
   margin: 0;
 }
 
 p {
-  color: rgba(255, 255, 255, 0.5);
-  margin: 0.5rem 0 3rem;
+  color: var(--color-text-muted);
+  margin: var(--space-2) 0 var(--space-9);
 }

src/app/components/pages/skills/skills.spec.ts

@@ -1,5 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { PLACEHOLDER_CONTENT } from '../../../core/content/placeholder-content';
+import { SITE_CONTENT } from '../../../core/content/content.token';
+import { SITE_CONFIG } from '../../../core/content/site-config';
 import { Skills } from './skills';
 
 describe('Skills', () => {
@@ -8,9 +10,9 @@ describe('Skills', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Skills]
-    })
-    .compileComponents();
+      imports: [Skills],
+      providers: [{ provide: SITE_CONTENT, useValue: PLACEHOLDER_CONTENT }],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(Skills);
     component = fixture.componentInstance;
@@ -20,4 +22,10 @@ describe('Skills', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('renders the localized stack title instead of the person name', () => {
+    const heading = (fixture.nativeElement as HTMLElement).querySelector('h1');
+    expect(heading?.textContent?.trim()).toBe('Stack');
+    expect(heading?.textContent).not.toContain(SITE_CONFIG.personName);
+  });
 });

src/app/components/pages/skills/skills.ts

@@ -1,14 +1,14 @@
-import { Component } from '@angular/core';
-import {SkillsGrid} from './skills-grid/skills-grid';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../../core/content/content.service';
+import { SkillsGrid } from './skills-grid/skills-grid';
 
 @Component({
   selector: 'app-skills',
-  imports: [
-    SkillsGrid
-  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SkillsGrid],
   templateUrl: './skills.html',
   styleUrl: './skills.scss',
 })
 export class Skills {
-
+  protected readonly page = inject(ContentService).page('stack');
 }

src/app/core/content/content.contracts.ts

@@ -0,0 +1,50 @@
+import { type RouteId } from '../routing/route-ids';
+
+/**
+ * Copy roles stay separate on purpose:
+ * - headline is the serious heading used for SEO and page structure
+ * - proof is only ever a verifiable statement
+ * - playfulLine is an optional wordplay hook that is never a capability claim
+ * - cta lives on CtaCopy so action labels stay swappable
+ */
+export interface CopyBlock {
+  readonly headline: string;
+  readonly proof?: string;
+  readonly playfulLine?: string;
+  readonly body?: readonly string[];
+}
+
+export interface CtaCopy {
+  readonly label: string;
+  readonly routeId?: RouteId;
+  readonly href?: string;
+  readonly external?: boolean;
+}
+
+export interface SectionCopy extends CopyBlock {
+  readonly id: string;
+}
+
+export interface PageCopy {
+  readonly routeId: RouteId;
+  readonly title: string;
+  readonly description: string;
+  readonly hero: CopyBlock;
+  readonly sections: readonly SectionCopy[];
+  readonly ctas: readonly CtaCopy[];
+}
+
+export interface CaseStudySummary {
+  readonly id: string;
+  readonly client: string;
+  readonly headline: string;
+  readonly proof?: string;
+  readonly tags: readonly string[];
+  readonly routeId?: RouteId;
+}
+
+export type LocalizedPages = Partial<Record<RouteId, PageCopy>>;
+
+export interface SiteContent {
+  readonly pages: LocalizedPages;
+}

src/app/core/content/content.service.ts

@@ -0,0 +1,15 @@
+import { computed, inject, Injectable, type Signal } from '@angular/core';
+import { LocaleService } from '../i18n/locale.service';
+import { type RouteId } from '../routing/route-ids';
+import { type PageCopy } from './content.contracts';
+import { SITE_CONTENT } from './content.token';
+
+@Injectable({ providedIn: 'root' })
+export class ContentService {
+  private readonly localeService = inject(LocaleService);
+  private readonly content = inject(SITE_CONTENT);
+
+  page(routeId: RouteId): Signal<PageCopy | undefined> {
+    return computed(() => this.content[this.localeService.locale()].pages[routeId]);
+  }
+}

src/app/core/content/content.token.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+import { type AppLocale } from '../i18n/locale';
+import { type SiteContent } from './content.contracts';
+
+export const SITE_CONTENT = new InjectionToken<Record<AppLocale, SiteContent>>('SITE_CONTENT');

src/app/core/content/placeholder-content.ts

@@ -0,0 +1,58 @@
+import { type AppLocale } from '../i18n/locale';
+import { ROUTE_IDS, type RouteId } from '../routing/route-ids';
+import { type PageCopy, type SiteContent } from './content.contracts';
+
+const PAGE_TITLES: Record<RouteId, Record<AppLocale, string>> = {
+  home: { de: 'Startseite', en: 'Home' },
+  services: { de: 'Leistungen', en: 'Services' },
+  servicesSoftware: { de: 'Software', en: 'Software' },
+  servicesHardwareNetwork: { de: 'Hardware und Netzwerk', en: 'Hardware and network' },
+  servicesClusters: { de: 'Cluster', en: 'Clusters' },
+  servicesAi: { de: 'KI-Integration', en: 'AI integration' },
+  projects: { de: 'Projekte', en: 'Projects' },
+  stack: { de: 'Stack', en: 'Stack' },
+  about: { de: 'Über mich', en: 'About' },
+  contact: { de: 'Kontakt', en: 'Contact' },
+  imprint: { de: 'Impressum', en: 'Legal notice' },
+  privacy: { de: 'Datenschutz', en: 'Privacy' },
+  notFound: { de: 'Seite nicht gefunden', en: 'Page not found' },
+};
+
+function scaffoldPage(routeId: RouteId, locale: AppLocale): PageCopy {
+  const title = PAGE_TITLES[routeId][locale];
+  const description =
+    locale === 'de' ? 'Diese Seite wird derzeit aufgebaut.' : 'This page is being built.';
+
+  return {
+    routeId,
+    title,
+    description,
+    hero: {
+      headline: title,
+      body: [description],
+    },
+    sections: [],
+    ctas:
+      routeId === 'notFound'
+        ? [
+            {
+              label: locale === 'de' ? 'Zur Startseite' : 'Back to home',
+              routeId: 'home',
+            },
+          ]
+        : [],
+  };
+}
+
+function pagesFor(locale: AppLocale): SiteContent {
+  const pages = Object.fromEntries(
+    ROUTE_IDS.map((routeId) => [routeId, scaffoldPage(routeId, locale)]),
+  ) as Record<RouteId, PageCopy>;
+
+  return { pages };
+}
+
+export const PLACEHOLDER_CONTENT: Record<AppLocale, SiteContent> = {
+  de: pagesFor('de'),
+  en: pagesFor('en'),
+};

src/app/core/content/shell-copy.ts

@@ -0,0 +1,49 @@
+import { type AppLocale } from '../i18n/locale';
+
+export interface ShellCopy {
+  readonly skipLink: string;
+  readonly primaryNavLabel: string;
+  readonly footerNavLabel: string;
+  readonly menuOpen: string;
+  readonly menuClose: string;
+  readonly languageSwitch: string;
+  readonly otherLocaleName: string;
+  readonly cvLabel: string;
+  readonly contactCta: string;
+  readonly scaffoldingNote: string;
+  readonly legalReviewNotice: string;
+  readonly notFoundHomeLabel: string;
+}
+
+export const SHELL_COPY: Record<AppLocale, ShellCopy> = {
+  de: {
+    skipLink: 'Zum Inhalt springen',
+    primaryNavLabel: 'Hauptnavigation',
+    footerNavLabel: 'Fußzeilen-Navigation',
+    menuOpen: 'Menü öffnen',
+    menuClose: 'Menü schließen',
+    languageSwitch: 'Zur englischen Version wechseln',
+    otherLocaleName: 'English',
+    cvLabel: 'Lebenslauf als PDF',
+    contactCta: 'Kontakt',
+    scaffoldingNote: 'Hinweis: Der endgültige Inhalt folgt. Diese Seite ist ein Gerüst.',
+    legalReviewNotice:
+      'Platzhalter: Dieser Rechtstext ist ungeprüft und muss vor der Veröffentlichung vom Seitenbetreiber geprüft werden.',
+    notFoundHomeLabel: 'Zur Startseite',
+  },
+  en: {
+    skipLink: 'Skip to content',
+    primaryNavLabel: 'Primary navigation',
+    footerNavLabel: 'Footer navigation',
+    menuOpen: 'Open menu',
+    menuClose: 'Close menu',
+    languageSwitch: 'Switch to the German version',
+    otherLocaleName: 'Deutsch',
+    cvLabel: 'Curriculum vitae as PDF',
+    contactCta: 'Contact',
+    scaffoldingNote: 'Note: Final content follows. This page is scaffolding.',
+    legalReviewNotice:
+      'Placeholder: This legal text is unreviewed and must be checked by the site owner before publication.',
+    notFoundHomeLabel: 'Back to home',
+  },
+};

src/app/core/content/site-config.ts

@@ -0,0 +1,7 @@
+export const SITE_CONFIG = {
+  personName: 'Antonio Ledebuhr',
+  contactEmail: 'info@antoniolede.de',
+  cvAssetPath: '/cv/CV.pdf',
+  cvDownloadFileName: 'Antonio-Ledebuhr-CV.pdf',
+  calendarUrl: null,
+} as const;

src/app/core/i18n/locale.resolver.ts

@@ -0,0 +1,11 @@
+import { inject } from '@angular/core';
+import { type ResolveFn } from '@angular/router';
+import { DEFAULT_LOCALE, isAppLocale, type AppLocale } from './locale';
+import { LocaleService } from './locale.service';
+
+export const localeResolver: ResolveFn<AppLocale> = (route) => {
+  const localeValue: unknown = route.data['locale'];
+  const locale = isAppLocale(localeValue) ? localeValue : DEFAULT_LOCALE;
+  inject(LocaleService).setLocale(locale);
+  return locale;
+};

src/app/core/i18n/locale.service.ts

@@ -0,0 +1,25 @@
+import { computed, inject, Injectable, signal } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { DEFAULT_LOCALE, LOCALE_HTML_LANG, type AppLocale } from './locale';
+
+@Injectable({ providedIn: 'root' })
+export class LocaleService {
+  private readonly document = inject(DOCUMENT);
+  private readonly localeSignal = signal<AppLocale>(DEFAULT_LOCALE);
+
+  readonly locale = this.localeSignal.asReadonly();
+  readonly htmlLang = computed(() => LOCALE_HTML_LANG[this.localeSignal()]);
+
+  constructor() {
+    this.applyHtmlLang(DEFAULT_LOCALE);
+  }
+
+  setLocale(locale: AppLocale): void {
+    this.localeSignal.set(locale);
+    this.applyHtmlLang(locale);
+  }
+
+  private applyHtmlLang(locale: AppLocale): void {
+    this.document.documentElement.lang = LOCALE_HTML_LANG[locale];
+  }
+}

src/app/core/i18n/locale.spec.ts

@@ -0,0 +1,44 @@
+import { DOCUMENT } from '@angular/common';
+import { TestBed } from '@angular/core/testing';
+import { DEFAULT_LOCALE, isAppLocale, otherLocale } from './locale';
+import { LocaleService } from './locale.service';
+
+describe('locale helpers', () => {
+  it('defaults to German', () => {
+    expect(DEFAULT_LOCALE).toBe('de');
+  });
+
+  it('accepts only de and en', () => {
+    expect(isAppLocale('de')).toBe(true);
+    expect(isAppLocale('en')).toBe(true);
+    expect(isAppLocale('fr')).toBe(false);
+    expect(isAppLocale('')).toBe(false);
+    expect(isAppLocale(null)).toBe(false);
+  });
+
+  it('round-trips the other locale', () => {
+    expect(otherLocale('de')).toBe('en');
+    expect(otherLocale('en')).toBe('de');
+    expect(otherLocale(otherLocale('de'))).toBe('de');
+  });
+});
+
+describe('LocaleService', () => {
+  it('updates the locale signal and the document lang attribute', () => {
+    TestBed.configureTestingModule({});
+    const service = TestBed.inject(LocaleService);
+    const document = TestBed.inject(DOCUMENT);
+
+    expect(service.locale()).toBe('de');
+    expect(document.documentElement.lang).toBe('de-DE');
+
+    service.setLocale('en');
+    expect(service.locale()).toBe('en');
+    expect(service.htmlLang()).toBe('en');
+    expect(document.documentElement.lang).toBe('en');
+
+    service.setLocale('de');
+    expect(service.locale()).toBe('de');
+    expect(document.documentElement.lang).toBe('de-DE');
+  });
+});

src/app/core/i18n/locale.ts

@@ -0,0 +1,18 @@
+export type AppLocale = 'de' | 'en';
+
+export const APP_LOCALES: readonly AppLocale[] = ['de', 'en'];
+
+export const DEFAULT_LOCALE: AppLocale = 'de';
+
+export const LOCALE_HTML_LANG: Record<AppLocale, string> = {
+  de: 'de-DE',
+  en: 'en',
+};
+
+export function isAppLocale(value: unknown): value is AppLocale {
+  return value === 'de' || value === 'en';
+}
+
+export function otherLocale(locale: AppLocale): AppLocale {
+  return locale === 'de' ? 'en' : 'de';
+}

src/app/core/navigation/navigation.service.spec.ts

@@ -0,0 +1,43 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { routes } from '../../app.routes';
+import { PLACEHOLDER_CONTENT } from '../content/placeholder-content';
+import { SITE_CONTENT } from '../content/content.token';
+import { LocaleService } from '../i18n/locale.service';
+import { NavigationService } from './navigation.service';
+
+describe('NavigationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter(routes), { provide: SITE_CONTENT, useValue: PLACEHOLDER_CONTENT }],
+    });
+  });
+
+  it('maps a German route to its English counterpart and back', async () => {
+    const harness = await RouterTestingHarness.create();
+    const navigation = TestBed.inject(NavigationService);
+
+    await harness.navigateByUrl('/projekte');
+    expect(navigation.activeRouteId()).toBe('projects');
+    expect(navigation.alternateLocaleLink()).toEqual(['/', 'en', 'projects']);
+
+    await harness.navigateByUrl('/en/projects');
+    expect(navigation.activeRouteId()).toBe('projects');
+    expect(navigation.alternateLocaleLink()).toEqual(['/', 'projekte']);
+  });
+
+  it('builds links for the active locale', () => {
+    const navigation = TestBed.inject(NavigationService);
+    const locale = TestBed.inject(LocaleService);
+
+    locale.setLocale('de');
+    expect(navigation.link('projects')).toEqual(['/', 'projekte']);
+    expect(navigation.link('home')).toEqual(['/']);
+
+    locale.setLocale('en');
+    expect(navigation.link('projects')).toEqual(['/', 'en', 'projects']);
+    expect(navigation.link('home')).toEqual(['/', 'en']);
+    expect(navigation.link('contact', 'de')).toEqual(['/', 'kontakt']);
+  });
+});

src/app/core/navigation/navigation.service.ts

@@ -0,0 +1,77 @@
+import { computed, inject, Injectable, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+import { SITE_CONFIG } from '../content/site-config';
+import { otherLocale, type AppLocale } from '../i18n/locale';
+import { LocaleService } from '../i18n/locale.service';
+import { isAppRouteData } from '../routing/app-route-data';
+import { type RouteId } from '../routing/route-ids';
+import { routeCommands } from '../routing/route-paths';
+import { FOOTER_NAV, PRIMARY_NAV, type NavItem } from './navigation';
+
+export interface ResolvedNavItem {
+  readonly routeId: RouteId;
+  readonly label: string;
+  readonly link: unknown[];
+  readonly children?: readonly ResolvedNavItem[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class NavigationService {
+  private readonly localeService = inject(LocaleService);
+  private readonly router = inject(Router);
+  private readonly activeRouteIdSignal = signal<RouteId>('home');
+
+  readonly activeRouteId = this.activeRouteIdSignal.asReadonly();
+  readonly cvHref = SITE_CONFIG.cvAssetPath;
+  readonly contactLink = computed(() => this.link('contact'));
+  readonly primaryNav = computed(() => this.resolveItems(PRIMARY_NAV, this.localeService.locale()));
+  readonly footerNav = computed(() => this.resolveItems(FOOTER_NAV, this.localeService.locale()));
+
+  constructor() {
+    this.router.events
+      .pipe(
+        filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+        takeUntilDestroyed(),
+      )
+      .subscribe(() => this.syncFromRouter());
+
+    this.syncFromRouter();
+  }
+
+  link(routeId: RouteId, locale?: AppLocale): unknown[] {
+    return routeCommands(routeId, locale ?? this.localeService.locale());
+  }
+
+  alternateLocaleLink(): unknown[] {
+    const targetLocale = otherLocale(this.localeService.locale());
+    const current = this.activeRouteId();
+    const routeId = current === 'notFound' ? 'home' : current;
+    return routeCommands(routeId, targetLocale);
+  }
+
+  private resolveItems(items: readonly NavItem[], locale: AppLocale): ResolvedNavItem[] {
+    return items.map((item) => ({
+      routeId: item.routeId,
+      label: item.label[locale],
+      link: routeCommands(item.routeId, locale),
+      children: item.children ? this.resolveItems(item.children, locale) : undefined,
+    }));
+  }
+
+  private syncFromRouter(): void {
+    let snapshot = this.router.routerState.snapshot.root;
+
+    while (snapshot.firstChild) {
+      snapshot = snapshot.firstChild;
+    }
+
+    if (!isAppRouteData(snapshot.data)) {
+      return;
+    }
+
+    this.localeService.setLocale(snapshot.data.locale);
+    this.activeRouteIdSignal.set(snapshot.data.routeId);
+  }
+}

src/app/core/navigation/navigation.ts

@@ -0,0 +1,68 @@
+import { type AppLocale } from '../i18n/locale';
+import { type RouteId } from '../routing/route-ids';
+
+export interface NavItem {
+  readonly routeId: RouteId;
+  readonly label: Record<AppLocale, string>;
+  readonly children?: readonly NavItem[];
+}
+
+export const PRIMARY_NAV: readonly NavItem[] = [
+  {
+    routeId: 'home',
+    label: { de: 'Start', en: 'Home' },
+  },
+  {
+    routeId: 'services',
+    label: { de: 'Leistungen', en: 'Services' },
+    children: [
+      {
+        routeId: 'servicesSoftware',
+        label: { de: 'Software', en: 'Software' },
+      },
+      {
+        routeId: 'servicesHardwareNetwork',
+        label: { de: 'Hardware und Netzwerk', en: 'Hardware and network' },
+      },
+      {
+        routeId: 'servicesClusters',
+        label: { de: 'Cluster', en: 'Clusters' },
+      },
+      {
+        routeId: 'servicesAi',
+        label: { de: 'KI-Integration', en: 'AI integration' },
+      },
+    ],
+  },
+  {
+    routeId: 'projects',
+    label: { de: 'Projekte', en: 'Projects' },
+  },
+  {
+    routeId: 'stack',
+    label: { de: 'Stack', en: 'Stack' },
+  },
+  {
+    routeId: 'about',
+    label: { de: 'Über mich', en: 'About' },
+  },
+  {
+    routeId: 'contact',
+    label: { de: 'Kontakt', en: 'Contact' },
+  },
+];
+
+export const FOOTER_NAV: readonly NavItem[] = [
+  {
+    routeId: 'imprint',
+    label: { de: 'Impressum', en: 'Legal notice' },
+  },
+  {
+    routeId: 'privacy',
+    label: { de: 'Datenschutz', en: 'Privacy' },
+  },
+  {
+    routeId: 'contact',
+    label: { de: 'Kontakt', en: 'Contact' },
+  },
+];

src/app/core/platform/browser.spec.ts

@@ -0,0 +1,23 @@
+import { PLATFORM_ID } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import {
+  isBrowserPlatform,
+  prefersCoarsePointer,
+  prefersReducedMotion,
+  viewportMatches,
+} from './browser';
+
+describe('browser platform helpers', () => {
+  it('returns conservative defaults on the server without throwing', () => {
+    TestBed.configureTestingModule({
+      providers: [{ provide: PLATFORM_ID, useValue: 'server' }],
+    });
+
+    TestBed.runInInjectionContext(() => {
+      expect(isBrowserPlatform()).toBe(false);
+      expect(prefersReducedMotion()).toBe(false);
+      expect(prefersCoarsePointer()).toBe(false);
+      expect(viewportMatches('(min-width: 40rem)')).toBe(false);
+    });
+  });
+});

src/app/core/platform/browser.ts

@@ -0,0 +1,26 @@
+import { inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+export function isBrowserPlatform(): boolean {
+  return isPlatformBrowser(inject(PLATFORM_ID));
+}
+
+export function prefersReducedMotion(): boolean {
+  return mediaQueryMatches('(prefers-reduced-motion: reduce)');
+}
+
+export function prefersCoarsePointer(): boolean {
+  return mediaQueryMatches('(pointer: coarse)');
+}
+
+export function viewportMatches(query: string): boolean {
+  return mediaQueryMatches(query);
+}
+
+function mediaQueryMatches(query: string): boolean {
+  if (!isBrowserPlatform() || typeof window.matchMedia !== 'function') {
+    return false;
+  }
+
+  return window.matchMedia(query).matches;
+}

src/app/core/routing/app-route-data.ts

@@ -0,0 +1,16 @@
+import { isAppLocale, type AppLocale } from '../i18n/locale';
+import { type RouteId } from './route-ids';
+
+export interface AppRouteData {
+  readonly routeId: RouteId;
+  readonly locale: AppLocale;
+}
+
+export function isAppRouteData(value: unknown): value is AppRouteData {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+
+  const record = value as Record<string, unknown>;
+  return typeof record['routeId'] === 'string' && isAppLocale(record['locale']);
+}

src/app/core/routing/route-ids.ts

@@ -0,0 +1,30 @@
+export type RouteId =
+  | 'home'
+  | 'services'
+  | 'servicesSoftware'
+  | 'servicesHardwareNetwork'
+  | 'servicesClusters'
+  | 'servicesAi'
+  | 'projects'
+  | 'stack'
+  | 'about'
+  | 'contact'
+  | 'imprint'
+  | 'privacy'
+  | 'notFound';
+
+export const ROUTE_IDS: readonly RouteId[] = [
+  'home',
+  'services',
+  'servicesSoftware',
+  'servicesHardwareNetwork',
+  'servicesClusters',
+  'servicesAi',
+  'projects',
+  'stack',
+  'about',
+  'contact',
+  'imprint',
+  'privacy',
+  'notFound',
+];

src/app/core/routing/route-paths.spec.ts

@@ -0,0 +1,46 @@
+import { APP_LOCALES } from '../i18n/locale';
+import { ROUTE_IDS, type RouteId } from './route-ids';
+import { prerenderablePaths, routePath, ROUTE_SEGMENTS } from './route-paths';
+
+describe('route paths', () => {
+  const addressableIds = ROUTE_IDS.filter((routeId) => routeId !== 'notFound');
+
+  it('defines every route id in both locales', () => {
+    for (const locale of APP_LOCALES) {
+      for (const routeId of ROUTE_IDS) {
+        expect(ROUTE_SEGMENTS[locale][routeId]).toBeTypeOf('string');
+      }
+    }
+  });
+
+  it('has no duplicate addressable paths within a locale', () => {
+    for (const locale of APP_LOCALES) {
+      const paths = addressableIds.map((routeId) => routePath(routeId, locale));
+      expect(new Set(paths).size).toBe(paths.length);
+    }
+  });
+
+  it('builds the expected home and projects paths', () => {
+    expect(routePath('home', 'de')).toBe('/');
+    expect(routePath('home', 'en')).toBe('/en');
+    expect(routePath('projects', 'de')).toBe('/projekte');
+    expect(routePath('projects', 'en')).toBe('/en/projects');
+  });
+
+  it('includes both locales in prerenderable paths and excludes the wildcard', () => {
+    const paths = prerenderablePaths();
+
+    expect(paths).toContain('/');
+    expect(paths).toContain('/en');
+    expect(paths).toContain('/projekte');
+    expect(paths).toContain('/en/projects');
+    expect(paths.some((path) => path.includes('**'))).toBe(false);
+    expect(paths).not.toContain('');
+
+    for (const locale of APP_LOCALES) {
+      for (const routeId of addressableIds) {
+        expect(paths).toContain(routePath(routeId as RouteId, locale));
+      }
+    }
+  });
+});

src/app/core/routing/route-paths.ts

@@ -0,0 +1,83 @@
+import { APP_LOCALES, type AppLocale } from '../i18n/locale';
+import { ROUTE_IDS, type RouteId } from './route-ids';
+
+export const LOCALE_PREFIX: Record<AppLocale, string> = {
+  de: '',
+  en: 'en',
+};
+
+export const ROUTE_SEGMENTS: Record<AppLocale, Record<RouteId, string>> = {
+  de: {
+    home: '',
+    services: 'leistungen',
+    servicesSoftware: 'leistungen/software',
+    servicesHardwareNetwork: 'leistungen/hardware-netzwerk',
+    servicesClusters: 'leistungen/cluster',
+    servicesAi: 'leistungen/ai-integration',
+    projects: 'projekte',
+    stack: 'stack',
+    about: 'ueber-mich',
+    contact: 'kontakt',
+    imprint: 'impressum',
+    privacy: 'datenschutz',
+    notFound: '**',
+  },
+  en: {
+    home: '',
+    services: 'services',
+    servicesSoftware: 'services/software',
+    servicesHardwareNetwork: 'services/hardware-network',
+    servicesClusters: 'services/clusters',
+    servicesAi: 'services/ai-integration',
+    projects: 'projects',
+    stack: 'stack',
+    about: 'about',
+    contact: 'contact',
+    imprint: 'legal-notice',
+    privacy: 'privacy',
+    notFound: '**',
+  },
+};
+
+export function routePath(routeId: RouteId, locale: AppLocale): string {
+  if (routeId === 'notFound') {
+    return '';
+  }
+
+  const prefix = LOCALE_PREFIX[locale];
+  const segment = ROUTE_SEGMENTS[locale][routeId];
+  const parts = [prefix, segment].filter((part) => part.length > 0);
+  return parts.length === 0 ? '/' : `/${parts.join('/')}`;
+}
+
+export function routeCommands(routeId: RouteId, locale: AppLocale): unknown[] {
+  if (routeId === 'notFound') {
+    return ['/'];
+  }
+
+  const commands: string[] = ['/'];
+  const prefix = LOCALE_PREFIX[locale];
+  const segment = ROUTE_SEGMENTS[locale][routeId];
+
+  if (prefix.length > 0) {
+    commands.push(prefix);
+  }
+
+  if (segment.length > 0) {
+    commands.push(...segment.split('/'));
+  }
+
+  return commands;
+}
+
+export function prerenderablePaths(): readonly string[] {
+  return APP_LOCALES.flatMap((locale) =>
+    ROUTE_IDS.filter((routeId) => routeId !== 'notFound').map((routeId) =>
+      routePath(routeId, locale),
+    ),
+  );
+}
+
+export function prerenderableServerPaths(): readonly string[] {
+  return prerenderablePaths().map((path) => (path === '/' ? '' : path.slice(1)));
+}

src/app/features/about/about.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/about/about.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../core/content/content.service';
+import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-about-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './about.html',
+})
+export class AboutPage {
+  protected readonly page = inject(ContentService).page('about');
+}

src/app/features/contact/contact.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/contact/contact.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../core/content/content.service';
+import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-contact-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './contact.html',
+})
+export class ContactPage {
+  protected readonly page = inject(ContentService).page('contact');
+}

src/app/features/home/home.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/home/home.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../core/content/content.service';
+import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-home-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './home.html',
+})
+export class HomePage {
+  protected readonly page = inject(ContentService).page('home');
+}

src/app/features/imprint/imprint.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/imprint/imprint.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../core/content/content.service';
+import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-imprint-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './imprint.html',
+})
+export class ImprintPage {
+  protected readonly page = inject(ContentService).page('imprint');
+}

src/app/features/not-found/not-found.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/not-found/not-found.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../core/content/content.service';
+import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-not-found-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './not-found.html',
+})
+export class NotFoundPage {
+  protected readonly page = inject(ContentService).page('notFound');
+}

src/app/features/privacy/privacy.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/privacy/privacy.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../core/content/content.service';
+import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-privacy-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './privacy.html',
+})
+export class PrivacyPage {
+  protected readonly page = inject(ContentService).page('privacy');
+}

src/app/features/projects/projects.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/projects/projects.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../core/content/content.service';
+import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-projects-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './projects.html',
+})
+export class ProjectsPage {
+  protected readonly page = inject(ContentService).page('projects');
+}

src/app/features/services/ai-integration/ai-integration.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/services/ai-integration/ai-integration.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../../core/content/content.service';
+import { PagePlaceholder } from '../../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-services-ai-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './ai-integration.html',
+})
+export class ServicesAiPage {
+  protected readonly page = inject(ContentService).page('servicesAi');
+}

src/app/features/services/clusters/clusters.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/services/clusters/clusters.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../../core/content/content.service';
+import { PagePlaceholder } from '../../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-services-clusters-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './clusters.html',
+})
+export class ServicesClustersPage {
+  protected readonly page = inject(ContentService).page('servicesClusters');
+}

src/app/features/services/hardware-network/hardware-network.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/services/hardware-network/hardware-network.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../../core/content/content.service';
+import { PagePlaceholder } from '../../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-services-hardware-network-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './hardware-network.html',
+})
+export class ServicesHardwareNetworkPage {
+  protected readonly page = inject(ContentService).page('servicesHardwareNetwork');
+}

src/app/features/services/services.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/services/services.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../core/content/content.service';
+import { PagePlaceholder } from '../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-services-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './services.html',
+})
+export class ServicesPage {
+  protected readonly page = inject(ContentService).page('services');
+}

src/app/features/services/software/software.html

@@ -0,0 +1,3 @@
+@if (page(); as copy) {
+  <app-page-placeholder [page]="copy" />
+}

src/app/features/services/software/software.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ContentService } from '../../../core/content/content.service';
+import { PagePlaceholder } from '../../../shared/page-placeholder/page-placeholder';
+
+@Component({
+  selector: 'app-services-software-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PagePlaceholder],
+  templateUrl: './software.html',
+})
+export class ServicesSoftwarePage {
+  protected readonly page = inject(ContentService).page('servicesSoftware');
+}

src/app/features/stack/stack.html

@@ -0,0 +1 @@
+<app-skills />

src/app/features/stack/stack.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Skills } from '../../components/pages/skills/skills';
+
+@Component({
+  selector: 'app-stack-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [Skills],
+  templateUrl: './stack.html',
+})
+export class StackPage {}

src/app/models/skill-category.ts

@@ -1,4 +1,4 @@
-import {Skill} from './skill';
+import { Skill } from './skill';
 
 export interface SkillCategory {
   title: string;

src/app/service/device-detection-service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { DeviceDetectionService } from './device-detection-service';
-
-describe('DeviceDetectionService', () => {
-  let service: DeviceDetectionService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(DeviceDetectionService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/service/device-detection-service.ts

@@ -1,15 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class DeviceDetectionService {
-  public mobileCheck() {
-    let check = false;
-    (function (a) {
-      if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)))
-        check = true
-    })(navigator.userAgent || navigator.vendor || (window as any).opera);
-    return check;
-  };
-}

src/app/shared/page-placeholder/page-placeholder.html

@@ -0,0 +1,13 @@
+<article class="content-container stack page">
+  <h1>{{ page().title }}</h1>
+  <p class="lead">{{ page().description }}</p>
+  <aside class="scaffolding-note" role="note">{{ shell().scaffoldingNote }}</aside>
+  @if (showLegalNotice()) {
+    <p class="legal-notice" role="note">{{ shell().legalReviewNotice }}</p>
+  }
+  @if (isNotFound()) {
+    <p>
+      <a [routerLink]="homeLink()">{{ shell().notFoundHomeLabel }}</a>
+    </p>
+  }
+</article>

src/app/shared/page-placeholder/page-placeholder.scss

@@ -0,0 +1,31 @@
+.page {
+  padding-block: var(--space-10);
+}
+
+.lead {
+  color: var(--color-text-muted);
+  font-size: var(--text-lg);
+  max-width: 40rem;
+}
+
+.scaffolding-note,
+.legal-notice {
+  margin: 0;
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+}
+
+.scaffolding-note {
+  border-left: var(--focus-ring-width) solid var(--color-accent);
+  background: var(--color-surface-raised);
+}
+
+.legal-notice {
+  border: 1px solid var(--color-accent-strong);
+  background: var(--color-surface-overlay);
+}
+
+a {
+  color: var(--color-accent-cool);
+}

src/app/shared/page-placeholder/page-placeholder.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { type PageCopy } from '../../core/content/content.contracts';
+import { SHELL_COPY } from '../../core/content/shell-copy';
+import { LocaleService } from '../../core/i18n/locale.service';
+import { NavigationService } from '../../core/navigation/navigation.service';
+
+@Component({
+  selector: 'app-page-placeholder',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink],
+  templateUrl: './page-placeholder.html',
+  styleUrl: './page-placeholder.scss',
+})
+export class PagePlaceholder {
+  readonly page = input.required<PageCopy>();
+
+  private readonly localeService = inject(LocaleService);
+  private readonly navigation = inject(NavigationService);
+
+  protected readonly shell = computed(() => SHELL_COPY[this.localeService.locale()]);
+  protected readonly homeLink = computed(() => this.navigation.link('home'));
+  protected readonly isNotFound = computed(() => this.page().routeId === 'notFound');
+  protected readonly showLegalNotice = computed(() => {
+    const routeId = this.page().routeId;
+    return routeId === 'imprint' || routeId === 'privacy';
+  });
+}