Optimize mobile experience

Author: Kinin-Code-Offical

src/app/globals.css

@@ -579,18 +579,36 @@ textarea {
 }
 
 @media (max-width: 960px) {
+  .hero-shell {
+    min-height: 170vh;
+  }
+
   .fixed-menu {
-    top: 16px;
-    left: 16px;
+    top: 14px;
+    left: 14px;
+  }
+
+  .menu-button {
+    width: 34px;
+    height: 34px;
+    font-size: 12px;
   }
 
   .hero-overlay {
-    left: 24px;
-    bottom: 24px;
+    left: 18px;
+    bottom: 18px;
   }
 
   .content-section {
-    padding: 80px 8vw 60px;
+    padding: 64px 8vw 52px;
+  }
+
+  .hero-name {
+    font-size: 22px;
+  }
+
+  .hero-role {
+    font-size: 10px;
   }
 }
 

src/components/hero/HeroScene.tsx

@@ -304,7 +304,7 @@ function SceneContent({
       <hemisphereLight args={["#f2d3aa", "#120b06", lights.hemi]} />
       <directionalLight
         position={[5, 6, 3]}
-        intensity={lights.directional}
+        intensity={isMobile ? lights.directional * 0.7 : lights.directional}
         castShadow={!isMobile}
         shadow-mapSize-width={1024}
         shadow-mapSize-height={1024}
@@ -323,13 +323,13 @@ function SceneContent({
           <PlaceholderComputer devSettings={devSettings} terminalApi={terminalApi} />
         )}
       </group>
-      <Environment preset="city" />
+      {isMobile ? null : <Environment preset="city" />}
       <OrbitControls
         enableZoom={Boolean(devSettings)}
         enablePan={Boolean(devSettings)}
         enabled={!isMobile}
         autoRotate
-        autoRotateSpeed={isMobile ? 0.2 : 0.4}
+        autoRotateSpeed={isMobile ? 0.15 : 0.4}
       />
       <mesh
         onPointerDown={(event) => {
@@ -351,9 +351,10 @@ export default function HeroScene(props: HeroSceneProps) {
   const isMobile = useMediaQuery("(max-width: 900px)");
   return (
     <Canvas
-      dpr={isMobile ? [1, 1.2] : [1, 1.6]}
+      dpr={isMobile ? [1, 1.1] : [1, 1.6]}
       camera={{ position: [0.2, 0.8, 3.6], fov: 42 }}
       gl={{ antialias: !isMobile, powerPreference: "high-performance" }}
+      shadows={!isMobile}
       style={{ width: "100%", height: "100%" }}
     >
       <SceneContent {...props} />

src/components/terminal/TerminalCanvas.tsx

@@ -152,6 +152,7 @@ export default function TerminalCanvas({
   const historyIndexRef = useRef(-1);
   const inputRef = useRef("");
   const scrollOffsetRef = useRef(0);
+  const lastDrawRef = useRef(0);
   const focusedRef = useRef(false);
   const cwdRef = useRef("/");
   const fsRef = useRef<FsNode>(buildFileTree(files));
@@ -538,12 +539,16 @@ export default function TerminalCanvas({
   useEffect(() => {
     let rafId = 0;
     const drawLoop = () => {
-      drawTerminal();
+      const now = performance.now();
+      if (!isMobile || now - lastDrawRef.current > 33) {
+        drawTerminal();
+        lastDrawRef.current = now;
+      }
       rafId = requestAnimationFrame(drawLoop);
     };
     drawLoop();
     return () => cancelAnimationFrame(rafId);
-  }, [drawTerminal]);
+  }, [drawTerminal, isMobile]);
 
   return <canvas ref={canvasRef} className="terminal-canvas" />;
 }