Ye

holy
2026-06-09 01:12:58 +02:00 · 2026-06-09 01:10:40 +02:00
7 changed files with 147 additions and 108 deletions
--- a/frontend/app/components/Sprite.vue
+++ b/frontend/app/components/Sprite.vue
@@ -33,17 +33,16 @@ onMounted(() => {
    position: absolute;
    z-index: 1;
    width: 1300px;
-    
+    margin-left: 20px;
+
    @media screen and (max-width: 1200px) and (min-width: 900px) {
        width: 975px;
+        margin-top: 210px;
+        margin-left: 75px;
    }

-    @media screen and (max-width: 900px) and (min-width: 600px) {
-        width: 650px;
-    }
-
-    @media screen and (max-width: 600px){
-        width: 425px;
+    @media screen and (max-width: 900px){
+        display: none;
    }
 }
 </style>
--- a/frontend/app/components/layouts/FixedLayout.vue
+++ b/frontend/app/components/layouts/FixedLayout.vue
@@ -7,13 +7,13 @@
 <style lang="scss" scoped>
@media screen and (min-width: 1200px){
  .fixed-layout {
-    width: 1100px;
+    width: 1150px;
  }
 }

@media screen and (max-width: 1200px){
  .fixed-layout {
-    max-width: 1100px;
+    max-width: 1150px;
  }
 }
 </style>
--- a/frontend/app/components/parts/TableHeader.vue
+++ b/frontend/app/components/parts/TableHeader.vue
@@ -2,7 +2,6 @@
 import HeaderLinks from './HeaderLinks.vue';
 import SiteOptions from './site_options/SiteOptions.vue';
 import StickyHeader from './StickyHeader.vue';
-
 import { accent } from '~/composables/theme'
 const spritePath = computed(() => {
    return `/sprites/${accent.value}/${accent.value}.gif`
@@ -16,7 +15,12 @@ const asciiArt = [
 ];
 const fullText = asciiArt.join('\n');

-const displayedArt = ref("");
+interface ArtChar {
+  char: string;
+  done: boolean;
+}
+
+const displayedArt = ref<ArtChar[]>([]);
 let charIndex = 0;
 let intervalId: ReturnType<typeof setInterval> | null = null;

@@ -36,36 +40,69 @@ const preloadImages = (imageArray) => {
  )
 }

-onMounted(() => {
-    preloadImages(sprite_names);
+   onMounted(() => {
+        preloadImages(sprite_names);

-   if (hasAnimated.value || displayedArt.value === fullText) {
-     displayedArt.value = fullText;
-     return;
-   }
+        if (hasAnimated.value || displayedArt.value.length === fullText.length) {
+            for (let i = 0; i < fullText.length; i++) {
+                displayedArt.value.push({ char: fullText[i], done: true });
+            }
+            return;
+        }

-   intervalId = setInterval(() => {
-     if (charIndex < fullText.length) {
-       displayedArt.value += fullText[charIndex];
-       charIndex++;
-     } else {
-       clearInterval(intervalId!);
-       intervalId = null;
-       hasAnimated.value = true;
-     }
-   }, 5);
- });
+        intervalId = setInterval(() => {
+            if (charIndex < fullText.length) {
+                displayedArt.value[charIndex] = { char: fullText[charIndex], done: true };
+                charIndex++;
+            } else {
+                clearInterval(intervalId!);
+                intervalId = null;
+                hasAnimated.value = true;
+            }
+        }, 5);
+    });

- onBeforeUnmount(() => {
-   if (intervalId) clearInterval(intervalId);
- });
+  const getGridPos = (idx: number) => {
+        let x = 0, y = 0;
+        for (let j = 0; j < idx; j++) {
+            if (fullText[j] === '\n') { y++; x = 0; }
+            else { x++; }
+        }
+        return { x, y };
+    };
+
+    const onCharClick = (index: number, spanEl: HTMLElement) => {
+        for (let i = 0; i < fullText.length; i++) {
+            if (fullText[i] === '\n') continue;
+            const indexGrid = getGridPos(index);
+            const charGrid = getGridPos(i);
+            let manhattanDistance = Math.abs(indexGrid.x - charGrid.x) + Math.abs(indexGrid.y - charGrid.y);
+            let delay = manhattanDistance * 20;
+            setTimeout(() => {
+                displayedArt.value[i] = { char: fullText[i], done: true };
+                const targetSpan = document.querySelector(`.ascii-art span[index="${i}"]`) as HTMLElement;
+                if (targetSpan) {
+                    targetSpan.style.transition = 'color 80ms ease-out';
+                    targetSpan.style.color = 'var(--color-link)';
+                    requestAnimationFrame(() => {
+                        setTimeout(() => {
+                            targetSpan.style.color = '';
+                        }, 150);
+                    });
+                }
+            }, delay);
+        }
+    };
+    onBeforeUnmount(() => {
+        if (intervalId) clearInterval(intervalId);
+    });

 </script>

 <template>
    <div class="header">
        <div class="header-container website">
-                <pre v-html="displayedArt + (displayedArt.length < fullText.length ? '_' : '')" class="title ascii-art" aria-label="ARANROIG.COM"></pre>
+                <pre class="title ascii-art" aria-label="ARANROIG.COM"><span v-for="(c, i) in displayedArt" :key="i" :index="i.toString()" :class="{ 'char-done': c.done }" @click="onCharClick(i, $event.target as HTMLElement)">{{ c.char }}</span><span class="cursor" :class="{ 'blink': displayedArt.length < fullText.length }" v-if="displayedArt.length < fullText.length">_</span></pre>
                <HeaderLinks></HeaderLinks>
        </div>
        <div class="header-container right">
@@ -144,6 +181,23 @@ onMounted(() => {
    color: var(--color-text);
    min-height: clamp(1.59rem, 6.38vw, 3.01rem);
    min-width: clamp(11rem, 44vw, 23rem);
+
+    span:not(.char-done) {
+        color: transparent;
+    }
+}
+
+.char-done {
+    opacity: 1;
+}
+
+.cursor {
+    font-weight: bold;
+    color: var(--color-text);
+
+    &.blink {
+        animation: blink 1s step-end infinite;
+    }
 }

@keyframes blink {
--- a/frontend/app/pages/art/[slug].vue
+++ b/frontend/app/pages/art/[slug].vue
@@ -23,6 +23,7 @@ const { data: post } = await useAsyncData(`art-${slug}`, () =>
 .extended-container {
    width: 100%;
    margin: auto;
+    margin-top: 32px;
 }

 .art {
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -318,7 +318,6 @@ const sectionTargets = {

 <style lang="scss" scoped>
 .intro-section {
-  margin-top: 290px;

  > div:first-child {
    margin-top: 0;
@@ -328,16 +327,16 @@ const sectionTargets = {
    margin-bottom: 0;
  }

+  @media screen and (min-width: 1200px) {
+    margin-top: 290px;
+  }
+
  @media screen and (max-width: 1200px) and (min-width: 900px) {
    margin-top: 380px;
  }

-  @media screen and (max-width: 900px) and (min-width: 600px) {
-    margin-top: 280px;
-  }
-
-  @media screen and (max-width: 600px) {
-    margin-top: 280px;
+  @media screen and (max-width: 900px) {
+    margin-top: 60px;
  }
 }

--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -27,5 +27,5 @@ export default defineNuxtConfig({
    vueI18n: './i18n.config.ts',
    langDir: 'locales/'
  },
-  modules: ['@nuxtjs/i18n', '@nuxt/content', '@nuxt/image']
+  modules: ['@nuxtjs/i18n', '@nuxt/content', '@nuxt/image', 'motion-v/nuxt']
 })
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2071,14 +2071,6 @@
      "resolved": "https://registry.npmjs.org/citty/-/citty-0.2.1.tgz",
      "integrity": "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg=="
    },
-    "node_modules/@nuxt/cli/node_modules/giget": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/giget/-/giget-3.1.2.tgz",
-      "integrity": "sha512-T2qUpKBHeUTwHcIhydgnJzhL0Hj785ms+JkxaaWQH9SDM/llXeewnOkfJcFShAHjWI+26hOChwUfCoupaXLm8g==",
-      "bin": {
-        "giget": "dist/cli.mjs"
-      }
-    },
    "node_modules/@nuxt/cli/node_modules/std-env": {
      "version": "3.10.0",
      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
@@ -5970,22 +5962,23 @@
      }
    },
    "node_modules/c12": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.3.tgz",
-      "integrity": "sha512-750hTRvgBy5kcMNPdh95Qo+XUBeGo8C7nsKSmedDmaQI+E0r82DwHeM6vBewDe4rGFbnxoa4V9pw+sPh5+Iz8Q==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.4.tgz",
+      "integrity": "sha512-cM0ApFQSBXuourJejzwv/AuPRvAxordTyParRVcHjjtXirtkzM0uK2L9TTn9s0cXZbG7E55jCivRQzoxYmRAlA==",
+      "license": "MIT",
      "dependencies": {
        "chokidar": "^5.0.0",
-        "confbox": "^0.2.2",
-        "defu": "^6.1.4",
-        "dotenv": "^17.2.3",
+        "confbox": "^0.2.4",
+        "defu": "^6.1.6",
+        "dotenv": "^17.3.1",
        "exsolve": "^1.0.8",
-        "giget": "^2.0.0",
+        "giget": "^3.2.0",
        "jiti": "^2.6.1",
        "ohash": "^2.0.11",
        "pathe": "^2.0.3",
-        "perfect-debounce": "^2.0.0",
+        "perfect-debounce": "^2.1.0",
        "pkg-types": "^2.3.0",
-        "rc9": "^2.1.2"
+        "rc9": "^3.0.1"
      },
      "peerDependencies": {
        "magicast": "*"
@@ -5996,15 +5989,6 @@
        }
      }
    },
-    "node_modules/c12/node_modules/rc9": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
-      "integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
-      "dependencies": {
-        "defu": "^6.1.4",
-        "destr": "^2.0.3"
-      }
-    },
    "node_modules/cac": {
      "version": "6.7.14",
      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -6696,9 +6680,10 @@
      }
    },
    "node_modules/defu": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
+      "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
+      "license": "MIT"
    },
    "node_modules/denque": {
      "version": "2.1.0",
@@ -7710,17 +7695,10 @@
      }
    },
    "node_modules/giget": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz",
-      "integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==",
-      "dependencies": {
-        "citty": "^0.1.6",
-        "consola": "^3.4.0",
-        "defu": "^6.1.4",
-        "node-fetch-native": "^1.6.6",
-        "nypm": "^0.6.0",
-        "pathe": "^2.0.3"
-      },
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-3.2.0.tgz",
+      "integrity": "sha512-GvHTWcykIR/fP8cj8dMpuMMkvaeJfPvYnhq0oW+chSeIr+ldX21ifU2Ms6KBoyKZQZmVaUAAhQ2EZ68KJF8a7A==",
+      "license": "MIT",
      "bin": {
        "giget": "dist/cli.mjs"
      }
@@ -8784,9 +8762,10 @@
      }
    },
    "node_modules/jiti": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
-      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "license": "MIT",
      "bin": {
        "jiti": "lib/jiti-cli.mjs"
      }
@@ -10389,9 +10368,10 @@
      "license": "MIT"
    },
    "node_modules/mlly": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.1.tgz",
-      "integrity": "sha512-SnL6sNutTwRWWR/vcmCYHSADjiEesp5TGQQ0pXyLhW5IoeibRlF/CbSLailbB3CNqJUk9cVJ9dUDnbD7GrcHBQ==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "license": "MIT",
      "dependencies": {
        "acorn": "^8.16.0",
        "pathe": "^2.0.3",
@@ -12546,9 +12526,10 @@
      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
    },
    "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
      "engines": {
        "node": ">=12"
      },
@@ -12566,12 +12547,13 @@
      }
    },
    "node_modules/pkg-types": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
-      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
+      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
+      "license": "MIT",
      "dependencies": {
-        "confbox": "^0.2.2",
-        "exsolve": "^1.0.7",
+        "confbox": "^0.2.4",
+        "exsolve": "^1.0.8",
        "pathe": "^2.0.3"
      }
    },
@@ -13199,11 +13181,12 @@
      "license": "ISC"
    },
    "node_modules/rc9": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.0.tgz",
-      "integrity": "sha512-MGOue0VqscKWQ104udASX/3GYDcKyPI4j4F8gu/jHHzglpmy9a/anZK3PNe8ug6aZFl+9GxLtdhe3kVZuMaQbA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.1.tgz",
+      "integrity": "sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ==",
+      "license": "MIT",
      "dependencies": {
-        "defu": "^6.1.4",
+        "defu": "^6.1.6",
        "destr": "^2.0.5"
      }
    },
@@ -13823,9 +13806,10 @@
      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
    },
    "node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.3.tgz",
+      "integrity": "sha512-wnilbGyMxzbY7dNOl7jpKbLSjcfeweJWU5j4+u5qW+6/wuGD9KzIGOyZnQVSBM9E7DtWaaH3CyHkppYrKYoxwg==",
+      "license": "ISC",
      "bin": {
        "semver": "bin/semver.js"
      },
@@ -14666,12 +14650,13 @@
      }
    },
    "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
      "dependencies": {
        "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
+        "picomatch": "^4.0.4"
      },
      "engines": {
        "node": ">=12.0.0"
@@ -14857,9 +14842,10 @@
      }
    },
    "node_modules/ufo": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz",
-      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "license": "MIT"
    },
    "node_modules/ultrahtml": {
      "version": "1.6.0",
Author	SHA1	Message	Date
BinarySandia04	850d5f64e1	Ye Some checks failed Build and Deploy Nuxt / build (push) Failing after 1m16s Details	2026-06-09 01:12:58 +02:00
BinarySandia04	09b3a19a33	holy	2026-06-09 01:10:40 +02:00