feat: mobile support

Author: vincent-qc

package.json

@@ -23,6 +23,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.1",
     "three": "^0.172.0",
+    "usehooks-ts": "^3.1.0",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -20,7 +20,7 @@ export default function AboutPage() {
         transition={{
           duration: 0.5,
         }}
-        className="text-2xl font-semibold"
+        className="text-xl font-semibold lg:text-2xl"
       >
         Hi there,
       </motion.p>
@@ -37,7 +37,7 @@ export default function AboutPage() {
           duration: 0.5,
           delay: 0.3,
         }}
-        className="leading-8"
+        className="text-sm leading-6 lg:text-base lg:leading-8"
       >
         I'm Vincent Qi, a CS student at Carnegie Mellon University,
         <br /> and Ex-Founding SWE at EduBeyond.

src/components/about/page.tsx

@@ -35,8 +35,8 @@ export default function ContactCard({
         <img src={icon} className="p-10" />
       </div>
       <div className="flex flex-col justify-center p-4">
-        <h1 className="text-xl font-semibold">{name}</h1>
-        <p className="font-light">{user}</p>
+        <h1 className="text-lg font-semibold sm:text-xl">{name}</h1>
+        <p className="text-sm font-light sm:text-base">{user}</p>
       </div>
     </motion.div>
   );

src/components/contact/card.tsx

@@ -1,7 +1,9 @@
 import { motion } from "motion/react";
+import { useMediaQuery } from "usehooks-ts";
 import { fadeUp } from "../../animations/fade";
 
 export default function Namecard() {
+  const isMobile = useMediaQuery("(max-width: 1260px)");
   const { initial, animate } = fadeUp(20);
   return (
     <motion.div
@@ -14,7 +16,9 @@ export default function Namecard() {
         delay: 0.5,
       }}
     >
-      <h1 className="text-[350%] font-semibold">Vincent's Portfolio</h1>
+      <h1 className="text-[350%] font-semibold">
+        Vincent{isMobile ? " Qi" : "'s Portfolio"}
+      </h1>
     </motion.div>
   );
 }

src/components/landing/namecard.tsx

@@ -23,7 +23,7 @@ const NavbarButton = ({ text, page }: { text: string; page: Page }) => {
       style={{
         borderBottomColor: page === current ? "#FFFFFFFF" : "#00000000",
       }}
-      className="cursor-pointer border-b-2 text-lg transition-all"
+      className="cursor-pointer border-b-2 text-[90%] transition-all lg:text-lg"
     >
       {text}
     </motion.div>

src/components/landing/navbar.tsx

@@ -3,13 +3,17 @@ import { useEffect, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 import Scene from "../../scenes/scene";
 
+import { useMediaQuery } from "usehooks-ts";
 import { PageStore, usePageStore } from "../../stores/page.store";
 import Namecard from "./namecard";
 import Navbar from "./navbar";
 import { pages } from "./navpages";
 
 export default function LandingPage() {
+  const isMobile = useMediaQuery("(max-width: 840px)");
   const [showPages, setShowPages] = useState(false);
+  const [showScene, setShowScene] = useState(false);
+
   const { page } = usePageStore(
     useShallow((state: PageStore) => ({
       page: state.page,
@@ -20,14 +24,28 @@ export default function LandingPage() {
     setTimeout(() => {
       setShowPages(true);
     }, 1500);
+    setTimeout(() => {
+      setShowScene(true);
+    }, 2000);
   });
 
   return (
     <div className="flex h-screen w-screen flex-row font-poppins text-white">
-      <div className="w-[50%]">
-        <Scene />
-      </div>
-      <motion.div className="flex w-[50%] flex-col gap-4 py-20 pl-10 pr-20">
+      {!isMobile && (
+        <div
+          style={{
+            width: "50%",
+          }}
+        >
+          {showScene && <Scene />}
+        </div>
+      )}
+      <motion.div
+        style={{
+          width: isMobile ? "100%" : "50%",
+        }}
+        className="flex flex-col gap-4 py-20 pl-10 pr-20"
+      >
         <div className="flex flex-col items-end justify-center">
           <Namecard />
           <Navbar />

src/components/landing/page.tsx

@@ -57,8 +57,8 @@ export default function ProjectCard({
       <div className="flex w-full flex-row gap-4">
         <img src={image} alt={name} className="h-16 w-16 rounded-xl" />
         <div className="flex flex-col justify-center">
-          <h1 className="text-lg font-semibold">{name}</h1>
-          <p className="py-1 text-sm font-light">{description}</p>
+          <h1 className="text-base font-semibold lg:text-lg">{name}</h1>
+          <p className="py-1 text-xs font-light lg:text-sm">{description}</p>
         </div>
       </div>
       <div

src/components/projects/card.tsx

@@ -5,58 +5,46 @@ import {
   EffectComposer,
   ToneMapping,
 } from "@react-three/postprocessing";
-import { useEffect, useState } from "react";
 import { useUnitSize } from "../hooks/useWindowSize";
 import AboutScene from "./about/about";
 
 function Scene() {
   // const { width, height } = useWindowSize();
   const unit = useUnitSize();
-  const [show, setShow] = useState(false);
-  useEffect(() => {
-    setTimeout(() => {
-      setShow(true);
-    }, 2000);
-  }, []);
   return (
     <div className="flex h-full w-full items-center justify-center p-4">
-      {show && (
-        <Canvas
-          orthographic
-          shadows
-          camera={{
-            position: [10, 10, 10],
-            near: -2000,
-          }}
-        >
-          {/* Scene effects */}
-          <OrbitControls
-            // enablePan={false}
-            // enableZoom={false}
-            maxPolarAngle={Math.PI / 2}
-            maxAzimuthAngle={Math.PI / 2}
-            minAzimuthAngle={0}
-          />
-          <EffectComposer>
-            <Bloom mipmapBlur luminanceThreshold={1} levels={1} intensity={1} />
-            <ToneMapping />
-          </EffectComposer>
+      <Canvas
+        orthographic
+        shadows
+        camera={{
+          position: [10, 10, 10],
+          near: -2000,
+        }}
+      >
+        {/* Scene effects */}
+        <OrbitControls
+          // enablePan={false}
+          // enableZoom={false}
+          maxPolarAngle={Math.PI / 2}
+          maxAzimuthAngle={Math.PI / 2}
+          minAzimuthAngle={0}
+        />
+        <EffectComposer>
+          <Bloom mipmapBlur luminanceThreshold={1} levels={1} intensity={1} />
+          <ToneMapping />
+        </EffectComposer>
 
-          {/* Lighting */}
-          <ambientLight intensity={0.6} />
-          <directionalLight position={[100, 100, 0]} intensity={3} castShadow />
-          <directionalLight position={[0, 100, 50]} intensity={2} />
+        {/* Lighting */}
+        <ambientLight intensity={0.6} />
+        <directionalLight position={[100, 100, 0]} intensity={3} castShadow />
+        <directionalLight position={[0, 100, 50]} intensity={2} />
 
-          {/* Scene switcher */}
-          <directionalLight
-            position={[-100, -100, 0]}
-            intensity={Math.PI / 2}
-          />
-          <mesh scale={[unit, unit, unit]} receiveShadow>
-            <AboutScene />
-          </mesh>
-        </Canvas>
-      )}
+        {/* Scene switcher */}
+        <directionalLight position={[-100, -100, 0]} intensity={Math.PI / 2} />
+        <mesh scale={[unit, unit, unit]} receiveShadow>
+          <AboutScene />
+        </mesh>
+      </Canvas>
     </div>
   );
 }