Add circuit signal homepage hero
Deploy production / deploy (push) Successful in 21s

This commit is contained in:
2026-08-22 11:01:14 -07:00
parent 77d188e6cc
commit 1b5d05b794
5 changed files with 364 additions and 10 deletions
+2 -1
View File
@@ -9,9 +9,10 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600&display=swap" rel="stylesheet">
<link rel="icon" href="{{ '/static/favicon.svg'|url }}" type="image/svg+xml">
<link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=13">
<link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=14">
<script src="{{ '/static/tags.js'|url }}?v=1" defer></script>
<script src="{{ '/static/activity.js'|url }}?v=1" defer></script>
<script src="{{ '/static/hero-circuit.js'|url }}?v=1" defer></script>
<script src="{{ '/static/narration.js'|url }}?v=1" defer></script>
</head>
<body>
+76 -5
View File
@@ -1,9 +1,80 @@
<section class="hero">
<div class="shell narrow">
<p class="eyebrow">{{ this.eyebrow }}</p>
<h1>{{ this.summary }}</h1>
<div class="dek">{{ this.body }}</div>
<section class="circuit-hero" aria-label="Labyricorn navigation hero" data-circuit-hero>
<div class="circuit-hero-topline">
<span><strong>LABYRICORN</strong> // SIGNAL ROUTER</span>
<span>REG. NO. 004 — EST. LOCAL</span>
</div>
<div class="circuit-brand-block">
<p class="circuit-brand-kicker">{{ this.eyebrow }}</p>
<h1>{{ this.summary }}</h1>
<div class="circuit-dek">{{ this.body }}</div>
<p class="circuit-status"><span aria-hidden="true"></span> network active / routes resolving</p>
</div>
<div class="circuit-stage" aria-hidden="true">
<svg viewBox="0 0 1200 720" preserveAspectRatio="none">
<g class="circuit-ambient">
<path d="M35 95 H185 V125 H410"/><path d="M55 150 H155 V185 H300"/>
<path d="M300 45 V115 H455"/><path d="M465 65 H610 V100 H690"/>
<path d="M705 55 H835 V90 H930"/><path d="M900 115 H1050 V80 H1160"/>
<path d="M1010 230 H1140 V335 H1085"/><path d="M940 430 H1095 V465 H1165"/>
<path d="M45 455 H170 V475 H250"/><path d="M40 585 H130 V555 H205"/>
<path d="M250 670 H390 V690 H520"/><path d="M535 680 H770 V700"/>
<path d="M805 685 H930 V665 H1035"/><path d="M1035 690 H1165"/>
</g>
<g class="circuit-ghost">
<path d="M70 350 H510 V180 H720 V140 H805"/>
<path d="M180 390 H565 V320 H865"/>
<path d="M95 425 H470 V470 H720"/>
<path d="M90 505 H260 V530 H345"/>
<path d="M190 560 H350 V585 H430"/>
<path d="M430 610 H515 V630 H585"/>
<path d="M610 650 H700 V655 H755"/>
<path d="M790 605 H885 V590 H930"/>
<path d="M970 540 H1030 V515 H1060"/>
</g>
<g class="circuit-traces">
<path d="M45 200 H260 V255 H390"/><path d="M110 240 H185 V300 H410"/>
<path d="M975 180 H1125 V285 H1080"/><path d="M955 375 H1110 V410 H1160"/>
<path d="M36 650 H120 V610 H220"/><path d="M1080 645 H1145 V580"/>
</g>
<g class="circuit-live">
<path id="route-projects" d="M70 350 H510 V180 H720 V140 H805"/>
<path id="route-articles" class="circuit-live-alt" d="M180 390 H565 V320 H865"/>
<path id="route-blog" d="M95 425 H470 V470 H720"/>
<path id="route-github" class="circuit-live-alt" d="M90 505 H260 V530 H345"/>
<path id="route-gitea" d="M190 560 H350 V585 H430"/>
<path id="route-linkedin" class="circuit-live-alt" d="M430 610 H515 V630 H585"/>
<path id="route-twitch" d="M610 650 H700 V655 H755"/>
<path id="route-youtube" class="circuit-live-alt" d="M790 605 H885 V590 H930"/>
<path id="route-kofi" d="M970 540 H1030 V515 H1060"/>
</g>
<g class="circuit-vias">
<circle cx="70" cy="350" r="4"/><circle cx="805" cy="140" r="4"/>
<circle cx="180" cy="390" r="4"/><circle cx="865" cy="320" r="4"/>
<circle cx="95" cy="425" r="4"/><circle cx="720" cy="470" r="4"/>
<circle cx="90" cy="505" r="3"/><circle cx="345" cy="530" r="3"/>
<circle cx="190" cy="560" r="3"/><circle cx="430" cy="585" r="3"/>
<circle cx="585" cy="630" r="3"/><circle cx="755" cy="655" r="3"/>
<circle cx="930" cy="590" r="3"/><circle cx="1060" cy="515" r="3"/>
</g>
</svg>
</div>
<nav class="circuit-routes" aria-label="Signal routes">
<a class="circuit-node circuit-node-main" data-route-node="projects" href="{{ '/projects'|url }}"><span>Projects</span><i aria-hidden="true">_</i></a>
<a class="circuit-node circuit-node-main" data-route-node="articles" href="{{ '/articles'|url }}"><span>Articles</span><i aria-hidden="true">_</i></a>
<a class="circuit-node circuit-node-main" data-route-node="blog" href="{{ '/blog'|url }}"><span>Blog</span><i aria-hidden="true">_</i></a>
<a class="circuit-node circuit-node-sub" data-route-node="github" href="https://github.com/Labyricorn" rel="me">GitHub</a>
<a class="circuit-node circuit-node-sub" data-route-node="gitea" href="https://git.labyricorn.com/">Gitea</a>
<a class="circuit-node circuit-node-sub" data-route-node="linkedin" href="https://www.linkedin.com/in/christopher-chambers-694b7a86/">LinkedIn</a>
<a class="circuit-node circuit-node-sub" data-route-node="twitch" href="https://www.twitch.tv/labyricorn">Twitch</a>
<a class="circuit-node circuit-node-sub" data-route-node="youtube" href="https://www.youtube.com/@labyricorn">YouTube</a>
<a class="circuit-node circuit-node-sub" data-route-node="kofi" href="https://ko-fi.com/labyricorn">Ko-fi</a>
</nav>
<div class="circuit-legend" aria-hidden="true"><span>◆ live packet</span><span>— Labyricorn bus</span></div>
<button class="circuit-replay" type="button" data-circuit-replay>Replay signal sequence</button>
</section>
<section class="activity-section">