[#6] Name font change

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

package.json

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

src/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

@@ -8,7 +8,7 @@ import {
   Text,
   Html,
   type PerspectiveCameraProps,
-  useProgress,
+  PerformanceMonitor,
 } from "@react-three/drei";
 import {
   animated as threeAnimated,
@@ -26,11 +26,10 @@ import {
   Suspense,
   useCallback,
   type JSX,
-  type Dispatch,
-  type SetStateAction,
 } from "react";
+import round from "lodash/round";
 import Stack from "@/util/stack";
-import { Canvas, useFrame } from "@react-three/fiber";
+import { Canvas } from "@react-three/fiber";
 import { mdiArrowLeftBold } from "@mdi/js";
 import { Icon } from "@mdi/react";
 import { PDF } from "../util/PDF";
@@ -45,42 +44,21 @@ 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";
 
 const AnimatedCam = threeAnimated(PerspectiveCamera);
 const AnimatedButton = webAnimated.button as React.ComponentType<
   React.ButtonHTMLAttributes<HTMLButtonElement> & { children?: React.ReactNode }
 >;
 
-function FpsUpdater({
-  onUpdate,
-}: {
-  onUpdate: Dispatch<SetStateAction<number>>;
-}) {
-  const fpsRef = useRef([0]);
-  useFrame((_, delta) => fpsRef.current.push(1 / delta));
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      const avg =
-        fpsRef.current.reduce((a, b) => a + b, 0) / fpsRef.current.length;
-      fpsRef.current = [];
-      onUpdate(avg);
-    }, 1000);
-
-    return () => clearInterval(id);
-  }, [onUpdate]);
-
-  return null;
-}
-
 export function Scene(props: JSX.IntrinsicElements["group"]) {
   const { nodes, materials } = useGLTF("/scene.glb") as unknown as GLTFResult;
-  const { progress } = useProgress();
   const { width, height } = useWindowSize();
   const config = useConfig();
 
   // States
   const [fps, setFps] = useState(0);
+  const [dpr, setDpr] = useState(2);
   const [pendingView, setPendingView] = useState<View | null>(null);
   const [backHovered, setBackHovered] = useState(false);
   const [backClicked, setBackClicked] = useState(false);
@@ -135,7 +113,6 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
       precision: 0.0001,
       friction: 80,
       mass: 10,
-      clamp: true,
     },
   });
 
@@ -151,6 +128,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
       {isWebGL2Available() ? (
         width >= 1.5 * height ? (
           <>
+            <Loader />
             <div className="pointer-events-none fixed z-[999999999] size-full">
               <AnimatedButton
                 style={{
@@ -178,218 +156,210 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
               </AnimatedButton>
               <div className="min-w-12 text-white bottom-0 right-0 absolute m-3 p-1 text-xs text-right text-stroke-2 text-stroke-black paint-sfm">
                 <Info />
-                {isNaN(fps) ? "-" : fps.toFixed(0)} fps
+                {fps > 0 && (
+                  <>
+                    {fps.toFixed(0)} fps | {dpr}x
+                  </>
+                )}
               </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}>
-                  <FpsUpdater onUpdate={setFps} />
-                  <Environment preset="apartment" />
-                  <AnimatedCam makeDefault {...cameraSpring} />
-                  <Buttons
-                    menuTraversal={menuTraversal}
-                    setMenuTraversal={setMenuTraversal}
-                    pendingView={pendingView}
-                    setPendingView={setPendingView}
-                    goPreviousView={goPreviousView}
-                    currentView={currentView}
-                  />
-                  <group>
-                    <primitive
-                      object={spotlight}
-                      position={[-1.915, 20, 1.0925]}
-                    />
-                    <primitive
-                      object={spotlight.target}
-                      position={[-1.915, 0, 1.0925]}
-                    />
-                  </group>
-                  <group
-                    position={[2.50415, 0.12973, 3.47808]}
-                    rotation={[0, -Math.PI / 2, 0]}
-                    scale={0.01}
+                  <PerformanceMonitor
+                    ms={100}
+                    onChange={(api) => {
+                      setFps(api.fps);
+                      setDpr(round(1.5 * api.factor + 0.5, 1));
+                    }}
                   >
-                    <mesh
-                      castShadow
-                      receiveShadow
-                      geometry={nodes.Monitor.geometry}
-                      material={materials.PlasticMaterial}
-                      position={[-175, 415.25, -160]}
-                    >
-                      <Html
-                        transform
-                        receiveShadow
-                        castShadow
-                        pointerEvents={
-                          currentView === View.PCView ? "auto" : "none"
-                        }
-                        occlude="blending"
-                        className="w-[1452px] h-[810px] bg-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}
+                    <Environment preset="apartment" />
+                    <AnimatedCam makeDefault {...cameraSpring} />
+                    <Buttons
+                      menuTraversal={menuTraversal}
+                      setMenuTraversal={setMenuTraversal}
+                      pendingView={pendingView}
+                      setPendingView={setPendingView}
+                      goPreviousView={goPreviousView}
+                      currentView={currentView}
+                    />
+                    <group>
+                      <primitive
+                        object={spotlight}
+                        position={[-1.915, 20, 1.0925]}
+                      />
+                      <primitive
+                        object={spotlight.target}
+                        position={[-1.915, 0, 1.0925]}
+                      />
+                    </group>
+                    <group
+                      position={[2.50415, 0.12973, 3.47808]}
+                      rotation={[0, -Math.PI / 2, 0]}
                       scale={0.01}
                     >
-                      <Credits currentView={currentView} />
-                    </mesh>
-                  </group>
-                  <group
-                    position={[3.81024, 3.85444, 6.13972]}
-                    rotation={[-Math.PI, -0.44331, -Math.PI]}
-                    scale={0.035}
-                  >
-                    <mesh
-                      castShadow
-                      receiveShadow
-                      geometry={nodes.Paper3.geometry}
-                      material={materials.PaperMaterial}
-                    >
-                      <Html
-                        transform
-                        receiveShadow
+                      <mesh
                         castShadow
-                        pointerEvents={
-                          currentView === View.ResumeView ? "auto" : "none"
-                        }
-                        occlude="blending"
-                        className="w-[800px] h-[1074px] bg-white"
-                        scale={15}
-                        position={[28.7765, 12.431875, 3.725]}
-                        rotation={[-Math.PI / 2, 0, (1 * Math.PI) / 9]}
-                        raycast={
-                          currentView === View.ResumeView
-                            ? () => null
-                            : undefined
-                        }
-                        distanceFactor={1}
-                      >
-                        <PDF url="/config/resume.pdf" />
-                      </Html>
-                    </mesh>
-                  </group>
-                  <group
-                    position={[2.58559, 4.69855, 3.29056]}
-                    rotation={[-Math.PI, -0.43633, -Math.PI]}
-                    scale={0.02}
-                  >
-                    <mesh
-                      castShadow
-                      receiveShadow
-                      geometry={nodes.CellphoneMesh.geometry}
-                      material={materials.CellphoneMaterial}
-                      position={[-102.64982, -21.45192, 247.01788]}
-                    >
-                      <Html
-                        transform
                         receiveShadow
-                        castShadow
-                        pointerEvents={
-                          currentView === View.CellphoneView ? "auto" : "none"
-                        }
-                        occlude="blending"
-                        className="w-[1008px] h-[1614px] bg-blue-100"
-                        position={[0, 2.8, 0]}
-                        rotation={[-Math.PI / 2, 0, Math.PI / 2]}
-                        raycast={
-                          currentView === View.CellphoneView
-                            ? () => null
-                            : undefined
-                        }
-                        style={{
-                          backgroundImage: "url('/assets/cellphone-bg.webp')",
-                          backgroundColor: "black",
-                        }}
-                        distanceFactor={10}
+                        geometry={nodes.Monitor.geometry}
+                        material={materials.PlasticMaterial}
+                        position={[-175, 415.25, -160]}
                       >
-                        <CellphoneUI />
-                      </Html>
-                    </mesh>
-                  </group>
-                  <Text
-                    position={[-2.415, 12.5, -6]}
-                    font="/assets/inter-bold.ttf"
-                    color="black"
-                    fontSize={3}
-                  >
-                    {config.name[0]}
-                  </Text>
-                  <Text
-                    position={[5.185, 12.5, 1.592]}
-                    font="/assets/inter-bold.ttf"
-                    rotation={[0, -Math.PI / 2, 0]}
-                    color="black"
-                    fontSize={3}
-                  >
-                    {config.name[1]}
-                  </Text>
-                  {config.status && (
+                        <Html
+                          transform
+                          receiveShadow
+                          castShadow
+                          pointerEvents={
+                            currentView === View.PCView ? "auto" : "none"
+                          }
+                          occlude="blending"
+                          className="w-[1452px] h-[810px] bg-[#0e1838]"
+                          scale={10}
+                          position={[0, 170, 0.5]}
+                          raycast={
+                            currentView === View.DesktopView
+                              ? () => null
+                              : undefined
+                          }
+                          distanceFactor={10}
+                        >
+                          <div className="size-full">
+                            <PCUI />
+                          </div>
+                        </Html>
+                      </mesh>
+                    </group>
+                    <group
+                      position={[4.105, 4.2825, -2.085]}
+                      rotation={[0, -Math.PI / 2, 0]}
+                    >
+                      <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.SecondaryMonitorMesh.geometry}
+                        material={materials.SecondaryMonitorMaterial}
+                        scale={0.01}
+                      >
+                        <Credits currentView={currentView} />
+                      </mesh>
+                    </group>
+                    <group
+                      position={[3.81024, 3.85444, 6.13972]}
+                      rotation={[-Math.PI, -0.44331, -Math.PI]}
+                      scale={0.035}
+                    >
+                      <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Paper3.geometry}
+                        material={materials.PaperMaterial}
+                      >
+                        <Html
+                          transform
+                          receiveShadow
+                          castShadow
+                          pointerEvents={
+                            currentView === View.ResumeView ? "auto" : "none"
+                          }
+                          occlude="blending"
+                          className="w-[800px] h-[1074px] bg-white"
+                          scale={15}
+                          position={[28.7765, 12.431875, 3.725]}
+                          rotation={[-Math.PI / 2, 0, (1 * Math.PI) / 9]}
+                          raycast={
+                            currentView === View.ResumeView
+                              ? () => null
+                              : undefined
+                          }
+                          distanceFactor={1}
+                        >
+                          <PDF url="/config/resume.pdf" />
+                        </Html>
+                      </mesh>
+                    </group>
+                    <group
+                      position={[2.58559, 4.69855, 3.29056]}
+                      rotation={[-Math.PI, -0.43633, -Math.PI]}
+                      scale={0.02}
+                    >
+                      <mesh
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.CellphoneMesh.geometry}
+                        material={materials.CellphoneMaterial}
+                        position={[-102.64982, -21.45192, 247.01788]}
+                      >
+                        <Html
+                          transform
+                          receiveShadow
+                          castShadow
+                          pointerEvents={
+                            currentView === View.CellphoneView ? "auto" : "none"
+                          }
+                          occlude="blending"
+                          className="w-[1008px] h-[1614px] bg-blue-100"
+                          position={[0, 2.85, 0]}
+                          rotation={[-Math.PI / 2, 0, Math.PI / 2]}
+                          raycast={
+                            currentView === View.CellphoneView
+                              ? () => null
+                              : undefined
+                          }
+                          style={{
+                            backgroundImage: "url('/assets/cellphone-bg.webp')",
+                            backgroundColor: "black",
+                          }}
+                          distanceFactor={10}
+                        >
+                          <CellphoneUI />
+                        </Html>
+                      </mesh>
+                    </group>
                     <Text
-                      position={[5.185, 10, 1.592]}
-                      font="/assets/inter.ttf"
+                      position={[-2.415, 12.5, -6]}
+                      font="/assets/clashdisplay.ttf"
+                      color="black"
+                      fontSize={3}
+                    >
+                      {config.name[0]}
+                    </Text>
+                    <Text
+                      position={[5.185, 12.5, 1.592]}
+                      font="/assets/clashdisplay.ttf"
                       rotation={[0, -Math.PI / 2, 0]}
                       color="black"
-                      fontSize={0.75}
+                      fontSize={3}
                     >
-                      {config.status}
+                      {config.name[1]}
                     </Text>
-                  )}
-                  {config.location && (
-                    <Text
-                      position={[5.185, 8.5, 1.592]}
-                      font="/assets/inter.ttf"
-                      rotation={[0, -Math.PI / 2, 0]}
-                      color="black"
-                      fontSize={0.75}
-                    >
-                      📍&#8201;{config.location}
-                    </Text>
-                  )}
-                  <StaticMeshes nodes={nodes} materials={materials} />
+                    {config.status && (
+                      <Text
+                        position={[5.185, 10, 1.592]}
+                        font="/assets/inter.ttf"
+                        rotation={[0, -Math.PI / 2, 0]}
+                        color="black"
+                        fontSize={0.75}
+                      >
+                        {config.status}
+                      </Text>
+                    )}
+                    {config.location && (
+                      <Text
+                        position={[5.185, 8.5, 1.592]}
+                        font="/assets/inter.ttf"
+                        rotation={[0, -Math.PI / 2, 0]}
+                        color="black"
+                        fontSize={0.75}
+                      >
+                        📍&#8201;{config.location}
+                      </Text>
+                    )}
+                    <StaticMeshes nodes={nodes} materials={materials} />
+                  </PerformanceMonitor>
                 </group>
               </Suspense>
             </Canvas>
@@ -400,9 +370,9 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
               config.fallbackUrl ? "pt-12" : ""
             } flex flex-col space-y-6 w-screen h-screen text-center justify-center items-center text-white text-4xl`}
           >
-            <p>Screen too small, please rotate</p>
+            <p className="mx-8">Screen too small, please rotate</p>
             {config.fallbackUrl && (
-              <p className="text-base">
+              <p className="text-base mx-8">
                 or visit the{" "}
                 <a
                   href={config.fallbackUrl}

src/components/ui/Credits.tsx

@@ -15,7 +15,7 @@ export const Credits = ({ currentView }: CreditsProps) => {
       occlude="blending"
       className="w-[1452px] h-[810px] bg-neutral-400"
       scale={10}
-      position={[0, 170, 0.25]}
+      position={[0, 170, 0.5]}
       raycast={currentView === View.CreditsView ? () => null : undefined}
       distanceFactor={10}
     >

src/components/ui/Loader.tsx

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

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

yarn.lock

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