From 8abf7750772ca5f6829f5d569cdbbb58135a6050 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Tue, 1 Jul 2025 23:28:15 +1000
Subject: [PATCH] fixed projects section

---
 src/components/projects/Project.astro       | 46 +++++++++++++++++----
 src/components/projects/VideoProject.svelte |  2 +-
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/components/projects/Project.astro b/src/components/projects/Project.astro
index 648ce82..9ee7e90 100644
--- a/src/components/projects/Project.astro
+++ b/src/components/projects/Project.astro
@@ -33,7 +33,7 @@ const leftProject = position == "left";
 ---
 
 <div
-	class="flex h-fit w-full flex-col justify-center px-10 lg:px-20"
+	class="flex h-fit w-full flex-col justify-center px-10 lg:px-20 mb-10"
 	class:list={leftProject ? "lg:flex-row" : "lg:flex-row-reverse"}
 >
 	<div
@@ -49,10 +49,12 @@ const leftProject = position == "left";
 					class={`absolute max-w-full
 							aspect-video
 							opacity-40
-							border-2 border-solid border-white rounded-xl`}
+							border-2 border-solid border-white rounded-xl
+							top-1/2 left-1/2
+							background-img`}
 					class:list={leftProject
-						? "[transform:translateX(50px)_translateY(5px)_rotateY(5deg)_rotateX(0deg)_translateZ(-50px)]"
-						: "[transform:translateX(10px)_translateY(5px)_translateZ(-50px)_rotateY(-3deg)]"}
+						? "left"
+						: "right"}
 					width="700"
 				/>
 				<Image
@@ -62,10 +64,11 @@ const leftProject = position == "left";
 					class={`absolute max-w-full
 							aspect-video
 							opacity-100
-							border-2 border-solid border-white rounded-xl`}
+							border-2 border-solid border-white rounded-xl
+							top-1/2 left-1/2 frontfacing-img`}
 					class:list={leftProject
-						? "[transform:rotateY(5deg)_rotateX(0deg)_translateX(60px)_translateZ(-50px)]"
-						: "[transform:translateZ(-50px)_rotateY(-3deg)]"}
+						? "left"
+						: "right"}
 				/>
 			)
 		}
@@ -126,13 +129,30 @@ const leftProject = position == "left";
 	</div>
 </div>
 
-<style>
+<style> 
 	.image-container img {
 		transition: transform 0.5s ease-in-out;
 	}
+
+	.background-img.left {
+		transform: translateX(calc(-50% + 25px)) translateY(calc(-50% + 5px)) translateZ(-50px) rotateY(5deg);
+	}
+
+	.background-img.right {
+		transform: translateX(calc(-50%)) translateY(calc(-50% + 5px)) translateZ(-50px) rotateY(-3deg);
+	}
+
+	.frontfacing-img.left {
+		transform: translateX(calc(-50% + 35px)) translateY(calc(-50%)) translateZ(-50px) rotateY(5deg);
+	}
+
+	.frontfacing-img.right {
+		transform: translateX(calc(-50% - 10px)) translateY(-50%) translateZ(-50px) rotateY(-3deg);
+	}
+
 	@media (min-width: 1025px) {
 		.image-container:hover > img {
-			transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
+			transform: rotateY(0deg) rotateX(0deg) translateZ(0px) translateX(-50%) translateY(-50%);
 		}
 
 		.image-container:hover > .visit-div {
@@ -140,5 +160,13 @@ const leftProject = position == "left";
 			transition: opacity 0.3s ease-in-out;
 			transition-delay: 0.3s;
 		}
+
+		.background-img.left {
+			transform: translateX(-50%) translateY(calc(-50% + 5px)) translateZ(-50px) rotateY(5deg);
+		}
+
+		.frontfacing-img.left {
+			transform: translateX(calc(-50% + 10px)) translateY(calc(-50%)) translateZ(-50px) rotateY(5deg);
+		}
 	}
 </style>
diff --git a/src/components/projects/VideoProject.svelte b/src/components/projects/VideoProject.svelte
index 922657c..62fed37 100644
--- a/src/components/projects/VideoProject.svelte
+++ b/src/components/projects/VideoProject.svelte
@@ -79,7 +79,7 @@
 </script>
 
 <div
-    class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
+    class="mb-10 flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
     class:lg:flex-row={positionLeft}
     class:lg:flex-row-reverse={!positionLeft}
 >