From 6e510890ec4d0050dcb9ad494f1543dc21e5032d Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Tue, 18 Nov 2025 19:48:44 +0100
Subject: [PATCH] feat(projects): move data to store and render thumbnails

---
 .../bottom-screen/thumbnails/biobleud.png     | Bin 0 -> 6656 bytes
 .../bottom-screen/thumbnails/lbf-bot.png      | Bin 0 -> 6656 bytes
 .../bottom-screen/thumbnails/lilou.cat.png    | Bin 0 -> 6656 bytes
 .../bottom-screen/thumbnails/pihkaal.me.png   | Bin 0 -> 6656 bytes
 .../thumbnails/raylib-speedruns.png           | Bin 0 -> 6656 bytes
 .../bottom-screen/thumbnails/s3pweb.png       | Bin 0 -> 6656 bytes
 .../bottom-screen/thumbnails/simple-qr.png    | Bin 0 -> 6656 bytes
 .../bottom-screen/thumbnails/tlock.png        | Bin 0 -> 6656 bytes
 .../Projects/BottomScreen/Projects.vue        |  55 ++++++++--------
 app/stores/projects.ts                        |  59 ++++++++++++++++++
 10 files changed, 85 insertions(+), 29 deletions(-)
 create mode 100644 app/assets/images/projects/bottom-screen/thumbnails/biobleud.png
 create mode 100644 app/assets/images/projects/bottom-screen/thumbnails/lbf-bot.png
 create mode 100644 app/assets/images/projects/bottom-screen/thumbnails/lilou.cat.png
 create mode 100644 app/assets/images/projects/bottom-screen/thumbnails/pihkaal.me.png
 create mode 100644 app/assets/images/projects/bottom-screen/thumbnails/raylib-speedruns.png
 create mode 100644 app/assets/images/projects/bottom-screen/thumbnails/s3pweb.png
 create mode 100644 app/assets/images/projects/bottom-screen/thumbnails/simple-qr.png
 create mode 100644 app/assets/images/projects/bottom-screen/thumbnails/tlock.png
 create mode 100644 app/stores/projects.ts

diff --git a/app/assets/images/projects/bottom-screen/thumbnails/biobleud.png b/app/assets/images/projects/bottom-screen/thumbnails/biobleud.png
new file mode 100644
index 0000000000000000000000000000000000000000..37afab39f4f9786b820fde6ef6b31a5bebae53eb
GIT binary patch
literal 6656
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU#=yY%`)9{*AcwIy$lZzY=1HA;AcrO0(btiI
zVPik{pF~z5Um@8e$d`ekN{xY`p@o6r7f`6-1p`B=0RzLU1O^7H84L{K1#@-<+5jau
z3p^r=85s1GL71^(seKtxkiEpy*OmPxw~&CP^otoQPckq_hIzU;hD2~OdP{D3#`vFs
z0f<lm6Dk+Nqfl^QEh5@OgG?dTP#a`!#F{XMy&H*+8EheeO^oPZ#HJaW*r<WnLWMN3
z(J&+}ys)Vr%_-PIg*36zbVyowVN*RChS)-dG_lbzBrUwKsU8hOY@tG$7}e_((yS+}
zn(C2E*h<n=j5?6C@WNC*8iJT%LYl~E2$B|Fn5suZ5Hn0j6B!Lb(!vW<^=JrUh6!mR
tqajFIcwwp@4MEH>Ax&g71W5}oOw|{a`I?StoecxYc)I$ztaD0e0svbPJBa`Q

literal 0
HcmV?d00001

diff --git a/app/assets/images/projects/bottom-screen/thumbnails/lbf-bot.png b/app/assets/images/projects/bottom-screen/thumbnails/lbf-bot.png
new file mode 100644
index 0000000000000000000000000000000000000000..37afab39f4f9786b820fde6ef6b31a5bebae53eb
GIT binary patch
literal 6656
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU#=yY%`)9{*AcwIy$lZzY=1HA;AcrO0(btiI
zVPik{pF~z5Um@8e$d`ekN{xY`p@o6r7f`6-1p`B=0RzLU1O^7H84L{K1#@-<+5jau
z3p^r=85s1GL71^(seKtxkiEpy*OmPxw~&CP^otoQPckq_hIzU;hD2~OdP{D3#`vFs
z0f<lm6Dk+Nqfl^QEh5@OgG?dTP#a`!#F{XMy&H*+8EheeO^oPZ#HJaW*r<WnLWMN3
z(J&+}ys)Vr%_-PIg*36zbVyowVN*RChS)-dG_lbzBrUwKsU8hOY@tG$7}e_((yS+}
zn(C2E*h<n=j5?6C@WNC*8iJT%LYl~E2$B|Fn5suZ5Hn0j6B!Lb(!vW<^=JrUh6!mR
tqajFIcwwp@4MEH>Ax&g71W5}oOw|{a`I?StoecxYc)I$ztaD0e0svbPJBa`Q

literal 0
HcmV?d00001

diff --git a/app/assets/images/projects/bottom-screen/thumbnails/lilou.cat.png b/app/assets/images/projects/bottom-screen/thumbnails/lilou.cat.png
new file mode 100644
index 0000000000000000000000000000000000000000..37afab39f4f9786b820fde6ef6b31a5bebae53eb
GIT binary patch
literal 6656
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU#=yY%`)9{*AcwIy$lZzY=1HA;AcrO0(btiI
zVPik{pF~z5Um@8e$d`ekN{xY`p@o6r7f`6-1p`B=0RzLU1O^7H84L{K1#@-<+5jau
z3p^r=85s1GL71^(seKtxkiEpy*OmPxw~&CP^otoQPckq_hIzU;hD2~OdP{D3#`vFs
z0f<lm6Dk+Nqfl^QEh5@OgG?dTP#a`!#F{XMy&H*+8EheeO^oPZ#HJaW*r<WnLWMN3
z(J&+}ys)Vr%_-PIg*36zbVyowVN*RChS)-dG_lbzBrUwKsU8hOY@tG$7}e_((yS+}
zn(C2E*h<n=j5?6C@WNC*8iJT%LYl~E2$B|Fn5suZ5Hn0j6B!Lb(!vW<^=JrUh6!mR
tqajFIcwwp@4MEH>Ax&g71W5}oOw|{a`I?StoecxYc)I$ztaD0e0svbPJBa`Q

literal 0
HcmV?d00001

diff --git a/app/assets/images/projects/bottom-screen/thumbnails/pihkaal.me.png b/app/assets/images/projects/bottom-screen/thumbnails/pihkaal.me.png
new file mode 100644
index 0000000000000000000000000000000000000000..37afab39f4f9786b820fde6ef6b31a5bebae53eb
GIT binary patch
literal 6656
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU#=yY%`)9{*AcwIy$lZzY=1HA;AcrO0(btiI
zVPik{pF~z5Um@8e$d`ekN{xY`p@o6r7f`6-1p`B=0RzLU1O^7H84L{K1#@-<+5jau
z3p^r=85s1GL71^(seKtxkiEpy*OmPxw~&CP^otoQPckq_hIzU;hD2~OdP{D3#`vFs
z0f<lm6Dk+Nqfl^QEh5@OgG?dTP#a`!#F{XMy&H*+8EheeO^oPZ#HJaW*r<WnLWMN3
z(J&+}ys)Vr%_-PIg*36zbVyowVN*RChS)-dG_lbzBrUwKsU8hOY@tG$7}e_((yS+}
zn(C2E*h<n=j5?6C@WNC*8iJT%LYl~E2$B|Fn5suZ5Hn0j6B!Lb(!vW<^=JrUh6!mR
tqajFIcwwp@4MEH>Ax&g71W5}oOw|{a`I?StoecxYc)I$ztaD0e0svbPJBa`Q

literal 0
HcmV?d00001

diff --git a/app/assets/images/projects/bottom-screen/thumbnails/raylib-speedruns.png b/app/assets/images/projects/bottom-screen/thumbnails/raylib-speedruns.png
new file mode 100644
index 0000000000000000000000000000000000000000..37afab39f4f9786b820fde6ef6b31a5bebae53eb
GIT binary patch
literal 6656
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU#=yY%`)9{*AcwIy$lZzY=1HA;AcrO0(btiI
zVPik{pF~z5Um@8e$d`ekN{xY`p@o6r7f`6-1p`B=0RzLU1O^7H84L{K1#@-<+5jau
z3p^r=85s1GL71^(seKtxkiEpy*OmPxw~&CP^otoQPckq_hIzU;hD2~OdP{D3#`vFs
z0f<lm6Dk+Nqfl^QEh5@OgG?dTP#a`!#F{XMy&H*+8EheeO^oPZ#HJaW*r<WnLWMN3
z(J&+}ys)Vr%_-PIg*36zbVyowVN*RChS)-dG_lbzBrUwKsU8hOY@tG$7}e_((yS+}
zn(C2E*h<n=j5?6C@WNC*8iJT%LYl~E2$B|Fn5suZ5Hn0j6B!Lb(!vW<^=JrUh6!mR
tqajFIcwwp@4MEH>Ax&g71W5}oOw|{a`I?StoecxYc)I$ztaD0e0svbPJBa`Q

literal 0
HcmV?d00001

diff --git a/app/assets/images/projects/bottom-screen/thumbnails/s3pweb.png b/app/assets/images/projects/bottom-screen/thumbnails/s3pweb.png
new file mode 100644
index 0000000000000000000000000000000000000000..37afab39f4f9786b820fde6ef6b31a5bebae53eb
GIT binary patch
literal 6656
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU#=yY%`)9{*AcwIy$lZzY=1HA;AcrO0(btiI
zVPik{pF~z5Um@8e$d`ekN{xY`p@o6r7f`6-1p`B=0RzLU1O^7H84L{K1#@-<+5jau
z3p^r=85s1GL71^(seKtxkiEpy*OmPxw~&CP^otoQPckq_hIzU;hD2~OdP{D3#`vFs
z0f<lm6Dk+Nqfl^QEh5@OgG?dTP#a`!#F{XMy&H*+8EheeO^oPZ#HJaW*r<WnLWMN3
z(J&+}ys)Vr%_-PIg*36zbVyowVN*RChS)-dG_lbzBrUwKsU8hOY@tG$7}e_((yS+}
zn(C2E*h<n=j5?6C@WNC*8iJT%LYl~E2$B|Fn5suZ5Hn0j6B!Lb(!vW<^=JrUh6!mR
tqajFIcwwp@4MEH>Ax&g71W5}oOw|{a`I?StoecxYc)I$ztaD0e0svbPJBa`Q

literal 0
HcmV?d00001

diff --git a/app/assets/images/projects/bottom-screen/thumbnails/simple-qr.png b/app/assets/images/projects/bottom-screen/thumbnails/simple-qr.png
new file mode 100644
index 0000000000000000000000000000000000000000..8521981f516d00b37002ab3cfdaec05c4aaa968a
GIT binary patch
literal 6656
zcmeHJL2DCH5T2FV+Lm65AoWxzh=(AaJcv|MQkqawY>=Y2Y6Y)_+9F;o#fYA~dhqI1
zDD+hN2l^BG2a5U+Y6ZI!naAw#CU4&6Z4TOyFz?NL^UXK2`!@UW(aO@)#LWo+m})f}
zo!s8W-?dSI?ELJ*dA`ZEI!g=L$#Ly%z8QI0Z`T3#KTZCAb~WG6ZZtb>fH$`QcHaT~
z%3ZtP0k-b~{9FgP{~6%M=9k0O2YFz8v-xxj;LaTWve#c9?&Qv~SFQHq*pJES>00f@
z_4y-!nYC7<{`kpwwmfrin*9ODzs1j$;`Z;ZgfnA2dLfR&gkB-3Nv|%`y@i+%w=7Uf
z7Kb81<dDM1kG8<b1Cm_@O7?Qi@X~VaEiLt7k{2lTsX$qF$Uxc92<hPgY(_TZfHFV?
zWX)HG5<=EHZ%pEniNxol7+IB&0NjS!MQjuyC)d_0p+$|4v`1)}jW5~f>k*=wRHUwD
zON*AGj?gDx`Yc7G2xS4^et0LvSKZ=E-m;m{a)q%2GokffH4|Fq7p3q&C9L%5X}3}D
zDr-UOh2XeqZX3&NxC-n@%W(>=ZTBO?qK+_hw5Xt_j5_c>4=I^IAriu&b?+?P8AHJH
zaP3-_fwKGLgx(pJRaZq`@{UuB{PzUPBcx5tiqrDRU)cmh4;m5>vXu!86}HAN1zIPi
z;i4xv$lrn{qMtunU_UY$OVNxInCh`0Mf&zJwVc3Ij|HEgL3~c&AS5xlG1Eid!ut`Q
zVv75R3nyW*yz1Kw62_8oLAWj}iu0%f2}DJ3-%l{dg|NhJu|a_rk}5GnKP0iuTndbx
Yn8d&D-rIZL=x(6DwYbvwwy?f;0h!5R$p8QV

literal 0
HcmV?d00001

diff --git a/app/assets/images/projects/bottom-screen/thumbnails/tlock.png b/app/assets/images/projects/bottom-screen/thumbnails/tlock.png
new file mode 100644
index 0000000000000000000000000000000000000000..37afab39f4f9786b820fde6ef6b31a5bebae53eb
GIT binary patch
literal 6656
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU#=yY%`)9{*AcwIy$lZzY=1HA;AcrO0(btiI
zVPik{pF~z5Um@8e$d`ekN{xY`p@o6r7f`6-1p`B=0RzLU1O^7H84L{K1#@-<+5jau
z3p^r=85s1GL71^(seKtxkiEpy*OmPxw~&CP^otoQPckq_hIzU;hD2~OdP{D3#`vFs
z0f<lm6Dk+Nqfl^QEh5@OgG?dTP#a`!#F{XMy&H*+8EheeO^oPZ#HJaW*r<WnLWMN3
z(J&+}ys)Vr%_-PIg*36zbVyowVN*RChS)-dG_lbzBrUwKsU8hOY@tG$7}e_((yS+}
zn(C2E*h<n=j5?6C@WNC*8iJT%LYl~E2$B|Fn5suZ5Hn0j6B!Lb(!vW<^=JrUh6!mR
tqajFIcwwp@4MEH>Ax&g71W5}oOw|{a`I?StoecxYc)I$ztaD0e0svbPJBa`Q

literal 0
HcmV?d00001

diff --git a/app/components/Projects/BottomScreen/Projects.vue b/app/components/Projects/BottomScreen/Projects.vue
index fe6598d..fc6996b 100644
--- a/app/components/Projects/BottomScreen/Projects.vue
+++ b/app/components/Projects/BottomScreen/Projects.vue
@@ -1,40 +1,50 @@
 <script setup lang="ts">
 import gsap from "gsap";
+import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.png";
+import PROJECT_SQUARE_IMAGE from "/assets/images/projects/bottom-screen/project-square.png";
 
-const selectorImage = useTemplateRef("selectorImage");
-const projectSquareImage = useTemplateRef("projectSquareImage");
+const store = useProjectsStore();
+
+const [selectorImage, projectSquareImage] = useImages(
+  SELECTOR_IMAGE,
+  PROJECT_SQUARE_IMAGE,
+);
+const projectThumbnails = useImages(...store.projects.map((x) => x.thumbnail));
 
-const projects = ["a", "b", "c", "d", "e", "f", "g", "h"];
-let currentProject = 0;
 const offsetX = ref(0);
 
 useRender((ctx) => {
-  if (!selectorImage.value || !projectSquareImage.value) return;
-
-  const startIndex = Math.max(currentProject - 3, 0);
-  const endIndex = Math.min(currentProject + 3 + 1, projects.length);
+  const startIndex = Math.max(store.currentProject - 3, 0);
+  const endIndex = Math.min(
+    store.currentProject + 3 + 1,
+    store.projects.length,
+  );
 
   for (let i = startIndex; i < endIndex; i += 1) {
-    const offsetFromCenter = i - currentProject;
+    const offsetFromCenter = i - store.currentProject;
     const x = 101 + 69 * offsetFromCenter + offsetX.value;
 
-    ctx.drawImage(projectSquareImage.value, x, 81);
+    ctx.drawImage(projectSquareImage!, x, 81);
+    ctx.drawImage(projectThumbnails[i]!, x + 7, 88);
   }
 
-  ctx.drawImage(selectorImage.value, 96, 76);
+  ctx.drawImage(selectorImage!, 96, 76);
 
   ctx.font = "10px NDS10";
-  ctx.fillText(projects[currentProject]!, 20, 20);
+  ctx.fillText(store.projects[store.currentProject]!.description, 20, 20);
 });
 
 const handleKeyDown = (e: KeyboardEvent) => {
   let from = 0;
-  if (e.key === "ArrowRight" && currentProject < projects.length - 1) {
-    currentProject += 1;
+  if (
+    e.key === "ArrowRight" &&
+    store.currentProject < store.projects.length - 1
+  ) {
+    store.currentProject += 1;
     from = 69;
   }
-  if (e.key === "ArrowLeft" && currentProject > 0) {
-    currentProject -= 1;
+  if (e.key === "ArrowLeft" && store.currentProject > 0) {
+    store.currentProject -= 1;
     from = -69;
   }
 
@@ -56,16 +66,3 @@ const handleKeyDown = (e: KeyboardEvent) => {
 onMounted(() => window.addEventListener("keydown", handleKeyDown));
 onUnmounted(() => window.removeEventListener("keydown", handleKeyDown));
 </script>
-
-<template>
-  <img
-    ref="selectorImage"
-    src="/assets/images/projects/bottom-screen/selector.png"
-    hidden
-  />
-  <img
-    ref="projectSquareImage"
-    src="/assets/images/projects/bottom-screen/project-square.png"
-    hidden
-  />
-</template>
diff --git a/app/stores/projects.ts b/app/stores/projects.ts
new file mode 100644
index 0000000..90f5543
--- /dev/null
+++ b/app/stores/projects.ts
@@ -0,0 +1,59 @@
+import PIHKAAL_ME_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/pihkaal.me.png";
+import TLOCK_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/tlock.png";
+import SIMPLE_QR_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/simple-qr.png";
+import LILOU_CAT_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/lilou.cat.png";
+import LBF_BOT_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/lbf-bot.png";
+import RAYLIB_SPEENDRUNS_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/raylib-speedruns.png";
+import SP3WEB_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/s3pweb.png";
+import BIOBLEUD_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/biobleud.png";
+
+export const useProjectsStore = defineStore("projects", {
+  state: () => ({
+    // prettier-ignore
+    projects: [
+      {
+        description: "pihkaal.me - my personal website",
+        thumbnail: PIHKAAL_ME_THUMBNAIL,
+      },
+      {
+        description: "tlock - fully customizable and cross-platform terminal based clock",
+        thumbnail: TLOCK_THUMBNAIL,
+      },
+      {
+        description: "Simple QR - Simple QR code generator with straightforward API",
+        thumbnail: SIMPLE_QR_THUMBNAIL,
+      },
+      {
+        description: "lilou.cat - My cat's website",
+        thumbnail: LILOU_CAT_THUMBNAIL
+      },
+      {
+        description: "LBF Bot - Custom Discord bot for a gaming group",
+        thumbnail: LBF_BOT_THUMBNAIL,
+      },
+      {
+        description: "Raylib Speedruns - Collection of simple Raylib setups in multiple languages",
+        thumbnail: RAYLIB_SPEENDRUNS_THUMBNAIL,
+      },
+      {
+        description: "S3P Map Editor - Web based map editor specialized for trucks",
+        thumbnail: SP3WEB_THUMBNAIL,
+      },
+      {
+        description: "S3P Eramba Visualizer - Eramba asset visualization",
+        thumbnail: SP3WEB_THUMBNAIL,
+      },
+      {
+        description: "S3P Incident Engine - Automated alerts to Jira",
+        thumbnail: SP3WEB_THUMBNAIL,
+      },
+      {
+        description: "Biobleud - Automated Excel imports for an ERP system",
+        thumbnail: BIOBLEUD_THUMBNAIL,
+      },
+    ],
+    currentProject: 0,
+  }),
+
+  actions: {},
+});