rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 15:53:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

replaced "HexGuess" with WNRS

Browse source
This commit is contained in:
liyunze 2025-05-09 16:33:14 +10:00
parent f542b11d41
commit a7733018a7
2 changed files with 276 additions and 276 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

552
src/components/sections/ProjectsComponent.astro
View file

@ -2,305 +2,305 @@
import TaskWidget from "./TaskWidget.svelte"; import TaskWidget from "./TaskWidget.svelte";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import CoworkingGuide from "./images/projects/coworking-guide.webp"; import CoworkingGuide from "./images/projects/coworking-guide.webp";
import HexGuess from "./images/projects/hexguess.webp"; import Wnrs from "./images/projects/wnrs.webp";
import TwitchPlays from "./images/projects/twitchplays.webp"; import TwitchPlays from "./images/projects/twitchplays.webp";
--- ---
<div <div
id="projects" id="projects"
class="flex h-fit flex-col items-center [perspective:1000px]" class="flex h-fit flex-col items-center [perspective:1000px]"
> >
<div class="w-full max-w-[1440px]"> <div class="w-full max-w-[1440px]">
<div <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:flex-row lg:px-20"
> >
<div <div
class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2" class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2"
> >
<Image <Image
src={CoworkingGuide} src={CoworkingGuide}
alt="coworking guide" alt="coworking guide"
class=`absolute max-w-full class=`absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
border-2 border-solid border-white rounded-xl` border-2 border-solid border-white rounded-xl`
width="700" width="700"
/> />
<Image <Image
src={CoworkingGuide} src={CoworkingGuide}
alt="coworking guide" alt="coworking guide"
width="700" width="700"
class=`absolute max-w-full class=`absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
border-2 border-solid border-white rounded-xl` border-2 border-solid border-white rounded-xl`
/> />
<div <div
class="visit-div absolute left-1/2 top-1/2 aspect-video w-[700px] max-w-full rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0 [transform:translateX(-50%)_translateY(-50%)]" class="visit-div absolute left-1/2 top-1/2 aspect-video w-[700px] max-w-full rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0 [transform:translateX(-50%)_translateY(-50%)]"
> >
<a <a
href="https://coworking-guide.vercel.app/" href="https://coworking-guide.vercel.app/"
target="_blank" target="_blank"
class="opacity-1 absolute left-1/2 top-1/2 hidden rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 [transform:translateX(-50%)_translateY(-50%)] hover:bg-white hover:text-blue-500 lg:block" class="opacity-1 absolute left-1/2 top-1/2 hidden rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 [transform:translateX(-50%)_translateY(-50%)] hover:bg-white hover:text-blue-500 lg:block"
>Visit site</a >Visit site</a
> >
</div> </div>
</div> </div>
<div class="mb-10 flex items-center justify-center lg:hidden"> <div class="mb-10 flex items-center justify-center lg:hidden">
<a <a
href="https://coworking-guide.vercel.app/" href="https://coworking-guide.vercel.app/"
target="_blank" target="_blank"
class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-500" class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-500"
>View repository</a >View repository</a
> >
</div> </div>
<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:items-start lg:px-10"
> >
<h2 class="mb-5 text-center text-3xl font-bold lg:text-left"> <h2 class="mb-5 text-center text-3xl font-bold lg:text-left">
Coworking Guide Coworking Guide
</h2> </h2>
<p <p
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left" class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left"
> >
A guide to coworking streams for streamers, covers wide A guide to coworking streams for streamers, covers wide
range of topics from tips on how to get started with setting range of topics from tips on how to get started with setting
up stream to how to grow your audience! up stream to how to grow your audience!
</p> </p>
<div <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 lg:justify-start"
> >
<div <div
class="my-1 mr-1 w-fit rounded-full bg-white px-3 py-1 text-black transition-colors duration-300" class="my-1 mr-1 w-fit rounded-full bg-white px-3 py-1 text-black transition-colors duration-300"
> >
Astro Astro
</div> </div>
<div <div
class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300" class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
> >
TypeScript TypeScript
</div> </div>
<div <div
class="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300" class="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300"
> >
Markdown Markdown
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16" class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
> >
<div <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" 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"> <h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
Chat-Task-Tic Widget Chat-Task-Tic Widget
</h2> </h2>
<p <p
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-right" class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-right"
> >
Used by 100+ Twitch streamers, allow viewers and streamers Used by 100+ Twitch streamers, allow viewers and streamers
to add their own tasks to the widget for accountability! to add their own tasks to the widget for accountability!
Easy to setup and the customization possibilities are Easy to setup and the customization possibilities are
endless! endless!
</p> </p>
<div <div
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end" class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
> >
<div <div
class="my-1 mr-1 w-fit rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300" class="my-1 mr-1 w-fit rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300"
> >
HTML HTML
</div> </div>
<div <div
class="my-1 mr-1 w-fit rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300" class="my-1 mr-1 w-fit rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300"
> >
CSS CSS
</div> </div>
<div <div
class="my-1 mr-1 w-fit rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300" class="my-1 mr-1 w-fit rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300"
> >
Javascript Javascript
</div> </div>
</div> </div>
</div> </div>
<div class="mb-10 flex items-center justify-center lg:hidden"> <div class="mb-10 flex items-center justify-center lg:hidden">
<a <a
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity" href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
target="_blank" target="_blank"
class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-600" class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-600"
>View repository</a >View repository</a
> >
</div> </div>
<TaskWidget client:visible /> <TaskWidget client:visible />
</div> </div>
<div <div
class="mt-5 flex h-fit w-full flex-col justify-center px-10 lg:mt-0 lg:flex-row lg:px-20" class="mt-5 flex h-fit w-full flex-col justify-center px-10 lg:mt-0 lg:flex-row lg:px-20"
> >
<div <div
class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2" class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2"
> >
<Image <Image
src={HexGuess} src={Wnrs}
alt="Hex Guess" alt="Hex Guess"
class=`absolute max-w-full class=`absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
border-2 border-solid border-white rounded-xl` border-2 border-solid border-white rounded-xl
width="700" aspect-video`
/> width="700"
<Image />
src={HexGuess} <Image
alt="Hex Guess" src={Wnrs}
width="700" alt="Hex Guess"
class=`absolute max-w-full width="700"
class=`absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
border-2 border-solid border-white rounded-xl` border-2 border-solid border-white rounded-xl
/> aspect-video`
<div />
class="visit-div absolute left-1/2 top-1/2 aspect-video w-[700px] max-w-full rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0 [transform:translateX(-50%)_translateY(-50%)]" <div
> class="visit-div absolute left-1/2 top-1/2 aspect-video w-[700px] max-w-full rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0 [transform:translateX(-50%)_translateY(-50%)]"
<a >
href="https://hex-guess.vercel.app/" <a
target="_blank" href="https://liyunze-coding.github.io/wnrs/"
class="opacity-1 absolute left-1/2 top-1/2 hidden rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 [transform:translateX(-50%)_translateY(-50%)] hover:bg-white hover:text-blue-500 lg:block" target="_blank"
>Visit site</a class="opacity-1 absolute left-1/2 top-1/2 hidden rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 [transform:translateX(-50%)_translateY(-50%)] hover:bg-white hover:text-blue-500 lg:block"
> >Visit site</a
</div> >
</div> </div>
<div class="mb-10 flex items-center justify-center lg:hidden"> </div>
<a <div class="mb-10 flex items-center justify-center lg:hidden">
href="https://hex-guess.vercel.app/" <a
target="_blank" href="https://hex-guess.vercel.app/"
class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-500" target="_blank"
>View repository</a class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-500"
> >View repository</a
</div> >
<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" <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"
<h2 class="mb-5 text-center text-3xl font-bold">HexGuess</h2> >
<p <h2 class="mb-5 text-center text-3xl font-bold">
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left" We're Not Really Strangers
> </h2>
Decode colours in 5 attempts. Guess the hexadecimal code and <p
receive instant feedback! Built with Next.JS, TailwindCSS class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left"
and TypeScript. >
</p> Otherwise abbreviated as "WNRS", this is a digital
<div adaptation of the popular card game designed to foster
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start" meaningful connections through engaging questions and
> prompts.
<div </p>
class="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300" <div
> class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
NextJS >
</div> <div
<div class="my-1 mr-1 w-fit rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300"
class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300" >
> React
Typescript </div>
</div> <div
<div class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
class="my-1 mr-1 w-fit rounded-full bg-[#07B6D4] px-3 py-1 text-black transition-colors duration-300" >
> Typescript
TailwindCSS </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div
<div class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16" >
> <div
<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"
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">
<h2 class="mb-5 text-center text-3xl font-bold lg:text-right"> Twitch Plays X
Twitch Plays X </h2>
</h2> <p
<p class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-right"
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-right" >
> Allow Twitch chatters play games such as Pokemon! Chatters
Allow Twitch chatters play games such as Pokemon! Chatters can enter messages such as "up up down down left right B A"
can enter messages such as "up up down down left right B A" and the Python program will trigger the corresponding
and the Python program will trigger the corresponding keypresses.
keypresses. </p>
</p> <div
<div class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end" >
> <div
<div class="my-1 mr-1 w-fit rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300"
class="my-1 mr-1 w-fit rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300" >
> Python
Python </div>
</div> <div
<div class="my-1 mr-1 w-fit rounded-full bg-[#0078D4] px-3 py-1 text-white transition-colors duration-300"
class="my-1 mr-1 w-fit rounded-full bg-[#0078D4] px-3 py-1 text-white transition-colors duration-300" >
> win32API
win32API </div>
</div> </div>
</div> </div>
</div> <div class="mb-10 flex items-center justify-center lg:hidden">
<div class="mb-10 flex items-center justify-center lg:hidden"> <a
<a href="https://github.com/liyunze-coding/TwitchPlaysX"
href="https://github.com/liyunze-coding/TwitchPlaysX" target="_blank"
target="_blank" class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-500"
class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-500" >View repository</a
>View repository</a >
> </div>
</div> <div
<div class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2"
class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2" >
> <Image
<Image src={TwitchPlays}
src={TwitchPlays} alt="Twitch Plays X"
alt="Twitch Plays X" class=`absolute max-w-full
class=`absolute max-w-full
top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40 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` border-2 border-solid border-white rounded-xl`
` `
width="700" width="700"
/> />
<Image <Image
src={TwitchPlays} src={TwitchPlays}
alt="Twitch Plays X" alt="Twitch Plays X"
width="700" width="700"
class=`absolute max-w-full class=`absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-1 [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-1
border-2 border-solid border-white rounded-xl` border-2 border-solid border-white rounded-xl`
/> />
<div <div
class="visit-div absolute left-1/2 top-1/2 aspect-video w-[700px] max-w-full rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0 [transform:translateX(-50%)_translateY(-50%)]" class="visit-div absolute left-1/2 top-1/2 aspect-video w-[700px] max-w-full rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0 [transform:translateX(-50%)_translateY(-50%)]"
> >
<a <a
href="https://github.com/liyunze-coding/TwitchPlaysX" href="https://github.com/liyunze-coding/TwitchPlaysX"
target="_blank" target="_blank"
class="opacity-1 absolute left-1/2 top-1/2 hidden rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 [transform:translateX(-50%)_translateY(-50%)] hover:bg-white hover:text-blue-500 lg:block" class="opacity-1 absolute left-1/2 top-1/2 hidden rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 [transform:translateX(-50%)_translateY(-50%)] hover:bg-white hover:text-blue-500 lg:block"
>View repository</a >View repository</a
> >
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style> <style>
.image-container img { .image-container img {
transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out;
} }
@media (min-width: 1025px) { @media (min-width: 1025px) {
.image-container:hover > img { .image-container:hover > img {
transform: rotateY(0deg) rotateX(0deg) translateZ(0px) transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
translateX(-50%) translateY(-50%); translateX(-50%) translateY(-50%);
} }
.image-container:hover > .visit-div { .image-container:hover > .visit-div {
opacity: 100%; opacity: 100%;
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
transition-delay: 0.3s; transition-delay: 0.3s;
} }
} }
</style> </style>

BIN
src/components/sections/images/projects/wnrs.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB