From 6636e0f05f47cb2b7a8fb5f93da946c3d8b0d4fa Mon Sep 17 00:00:00 2001
From: DongHY1 <hi@daviddong.me>
Date: Tue, 18 Jun 2024 17:07:54 +0800
Subject: [PATCH] fix: md card layout

---
 src/components/ui/bento-grid.jsx |  2 +-
 src/pages/index/+Page.jsx        | 36 ++++++++++++++++++++++++++++----
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/bento-grid.jsx b/src/components/ui/bento-grid.jsx
index f10fafd..480ce54 100644
--- a/src/components/ui/bento-grid.jsx
+++ b/src/components/ui/bento-grid.jsx
@@ -26,7 +26,7 @@ const BentoCard = ({ name, className, background, description, href }) => {
 			)}
 		>
 			<div>{background}</div>
-			<div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10">
+			<div className="pointer-events-none z-10  flex transform-gpu flex-col gap-1 md:p-6 pl-4 transition-all duration-300 group-hover:-translate-y-10">
 				<h3 className="group-hover:opacity-0 transition-all duration-100 text-md font-semibold text-neutral-700 dark:text-neutral-300">
 					{name}
 				</h3>
diff --git a/src/pages/index/+Page.jsx b/src/pages/index/+Page.jsx
index 0456e22..105c5cf 100644
--- a/src/pages/index/+Page.jsx
+++ b/src/pages/index/+Page.jsx
@@ -14,14 +14,28 @@ const Works = [
 		),
 	},
 	{
-		name: "Data and 3D Visualization",
-		description: "Comprehensive 3D visualization project.",
+		name: "Data Visualization",
+		description: "Chart and 3D models.",
 		href: "/project/data-visualization",
+		background: (
+			<img
+				src="/1.png"
+				className="border rounded-md absolute md:-right-36 md:-top-20 md:transition-all md:duration-300 md:ease-out md:scale-[0.6] md:group-hover:scale-100"
+				alt="Large Language Model"
+			/>
+		),
 	},
 	{
 		name: "Hybrid Mobile App",
 		description: "QQ Music / We Sing Living Room.",
 		href: "/project/tme",
+		background: (
+			<img
+				src="/1.png"
+				className="border rounded-md absolute md:-right-36 md:-top-20 md:transition-all md:duration-300 md:ease-out md:scale-[0.6] md:group-hover:scale-100"
+				alt="Large Language Model"
+			/>
+		),
 	},
 ];
 
@@ -30,11 +44,25 @@ const OpenSourceProjects = [
 		name: "Comments",
 		description: "Add comments to your website.",
 		href: "/project/comments",
+		background: (
+			<img
+				src="/1.png"
+				className="border rounded-md absolute md:-right-36 md:-top-20 md:transition-all md:duration-300 md:ease-out md:scale-[0.6] md:group-hover:scale-100"
+				alt="Large Language Model"
+			/>
+		),
 	},
 	{
 		name: "daviddong.me",
 		description: "Personal website template.",
 		href: "/",
+		background: (
+			<img
+				src="/1.png"
+				className="border rounded-md absolute md:-right-36 md:-top-20 md:transition-all md:duration-300 md:ease-out md:scale-[0.6] md:group-hover:scale-100"
+				alt="Large Language Model"
+			/>
+		),
 	},
 ];
 
@@ -71,7 +99,7 @@ export default function Page() {
 			{/* Works */}
 			<section>
 				<h3>Works</h3>
-				<BentoGrid className="lg:grid-rows-3">
+				<BentoGrid className="md:grid-rows-3">
 					{Works.map((feature) => (
 						<BentoCard key={feature.name} {...feature} />
 					))}
@@ -80,7 +108,7 @@ export default function Page() {
 			{/* Open Source Project */}
 			<section>
 				<h3>Open Source Projects</h3>
-				<BentoGrid className="lg:grid-rows-3">
+				<BentoGrid className="md:grid-rows-3">
 					{OpenSourceProjects.map((feature) => (
 						<BentoCard key={feature.name} {...feature} />
 					))}