From 132a7cd344cab435f2ee32dbfb9b1b6da7bd55de Mon Sep 17 00:00:00 2001
From: LucaP <luca.pislaru@protonmail.com>
Date: Wed, 2 Sep 2026 16:40:46 +0300
Subject: [PATCH] feat: add infrastructure flow and official iconography

---
 docs/third-party-notices.md              |   9 +
 package-lock.json                        |  20 +++
 package.json                             |   1 +
 src/components/BrandIcon.vue             |  19 ++
 src/components/ContactDestination.vue    |   6 +-
 src/components/InfrastructureDiagram.vue |  60 +++++--
 src/components/ToolkitGrid.vue           |  11 +-
 src/icons/brand-icons.ts                 | 129 ++++++++++++++
 src/styles/components.css                | 214 ++++++++++++++++++++---
 tests/browser/accessibility-axe.spec.ts  |   6 +-
 tests/browser/no-javascript.spec.ts      |   1 -
 tests/browser/responsive-layout.spec.ts  |  29 +++
 tests/unit/brand-icons.test.ts           |  47 +++++
 tests/unit/components.test.ts            |  23 ++-
 14 files changed, 520 insertions(+), 55 deletions(-)
 create mode 100644 src/components/BrandIcon.vue
 create mode 100644 src/icons/brand-icons.ts
 create mode 100644 tests/unit/brand-icons.test.ts

diff --git a/docs/third-party-notices.md b/docs/third-party-notices.md
index 8ac8e8d..692e3d8 100644
--- a/docs/third-party-notices.md
+++ b/docs/third-party-notices.md
@@ -30,3 +30,12 @@ The complete license text is distributed in `node_modules/@fontsource-variable/g
 - License: MIT
 
 The complete license text is distributed in `node_modules/@phosphor-icons/vue/LICENSE` during development and dependency review.
+
+## Simple Icons
+
+- Package: `simple-icons` version 16.29.0
+- Copyright: Simple Icons contributors
+- Package source: https://github.com/simple-icons/simple-icons
+- License: CC0 1.0 Universal
+
+The complete license text is distributed in `node_modules/simple-icons/LICENSE.md` during development and dependency review. Product names and marks remain the property of their respective owners; inclusion identifies the technologies used and does not imply endorsement.
diff --git a/package-lock.json b/package-lock.json
index db5cf81..ee19637 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@fontsource-variable/geist-mono": "5.3.0",
         "@phosphor-icons/vue": "2.2.1",
         "canonicalize": "2.1.0",
+        "simple-icons": "16.29.0",
         "three": "^0.185.1",
         "vue": "^3.5.42",
         "zod": "^4.5.4"
@@ -6186,6 +6187,25 @@
         "simple-concat": "^1.0.0"
       }
     },
+    "node_modules/simple-icons": {
+      "version": "16.29.0",
+      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-16.29.0.tgz",
+      "integrity": "sha512-4H94f5ZgcCcgJroc902TFlFdgPu2IU2eD7+WebN2Z14xKYrKHeJ4UQcZwzgSuH4Rgzw+jp7sbHl40NefuIEYsg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/simple-icons"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/simple-icons"
+        }
+      ],
+      "license": "CC0-1.0",
+      "engines": {
+        "node": ">=0.12.18"
+      }
+    },
     "node_modules/slide": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
diff --git a/package.json b/package.json
index 224dfdb..ce50304 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@fontsource-variable/geist-mono": "5.3.0",
     "@phosphor-icons/vue": "2.2.1",
     "canonicalize": "2.1.0",
+    "simple-icons": "16.29.0",
     "three": "^0.185.1",
     "vue": "^3.5.42",
     "zod": "^4.5.4"
diff --git a/src/components/BrandIcon.vue b/src/components/BrandIcon.vue
new file mode 100644
index 0000000..9ff063f
--- /dev/null
+++ b/src/components/BrandIcon.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { brandIconFor } from '@/icons/brand-icons';
+
+const props = defineProps<{ label: string }>();
+const icon = computed(() => brandIconFor(props.label));
+</script>
+
+<template>
+  <svg
+    class="brand-icon"
+    :data-brand-icon="label"
+    :viewBox="icon.viewBox"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path :d="icon.path" fill="currentColor" />
+  </svg>
+</template>
diff --git a/src/components/ContactDestination.vue b/src/components/ContactDestination.vue
index ea8af78..9ab4f3a 100644
--- a/src/components/ContactDestination.vue
+++ b/src/components/ContactDestination.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BrandIcon from './BrandIcon.vue';
 import type { ContactContent } from '@/content/types';
 
 defineProps<{
@@ -15,7 +16,10 @@ defineProps<{
   </div>
   <ul class="contact-social">
     <li v-for="link in contact.social" :key="link.service">
-      <a class="contact-social-link" :href="link.url" target="_blank" rel="noopener noreferrer">{{ link.service }}</a>
+      <a class="contact-social-link" :href="link.url" target="_blank" rel="noopener noreferrer">
+        <BrandIcon :label="link.service" />
+        <span>{{ link.service }}</span>
+      </a>
     </li>
   </ul>
 </template>
diff --git a/src/components/InfrastructureDiagram.vue b/src/components/InfrastructureDiagram.vue
index 1d70074..e45c4df 100644
--- a/src/components/InfrastructureDiagram.vue
+++ b/src/components/InfrastructureDiagram.vue
@@ -5,23 +5,57 @@ defineProps<{ infrastructure: Readonly<InfrastructureCaseStudy> }>();
 </script>
 
 <template>
-  <article>
-    <h3>{{ infrastructure.title }}</h3>
-    <p>{{ infrastructure.summary }}</p>
-    <figure>
-      <svg
-        viewBox="0 0 800 240"
+  <article class="infrastructure-case">
+    <h3 :id="`${infrastructure.id}-diagram-title`">{{ infrastructure.title }}</h3>
+    <p :id="`${infrastructure.id}-diagram-description`">{{ infrastructure.summary }}</p>
+    <figure class="infrastructure-flow-figure">
+      <div
+        class="infrastructure-flow"
+        data-testid="infrastructure-flow"
         role="img"
         :aria-labelledby="`${infrastructure.id}-diagram-title`"
         :aria-describedby="`${infrastructure.id}-diagram-description`"
       >
-        <title :id="`${infrastructure.id}-diagram-title`">{{ infrastructure.title }}</title>
-        <desc :id="`${infrastructure.id}-diagram-description`">{{ infrastructure.summary }}</desc>
-        <g v-for="(band, index) in infrastructure.bands" :key="band.id" :transform="`translate(${40 + index * 190} 70)`">
-          <rect width="150" height="100" rx="8" />
-          <text x="75" y="50" text-anchor="middle">{{ band.title }}</text>
-        </g>
-      </svg>
+        <div class="infrastructure-flow__route" aria-hidden="true">
+          <div class="infrastructure-node infrastructure-node--visitor" data-infrastructure-node="visitor">
+            <span class="infrastructure-node__sequence">Request</span>
+            <strong>Visitor</strong>
+            <span class="infrastructure-node__detail">Inbound traffic</span>
+          </div>
+
+          <div class="infrastructure-node infrastructure-node--ingress" data-infrastructure-node="nginx-tls">
+            <span class="infrastructure-boundary" data-trust-boundary>Public edge</span>
+            <span class="infrastructure-node__connector"></span>
+            <span class="infrastructure-node__sequence">01 / edge</span>
+            <strong>Nginx and TLS</strong>
+            <span class="infrastructure-node__detail">Encrypted ingress</span>
+            <span class="infrastructure-node__guard">fail2ban guard</span>
+          </div>
+
+          <div class="infrastructure-node infrastructure-node--access" data-infrastructure-node="authentication">
+            <span class="infrastructure-boundary" data-trust-boundary>Access boundary</span>
+            <span class="infrastructure-node__connector"></span>
+            <span class="infrastructure-node__sequence">02 / verify</span>
+            <strong>Authentication</strong>
+            <span class="infrastructure-node__detail">Protected access</span>
+          </div>
+
+          <div class="infrastructure-node infrastructure-node--services" data-infrastructure-node="containerized-services">
+            <span class="infrastructure-boundary" data-trust-boundary>Service boundary</span>
+            <span class="infrastructure-node__connector"></span>
+            <span class="infrastructure-node__sequence">03 / run</span>
+            <strong>Containerized services</strong>
+            <span class="infrastructure-node__detail">Managed workloads</span>
+          </div>
+
+          <div class="infrastructure-node infrastructure-node--operations" data-infrastructure-node="operations">
+            <span class="infrastructure-node__connector infrastructure-node__connector--vertical"></span>
+            <span class="infrastructure-node__sequence">04 / sustain</span>
+            <strong>Operations</strong>
+            <span class="infrastructure-node__detail">Lifecycle + maintenance</span>
+          </div>
+        </div>
+      </div>
       <figcaption>{{ infrastructure.title }}</figcaption>
     </figure>
     <ul data-testid="infrastructure-text-equivalent">
diff --git a/src/components/ToolkitGrid.vue b/src/components/ToolkitGrid.vue
index 4cd711d..8c9bfc7 100644
--- a/src/components/ToolkitGrid.vue
+++ b/src/components/ToolkitGrid.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
+import BrandIcon from './BrandIcon.vue';
 import type { ToolkitGroup } from '@/content/types';
 
 defineProps<{ groups: readonly ToolkitGroup[] }>();
 </script>
 
 <template>
-  <div>
-    <section v-for="group in groups" :key="group.title" :aria-labelledby="`${group.title}-heading`">
+  <div class="toolkit-grid">
+    <section v-for="group in groups" :key="group.title" class="toolkit-group" :aria-labelledby="`${group.title}-heading`">
       <h3 :id="`${group.title}-heading`">{{ group.title }}</h3>
-      <ul>
-        <li v-for="technology in group.technologies" :key="technology.name" data-testid="toolkit-technology">
-          <span aria-hidden="true"></span>
+      <ul class="toolkit-items">
+        <li v-for="technology in group.technologies" :key="technology.name" class="toolkit-item" data-testid="toolkit-technology">
+          <BrandIcon :label="technology.name" />
           <span>{{ technology.name }}</span>
         </li>
       </ul>
diff --git a/src/icons/brand-icons.ts b/src/icons/brand-icons.ts
new file mode 100644
index 0000000..3f10d88
--- /dev/null
+++ b/src/icons/brand-icons.ts
@@ -0,0 +1,129 @@
+// The pinned package's generated declaration currently mixes `export =` with
+// named exports. Import its ESM entry directly until upstream ships a valid
+// TypeScript declaration; the selected runtime exports remain tree-shakeable.
+import {
+  siDocker,
+  siDotnet,
+  siFlutter,
+  siGit,
+  siGithub,
+  siGitlab,
+  siJavascript,
+  siLinux,
+  siNginx,
+  siOpenjdk,
+  siPostgresql,
+  siProxmox,
+  siPython,
+  siVuedotjs,
+  siWordpress,
+// @ts-expect-error simple-icons 16.29.0 has no declaration for this ESM file.
+} from '../../node_modules/simple-icons/index.mjs';
+
+/**
+ * Labels emitted by the validated portfolio content and social-link schema.
+ * Keep this union exhaustive when a new public technology or social service is
+ * introduced so an icon cannot silently regress to a placeholder.
+ */
+export type BrandIconLabel =
+  | 'Linux'
+  | 'Docker'
+  | 'Nginx'
+  | 'Proxmox / KVM'
+  | 'Git'
+  | 'Python'
+  | 'Vue.js'
+  | 'JavaScript'
+  | 'C# / .NET'
+  | 'Flutter / Dart'
+  | 'PostgreSQL / SQL'
+  | 'Headless WordPress'
+  | 'Java'
+  | 'GitHub'
+  | 'GitLab'
+  | 'LinkedIn';
+
+export interface BrandIconDefinition {
+  /** The display title of the canonical brand asset. */
+  title: string;
+  /** The brand color supplied by the source asset, without a leading '#'. */
+  hex: string;
+  /** A viewBox-compatible SVG path from the source asset. */
+  path: string;
+  /** Coordinate space used by the canonical source path. */
+  viewBox: string;
+  /** Canonical source/project URL for provenance and review. */
+  source: string;
+  /** SPDX license identifier or source-specific brand terms. */
+  license: string;
+}
+
+/** Structural subset needed from the package so no package-internal type leaks into callers. */
+type SimpleIconWithLicense = {
+  title: string;
+  hex: string;
+  path: string;
+  source: string;
+  license?: { type: string; url?: string };
+};
+
+const fromSimpleIcons = (icon: SimpleIconWithLicense): BrandIconDefinition => ({
+  title: icon.title,
+  hex: icon.hex,
+  path: icon.path,
+  viewBox: '0 0 24 24',
+  source: icon.source,
+  // Simple Icons distributes its icon data under CC0-1.0. Individual entries
+  // may carry a more specific license, which is retained when present.
+  license: icon.license?.type ?? 'CC0-1.0',
+});
+
+/*
+ * Simple Icons 16.29.0 currently omits LinkedIn from its named exports. This
+ * is the regular-weight LinkedIn mark from @phosphor-icons/vue 2.2.1, whose
+ * MIT notice is already recorded in docs/third-party-notices.md. Keeping the
+ * path local avoids a runtime dependency on an unpinned remote asset.
+ */
+const linkedIn: BrandIconDefinition = {
+  title: 'LinkedIn',
+  hex: '0A66C2',
+  path: 'M216,24H40A16,16,0,0,0,24,40V216a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V40A16,16,0,0,0,216,24Zm0,192H40V40H216V216ZM96,112v64a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0Zm88,28v36a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.79-1.78A36,36,0,0,1,184,140ZM100,84A12,12,0,1,1,88,72,12,12,0,0,1,100,84Z',
+  viewBox: '0 0 256 256',
+  source: 'https://github.com/phosphor-icons/core/blob/main/assets/regular/linkedin-logo.svg',
+  license: 'MIT',
+};
+
+/**
+ * One canonical icon per visible toolkit/social label. Composite labels use
+ * the most representative official mark (for example, PostgreSQL for SQL).
+ */
+export const brandIcons: Readonly<Record<BrandIconLabel, BrandIconDefinition>> = {
+  Linux: fromSimpleIcons(siLinux),
+  Docker: fromSimpleIcons(siDocker),
+  Nginx: fromSimpleIcons(siNginx),
+  'Proxmox / KVM': fromSimpleIcons(siProxmox),
+  Git: fromSimpleIcons(siGit),
+  Python: fromSimpleIcons(siPython),
+  'Vue.js': fromSimpleIcons(siVuedotjs),
+  JavaScript: fromSimpleIcons(siJavascript),
+  'C# / .NET': fromSimpleIcons(siDotnet),
+  'Flutter / Dart': fromSimpleIcons(siFlutter),
+  'PostgreSQL / SQL': fromSimpleIcons(siPostgresql),
+  'Headless WordPress': fromSimpleIcons(siWordpress),
+  // Simple Icons does not currently publish a Java export; OpenJDK is the
+  // official open Java platform mark and is the closest canonical asset.
+  Java: fromSimpleIcons(siOpenjdk),
+  GitHub: fromSimpleIcons(siGithub),
+  GitLab: fromSimpleIcons(siGitlab),
+  LinkedIn: linkedIn,
+} as const;
+
+export const brandIconLabels = Object.freeze(Object.keys(brandIcons) as BrandIconLabel[]);
+
+/** Resolve a validated content label, failing loudly for an unregistered mark. */
+export function brandIconFor(label: string): BrandIconDefinition {
+  if (!Object.prototype.hasOwnProperty.call(brandIcons, label)) {
+    throw new Error(`No official brand icon registered for: ${label}`);
+  }
+  return brandIcons[label as BrandIconLabel];
+}
diff --git a/src/styles/components.css b/src/styles/components.css
index 1d5b9a2..b31299a 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -163,6 +163,7 @@
 
 .portfolio-section figure {
   min-width: 0;
+  margin-inline: 0;
   margin-block-start: var(--space-3);
   padding: var(--space-2);
   border: 1px solid var(--line);
@@ -176,21 +177,120 @@
   font-size: var(--step--1);
 }
 
-.portfolio-section svg {
-  inline-size: 100%;
-  block-size: auto;
+.infrastructure-case > p {
+  max-inline-size: 78ch;
 }
 
-.portfolio-section svg rect {
-  fill: #172432;
-  stroke: var(--cyan);
-  stroke-width: 2;
+.infrastructure-flow {
+  min-width: 0;
+  padding: clamp(3.7rem, 6vw, 5.2rem) clamp(1rem, 2.5vw, 2rem) 2rem;
 }
 
-.portfolio-section svg text {
-  fill: var(--text);
-  font-family: var(--sans);
-  font-size: 19px;
+.infrastructure-flow__route {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: auto auto;
+  gap: 2.35rem clamp(1.9rem, 3vw, 3rem);
+}
+
+.infrastructure-node {
+  position: relative;
+  display: grid;
+  min-width: 0;
+  min-block-size: 8rem;
+  align-content: center;
+  gap: 0.32rem;
+  padding: 1rem;
+  border: 1px solid var(--line-strong);
+  border-inline-start: 3px solid var(--cyan);
+  border-radius: var(--radius-control);
+  background: rgb(8 19 31 / 98%);
+  box-shadow: 0 1rem 2.8rem rgb(0 5 14 / 24%);
+}
+
+.infrastructure-node strong {
+  color: var(--text);
+  font-size: clamp(0.94rem, 1.3vw, 1.12rem);
+  line-height: 1.15;
+}
+
+.infrastructure-node__sequence,
+.infrastructure-boundary,
+.infrastructure-node__guard {
+  font: 610 0.62rem/1.2 var(--mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.infrastructure-node__sequence {
+  color: var(--cyan);
+}
+
+.infrastructure-node__detail {
+  color: var(--text-muted);
+  font-size: 0.78rem;
+}
+
+.infrastructure-node__guard {
+  inline-size: fit-content;
+  margin-block-start: 0.3rem;
+  padding: 0.25rem 0.4rem;
+  border: 1px solid rgb(244 173 103 / 42%);
+  color: var(--amber);
+}
+
+.infrastructure-boundary {
+  position: absolute;
+  inset: -2.05rem auto auto -0.15rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.infrastructure-boundary::before {
+  display: inline-block;
+  inline-size: 0.65rem;
+  margin-inline-end: 0.4rem;
+  border-block-start: 1px dashed var(--line-strong);
+  content: '';
+  vertical-align: middle;
+}
+
+.infrastructure-node__connector {
+  position: absolute;
+  inset: 50% 100% auto auto;
+  inline-size: clamp(1.9rem, 3vw, 3rem);
+  block-size: 1px;
+  background: linear-gradient(90deg, var(--line-strong), var(--cyan));
+}
+
+.infrastructure-node__connector::after {
+  position: absolute;
+  inset: -0.19rem 0 auto auto;
+  inline-size: 0.36rem;
+  block-size: 0.36rem;
+  border-block-start: 1px solid var(--cyan);
+  border-inline-end: 1px solid var(--cyan);
+  content: '';
+  transform: rotate(45deg);
+}
+
+.infrastructure-node--operations {
+  grid-column: 4;
+  grid-row: 2;
+  border-inline-start-color: var(--amber);
+}
+
+.infrastructure-node__connector--vertical {
+  inset: auto auto 100% 50%;
+  inline-size: 1px;
+  block-size: 2.35rem;
+  background: linear-gradient(180deg, var(--line-strong), var(--amber));
+}
+
+.infrastructure-node__connector--vertical::after {
+  inset: auto auto 0 -0.16rem;
+  border-color: var(--amber);
+  transform: rotate(135deg);
 }
 
 [data-testid='infrastructure-text-equivalent'] {
@@ -308,43 +408,47 @@
   font-size: var(--step-0);
 }
 
-.portfolio-section > div:not(.project-stage__projects, .compact-projects, .contact-destination) {
+.toolkit-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--space-3);
 }
 
-.portfolio-section > div > section {
+.toolkit-group {
   min-width: 0;
   padding-block-start: var(--space-2);
   border-block-start: 1px solid var(--line);
 }
 
-.portfolio-section > div > section ul {
-  display: flex;
-  flex-wrap: wrap;
+.toolkit-items {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--space-1);
   margin-block-start: var(--space-2);
   padding: 0;
   list-style: none;
 }
 
-.portfolio-section > div > section li {
-  display: inline-flex;
+.toolkit-item {
+  display: grid;
+  grid-template-columns: 1.15rem minmax(0, 1fr);
   gap: 0.45rem;
   align-items: center;
-  min-block-size: 2rem;
+  min-block-size: 2.7rem;
   margin: 0;
-  padding: 0.25rem 0.55rem;
-  border: 1px solid var(--line);
+  padding-block: 0.35rem;
+  border-block-end: 1px solid var(--line);
   font-size: var(--step--1);
 }
 
-.portfolio-section > div > section li span[aria-hidden='true'] {
-  inline-size: 0.5rem;
-  block-size: 0.5rem;
-  border: 1px solid var(--cyan);
-  border-radius: 50%;
+.brand-icon {
+  inline-size: 1.05rem;
+  block-size: 1.05rem;
+  color: var(--cyan);
+}
+
+.toolkit-item .brand-icon {
+  opacity: 0.86;
 }
 
 .contact-destination {
@@ -389,11 +493,17 @@
 }
 
 .contact-social-link {
+  gap: 0.48rem;
   padding-inline: 0.2rem;
   font: 540 0.74rem/1 var(--mono);
   text-decoration: none;
 }
 
+.contact-social-link .brand-icon {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
 .project-media {
   overflow: hidden;
 }
@@ -471,19 +581,67 @@
     margin-inline-start: 38%;
   }
 
-  .portfolio-section > div:not(.project-stage__projects, .compact-projects, .contact-destination) {
+  .toolkit-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
 @media (max-width: 767px) {
+  .infrastructure-flow {
+    padding: 3.2rem 0.15rem 0.5rem;
+  }
+
+  .infrastructure-flow__route {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: none;
+    gap: 3.25rem;
+  }
+
+  .infrastructure-node,
+  .infrastructure-node--operations {
+    grid-column: 1;
+    grid-row: auto;
+    min-block-size: 7.2rem;
+  }
+
+  .infrastructure-node__connector,
+  .infrastructure-node__connector--vertical {
+    inset: auto auto 100% 50%;
+    inline-size: 1px;
+    block-size: 3.25rem;
+    background: linear-gradient(180deg, var(--line-strong), var(--cyan));
+  }
+
+  .infrastructure-node__connector::after,
+  .infrastructure-node__connector--vertical::after {
+    inset: auto auto 0 -0.16rem;
+    border-color: var(--cyan);
+    transform: rotate(135deg);
+  }
+
+  .infrastructure-node--operations .infrastructure-node__connector {
+    background: linear-gradient(180deg, var(--line-strong), var(--amber));
+  }
+
+  .infrastructure-node--operations .infrastructure-node__connector::after {
+    border-color: var(--amber);
+  }
+
+  .infrastructure-boundary {
+    inset-block-start: -1.85rem;
+  }
+
   .profile-facts,
   .project-evidence > div,
   [data-testid='infrastructure-text-equivalent'],
-  .portfolio-section > div:not(.project-stage__projects, .compact-projects, .contact-destination) {
+  .toolkit-grid {
     grid-template-columns: 1fr;
   }
 
+  .toolkit-items {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .profile-facts dt {
     padding-block-end: 0.15rem;
     border-block-end: 0;
diff --git a/tests/browser/accessibility-axe.spec.ts b/tests/browser/accessibility-axe.spec.ts
index 2b5cfb5..d4ef271 100644
--- a/tests/browser/accessibility-axe.spec.ts
+++ b/tests/browser/accessibility-axe.spec.ts
@@ -61,11 +61,11 @@ async function enterState(
       page.getByRole("button", { name: "Mute sound" }),
     ).toBeVisible();
   } else if (state === "static") {
+    await page.getByRole("button", { name: "Drive settings" }).click();
     await page.getByLabel("Quality control").selectOption("static");
-    await expect(
-      page.getByRole("button", { name: "Enable motion" }),
-    ).toBeVisible();
+    await expect(page.getByRole("status")).toContainText("Motion: static");
   } else if (state === "reduced-motion") {
+    await page.getByRole("button", { name: "Drive settings" }).click();
     await expect(page.getByRole("status")).toContainText(
       "reduced motion requested",
     );
diff --git a/tests/browser/no-javascript.spec.ts b/tests/browser/no-javascript.spec.ts
index 8d19ca8..e9746bb 100644
--- a/tests/browser/no-javascript.spec.ts
+++ b/tests/browser/no-javascript.spec.ts
@@ -130,7 +130,6 @@ const expectedVisibleTextSegments = (
     ...section('infrastructure', [
       content.infrastructure.title,
       content.infrastructure.summary,
-      ...content.infrastructure.bands.map((band) => band.title),
       content.infrastructure.title,
       ...content.infrastructure.bands.map(
         (band) => `${band.title}: ${band.summary}`,
diff --git a/tests/browser/responsive-layout.spec.ts b/tests/browser/responsive-layout.spec.ts
index 3e1effb..62dc4af 100644
--- a/tests/browser/responsive-layout.spec.ts
+++ b/tests/browser/responsive-layout.spec.ts
@@ -158,6 +158,35 @@ test('uses a stable tablet rhythm and a single readable mobile column with usabl
   await capture(page, testInfo, 'information-layer-mobile.png');
 });
 
+test('turns the infrastructure route from a horizontal trust flow into a readable mobile stack', async ({ page }, testInfo) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await loadInformationLayer(page);
+
+  const desktop = await page.locator('[data-testid="infrastructure-flow"] [data-infrastructure-node]').evaluateAll((nodes) =>
+    nodes.map((node) => {
+      const rect = node.getBoundingClientRect();
+      return { id: node.getAttribute('data-infrastructure-node'), left: rect.left, top: rect.top, bottom: rect.bottom, width: rect.width };
+    }),
+  );
+  expect(desktop.slice(0, 4).every((node) => Math.abs(node.top - desktop[0]!.top) <= 1)).toBe(true);
+  expect(desktop[4]!.top).toBeGreaterThanOrEqual(desktop[3]!.bottom);
+  expect(desktop.slice(0, 4).every((node, index, nodes) => index === 0 || node.left > nodes[index - 1]!.left)).toBe(true);
+  await capture(page, testInfo, 'infrastructure-flow-desktop.png');
+
+  await page.setViewportSize({ width: 320, height: 800 });
+  await loadInformationLayer(page);
+  const mobile = await page.locator('[data-testid="infrastructure-flow"] [data-infrastructure-node]').evaluateAll((nodes) =>
+    nodes.map((node) => {
+      const rect = node.getBoundingClientRect();
+      return { left: rect.left, top: rect.top, bottom: rect.bottom, width: rect.width };
+    }),
+  );
+  expect(mobile.every((node) => Math.abs(node.left - mobile[0]!.left) <= 1)).toBe(true);
+  expect(mobile.every((node) => node.width >= 200)).toBe(true);
+  expect(mobile.every((node, index, nodes) => index === 0 || node.top > nodes[index - 1]!.bottom)).toBe(true);
+  await capture(page, testInfo, 'infrastructure-flow-mobile.png');
+});
+
 test('keeps the compact HUD in one safe lower row without covering the road corridor', async ({ page }) => {
   for (const viewport of [
     { width: 320, height: 800 },
diff --git a/tests/unit/brand-icons.test.ts b/tests/unit/brand-icons.test.ts
new file mode 100644
index 0000000..646a667
--- /dev/null
+++ b/tests/unit/brand-icons.test.ts
@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import BrandIcon from '@/components/BrandIcon.vue';
+import content from '@/../content/public/portfolio-content.json';
+import { brandIconFor, brandIconLabels } from '@/icons/brand-icons';
+
+const toolkitLabels = content.toolkit.flatMap((group) => group.technologies.map((technology) => technology.name));
+const socialLabels = content.contact.social.map((link) => link.service);
+
+describe('official brand icon registry', () => {
+  it('resolves every toolkit technology in validated portfolio content', () => {
+    for (const label of toolkitLabels) {
+      const icon = brandIconFor(label);
+      expect(icon.title).toBeTruthy();
+      expect(icon.hex).toMatch(/^[0-9A-F]{6}$/u);
+      expect(icon.path.length).toBeGreaterThan(20);
+      expect(icon.source).toMatch(/^https:\/\//u);
+      expect(icon.license).toBeTruthy();
+    }
+  });
+
+  it('resolves every configured social service mark', () => {
+    for (const label of socialLabels) {
+      expect(brandIconFor(label)).toMatchObject({ title: label });
+    }
+  });
+
+  it('keeps the registry closed over all content-facing labels', () => {
+    expect(brandIconLabels).toEqual([
+      'Linux', 'Docker', 'Nginx', 'Proxmox / KVM', 'Git', 'Python', 'Vue.js',
+      'JavaScript', 'C# / .NET', 'Flutter / Dart', 'PostgreSQL / SQL',
+      'Headless WordPress', 'Java', 'GitHub', 'GitLab', 'LinkedIn',
+    ]);
+    expect(() => brandIconFor('Unlisted technology')).toThrow(/No official brand icon/u);
+  });
+
+  it('renders a decorative, non-focusable SVG while leaving the visible label to its caller', () => {
+    const wrapper = mount(BrandIcon, { props: { label: 'Linux' } });
+    const svg = wrapper.get('svg');
+
+    expect(svg.attributes('aria-hidden')).toBe('true');
+    expect(svg.attributes('focusable')).toBe('false');
+    expect(svg.attributes('data-brand-icon')).toBe('Linux');
+    expect(svg.get('path').attributes('d')).toBe(brandIconFor('Linux').path);
+    expect(wrapper.text()).toBe('');
+  });
+});
diff --git a/tests/unit/components.test.ts b/tests/unit/components.test.ts
index 73a811e..2715ade 100644
--- a/tests/unit/components.test.ts
+++ b/tests/unit/components.test.ts
@@ -13,6 +13,8 @@ const infrastructure: InfrastructureCaseStudy = {
   bands: [
     { id: 'ingress-tls', title: 'Ingress and TLS', summary: 'Managed encrypted ingress.' },
     { id: 'identity-access', title: 'Identity and access', summary: 'Protected service access.' },
+    { id: 'service-lifecycle', title: 'Service lifecycle', summary: 'Managed container lifecycle.' },
+    { id: 'operations', title: 'Operations', summary: 'Routine maintenance and investigation.' },
   ],
 };
 
@@ -40,16 +42,29 @@ const publicProject: PublicProject = {
 describe('semantic section components', () => {
   it('gives the infrastructure graphic an accessible name, description, caption, and visible text equivalent', () => {
     const wrapper = mount(InfrastructureDiagram, { props: { infrastructure } });
-    const svg = wrapper.get('svg');
+    const flow = wrapper.get('[data-testid="infrastructure-flow"]');
 
-    expect(svg.attributes('role')).toBe('img');
-    expect(svg.attributes('aria-labelledby')).toContain('safe-infrastructure-diagram-title');
-    expect(svg.attributes('aria-describedby')).toContain('safe-infrastructure-diagram-description');
+    expect(flow.attributes('role')).toBe('img');
+    expect(flow.attributes('aria-labelledby')).toBe('safe-infrastructure-diagram-title');
+    expect(flow.attributes('aria-describedby')).toBe('safe-infrastructure-diagram-description');
     expect(wrapper.get('figcaption').text()).toContain('Secure self-hosted platform and lifecycle');
     expect(wrapper.get('[data-testid="infrastructure-text-equivalent"]').text()).toContain('Ingress and TLS');
     expect(wrapper.get('[data-testid="infrastructure-text-equivalent"]').text()).toContain('Identity and access');
   });
 
+  it('renders the real infrastructure route with explicit trust boundaries and operational support', () => {
+    const wrapper = mount(InfrastructureDiagram, { props: { infrastructure } });
+    const flow = wrapper.get('[data-testid="infrastructure-flow"]');
+
+    expect(flow.findAll('[data-infrastructure-node]').map((node) => node.attributes('data-infrastructure-node'))).toEqual([
+      'visitor', 'nginx-tls', 'authentication', 'containerized-services', 'operations',
+    ]);
+    expect(flow.findAll('[data-trust-boundary]').map((boundary) => boundary.text())).toEqual([
+      'Public edge', 'Access boundary', 'Service boundary',
+    ]);
+    expect(flow.text()).toContain('fail2ban guard');
+  });
+
   it('does not turn private project content into a link container', () => {
     const wrapper = mount(ProjectCaseStudy, { props: { project: privateProject, priority: 'primary' } });