Fix mobile menu pointer events

README.md

@@ -1,36 +1,40 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Portfolio Website v2
 
-## Getting Started
+## Setup
 
-First, run the development server:
+### Domain Records
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+- Create one A record
+
+### Reverse Proxy
+
+- It doesn't matter what reverse proxy you use (Nginx, Apache, Traefik, Caddy, etc)
+- Point the record to the web port (default: 3000)
+
+### [Docker Compose](./docker-compose.yml)
+
+```yaml
+services:
+  portfolio:
+    container_name: portfolio
+    image: git.altaiar.dev/ahmed/portfolio-2:latest
+    network_mode: bridge
+    restart: unless-stopped
+    volumes:
+      - config:/app/public/config
+      - images:/app/public/images
+    ports:
+      - 3000:3000
+
+volumes:
+  config: # Place config.json and resume.pdf here
+  images: # Place images here
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+(Optional) Replace volumes with bind mounts according to your setup
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Configuration
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- The only required field is `name`, a two string array for first and last
+- See [instrumentation.ts](./src/instrumentation.ts#L18-L89) or [config.d.ts](./src/types/config.d.ts) for possible values
+- Validation is performed on container start, and will exit if anything is invalid

docker-compose.yml

@@ -0,0 +1,15 @@
+services:
+  portfolio:
+    container_name: portfolio
+    image: git.altaiar.dev/ahmed/portfolio-2:latest
+    network_mode: bridge
+    restart: unless-stopped
+    volumes:
+      - config:/app/public/config
+      - images:/app/public/images
+    ports:
+      - 3000:3000
+
+volumes:
+  config: # Place config.json and resume.pdf here
+  images: # Place images here

package.json

@@ -19,6 +19,7 @@
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "awesome-ajv-errors": "^5.1.0",
+    "lodash": "^4.17.21",
     "next": "15.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -28,6 +29,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@types/lodash": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

src/components/scene/Buttons.tsx

@@ -106,9 +106,6 @@ export const Buttons = ({
         : 0,
   });
 
-  const printerMenuSpring = useThreeSpring<MeshStandardMaterial>({
-    opacity: currentView === View.PrinterView ? 1 : 0,
-  });
   const desktopViewSpring = useThreeSpring<BufferGeometry>({
     scale: hovered === View.DesktopView ? 1.25 : 1,
   });
@@ -398,45 +395,6 @@ export const Buttons = ({
           />
         </animated.mesh>
       </group>
-      {/* Printer Menu */}
-      <group>
-        <Billboard position={[-3.25, 6.65, -2.75]}>
-          <AnimatedText
-            maxWidth={4.5}
-            font="/assets/inter.ttf"
-            fontSize={0.25}
-            outlineWidth={1 / 60}
-            fillOpacity={printerMenuSpring.opacity}
-            outlineOpacity={printerMenuSpring.opacity}
-          >
-            CAD and 3D printing
-          </AnimatedText>
-        </Billboard>
-        <Billboard position={[-2.75, 5.25, -2.25]}>
-          <AnimatedText
-            maxWidth={3}
-            textAlign="center"
-            font="/assets/inter.ttf"
-            fontSize={0.25}
-            outlineWidth={1 / 60}
-            fillOpacity={printerMenuSpring.opacity}
-            outlineOpacity={printerMenuSpring.opacity}
-          >
-            Building with electronics
-          </AnimatedText>
-        </Billboard>
-        <Billboard position={[-5.5, 3.175, -3]}>
-          <AnimatedText
-            font="/assets/inter.ttf"
-            fontSize={0.25}
-            outlineWidth={1 / 60}
-            fillOpacity={printerMenuSpring.opacity}
-            outlineOpacity={printerMenuSpring.opacity}
-          >
-            Gaming
-          </AnimatedText>
-        </Billboard>
-      </group>
     </>
   );
 };

src/components/scene/Scene.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { SpotLight } from "three";
+import { MeshStandardMaterial, SpotLight } from "three";
 import {
   useGLTF,
   PerspectiveCamera,
@@ -8,6 +8,8 @@ import {
   Text,
   Html,
   type PerspectiveCameraProps,
+  PerformanceMonitor,
+  Billboard,
 } from "@react-three/drei";
 import {
   animated as threeAnimated,
@@ -25,12 +27,12 @@ import {
   Suspense,
   useCallback,
   type JSX,
-  type Dispatch,
-  type SetStateAction,
 } from "react";
+import round from "lodash/round";
 import Stack from "@/util/stack";
-import { Canvas, useFrame } from "@react-three/fiber";
-import { mdiArrowLeftBold } from "@mdi/js";
+import isMobile from "@/util/isMobile";
+import { Canvas } from "@react-three/fiber";
+import { mdiArrowLeftBold, mdiOpenInNew } from "@mdi/js";
 import { Icon } from "@mdi/react";
 import { PDF } from "../util/PDF";
 import { CellphoneUI } from "../ui/CellphoneUI";
@@ -45,41 +47,23 @@ import { isWebGL2Available } from "@react-three/drei";
 import { useWindowSize } from "../hooks/useWindowSize";
 import { Info } from "../util/Info";
 import { Loader } from "../ui/Loader";
+import { MobileMenu } from "../ui/MobileMenu";
 
+const AnimatedText = threeAnimated(Text);
 const AnimatedCam = threeAnimated(PerspectiveCamera);
 const AnimatedButton = webAnimated.button as React.ComponentType<
   React.ButtonHTMLAttributes<HTMLButtonElement> & { children?: React.ReactNode }
 >;
 
-function FpsUpdater({
-  onUpdate,
-}: {
-  onUpdate: Dispatch<SetStateAction<number>>;
-}) {
-  const fpsRef = useRef([0]);
-  useFrame((_, delta) => fpsRef.current.push(1 / delta));
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      const avg =
-        fpsRef.current.reduce((a, b) => a + b, 0) / fpsRef.current.length;
-      fpsRef.current = [];
-      onUpdate(avg);
-    }, 1000);
-
-    return () => clearInterval(id);
-  }, [onUpdate]);
-
-  return null;
-}
-
 export function Scene(props: JSX.IntrinsicElements["group"]) {
   const { nodes, materials } = useGLTF("/scene.glb") as unknown as GLTFResult;
   const { width, height } = useWindowSize();
   const config = useConfig();
+  const mobile = isMobile();
 
   // States
   const [fps, setFps] = useState(0);
+  const [dpr, setDpr] = useState(2);
   const [pendingView, setPendingView] = useState<View | null>(null);
   const [backHovered, setBackHovered] = useState(false);
   const [backClicked, setBackClicked] = useState(false);
@@ -134,10 +118,13 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
       precision: 0.0001,
       friction: 80,
       mass: 10,
-      clamp: true,
     },
   });
 
+  const printerMenuSpring = useThreeSpring<MeshStandardMaterial>({
+    opacity: currentView === View.PrinterView ? 1 : 0,
+  });
+
   const { backScale, backOpacity } = useWebSpring({
     backScale: backHovered ? 1.25 : 1,
     backOpacity: menuTraversal.size() > 1 ? 1 : 0,
@@ -147,229 +134,304 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
   // Scene
   return (
     <main className="h-screen w-screen overscroll-none touch-none bg-[#1b1b1b]">
-      <Loader />
       {isWebGL2Available() ? (
         width >= 1.5 * height ? (
           <>
+            <Loader />
             <div className="pointer-events-none fixed z-[999999999] size-full">
-              <AnimatedButton
-                style={{
-                  transform: backScale.to(
-                    (s) => `scale(${s})`
-                  ) as unknown as string,
-                  opacity: backOpacity as unknown as number,
-                  pointerEvents: menuTraversal.size() > 1 ? "auto" : "none",
-                  cursor: backHovered ? "pointer" : "auto",
-                }}
-                className="m-4"
-                onMouseEnter={() => setBackHovered(true)}
-                onMouseLeave={() => setBackHovered(false)}
-                onClick={() => {
-                  setBackClicked(true);
-                  goPreviousView();
-                }}
-              >
-                <Icon
-                  path={mdiArrowLeftBold}
-                  size={2}
-                  color="white"
-                  className="stroke-[0.75] stroke-black"
+              {mobile ? (
+                <MobileMenu
+                  menuTraversal={menuTraversal}
+                  setMenuTraversal={setMenuTraversal}
+                  pendingView={pendingView}
+                  setPendingView={setPendingView}
+                  goPreviousView={goPreviousView}
+                  currentView={currentView}
                 />
-              </AnimatedButton>
+              ) : (
+                <AnimatedButton
+                  style={{
+                    transform: backScale.to(
+                      (s) => `scale(${s})`
+                    ) as unknown as string,
+                    opacity: backOpacity as unknown as number,
+                    pointerEvents: menuTraversal.size() > 1 ? "auto" : "none",
+                    cursor: backHovered ? "pointer" : "auto",
+                  }}
+                  className="m-2"
+                  onMouseEnter={() => setBackHovered(true)}
+                  onMouseLeave={() => setBackHovered(false)}
+                  onClick={() => {
+                    setBackClicked(true);
+                    goPreviousView();
+                  }}
+                >
+                  <Icon
+                    path={mdiArrowLeftBold}
+                    size={2}
+                    color="white"
+                    className="stroke-[0.75] stroke-black"
+                  />
+                </AnimatedButton>
+              )}
               <div className="min-w-12 text-white bottom-0 right-0 absolute m-3 p-1 text-xs text-right text-stroke-2 text-stroke-black paint-sfm">
                 <Info />
-                {fps > 0 && <>{fps.toFixed(0)} fps</>}
+                {fps > 0 && (
+                  <p>
+                    {fps.toFixed(0)} fps | {dpr}x
+                  </p>
+                )}
+                {config.fallbackUrl && (
+                  <div className="flex gap-1 justify-end items-center">
+                    <Icon path={mdiOpenInNew} className="h-3" />
+                    <a
+                      href={config.fallbackUrl}
+                      target="_blank"
+                      className="hover:underline pointer-events-auto"
+                    >
+                      fallback
+                    </a>
+                  </div>
+                )}
               </div>
             </div>
             <Canvas
               shadows
+              dpr={dpr}
               gl={{ localClippingEnabled: true, antialias: true, alpha: true }}
             >
               <Suspense fallback={null}>
                 <group {...props} dispose={null}>
-                  <FpsUpdater onUpdate={setFps} />
-                  <Environment preset="apartment" />
-                  <AnimatedCam makeDefault {...cameraSpring} />
-                  <Buttons
-                    menuTraversal={menuTraversal}
-                    setMenuTraversal={setMenuTraversal}
-                    pendingView={pendingView}
-                    setPendingView={setPendingView}
-                    goPreviousView={goPreviousView}
-                    currentView={currentView}
-                  />
-                  <group>
-                    <primitive
-                      object={spotlight}
-                      position={[-1.915, 20, 1.0925]}
-                    />
-                    <primitive
-                      object={spotlight.target}
-                      position={[-1.915, 0, 1.0925]}
-                    />
-                  </group>
-                  <group
-                    position={[2.50415, 0.12973, 3.47808]}
-                    rotation={[0, -Math.PI / 2, 0]}
-                    scale={0.01}
+                  <PerformanceMonitor
+                    ms={100}
+                    onChange={(api) => {
+                      setFps(api.fps);
+                      setDpr(round(1.5 * api.factor + 0.5, 1));
+                    }}
                   >
-                    <mesh
-                      castShadow
-                      receiveShadow
-                      geometry={nodes.Monitor.geometry}
-                      material={materials.PlasticMaterial}
-                      position={[-175, 415.25, -160]}
-                    >
-                      <Html
-                        transform
-                        receiveShadow
-                        castShadow
-                        pointerEvents={
-                          currentView === View.PCView ? "auto" : "none"
-                        }
-                        occlude="blending"
-                        className="w-[1452px] h-[810px] bg-[#0e1838]"
-                        scale={10}
-                        position={[0, 170, 0.25]}
-                        raycast={
-                          currentView === View.DesktopView
-                            ? () => null
-                            : undefined
-                        }
-                        distanceFactor={10}
-                      >
-                        <div className="size-full">
-                          <PCUI />
-                        </div>
-                      </Html>
-                    </mesh>
-                  </group>
-                  <group
-                    position={[4.105, 4.2825, -2.085]}
-                    rotation={[0, -Math.PI / 2, 0]}
-                  >
-                    <mesh
-                      castShadow
-                      receiveShadow
-                      geometry={nodes.SecondaryMonitorMesh.geometry}
-                      material={materials.SecondaryMonitorMaterial}
+                    <Environment preset="apartment" />
+                    <AnimatedCam makeDefault {...cameraSpring} />
+                    {!mobile && (
+                      <Buttons
+                        menuTraversal={menuTraversal}
+                        setMenuTraversal={setMenuTraversal}
+                        pendingView={pendingView}
+                        setPendingView={setPendingView}
+                        goPreviousView={goPreviousView}
+                        currentView={currentView}
+                      />
+                    )}
+                    <group>
+                      <primitive
+                        object={spotlight}
+                        position={[-1.915, 20, 1.0925]}
+                      />
+                      <primitive
+                        object={spotlight.target}
+                        position={[-1.915, 0, 1.0925]}
+                      />
+                    </group>
+                    <group
+                      position={[2.50415, 0.12973, 3.47808]}
+                      rotation={[0, -Math.PI / 2, 0]}
                       scale={0.01}
                     >
-                      <Credits currentView={currentView} />
-                    </mesh>
-                  </group>
-                  <group
-                    position={[3.81024, 3.85444, 6.13972]}
-                    rotation={[-Math.PI, -0.44331, -Math.PI]}
-                    scale={0.035}
-                  >
-                    <mesh
-                      castShadow
-                      receiveShadow
-                      geometry={nodes.Paper3.geometry}
-                      material={materials.PaperMaterial}
-                    >
-                      <Html
-                        transform
-                        receiveShadow
+                      <mesh
                         castShadow
-                        pointerEvents={
-                          currentView === View.ResumeView ? "auto" : "none"
-                        }
-                        occlude="blending"
-                        className="w-[800px] h-[1074px] bg-white"
-                        scale={15}
-                        position={[28.7765, 12.431875, 3.725]}
-                        rotation={[-Math.PI / 2, 0, (1 * Math.PI) / 9]}
-                        raycast={
-                          currentView === View.ResumeView
-                            ? () => null
-                            : undefined
-                        }
-                        distanceFactor={1}
-                      >
-                        <PDF url="/config/resume.pdf" />
-                      </Html>
-                    </mesh>
-                  </group>
-                  <group
-                    position={[2.58559, 4.69855, 3.29056]}
-                    rotation={[-Math.PI, -0.43633, -Math.PI]}
-                    scale={0.02}
-                  >
-                    <mesh
-                      castShadow
-                      receiveShadow
-                      geometry={nodes.CellphoneMesh.geometry}
-                      material={materials.CellphoneMaterial}
-                      position={[-102.64982, -21.45192, 247.01788]}
-                    >
-                      <Html
-                        transform
                         receiveShadow
-                        castShadow
-                        pointerEvents={
-                          currentView === View.CellphoneView ? "auto" : "none"
-                        }
-                        occlude="blending"
-                        className="w-[1008px] h-[1614px] bg-blue-100"
-                        position={[0, 2.8, 0]}
-                        rotation={[-Math.PI / 2, 0, Math.PI / 2]}
-                        raycast={
-                          currentView === View.CellphoneView
-                            ? () => null
-                            : undefined
-                        }
-                        style={{
-                          backgroundImage: "url('/assets/cellphone-bg.webp')",
-                          backgroundColor: "black",
-                        }}
-                        distanceFactor={10}
+                        geometry={nodes.Monitor.geometry}
+                        material={materials.PlasticMaterial}
+                        position={[-175, 415.25, -160]}
                       >
-                        <CellphoneUI />
-                      </Html>
-                    </mesh>
-                  </group>
-                  <Text
-                    position={[-2.415, 12.5, -6]}
-                    font="/assets/inter-bold.ttf"
-                    color="black"
-                    fontSize={3}
-                  >
-                    {config.name[0]}
-                  </Text>
-                  <Text
-                    position={[5.185, 12.5, 1.592]}
-                    font="/assets/inter-bold.ttf"
-                    rotation={[0, -Math.PI / 2, 0]}
-                    color="black"
-                    fontSize={3}
-                  >
-                    {config.name[1]}
-                  </Text>
-                  {config.status && (
+                        <Html
+                          transform
+                          receiveShadow
+                          castShadow
+                          pointerEvents={
+                            currentView === View.PCView ? "auto" : "none"
+                          }
+                          occlude="blending"
+                          className="w-[1452px] h-[810px] bg-[#0e1838]"
+                          scale={10}
+                          position={[0, 170, 0.5]}
+                          raycast={
+                            currentView === View.DesktopView
+                              ? () => null
+                              : undefined
+                          }
+                          distanceFactor={10}
+                        >
+                          <div className="size-full">
+                            <PCUI />
+                          </div>
+                        </Html>
+                      </mesh>
+                    </group>
+                    <group
+                      position={[4.105, 4.2825, -2.085]}
+                      rotation={[0, -Math.PI / 2, 0]}
+                    >
+                      <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.SecondaryMonitorMesh.geometry}
+                        material={materials.SecondaryMonitorMaterial}
+                        scale={0.01}
+                      >
+                        <Credits currentView={currentView} />
+                      </mesh>
+                    </group>
+                    <group
+                      position={[3.81024, 3.85444, 6.13972]}
+                      rotation={[-Math.PI, -0.44331, -Math.PI]}
+                      scale={0.035}
+                    >
+                      <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Paper3.geometry}
+                        material={materials.PaperMaterial}
+                      >
+                        <Html
+                          transform
+                          receiveShadow
+                          castShadow
+                          pointerEvents={
+                            currentView === View.ResumeView ? "auto" : "none"
+                          }
+                          occlude="blending"
+                          className="w-[800px] h-[1074px] bg-white"
+                          scale={15}
+                          position={[28.7765, 12.431875, 3.725]}
+                          rotation={[-Math.PI / 2, 0, (1 * Math.PI) / 9]}
+                          raycast={
+                            currentView === View.ResumeView
+                              ? () => null
+                              : undefined
+                          }
+                          distanceFactor={1}
+                        >
+                          <PDF url="/config/resume.pdf" />
+                        </Html>
+                      </mesh>
+                    </group>
+                    <group
+                      position={[2.58559, 4.69855, 3.29056]}
+                      rotation={[-Math.PI, -0.43633, -Math.PI]}
+                      scale={0.02}
+                    >
+                      <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.CellphoneMesh.geometry}
+                        material={materials.CellphoneMaterial}
+                        position={[-102.64982, -21.45192, 247.01788]}
+                      >
+                        <Html
+                          transform
+                          receiveShadow
+                          castShadow
+                          pointerEvents={
+                            currentView === View.CellphoneView ? "auto" : "none"
+                          }
+                          occlude="blending"
+                          className="w-[1008px] h-[1614px] bg-blue-100"
+                          position={[0, 2.85, 0]}
+                          rotation={[-Math.PI / 2, 0, Math.PI / 2]}
+                          raycast={
+                            currentView === View.CellphoneView
+                              ? () => null
+                              : undefined
+                          }
+                          style={{
+                            backgroundImage: "url('/assets/cellphone-bg.webp')",
+                            backgroundColor: "black",
+                          }}
+                          distanceFactor={10}
+                        >
+                          <CellphoneUI />
+                        </Html>
+                      </mesh>
+                    </group>
                     <Text
-                      position={[5.185, 10, 1.592]}
-                      font="/assets/inter.ttf"
+                      position={[-2.415, 12.5, -6]}
+                      font="/assets/clashdisplay.ttf"
+                      color="black"
+                      fontSize={3}
+                    >
+                      {config.name[0]}
+                    </Text>
+                    <Text
+                      position={[5.185, 12.5, 1.592]}
+                      font="/assets/clashdisplay.ttf"
                       rotation={[0, -Math.PI / 2, 0]}
                       color="black"
-                      fontSize={0.75}
+                      fontSize={3}
                     >
-                      {config.status}
+                      {config.name[1]}
                     </Text>
-                  )}
-                  {config.location && (
-                    <Text
-                      position={[5.185, 8.5, 1.592]}
-                      font="/assets/inter.ttf"
-                      rotation={[0, -Math.PI / 2, 0]}
-                      color="black"
-                      fontSize={0.75}
-                    >
-                      📍&#8201;{config.location}
-                    </Text>
-                  )}
-                  <StaticMeshes nodes={nodes} materials={materials} />
+                    {config.status && (
+                      <Text
+                        position={[5.185, 10, 1.592]}
+                        font="/assets/inter.ttf"
+                        rotation={[0, -Math.PI / 2, 0]}
+                        color="black"
+                        fontSize={0.75}
+                      >
+                        {config.status}
+                      </Text>
+                    )}
+                    {config.location && (
+                      <Text
+                        position={[5.185, 8.5, 1.592]}
+                        font="/assets/inter.ttf"
+                        rotation={[0, -Math.PI / 2, 0]}
+                        color="black"
+                        fontSize={0.75}
+                      >
+                        📍&#8201;{config.location}
+                      </Text>
+                    )}
+                    <StaticMeshes nodes={nodes} materials={materials} />
+                    <group>
+                      <Billboard position={[-3.25, 6.65, -2.75]}>
+                        <AnimatedText
+                          maxWidth={4.5}
+                          font="/assets/inter.ttf"
+                          fontSize={0.25}
+                          outlineWidth={1 / 60}
+                          fillOpacity={printerMenuSpring.opacity}
+                          outlineOpacity={printerMenuSpring.opacity}
+                        >
+                          CAD and 3D printing
+                        </AnimatedText>
+                      </Billboard>
+                      <Billboard position={[-2.75, 5.25, -2.25]}>
+                        <AnimatedText
+                          maxWidth={3}
+                          textAlign="center"
+                          font="/assets/inter.ttf"
+                          fontSize={0.25}
+                          outlineWidth={1 / 60}
+                          fillOpacity={printerMenuSpring.opacity}
+                          outlineOpacity={printerMenuSpring.opacity}
+                        >
+                          Building with electronics
+                        </AnimatedText>
+                      </Billboard>
+                      <Billboard position={[-5.5, 3.175, -3]}>
+                        <AnimatedText
+                          font="/assets/inter.ttf"
+                          fontSize={0.25}
+                          outlineWidth={1 / 60}
+                          fillOpacity={printerMenuSpring.opacity}
+                          outlineOpacity={printerMenuSpring.opacity}
+                        >
+                          Gaming
+                        </AnimatedText>
+                      </Billboard>
+                    </group>
+                  </PerformanceMonitor>
                 </group>
               </Suspense>
             </Canvas>
@@ -380,9 +442,9 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
               config.fallbackUrl ? "pt-12" : ""
             } flex flex-col space-y-6 w-screen h-screen text-center justify-center items-center text-white text-4xl`}
           >
-            <p>Screen too small, please rotate</p>
+            <p className="mx-8">Screen too small, please rotate</p>
             {config.fallbackUrl && (
-              <p className="text-base">
+              <p className="text-base mx-8">
                 or visit the{" "}
                 <a
                   href={config.fallbackUrl}

src/components/ui/Credits.tsx

@@ -15,7 +15,7 @@ export const Credits = ({ currentView }: CreditsProps) => {
       occlude="blending"
       className="w-[1452px] h-[810px] bg-neutral-400"
       scale={10}
-      position={[0, 170, 0.25]}
+      position={[0, 170, 0.5]}
       raycast={currentView === View.CreditsView ? () => null : undefined}
       distanceFactor={10}
     >
@@ -60,14 +60,6 @@ export const Credits = ({ currentView }: CreditsProps) => {
           </a>
         </li>
         <li className="mb-4 text-black">
-          <a
-            className="hover:underline text-blue-800"
-            href="https://poly.pizza/m/YxfMuchpUF"
-            target="_blank"
-          >
-            Office Phone
-          </a>
-          {" and "}
           <a
             className="hover:underline text-blue-800"
             href="https://poly.pizza/m/S5sNqsyyOs"

src/components/ui/Loader.tsx

@@ -2,88 +2,89 @@
 
 import { useProgress } from "@react-three/drei";
 import { animated, useSpring, useTransition } from "@react-spring/web";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
 export const Loader = ({ minDuration = 750, fadeMs = 600 }) => {
-  const { progress } = useProgress();
-  const [loadedAt, setLoadedAt] = useState<number | null>(null);
-
-  const maxSeen = useRef(0);
-  if (progress > maxSeen.current) maxSeen.current = progress;
-
-  useEffect(() => {
-    if (maxSeen.current === 100 && loadedAt === null) setLoadedAt(Date.now());
-  }, [loadedAt]);
-
-  const visible =
-    loadedAt === null || Date.now() - loadedAt < minDuration + fadeMs;
-
-  const barSpring = useSpring({
+  const [barDone, setBarDone] = useState(false);
+  const barStyles = useSpring({
     from: { width: "0%" },
     to: { width: "100%" },
     config: { duration: minDuration },
+    onRest: () => setBarDone(true),
   });
 
+  const { progress } = useProgress();
+  const [assetsDone, setAssetsDone] = useState(false);
+  useEffect(() => {
+    if (progress === 100) setAssetsDone(true);
+  }, [progress]);
+
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (barDone && assetsDone) {
+      const id = setTimeout(() => setVisible(false), fadeMs);
+      return () => clearTimeout(id);
+    }
+  }, [barDone, assetsDone, fadeMs]);
+
   const overlay = useTransition(visible, {
     from: { opacity: 1 },
-    enter: { opacity: 1 },
     leave: { opacity: 0 },
-    config: { duration: fadeMs, easing: (t) => Math.pow(t, 2) },
+    config: { duration: fadeMs, easing: (t) => t * t },
   });
 
   return createPortal(
     overlay(
       (styles, show) =>
         show && (
-          // @ts-expect-error children not typed bug
-          <animated.div
-            style={{
-              ...styles,
-              position: "fixed",
-              inset: 0,
-              background: "#1b1b1b",
-              zIndex: 999999999,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: "1.5rem",
-              fontSize: "2.25rem",
-              color: "white",
-              pointerEvents: "none",
-              paddingTop: "2.5rem",
-            }}
-          >
-            <p>Loading…</p>
-
-            <div
+          <div>
+            {/* @ts-expect-error children not typed bug */}
+            <animated.div
               style={{
-                width: 192,
-                height: 16,
-                background: "#4b4b4b",
-                borderRadius: 8,
-                overflow: "hidden",
+                ...styles,
+                position: "fixed",
+                inset: 0,
+                background: "#1b1b1b",
+                zIndex: 1e9,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "1.5rem",
+                fontSize: "2.25rem",
+                color: "#fff",
+                pointerEvents: "none",
+                paddingTop: "2.5rem",
               }}
             >
-              {/* @ts-expect-error children not typed bug */}
-              <animated.div
+              <p>Loading…</p>
+
+              <div
                 style={{
-                  ...barSpring,
-                  height: "100%",
-                  background: "#ffffff",
+                  width: 192,
+                  height: 16,
+                  background: "#4b4b4b",
+                  borderRadius: 8,
+                  overflow: "hidden",
                 }}
               >
                 {/* @ts-expect-error children not typed bug */}
-                <animated.div className="text-[#1b1b1b] text-xs justify-center flex items-center h-full">
-                  {barSpring.width.to((w) => {
-                    const p = parseInt(w) || 0;
-                    return `${p > 5 ? p : ""}`;
-                  })}
+                <animated.div
+                  style={{ ...barStyles, height: "100%", background: "#fff" }}
+                >
+                  {/* @ts-expect-error children not typed bug */}
+                  <animated.div className="text-[#1b1b1b] text-xs flex h-full items-center justify-center">
+                    {barStyles.width.to((w) => {
+                      const p = parseInt(w) || 0;
+                      return p > 5 ? p : "";
+                    })}
+                  </animated.div>
                 </animated.div>
-              </animated.div>
-            </div>
-          </animated.div>
+              </div>
+            </animated.div>
+          </div>
         )
     ),
     document.body

src/components/ui/MobileMenu.tsx

@@ -0,0 +1,113 @@
+import type Stack from "@/util/stack";
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
+import { View, viewToHash } from "../scene/consts";
+import { animated, useSpring } from "@react-spring/web";
+import Icon from "@mdi/react";
+import { mdiMenu } from "@mdi/js";
+
+interface MobileMenuProps {
+  menuTraversal: Stack<View>;
+  setMenuTraversal: Dispatch<SetStateAction<Stack<View>>>;
+  pendingView: View | null;
+  setPendingView: Dispatch<SetStateAction<View | null>>;
+  goPreviousView(): void;
+  currentView: View;
+}
+
+const AnimatedButton = animated.button as React.ComponentType<
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { children?: React.ReactNode }
+>;
+
+export const MobileMenu = ({
+  menuTraversal,
+  setMenuTraversal,
+  pendingView,
+  setPendingView,
+  goPreviousView,
+  currentView,
+}: MobileMenuProps) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const goToView = useCallback(
+    (view: View) => {
+      setMenuTraversal((prev) => {
+        const next = prev.clone();
+        next.push(view);
+        return next;
+      });
+      setPendingView(view);
+    },
+    [setMenuTraversal, setPendingView]
+  );
+
+  useEffect(() => {
+    const onPop = () => {
+      goPreviousView();
+    };
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, [goPreviousView]);
+
+  useEffect(() => {
+    if (pendingView === null) return;
+    window.history.pushState(
+      { depth: menuTraversal.size() },
+      "",
+      viewToHash[pendingView] ? `#${viewToHash[pendingView]}` : "/"
+    );
+    setPendingView(null);
+  }, [menuTraversal, pendingView, setPendingView]);
+
+  const slideProps = useSpring({
+    x: menuOpen ? 0 : -128,
+    config: { tension: 200, friction: 20 },
+  });
+
+  return (
+    <div className="w-min">
+      <AnimatedButton
+        className="m-2 pointer-events-auto"
+        onClick={() => setMenuOpen((prev) => !prev)}
+      >
+        <Icon
+          path={mdiMenu}
+          size={1.5}
+          color="white"
+          className="stroke-[0.75] stroke-black"
+        />
+      </AnimatedButton>
+      {/* @ts-expect-error children not typed bug */}
+      <animated.div
+        style={{
+          transform: slideProps.x.to((x) => `translateX(${x}%)`),
+        }}
+        className="text-white flex flex-col w-min gap-2 text-stroke-2 text-stroke-black paint-sfm ml-2"
+      >
+        {[
+          { label: "Home", view: View.MainView },
+          { label: "Projects", view: View.PCView },
+          { label: "Socials", view: View.CellphoneView },
+          { label: "Resume", view: View.ResumeView },
+          { label: "Hobbies", view: View.PrinterView },
+          { label: "Credits", view: View.CreditsView },
+        ].map(({ label, view }) => (
+          <button
+            key={view}
+            className={`${
+              currentView === view ? "bg-neutral-700/50" : "bg-neutral-500/50"
+            } px-2 py-1 transition-all duration-300 hover:bg-neutral-700/50 hover:scale-110 rounded pointer-events-auto`}
+            onClick={() => goToView(view)}
+          >
+            {label}
+          </button>
+        ))}
+      </animated.div>
+    </div>
+  );
+};

src/types/scene.d.ts

@@ -26,10 +26,6 @@ export type GLTFResult = GLTF & {
     PenBody: Mesh;
     PenTip: Mesh;
     CellphoneMesh: Mesh;
-    Top: Mesh;
-    OfficePhoneBody: Mesh;
-    Screen: Mesh;
-    Buttons: Mesh;
     Handle: Mesh;
     HeadphonesBody: Mesh;
     HeadphonesAccent: Mesh;
@@ -74,10 +70,6 @@ export type GLTFResult = GLTF & {
     PenBodyMaterial: MeshStandardMaterial;
     TipMaterial: MeshStandardMaterial;
     CellphoneMaterial: MeshStandardMaterial;
-    TopMaterial: MeshStandardMaterial;
-    OfficePhoneBodyMaterial: MeshStandardMaterial;
-    ScreenMaterial: MeshStandardMaterial;
-    HandleAndButtonsMaterial: MeshStandardMaterial;
     HeadphonesBodyMaterial: MeshStandardMaterial;
     HeadphonesAccentMaterial: MeshStandardMaterial;
     CoverMaterial: MeshStandardMaterial;

src/util/isMobile.ts

@@ -0,0 +1,5 @@
+export default function isMobile(): boolean {
+  return typeof window === "undefined"
+    ? false
+    : window.matchMedia?.("(pointer: coarse)").matches;
+}

yarn.lock

@@ -1021,6 +1021,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4":
+  version: 4.17.16
+  resolution: "@types/lodash@npm:4.17.16"
+  checksum: 10c0/cf017901b8ab1d7aabc86d5189d9288f4f99f19a75caf020c0e2c77b8d4cead4db0d0b842d009b029339f92399f49f34377dd7c2721053388f251778b4c23534
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^20":
   version: 20.17.30
   resolution: "@types/node@npm:20.17.30"
@@ -3868,6 +3875,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash@npm:4.17.21"
+  checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
+  languageName: node
+  linkType: hard
+
 "loose-envify@npm:^1.0.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
@@ -4535,6 +4549,7 @@ __metadata:
     "@react-three/drei": "npm:^10.0.7"
     "@react-three/fiber": "npm:^9.1.2"
     "@tailwindcss/postcss": "npm:^4"
+    "@types/lodash": "npm:^4"
     "@types/node": "npm:^20"
     "@types/react": "npm:^19"
     "@types/react-dom": "npm:^19"
@@ -4544,6 +4559,7 @@ __metadata:
     awesome-ajv-errors: "npm:^5.1.0"
     eslint: "npm:^9"
     eslint-config-next: "npm:15.3.0"
+    lodash: "npm:^4.17.21"
     next: "npm:15.3.0"
     react: "npm:^19.1.0"
     react-dom: "npm:^19.1.0"