feat(projects): synchronize previews with thumbnails scrolling

app/stores/projects.ts

@@ -1,4 +1,5 @@
 import type { MarkdownRoot } from "@nuxt/content";
+import gsap from "gsap";
 
 type MarkdownBody = (
   | {
@@ -68,6 +69,7 @@ export const useProjectsStore = defineStore("projects", {
     }[],
     currentProject: 0,
     loading: true,
+    offsetX: 0,
   }),
 
   actions: {
@@ -99,5 +101,49 @@ export const useProjectsStore = defineStore("projects", {
       const url = this.projects[this.currentProject]!.url;
       if (url) navigateTo(url, { external: true, open: { target: "_blank" } });
     },
+
+    scrollProjects(direction: "left" | "right") {
+      let offset = 0;
+
+      if (
+        direction === "right" &&
+        this.currentProject < this.projects.length - 1
+      ) {
+        this.currentProject += 1;
+        offset = 69;
+      } else if (direction === "left" && this.currentProject > 0) {
+        this.currentProject -= 1;
+        offset = -69;
+      }
+
+      if (offset !== 0) {
+        gsap.fromTo(
+          this,
+          { offsetX: offset },
+          {
+            offsetX: 0,
+            duration: 0.1,
+            ease: "none",
+          },
+        );
+      }
+    },
+
+    scrollToProject(index: number) {
+      if (index === this.currentProject) return;
+
+      const offset = (index - this.currentProject) * 69;
+      this.currentProject = index;
+
+      gsap.fromTo(
+        this,
+        { offsetX: offset },
+        {
+          offsetX: 0,
+          duration: 0.1,
+          ease: "none",
+        },
+      );
+    },
   },
 });