🎉 feat: 支持移动端显示修改部分细节

B1ue1nWh1te · Nov 6, 2024 · 59da13b · 59da13b
1 parent 186d7c8
commit 59da13b
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 18 deletions.
diff --git a/app/components/Profile.tsx b/app/components/Profile.tsx
@@ -66,7 +66,7 @@ export default function Profile() {
 
   return (
     <Card
-      className="mb-4 flex min-w-[500px] flex-[2] select-none items-center justify-center bg-white/60 p-6 backdrop-blur-lg transition-all duration-300 hover:shadow-lg hover:shadow-[#a78bfa]/25 hover:ring-2 hover:ring-[#a78bfa]/50"
+      className="flex min-w-[460px] flex-[2] select-none items-center justify-center bg-white/60 p-6 backdrop-blur-lg transition-all duration-300 hover:shadow-lg hover:shadow-[#a78bfa]/25 hover:ring-2 hover:ring-[#a78bfa]/50"
       isBlurred={true}
       isPressable={true}
       onPress={showConfetti}

diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
@@ -7,11 +7,11 @@ import { Github, Globe } from "lucide-react";
 
 export default function Projects() {
   return (
-    <div className="mt-4 flex flex-wrap items-center justify-center gap-8">
+    <div className="flex min-w-[570px] flex-wrap items-center justify-center gap-8">
       {Object.values(projectsInfo).map((project, index) => (
         <motion.div key={index} whileHover={{ scale: 1.1 }}>
           <Card
-            className="group flex h-60 w-60 select-none items-center justify-center bg-white/80 p-6 backdrop-blur-lg"
+            className="group flex h-60 w-60 select-none items-center justify-center p-6 backdrop-blur-lg"
             isBlurred={true}
             isPressable={true}
             onPress={() =>

diff --git a/app/components/ProjectsBeam.tsx b/app/components/ProjectsBeam.tsx
@@ -60,7 +60,7 @@ export default function ProjectsBeam() {
 
   return (
     <Card
-      className="mb-4 flex min-w-[500px] flex-[3] select-none items-center justify-center bg-background px-14 py-12 transition-all duration-300 hover:shadow-lg hover:shadow-[#4facfe]/25 hover:ring-2 hover:ring-[#4facfe]/50"
+      className="flex min-w-[460px] flex-[3] select-none items-center justify-center px-14 py-12 backdrop-blur-lg transition-all duration-300 hover:shadow-lg hover:shadow-[#4facfe]/25 hover:ring-2 hover:ring-[#4facfe]/50"
       ref={containerRef}
       isBlurred={true}
       isPressable={true}

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -11,7 +11,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="zh-CN">
       <body className="gradient-background">
         {children}
         <Analytics />

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,25 +1,51 @@
+"use client";
+
 import { NextUIProvider } from "@nextui-org/react";
+import { useEffect, useState } from "react";
 import Profile from "./components/Profile";
 import Projects from "./components/Projects";
 import ProjectsBeam from "./components/ProjectsBeam";
 import BlurFade from "./components/ui/blur-fade";
+import { cn } from "./lib/utils";
 
 export default function Home() {
+  const [isLargeScreen, setIsLargeScreen] = useState(false);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      const isLarge = window.innerWidth >= 1400;
+      if (isLarge !== isLargeScreen) {
+        setIsLargeScreen(isLarge);
+      }
+    };
+
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, [isLargeScreen]);
+
   return (
     <NextUIProvider>
-      <main className="flex h-screen w-screen items-center justify-center overflow-y-auto">
-        <div className="m-4 w-11/12">
-          <BlurFade delay={0.2}>
-            <div className="flex flex-wrap items-stretch justify-center gap-8">
-              <Profile />
-              <ProjectsBeam />
-            </div>
-          </BlurFade>
-          <BlurFade delay={0.4}>
-            <div className="flex items-center justify-center">
-              <Projects />
-            </div>
-          </BlurFade>
+      <main className="h-screen w-screen overflow-y-auto overflow-x-hidden">
+        <div
+          className={cn(
+            "flex flex-col items-center justify-center gap-8 p-4",
+            isLargeScreen ? "h-screen" : "min-h-screen",
+          )}
+        >
+          <div className="grid gap-8">
+            <BlurFade delay={0.2}>
+              <div className="flex flex-wrap items-stretch justify-center gap-8">
+                <Profile />
+                <ProjectsBeam />
+              </div>
+            </BlurFade>
+            <BlurFade delay={0.4}>
+              <div className="flex items-center justify-center">
+                <Projects />
+              </div>
+            </BlurFade>
+          </div>
         </div>
       </main>
     </NextUIProvider>