A lot of AI slop

frontend/app/components/parts/PageHeader.vue

@@ -2,13 +2,51 @@
 import HeaderLinks from './HeaderLinks.vue';
 import SiteOptions from './site_options/SiteOptions.vue';
 import StickyHeader from './StickyHeader.vue';
+
+const asciiLines = [
+  "░█▀█░█▀▄░█▀█░█▀█░█▀▄░█▀█░▀█▀░█▀▀",
+  "░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░░█░░█░█",
+  "░▀░▀░▀░▀░▀░▀░▀░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀"
+];
+
+const revealedLines = ref<number>(0);
+let asciiTimer: ReturnType<typeof setInterval> | null = null;
+const HAS_ANIMATED_KEY = 'ascii-animated';
+
+function startAsciiAnimation() {
+  if (sessionStorage.getItem(HAS_ANIMATED_KEY)) {
+    revealedLines.value = asciiLines.length;
+    return;
+  }
+
+  const delay = 400;
+  let count = 0;
+  
+  asciiTimer = setInterval(() => {
+    count++;
+    revealedLines.value = count;
+    if (count >= asciiLines.length) {
+      clearInterval(asciiTimer!);
+      asciiTimer = null;
+      sessionStorage.setItem(HAS_ANIMATED_KEY, '1');
+    }
+  }, delay);
+}
+
+onMounted(() => {
+  startAsciiAnimation();
+});
+
+onBeforeUnmount(() => {
+  if (asciiTimer) clearInterval(asciiTimer);
+});
 </script>
 
 <template>
     <div class="header">
         <div class="container">
             <div class="header-container website">
-                <h1>ARANROIG.COM</h1>
+                <pre v-if="revealedLines > 0" class="ascii-title" aria-hidden="true">{{ asciiLines.slice(0, revealedLines).join('\n') }}</pre>
                 <HeaderLinks></HeaderLinks>
             </div>
         </div>
@@ -32,6 +70,10 @@ import StickyHeader from './StickyHeader.vue';
 
 .header-container {
     &.website {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
         @media screen and (max-width: 600px) {
             margin-top: 20px;
         }
@@ -42,4 +84,23 @@ import StickyHeader from './StickyHeader.vue';
     position:relative;
     margin-bottom: 20px;
 }
+
+.ascii-title {
+    font-family: 'Hurmit', monospace;
+    color: var(--color-link);
+    text-shadow: 0 0 8px var(--color-link), 0 0 4px var(--color-link);
+    font-size: clamp(0.35rem, 1.2vw, 0.65rem);
+    line-height: 1;
+    letter-spacing: -0.1ch;
+    margin: 0;
+    white-space: pre;
+}
+
+@media screen and (max-width: 600px) {
+    .ascii-title {
+        font-size: clamp(0.28rem, 1.8vw, 0.5rem);
+        line-height: 1;
+        letter-spacing: -0.1ch;
+    }
+}
 </style>