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

19
src/components/BrandIcon.vue Normal file
View 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>

6
src/components/ContactDestination.vue
View File

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

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

11
src/components/ToolkitGrid.vue
View File

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