feat(projects): scrolling projects

app/components/Projects/BottomScreen/Background.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const backgroundImage = useTemplateRef("backgroundImage");
+
+useRender((ctx) => {
+  if (!backgroundImage.value) return;
+
+  ctx.drawImage(backgroundImage.value, 0, 0);
+});
+</script>
+
+<template>
+  <img
+    ref="backgroundImage"
+    src="/assets/images/projects/bottom-screen/background.png"
+    hidden
+  />
+</template>

app/components/Projects/BottomScreen/BottomScreen.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Background from "./Background.vue";
+import Projects from "./Projects.vue";
+</script>
+
+<template>
+  <Background />
+
+  <Projects />
+</template>

app/components/Projects/BottomScreen/Projects.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import gsap from "gsap";
+
+const selectorImage = useTemplateRef("selectorImage");
+const projectSquareImage = useTemplateRef("projectSquareImage");
+
+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);
+
+  for (let i = startIndex; i < endIndex; i += 1) {
+    const offsetFromCenter = i - currentProject;
+    const x = 101 + 69 * offsetFromCenter + offsetX.value;
+
+    ctx.drawImage(projectSquareImage.value, x, 81);
+  }
+
+  ctx.drawImage(selectorImage.value, 96, 76);
+
+  ctx.font = "10px NDS10";
+  ctx.fillText(projects[currentProject]!, 20, 20);
+});
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  let from = 0;
+  if (e.key === "ArrowRight" && currentProject < projects.length - 1) {
+    currentProject += 1;
+    from = 69;
+  }
+  if (e.key === "ArrowLeft" && currentProject > 0) {
+    currentProject -= 1;
+    from = -69;
+  }
+
+  if (from != 0) {
+    gsap.fromTo(
+      offsetX,
+      {
+        value: from,
+      },
+      {
+        value: 0,
+        duration: 0.075,
+        ease: "none",
+      },
+    );
+  }
+};
+
+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>