updated perspective code

src/components/projects/Project.astro

@@ -8,8 +8,9 @@ interface Tag {
 }
 
 interface Props {
-	image: ImageMetadata;
+	position?: "left" | "right";
-	alt: string;
+	image?: ImageMetadata;
+	alt?: string;
 	href: string;
 	title: string;
 	description: string;
@@ -25,35 +26,50 @@ const {
 	description,
 	label = "View Repository",
 	tags = [],
+	position = "left",
 } = Astro.props;
+
+const leftProject = position == "left";
 ---
 
 <div
-	class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
+	class="flex h-fit w-full flex-col justify-center px-10 lg:px-20"
+	class:list={leftProject ? "lg:flex-row" : "lg:flex-row-reverse"}
 >
 	<div
 		class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
 	>
-		<Image
+		<slot />
-			src={image}
+		{
-			alt={alt}
+			image && alt &&
-			class=`absolute max-w-full
+			(
-					aspect-video
+				<Image
-                    top-1/2 left-1/2
+					src={image}
-                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
+					alt={alt}
-                    border-2 border-solid border-white rounded-xl`
+					class={`absolute max-w-full
-			width="700"
+							aspect-video
-		/>
+							opacity-40
-		<Image
+							border-2 border-solid border-white rounded-xl`}
-			src={image}
+					class:list={leftProject
-			alt={alt}
+						? "[transform:translateX(50px)_translateY(5px)_rotateY(5deg)_rotateX(0deg)_translateZ(-50px)]"
-			width="700"
+						: "[transform:translateZ(-50px)_rotateY(-3deg)]"}
-			class=`absolute max-w-full
+					width="700"
-					aspect-video
+				/>
-                    top-1/2 left-1/2
+				<Image
-                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-100
+					src={image}
-                    border-2 border-solid border-white rounded-xl`
+					alt={alt}
-		/>
+					width="700"
+					class={`absolute max-w-full
+							aspect-video
+							opacity-100
+							border-2 border-solid border-white rounded-xl`}
+					class:list={leftProject
+						? "[transform:rotateY(5deg)_rotateX(0deg)_translateX(60px)_translateZ(-50px)]"
+						: "[transform:translateZ(-50px)_rotateY(-3deg)]"}
+				/>
+			)
+		}
+		
 		<div
 			class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
 		>
@@ -74,18 +90,24 @@ const {
 		>
 	</div>
 	<div
-		class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-start lg:px-10"
+		class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:px-10"
+		class:list={leftProject ? "lg:items-start" : "lg:items-end"}
 	>
-		<h2 class="mb-5 text-center text-3xl font-bold lg:text-left">
+		<h2
+			class="mb-5 text-center text-3xl font-bold"
+			class:list={leftProject ? "lg:text-left" : "lg:text-right"}
+		>
 			{title}
 		</h2>
 		<p
-			class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-left"
+			class="max-w-lg text-center text-xl text-balance lg:max-w-none"
+			class:list={leftProject ? "lg:text-left" : "lg:text-right"}
 		>
 			{description}
 		</p>
 		<div
-			class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
+			class="mt-5 flex w-full flex-row flex-wrap justify-center"
+			class:list={leftProject ? "lg:justify-start" : "lg:justify-end"}
 		>
 			{
 				tags.map((tag) => (
@@ -110,8 +132,7 @@ const {
 	}
 	@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 {

src/components/projects/ProjectRight.astro

@@ -1,121 +0,0 @@
----
-import { Image } from "astro:assets";
-
-interface Tag {
-	text: string;
-	textColor: string;
-	bgColor: string;
-}
-
-interface Props {
-	image: ImageMetadata;
-	alt: string;
-	href: string;
-	title: string;
-	description: string;
-	label?: string;
-	tags?: Tag[];
-}
-
-const {
-	image,
-	alt,
-	href,
-	title,
-	description,
-	label = "View Repository",
-	tags,
-} = Astro.props;
----
-
-<div
-	class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
->
-	<div
-		class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-end lg:px-10"
-	>
-		<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
-			{title}
-		</h2>
-		<p
-			class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-right"
-		>
-			{description}
-		</p>
-		<div
-			class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
-		>
-			{
-				tags?.map((tag) => (
-					<div
-						class="my-1 mr-1 w-fit rounded-full px-3 py-1 transition-colors duration-300"
-						style={`
-							background-color: ${tag.bgColor || "black"};
-							color: ${tag.textColor || "white"};
-						`}
-					>
-						{tag.text}
-					</div>
-				))
-			}
-		</div>
-	</div>
-	<div class="mb-10 flex items-center justify-center lg:hidden">
-		<a
-			href={href}
-			target="_blank"
-			class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
-			>{label}</a
-		>
-	</div>
-	<div
-		class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
-	>
-		<Image
-			src={image}
-			alt={alt}
-			class=`absolute max-w-full
-                    top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
-                    border-2 border-solid border-white rounded-xl`
-			`
-			width="700"
-		/>
-		<Image
-			src={image}
-			alt={alt}
-			width="700"
-			class=`absolute max-w-full
-                    top-1/2 left-1/2
-                    [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-100
-                    border-2 border-solid border-white rounded-xl`
-		/>
-		<div
-			class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
-		>
-			<a
-				href="https://github.com/liyunze-coding/TwitchPlaysX"
-				target="_blank"
-				class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
-				>{label}</a
-			>
-		</div>
-	</div>
-</div>
-
-<style>
-	.image-container img {
-		transition: transform 0.5s ease-in-out;
-	}
-	@media (min-width: 1025px) {
-		.image-container:hover > img {
-			transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
-				translateX(-50%) translateY(-50%);
-		}
-
-		.image-container:hover > .visit-div {
-			opacity: 100%;
-			transition: opacity 0.3s ease-in-out;
-			transition-delay: 0.3s;
-		}
-	}
-</style>

src/components/projects/ProjectsComponent.astro

@@ -3,8 +3,7 @@ import TaskWidget from "./TaskWidget.svelte";
 import CoworkingGuide from "../images/projects/coworking-guide.webp";
 import Wnrs from "../images/projects/wnrs.webp";
 import TwitchPlays from "../images/projects/twitchplays.webp";
-import ProjectLeft from "./ProjectLeft.astro";
+import Project from "./Project.astro";
-import ProjectRight from "./ProjectRight.astro";
 ---
 
 <div
@@ -12,7 +11,8 @@ import ProjectRight from "./ProjectRight.astro";
 	class="flex h-fit flex-col items-center [perspective:1000px]"
 >
 	<div class="w-full max-w-[1440px]">
-		<ProjectLeft
+		<Project
+			position="left"
 			image={CoworkingGuide}
 			alt="coworking guide"
 			href="https://coworking-guide.vercel.app/"
@@ -37,55 +37,39 @@ import ProjectRight from "./ProjectRight.astro";
 				},
 			]}
 		/>
-		<div
+		<Project
-			class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
+			position="right"
+			href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
+			title="Chat-task-tic widget"
+			label="View Repository"
+			description={`
+				Used by 100+ Twitch streamers, allow viewers and streamers
+				to add their own tasks to the widget for accountability!
+				Easy to setup and the customization possibilities are
+				endless!`}
 		>
-			<div
+			<TaskWidget
-				class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-end lg:px-10"
+				classList={`
-			>
+					widget
-				<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
+					[perspective:200px] absolute [transform:translateX(-10px)_translateY(5px)_translateZ(-40px)_rotateY(-3deg)] 
-					Chat-Task-Tic Widget
+					w-full h-full
-				</h2>
+					opacity-10
-				<p
+					`}
-					class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-right"
+				client:visible
-				>
+			/>
-					Used by 100+ Twitch streamers, allow viewers and streamers
+			<TaskWidget
-					to add their own tasks to the widget for accountability!
+				classList={`
-					Easy to setup and the customization possibilities are
+					widget
-					endless!
+					[perspective:200px] absolute 
-				</p>
+					[transform:translateX(-20px)_translateZ(-40px)_rotateY(-3deg)] 
-				<div
+					w-full h-full
-					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
+					hover:[transform:translateX(0)_translateY(0)_translateZ(0)_rotateY(0)]`}
-				>
+				client:visible
-					<div
+			/>
-						class="bg-html my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
+		</Project>
-					>
-						HTML
-					</div>
-					<div
-						class="my-1 mr-1 w-fit rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300"
-					>
-						CSS
-					</div>
-					<div
-						class="my-1 mr-1 w-fit rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300"
-					>
-						Javascript
-					</div>
-				</div>
-			</div>
-			<div class="mb-10 flex items-center justify-center lg:hidden">
-				<a
-					href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
-					target="_blank"
-					class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-600"
-					>View repository</a
-				>
-			</div>
-			<TaskWidget client:visible />
-		</div>
 
-		<ProjectLeft
+		<Project
+			position="left"
 			image={Wnrs}
 			alt="We're not really strangers"
 			href="https://liyunze-coding.github.io/wnrs/"
@@ -105,7 +89,8 @@ import ProjectRight from "./ProjectRight.astro";
 				},
 			]}
 		/>
-		<ProjectRight
+		<Project
+			position="right"
 			image={TwitchPlays}
 			alt="Twitch Plays X"
 			href="https://github.com/liyunze-coding/TwitchPlaysX"
@@ -130,14 +115,17 @@ import ProjectRight from "./ProjectRight.astro";
 	</div>
 </div>
 
-<style>
+<style is:global>
-	.image-container img {
+	.image-container img,
+	.image-container .widget {
 		transition: transform 0.5s ease-in-out;
 	}
+
 	@media (min-width: 1025px) {
-		.image-container:hover > img {
+		.image-container:hover > img,
-			transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
+		.image-container:hover .widget {
-				translateX(-50%) translateY(-50%);
+			transform: rotateY(0deg) rotateX(0deg) translateZ(0px) translateX(0)
+				translateY(0);
 		}
 
 		.image-container:hover > .visit-div {

src/components/projects/TaskWidget.svelte

@@ -113,24 +113,24 @@
             task: "anki flashcards",
         },
     ];
+
+    interface Props {
+        classList: string;
+    }
+
+    let { classList }: Props = $props();
 </script>
 
-<div
+<div class={`${classList} aspect-video`}>
-    class="image-container relative mr-0 mb-3 ml-0 aspect-video [perspective:200px] md:mr-5 lg:mr-0 lg:mb-0 lg:ml-1 lg:w-1/2"
->
     <!-- task bot -->
-    <div
+    <div class="task-widget absolute flex h-[99%] w-full flex-col">
-        class="task-widget absolute top-1/2 left-1/2 flex
-                            h-[99%] w-full
-                            [transform:translateX(-50%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)] flex-col opacity-30"
-    >
         <div
             class="flex w-full flex-row items-center justify-between
-                            rounded-lg
+                    rounded-lg
-                            border-2 border-solid
+                    border-2 border-solid
-                            border-white bg-black
+                    border-white bg-black
-                            px-5 py-2 font-['Fredoka',_sans-serif] text-xl
+                    px-5 py-2 font-['Fredoka',_sans-serif] text-xl
-                            text-white"
+                    text-white"
         >
             <span>Hover here!</span>
             <span>0/100+</span>
@@ -160,84 +160,9 @@
             </div>
         </div>
     </div>
-    <div
-        class="task-widget absolute top-1/2 left-1/2
-                            flex h-[99%]
-                            w-full [transform:translateX(-51%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] flex-col"
-    >
-        <div
-            class="flex w-full flex-row items-center justify-between
-                            rounded-lg
-                            border-2 border-solid
-                            border-white bg-black
-                            px-5 py-2 font-['Fredoka',_sans-serif] text-xl
-                            text-white"
-        >
-            <span>Hover here!</span>
-            <span>0/100+</span>
-        </div>
-        <div
-            class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
-        >
-            <div class="scroll-element primary absolute w-full px-1">
-                {#each streamers as { streamer, task }}
-                    <div
-                        class="my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
-                                    overflow-ellipsis whitespace-nowrap text-white"
-                    >
-                        O {streamer} : {task}
-                    </div>
-                {/each}
-            </div>
-            <div class="scroll-element secondary absolute w-full px-1">
-                {#each streamers as { streamer, task }}
-                    <div
-                        class="my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
-                                    overflow-ellipsis whitespace-nowrap text-white"
-                    >
-                        O {streamer} : {task}
-                    </div>
-                {/each}
-            </div>
-        </div>
-    </div>
-    <div
-        class="visit-div absolute top-1/2 left-1/2 h-full w-full
-                    [transform:translateX(-50%)_translateY(-50%)]
-                    overflow-hidden rounded-md border-2
-                    border-solid border-white bg-[rgba(0,0,0,0.5)]
-                    opacity-0"
-    >
-        <a
-            href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
-            target="_blank"
-            class="absolute top-1/2 left-1/2 hidden
-                        [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-500 px-5 py-3
-                        font-bold
-                        opacity-100 transition-colors
-                        duration-300 hover:bg-white
-                        hover:text-blue-500 lg:block">View repository</a
-        >
-    </div>
 </div>
 
 <style>
-    .image-container .task-widget {
-        transition: transform 0.5s ease-in-out;
-    }
-    @media (min-width: 1025px) {
-        .image-container:hover > .task-widget {
-            transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
-                translateX(-50%) translateY(-50%);
-        }
-
-        .image-container:hover > .visit-div {
-            opacity: 100%;
-            transition: opacity 0.3s ease-in-out;
-            transition-delay: 0.3s;
-        }
-    }
-
     .primary {
         animation: primary 20s linear infinite;
     }