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

src/components/scene/Scene.tsx

@@ -32,7 +32,7 @@ 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, mdiOpenInNew } from "@mdi/js";
 import { Icon } from "@mdi/react";
 import { PDF } from "../util/PDF";
 import { CellphoneUI } from "../ui/CellphoneUI";
@@ -177,9 +177,21 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
               <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>

src/components/ui/MobileMenu.tsx

@@ -70,9 +70,9 @@ export const MobileMenu = ({
   });
 
   return (
-    <div className="pointer-events-auto">
+    <div className="w-min">
       <AnimatedButton
-        className="m-2"
+        className="m-2 pointer-events-auto"
         onClick={() => setMenuOpen((prev) => !prev)}
       >
         <Icon
@@ -101,7 +101,7 @@ export const MobileMenu = ({
             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`}
+            } px-2 py-1 transition-all duration-300 hover:bg-neutral-700/50 hover:scale-110 rounded pointer-events-auto`}
             onClick={() => goToView(view)}
           >
             {label}