Cards!

frontend/app/app.vue

@@ -4,9 +4,8 @@
   <div class="app-root" :class="{ 'zh': locale === 'zh' }" :data-lang="locale">
     <AnimatedBackground />
     <NuxtRouteAnnouncer />
-    <div class="container">
-      <NuxtPage />
-    </div>
+    <NuxtPage />
+  
   </div>
 </template>
 
@@ -32,22 +31,12 @@ useHead({
 onMounted(() => {
   setupTheme()
 });
+
 </script>
 
 <style lang="scss" scoped>
-.container {
-  align-items: stretch;   /* make items grow horizontally to fill container */
-  margin-bottom: 30px;
+.app-root {
   display: flex;
   flex-direction: column;
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-@media screen and (max-width: 600px) {
-    .container {
-        padding-left: 12px;
-        padding-right: 12px;
-    }
 }
 </style>

frontend/app/components/layouts/FullscreenLayout.vue

@@ -0,0 +1,12 @@
+<template>
+<div class="fixed-layout">
+    <slot></slot>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.fixed-layout {
+    width: 100vw;
+    min-height: 100vh;
+}
+</style>

frontend/app/components/parts/HeaderLinks.vue

@@ -4,6 +4,7 @@ const route = useRoute()
 
 const scrollTargets: Record<string, string> = {
     'index': '#top',
+    'projects': '#scroll-projects',
     'blog': '#scroll-blog',
     'contact': '#scroll-contact',
     'art': '#scroll-art'
@@ -32,6 +33,10 @@ function getToPath(targetKey: string): string {
             <span class="tab-sep" v-if="false">│</span>
             <span class="tab-label">/</span>
         </NuxtLink>
+        <NuxtLink :to="getToPath('projects')" class="tui-tab" :class="{ 'tui-tab-active': isActive('projects') }">
+            <span class="tab-sep">│</span>
+            <span class="tab-label">/{{ $t('header.links.projects') }}</span>
+        </NuxtLink>
         <NuxtLink :to="getToPath('blog')" class="tui-tab" :class="{ 'tui-tab-active': isActive('blog') }">
             <span class="tab-sep">│</span>
             <span class="tab-label">/{{ $t('header.links.blog') }}</span>

frontend/app/components/parts/StickyHeader.vue

@@ -5,11 +5,15 @@ import SiteOptions from './site_options/SiteOptions.vue';
 import { ref, onMounted, onUnmounted } from 'vue';
  
 const SCROLL_THRESHOLD = 120; // px scrolled before sticky header appears
+
+const props = defineProps({
+    alwaysVisible: { type: Boolean, default: false }
+});
  
-const isVisible = ref(false);
+const isVisible = ref(props.alwaysVisible);
  
 function onScroll() {
-    isVisible.value = window.scrollY > SCROLL_THRESHOLD;
+    isVisible.value = props.alwaysVisible || window.scrollY > SCROLL_THRESHOLD;
 }
  
 onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }));

frontend/app/components/widgets/HiboliaDeckPreview.vue

@@ -0,0 +1,386 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{ color?: string }>(),
+  { color: '#d8d2c6' }
+);
+
+const ATLAS_URL = 'https://cdn.aranroig.com/web/assets/cards.png';
+const CARD_COLS = 5;
+const CARD_ROWS = 11;
+const CARD_BACK_FACE = 9 * CARD_COLS + 2;
+const DECK_SIZE = 24;
+const CARD_WIDTH = 1.15;
+const CARD_DEPTH = 0.008;
+const FAN_RADIUS = 1.7;
+const FAN_SPREAD = 0.03;
+const FOV = 40;
+const FIT_HALF_H = 1.05;
+const FIT_HALF_W = 1.8;
+
+const root = ref<HTMLDivElement | null>(null);
+let disposeScene: (() => void) | null = null;
+let pendingColor: string | null = props.color;
+let cancelled = false;
+let cancelSchedule: (() => void) | null = null;
+let io: IntersectionObserver | null = null;
+
+watch(
+  () => props.color,
+  (c) => {
+    pendingColor = c;
+  }
+);
+
+const init = async () => {
+  const el = root.value;
+  if (!el || cancelled) return;
+
+  const {
+    Scene,
+    PerspectiveCamera,
+    WebGLRenderer,
+    TextureLoader,
+    SRGBColorSpace,
+    MeshBasicMaterial,
+    BoxGeometry,
+    Mesh,
+    Group,
+    Color,
+    Vector2,
+    Clock,
+    MathUtils
+  } = await import('three');
+  if (cancelled) return;
+
+  const scene = new Scene();
+
+  const camera = new PerspectiveCamera(FOV, 1, 0.1, 100);
+
+  const renderer = new WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  el.appendChild(renderer.domElement);
+
+  let texture;
+  try {
+    texture = await new TextureLoader().loadAsync(ATLAS_URL);
+  } catch (e) {
+    console.warn('HiboliaDeckPreview: failed to load card atlas (CORS?)', e);
+    el.removeChild(renderer.domElement);
+    return;
+  }
+  if (cancelled) {
+    texture.dispose();
+    renderer.dispose();
+    if (renderer.domElement.parentElement === el) el.removeChild(renderer.domElement);
+    return;
+  }
+  texture.colorSpace = SRGBColorSpace;
+  texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
+
+  const cellW = texture.image.width / CARD_COLS;
+  const cellH = texture.image.height / CARD_ROWS;
+  const cardHeight = CARD_WIDTH * (cellH / cellW);
+
+  const marginU = 0.5 / cellW;
+  const marginV = 0.5 / cellH;
+
+  const faceMaterial = new MeshBasicMaterial({ map: texture, transparent: true });
+  const backMaterial = new MeshBasicMaterial({ map: texture, transparent: true });
+  const sideMaterial = new MeshBasicMaterial({
+    color: new Color(pendingColor || '#d8d2c6'),
+    transparent: true
+  });
+  pendingColor = null;
+
+  // Round the card corners with an anti-aliased rounded-rect SDF in the shader.
+  // The half-size is widened by a sliver so the box's side faces sit strictly
+  // inside the SDF (they lie exactly on the boundary otherwise).
+  const CORNER_RADIUS = 0.09;
+  const CORNER_SDF_EPS = 0.01;
+  const BORDER_WIDTH = 0.014;
+  const uEdgeColor = { value: new Color().copy(sideMaterial.color) };
+  const applyRoundedCorners = (mat: any, withBorder: boolean) => {
+    mat.onBeforeCompile = (shader: any) => {
+      shader.uniforms.uHalfSize = {
+        value: new Vector2(
+          CARD_WIDTH / 2 + CORNER_SDF_EPS,
+          cardHeight / 2 + CORNER_SDF_EPS
+        )
+      };
+      shader.uniforms.uRadius = { value: CORNER_RADIUS };
+      shader.uniforms.uEdgeColor = uEdgeColor;
+      shader.uniforms.uBorderWidth = { value: BORDER_WIDTH };
+      shader.vertexShader = shader.vertexShader
+        .replace(
+          '#include <common>',
+          '#include <common>\nvarying vec2 vCardPos;'
+        )
+        .replace(
+          '#include <begin_vertex>',
+          '#include <begin_vertex>\nvCardPos = position.xy;'
+        );
+      shader.fragmentShader = shader.fragmentShader
+        .replace(
+          '#include <common>',
+          `#include <common>
+varying vec2 vCardPos;
+uniform vec2 uHalfSize;
+uniform float uRadius;
+uniform vec3 uEdgeColor;
+uniform float uBorderWidth;`
+        )
+        .replace(
+          '#include <color_fragment>',
+          `#include <color_fragment>
+vec2 q = abs(vCardPos) - uHalfSize + uRadius;
+float sd = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - uRadius;
+float fw = fwidth(sd);${
+            withBorder
+              ? `
+float border = smoothstep(-uBorderWidth - fw, -uBorderWidth + fw, sd);
+diffuseColor.rgb = mix(diffuseColor.rgb, uEdgeColor, border);`
+              : ''
+          }
+diffuseColor.a *= 1.0 - smoothstep(-fw, fw, sd);`
+        );
+      mat.userData.shader = shader;
+    };
+    mat.needsUpdate = true;
+  };
+  applyRoundedCorners(faceMaterial, true);
+  applyRoundedCorners(backMaterial, true);
+  applyRoundedCorners(sideMaterial, false);
+
+  // BoxGeometry face order: +X, -X, +Y, -Y, +Z(front), -Z(back); 4 verts each.
+  const applyFaceUV = (geometry: any, vertexStart: number, face: number) => {
+    const col = face % CARD_COLS;
+    const row = Math.floor(face / CARD_COLS);
+    const uv = geometry.attributes.uv;
+    for (let i = 0; i < 4; i++) {
+      const idx = vertexStart + i;
+      const u = (col + marginU + uv.getX(idx) * (1 - 2 * marginU)) / CARD_COLS;
+      const v = (CARD_ROWS - 1 - row + marginV + uv.getY(idx) * (1 - 2 * marginV)) / CARD_ROWS;
+      uv.setXY(idx, u, v);
+    }
+    uv.needsUpdate = true;
+  };
+
+  const rig = new Group();
+  const pitchGroup = new Group();
+  rig.add(pitchGroup);
+  scene.add(rig);
+
+  const fan = new Group();
+  fan.rotation.x = Math.PI / 2 - 0.32;
+  pitchGroup.add(fan);
+
+  const geometries: any[] = [];
+
+  for (let i = 0; i < DECK_SIZE; i++) {
+    const geometry = new BoxGeometry(CARD_WIDTH, cardHeight, CARD_DEPTH);
+    applyFaceUV(geometry, 16, Math.floor(Math.random() * CARD_COLS * CARD_ROWS));
+    applyFaceUV(geometry, 20, CARD_BACK_FACE);
+    geometries.push(geometry);
+
+    const mesh = new Mesh(geometry, [
+      sideMaterial,
+      sideMaterial,
+      sideMaterial,
+      sideMaterial,
+      faceMaterial,
+      backMaterial
+    ]);
+
+    const pivot = new Group();
+    pivot.rotation.z = (i - (DECK_SIZE - 1) / 2) * FAN_SPREAD;
+    mesh.position.y = -FAN_RADIUS;
+    mesh.position.z = (i - (DECK_SIZE - 1) / 2) * CARD_DEPTH;
+    pivot.add(mesh);
+    fan.add(pivot);
+  }
+  fan.position.set(
+    0,
+    FAN_RADIUS * Math.cos(fan.rotation.x),
+    FAN_RADIUS * Math.sin(fan.rotation.x)
+  );
+
+  const targetColor = new Color(sideMaterial.color);
+  const resize = () => {
+    const width = el.clientWidth;
+    const height = el.clientHeight;
+    if (!width || !height) return;
+    renderer.setSize(width, height);
+    camera.aspect = width / height;
+    const tanHalfFov = Math.tan(MathUtils.degToRad(FOV / 2));
+    const dist = Math.max(
+      FIT_HALF_H / tanHalfFov,
+      FIT_HALF_W / (tanHalfFov * camera.aspect)
+    );
+    const elevation = 1.22;
+    camera.position.set(
+      0,
+      Math.sin(elevation) * dist + 0.15,
+      Math.cos(elevation) * dist
+    );
+    camera.lookAt(0, 0.1, 0);
+    camera.updateProjectionMatrix();
+  };
+  resize();
+
+  const observer = new ResizeObserver(resize);
+  observer.observe(el);
+
+  let yaw = 0;
+  let pitch = 0;
+  let targetYaw = 0;
+  let targetPitch = 0;
+  let dragging = false;
+  let interacted = false;
+  let lastX = 0;
+  let lastY = 0;
+
+  const onPointerDown = (e: PointerEvent) => {
+    dragging = true;
+    interacted = true;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    el.setPointerCapture(e.pointerId);
+  };
+  const onPointerMove = (e: PointerEvent) => {
+    if (!dragging) return;
+    targetYaw -= (e.clientX - lastX) * 0.008;
+    targetPitch = MathUtils.clamp(
+      targetPitch + (e.clientY - lastY) * 0.006,
+      -1.35,
+      1.35
+    );
+    lastX = e.clientX;
+    lastY = e.clientY;
+  };
+  const onPointerUp = () => {
+    dragging = false;
+  };
+  el.addEventListener('pointerdown', onPointerDown);
+  el.addEventListener('pointermove', onPointerMove);
+  el.addEventListener('pointerup', onPointerUp);
+  el.addEventListener('pointercancel', onPointerUp);
+
+  const clock = new Clock();
+  let frameId = 0;
+  let running = false;
+  const animate = () => {
+    if (!running) return;
+    frameId = requestAnimationFrame(animate);
+    const dt = Math.min(clock.getDelta(), 0.05);
+    if (pendingColor) {
+      targetColor.set(pendingColor);
+      pendingColor = null;
+    }
+    sideMaterial.color.lerp(targetColor, 1 - Math.exp(-10 * dt));
+    uEdgeColor.value.copy(sideMaterial.color);
+    if (!interacted) {
+      targetYaw = Math.sin(clock.elapsedTime * 0.45) * 0.22;
+    }
+    const ease = 1 - Math.exp(-8 * dt);
+    yaw += (targetYaw - yaw) * ease;
+    pitch += (targetPitch - pitch) * ease;
+    rig.rotation.z = yaw;
+    pitchGroup.rotation.x = pitch;
+    renderer.render(scene, camera);
+  };
+
+  // Pause the loop while the tab is hidden to free the main thread and GPU.
+  const startLoop = () => {
+    if (running) return;
+    running = true;
+    clock.getDelta();
+    frameId = requestAnimationFrame(animate);
+  };
+  const stopLoop = () => {
+    if (!running) return;
+    running = false;
+    cancelAnimationFrame(frameId);
+  };
+  const removeVisibility = onVisibility((hidden) => (hidden ? stopLoop() : startLoop()));
+  startLoop();
+
+  disposeScene = () => {
+    stopLoop();
+    removeVisibility();
+    observer.disconnect();
+    el.removeEventListener('pointerdown', onPointerDown);
+    el.removeEventListener('pointermove', onPointerMove);
+    el.removeEventListener('pointerup', onPointerUp);
+    el.removeEventListener('pointercancel', onPointerUp);
+    for (const geometry of geometries) {
+      geometry.dispose();
+    }
+    faceMaterial.dispose();
+    backMaterial.dispose();
+    sideMaterial.dispose();
+    texture.dispose();
+    renderer.dispose();
+    if (renderer.domElement.parentElement === el) {
+      el.removeChild(renderer.domElement);
+    }
+  };
+};
+
+onMounted(() => {
+  const el = root.value;
+  if (!el) return;
+  // Defer the heavy scene until the preview is actually near the viewport.
+  io = new IntersectionObserver(
+    (entries) => {
+      if (!entries.some((e) => e.isIntersecting)) return;
+      io?.disconnect();
+      io = null;
+      cancelSchedule = scheduleIdle(() => {
+        init();
+      });
+    },
+    { rootMargin: '200px' }
+  );
+  io.observe(el);
+});
+
+onBeforeUnmount(() => {
+  cancelled = true;
+  io?.disconnect();
+  cancelSchedule?.();
+  disposeScene?.();
+});
+</script>
+
+<template>
+  <div ref="root" class="three-root" role="img" aria-label="Vista previa de la baraja">
+    <div class="three-bg" aria-hidden="true"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.three-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  cursor: grab;
+  touch-action: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  .three-bg {
+    position: absolute;
+    inset: 0;
+    background: var(--color-background);
+  }
+
+  :deep(canvas) {
+    position: relative;
+    z-index: 1;
+    display: block;
+  }
+}
+</style>

frontend/app/components/widgets/HiboliaScene.vue

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+const ATLAS_URL = 'https://cdn.aranroig.com/web/assets/cards.png';
+const CARD_COLS = 5;
+const CARD_ROWS = 11;
+const CARD_COUNT = 20;
+const CARD_LANES = 5;
+const CARD_SPEED = 1.1;
+const CARD_WIDTH = 1.15;
+const CARD_BACK_FACE = 9 * CARD_COLS + 2;
+
+const root = ref<HTMLDivElement | null>(null);
+let disposeScene: (() => void) | null = null;
+let cancelled = false;
+let cancelSchedule: (() => void) | null = null;
+
+const init = async () => {
+  const el = root.value;
+  if (!el || cancelled) return;
+
+  const {
+    Scene,
+    PerspectiveCamera,
+    WebGLRenderer,
+    TextureLoader,
+    SRGBColorSpace,
+    MeshBasicMaterial,
+    PlaneGeometry,
+    Mesh,
+    Vector2,
+    Vector3,
+    Color,
+    Clock,
+    MathUtils
+  } = await import('three');
+  if (cancelled) return;
+
+  const scene = new Scene();
+
+  const camera = new PerspectiveCamera(45, 1, 0.1, 100);
+  camera.position.z = 4;
+
+  const renderer = new WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setPixelRatio(1);
+  el.appendChild(renderer.domElement);
+
+  let texture;
+  try {
+    texture = await new TextureLoader().loadAsync(ATLAS_URL);
+  } catch (e) {
+    console.warn('HiboliaScene: failed to load card atlas (CORS?)', e);
+    el.removeChild(renderer.domElement);
+    return;
+  }
+  if (cancelled) {
+    texture.dispose();
+    renderer.dispose();
+    if (renderer.domElement.parentElement === el) el.removeChild(renderer.domElement);
+    return;
+  }
+  texture.colorSpace = SRGBColorSpace;
+  texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
+
+  const cellW = texture.image.width / CARD_COLS;
+  const cellH = texture.image.height / CARD_ROWS;
+  const cardHeight = CARD_WIDTH * (cellH / cellW);
+
+  const material = new MeshBasicMaterial({
+    map: texture,
+    transparent: true
+  });
+
+  const backMaterial = new MeshBasicMaterial({
+    map: texture,
+    transparent: true
+  });
+
+  // Round the card corners with an anti-aliased rounded-rect SDF in the shader.
+  const CORNER_RADIUS = 0.09;
+  const applyRoundedCorners = (mat: any) => {
+    mat.onBeforeCompile = (shader: any) => {
+      shader.uniforms.uHalfSize = { value: new Vector2(CARD_WIDTH / 2, cardHeight / 2) };
+      shader.uniforms.uRadius = { value: CORNER_RADIUS };
+      shader.vertexShader = shader.vertexShader
+        .replace(
+          '#include <common>',
+          '#include <common>\nvarying vec2 vCardPos;'
+        )
+        .replace(
+          '#include <begin_vertex>',
+          '#include <begin_vertex>\nvCardPos = position.xy;'
+        );
+      shader.fragmentShader = shader.fragmentShader
+        .replace(
+          '#include <common>',
+          `#include <common>
+varying vec2 vCardPos;
+uniform vec2 uHalfSize;
+uniform float uRadius;`
+        )
+        .replace(
+          '#include <color_fragment>',
+          `#include <color_fragment>
+vec2 q = abs(vCardPos) - uHalfSize + uRadius;
+float sd = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - uRadius;
+diffuseColor.a *= 1.0 - smoothstep(-fwidth(sd), fwidth(sd), sd);`
+        );
+      mat.userData.shader = shader;
+    };
+    mat.needsUpdate = true;
+  };
+  applyRoundedCorners(material);
+  applyRoundedCorners(backMaterial);
+
+  let viewHalfW = 2;
+  let viewHalfH = 1.66;
+  const updateView = () => {
+    viewHalfH = camera.position.z * Math.tan(MathUtils.degToRad(camera.fov / 2));
+    viewHalfW = viewHalfH * camera.aspect;
+  };
+
+  // Inset UVs half a pixel inside each atlas cell to stop neighbors bleeding in.
+  const marginU = 0.5 / cellW;
+  const marginV = 0.5 / cellH;
+
+  // Shift the plane's UVs into one cell of the atlas: col across 5 columns,
+  // row from the top of the image (v origin is bottom-left in three.js).
+  const applyCardFace = (geometry: any, face: number) => {
+    const col = face % CARD_COLS;
+    const row = Math.floor(face / CARD_COLS);
+    const uv = geometry.attributes.uv;
+    if (!geometry.userData.baseUv) {
+      geometry.userData.baseUv = Float32Array.from(uv.array);
+    }
+    const base = geometry.userData.baseUv;
+    for (let i = 0; i < uv.count; i++) {
+      const u = (col + marginU + base[i * 2] * (1 - 2 * marginU)) / CARD_COLS;
+      const v = (CARD_ROWS - 1 - row + marginV + base[i * 2 + 1] * (1 - 2 * marginV)) / CARD_ROWS;
+      uv.setXY(i, u, v);
+    }
+    uv.needsUpdate = true;
+  };
+
+  const cards: any[] = [];
+
+  const respawn = (card: any, initial: boolean) => {
+    const topY = viewHalfH + cardHeight;
+    const bottomY = -viewHalfH - cardHeight;
+    card.mesh.position.set(
+      -viewHalfW + (viewHalfW * 2 / CARD_LANES) * (card.slot % CARD_LANES + 0.5) + MathUtils.randFloatSpread(0.3),
+      initial
+        ? bottomY + (topY - bottomY) * (1 - (card.slot + 0.5) / CARD_COUNT)
+        : topY,
+      MathUtils.randFloat(-1.5, 0.5)
+    );
+    card.mesh.rotation.set(
+      MathUtils.randFloat(-0.3, 0.3),
+      MathUtils.randFloat(-0.4, 0.4),
+      MathUtils.randFloat(-0.3, 0.3)
+    );
+    card.spin.set(
+      MathUtils.randFloatSpread(1.6),
+      MathUtils.randFloatSpread(1.6),
+      MathUtils.randFloatSpread(0.9)
+    );
+    applyCardFace(card.geometry, Math.floor(Math.random() * CARD_COLS * CARD_ROWS));
+  };
+
+  for (let i = 0; i < CARD_COUNT; i++) {
+    const geometry = new PlaneGeometry(CARD_WIDTH, cardHeight);
+    const mesh = new Mesh(geometry, material);
+    const backGeometry = new PlaneGeometry(CARD_WIDTH, cardHeight);
+    applyCardFace(backGeometry, CARD_BACK_FACE);
+    const backMesh = new Mesh(backGeometry, backMaterial);
+    backMesh.rotation.y = Math.PI;
+    backMesh.position.z = -0.001;
+    mesh.add(backMesh);
+    scene.add(mesh);
+    const card = { mesh, geometry, backGeometry, slot: i, spin: new Vector3() };
+    respawn(card, true);
+    cards.push(card);
+  }
+
+  const resize = () => {
+    const width = el.clientWidth;
+    const height = el.clientHeight;
+    if (!width || !height) return;
+    renderer.setSize(width, height);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+    updateView();
+  };
+  resize();
+
+  const observer = new ResizeObserver(resize);
+  observer.observe(el);
+
+  // Solid canvas background tracking the active theme's --color-background.
+  const applyBackground = () => {
+    const bg = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-background')
+      .trim();
+    renderer.setClearColor(new Color(bg || '#0e0e0e'), 1);
+  };
+  applyBackground();
+
+  const themeObserver = new MutationObserver(applyBackground);
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme']
+  });
+
+  const clock = new Clock();
+  let frameId = 0;
+  let running = false;
+  const animate = () => {
+    if (!running) return;
+    frameId = requestAnimationFrame(animate);
+    const dt = Math.min(clock.getDelta(), 0.05);
+    for (const card of cards) {
+      card.mesh.position.y -= CARD_SPEED * dt;
+      card.mesh.rotation.x += card.spin.x * dt;
+      card.mesh.rotation.y += card.spin.y * dt;
+      card.mesh.rotation.z += card.spin.z * dt;
+      if (card.mesh.position.y < -viewHalfH - cardHeight) {
+        respawn(card, false);
+      }
+    }
+    renderer.render(scene, camera);
+  };
+
+  // Pause the loop while the tab is hidden to free the main thread and GPU.
+  const startLoop = () => {
+    if (running) return;
+    running = true;
+    clock.getDelta();
+    frameId = requestAnimationFrame(animate);
+  };
+  const stopLoop = () => {
+    if (!running) return;
+    running = false;
+    cancelAnimationFrame(frameId);
+  };
+  const removeVisibility = onVisibility((hidden) => (hidden ? stopLoop() : startLoop()));
+  startLoop();
+
+  disposeScene = () => {
+    stopLoop();
+    removeVisibility();
+    observer.disconnect();
+    themeObserver.disconnect();
+    for (const card of cards) {
+      card.geometry.dispose();
+      card.backGeometry.dispose();
+    }
+    material.dispose();
+    backMaterial.dispose();
+    texture.dispose();
+    renderer.dispose();
+    if (renderer.domElement.parentElement === el) {
+      el.removeChild(renderer.domElement);
+    }
+  };
+};
+
+onMounted(() => {
+  cancelSchedule = scheduleIdle(() => {
+    init();
+  });
+});
+
+onBeforeUnmount(() => {
+  cancelled = true;
+  cancelSchedule?.();
+  disposeScene?.();
+});
+</script>
+
+<template>
+  <div ref="root" class="three-root">
+    <div class="three-bg" aria-hidden="true"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.three-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .three-bg {
+    position: absolute;
+    inset: 0;
+    background: var(--color-background);
+  }
+
+  :deep(canvas) {
+    position: relative;
+    z-index: 1;
+    display: block;
+  }
+}
+</style>

frontend/app/composables/three-scene.ts

@@ -0,0 +1,22 @@
+// Helpers to keep heavy WebGL scene setup off the page's critical path.
+
+// Runs fn once the main thread is idle (falling back to a short timeout),
+// returning a cancel handle so an early unmount never leaks a scheduled init.
+export const scheduleIdle = (fn: () => void, timeout = 1500): (() => void) => {
+  const ric = (window as any).requestIdleCallback as
+    | ((cb: () => void, opts?: { timeout: number }) => number)
+    | undefined
+  if (typeof ric === 'function') {
+    const id = ric(fn, { timeout })
+    return () => (window as any).cancelIdleCallback?.(id)
+  }
+  const id = setTimeout(fn, 200)
+  return () => clearTimeout(id)
+}
+
+// Calls cb whenever tab visibility changes, returning an unsubscribe function.
+export const onVisibility = (cb: (hidden: boolean) => void): (() => void) => {
+  const handler = () => cb(document.hidden)
+  document.addEventListener('visibilitychange', handler)
+  return () => document.removeEventListener('visibilitychange', handler)
+}

frontend/app/composables/useApi.ts

@@ -1,6 +1,16 @@
 // composables/useApi.js
 import { ref } from 'vue'
 
+export const ADMIN_TOKEN_COOKIE = 'admin_token'
+
+export class ApiError extends Error {
+  status: number
+  constructor(message: string, status: number) {
+    super(message)
+    this.status = status
+  }
+}
+
 function normalizeUrl(url: string): string {
   return url.replace(/\/+$/, '')
 }
@@ -12,7 +22,7 @@ export default function useApi() {
   // Generic GET request
   const get = async (endpoint) => {
     const res = await fetch(`${baseUrl}${endpoint}`)
-    if (!res.ok) throw new Error(`API GET ${endpoint} failed`)
+    if (!res.ok) throw new ApiError(`API GET ${endpoint} failed`, res.status)
     return res.json()
   }
 
@@ -23,9 +33,31 @@ export default function useApi() {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(payload)
     })
-    if (!res.ok) throw new Error(`API POST ${endpoint} failed`)
+    if (!res.ok) throw new ApiError(`API POST ${endpoint} failed`, res.status)
     return res.json()
   }
 
-  return { get, post }
+  // Authenticated requests (JWT stored in cookie by useAuth)
+  const authHeaders = (): Record<string, string> => {
+    const token = useCookie<string | null>(ADMIN_TOKEN_COOKIE).value
+    return token ? { Authorization: `Bearer ${token}` } : {}
+  }
+
+  const getAuth = async (endpoint) => {
+    const res = await fetch(`${baseUrl}${endpoint}`, { headers: authHeaders() })
+    if (!res.ok) throw new ApiError(`API GET ${endpoint} failed`, res.status)
+    return res.json()
+  }
+
+  const postAuth = async (endpoint, payload) => {
+    const res = await fetch(`${baseUrl}${endpoint}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', ...authHeaders() },
+      body: JSON.stringify(payload)
+    })
+    if (!res.ok) throw new ApiError(`API POST ${endpoint} failed`, res.status)
+    return res.json()
+  }
+
+  return { get, post, getAuth, postAuth }
 }

frontend/app/composables/useAuth.ts

@@ -0,0 +1,62 @@
+import { ADMIN_TOKEN_COOKIE, ApiError } from './useApi'
+
+export interface AdminUser {
+  username: string
+}
+
+const TOKEN_TTL_SECONDS = 60 * 60 * 12
+
+export default function useAuth() {
+  const config = useRuntimeConfig()
+  const baseUrl = `${config.public.apiBaseUrl.replace(/\/+$/, '')}/api`
+
+  const token = useCookie<string | null>(ADMIN_TOKEN_COOKIE, {
+    maxAge: TOKEN_TTL_SECONDS,
+    sameSite: 'lax',
+    path: '/',
+    default: () => null
+  })
+  const user = useState<AdminUser | null>('admin-user', () => null)
+
+  const isAuthenticated = computed(() => !!token.value)
+
+  const login = async (username: string, password: string) => {
+    const res = await fetch(`${baseUrl}/auth/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password })
+    })
+    const data = await res.json().catch(() => ({}))
+    if (!res.ok) throw new ApiError(data.error || 'Login failed', res.status)
+    token.value = data.token
+    user.value = { username: data.username }
+    return data
+  }
+
+  const logout = () => {
+    token.value = null
+    user.value = null
+  }
+
+  // Validates the stored token against the backend; logs out on failure.
+  const fetchMe = async () => {
+    if (!token.value) return null
+    try {
+      const res = await fetch(`${baseUrl}/auth/me`, {
+        headers: { Authorization: `Bearer ${token.value}` }
+      })
+      if (res.status === 401) {
+        logout()
+        return null
+      }
+      if (!res.ok) throw new Error('auth check failed')
+      const data = await res.json()
+      user.value = { username: data.username }
+      return data
+    } catch (e) {
+      return null
+    }
+  }
+
+  return { token, user, isAuthenticated, login, logout, fetchMe }
+}

frontend/app/middleware/admin-auth.ts

@@ -0,0 +1,14 @@
+// Protects /admin pages: requires a stored admin token.
+export default defineNuxtRouteMiddleware((to) => {
+  const token = useCookie<string | null>('admin_token')
+
+  const isLoginPage = to.path.endsWith('/admin/login')
+
+  if (!token.value && !isLoginPage) {
+    return navigateTo('/admin/login')
+  }
+
+  if (token.value && isLoginPage) {
+    return navigateTo('/admin')
+  }
+})

frontend/app/pages/admin/index.vue

@@ -0,0 +1,350 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'admin-auth' });
+
+useHead({
+  title: 'Admin Dashboard',
+  meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
+});
+
+const { getAuth } = useApi();
+const auth = useAuth();
+
+const stats = ref<any>(null);
+const orders = ref<any[]>([]);
+const loading = ref(true);
+const errorMsg = ref('');
+
+const COLOR_HEX: Record<string, string> = {
+  red: '#d64545',
+  gold: '#d4af37',
+  silver: '#c0c0c0',
+  orange: '#e0823c',
+  yellow: '#e2cf3c',
+  green: '#5fae4e',
+  blue: '#4c8be0',
+  purple: '#9b59d0'
+};
+
+const formatUptime = (seconds: number) => {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  return `${h}h ${m}m ${s}s`;
+};
+
+const formatMB = (bytes: number) => `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+
+const redirectToLogin = () => {
+  auth.logout();
+  navigateTo('/admin/login');
+};
+
+const loadStats = async () => {
+  errorMsg.value = '';
+  try {
+    const res = await getAuth('/admin/stats');
+    stats.value = res;
+  } catch (e: any) {
+    if (e?.status === 401) {
+      redirectToLogin();
+      return;
+    }
+    errorMsg.value = $t('admin.dashboard.load_error');
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadOrders = async () => {
+  try {
+    orders.value = await getAuth('/hibolia/orders');
+  } catch (e: any) {
+    if (e?.status === 401) {
+      redirectToLogin();
+    }
+  }
+};
+
+const formatDate = (value: string) => new Date(value).toLocaleString();
+
+onMounted(async () => {
+  const me = await auth.fetchMe();
+  if (!me) {
+    redirectToLogin();
+    return;
+  }
+  await Promise.all([loadStats(), loadOrders()]);
+  intervalId = setInterval(() => {
+    loadStats();
+    loadOrders();
+  }, 30000);
+});
+
+let intervalId: ReturnType<typeof setInterval> | null = null;
+onBeforeUnmount(() => {
+  if (intervalId) clearInterval(intervalId);
+});
+
+const onLogout = () => redirectToLogin();
+</script>
+
+<template>
+  <div class="dash-screen">
+    <Container class="dash-frame">
+      <div class="dash-top">
+        <h1 class="dash-title">&gt; {{ $t('admin.dashboard.title') }}</h1>
+        <button class="logout-btn" @click="onLogout">&gt;_ {{ $t('admin.dashboard.logout') }}</button>
+      </div>
+
+      <p v-if="auth.user.value" class="dash-welcome">
+        {{ $t('admin.dashboard.welcome') }} <span class="hl">{{ auth.user.value.username }}</span>
+      </p>
+
+      <p v-if="errorMsg" class="dash-error">✗ {{ errorMsg }}</p>
+      <p v-if="loading" class="dash-loading blink">{{ $t('admin.dashboard.loading') }}</p>
+
+      <template v-if="stats && !loading">
+        <h2 class="dash-section">{{ $t('admin.dashboard.section_status') }}</h2>
+        <div class="stat-grid">
+          <div class="stat-card">
+            <span class="stat-label">{{ $t('admin.dashboard.status') }}</span>
+            <span class="stat-value ok">{{ stats.status }}</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-label">{{ $t('admin.dashboard.mongo') }}</span>
+            <span class="stat-value" :class="stats.mongo === 'connected' ? 'ok' : 'bad'">{{ stats.mongo }}</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-label">{{ $t('admin.dashboard.uptime') }}</span>
+            <span class="stat-value">{{ formatUptime(stats.uptime) }}</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-label">{{ $t('admin.dashboard.memory_rss') }}</span>
+            <span class="stat-value">{{ formatMB(stats.memory.rss) }}</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-label">{{ $t('admin.dashboard.memory_heap') }}</span>
+            <span class="stat-value">{{ formatMB(stats.memory.heapUsed) }}</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-label">{{ $t('admin.dashboard.total_cells') }}</span>
+            <span class="stat-value">{{ stats.grid.totalCells }}</span>
+          </div>
+        </div>
+
+        <h2 class="dash-section">{{ $t('admin.dashboard.section_orders') }} <span class="hl">[{{ orders.length }}]</span></h2>
+        <p v-if="!orders.length" class="dash-loading">{{ $t('admin.dashboard.orders_empty') }}</p>
+        <table v-else class="orders-table">
+          <thead>
+            <tr>
+              <th>{{ $t('admin.dashboard.col_date') }}</th>
+              <th>{{ $t('admin.dashboard.col_name') }}</th>
+              <th>{{ $t('admin.dashboard.col_email') }}</th>
+              <th>{{ $t('admin.dashboard.col_message') }}</th>
+              <th>{{ $t('admin.dashboard.col_color') }}</th>
+              <th>{{ $t('admin.dashboard.col_shipping') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="order in orders" :key="order._id">
+              <td class="nowrap">{{ formatDate(order.createdAt) }}</td>
+              <td>{{ order.name }} {{ order.surname }}</td>
+              <td>{{ order.email }}</td>
+              <td class="msg-cell">{{ order.message }}</td>
+              <td>
+                <span class="color-chip">
+                  <span class="swatch" :style="{ background: COLOR_HEX[order.color] || 'transparent' }" aria-hidden="true"></span>
+                  {{ $t(`order.hibolia.colors.${order.color}`) }}
+                </span>
+              </td>
+              <td class="msg-cell">{{ order.shipping }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </template>
+    </Container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.dash-screen {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  background: var(--color-background);
+  overflow-y: auto;
+}
+
+.dash-frame {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  :deep(.tui-inner) {
+    flex: 1;
+    width: 100%;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+}
+
+.dash-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.dash-title {
+  font-family: 'Hurmit', monospace;
+  margin-bottom: 8px;
+}
+
+.logout-btn {
+  font-family: 'Hurmit', monospace;
+  font-size: 0.85rem;
+  color: var(--color-text);
+  background: transparent;
+  border: 1px solid var(--color-border-color);
+  padding: 6px 14px;
+  cursor: pointer;
+  transition: all 120ms steps(3);
+
+  &:hover {
+    color: var(--color-link);
+    border-color: var(--color-link);
+  }
+}
+
+.dash-welcome {
+  font-size: 0.92rem;
+  color: var(--color-text);
+  opacity: 0.75;
+
+  .hl {
+    color: var(--color-link);
+    opacity: 1;
+  }
+}
+
+.dash-loading {
+  font-family: 'Hurmit', monospace;
+  color: var(--color-link);
+  margin-top: 16px;
+}
+
+.dash-error {
+  font-family: 'Hurmit', monospace;
+  font-size: 0.85rem;
+  color: #e05c5c;
+  margin-top: 16px;
+}
+
+.dash-section {
+  font-family: 'Hurmit', monospace;
+  font-size: 1rem;
+  color: var(--color-link);
+  margin: 28px 0 12px;
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+
+  .hl {
+    color: var(--color-text);
+    opacity: 0.6;
+  }
+}
+
+.orders-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+
+  th,
+  td {
+    border: 1px solid var(--color-border-color);
+    padding: 6px 10px;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    font-family: 'Hurmit', monospace;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--color-link);
+    background: var(--color-background-line);
+  }
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.msg-cell {
+  white-space: pre-wrap;
+  word-break: break-word;
+  min-width: 200px;
+}
+
+.color-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.swatch {
+  width: 12px;
+  height: 12px;
+  border: 1px solid var(--color-border-color);
+  flex-shrink: 0;
+}
+
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 10px;
+}
+
+.stat-card {
+  background: var(--color-background);
+  border: 1px solid var(--color-border-color);
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stat-label {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  opacity: 0.6;
+}
+
+.stat-value {
+  font-family: 'Hurmit', monospace;
+  font-size: 1.05rem;
+
+  &.ok {
+    color: #62ac4c;
+  }
+
+  &.bad {
+    color: #e05c5c;
+  }
+}
+
+.blink {
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  0%, 50%, 100% { opacity: 1; }
+  25%, 75% { opacity: 0; }
+}
+</style>

frontend/app/pages/admin/login.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import TableHeader from '~/components/parts/TableHeader.vue';
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
+
+definePageMeta({ middleware: 'admin-auth' });
+
+useHead({
+  title: 'Admin — Login',
+  meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
+});
+
+const auth = useAuth();
+
+const username = ref('');
+const password = ref('');
+const error = ref('');
+const loading = ref(false);
+
+const onSubmit = async () => {
+  if (loading.value) return;
+  error.value = '';
+  loading.value = true;
+  try {
+    await auth.login(username.value, password.value);
+    await navigateTo('/admin');
+  } catch (e: any) {
+    error.value = e?.status === 401
+      ? $t('admin.login.error_invalid')
+      : $t('admin.login.error_generic');
+    password.value = '';
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="no-sprite">
+    <TableHeader />
+  </div>
+
+  <FixedLayout>
+    <Container>
+      <h1 class="admin-title">&gt; {{ $t('admin.login.title') }}</h1>
+      <p class="admin-prompt">{{ $t('admin.login.prompt') }}</p>
+
+      <form class="login-form" @submit.prevent="onSubmit">
+        <div class="field">
+          <label for="admin-user">{{ $t('admin.login.username_label') }}:</label>
+          <input
+            id="admin-user"
+            v-model="username"
+            type="text"
+            name="username"
+            autocomplete="username"
+            spellcheck="false"
+            :disabled="loading"
+            required
+          />
+        </div>
+        <div class="field">
+          <label for="admin-pass">{{ $t('admin.login.password_label') }}:</label>
+          <input
+            id="admin-pass"
+            v-model="password"
+            type="password"
+            name="password"
+            autocomplete="current-password"
+            :disabled="loading"
+            required
+          />
+        </div>
+
+        <p v-if="error" class="login-error" role="alert">✗ {{ error }}</p>
+
+        <button type="submit" class="login-btn" :disabled="loading">
+          <span v-if="!loading">&gt; {{ $t('admin.login.submit') }}</span>
+          <span v-else class="blink">{{ $t('admin.login.submitting') }}</span>
+        </button>
+      </form>
+    </Container>
+  </FixedLayout>
+  <Footer />
+</template>
+
+<style lang="scss" scoped>
+.admin-title {
+  font-family: 'Hurmit', monospace;
+  margin-bottom: 8px;
+}
+
+.admin-prompt {
+  font-size: 0.92rem;
+  color: var(--color-text);
+  opacity: 0.75;
+  margin-bottom: 24px;
+}
+
+.login-form {
+  max-width: 420px;
+}
+
+.field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+
+  label {
+    font-family: 'Hurmit', monospace;
+    font-size: 0.9rem;
+    color: var(--color-link);
+    min-width: 80px;
+    text-align: right;
+  }
+
+  input {
+    flex: 1;
+    font-family: 'Hurmit', monospace;
+    font-size: 0.95rem;
+    color: var(--color-text);
+    background: var(--color-background);
+    border: 1px solid var(--color-border-color);
+    padding: 8px 10px;
+    outline: none;
+    min-width: 0;
+
+    &:focus {
+      border-color: var(--color-link);
+      box-shadow: 2px -2px 0 0 var(--color-frame-glow);
+    }
+  }
+}
+
+.login-error {
+  font-family: 'Hurmit', monospace;
+  font-size: 0.85rem;
+  color: #e05c5c;
+  margin: 4px 0 12px 90px;
+}
+
+.login-btn {
+  margin-left: 90px;
+  font-family: 'Hurmit', monospace;
+  font-size: 0.9rem;
+  color: var(--color-background);
+  background: var(--color-link);
+  border: none;
+  padding: 8px 18px;
+  cursor: pointer;
+  transition: all 120ms steps(3);
+
+  &:hover:not(:disabled) {
+    background: var(--color-text);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: wait;
+  }
+}
+
+.blink {
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  0%, 50%, 100% { opacity: 1; }
+  25%, 75% { opacity: 0; }
+}
+
+@media screen and (max-width: 600px) {
+  .field {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+
+    label {
+      text-align: left;
+      min-width: 0;
+    }
+  }
+
+  .login-error,
+  .login-btn {
+    margin-left: 0;
+  }
+}
+</style>
+
+<style lang="scss">
+.no-sprite .undertable-wrapper {
+  display: none;
+}
+</style>

frontend/app/pages/index.vue

@@ -165,118 +165,118 @@ const sectionTargets = {
 </script>
 
 <template>
-  <TableHeader></TableHeader>
-  
-   <h1 style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;">Aran Roig — Developer, Artist & Designer</h1>
-   <div id="top" style="scroll-margin-top: 60px;">&nbsp;</div>
+    <TableHeader></TableHeader>
+    
+    <h1 style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;">Aran Roig — Developer, Artist & Designer</h1>
+    <div id="top" style="scroll-margin-top: 60px;">&nbsp;</div>
 
-  <FixedLayout>
-    <section class="intro-section">
-      <div class="intro-layout">
-        <div class="intro-content">
-          <Container>
-            <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
-          </Container>
+    <FixedLayout>
+      <section class="intro-section">
+        <div class="intro-layout">
+          <div class="intro-content">
+            <Container>
+              <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
+            </Container>
+          </div>
+          <div class="intro-sidebar">
+            <ServerStatus />
+          </div>
         </div>
-        <div class="intro-sidebar">
-          <ServerStatus />
-        </div>
-      </div>
-    </section>
+      </section>
 
-    <section class="normal-section" id="place">
-      <Container>
-        <h2 class="section-title">{{ t('pages.place_heading') }}</h2>
-        <Place></Place>
-      </Container>
-    </section>
+      <section class="normal-section" id="place">
+        <Container>
+          <h2 class="section-title">{{ t('pages.place_heading') }}</h2>
+          <Place></Place>
+        </Container>
+      </section>
 
-    <section class="normal-section projects-section" id="scroll-projects" v-if="projects && projects.length > 0">
-      <Container>
-        <h2 class="section-title">{{ t('pages.projects_heading') }}</h2>
-        
-        <div class="projects-grid">
-          <div 
-             v-for="project in projects" 
-
-            :key="project.slug"
-            class="project-card-wrapper"
-          >
+      <section class="normal-section projects-section" id="scroll-projects" v-if="projects && projects.length > 0">
+        <Container>
+          <h2 class="section-title">{{ t('pages.projects_heading') }}</h2>
+          
+          <div class="projects-grid">
             <div 
-              class="project-card" 
-              @click="navigateToProject(project)" 
+              v-for="project in projects" 
+
+              :key="project.slug"
+              class="project-card-wrapper"
             >
-              <div class="project-layout">
-                <img 
-                  v-if="project.preview" 
-                  :src="project.preview" 
-                  :alt="`Preview of ${project.title}`" 
-                  class="project-preview"
-                />
-                <div class="project-info">
-                  <p class="project-title">{{ project.title }}</p>
-                  <p class="project-description">{{ project.description }}</p>
-                  <div class="project-tech">
-                    <span v-for="tech in project.tech" :key="tech" class="tech-tag">{{ tech }}</span>
+              <div 
+                class="project-card" 
+                @click="navigateToProject(project)" 
+              >
+                <div class="project-layout">
+                  <img 
+                    v-if="project.preview" 
+                    :src="project.preview" 
+                    :alt="`Preview of ${project.title}`" 
+                    class="project-preview"
+                  />
+                  <div class="project-info">
+                    <p class="project-title">{{ project.title }}</p>
+                    <p class="project-description">{{ project.description }}</p>
+                    <div class="project-tech">
+                      <span v-for="tech in project.tech" :key="tech" class="tech-tag">{{ tech }}</span>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
 
-      </Container>
-    </section>
+        </Container>
+      </section>
 
-    <section class="normal-section" id="scroll-blog">
-      <Container>
-        <h2 class="section-title">{{ t('pages.blog_heading') }}</h2>
-        <ul class="tui-list">
-          <li v-for="post in displayedBlogPosts" :key="post.slug" class="blog-entry">
-            <NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })" class="entry-link">
-              <span class="entry-title">{{ post.title }}</span>
+      <section class="normal-section" id="scroll-blog">
+        <Container>
+          <h2 class="section-title">{{ t('pages.blog_heading') }}</h2>
+          <ul class="tui-list">
+            <li v-for="post in displayedBlogPosts" :key="post.slug" class="blog-entry">
+              <NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })" class="entry-link">
+                <span class="entry-title">{{ post.title }}</span>
+              </NuxtLink>
+              <span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
+            </li>
+          </ul>
+          <p v-if="posts && posts.length > 0" class="show-more-link">
+            <NuxtLink :to="localePath('/blog')" class="tui-link">{{ t('pages.show_more') }}</NuxtLink>
+          </p>
+        </Container>
+      </section>
+
+      <section class="normal-section" id="scroll-art">
+        <Container>
+          <h2 class="section-title">{{ t('pages.art_heading') }}</h2>
+          <div class="grid">
+            <NuxtLink v-for="art in displayedArtPosts" :key="art.slug"
+              class="selector"
+              :to="localePath(`/art/${art.slug}`)">
+                <span class="selector-border-top" aria-hidden="true">────────</span>
+                <img
+                  :src="art.thumb"
+                  :alt="art.title"
+                  class="selector-img"
+                />
+                <span class="selector-border-bottom" aria-hidden="true">────────</span>
+                <div class="overlay-label">{{ art.title }}</div>
             </NuxtLink>
-            <span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
-          </li>
-        </ul>
-        <p v-if="posts && posts.length > 0" class="show-more-link">
-          <NuxtLink :to="localePath('/blog')" class="tui-link">{{ t('pages.show_more') }}</NuxtLink>
-        </p>
-      </Container>
-    </section>
+          </div>
+          <p v-if="artPosts && artPosts.length > 0" class="show-more-link">
+            <NuxtLink :to="localePath('/art')" class="tui-link">{{ t('pages.show_more') }}</NuxtLink>
+          </p>
+        </Container>
+      </section>
 
-    <section class="normal-section" id="scroll-art">
-      <Container>
-        <h2 class="section-title">{{ t('pages.art_heading') }}</h2>
-        <div class="grid">
-          <NuxtLink v-for="art in displayedArtPosts" :key="art.slug"
-            class="selector"
-            :to="localePath(`/art/${art.slug}`)">
-              <span class="selector-border-top" aria-hidden="true">────────</span>
-              <img
-                :src="art.thumb"
-                :alt="art.title"
-                class="selector-img"
-              />
-              <span class="selector-border-bottom" aria-hidden="true">────────</span>
-              <div class="overlay-label">{{ art.title }}</div>
-          </NuxtLink>
-        </div>
-        <p v-if="artPosts && artPosts.length > 0" class="show-more-link">
-          <NuxtLink :to="localePath('/art')" class="tui-link">{{ t('pages.show_more') }}</NuxtLink>
-        </p>
-      </Container>
-    </section>
-
-    <section class="normal-section" id="scroll-contact">
-      <Container>
-        <h2 class="section-title">{{ t('pages.contact_heading') }}</h2>
-        <ContentRenderer v-if="contactMarkdown" :value="contactMarkdown"></ContentRenderer>
-        <ContactLinks /> 
-      </Container>
-    </section>
-  </FixedLayout>
-  <Footer></Footer>
+      <section class="normal-section" id="scroll-contact">
+        <Container>
+          <h2 class="section-title">{{ t('pages.contact_heading') }}</h2>
+          <ContentRenderer v-if="contactMarkdown" :value="contactMarkdown"></ContentRenderer>
+          <ContactLinks /> 
+        </Container>
+      </section>
+    </FixedLayout>
+    <Footer></Footer>
 </template>
 
 <style lang="scss" scoped>

frontend/app/pages/projects/hibolia/order.vue

@@ -0,0 +1,506 @@
+<script setup lang="ts">
+import FullscreenLayout from '~/components/layouts/FullscreenLayout.vue';
+import StickyHeader from '~/components/parts/StickyHeader.vue';
+import HiboliaScene from '~/components/widgets/HiboliaScene.vue';
+import HiboliaDeckPreview from '~/components/widgets/HiboliaDeckPreview.vue';
+
+useHead({
+  title: 'Deck Request | Aran Roig',
+  meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
+});
+
+const { post } = useApi();
+
+const COLOR_OPTIONS = [
+  { value: 'red', hex: '#d64545' },
+  { value: 'gold', hex: '#d4af37' },
+  { value: 'silver', hex: '#c0c0c0' },
+  { value: 'orange', hex: '#e0823c' },
+  { value: 'yellow', hex: '#e2cf3c' },
+  { value: 'green', hex: '#5fae4e' },
+  { value: 'blue', hex: '#4c8be0' },
+  { value: 'purple', hex: '#9b59d0' },
+  { value: 'black', hex: '#1a1a1a' },
+  { value: 'white', hex: '#f2f2f2' },
+  { value: 'pink', hex: '#e88fb3' },
+  { value: 'none', hex: '#9e9e9e' }
+];
+
+const form = reactive({
+  name: '',
+  surname: '',
+  email: '',
+  message: '',
+  color: '',
+  shipping: ''
+});
+
+const DEFAULT_EDGE_COLOR = '#d8d2c6';
+
+const selectedColorHex = computed(
+  () => COLOR_OPTIONS.find((o) => o.value === form.color)?.hex ?? DEFAULT_EDGE_COLOR
+);
+
+const submitting = ref(false);
+const errorMsg = ref('');
+
+const localePath = useLocalePath();
+
+const onSubmit = async () => {
+  if (submitting.value) return;
+  errorMsg.value = '';
+
+  if (
+    !form.name.trim() ||
+    !form.surname.trim() ||
+    !form.email.trim() ||
+    !form.message.trim() ||
+    !form.color ||
+    !form.shipping.trim()
+  ) {
+    errorMsg.value = $t('order.hibolia.error_required');
+    return;
+  }
+
+  submitting.value = true;
+  try {
+    await post('/hibolia/orders', {
+      name: form.name.trim(),
+      surname: form.surname.trim(),
+      email: form.email.trim(),
+      message: form.message.trim(),
+      color: form.color,
+      shipping: form.shipping.trim()
+    });
+    form.name = '';
+    form.surname = '';
+    form.email = '';
+    form.message = '';
+    form.color = '';
+    form.shipping = '';
+    await navigateTo(localePath('/projects/hibolia/thanks'));
+  } catch (e: any) {
+    errorMsg.value = e?.status === 400
+      ? $t('order.hibolia.error_invalid')
+      : $t('order.hibolia.error_generic');
+  } finally {
+    submitting.value = false;
+  }
+};
+</script>
+
+<template>
+  <FullscreenLayout>
+    <HiboliaScene class="order-scene" aria-hidden="true" />
+
+    <Container class="full-bg">
+      <div class="order-layout">
+        <form class="order-form" @submit.prevent="onSubmit">
+          <h1 class="order-title">{{ $t('order.hibolia.form_title') }}</h1>
+
+          <p>{{ $t('order.hibolia.intro') }}</p>
+      <p>{{ $t('order.hibolia.includes') }}</p>
+      <ul>
+        <li>{{ $t('order.hibolia.includes_box') }}</li>
+        <li>
+          {{ $t('order.hibolia.includes_cards') }}
+          <ul>
+            <li>{{ $t('order.hibolia.includes_suits') }}</li>
+            <li>{{ $t('order.hibolia.includes_jokers') }}</li>
+            <li>{{ $t('order.hibolia.includes_extra') }}</li>
+          </ul>
+        </li>
+      </ul>
+
+      <p>{{ $t('order.hibolia.basics_intro') }}</p>
+
+          <div class="field">
+          <label for="order-name">{{ $t('order.hibolia.name_label') }}:</label>
+          <input
+            id="order-name"
+            v-model="form.name"
+            type="text"
+            name="name"
+            autocomplete="given-name"
+            :disabled="submitting"
+            required
+          />
+        </div>
+
+        <div class="field">
+          <label for="order-surname">{{ $t('order.hibolia.surname_label') }}:</label>
+          <input
+            id="order-surname"
+            v-model="form.surname"
+            type="text"
+            name="surname"
+            autocomplete="family-name"
+            :disabled="submitting"
+            required
+          />
+        </div>
+
+        <div class="field">
+          <label for="order-email">{{ $t('order.hibolia.email_label') }}:</label>
+          <input
+            id="order-email"
+            v-model="form.email"
+            type="email"
+            name="email"
+            autocomplete="email"
+            spellcheck="false"
+            :disabled="submitting"
+            required
+          />
+        </div>
+        <p>{{ $t('order.hibolia.dragon_intro') }}</p>
+        <div class="field field-block">
+          <label for="order-message">{{ $t('order.hibolia.message_label') }}:</label>
+          <textarea
+            id="order-message"
+            v-model="form.message"
+            name="message"
+            rows="6"
+            maxlength="2000"
+            :disabled="submitting"
+            required
+          />
+        </div>
+        <p>{{ $t('order.hibolia.edges_intro') }}</p>
+        <p>{{ $t('order.hibolia.edges_color_prompt') }}</p>
+        <fieldset class="field field-block color-field">
+          <legend>{{ $t('order.hibolia.color_label') }}:</legend>
+          <div class="color-grid">
+            <label
+              v-for="option in COLOR_OPTIONS"
+              :key="option.value"
+              class="color-option"
+              :class="{ selected: form.color === option.value }"
+            >
+              <input
+                v-model="form.color"
+                type="radio"
+                name="color"
+                :value="option.value"
+                :disabled="submitting"
+                :id="`order-color-${option.value}`"
+              />
+              <span class="swatch" :style="{ background: option.hex }" aria-hidden="true"></span>
+              <span class="color-name">{{ $t(`order.hibolia.colors.${option.value}`) }}</span>
+            </label>
+          </div>
+        </fieldset>
+
+        <p>{{ $t('order.hibolia.preview_note') }}</p>
+
+        <HiboliaDeckPreview class="deck-preview" :color="selectedColorHex" />
+
+        <i18n-t keypath="order.hibolia.edges_advice" tag="p">
+          <template #please><b>{{ $t('order.hibolia.please') }}</b></template>
+        </i18n-t>
+
+        <p>{{ $t('order.hibolia.final_intro') }}</p>
+        <ul>
+          <li>{{ $t('order.hibolia.final_design') }}</li>
+          <li>{{ $t('order.hibolia.final_delivery_time') }}</li>
+          <li>{{ $t('order.hibolia.final_delivery_inperson') }}</li>
+          <li>{{ $t('order.hibolia.final_price') }}</li>
+          <li>{{ $t('order.hibolia.final_payment_methods') }}</li>
+          <li>{{ $t('order.hibolia.final_payment_deadline') }}</li>
+          <li>{{ $t('order.hibolia.final_tip') }}</li>
+        </ul>
+        <p>{{ $t('order.hibolia.comments_prompt') }}</p>
+        <div class="field field-block">
+          <label for="order-shipping">{{ $t('order.hibolia.comments_label') }}:</label>
+          <textarea
+            id="order-shipping"
+            v-model="form.shipping"
+            name="shipping"
+            rows="6"
+            maxlength="2000"
+            :disabled="submitting"
+            required
+          />
+        </div>
+
+        <p v-if="errorMsg" class="order-error" role="alert">✗ {{ errorMsg }}</p>
+
+        <button type="submit" class="order-btn" :disabled="submitting">
+          <span v-if="!submitting">&gt; {{ $t('order.hibolia.submit') }}</span>
+          <span v-else class="blink">{{ $t('order.hibolia.submitting') }}</span>
+        </button>
+       </form>
+      </div>
+    </Container>
+  </FullscreenLayout>
+  <StickyHeader always-visible />
+</template>
+
+<style lang="scss" scoped>
+.tui-frame.full-bg {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+
+  :deep(.tui-inner) {
+    flex: 1;
+    width: 100%;
+    max-width: 1120px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 52px;
+    background: var(--color-background-fore);
+  }
+
+  :deep(.frame-corner-tr),
+  :deep(.frame-corner-br) {
+    right: 0;
+  }
+}
+
+.order-title {
+  font-family: 'Hurmit', monospace;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.order-prompt {
+  font-size: 0.92rem;
+  color: var(--color-text);
+  opacity: 0.75;
+  margin-bottom: 24px;
+}
+
+.order-layout {
+  display: flex;
+  flex: 1;
+}
+
+.order-form {
+  flex: 1;
+  max-width: 860px;
+  min-width: 0;
+  margin: 0 auto;
+  padding: 100px 0;
+
+  ul {
+    list-style: disc;
+    padding-left: 28px;
+    margin: 8px 0;
+  }
+
+  ul ul {
+    list-style: circle;
+  }
+
+  li {
+    padding: 2px 0;
+    line-height: 1.6;
+  }
+
+  p {
+    margin: 12px 0;
+  }
+}
+
+.order-scene {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  filter: blur(10px);
+}
+
+.field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+
+  label {
+    font-family: 'Hurmit', monospace;
+    font-size: 0.9rem;
+    color: var(--color-link);
+    min-width: 90px;
+    text-align: right;
+  }
+
+  input,
+  textarea {
+    flex: 1;
+    font-family: 'Hurmit', monospace;
+    font-size: 0.95rem;
+    color: var(--color-text);
+    background: var(--color-background);
+    border: 1px solid var(--color-border-color);
+    padding: 8px 10px;
+    outline: none;
+    min-width: 0;
+
+    &:focus {
+      border-color: var(--color-link);
+      box-shadow: 2px -2px 0 0 var(--color-frame-glow);
+    }
+  }
+}
+
+.field-block {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+
+  label {
+    text-align: left;
+    min-width: 0;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+}
+
+.color-field {
+  border: none;
+  padding: 0;
+  margin: 0 0 14px;
+
+  legend {
+    font-family: 'Hurmit', monospace;
+    font-size: 0.9rem;
+    color: var(--color-link);
+    margin-bottom: 8px;
+    padding: 0;
+  }
+}
+
+.color-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.deck-preview {
+  height: 300px;
+  margin: 0 0 14px;
+  border: 1px solid var(--color-border-color);
+  background: var(--color-background);
+}
+
+.color-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--color-border-color);
+  padding: 6px 8px;
+  cursor: pointer;
+  transition: all 120ms steps(3);
+  min-width: 0;
+
+  input[type='radio'] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .swatch {
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--color-border-color);
+    flex-shrink: 0;
+  }
+
+  .color-name {
+    font-family: 'Hurmit', monospace;
+    font-size: 0.8rem;
+    color: var(--color-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  &.selected {
+    border-color: var(--color-link);
+    box-shadow: 2px -2px 0 0 var(--color-frame-glow);
+    background: var(--color-hover);
+
+    .color-name {
+      color: var(--color-link);
+    }
+  }
+
+  input[type='radio']:focus-visible ~ .swatch {
+    outline: 1px dashed var(--color-link);
+    outline-offset: 2px;
+  }
+}
+
+.order-error {
+  font-family: 'Hurmit', monospace;
+  font-size: 0.85rem;
+  color: #e05c5c;
+  margin: 4px 0 12px;
+}
+
+.order-btn {
+  display: block;
+  font-family: 'Hurmit', monospace;
+  font-size: 1.05rem;
+  color: #d4d4d4;
+  background: #000;
+  border: 1px solid var(--color-border-color);
+  padding: 14px 42px;
+  cursor: pointer;
+  transition: all 120ms steps(3);
+  margin: 0 auto;
+
+  &:hover:not(:disabled) {
+    border-color: var(--color-link);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: wait;
+  }
+}
+
+.blink {
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  0%, 50%, 100% { opacity: 1; }
+  25%, 75% { opacity: 0; }
+}
+
+
+@media screen and (max-width: 600px) {
+  .field {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+
+    label {
+      text-align: left;
+      min-width: 0;
+    }
+  }
+
+  .color-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
+
+<style lang="scss">
+.no-sprite .undertable-wrapper {
+  display: none;
+}
+</style>

frontend/app/pages/projects/hibolia/thanks.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import FullscreenLayout from '~/components/layouts/FullscreenLayout.vue';
+import StickyHeader from '~/components/parts/StickyHeader.vue';
+import HiboliaScene from '~/components/widgets/HiboliaScene.vue';
+
+useHead({
+  title: 'Thanks | Aran Roig',
+  meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
+});
+
+const localePath = useLocalePath();
+</script>
+
+<template>
+  <FullscreenLayout>
+    <HiboliaScene class="thanks-scene" aria-hidden="true" />
+
+    <Container class="full-bg">
+      <div class="thanks-layout">
+        <div class="thanks-panel">
+          <h1 class="thanks-title">✓ {{ $t('order.hibolia.thanks.title') }}</h1>
+          <p class="thanks-message">{{ $t('order.hibolia.thanks.message') }}</p>
+          <p class="thanks-next">{{ $t('order.hibolia.thanks.next') }}</p>
+          <NuxtLink class="thanks-back" :to="localePath('/')">
+            &gt; {{ $t('order.hibolia.thanks.back_home') }}
+          </NuxtLink>
+        </div>
+      </div>
+    </Container>
+  </FullscreenLayout>
+  <StickyHeader always-visible />
+</template>
+
+<style lang="scss" scoped>
+.tui-frame.full-bg {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+
+  :deep(.tui-inner) {
+    flex: 1;
+    width: 100%;
+    max-width: 1120px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 52px;
+    background: var(--color-background-fore);
+  }
+
+  :deep(.frame-corner-tr),
+  :deep(.frame-corner-br) {
+    right: 0;
+  }
+}
+
+.thanks-layout {
+  display: flex;
+  flex: 1;
+}
+
+.thanks-panel {
+  flex: 1;
+  max-width: 720px;
+  min-width: 0;
+  margin: 0 auto;
+  padding: 100px 0;
+  text-align: center;
+}
+
+.thanks-title {
+  font-family: 'Hurmit', monospace;
+  margin-bottom: 24px;
+}
+
+.thanks-message {
+  font-family: 'Hurmit', monospace;
+  font-size: 1.05rem;
+  margin: 12px 0;
+}
+
+.thanks-next {
+  font-family: 'Hurmit', monospace;
+  font-size: 0.9rem;
+  opacity: 0.75;
+  margin: 12px 0 32px;
+}
+
+.thanks-back {
+  display: inline-block;
+  font-family: 'Hurmit', monospace;
+  font-size: 1.05rem;
+  color: #d4d4d4;
+  background: #000;
+  border: 1px solid var(--color-border-color);
+  padding: 14px 42px;
+  text-decoration: none;
+  transition: all 120ms steps(3);
+
+  &:hover {
+    border-color: var(--color-link);
+  }
+}
+
+.thanks-scene {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  filter: blur(10px);
+}
+</style>
+
+<style lang="scss">
+.no-sprite .undertable-wrapper {
+  display: none;
+}
+</style>

frontend/app/pages/projects/index.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import FixedLayout from '~/components/layouts/FixedLayout.vue';
+import TableHeader from '~/components/parts/TableHeader.vue';
+import { useSeo } from '~/composables/seo';
+
+const { locale, t } = useI18n();
+
+useSeo({
+  title: 'Projects',
+  description: 'Explore the projects of Aran Roig. Software engineering, tools, games and creative experiments.',
+  canonicalUrl: '/projects'
+});
+
+useHead({
+  script: [{
+    type: 'application/ld+json',
+    innerHTML: JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'CollectionPage',
+      headline: 'Projects by Aran Roig',
+      description: 'Explore the projects of Aran Roig. Software engineering, tools, games and creative experiments.',
+      url: 'https://aranroig.com/projects',
+      author: {
+        '@type': 'Person',
+        name: 'Aran Roig'
+      },
+      inLanguage: ['en', 'es', 'ca', 'zh']
+    })
+  }]
+});
+
+const { data: projects } = useAsyncData('projects-list', async () => {
+  const currentLocale = locale.value;
+
+  const enProjects = await queryCollection('projects')
+    .where('path', 'LIKE', `/projects/en/%`)
+    .all();
+
+  if (currentLocale === 'en') return enProjects;
+
+  const localeProjects = await queryCollection('projects')
+    .where('path', 'LIKE', `/projects/${currentLocale}/%`)
+    .all();
+
+  const translatedSlugs = new Set(
+    localeProjects.map((p) => p.path.replace(`/projects/${currentLocale}/`, ''))
+  );
+
+  const enFallbacks = enProjects.filter(
+    (p) => !translatedSlugs.has(p.path.replace('/projects/en/', ''))
+  );
+
+  return [...localeProjects, ...enFallbacks];
+}, { watch: [locale, () => useRoute().path] });
+
+function resolveProjectLink(project) {
+  if (project.link) return project.link;
+  const slugToProjectMap = {
+    'dragonroll': 'https://dragonroll.aranroig.com',
+  };
+  return slugToProjectMap[project.slug] || null;
+}
+
+function navigateToProject(project) {
+  const link = resolveProjectLink(project);
+  if (link) window.open(link, '_blank', 'noopener,noreferrer');
+}
+</script>
+
+<template>
+    <div class="no-sprite">
+      <TableHeader></TableHeader>
+    </div>
+    <FixedLayout>
+        <Container class="top-margin">
+            <h1 class="section-title">{{ t('pages.projects_heading') }}</h1>
+            <div class="projects-grid">
+              <div
+                v-for="project in projects"
+                :key="project.slug"
+                class="project-card-wrapper"
+              >
+                <div class="project-card" @click="navigateToProject(project)">
+                  <div class="project-layout">
+                    <img
+                      v-if="project.preview"
+                      :src="project.preview"
+                      :alt="`Preview of ${project.title}`"
+                      class="project-preview"
+                    />
+                    <div class="project-info">
+                      <p class="project-title">{{ project.title }}</p>
+                      <p class="project-description">{{ project.description }}</p>
+                      <div class="project-tech">
+                        <span v-for="tech in project.tech" :key="tech" class="tech-tag">{{ tech }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </Container>
+    </FixedLayout>
+    <Footer></Footer>
+</template>
+
+<style lang="scss" scoped>
+.section-title {
+  font-family: 'Hurmit', monospace;
+  color: var(--color-text);
+  font-size: 1.2rem;
+  letter-spacing: 0.5px;
+  margin: 28px 0 16px 0;
+  padding-left: 12px;
+  line-height: 1.3;
+
+  &::before {
+    content: "├";
+    color: var(--color-link);
+    margin-right: 8px;
+    font-weight: normal;
+  }
+
+  &::after {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background-color: var(--color-link);
+    margin-left: 10px;
+    vertical-align: middle;
+    box-shadow: 0 0 4px var(--color-link);
+    animation: blink-cursor 1s steps(1) infinite;
+  }
+}
+
+@keyframes blink-cursor {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+.projects-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px 0;
+}
+
+.project-card {
+  position: relative;
+  background: var(--color-background-fore);
+  border: 1px solid var(--color-border-color);
+  box-shadow: 4px -4px 0px 0px var(--color-container-shadow);
+  padding: 12px 16px;
+  transition: all 0.1s steps(2, end);
+  cursor: pointer;
+
+  &::before {
+    content: "[ PROJECT ]";
+    position: absolute;
+    top: -9px;
+    left: 12px;
+    background-color: var(--color-background-fore);
+    padding: 0 6px;
+    font-size: 0.65rem;
+    color: var(--color-link);
+    letter-spacing: 2px;
+  }
+
+  .project-layout {
+    display: flex;
+    gap: 16px;
+  }
+
+  .project-preview {
+    width: 140px;
+    min-width: 140px;
+    height: 85px;
+    object-fit: cover;
+    border: 1px solid var(--color-border-color);
+    image-rendering: auto;
+    transition: border-color 0.1s steps(2, end);
+  }
+
+  .project-info {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+    cursor: pointer;
+  }
+}
+
+.project-card-wrapper:hover .project-card {
+  border-color: var(--color-link);
+  box-shadow: 4px -4px 0px 0px var(--color-link);
+}
+
+.project-title {
+  font-family: 'Hurmit', monospace;
+  color: inherit;
+  text-decoration: none;
+  font-size: 1.05rem;
+  text-shadow: inherit;
+
+  &:hover {
+    color: var(--color-link);
+  }
+}
+
+.project-description {
+  font-family: 'Hurmit', monospace;
+  color: var(--color-text);
+  margin: 8px 0 12px 0;
+  line-height: 1.5;
+  font-size: 0.9rem;
+}
+
+.project-tech {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tech-tag {
+  font-family: 'Hurmit', monospace;
+  font-size: 0.7rem;
+  color: var(--color-background-fore);
+  background-color: var(--color-link);
+  padding: 1px 6px;
+  box-shadow: 2px -2px 0px 0px rgba(0, 0, 0, 0.3);
+  letter-spacing: 0.5px;
+}
+
+@media (max-width: 600px) {
+  .section-title {
+    font-size: 1rem;
+  }
+
+  .project-card {
+    padding: 8px 12px;
+  }
+
+  .project-layout {
+    flex-direction: column !important;
+  }
+
+  .project-preview {
+    width: 100% !important;
+    min-width: auto !important;
+    height: 160px !important;
+  }
+
+  .project-title {
+    font-size: 0.95rem;
+  }
+
+  .project-description {
+    font-size: 0.82rem;
+  }
+}
+
+@media (max-width: 400px) {
+  .section-title {
+    font-size: 1rem;
+    padding-left: 0;
+  }
+}
+</style>
+
+<style lang="scss">
+.no-sprite .undertable-wrapper {
+  display: none;
+}
+</style>