feat: add infrastructure flow and official iconography
This commit is contained in:
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;
|
||||
|
||||
Reference in New Issue
Block a user