Fix broken PC UI on iOS

Dockerfile

@@ -1,26 +1,41 @@
+FROM node:lts-alpine AS builder
 ARG APP_VERSION=dev
-FROM node:lts-alpine AS deps
-ARG APP_VERSION
+ENV NEXT_PUBLIC_APP_VERSION=$APP_VERSION
+
 WORKDIR /app
+
 RUN corepack enable && corepack prepare yarn@4.9.1 --activate
+
 COPY package.json yarn.lock .yarnrc.yml ./
 RUN yarn install --immutable
+
+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 \
-    PORT=3000
+    NEXT_TELEMETRY_DISABLED=1
 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
-COPY --from=deps /app/node_modules ./node_modules
-COPY --from=deps /app/package.json ./package.json
-COPY . .
-RUN chown -R nextjs:nodejs /app
+
+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 && chown -R nextjs:nodejs /app/.yarn
+
 USER nextjs
 EXPOSE 3000
-CMD ["sh", "-c", "yarn build && yarn start -p $PORT"]
+
+CMD ["yarn", "start"]

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/scene/Scene.tsx

@@ -244,7 +244,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                           currentView === View.PCView ? "auto" : "none"
                         }
                         occlude="blending"
-                        className="w-[1452px] h-[810px] bg-neutral-400"
+                        className="w-[1452px] h-[810px] bg-[#0e1838]"
                         scale={10}
                         position={[0, 170, 0.25]}
                         raycast={
@@ -253,12 +253,8 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                             : undefined
                         }
                         distanceFactor={10}
-                        style={{
-                          backgroundImage: "url(/assets/pc-bg.webp)",
-                          backgroundColor: "#111535",
-                        }}
                       >
-                        <div className="w-full h-full backdrop-blur-md">
+                        <div className="size-full">
                           <PCUI />
                         </div>
                       </Html>

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/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 });