Fix EACCES on /app/package.json in Docker

.gitea/workflows/ci.yml

@@ -1,28 +1,36 @@
 version: "1"
 name: Publish Docker Image
+
 on:
   push:
     tags:
-      - "v[0-9]+\\.[0-9]+\\.[0-9]+"
+      - "*"
 
 jobs:
   build:
     name: Publish Docker Image
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v3
 
       - name: Login to Registry
-        run: echo "${{ secrets.ACCESS_TOKEN }}" | docker login git.altaiar.dev -u "${{ secrets.USERNAME }}" --password-stdin
+        run: echo "${{ secrets.ACCESS_TOKEN }}" \
+          | docker login git.altaiar.dev -u "${{ secrets.USERNAME }}" --password-stdin
 
       - name: Build & Tag Image
         run: |
-          docker build -t git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} .
-          docker tag git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} git.altaiar.dev/${{ gitea.repository }}:latest
+          docker build \
+            --build-arg APP_VERSION=${{ gitea.ref_name }} \
+            --label org.opencontainers.image.version=${{ gitea.ref_name }} \
+            -t git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} .
+          docker tag \
+            git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} \
+            git.altaiar.dev/${{ gitea.repository }}:latest
 
       - name: Push Images
         run: |

Dockerfile

@@ -1,20 +1,44 @@
-FROM node:lts-alpine AS deps
+FROM node:lts-alpine AS builder
+ARG APP_VERSION=dev
+ENV NEXT_PUBLIC_APP_VERSION=$APP_VERSION
+
 WORKDIR /app
-RUN corepack enable && corepack prepare yarn@4.9.1 --activate
+
+RUN corepack enable
+RUN corepack prepare yarn@4.12.0 --activate
+
 COPY package.json yarn.lock .yarnrc.yml ./
 RUN yarn install --immutable
-FROM node:lts-alpine AS runner
-WORKDIR /app
-RUN corepack enable && corepack prepare yarn@4.9.1 --activate \
- && addgroup -S nodejs -g 1001 \
- && adduser  -S nextjs -u 1001
-COPY --from=deps /app/node_modules ./node_modules
-COPY --from=deps /app/package.json ./package.json
+
 COPY . .
+RUN yarn build
+
+FROM node:lts-alpine AS runner
+ARG APP_VERSION=dev
+ENV NEXT_PUBLIC_APP_VERSION=$APP_VERSION \
+    APP_VERSION=$APP_VERSION \
+    NODE_ENV=production \
+    NEXT_TELEMETRY_DISABLED=1
+LABEL org.opencontainers.image.version=$APP_VERSION
+
+WORKDIR /app
+
+RUN corepack enable
+RUN corepack prepare yarn@4.12.0 --activate
+RUN addgroup -S nodejs -g 1001
+RUN adduser  -S nextjs -u 1001
+
+COPY --from=builder /app/yarn.lock ./yarn.lock
+COPY --from=builder /app/.yarnrc.yml ./.yarnrc.yml
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+RUN mkdir -p /app/.yarn /app/.next/cache/images
 RUN chown -R nextjs:nodejs /app
+
 USER nextjs
-ENV NODE_ENV=production \
-    NEXT_TELEMETRY_DISABLED=1 \
-    PORT=3000
 EXPOSE 3000
-CMD ["sh", "-c", "yarn build && yarn start -p $PORT"]
+
+CMD ["yarn", "start"]

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

next.config.ts

@@ -1,5 +1,9 @@
 import type { NextConfig } from "next";
 
-const nextConfig: NextConfig = {};
+const nextConfig: NextConfig = {
+  env: {
+    NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION || "dev",
+  },
+};
 
 export default nextConfig;

package.json

@@ -9,33 +9,36 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@icons-pack/react-simple-icons": "10.0.0",
+    "@icons-pack/react-simple-icons": "^13.8.0",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
-    "@react-spring/three": "^9.7.5",
-    "@react-spring/web": "^9.7.5",
-    "@react-three/drei": "^10.0.7",
-    "@react-three/fiber": "^9.1.2",
+    "@react-spring/three": "^10.0.3",
+    "@react-spring/web": "^10.0.3",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.4.2",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "awesome-ajv-errors": "^5.1.0",
-    "next": "15.3.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-pdf": "^9.2.1",
-    "three": "^0.175.0"
+    "lodash": "^4.17.21",
+    "next": "^16.0.8",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-pdf": "^10.2.0",
+    "three": "^0.182.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@types/three": "^0",
-    "eslint": "^9",
-    "eslint-config-next": "15.3.0",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "@eslint/eslintrc": "^3.3.3",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/lodash": "^4.17.21",
+    "@types/node": "^24.10.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.181.0",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^16.0.8",
+    "tailwindcss": "^4.1.17",
+    "tailwindcss-text-fill-stroke": "^2.0.0-beta.3",
+    "typescript": "^5.9.3"
   },
-  "packageManager": "yarn@4.9.1+sha512.f95ce356460e05be48d66401c1ae64ef84d163dd689964962c6888a9810865e39097a5e9de748876c2e0bf89b232d583c33982773e9903ae7a76257270986538"
+  "packageManager": "yarn@4.12.0"
 }

public/assets/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" fill="#0a66c2"/></svg>

src/app/globals.css

@@ -1 +1,2 @@
 @import "tailwindcss";
+@plugin "tailwindcss-text-fill-stroke";

src/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import config from "../../public/config/config.json";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -9,10 +8,7 @@ const inter = Inter({
   preload: true,
 });
 
-export const metadata: Metadata = {
-  title: config.name.join(" "),
-  description: "Portfolio",
-};
+export const metadata: Metadata = { title: "Portfolio" };
 
 export default function RootLayout({
   children,

src/components/hooks/useInAppBrowser.ts

@@ -0,0 +1,34 @@
+// https://github.com/f2etw/detect-inapp/blob/master/src/inapp.js
+
+import { findKey } from "lodash";
+
+const BROWSER = {
+  messenger: /\bFB[\w_]+\/(Messenger|MESSENGER)/,
+  facebook: /\bFB[\w_]+\//,
+  twitter: /\bTwitter/i,
+  line: /\bLine\//i,
+  wechat: /\bMicroMessenger\//i,
+  puffin: /\bPuffin/i,
+  miui: /\bMiuiBrowser\//i,
+  instagram: /\bInstagram/i,
+  chrome: /\bCrMo\b|CriOS|Android.*Chrome\/[.0-9]* (Mobile)?/,
+  safari: /Version.*Mobile.*Safari|Safari.*Mobile|MobileSafari/,
+  ie: /IEMobile|MSIEMobile/,
+  firefox:
+    /fennec|firefox.*maemo|(Mobile|Tablet).*Firefox|Firefox.*Mobile|FxiOS/,
+};
+
+export const useInAppBrowser = (): boolean => {
+  const userAgent =
+    navigator.userAgent ||
+    navigator.vendor ||
+    (window as unknown as { opera: string }).opera;
+
+  const rules = ["WebView", "(iPhone|iPod|iPad)(?!.*Safari/)", "Android.*(wv)"];
+  const regex = new RegExp(`(${rules.join("|")})`, "ig");
+
+  return (
+    Boolean(userAgent.match(regex)) &&
+    findKey(BROWSER, (regex) => regex.test(userAgent)) !== undefined
+  );
+};

src/components/scene/Buttons.tsx

@@ -15,7 +15,6 @@ import {
   BackSide,
 } from "three";
 import { Billboard, Text } from "@react-three/drei";
-import { useConfig } from "../hooks/useConfig";
 
 interface ButtonsProps {
   menuTraversal: Stack<View>;
@@ -23,7 +22,6 @@ interface ButtonsProps {
   pendingView: View | null;
   setPendingView: Dispatch<SetStateAction<View | null>>;
   goPreviousView(): void;
-  phoneHovered: boolean;
   currentView: View;
 }
 
@@ -35,11 +33,8 @@ export const Buttons = ({
   pendingView,
   setPendingView,
   goPreviousView,
-  phoneHovered,
   currentView,
 }: ButtonsProps) => {
-  const config = useConfig();
-
   const [hovered, setHovered] = useState<View | null>(null);
 
   const desktopRef = useDisableRaycast(currentView !== View.MainView);
@@ -47,8 +42,6 @@ export const Buttons = ({
   const sideRef = useDisableRaycast(currentView !== View.MainView);
   const cellphoneRef = useDisableRaycast(currentView !== View.DesktopView);
   const pcRef = useDisableRaycast(currentView !== View.DesktopView);
-  const resumeRef = useDisableRaycast(currentView !== View.SideView);
-  const phoneRef = useDisableRaycast(currentView !== View.SideView);
 
   const goToView = useCallback(
     (view: View) => {
@@ -89,12 +82,12 @@ export const Buttons = ({
   }, [menuTraversal, pendingView, setPendingView]);
 
   useEffect(() => {
-    if (hovered || phoneHovered) {
+    if (hovered) {
       document.body.style.cursor = "pointer";
     } else {
       document.body.style.cursor = "auto";
     }
-  }, [hovered, phoneHovered]);
+  }, [hovered]);
 
   const mainMenuSpring = useThreeSpring<MeshStandardMaterial>({
     opacity: currentView === View.MainView ? 1 : 0,
@@ -113,17 +106,11 @@ export const Buttons = ({
         : 0,
   });
 
-  const printerMenuSpring = useThreeSpring<MeshStandardMaterial>({
-    opacity: currentView === View.PrinterView ? 1 : 0,
-  });
-  const sideMenuSpring = useThreeSpring<MeshStandardMaterial>({
-    opacity: currentView === View.SideView ? 1 : 0,
-  });
   const desktopViewSpring = useThreeSpring<BufferGeometry>({
     scale: hovered === View.DesktopView ? 1.25 : 1,
   });
-  const sideViewSpring = useThreeSpring<BufferGeometry>({
-    scale: hovered === View.SideView ? 1.25 : 1,
+  const resumeViewSpring = useThreeSpring<BufferGeometry>({
+    scale: hovered === View.ResumeView ? 1.25 : 1,
   });
   const cellphoneViewSpring = useThreeSpring<BufferGeometry>({
     scale: hovered === View.CellphoneView ? 1.25 : 1,
@@ -134,15 +121,9 @@ export const Buttons = ({
   const creditsViewSpring = useThreeSpring<BufferGeometry>({
     scale: hovered === View.CreditsView ? 1.25 : 1,
   });
-  const resumeViewSpring = useThreeSpring<BufferGeometry>({
-    scale: hovered === View.ResumeView ? 1.25 : 1,
-  });
   const printerViewSpring = useThreeSpring<BufferGeometry>({
     scale: hovered === View.PrinterView ? 1.25 : 1,
   });
-  const phoneViewSpring = useThreeSpring<BufferGeometry>({
-    scale: hovered === View.PhoneView ? 1.25 : 1,
-  });
 
   return (
     <>
@@ -242,16 +223,16 @@ export const Buttons = ({
           position={[2.525, 6, 6.75]}
           onClick={
             currentView === View.MainView
-              ? () => goToView(View.SideView)
+              ? () => goToView(View.ResumeView)
               : undefined
           }
           onPointerOver={
             currentView === View.MainView
-              ? () => setHovered(View.SideView)
+              ? () => setHovered(View.ResumeView)
               : undefined
           }
           onPointerOut={() => setHovered(null)}
-          scale={sideViewSpring.scale}
+          scale={resumeViewSpring.scale}
         >
           <sphereGeometry args={[0.6, 32, 32]} />
           <animated.meshStandardMaterial
@@ -260,7 +241,10 @@ export const Buttons = ({
             opacity={mainMenuSpring.opacity}
           />
         </animated.mesh>
-        <animated.mesh position={[2.525, 6, 6.75]} scale={sideViewSpring.scale}>
+        <animated.mesh
+          position={[2.525, 6, 6.75]}
+          scale={resumeViewSpring.scale}
+        >
           <sphereGeometry args={[0.65, 32, 32]} />
           <animated.meshStandardMaterial
             transparent
@@ -277,7 +261,7 @@ export const Buttons = ({
             fillOpacity={mainMenuSpring.opacity}
             outlineOpacity={mainMenuSpring.opacity}
           >
-            Resume & Contact
+            Resume
           </AnimatedText>
         </Billboard>
       </group>
@@ -411,144 +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>
-      {/* Side Menu */}
-      <group>
-        <animated.mesh
-          ref={resumeRef}
-          position={[2.845, 4.75, 6.454]}
-          onClick={
-            currentView === View.SideView
-              ? () => goToView(View.ResumeView)
-              : undefined
-          }
-          onPointerOver={
-            currentView === View.SideView
-              ? () => setHovered(View.ResumeView)
-              : undefined
-          }
-          onPointerOut={() => setHovered(null)}
-          scale={resumeViewSpring.scale}
-        >
-          <sphereGeometry args={[0.175, 32, 32]} />
-          <animated.meshStandardMaterial
-            transparent
-            color="white"
-            opacity={sideMenuSpring.opacity}
-          />
-        </animated.mesh>
-        <animated.mesh
-          position={[2.845, 4.75, 6.454]}
-          scale={resumeViewSpring.scale}
-        >
-          <sphereGeometry args={[0.175 + 7 / 480, 32, 32]} />
-          <animated.meshStandardMaterial
-            transparent
-            color="black"
-            opacity={sideMenuSpring.opacity}
-            side={BackSide}
-          />
-        </animated.mesh>
-        <Billboard position={[2.845, 5.1875, 6.454]}>
-          <AnimatedText
-            font="/assets/inter.ttf"
-            fontSize={0.21875}
-            outlineWidth={7 / 480}
-            fillOpacity={sideMenuSpring.opacity}
-            outlineOpacity={sideMenuSpring.opacity}
-          >
-            Resume
-          </AnimatedText>
-        </Billboard>
-        {config.phoneNumber && (
-          <>
-            <animated.mesh
-              ref={phoneRef}
-              position={[3.75, 5.125, 7]}
-              onClick={
-                currentView === View.SideView
-                  ? () => goToView(View.PhoneView)
-                  : undefined
-              }
-              onPointerOver={
-                currentView === View.SideView
-                  ? () => setHovered(View.PhoneView)
-                  : undefined
-              }
-              onPointerOut={() => setHovered(null)}
-              scale={phoneViewSpring.scale}
-            >
-              <sphereGeometry args={[0.175, 32, 32]} />
-              <animated.meshStandardMaterial
-                transparent
-                color="white"
-                opacity={sideMenuSpring.opacity}
-              />
-            </animated.mesh>
-            <animated.mesh
-              position={[3.75, 5.125, 7]}
-              scale={phoneViewSpring.scale}
-            >
-              <sphereGeometry args={[0.175 + 7 / 480, 32, 32]} />
-              <animated.meshStandardMaterial
-                transparent
-                color="black"
-                opacity={sideMenuSpring.opacity}
-                side={BackSide}
-              />
-            </animated.mesh>
-            <Billboard position={[3.75, 5.515, 7]}>
-              <AnimatedText
-                font="/assets/inter.ttf"
-                fontSize={0.21875}
-                outlineWidth={7 / 480}
-                fillOpacity={sideMenuSpring.opacity}
-                outlineOpacity={sideMenuSpring.opacity}
-              >
-                Contact
-              </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,7 +8,8 @@ import {
   Text,
   Html,
   type PerspectiveCameraProps,
-  useProgress,
+  PerformanceMonitor,
+  Billboard,
 } from "@react-three/drei";
 import {
   animated as threeAnimated,
@@ -27,9 +28,11 @@ import {
   useCallback,
   type JSX,
 } from "react";
+import round from "lodash/round";
 import Stack from "@/util/stack";
+import isMobile from "@/util/isMobile";
 import { Canvas } from "@react-three/fiber";
-import { mdiArrowLeftBold } from "@mdi/js";
+import { mdiArrowLeftBold, mdiClose, mdiOpenInNew } from "@mdi/js";
 import { Icon } from "@mdi/react";
 import { PDF } from "../util/PDF";
 import { CellphoneUI } from "../ui/CellphoneUI";
@@ -42,7 +45,12 @@ import { Buttons } from "./Buttons";
 import { Credits } from "../ui/Credits";
 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";
+import { useInAppBrowser } from "../hooks/useInAppBrowser";
 
+const AnimatedText = threeAnimated(Text);
 const AnimatedCam = threeAnimated(PerspectiveCamera);
 const AnimatedButton = webAnimated.button as React.ComponentType<
   React.ButtonHTMLAttributes<HTMLButtonElement> & { children?: React.ReactNode }
@@ -50,13 +58,16 @@ const AnimatedButton = webAnimated.button as React.ComponentType<
 
 export function Scene(props: JSX.IntrinsicElements["group"]) {
   const { nodes, materials } = useGLTF("/scene.glb") as unknown as GLTFResult;
-  const { progress } = useProgress();
   const { width, height } = useWindowSize();
   const config = useConfig();
+  const mobile = isMobile();
+  const isInAppBrowser = useInAppBrowser();
 
   // States
+  const [fps, setFps] = useState(0);
+  const [dpr, setDpr] = useState(2);
+  const [warningDismissed, setWarningDismissed] = useState(false);
   const [pendingView, setPendingView] = useState<View | null>(null);
-  const [phoneHovered, setPhoneHovered] = useState(false);
   const [backHovered, setBackHovered] = useState(false);
   const [backClicked, setBackClicked] = useState(false);
   const [menuTraversal, setMenuTraversal] = useState<Stack<View>>(() => {
@@ -110,10 +121,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,
@@ -126,302 +140,315 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
       {isWebGL2Available() ? (
         width >= 1.5 * height ? (
           <>
-            <div className="pointer-events-none fixed z-[999999999]">
-              <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"
+            <Loader />
+            <div className="pointer-events-none fixed z-[999999999] size-full">
+              {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>
+              )}
+              {!warningDismissed && isInAppBrowser ? (
+                <div className="absolute top-0 right-0 bg-amber-500 m-3 p-2 rounded-xl flex gap-2 items-center justify-between">
+                  <p className="text-black text-md">
+                    For the best experience, please open this page in a regular
+                    browser
+                  </p>
+                  <button
+                    className="transition-all duration-300 pointer-events-auto hover:scale-110 hover:bg-amber-600 rounded-lg"
+                    onClick={() => setWarningDismissed(true)}
+                  >
+                    <Icon path={mdiClose} color="black" className="size-6" />
+                  </button>
+                </div>
+              ) : null}
+              <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 && (
+                  <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={
-                  <Html fullscreen>
-                    <div className="pt-10 w-screen h-screen flex flex-col space-y-6 justify-center items-center text-white text-4xl pointer-events-none">
-                      <p>Loading...</p>
-                      <div className="w-48 bg-neutral-700 h-4 rounded-lg">
-                        <div
-                          className="h-full rounded-lg bg-neutral-100"
-                          style={{
-                            width: `${progress.toFixed(0)}%`,
-                          }}
-                        />
-                      </div>
-                    </div>
-                  </Html>
-                }
-              >
+              <Suspense fallback={null}>
                 <group {...props} dispose={null}>
-                  <Environment preset="apartment" />
-                  <AnimatedCam makeDefault {...cameraSpring} />
-                  <Buttons
-                    menuTraversal={menuTraversal}
-                    setMenuTraversal={setMenuTraversal}
-                    pendingView={pendingView}
-                    setPendingView={setPendingView}
-                    goPreviousView={goPreviousView}
-                    phoneHovered={phoneHovered}
-                    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-neutral-400"
-                        scale={10}
-                        position={[0, 170, 0.25]}
-                        raycast={
-                          currentView === View.DesktopView
-                            ? () => null
-                            : undefined
-                        }
-                        distanceFactor={10}
-                        style={{
-                          backgroundImage: "url(/assets/pc-bg.webp)",
-                          backgroundColor: "#111535",
-                        }}
-                      >
-                        <div className="w-full h-full backdrop-blur-md">
-                          <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.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}
-                      >
-                        <CellphoneUI />
-                      </Html>
-                    </mesh>
-                  </group>
-                  <group
-                    position={[4, 4.74056, 7.25]}
-                    rotation={[-Math.PI, -Math.PI / 4, -Math.PI]}
-                    scale={0.3}
-                  >
-                    <group
-                      position={[-0.45957, -1.57735, -0.97302]}
-                      rotation={[-Math.PI / 2, 0, 0]}
-                      scale={100}
-                      onClick={
-                        config.phoneNumber && currentView === View.PhoneView
-                          ? () => {
-                              window.open(
-                                `tel:${config.phoneNumber}`,
-                                "_blank",
-                                "noopener,noreferrer"
-                              );
-                            }
-                          : undefined
-                      }
-                      onPointerOver={
-                        config.phoneNumber && currentView === View.PhoneView
-                          ? () => setPhoneHovered(true)
-                          : undefined
-                      }
-                      onPointerOut={() => setPhoneHovered(false)}
-                    >
-                      <mesh
-                        castShadow
-                        receiveShadow
-                        geometry={nodes.Top.geometry}
-                        material={materials.TopMaterial}
+                    <Environment preset="apartment" />
+                    <AnimatedCam makeDefault {...cameraSpring} />
+                    {!mobile && (
+                      <Buttons
+                        menuTraversal={menuTraversal}
+                        setMenuTraversal={setMenuTraversal}
+                        pendingView={pendingView}
+                        setPendingView={setPendingView}
+                        goPreviousView={goPreviousView}
+                        currentView={currentView}
                       />
-                      <mesh
-                        castShadow
-                        receiveShadow
-                        geometry={nodes.OfficePhoneBody.geometry}
-                        material={materials.OfficePhoneBodyMaterial}
+                    )}
+                    <group>
+                      <primitive
+                        object={spotlight}
+                        position={[-1.915, 20, 1.0925]}
                       />
-                      <mesh
-                        castShadow
-                        receiveShadow
-                        geometry={nodes.Screen.geometry}
-                        material={materials.ScreenMaterial}
-                      />
-                      <mesh
-                        castShadow
-                        receiveShadow
-                        geometry={nodes.Buttons.geometry}
-                        material={materials.HandleAndButtonsMaterial}
-                      />
-                      <mesh
-                        castShadow
-                        receiveShadow
-                        geometry={nodes.Handle.geometry}
-                        material={materials.HandleAndButtonsMaterial}
-                        position={[-0.01639, -0.0078, 0.02006]}
-                        rotation={[-0.37437, 0, Math.PI / 2]}
+                      <primitive
+                        object={spotlight.target}
+                        position={[-1.915, 0, 1.0925]}
                       />
                     </group>
-                  </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 && (
+                    <group
+                      position={[2.50415, 0.12973, 3.47808]}
+                      rotation={[0, -Math.PI / 2, 0]}
+                      scale={0.01}
+                    >
+                      <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.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>
@@ -432,9 +459,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/scene/consts.ts

@@ -36,11 +36,6 @@ export const views: PerspectiveCameraProps[] = [
     position: [3.0143, 5.5, 6.0997],
     rotation: [-2.55743, -0.69621, -2.74104],
   },
-  {
-    // SideView
-    position: [0.5, 7.75, 4.15],
-    rotation: [-2.1005, -0.68155, -2.35619],
-  },
   {
     // CreditsView
     position: [1.25, 5.9822, -2.075],
@@ -56,8 +51,7 @@ export enum View {
   CellphoneView = 4,
   DesktopView = 5,
   PhoneView = 6,
-  SideView = 7,
-  CreditsView = 8,
+  CreditsView = 7,
 }
 
 export const hashtoView: Record<string, View> = {

src/components/ui/CellphoneUI.tsx

@@ -4,8 +4,6 @@ import {
   SiAppstore,
   SiAppstoreHex,
   SiMatrix,
-  SiLinkedin,
-  SiLinkedinHex,
   SiGitea,
   SiGiteaHex,
   SiGithub,
@@ -27,11 +25,13 @@ import {
   mdiWifi,
   mdiBattery80,
   mdiHelp,
+  mdiEmail,
 } from "@mdi/js";
 import Icon from "@mdi/react";
 import { useRef, useState } from "react";
 import { Time } from "../util/Time";
 import { useConfig } from "../hooks/useConfig";
+import Image from "next/image";
 
 export const CellphoneUI = () => {
   const config = useConfig();
@@ -88,6 +88,17 @@ export const CellphoneUI = () => {
           <div className={`${appClass} ${fillerClass}`}>
             <Icon path={mdiCalculator} className="text-neutral-300" />
           </div>
+          {config.email && (
+            <a
+              href={`mailto:${config.email}`}
+              target="_blank"
+              className={appClass}
+              onMouseOver={handleEnter}
+              onMouseOut={handleLeave}
+            >
+              <Icon path={mdiEmail} className="text-neutral-300" />
+            </a>
+          )}
           {config.socials?.matrix && (
             <a
               href={`https://matrix.to/#/${config.socials.matrix}`}
@@ -107,7 +118,13 @@ export const CellphoneUI = () => {
               onMouseOver={handleEnter}
               onMouseOut={handleLeave}
             >
-              <SiLinkedin color={SiLinkedinHex} className="size-full p-2" />
+              <Image
+                src="/assets/linkedin.svg"
+                alt="LinkedIn"
+                className="size-full p-2"
+                width={24}
+                height={24}
+              />
             </a>
           )}
           {config.socials?.gitea && (

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

@@ -0,0 +1,89 @@
+"use client";
+
+import { useProgress } from "@react-three/drei";
+import { animated, useSpring, useTransition } from "@react-spring/web";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+export const Loader = ({ minDuration = 750, fadeMs = 600 }) => {
+  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 },
+    leave: { opacity: 0 },
+    config: { duration: fadeMs, easing: (t) => t * t },
+  });
+
+  return createPortal(
+    overlay(
+      (styles, show) =>
+        show && (
+          <div>
+            <animated.div
+              style={{
+                ...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",
+              }}
+            >
+              <p>Loading…</p>
+
+              <div
+                style={{
+                  width: 192,
+                  height: 16,
+                  background: "#4b4b4b",
+                  borderRadius: 8,
+                  overflow: "hidden",
+                }}
+              >
+                <animated.div
+                  style={{ ...barStyles, height: "100%", background: "#fff" }}
+                >
+                  <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>
+              </div>
+            </animated.div>
+          </div>
+        )
+    ),
+    document.body
+  );
+};

src/components/ui/MobileMenu.tsx

@@ -0,0 +1,112 @@
+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>
+      <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/components/ui/PCUI.tsx

@@ -308,11 +308,11 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
         <div className="flex h-full space-x-1">
           <Icon
             path={mdiFolder}
-            className="text-neutral-400 h-full w-fit rounded-tl-lg rounded-br-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
+            className="text-neutral-400 size-8 rounded-tl-lg rounded-br-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
           />
           <Icon
             path={mdiPin}
-            className="text-neutral-400 h-full w-fit rounded-b-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
+            className="text-neutral-400 size-8 rounded-b-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
           />
         </div>
         <p className="absolute left-1/2 transform -translate-x-1/2 text-white">
@@ -321,21 +321,21 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
         <div className="flex h-full space-x-1 ml-auto justify-end">
           <Icon
             path={mdiWindowMinimize}
-            className="text-neutral-100 h-full w-fit rounded-b-lg transition-all hover:bg-amber-800 hover:ring-amber-500 hover:ring-1 p-1.5"
+            className="text-neutral-100 size-8 rounded-b-lg transition-all hover:bg-amber-800 hover:ring-amber-500 hover:ring-1 p-1.5"
           />
           <Icon
             path={mdiWindowRestore}
-            className="text-neutral-100 h-full w-fit rounded-b-lg transition-all hover:bg-green-800 hover:ring-green-500 hover:ring-1 p-1.5"
+            className="text-neutral-100 size-8 rounded-b-lg transition-all hover:bg-green-800 hover:ring-green-500 hover:ring-1 p-1.5"
           />
           <Icon
             path={mdiWindowClose}
-            className="text-neutral-100 h-full w-fit rounded-tr-lg rounded-bl-lg transition-all hover:bg-red-800 hover:ring-red-500 hover:ring-1 p-1.5"
+            className="text-neutral-100 size-8 rounded-tr-lg rounded-bl-lg transition-all hover:bg-red-800 hover:ring-red-500 hover:ring-1 p-1.5"
           />
         </div>
       </div>
       <div className="flex bg-neutral-950 size-full rounded-b-lg text-white">
         <div className="h-full w-fit bg-neutral-950 flex flex-col rounded-bl-lg">
-          <div className="h-14 p-2 pr-1 flex justify-center w-fit space-x-1">
+          <div className="h-14 p-2 pr-1 flex justify-center w-36 space-x-1">
             <Icon
               path={mdiArrowLeft}
               className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
@@ -402,7 +402,7 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
               >
                 <Icon
                   path={mdiHelp}
-                  className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
+                  className="text-neutral-100 size-11 rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
                 />
               </button>
             </div>
@@ -417,7 +417,7 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
                 defaultValue="/home/ahmed/Desktop/projects"
               />
             </div>
-            <div className="flex justify-center h-full w-fit space-x-1">
+            <div className="flex justify-center h-full w-36 space-x-1">
               <Icon
                 path={mdiBackspace}
                 className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
@@ -446,7 +446,7 @@ const Taskbar = () => {
         <div className="flex space-x-4 h-full w-fit items-center">
           <SiArchlinux
             color={SiArchlinuxHex}
-            className="h-full w-fit transition-transform hover:scale-110"
+            className="size-10 transition-transform hover:scale-110"
           />
           <div className="w-8 h-full">
             <div className="w-full h-1/2 bg-blue-900 outline-1 outline-blue-600 transition-all hover:bg-blue-700 hover:outline-blue-400" />
@@ -454,19 +454,19 @@ const Taskbar = () => {
           </div>
           <Icon
             path={mdiFolder}
-            className="text-blue-500 h-full w-fit transition-transform hover:scale-110 border-b-2"
+            className="text-blue-500 size-10 transition-transform hover:scale-110 border-b-2"
           />
           <SiVscodium
             color={SiVscodiumHex}
-            className="h-full w-fit transition-transform hover:scale-110"
+            className="size-10 transition-transform hover:scale-110"
           />
           <Icon
             path={mdiConsole}
-            className="text-neutral-400 h-full w-fit transition-transform hover:scale-110"
+            className="text-neutral-400 size-10 transition-transform hover:scale-110"
           />
           <SiFirefoxbrowser
             color={SiFirefoxbrowserHex}
-            className="h-full w-fit transition-transform hover:scale-110"
+            className="size-10 transition-transform hover:scale-110"
           />
         </div>
         <div className="flex space-x-2 h-full w-fit items-center">

src/components/util/Info.tsx

@@ -0,0 +1,5 @@
+import { type HTMLAttributes } from "react";
+
+export const Info = (props: HTMLAttributes<HTMLParagraphElement>) => (
+  <p {...props}>{process.env.NEXT_PUBLIC_APP_VERSION}</p>
+);

src/instrumentation.ts

@@ -5,6 +5,7 @@ import { prettify } from "awesome-ajv-errors";
 
 export async function register() {
   if (process.env.NEXT_RUNTIME === "nodejs") {
+    console.info(`Portfolio v2 ${process.env.NEXT_PUBLIC_APP_VERSION}`);
     const phoneRegex = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/;
 
     const ajv = new Ajv({ allErrors: true });
@@ -66,6 +67,11 @@ export async function register() {
           format: "phone",
           nullable: true,
         },
+        email: {
+          type: "string",
+          format: "email",
+          nullable: true,
+        },
         fallbackUrl: {
           type: "string",
           format: "uri",

src/types/config.d.ts

@@ -16,6 +16,7 @@ export interface Config {
     tags?: string[];
   }[];
   phoneNumber?: string;
+  email?: string;
   fallbackUrl?: string;
   name: [string, string];
   status?: string;

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;
+}

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }