feat(projects): scrolling projects

app/components/Home/BottomScreen/Buttons/Buttons.vue

@@ -6,44 +6,40 @@ import Selector from "~/components/Common/ButtonSelector.vue";
 
 const store = useHomeStore();
 
-const BUTTONS_CONFIG = {
-  game: [31, 23, 193, 49],
-  contact: [31, 71, 97, 49],
-  downloadPlay: [127, 71, 97, 49],
-} as const satisfies Record<string, ButtonConfig>;
-
-type ButtonType = keyof typeof BUTTONS_CONFIG;
-
 const { selectedButton, selectorPosition } = useButtonNavigation({
-  buttons: BUTTONS_CONFIG,
-  initialButton: "game",
+  buttons: {
+    projects: [31, 23, 193, 49],
+    contact: [31, 71, 97, 49],
+    downloadPlay: [127, 71, 97, 49],
+  },
+  initialButton: "projects",
   onButtonClick: (button) => {
     store.animateOutro(`/${button}`);
   },
   navigation: {
-    game: {
+    projects: {
       down: "last",
       left: "contact",
       right: "downloadPlay",
       horizontalMode: "preview",
     },
     contact: {
-      up: "game",
+      up: "projects",
       right: "downloadPlay",
     },
     downloadPlay: {
-      up: "game",
+      up: "projects",
       left: "contact",
     },
   },
 });
 
-const getButtonOffset = (button: ButtonType) => {
+const getButtonOffset = (button: (typeof selectedButton)["value"]) => {
   if (selectedButton.value === button) return store.outro.buttonOffsetY;
   return 0;
 };
 
-const getOpacity = (button?: ButtonType) => {
+const getOpacity = (button?: (typeof selectedButton)["value"]) => {
   if (store.isIntro) return store.intro.stage1Opacity;
   if (selectedButton.value === button) return 1;
   if (store.isOutro) return store.outro.stage1Opacity;
@@ -54,8 +50,8 @@ const getOpacity = (button?: ButtonType) => {
 <template>
   <GameButton
     :x="33"
-    :y="25 + getButtonOffset('game')"
-    :opacity="getOpacity('game')"
+    :y="25 + getButtonOffset('projects')"
+    :opacity="getOpacity('projects')"
   />
   <DownloadPlayButton
     :x="128"