Fix EACCES on /app/package.json in Docker

Dockerfile

@@ -4,7 +4,8 @@ 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
@@ -22,9 +23,10 @@ LABEL org.opencontainers.image.version=$APP_VERSION
 
 WORKDIR /app
 
-RUN corepack enable && corepack prepare yarn@4.9.1 --activate \
- && addgroup -S nodejs -g 1001 \
- && adduser  -S nextjs -u 1001
+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
@@ -33,7 +35,8 @@ 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 && chown -R nextjs:nodejs /app/.yarn
+RUN mkdir -p /app/.yarn /app/.next/cache/images
+RUN chown -R nextjs:nodejs /app
 
 USER nextjs
 EXPOSE 3000

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

@@ -9,36 +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",
     "lodash": "^4.17.21",
-    "next": "15.3.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-pdf": "^9.2.1",
-    "three": "^0.175.0"
+    "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/lodash": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@types/three": "^0",
-    "eslint": "^9",
-    "eslint-config-next": "15.3.0",
-    "tailwindcss": "^4",
+    "@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"
+    "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/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/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, mdiClose, mdiOpenInNew } from "@mdi/js";
 import { Icon } from "@mdi/react";
 import { PDF } from "../util/PDF";
 import { CellphoneUI } from "../ui/CellphoneUI";
@@ -48,6 +48,7 @@ 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);
@@ -60,10 +61,12 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
   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 [backHovered, setBackHovered] = useState(false);
   const [backClicked, setBackClicked] = useState(false);
@@ -174,12 +177,38 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                   />
                 </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>

src/components/ui/CellphoneUI.tsx

@@ -4,8 +4,6 @@ import {
   SiAppstore,
   SiAppstoreHex,
   SiMatrix,
-  SiLinkedin,
-  SiLinkedinHex,
   SiGitea,
   SiGiteaHex,
   SiGithub,
@@ -33,6 +31,7 @@ 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();
@@ -119,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/Loader.tsx

@@ -40,7 +40,6 @@ export const Loader = ({ minDuration = 750, fadeMs = 600 }) => {
       (styles, show) =>
         show && (
           <div>
-            {/* @ts-expect-error children not typed bug */}
             <animated.div
               style={{
                 ...styles,
@@ -70,11 +69,9 @@ export const Loader = ({ minDuration = 750, fadeMs = 600 }) => {
                   overflow: "hidden",
                 }}
               >
-                {/* @ts-expect-error children not typed bug */}
                 <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;

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
@@ -82,7 +82,6 @@ export const MobileMenu = ({
           className="stroke-[0.75] stroke-black"
         />
       </AnimatedButton>
-      {/* @ts-expect-error children not typed bug */}
       <animated.div
         style={{
           transform: slideProps.x.to((x) => `translateX(${x}%)`),
@@ -101,7 +100,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}

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"
+  ]
 }