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

feat: add infrastructure flow and official iconography

Browse Source
This commit is contained in:
LucaP
2026-09-02 16:40:46 +03:00
parent 8c17af22a0
commit 132a7cd344
14 changed files with 520 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/InfrastructureDiagram.vue
View File

@@ -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">