feat(gallery): transition to and from the nds

app/pages/gallery.vue

@@ -133,6 +133,8 @@ const animateIntro = async () => {
   );
 };
 
+const galleryStore = useGalleryStore();
+
 const animateOutro = async () => {
   isAnimating.value = true;
 
@@ -156,6 +158,7 @@ const animateOutro = async () => {
   typeText(descriptionText, DESCRIPTION, DESCRIPTION_DURATION, true, {
     onComplete: async () => {
       await sleep(ANIMATION_SLEEP * 1000);
+      galleryStore.shouldAnimateOutro = true;
       router.push("/");
     },
   });

app/pages/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import * as THREE from "three";
 import type { Screen as NDSScreen } from "#components";
 
-// TODO: keys doesn't work anymore if 3D modea is disabled
-const ENABLE_3D = false;
+const ENABLE_3D = true;
 
 type ScreenInstance = InstanceType<typeof NDSScreen>;
 
@@ -59,7 +59,7 @@ useKeyUp((key) => {
       <TresPerspectiveCamera
         :args="[45, 1, 0.001, 1000]"
         :position="[0, 10, 12]"
-        :rotation="[-Math.PI / 4.7, 0, 0]"
+        :rotation="[THREE.MathUtils.degToRad(-38.3), 0, 0]"
       />
 
       <TresAmbientLight />
@@ -79,6 +79,7 @@ useKeyUp((key) => {
           <ContactTopScreen v-else-if="app.screen === 'contact'" />
           <ProjectsTopScreen v-else-if="app.screen === 'projects'" />
           <SettingsTopScreen v-else-if="app.screen === 'settings'" />
+          <GalleryTopScreen v-else-if="app.screen === 'gallery'" />
         </Screen>
       </div>
       <div>
@@ -87,6 +88,7 @@ useKeyUp((key) => {
           <ContactBottomScreen v-else-if="app.screen === 'contact'" />
           <ProjectsBottomScreen v-else-if="app.screen === 'projects'" />
           <SettingsBottomScreen v-else-if="app.screen === 'settings'" />
+          <GalleryBottomScreen v-else-if="app.screen === 'gallery'" />
         </Screen>
       </div>
     </div>