A lot of AI slop

2026-06-08 19:36:45 +02:00
parent 8859ee5a5f
commit bbc34c1b12
20 changed files with 1606 additions and 324 deletions
--- a/frontend/app/components/parts/HeaderLinks.vue
+++ b/frontend/app/components/parts/HeaderLinks.vue
@@ -1,33 +1,131 @@
 <script setup lang="ts">
 const localePath = useLocalePath()
+const route = useRoute()
+const router = useRouter()
+
+const scrollTargets: Record<string, string> = {
+    'index': 'top',
+    'blog': '#scroll-blog',
+    'contact': '#scroll-contact',
+    'art': '#scroll-art'
+}
+
+const currentPath = computed(() => route.path)
+
+function handleClick(targetKey: string, e: MouseEvent) {
+    if (e.ctrlKey || e.metaKey || e.altKey || e.button !== 0) return
+   const isHome = currentPath.value === localePath('index')
+    if (!isHome) return
+      e.preventDefault()
+      const targetId = scrollTargets[targetKey] || 'top'
+      if (targetId === 'top') {
+        window.scrollTo({ top: 0, behavior: 'smooth' })
+        } else {
+            const el = document.querySelector(targetId)
+            if (el) {
+                el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+            } else {
+                const hash = targetId.substring(1)
+                router.replace({ hash })
+            }
+        }
+}
 </script>

 <template>
-    <div class="menus">
-        <NuxtLink :to="localePath('index')">/</NuxtLink>
-        <NuxtLink :to="localePath('blog')">/{{ $t('header.links.blog') }}</NuxtLink>
-        <NuxtLink :to="localePath('contact')">/{{ $t('header.links.contact') }}</NuxtLink>
-        <NuxtLink :to="localePath('art')">/{{ $t('header.links.art') }}</NuxtLink>
-        <!-- <NuxtLink class="disabled">Drawings</NuxtLink> -->
+    <div class="tui-tabs">
+        <a :href="localePath('index')" class="tui-tab" @click="handleClick('index', $event)">
+            <span class="tab-sep" v-if="false">│</span>
+            <span class="tab-label">/</span>
+        </a>
+        <a :href="localePath('blog')" class="tui-tab" @click="handleClick('blog', $event)">
+            <span class="tab-sep">│</span>
+            <span class="tab-label">/{{ $t('header.links.blog') }}</span>
+        </a>
+        <a :href="localePath('contact')" class="tui-tab" @click="handleClick('contact', $event)">
+            <span class="tab-sep">│</span>
+            <span class="tab-label">/{{ $t('header.links.contact') }}</span>
+        </a>
+        <a :href="localePath('art')" class="tui-tab" @click="handleClick('art', $event)">
+            <span class="tab-sep">│</span>
+            <span class="tab-label">/{{ $t('header.links.art') }}</span>
+        </a>
    </div>
 </template>

 <style lang="scss" scoped>

-.menus > a {
-    margin-right: 10px;
-    margin-left: 10px;
-    text-decoration: none;
-    text-shadow: 0 0 1px var(--color-link);
+.tui-tabs {
+  display: inline-flex;
+  background-color: var(--color-background-fore);
+  border: 1px solid var(--color-border-color);
+  box-shadow: inset 2px -2px 0px 0px rgba(0,0,0,0.2);
 }

+.tui-tab {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    padding: 4px 12px;
+    font-family: 'Hurmit', monospace;
+    font-size: 0.85rem;
+    color: var(--color-text);
+    text-shadow: none;
+    transition: all 0.1s steps(2, end);
+    border-right: 1px solid var(--color-border-color);
+    
+    &:last-child {
+        border-right: none;
+    }
+    
+    .tab-sep {
+        color: var(--color-text);
+        opacity: 0.3;
+        margin-right: 8px;
+        font-size: 0.75rem;
+    }

-.menus > a.router-link-exact-active {
-    color: var(--color-link);
-    text-shadow: 0 0 8px var(--color-link);
+    &:hover {
+        background-color: var(--color-hover);
+        text-shadow: none;
+    }
+}
+
+.tui-tab.router-link-exact-active {
+    color: var(--color-background-fore);
+    background-color: var(--color-link);
+    text-shadow: 0 0 8px rgba(255,255,255,0.3);
+    
+    .tab-sep {
+        color: var(--color-background-fore);
+        opacity: 0.6;
+    }
 }

 .disabled {
    color: #aaaaaa77;
 }
-</style>
+
+@media screen and (max-width: 900px) {
+  .tui-tab {
+      padding: 3px 8px;
+      font-size: 0.75rem;
+      
+      .tab-sep {
+          margin-right: 4px;
+      }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .tui-tab {
+      padding: 3px 5px;
+      font-size: 0.7rem;
+      
+      .tab-sep {
+          margin-right: 3px;
+      }
+  }
+}
+
+</style>
--- a/frontend/app/components/parts/MinimalHeader.vue
+++ b/frontend/app/components/parts/MinimalHeader.vue
@@ -4,46 +4,45 @@ import SiteOptions from './site_options/SiteOptions.vue';
 </script>

 <template>
-  <div class="sticky-header">
-    <div class="container">
-      <div class="sticky-header-inner">
+  <div class="tui-minimalbar">
+    <div class="minimal-inner">
        <div class="left">
-          <h1>ARANROIG.COM</h1>
-          <HeaderLinks />
+            <span class="sticky-title" aria-hidden="true">◆ ARANROIG.COM</span>
+            <HeaderLinks />
        </div>
        <SiteOptions />
-      </div>
    </div>
  </div>
  <div style="height: 80px"></div>
 </template>

 <style lang="scss" scoped>
-.sticky-header {
+.tui-minimalbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

-  background: var(--color-sticky-header-bg, #fff);
-  border-bottom: 1px solid var(--color-sticky-header-border, rgba(0, 0, 0, 0.08));
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
-  backdrop-filter: blur(10px);
+  background: var(--color-sticky-header-bg);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 0px 0px var(--color-container-shadow);
 }

-.sticky-header-inner {
+.minimal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
-  padding: 10px 0;
+  padding: 6px 24px;

-  h1 {
-    margin: 0;
-    font-size: inherit;
-    white-space: nowrap;
-    font-weight: normal;
+  @media screen and (max-width: 900px) {
+      padding: 5px 16px;
+  }
+
+  @media screen and (max-width: 600px) {
+      padding: 4px 12px;
+      gap: 0.5rem;
  }
 }

@@ -51,6 +50,22 @@ import SiteOptions from './site_options/SiteOptions.vue';
  display: flex;
  align-items: center;
  gap: 1rem;
-  margin-left: 30px;
+  
+  @media screen and (max-width: 600px) {
+    gap: 0.5rem;
+  }
 }
-</style>
+
+.sticky-title {
+  font-family: 'Hurmit', monospace;
+  font-size: 0.8rem;
+  color: var(--color-text);
+  letter-spacing: 1px;
+  white-space: nowrap;
+  
+  @media screen and (max-width: 900px) {
+    font-size: 0.75rem;
+  }
+}
+
+</style>
--- a/frontend/app/components/parts/PageHeader.vue
+++ b/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>
--- a/frontend/app/components/parts/StickyHeader.vue
+++ b/frontend/app/components/parts/StickyHeader.vue
@@ -14,35 +14,33 @@ function onScroll() {
 
 onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }));
 onUnmounted(() => window.removeEventListener('scroll', onScroll));
+
 </script>

 <template>
-<div class="sticky-header" :class="{ visible: isVisible }">
-        <div class="container">
-            <div class="sticky-header-inner">
-                <div class="left">
-                    <h1>ARANROIG.COM</h1>
-                    <HeaderLinks />
-                </div>
-                <SiteOptions />
-            </div>
+<div class="tui-stickybar" :class="{ visible: isVisible }">
+    <div class="sticky-inner">
+        <div class="left">
+            <span class="sticky-title" aria-hidden="true">◆ ARANROIG.COM</span>
+            <HeaderLinks />
        </div>
+        <SiteOptions />
    </div>
+</div>
 </template>

 <style lang="scss" scoped>

-.sticky-header {
+.tui-stickybar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
 
-    background: var(--color-sticky-header-bg, #fff);
-    border-bottom: 1px solid var(--color-sticky-header-border, rgba(0, 0, 0, 0.08));
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
-    backdrop-filter: blur(10px);
+    background: var(--color-sticky-header-bg);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 4px 0px 0px var(--color-container-shadow);
 
    // Hidden state — translated up and invisible
    transform: translateY(-100%);
@@ -57,21 +55,26 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll));
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
+        transition:
+            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+            opacity 0.3s ease;
    }
 }
- 
-.sticky-header-inner {
+
+.sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
-    padding: 10px 0;
- 
-    h1 {
-        margin: 0;
-        font-size: inherit; // inherit from your existing h1 styles
-        white-space: nowrap;
-        font-weight: normal;
+    padding: 6px 24px;
+
+    @media screen and (max-width: 900px) {
+        padding: 5px 16px;
+    }
+
+    @media screen and (max-width: 600px) {
+        padding: 4px 12px;
+        gap: 0.5rem;
    }
 }

@@ -79,6 +82,22 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll));
    display: flex;
    align-items: center;
    gap: 1rem;
-    margin-left: 30px;
+    
+    @media screen and (max-width: 600px) {
+        gap: 0.5rem;
+    }
 }
-</style>
+
+.sticky-title {
+    font-family: 'Hurmit', monospace;
+    font-size: 0.8rem;
+    color: var(--color-text);
+    letter-spacing: 1px;
+    white-space: nowrap;
+    
+    @media screen and (max-width: 900px) {
+        font-size: 0.75rem;
+    }
+}
+
+</style>
--- a/frontend/app/components/parts/TableHeader.vue
+++ b/frontend/app/components/parts/TableHeader.vue
@@ -9,11 +9,16 @@ const spritePath = computed(() => {
 });
 const hasAnimated = useState('title-animated', () => false)

-const fullText = "ARANROIG.COM";
-const displayedText = ref("");
+const asciiArt = [
+  "█▀█ █▀▄ █▀█ █▀█ █▀▄ █▀█ ▀█▀ █▀▀    █▀▀ █▀█ █▄█",
+  "█▀█ █▀▄ █▀█ █ █ █▀▄ █ █  █  █ █    █   █ █ █ █",
+  "▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀▀ ▀  ▀▀▀ ▀▀▀ ▀ ▀"
+];
+const fullText = asciiArt.join('\n');

-let index = 0
-let interval = null
+const displayedArt = ref("");
+let charIndex = 0;
+let intervalId: ReturnType<typeof setInterval> | null = null;

 const dragon_names = ["katlum", "solus"];
 const sprite_names = dragon_names.map(name => `/sprites/${name}/${name}.gif`);
@@ -33,41 +38,45 @@ const preloadImages = (imageArray) => {

 onMounted(() => {
    preloadImages(sprite_names);
-if (hasAnimated.value) {
-    displayedText.value = fullText
-    return
-  }

-  interval = setInterval(() => {
-    if (index < fullText.length) {
-      displayedText.value += fullText[index]
-      index++
-    } else {
-      clearInterval(interval)
-      hasAnimated.value = true;
-    }
-  }, 35) // velocidad de escritura
-})
+   if (hasAnimated.value || displayedArt.value === fullText) {
+     displayedArt.value = fullText;
+     return;
+   }

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

 </script>

 <template>
    <div class="header">
        <div class="header-container website">
-                <h1 class="title">{{ displayedText }}</h1>
+                <pre v-html="displayedArt + (displayedArt.length < fullText.length ? '_' : '')" class="title ascii-art" aria-label="ARANROIG.COM"></pre>
                <HeaderLinks></HeaderLinks>
        </div>
-        <div class="undertable">
-            <Sprite :path="spritePath" bottom="-60px" left="-75px"></Sprite> 
-        </div>
-        <div class="header-container">
+        <div class="header-container right">
            <SiteOptions></SiteOptions>
        </div>
    </div>
+    <div class="undertable-wrapper">
+        <div class="undertable">
+            <Sprite :path="spritePath"></Sprite> 
+        </div>
+    </div>
    <StickyHeader></StickyHeader>
 </template>

@@ -90,34 +99,33 @@ onBeforeUnmount(() => {
    }
 }

-.undertable {
+.undertable-wrapper {
    position: relative;
-    left: -200px;
-    margin-top: 450px;
-    margin-left: -425px;
-    margin-bottom: 25px;
+    margin-top: -100px;
+    display: flex;
    user-select: none;
    pointer-events: none;
+    z-index: 1;

    @media screen and (max-width: 1200px) and (min-width: 900px) {
-        left: -50px;
-        bottom: 20px;
-        margin-top: 350px;
+        margin-top: -340px;
    }

    @media screen and (max-width: 900px) and (min-width: 600px) {
-        left: 70px;
-        bottom: 50px;
-        margin-top: 250px;
+        margin-top: -240px;
    }

    @media screen and (max-width: 600px) {
-        left: 150px;
-        bottom: 70px;
-        margin-top: 250px;
+        margin-top: -240px;
    }
 }

+.undertable {
+    position: relative;
+    width: 160px;
+    height: 180px;
+}
+
 .web-links {
    position: relative;
    z-index: 200;
@@ -127,14 +135,13 @@ onBeforeUnmount(() => {
    background-color: var(--color-background);
 }

-.title {
-    width: 300px;
-}
-
-.title::after {
-    content: "_";
-    animation: blink 3s infinite;
-    animation-timing-function: steps(1, end);
+.ascii-art {
+    font-family: 'Hurmit', monospace;
+    font-size: clamp(0.45rem, 1.8vw, 0.85rem);
+    line-height: 1.18;
+    letter-spacing: -0.05ch;
+    white-space: pre;
+    color: var(--color-text);
 }

@keyframes blink {
@@ -145,4 +152,4 @@ onBeforeUnmount(() => {
    opacity: 0;
  }
 }
-</style>
+</style>
--- a/frontend/app/components/parts/site_options/LanguageSelector.vue
+++ b/frontend/app/components/parts/site_options/LanguageSelector.vue
@@ -55,14 +55,14 @@ const changeLocale = (lang) => {
  background: var(--color-background-fore);
  color: var(--color-text);
  font-size: 1em;
-  border: 1px solid #30363d;
-  padding: 8px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  margin-right: 15px;
+border: 1px solid var(--color-border-color);
+   padding: 8px 12px;
+   border-radius: 0;
+   cursor: pointer;
+   margin-right: 15px;

  &.active {
-    background-color: #30363d;
+    background-color: var(--color-selected);
  }
 }
 /* Dropdown transitions */
@@ -81,10 +81,21 @@ const changeLocale = (lang) => {
  right: 110px;
  margin-right: 10px;
  background: var(--color-background-fore);
-  border: 1px solid #30363d;
-  border-radius: 8px;
-  padding: 8px 0;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
+border: 1px solid var(--color-border-color);
+   border-radius: 0;
+   padding: 8px 0;
+   box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3);
+   border-left: 2px solid var(--color-border-color);
+
+   &::before {
+     content: "▸";
+     display: block;
+     position: absolute;
+     left: -16px;
+     top: -2px;
+     font-size: 14px;
+     color: var(--color-border-color);
+   }
 }

 /* Items */
--- a/frontend/app/components/parts/site_options/ThemeSelector.vue
+++ b/frontend/app/components/parts/site_options/ThemeSelector.vue
@@ -89,19 +89,39 @@ onUnmounted(() => {

 <style lang="scss" scoped>
 .circle {
-    width: 12px;
-    height: 12px;
-    margin-top: -3px;
-    border-radius: 50%;      /* makes it a circle */
+    width: 10px;
+    height: 10px;
+    margin-top: -1px;
+    border-radius: 0;
    z-index: 200;
    justify-content: center;
-    border: 2px var(--color-border) solid;
+    border: 1px solid var(--color-border-color);

    &.dark {
        background-color: rgb(28, 28, 28);
+        position: relative;
+        
+        &::after {
+            content: "◆";
+            color: white;
+            font-size: 6px;
+            position: absolute;
+            top: -1px;
+            left: 1px;
+        }
    }
    &.light {
        background-color: rgb(232, 232, 232);
+        position: relative;
+        
+        &::after {
+            content: "◆";
+            color: #666;
+            font-size: 6px;
+            position: absolute;
+            top: -1px;
+            left: 1px;
+        }
    }
    &.katlum {
        background-color: #4f8fba;
@@ -141,11 +161,11 @@ onUnmounted(() => {
  background: var(--color-background-fore);
  color: var(--color-text);
  font-size: 1em;
-  border: 1px solid #30363d;
-  padding: 8px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  margin-right: 15px;
+border: 1px solid var(--color-border-color);
+   padding: 8px 12px;
+   border-radius: 0;
+   cursor: pointer;
+   margin-right: 15px;
 }

 /* Dropdown transitions */
@@ -160,16 +180,16 @@ onUnmounted(() => {
 /* Dropdown */
 .dropdown {
 z-index: 10;
-  position: absolute;
-  top: 50px;
-  right: 0;
-  margin-right: 10px;
-  width: 320px;
-  background: var(--color-background-fore);
-  border: 1px solid #30363d;
-  border-radius: 8px;
-  padding: 8px 0;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
+   position: absolute;
+   top: 50px;
+   right: 0;
+   margin-right: 10px;
+   width: 320px;
+   background: var(--color-background-fore);
+   border: 1px solid var(--color-border-color);
+   border-radius: 0;
+   padding: 8px 0;
+   box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3);
 }

 /* Sections */
@@ -183,7 +203,7 @@ onUnmounted(() => {
  color: var(--color-text);
  cursor: pointer;
  display: flex;
-  border-radius: 5px;
+  border-radius: 0;
  gap: 10px;
  margin: 8px;
  align-items: center;
@@ -209,8 +229,16 @@ onUnmounted(() => {

 /* Divider */
 .divider {
-  height: 1px;
-  background: #30363d;
-  margin: 6px 0;
+  height: 0;
+  color: var(--color-border-color);
+  font-family: 'Hurmit', monospace;
+  font-size: 0;
+  line-height: 0;
+  white-space: nowrap;
+  margin: 8px 16px;
+
+  &::before {
+    content: "═══════════";
+  }
 }
 </style>