RythonDev/src/components/projects/Project.astro

---
import { Image } from "astro:assets";

interface Props {
	position?: "left" | "right";
	image?: ImageMetadata;
	alt?: string;
	href: string;
	title: string;
	description: string;
	label?: string;
	tags?: Array<string>;
}

const {
	image,
	alt,
	href,
	title,
	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:px-20 mb-10"
	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"
	>
		<slot />
		{
			image && alt &&
			(
				<Image
					src={image}
					alt={alt}
					class={`absolute max-w-full
							aspect-video
							opacity-40
							border-2 border-solid border-white rounded-xl
							top-1/2 left-1/2
							background-img`}
					class:list={leftProject
						? "left"
						: "right"}
					width={700}
				/>
				<Image
					src={image}
					alt={alt}
					width={700}
					class={`absolute max-w-full
							aspect-video
							opacity-100
							border-2 border-solid border-white rounded-xl
							top-1/2 left-1/2 frontfacing-img`}
					class:list={leftProject
						? "left"
						: "right"}
				/>
			)
		}
		
		<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={href}
				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 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="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"
			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"
			class:list={leftProject ? "lg:text-left" : "lg:text-right"}
		>
			{description}
		</p>
		<div
			class="mt-5 flex w-full flex-row flex-wrap justify-center"
			class:list={leftProject ? "lg:justify-start" : "lg:justify-end"}
		>
			{
				tags.map((tag) => (
					<div
						class="my-1 mr-1 w-fit rounded-full px-3 py-1 transition-colors duration-300 text-white bg-secondary"
					>
						{tag}
					</div>
				))
			}
		</div>
	</div>
</div>

<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) translateX(-50%) translateY(-50%);
		}

		.image-container:hover > .visit-div {
			opacity: 100%;
			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>