xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: close final portfolio quality gaps

Browse Source
This commit is contained in:
LucaP
2026-09-02 17:38:11 +03:00
parent 0899b6b00f
commit b4728ceef0
24 changed files with 1822 additions and 889 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/InfrastructureDiagram.vue
View File

@@ -1,13 +1,17 @@
<script setup lang="ts">
import type { InfrastructureCaseStudy } from '@/content/types';
import type { InfrastructureCaseStudy } from "@/content/types";
defineProps<{ infrastructure: Readonly<InfrastructureCaseStudy> }>();
</script>
<template>
<article class="infrastructure-case">
<h3 :id="`${infrastructure.id}-diagram-title`">{{ infrastructure.title }}</h3>
<p :id="`${infrastructure.id}-diagram-description`">{{ infrastructure.summary }}</p>
<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"
@@ -17,14 +21,22 @@ defineProps<{ infrastructure: Readonly<InfrastructureCaseStudy> }>();
:aria-describedby="`${infrastructure.id}-diagram-description`"
>
<div class="infrastructure-flow__route" aria-hidden="true">
<div class="infrastructure-node infrastructure-node--visitor" data-infrastructure-node="visitor">
<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>
<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>
@@ -32,35 +44,78 @@ defineProps<{ infrastructure: Readonly<InfrastructureCaseStudy> }>();
<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>
<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>
<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>
<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>
<span class="infrastructure-node__detail"
>Lifecycle + maintenance</span
>
</div>
</div>
</div>
<figcaption>{{ infrastructure.title }}</figcaption>
</figure>
<dl
class="infrastructure-legend"
aria-label="Infrastructure diagram legend"
>
<div>
<dt>
<span
class="infrastructure-legend__boundary"
aria-hidden="true"
/>Trust boundary
</dt>
<dd>Where trust or access rules change</dd>
</div>
<div>
<dt>
<span class="infrastructure-legend__flow" aria-hidden="true" />Request
flow
</dt>
<dd>The direction traffic moves through the system</dd>
</div>
</dl>
<ul data-testid="infrastructure-text-equivalent">
<li>
<strong>Legend</strong>: Boundary labels mark changes in trust or access
rules. Connectors show request flow direction.
</li>
<li v-for="band in infrastructure.bands" :key="band.id">
<strong>{{ band.title }}</strong>: {{ band.summary }}
<strong>{{ band.title }}</strong
>: {{ band.summary }}
</li>
</ul>
</article>