From 9c311c207bec961d4cdced193983e2405c3a6c44 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Wed, 2 Jul 2025 10:17:23 +1000
Subject: [PATCH] fixed widget project

---
 .../projects/ProjectsComponent.astro          | 20 +++++----
 src/components/projects/TaskWidget.svelte     | 22 +++++++++-
 src/components/projects/VideoProject.svelte   | 44 ++++++++++++++-----
 3 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/src/components/projects/ProjectsComponent.astro b/src/components/projects/ProjectsComponent.astro
index 4cf2565..7031bff 100644
--- a/src/components/projects/ProjectsComponent.astro
+++ b/src/components/projects/ProjectsComponent.astro
@@ -67,20 +67,22 @@ import Project from "./Project.astro";
 		>
 			<TaskWidget
 				classList={`
-					widget
-					[perspective:200px] absolute [transform:translateX(-10px)_translateY(5px)_translateZ(-40px)_rotateY(-3deg)] 
-					w-full h-full
+					widget aspect-video
+					[perspective:200px] absolute
+					w-full
 					opacity-10
+					top-1/2 left-1/2
+					background-widget right
 					`}
 				client:visible
 			/>
 			<TaskWidget
 				classList={`
-					widget
+					widget aspect-video
 					[perspective:200px] absolute 
-					[transform:translateX(-20px)_translateZ(-40px)_rotateY(-3deg)] 
-					w-full h-full
-					hover:[transform:translateX(0)_translateY(0)_translateZ(0)_rotateY(0)]`}
+					frontfacing-widget right
+					top-1/2 left-1/2
+					w-full`}
 				client:visible
 			/>
 		</Project>
@@ -143,8 +145,8 @@ import Project from "./Project.astro";
 		.image-container:hover > img,
 		.image-container:hover .widget,
 		.image-container:hover video {
-			transform: rotateY(0deg) rotateX(0deg) translateZ(0px) translateX(0)
-				translateY(0);
+			transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
+				translateX(-50%) translateY(-50%);
 		}
 
 		.image-container:hover > .visit-div {
diff --git a/src/components/projects/TaskWidget.svelte b/src/components/projects/TaskWidget.svelte
index 80ab1c9..238e974 100644
--- a/src/components/projects/TaskWidget.svelte
+++ b/src/components/projects/TaskWidget.svelte
@@ -121,7 +121,7 @@
     let { classList }: Props = $props();
 </script>
 
-<div class={`${classList} aspect-video`}>
+<div class={`${classList} overflow-hidden`}>
     <!-- task bot -->
     <div class="task-widget absolute flex h-[99%] w-full flex-col">
         <div
@@ -163,6 +163,26 @@
 </div>
 
 <style>
+    .background-widget.left {
+        transform: translateX(calc(-50% + 25px)) translateY(calc(-50% + 5px))
+            translateZ(-50px) rotateY(5deg);
+    }
+
+    .background-widget.right {
+        transform: translateX(calc(-50%)) translateY(calc(-50% + 5px))
+            translateZ(-50px) rotateY(-3deg);
+    }
+
+    .frontfacing-widget.left {
+        transform: translateX(calc(-50% + 35px)) translateY(calc(-50%))
+            translateZ(-50px) rotateY(5deg);
+    }
+
+    .frontfacing-widget.right {
+        transform: translateX(calc(-50% - 10px)) translateY(-50%)
+            translateZ(-50px) rotateY(-3deg);
+    }
+
     .primary {
         animation: primary 20s linear infinite;
     }
diff --git a/src/components/projects/VideoProject.svelte b/src/components/projects/VideoProject.svelte
index 62fed37..150f0b9 100644
--- a/src/components/projects/VideoProject.svelte
+++ b/src/components/projects/VideoProject.svelte
@@ -89,24 +89,24 @@
         <img
             src={image_src}
             alt={image_alt}
-            class="absolute max-w-full
-                    rounded-xl
-                    border-2 border-solid border-white opacity-40
-                    {positionLeft
-                ? '[transform:rotateY(5deg)_translateX(50px)_translateY(5px)_translateZ(-50px)]'
-                : '[transform:rotateY(-5deg)_translateX(-20px)_translateY(5px)_translateZ(-50px)]'}"
+            class="background-img absolute
+                    top-1/2
+                    left-1/2 max-w-full rounded-xl border-2
+                    border-solid border-white
+                    opacity-40
+                    {positionLeft ? 'left' : 'right'}"
             width="700"
         />
 
         <!-- svelte-ignore a11y_media_has_caption -->
         <video
             width="700"
-            class="playable absolute max-w-full
-					rounded-xl border-2 border-solid border-white
+            class="playable frontfacing-vid absolute
+					top-1/2 left-1/2 max-w-full rounded-xl
+                    border-2
+                    border-solid border-white
                     opacity-100
-                    {positionLeft
-                ? '[transform:rotateY(5deg)_translateX(60px)_translateZ(-50px)]'
-                : '[transform:rotateY(-5deg)_translateX(-30px)_translateZ(-50px)]'}"
+                    {positionLeft ? 'left' : 'right'}"
         >
             <source src={video_src} type="video/webm" />
         </video>
@@ -147,3 +147,25 @@
         </div>
     </div>
 </div>
+
+<style>
+    .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-vid.left {
+        transform: translateX(calc(-50% + 35px)) translateY(calc(-50%))
+            translateZ(-50px) rotateY(5deg);
+    }
+
+    .frontfacing-vid.right {
+        transform: translateX(calc(-50% - 10px)) translateY(-50%)
+            translateZ(-50px) rotateY(-3deg);
+    }
+</style>