mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
165 lines
3.9 KiB
Text
165 lines
3.9 KiB
Text
---
|
|
import TaskWidget from "./TaskWidget.svelte";
|
|
import CoworkingGuide from "../images/projects/coworking-guide.webp";
|
|
import Wnrs from "../images/projects/wnrs.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={[
|
|
{
|
|
text: "Astro",
|
|
bgColor: "white",
|
|
textColor: "black",
|
|
},
|
|
{
|
|
text: "TypeScript",
|
|
bgColor: "#3178C6",
|
|
textColor: "white",
|
|
},
|
|
{
|
|
text: "Markdown",
|
|
bgColor: "black",
|
|
textColor: "white",
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<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={[
|
|
{
|
|
text: "Python",
|
|
textColor: "white",
|
|
bgColor: "var(--color-python)",
|
|
},
|
|
{
|
|
text: "OpenCV",
|
|
textColor: "white",
|
|
bgColor: "var(--color-opencv)",
|
|
},
|
|
{
|
|
text: "win32API",
|
|
textColor: "white",
|
|
bgColor: "var(--color-win32api)",
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<Project
|
|
position="left"
|
|
image={Wnrs}
|
|
alt="We're not really strangers"
|
|
href="https://liyunze-coding.github.io/wnrs/"
|
|
label="Visit Site"
|
|
title="We're not really strangers"
|
|
description="This is a digital adaptation of the popular card game designed to foster meaningful connections through engaging questions and prompts. Made into a PWA for offline usage on mobile!"
|
|
tags={[
|
|
{
|
|
text: "React",
|
|
bgColor: "var(--color-react)",
|
|
textColor: "black",
|
|
},
|
|
{
|
|
text: "TypeScript",
|
|
bgColor: "var(--color-typescript)",
|
|
textColor: "white",
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<Project
|
|
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!`}
|
|
tags={[
|
|
{
|
|
text: "HTML",
|
|
bgColor: "var(--color-html)",
|
|
textColor: "white",
|
|
},
|
|
{
|
|
text: "CSS",
|
|
bgColor: "var(--color-blue-600)",
|
|
textColor: "white",
|
|
},
|
|
{
|
|
text: "Javascript",
|
|
bgColor: "var(--color-yellow-500)",
|
|
textColor: "black",
|
|
},
|
|
]}
|
|
>
|
|
<TaskWidget
|
|
classList={`
|
|
widget aspect-video
|
|
[perspective:200px] absolute
|
|
w-full
|
|
opacity-10
|
|
top-1/2 left-1/2
|
|
background-widget right
|
|
`}
|
|
client:visible
|
|
/>
|
|
<TaskWidget
|
|
classList={`
|
|
widget aspect-video
|
|
[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>
|