prime8dev

commit 0e29a71ac3e571f39e7038b4e5917c50bcc98ebb
parent 9f62143c4d933d3547cc92b82182a157a4aa1d6d
Author: Damian Myrda <damian@prime8.dev>
Date:   Wed, 21 Oct 2026 01:57:19 +0000

feat(about): i5 firing-order easter egg on the audi tag

Hovering or focusing the "old-school audis" hobby tag swaps the label
for five cylinders firing in the inline-five order 1-2-4-5-3.

Diffstat:
M
internal/web/styles/about.css
 | 
59
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
internal/web/templates/partials/about.gohtml
 | 
2
+-

2 files changed, 60 insertions(+), 1 deletion(-)
diff --git a/internal/web/styles/about.css b/internal/web/styles/about.css
@@ -100,6 +100,65 @@
   text-decoration-style: solid;
 }
 
+/* i5 firing order: 1-2-4-5-3. hover swaps the label for the engine block */
+.i5-host {
+  position: relative;
+  outline: none;
+  cursor: default;
+}
+
+.i5-host:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.i5 {
+  position: absolute;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.i5 i {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+  box-sizing: border-box;
+}
+
+.i5-host:hover .i5-label,
+.i5-host:focus-visible .i5-label,
+.i5-host:active .i5-label {
+  visibility: hidden;
+}
+
+.i5-host:hover .i5,
+.i5-host:focus-visible .i5,
+.i5-host:active .i5 {
+  display: flex;
+}
+
+.i5-host:hover .i5 i,
+.i5-host:focus-visible .i5 i,
+.i5-host:active .i5 i {
+  animation: fire 750ms steps(1) infinite;
+  animation-delay: calc(var(--fire) * 150ms);
+}
+
+@keyframes fire {
+  0% { background: currentColor; }
+  20% { background: transparent; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .i5-host .i5 i {
+    animation: none !important;
+  }
+}
+
 .weekly-stats {
   background: var(--bg-alt);
   border: 1px solid var(--border);
diff --git a/internal/web/templates/partials/about.gohtml b/internal/web/templates/partials/about.gohtml
@@ -37,7 +37,7 @@
     <div class="section">
       <div class="shell-prompt"><span class="shell-user">{{.About.Handle}}</span>@<span class="shell-host">prime8</span>:<span class="shell-path">~</span><span class="shell-dollar">$</span> <span class="shell-cmd">ls hobbies/</span></div>
       <div class="tags">
-        {{range .About.Hobbies}}<span class="tag {{tagClass .}}">{{.}}</span>{{end}}
+        {{range .About.Hobbies}}{{if eq (tagClass .) "hobby-audi"}}<span class="i5-host tag {{tagClass .}}" title="1-2-4-5-3" tabindex="0"><span class="i5-label">{{.}}</span><span class="i5" aria-hidden="true"><i style="--fire:0"></i><i style="--fire:1"></i><i style="--fire:4"></i><i style="--fire:2"></i><i style="--fire:3"></i></span></span>{{else}}<span class="tag {{tagClass .}}">{{.}}</span>{{end}}{{end}}
       </div>
     </div>
     {{end}}