fixed widget project

src/components/projects/ProjectsComponent.astro

@@ -67,20 +67,22 @@ import Project from "./Project.astro";
 		>
 			<TaskWidget
 				classList={`
-					widget
+					widget aspect-video
-					[perspective:200px] absolute [transform:translateX(-10px)_translateY(5px)_translateZ(-40px)_rotateY(-3deg)] 
+					[perspective:200px] absolute
-					w-full h-full
+					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)] 
+					frontfacing-widget right
-					w-full h-full
+					top-1/2 left-1/2
-					hover:[transform:translateX(0)_translateY(0)_translateZ(0)_rotateY(0)]`}
+					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)
+			transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
-				translateY(0);
+				translateX(-50%) translateY(-50%);
 		}
 
 		.image-container:hover > .visit-div {

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;
     }

src/components/projects/VideoProject.svelte

@@ -89,24 +89,24 @@
         <img
             src={image_src}
             alt={image_alt}
-            class="absolute max-w-full
+            class="background-img absolute
-                    rounded-xl
+                    top-1/2
-                    border-2 border-solid border-white opacity-40
+                    left-1/2 max-w-full rounded-xl border-2
-                    {positionLeft
+                    border-solid border-white
-                ? '[transform:rotateY(5deg)_translateX(50px)_translateY(5px)_translateZ(-50px)]'
+                    opacity-40
-                : '[transform:rotateY(-5deg)_translateX(-20px)_translateY(5px)_translateZ(-50px)]'}"
+                    {positionLeft ? 'left' : 'right'}"
             width="700"
         />
 
         <!-- svelte-ignore a11y_media_has_caption -->
         <video
             width="700"
-            class="playable absolute max-w-full
+            class="playable frontfacing-vid absolute
-					rounded-xl border-2 border-solid border-white
+					top-1/2 left-1/2 max-w-full rounded-xl
+                    border-2
+                    border-solid border-white
                     opacity-100
-                    {positionLeft
+                    {positionLeft ? 'left' : 'right'}"
-                ? '[transform:rotateY(5deg)_translateX(60px)_translateZ(-50px)]'
-                : '[transform:rotateY(-5deg)_translateX(-30px)_translateZ(-50px)]'}"
         >
             <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>