Big commit

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules
+*Zone.Identifier

frontend/app/app.vue

@@ -29,15 +29,4 @@ onMounted(() => {
   padding-right: 20px;
 }
 
-@media screen and (min-width: 1200px){
-  .container {
-    width: 1100px;
-  }
-}
-
-@media screen and (max-width: 1200px){
-  .container {
-    max-width: 1100px;
-  }
-}
 </style>

frontend/app/assets/css/colors.scss

@@ -10,7 +10,8 @@ $themes: (
         border-color: #819796,
         border: #202324,
         text: #ebede9,
-        container-shadow: #151d28
+        container-shadow: #151d28,
+        sticky-header-bg: #20202077
     ),
     light: (
         background: #ffffff,
@@ -21,7 +22,8 @@ $themes: (
         hover: #e9e9e9,
         selected: #d4d4d4,
         text: #1e1e1e,
-        container-shadow: #5f6774
+        container-shadow: #5f6774,
+        sticky-header-bg: #fff
     )
 );
 
@@ -31,6 +33,9 @@ $accents: (
   ),
   solus: (
     link: #e6a556,
+  ),
+  silang: (
+    link: #c65197,
   )
 );
 
@@ -62,3 +67,7 @@ $accents: (
 [data-accent="solus"] {
   @include accent-vars(map.get($accents, solus));
 }
+
+[data-accent="silang"] {
+  @include accent-vars(map.get($accents, silang));
+}

frontend/app/components/Footer.vue

@@ -1,5 +1,7 @@
 <template>
     <div class="footer">
+        <span>{{ $t('prefooter') }}</span>
+        <br>
         <span>{{ $t('footer') }}</span>
     </div>
 </template>
@@ -8,6 +10,7 @@
 .footer {
     width: 100%;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     margin-top: 60px;
 }

frontend/app/components/content/ArtColumns.vue

@@ -0,0 +1,10 @@
+<template>
+  <div style="display: flex; gap: 1rem; max-height: calc(100vh - 130px);">
+    <div style="flex: 4; overflow-y: auto; text-align: center;">
+      <slot name="left" />
+    </div>
+    <div style="flex: 2; overflow-y: auto; margin-left: 25px;">
+      <slot name="right" />
+    </div>
+  </div>
+</template>

frontend/app/components/layouts/FixedLayout.vue

@@ -0,0 +1,19 @@
+<template>
+<div class="fixed-layout">
+    <slot></slot>
+</div>
+</template>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 1200px){
+  .fixed-layout {
+    width: 1100px;
+  }
+}
+
+@media screen and (max-width: 1200px){
+  .fixed-layout {
+    max-width: 1100px;
+  }
+}
+</style>

frontend/app/components/parts/HeaderLinks.vue

@@ -7,6 +7,7 @@ const localePath = useLocalePath()
         <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>
 </template>
@@ -20,6 +21,12 @@ const localePath = useLocalePath()
     text-shadow: 0 0 1px var(--color-link);
 }
 
+
+.menus > a.router-link-exact-active {
+    color: var(--color-link);
+    text-shadow: 0 0 8px var(--color-link);
+}
+
 .disabled {
     color: #aaaaaa77;
 }

frontend/app/components/parts/MinimalHeader.vue

@@ -0,0 +1,56 @@
+<script lang="js" setup>
+import HeaderLinks from './HeaderLinks.vue';
+import SiteOptions from './site_options/SiteOptions.vue';
+</script>
+
+<template>
+  <div class="sticky-header">
+    <div class="container">
+      <div class="sticky-header-inner">
+        <div class="left">
+          <h1>ARANROIG.COM</h1>
+          <HeaderLinks />
+        </div>
+        <SiteOptions />
+      </div>
+    </div>
+  </div>
+  <div style="height: 80px"></div>
+</template>
+
+<style lang="scss" scoped>
+.sticky-header {
+  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);
+}
+
+.sticky-header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 10px 0;
+
+  h1 {
+    margin: 0;
+    font-size: inherit;
+    white-space: nowrap;
+    font-weight: normal;
+  }
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 30px;
+}
+</style>

frontend/app/components/parts/PageHeader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import HeaderLinks from './HeaderLinks.vue';
 import SiteOptions from './site_options/SiteOptions.vue';
+import StickyHeader from './StickyHeader.vue';
 </script>
 
 <template>
@@ -17,6 +18,7 @@ import SiteOptions from './site_options/SiteOptions.vue';
             <SiteOptions></SiteOptions>
         </div>
     </div>
+    <StickyHeader></StickyHeader>
 </template>
 
 <style lang="scss" scoped>

frontend/app/components/parts/StickyHeader.vue

@@ -0,0 +1,84 @@
+<script lang="js" setup>
+
+import HeaderLinks from './HeaderLinks.vue';
+import SiteOptions from './site_options/SiteOptions.vue';
+import { ref, onMounted, onUnmounted } from 'vue';
+ 
+const SCROLL_THRESHOLD = 120; // px scrolled before sticky header appears
+ 
+const isVisible = ref(false);
+ 
+function onScroll() {
+    isVisible.value = window.scrollY > SCROLL_THRESHOLD;
+}
+ 
+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>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+
+.sticky-header {
+    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);
+ 
+    // Hidden state — translated up and invisible
+    transform: translateY(-100%);
+    opacity: 0;
+    pointer-events: none;
+ 
+    transition:
+        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.3s ease;
+ 
+    &.visible {
+        transform: translateY(0);
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
+ 
+.sticky-header-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;
+    }
+}
+
+.left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-left: 30px;
+}
+</style>

frontend/app/components/parts/TableHeader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 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(() => {
@@ -44,12 +45,13 @@ onBeforeUnmount(() => {
                 <HeaderLinks></HeaderLinks>
         </div>
         <div class="undertable">
-            <Sprite :path="spritePath" bottom="-141px" left="-75px"></Sprite> 
+            <Sprite :path="spritePath" bottom="-60px" left="-75px"></Sprite> 
         </div>
         <div class="header-container">
             <SiteOptions></SiteOptions>
         </div>
     </div>
+    <StickyHeader></StickyHeader>
 </template>
 
 <style lang="scss" scoped>

frontend/app/pages/art/[slug].vue

@@ -0,0 +1,42 @@
+<script setup>
+import MinimalHeader from '~/components/parts/MinimalHeader.vue';
+import PageHeader from '~/components/parts/PageHeader.vue';
+
+const slug = useRoute().params.slug;
+const { locale } = useI18n();
+
+const { data: post } = await useAsyncData(`art-${slug}`, () => 
+  queryCollection(`art`).path(`/art/${locale.value}/${slug}`).first()
+, {watch: [locale]})
+</script>
+
+<template>
+  <!-- Render the blog post as Prose & Vue components -->
+  <MinimalHeader></MinimalHeader>
+  <div class="extended-container">
+    <ContentRenderer :value="post" class="art" />
+  </div>
+</template>
+
+<style lang="scss">
+.extended-container {
+    width: 100%;
+    margin: auto;
+}
+
+.art {
+    h2 {
+        a {
+            text-decoration: none;
+            color: var(--color-text);
+        }   
+    }
+
+    img {
+        margin: auto;
+        display: flex;
+        max-height: 77vh;
+        max-width: 100%;
+    }
+}
+</style>

frontend/app/pages/art/index.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { routeLocationKey } from 'vue-router';
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
+import TableHeader from '~/components/parts/TableHeader.vue';
+
+const { locale } = useI18n();
+const localePath = useLocalePath()
+
+const {data: posts} = useAsyncData('art-posts', async () => 
+await queryCollection(`art`).where('path', 'LIKE', `/art/${locale.value}/%`).order('date', 'DESC').all()
+, {watch: [locale, () => useRoute().path]});
+
+</script>
+
+<template>
+    <TableHeader></TableHeader>
+
+    <FixedLayout>
+        <Container>
+            <div class="grid">
+                <NuxtLink v-for="art in posts"
+                :key="art.slug"
+                class="selector"
+                :style="`background-image: url('${art.thumb}');`"
+                :to="localePath(`/art/${art.slug}`)">
+                    <div class="overlay-text">{{ art.title }}</div>
+                </NuxtLink>
+                
+                <!-- 
+                <div class="selector" style="background-image: url('/art/nozt/nozt-full-low.png');">
+                    <div class="overlay-text">Test</div>
+                </div>
+
+                <div class="selector" style="background-image: url('/art/knocking/knocking-low.png');">
+                    <div class="overlay-text">Test</div>
+                </div>
+
+                <div class="selector" style="background-image: url('/art/valentin/valentin.png');">
+                    <div class="overlay-text">Test</div>
+                </div>
+
+                <div class="selector" style="background-image: url('/art/miirym/miirym.png');">
+                    <div class="overlay-text">Test</div>
+                </div>
+
+                <div class="selector" style="background-image: url('/art/silang-3d/silang-3d.png');">
+                    <div class="overlay-text">Test</div>
+                </div>
+
+                <div class="selector" style="background-image: url('/art/yharon/yharon.png'); background-position-y: 0px;">
+                    <div class="overlay-text">Test</div>
+                </div>
+                -->
+            </div>
+        </Container>
+    </FixedLayout>
+    <Footer></Footer>
+</template>
+
+<style lang="scss" scoped>
+.grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(250px, 1fr));
+    gap: 16px;
+    padding: 40px 20px 40px 20px;
+}
+.selector {
+    width: 100%;
+    height: 250px;
+    background-size: cover;
+    background-position: center;
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.selector:hover {
+    transform: scale(1.03);
+}
+
+.overlay-text {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    color: white;
+    font-size: 18px;
+    font-weight: bold;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
+    pointer-events: none;
+}
+h2 {
+    margin-left: 20px;
+}
+
+p {
+    margin-left: 30px;
+}
+
+.two-columns {
+    display: flex;
+    width: 100%;
+}
+
+@media (max-width: 900px) {
+    .grid {
+        grid-template-columns: repeat(2, minmax(250px, 1fr));
+    }
+}
+
+@media (max-width: 500px) {
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}
+</style>

frontend/app/pages/blog/[slug].vue

@@ -1,4 +1,5 @@
 <script setup>
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import PageHeader from '~/components/parts/PageHeader.vue';
 
 const slug = useRoute().params.slug;
@@ -12,9 +13,11 @@ const { data: post } = await useAsyncData(`blog-${slug}`, () =>
 <template>
   <!-- Render the blog post as Prose & Vue components -->
   <PageHeader></PageHeader>
+  <FixedLayout>
     <Container>
       <ContentRenderer :value="post" class="blog" />
     </Container>
+  </FixedLayout>
   <Footer></Footer>
 </template>
 

frontend/app/pages/blog/index.vue

@@ -1,16 +1,22 @@
 <script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
 import { useAsyncData } from '#app';
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
 const { locale } = useI18n();
 const localePath = useLocalePath()
 
-const {data: posts} = useAsyncData('posts', async () => 
+const {data: posts, refresh} = useAsyncData('blog-posts', async () => 
 await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).order('date', 'DESC').all()
-, {watch: [locale]});
+, {watch: [locale, () => useRoute().path]});
+
+onActivated(() => {
+  refresh();
+});
 </script>
 
 <template>
     <TableHeader></TableHeader>
+    <FixedLayout>
       <Container>
       <h2>Blog</h2>
       <ul>
@@ -23,6 +29,7 @@ await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).o
         </li>
       </ul>
       </Container>
+    </FixedLayout>
     <Footer></Footer>
 </template>
 

frontend/app/pages/contact/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
 
 const { get, post } = api();
 const { locale } = useI18n();
@@ -14,9 +15,11 @@ const { data: markdown } = await useAsyncData(`fixed`, async () =>
 <template>
     <TableHeader></TableHeader>
 
+    <FixedLayout>
         <Container>
             <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
         </Container>
+    </FixedLayout>
     <Footer></Footer>
 </template>
 

frontend/app/pages/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
 import api from '~/composables/api'
 
@@ -23,8 +24,11 @@ onMounted(async () => {
 
 <template>
   <TableHeader></TableHeader>
+  
+  <FixedLayout>
     <Container>
       <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
     </Container>    
+  </FixedLayout>
   <Footer></Footer>
 </template>

frontend/content.config.ts

@@ -18,5 +18,16 @@ export default defineContentConfig({
       type: 'page',
       source: 'fixed/**/**.md'
     }),
+
+    art: defineCollection({
+      type: 'page',
+      source: 'art/**/**.md',
+      schema: z.object({
+        title: z.string(),
+        slug: z.string(),
+        thumb: z.string(),
+        date: z.string()
+      })
+    }),
   }
 })

frontend/content/art/ca/nozt.md

@@ -0,0 +1,24 @@
+---
+title: Nozt
+slug: nozt
+thumb: /art/nozt/nozt-full-low.png
+---
+
+::art-columns
+
+#left
+
+![Alt text](/art/nozt/nozt-full.png)
+
+Aquesta imatge té resolució completa siii
+
+#right
+## Eiiii
+
+Encara tinc això a mitges crec que ara ja es podria veure a la web real.
+
+De totes formes després més endavant posaré alguna descripció aquí o alguna
+història guai per a aquest drac o alguna cosa així.
+
+
+::

frontend/content/art/en/nozt.md

@@ -0,0 +1,24 @@
+---
+title: Nozt
+slug: nozt
+thumb: /art/nozt/nozt-full-low.png
+---
+
+::art-columns
+
+#left
+
+![Alt text](/art/nozt/nozt-full.png)
+
+This is the full resolution image
+
+#right
+## Hey
+
+I'm still working on this thing I think that it can be seen
+from the official website.
+
+Anyways I will add a serious description here of like some cool lore
+for the dragon or somehting
+
+::

frontend/content/art/es/nozt.md

@@ -0,0 +1,23 @@
+---
+title: Nozt
+slug: nozt
+thumb: /art/nozt/nozt-full-low.png
+---
+
+::art-columns
+
+#left
+
+![Alt text](/art/nozt/nozt-full.png)
+
+Ésta imagen tiene resolución completa siiii
+
+#right
+## Eyyyyy
+
+Aún tengo esto a medias creo que ya se podria ver desde la web real.
+
+De todos modos luego más adelante pondré una descripción aquí o alguna
+historia guai para este dragón o algo asi.
+
+::

frontend/i18n/locales/ca.json

@@ -23,8 +23,10 @@
     "header": {
         "links": {
             "blog": "blog",
-            "contact": "contacte"
+            "contact": "contacte",
+            "art": "art"
         }
     },
+    "prefooter": "Aquesta pàgina web ha sigut construida per un humà.",
     "footer": "(C) 2026 Aran Roig. Tots els drets no sé que."
 }

frontend/i18n/locales/en.json

@@ -23,11 +23,13 @@
     "header": {
         "links": {
             "blog": "blog",
-            "contact": "contact"
+            "contact": "contact",
+            "art": "art"
         }
     },
     "pages": {
         "root": ""
     },
+    "prefooter": "This webpage has been made by a human.",
     "footer": "(C) 2026 Aran Roig. All rights whatever."
 }

frontend/i18n/locales/es.json

@@ -23,8 +23,10 @@
     "header": {
         "links": {
             "blog": "blog",
-            "contact": "contacto"
+            "contact": "contacto",
+            "art": "arte"
         }
     },
+    "prefooter": "Esta página web ha sido construida por un humano.",
     "footer": "(C) 2026 Aran Roig. Todos los derechos no se que."
 }