---
import TaskWidget from "./TaskWidget.svelte";
import CoworkingGuide from "../images/projects/coworking-guide.webp";
import PortfolioRoastBot from "../images/projects/portfolio-roast-bot.webp";
import VideoProject from "./VideoProject.svelte";
import Project from "./Project.astro";
---

<div
	id="projects"
	class="flex h-fit flex-col items-center [perspective:1000px]"
>
	<div class="w-full max-w-[1440px]">
		<Project
			position="left"
			image={CoworkingGuide}
			alt="coworking guide"
			href="https://coworking-guide.vercel.app/"
			title="Coworking Guide"
			label="Visit Site"
			description="A guide to coworking streams for streamers, covers wide range of topics from tips on how to get started with setting up stream to how to grow your audience!"
			tags={["Astro", "Typescript", "Markdown"]}
		/>

		<VideoProject
			client:visible
			image_src="/images/projects/aim-lab.webp"
			image_alt="Computer Vision AimLab Bot"
			position="right"
			video_src="/videos/aim_lab_demo.webm"
			title="Computer Vision AimLab Bot"
			description={`
                A script that plays AimLab, a game that helps improve your aim in FPS games. Uses OpenCV to detect the targets and win32API to move the mouse and click.
            `}
			tags={["Python", "OpenCV", "win32API"]}
		/>

		<Project
			position="left"
			image={PortfolioRoastBot}
			alt="Portfolio Roast Bot"
			href="https://codeberg.org/RythonDev/portfolio-roast-bot"
			label="View Repository"
			title="Portfolio Roast Bot"
			description="A Discord bot that retrieves specific portfolio tips via slash commands, removing the need for members to manually search the FAQ forum for website best practices."
			tags={["Rust", "SQLite", "Forgejo Actions"]}
		/>

		<Project
			position="right"
			href="https://github.com/liyunze-coding/rython-task-bot-v2"
			title="Multi-Task 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!`}
			tags={["HTML", "CSS", "Javascript", "C#"]}
		>
			<TaskWidget
				classList={`
					widget h-full
					[perspective:200px] absolute
					w-full
					opacity-10
					top-1/2 left-1/2
					background-widget right
					`}
				client:visible
			/>
			<TaskWidget
				classList={`
					widget h-full
					[perspective:200px] absolute 
					frontfacing-widget right
					top-1/2 left-1/2
					w-full`}
				client:visible
			/>
		</Project>
	</div>
</div>

<style is:global>
	.image-container img,
	.image-container .widget,
	.image-container video {
		transition: transform 0.5s ease-in-out;
	}

	@media (min-width: 1025px) {
		.image-container:hover > img,
		.image-container:hover .widget,
		.image-container:hover video {
			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>