RythonDev/src/components/projects/ProjectsComponent.astro
2026-08-29 15:51:25 +08:00

106 lines
3 KiB
Text

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