feat: add infrastructure flow and official iconography
This commit is contained in:
@@ -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.
|
||||
|
||||
20
package-lock.json
generated
20
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
19
src/components/BrandIcon.vue
Normal file
19
src/components/BrandIcon.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
129
src/icons/brand-icons.ts
Normal file
129
src/icons/brand-icons.ts
Normal file
@@ -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];
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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",
|
||||
);
|
||||
|
||||
@@ -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}`,
|
||||
|
||||
@@ -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 },
|
||||
|
||||
47
tests/unit/brand-icons.test.ts
Normal file
47
tests/unit/brand-icons.test.ts
Normal file
@@ -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('');
|
||||
});
|
||||
});
|
||||
@@ -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' } });
|
||||
|
||||
|
||||
Reference in New Issue
Block a user