mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 15:53:57 +00:00
optimized projects
This commit is contained in:
liyunze
parent
208a700fe6
commit
eb28e0c151
10 changed files with 696 additions and 787 deletions
|
|
@ -1,67 +1,67 @@
|
||||||
<a href="https://github.com/liyunze-coding" target="_blank">
|
<a href="https://github.com/liyunze-coding" target="_blank">
|
||||||
<div
|
<div
|
||||||
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/socials/github.svg"
|
src="/images/socials/github.svg"
|
||||||
alt="github"
|
alt="github"
|
||||||
class="aspect-square max-w-full"
|
class="aspect-square max-w-full"
|
||||||
width="20"
|
width="20"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://codepen.io/rythondev" target="_blank">
|
<a href="https://codepen.io/rythondev" target="_blank">
|
||||||
<div
|
<div
|
||||||
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/socials/codepen.svg"
|
src="/images/socials/codepen.svg"
|
||||||
alt="codepen"
|
alt="codepen"
|
||||||
class="w-5 h-5 aspect-square"
|
class="w-5 h-5 aspect-square"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://youtube.com/@RythonDev" target="_blank">
|
<a href="https://youtube.com/@RythonDev" target="_blank">
|
||||||
<div
|
<div
|
||||||
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#00ffff]"
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#00ffff]"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/socials/youtube.svg"
|
src="/images/socials/youtube.svg"
|
||||||
alt="youtube"
|
alt="youtube"
|
||||||
class="w-5 h-5 aspect-square"
|
class="w-5 h-5 aspect-square"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://twitch.tv/RythonDev" target="_blank">
|
<a href="https://twitch.tv/RythonDev" target="_blank">
|
||||||
<div
|
<div
|
||||||
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#6eb900]"
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#6eb900]"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/socials/twitch.svg"
|
src="/images/socials/twitch.svg"
|
||||||
alt="twitch"
|
alt="twitch"
|
||||||
class="w-4 h-4 aspect-square"
|
class="w-4 h-4 aspect-square"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://instagram.com/RythonDev" target="_blank">
|
<a href="https://instagram.com/RythonDev" target="_blank">
|
||||||
<div
|
<div
|
||||||
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#1bbfa0]"
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#1bbfa0]"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/socials/instagram.svg"
|
src="/images/socials/instagram.svg"
|
||||||
alt="twitch"
|
alt="twitch"
|
||||||
class="w-4 h-4 aspect-square"
|
class="w-4 h-4 aspect-square"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://ko-fi.com/rython" target="_blank">
|
<a href="https://ko-fi.com/rython" target="_blank">
|
||||||
<div
|
<div
|
||||||
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-[#FF5E5B] transition-colors duration-150"
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-[#FF5E5B] transition-colors duration-150"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/socials/kofi.webp"
|
src="/images/socials/kofi.webp"
|
||||||
alt="twitch"
|
alt="twitch"
|
||||||
class="w-4 h-4 aspect-square translate-x-[1px] scale-125"
|
class="w-4 h-4 aspect-square translate-x-[1px] scale-125"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
370
src/components/sections/ProjectsComponent.astro
Normal file
370
src/components/sections/ProjectsComponent.astro
Normal file
|
|
@ -0,0 +1,370 @@
|
||||||
|
---
|
||||||
|
import TaskWidget from "./TaskWidget.svelte";
|
||||||
|
import { Image } from "astro:assets";
|
||||||
|
import CoworkingGuide from "./images/projects/coworking-guide.webp";
|
||||||
|
import HexGuess from "./images/projects/hexguess.webp";
|
||||||
|
import TwitchPlays from "./images/projects/twitchplays.webp";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="projects"
|
||||||
|
class="h-fit [perspective:1000px] flex flex-col items-center"
|
||||||
|
>
|
||||||
|
<div class="w-full max-w-[1440px]">
|
||||||
|
<div
|
||||||
|
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={CoworkingGuide}
|
||||||
|
alt="coworking guide"
|
||||||
|
class=`absolute max-w-full
|
||||||
|
top-1/2 left-1/2
|
||||||
|
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
|
||||||
|
border-2 border-solid border-white rounded-xl`
|
||||||
|
width="700"
|
||||||
|
/>
|
||||||
|
<Image
|
||||||
|
src={CoworkingGuide}
|
||||||
|
alt="coworking guide"
|
||||||
|
width="700"
|
||||||
|
class=`absolute max-w-full
|
||||||
|
top-1/2 left-1/2
|
||||||
|
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
|
||||||
|
border-2 border-solid border-white rounded-xl`
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
|
||||||
|
aspect-video
|
||||||
|
rounded-xl
|
||||||
|
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
|
border-2 border-solid border-white
|
||||||
|
max-w-full"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://coworking-guide.vercel.app/"
|
||||||
|
target="_blank"
|
||||||
|
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
transition-colors duration-300
|
||||||
|
hidden lg:block
|
||||||
|
hover:bg-white hover:text-blue-500"
|
||||||
|
>Visit site</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||||
|
<a
|
||||||
|
href="https://coworking-guide.vercel.app/"
|
||||||
|
target="_blank"
|
||||||
|
class="px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500"
|
||||||
|
>View repository</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
|
||||||
|
>
|
||||||
|
<h2 class="text-3xl font-bold mb-5 text-center lg:text-left">
|
||||||
|
Coworking Guide
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
|
||||||
|
>
|
||||||
|
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!
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-white text-black
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Astro
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#3178C6] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
TypeScript
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-black text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Markdown
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
|
||||||
|
>
|
||||||
|
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
||||||
|
Chat-Task-Tic Widget
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
class="text-xl lg:text-right text-center lg:max-w-none max-w-lg text-balance"
|
||||||
|
>
|
||||||
|
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!
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#E34F26] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
HTML
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-blue-700 text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
CSS
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-yellow-400 text-black
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Javascript
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||||
|
<a
|
||||||
|
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
|
||||||
|
target="_blank"
|
||||||
|
class="px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500"
|
||||||
|
>View repository</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<TaskWidget client:load />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20 mt-5 lg:mt-0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={HexGuess}
|
||||||
|
alt="Hex Guess"
|
||||||
|
class=`absolute max-w-full
|
||||||
|
top-1/2 left-1/2
|
||||||
|
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
|
||||||
|
border-2 border-solid border-white rounded-xl`
|
||||||
|
width="700"
|
||||||
|
/>
|
||||||
|
<Image
|
||||||
|
src={HexGuess}
|
||||||
|
alt="Hex Guess"
|
||||||
|
width="700"
|
||||||
|
class=`absolute max-w-full
|
||||||
|
top-1/2 left-1/2
|
||||||
|
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
|
||||||
|
border-2 border-solid border-white rounded-xl`
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
|
||||||
|
aspect-video
|
||||||
|
rounded-xl
|
||||||
|
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
|
border-2 border-solid border-white
|
||||||
|
max-w-full"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://hex-guess.vercel.app/"
|
||||||
|
target="_blank"
|
||||||
|
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
hidden lg:block
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500"
|
||||||
|
>Visit site</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||||
|
<a
|
||||||
|
href="https://hex-guess.vercel.app/"
|
||||||
|
target="_blank"
|
||||||
|
class="px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500"
|
||||||
|
>View repository</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
|
||||||
|
>
|
||||||
|
<h2 class="text-3xl font-bold mb-5 text-center">HexGuess</h2>
|
||||||
|
<p
|
||||||
|
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
|
||||||
|
>
|
||||||
|
Decode colours in 5 attempts. Guess the hexadecimal code and
|
||||||
|
receive instant feedback! Built with Next.JS, TailwindCSS
|
||||||
|
and TypeScript.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-black text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
NextJS
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#3178C6] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Typescript
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#07B6D4] text-black
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
TailwindCSS
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
|
||||||
|
>
|
||||||
|
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
||||||
|
Twitch Plays X
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
|
||||||
|
>
|
||||||
|
Allow Twitch chatters play games such as Pokemon! Chatters
|
||||||
|
can enter messages such as "up up down down left right B A"
|
||||||
|
and the Python program will trigger the corresponding
|
||||||
|
keypresses.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#3776AB] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Python
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#0078D4] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
win32API
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||||
|
<a
|
||||||
|
href="https://github.com/liyunze-coding/TwitchPlaysX"
|
||||||
|
target="_blank"
|
||||||
|
class="px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500"
|
||||||
|
>View repository</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={TwitchPlays}
|
||||||
|
alt="Twitch Plays X"
|
||||||
|
class=`absolute max-w-full
|
||||||
|
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`
|
||||||
|
`
|
||||||
|
width="700"
|
||||||
|
/>
|
||||||
|
<Image
|
||||||
|
src={TwitchPlays}
|
||||||
|
alt="Twitch Plays X"
|
||||||
|
width="700"
|
||||||
|
class=`absolute max-w-full
|
||||||
|
top-1/2 left-1/2
|
||||||
|
[transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-1
|
||||||
|
border-2 border-solid border-white rounded-xl`
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
|
||||||
|
aspect-video
|
||||||
|
rounded-xl
|
||||||
|
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
|
border-2 border-solid border-white
|
||||||
|
max-w-full"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://github.com/liyunze-coding/TwitchPlaysX"
|
||||||
|
target="_blank"
|
||||||
|
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
hidden lg:block
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500"
|
||||||
|
>View repository</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.image-container img {
|
||||||
|
transition: transform 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,727 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
const streamers = [
|
|
||||||
{
|
|
||||||
streamer: "4l1c3_0",
|
|
||||||
task: "mental breakdance",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "Acrone",
|
|
||||||
task: "play Valorant with twin brother",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "Ama_xinita",
|
|
||||||
task: "estudiar leyes",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "andolivconc",
|
|
||||||
task: "estudar Direito",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "arcanexviii",
|
|
||||||
task: "babysit",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "AuspexOneGaming",
|
|
||||||
task: "teach computer science",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "BintonDev",
|
|
||||||
task: "rubber duck debugging",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "brisim_claimhte",
|
|
||||||
task: "rewrite history thesis",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "brunixwho",
|
|
||||||
task: "Ensinar ingl\u00eas",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "Bubxmicn",
|
|
||||||
task: "drive a truck",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "charliosaurus",
|
|
||||||
task: "release another song on YouTube",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "cheshirepope",
|
|
||||||
task: "write 1000 words",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "chocomi_tv",
|
|
||||||
task: "improve English",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "Clarishy",
|
|
||||||
task: "be sweaty",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "cloudydayzzz",
|
|
||||||
task: "interpret ASL",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "creativepepper",
|
|
||||||
task: "develop mobile app",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "DarthTorLin",
|
|
||||||
task: "watch Star Wars",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "DATJI_",
|
|
||||||
task: "IRL KBBQ stream",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "EarliestTea",
|
|
||||||
task: "chat about MBTI",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "Ellyskey",
|
|
||||||
task: "sell YOUthversity merch",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "Emerald_Glowo",
|
|
||||||
task: "drawing stream",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "emzkx",
|
|
||||||
task: "study public health, psychology and exercise science",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "eri__berry",
|
|
||||||
task: "play Palia",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "HarryIsTrying",
|
|
||||||
task: "be a strategy consultant",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "Hawokai",
|
|
||||||
task: "be a shark",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "itsbrandonut",
|
|
||||||
task: "stream music then play valorant",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "j3dg",
|
|
||||||
task: "spin class",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "jerrrs",
|
|
||||||
task: "play Animal Crossing",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "lala_xitlali",
|
|
||||||
task: "design fashionable clothes",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "long1nteger",
|
|
||||||
task: "AI project",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "lyricalclove",
|
|
||||||
task: "teach English",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "msmushh",
|
|
||||||
task: "vibe on stream",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "nachoburrit0",
|
|
||||||
task: "update spreadsheets",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "nick_kendall",
|
|
||||||
task: "Instagram post",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "nihn_jnesyo",
|
|
||||||
task: "Release new Lo-fi music",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "novellaHT",
|
|
||||||
task: "play Don't Starve Together",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "pcc_lanezzz",
|
|
||||||
task: "be a supermodel",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "PineappleEffect",
|
|
||||||
task: "edit video",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "pinsaregood",
|
|
||||||
task: "go on another hiatus",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "procrastilate",
|
|
||||||
task: "chaos",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "samkitkat",
|
|
||||||
task: "learn React",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "studypaws",
|
|
||||||
task: "be a vet",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "sunfflawer",
|
|
||||||
task: "be a sunflower",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "Supernaturalwriter",
|
|
||||||
task: "hit the gym",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "TheCake404",
|
|
||||||
task: "wear a demon costume",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "ThePainfulPhD",
|
|
||||||
task: "study about pain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "theyolotato",
|
|
||||||
task: "be a potato",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "valecey",
|
|
||||||
task: "graduate from university",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "wafflesdot025",
|
|
||||||
task: "perform in another musical",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "wasmishtaken_",
|
|
||||||
task: "simp for levi ackerman",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
streamer: "xeno_hiraeth",
|
|
||||||
task: "anki flashcards",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// let primaryDivHeight: string;
|
|
||||||
|
|
||||||
// onMount(() => {
|
|
||||||
// const animatedElement = document.querySelector(".primary");
|
|
||||||
// if (animatedElement) {
|
|
||||||
// primaryDivHeight = `${animatedElement.clientHeight}px`;
|
|
||||||
// }
|
|
||||||
// console.log(streamers.length);
|
|
||||||
// console.log(primaryDivHeight);
|
|
||||||
// });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="projects"
|
|
||||||
class="h-fit [perspective:1000px] flex flex-col items-center"
|
|
||||||
>
|
|
||||||
<div class="w-full max-w-[1440px]">
|
|
||||||
<div
|
|
||||||
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/projects/coworking-guide.webp"
|
|
||||||
alt="coworking guide"
|
|
||||||
class="absolute max-w-full
|
|
||||||
top-1/2 left-1/2
|
|
||||||
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
|
|
||||||
border-2 border-solid border-white rounded-xl"
|
|
||||||
width="700"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src="/images/projects/coworking-guide.webp"
|
|
||||||
alt="coworking guide"
|
|
||||||
width="700"
|
|
||||||
class="absolute max-w-full
|
|
||||||
top-1/2 left-1/2
|
|
||||||
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
|
|
||||||
border-2 border-solid border-white rounded-xl"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
|
|
||||||
aspect-video
|
|
||||||
rounded-xl
|
|
||||||
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
|
||||||
border-2 border-solid border-white
|
|
||||||
max-w-full"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="https://coworking-guide.vercel.app/"
|
|
||||||
target="_blank"
|
|
||||||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
|
||||||
font-bold
|
|
||||||
transition-colors duration-300
|
|
||||||
hidden lg:block
|
|
||||||
hover:bg-white hover:text-blue-500
|
|
||||||
">Visit site</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lg:hidden flex justify-center items-center mb-10">
|
|
||||||
<a
|
|
||||||
href="https://coworking-guide.vercel.app/"
|
|
||||||
target="_blank"
|
|
||||||
class="
|
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
|
||||||
font-bold
|
|
||||||
transition-colors duration-300
|
|
||||||
hover:bg-white hover:text-blue-500
|
|
||||||
">View repository</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
|
|
||||||
>
|
|
||||||
<h2 class="text-3xl font-bold mb-5 text-center lg:text-left">
|
|
||||||
Coworking Guide
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
|
|
||||||
>
|
|
||||||
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!
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-white text-black
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
Astro
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-[#3178C6] text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
TypeScript
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-black text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
Markdown
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
|
|
||||||
>
|
|
||||||
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
|
||||||
Chat-Task-Tic Widget
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
class="text-xl lg:text-right text-center lg:max-w-none max-w-lg text-balance"
|
|
||||||
>
|
|
||||||
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!
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-[#E34F26] text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
HTML
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-blue-700 text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
CSS
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-yellow-400 text-black
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
Javascript
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lg:hidden flex justify-center items-center mb-10">
|
|
||||||
<a
|
|
||||||
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
|
|
||||||
target="_blank"
|
|
||||||
class="
|
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
|
||||||
font-bold
|
|
||||||
transition-colors duration-300
|
|
||||||
hover:bg-white hover:text-blue-500
|
|
||||||
">View repository</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="image-container lg:w-1/2 aspect-video [perspective:200px] relative mb-3 lg:mb-0 md:mr-5 mr-0 lg:mr-0 ml-0 lg:ml-1"
|
|
||||||
>
|
|
||||||
<!-- task bot -->
|
|
||||||
<div
|
|
||||||
class="task-widget absolute flex flex-col opacity-30
|
|
||||||
w-full h-[99%]
|
|
||||||
top-1/2 left-1/2 [transform:translateX(-50%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)]"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-full bg-black border-solid border-2 border-white
|
|
||||||
rounded-lg
|
|
||||||
px-5 py-2
|
|
||||||
text-xl text-white
|
|
||||||
flex flex-row justify-between items-center
|
|
||||||
font-['Fredoka',_sans-serif]"
|
|
||||||
>
|
|
||||||
<span>Hover here!</span>
|
|
||||||
<span>0/100+</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="scroll-element primary px-1 absolute w-full"
|
|
||||||
>
|
|
||||||
{#each streamers as { streamer, task }}
|
|
||||||
<div
|
|
||||||
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
|
||||||
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
|
||||||
>
|
|
||||||
O {streamer} : {task}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="scroll-element secondary px-1 absolute w-full"
|
|
||||||
>
|
|
||||||
{#each streamers as { streamer, task }}
|
|
||||||
<div
|
|
||||||
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
|
||||||
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
|
||||||
>
|
|
||||||
O {streamer} : {task}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="task-widget absolute flex flex-col
|
|
||||||
w-full h-[99%]
|
|
||||||
top-1/2 left-1/2 [transform:translateX(-51%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-full bg-black border-solid border-2 border-white
|
|
||||||
rounded-lg
|
|
||||||
px-5 py-2
|
|
||||||
text-xl text-white
|
|
||||||
flex flex-row justify-between items-center
|
|
||||||
font-['Fredoka',_sans-serif]"
|
|
||||||
>
|
|
||||||
<span>Hover here!</span>
|
|
||||||
<span>0/100+</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="scroll-element primary px-1 absolute w-full"
|
|
||||||
>
|
|
||||||
{#each streamers as { streamer, task }}
|
|
||||||
<div
|
|
||||||
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
|
||||||
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
|
||||||
>
|
|
||||||
O {streamer} : {task}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="scroll-element secondary px-1 absolute w-full"
|
|
||||||
>
|
|
||||||
{#each streamers as { streamer, task }}
|
|
||||||
<div
|
|
||||||
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
|
||||||
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
|
||||||
>
|
|
||||||
O {streamer} : {task}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="visit-div absolute w-full h-full bg-[rgba(0,0,0,0.5)] opacity-0
|
|
||||||
rounded-md
|
|
||||||
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
|
||||||
border-2 border-solid border-white
|
|
||||||
overflow-hidden"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
|
|
||||||
target="_blank"
|
|
||||||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
|
||||||
font-bold
|
|
||||||
hidden lg:block
|
|
||||||
transition-colors duration-300
|
|
||||||
hover:bg-white hover:text-blue-500
|
|
||||||
">View repository</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20 mt-5 lg:mt-0"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/projects/hexguess.webp"
|
|
||||||
alt="Hex Guess"
|
|
||||||
class="absolute max-w-full
|
|
||||||
top-1/2 left-1/2
|
|
||||||
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
|
|
||||||
border-2 border-solid border-white rounded-xl"
|
|
||||||
width="700"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src="/images/projects/hexguess.webp"
|
|
||||||
alt="Hex Guess"
|
|
||||||
width="700"
|
|
||||||
class="absolute max-w-full
|
|
||||||
top-1/2 left-1/2
|
|
||||||
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
|
|
||||||
border-2 border-solid border-white rounded-xl"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
|
|
||||||
aspect-video
|
|
||||||
rounded-xl
|
|
||||||
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
|
||||||
border-2 border-solid border-white
|
|
||||||
max-w-full"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="https://hex-guess.vercel.app/"
|
|
||||||
target="_blank"
|
|
||||||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
|
||||||
font-bold
|
|
||||||
hidden lg:block
|
|
||||||
transition-colors duration-300
|
|
||||||
hover:bg-white hover:text-blue-500
|
|
||||||
">Visit site</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lg:hidden flex justify-center items-center mb-10">
|
|
||||||
<a
|
|
||||||
href="https://hex-guess.vercel.app/"
|
|
||||||
target="_blank"
|
|
||||||
class="
|
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
|
||||||
font-bold
|
|
||||||
transition-colors duration-300
|
|
||||||
hover:bg-white hover:text-blue-500
|
|
||||||
">View repository</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
|
|
||||||
>
|
|
||||||
<h2 class="text-3xl font-bold mb-5 text-center">HexGuess</h2>
|
|
||||||
<p
|
|
||||||
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
|
|
||||||
>
|
|
||||||
Decode colours in 5 attempts. Guess the hexadecimal code and
|
|
||||||
receive instant feedback! Built with Next.JS, TailwindCSS
|
|
||||||
and TypeScript.
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-black text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
NextJS
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-[#3178C6] text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
Typescript
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-[#07B6D4] text-black
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
TailwindCSS
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
|
|
||||||
>
|
|
||||||
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
|
||||||
Twitch Plays X
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
|
|
||||||
>
|
|
||||||
Allow Twitch chatters play games such as Pokemon! Chatters
|
|
||||||
can enter messages such as "up up down down left right B A"
|
|
||||||
and the Python program will trigger the corresponding
|
|
||||||
keypresses.
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-[#3776AB] text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
Python
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-[#0078D4] text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
win32API
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lg:hidden flex justify-center items-center mb-10">
|
|
||||||
<a
|
|
||||||
href="https://github.com/liyunze-coding/TwitchPlaysX"
|
|
||||||
target="_blank"
|
|
||||||
class="
|
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
|
||||||
font-bold
|
|
||||||
transition-colors duration-300
|
|
||||||
hover:bg-white hover:text-blue-500
|
|
||||||
">View repository</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/projects/twitchplays.webp"
|
|
||||||
alt="Hex Guess"
|
|
||||||
class="absolute max-w-full
|
|
||||||
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"
|
|
||||||
width="700"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src="/images/projects/twitchplays.webp"
|
|
||||||
alt="Hex Guess"
|
|
||||||
width="700"
|
|
||||||
class="absolute max-w-full
|
|
||||||
top-1/2 left-1/2
|
|
||||||
[transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-1
|
|
||||||
border-2 border-solid border-white rounded-xl"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
|
|
||||||
aspect-video
|
|
||||||
rounded-xl
|
|
||||||
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
|
||||||
border-2 border-solid border-white
|
|
||||||
max-w-full"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="https://github.com/liyunze-coding/TwitchPlaysX"
|
|
||||||
target="_blank"
|
|
||||||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
|
||||||
font-bold
|
|
||||||
hidden lg:block
|
|
||||||
transition-colors duration-300
|
|
||||||
hover:bg-white hover:text-blue-500
|
|
||||||
">View repository</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.image-container img,
|
|
||||||
.image-container .task-widget {
|
|
||||||
transition: transform 0.5s ease-in-out;
|
|
||||||
}
|
|
||||||
@media (min-width: 1025px) {
|
|
||||||
.image-container:hover > img,
|
|
||||||
.image-container:hover > .task-widget {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary {
|
|
||||||
animation: primary 30s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary {
|
|
||||||
animation: secondary 30s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes primary {
|
|
||||||
from {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateY(-2175px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes secondary {
|
|
||||||
from {
|
|
||||||
transform: translateY(2175px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
266
src/components/sections/TaskWidget.svelte
Normal file
266
src/components/sections/TaskWidget.svelte
Normal file
|
|
@ -0,0 +1,266 @@
|
||||||
|
<script lang="ts">
|
||||||
|
const streamers = [
|
||||||
|
{
|
||||||
|
streamer: "4l1c3_0",
|
||||||
|
task: "mental breakdance",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "arcanexviii",
|
||||||
|
task: "babysit",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "brisim_claimhte",
|
||||||
|
task: "rewrite history thesis",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "Bubxmicn",
|
||||||
|
task: "drive a truck",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "charliosaurus",
|
||||||
|
task: "praise the lord",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "clari_miu",
|
||||||
|
task: "be sweaty",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "cloudydayzzz",
|
||||||
|
task: "stay up at night",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "creativepepper",
|
||||||
|
task: "develop mobile app",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "DATJI_",
|
||||||
|
task: "IRL KBBQ stream",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "EarliestTea",
|
||||||
|
task: "chat about MBTI",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "Ellyskey",
|
||||||
|
task: "sell YOUthversity merch",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "HarryIsTrying",
|
||||||
|
task: "be a strategy consultant",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "itsbrandonut",
|
||||||
|
task: "cowork then league",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "lala_xitlali",
|
||||||
|
task: "design fashionable clothes",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "lyricalclove",
|
||||||
|
task: "teach English",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "nachoburrit0",
|
||||||
|
task: "update spreadsheets",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "nihn_",
|
||||||
|
task: "Release new Lo-fi music",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "pcc_lanezzz",
|
||||||
|
task: "be a supermodel",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "PineappleEffect",
|
||||||
|
task: "edit video",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "pinsaregood",
|
||||||
|
task: "go on another hiatus",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "lilylikesrocks",
|
||||||
|
task: "learn about rocks",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "studypaws",
|
||||||
|
task: "be a vet",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "sunfflawer",
|
||||||
|
task: "be a sunflower",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "Supernaturalwriter",
|
||||||
|
task: "hit the gym",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "ThePainfulPhD",
|
||||||
|
task: "study about pain",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "theyolotato",
|
||||||
|
task: "be a potato",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "valecey",
|
||||||
|
task: "graduate from university",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
streamer: "xeno_hiraeth",
|
||||||
|
task: "anki flashcards",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="image-container lg:w-1/2 aspect-video [perspective:200px] relative mb-3 lg:mb-0 md:mr-5 mr-0 lg:mr-0 ml-0 lg:ml-1"
|
||||||
|
>
|
||||||
|
<!-- task bot -->
|
||||||
|
<div
|
||||||
|
class="task-widget absolute flex flex-col opacity-30
|
||||||
|
w-full h-[99%]
|
||||||
|
top-1/2 left-1/2 [transform:translateX(-50%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)]"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-full bg-black border-solid border-2 border-white
|
||||||
|
rounded-lg
|
||||||
|
px-5 py-2
|
||||||
|
text-xl text-white
|
||||||
|
flex flex-row justify-between items-center
|
||||||
|
font-['Fredoka',_sans-serif]"
|
||||||
|
>
|
||||||
|
<span>Hover here!</span>
|
||||||
|
<span>0/100+</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
|
||||||
|
>
|
||||||
|
<div class="scroll-element primary px-1 absolute w-full">
|
||||||
|
{#each streamers as { streamer, task }}
|
||||||
|
<div
|
||||||
|
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
||||||
|
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
||||||
|
>
|
||||||
|
O {streamer} : {task}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="scroll-element secondary px-1 absolute w-full">
|
||||||
|
{#each streamers as { streamer, task }}
|
||||||
|
<div
|
||||||
|
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
||||||
|
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
||||||
|
>
|
||||||
|
O {streamer} : {task}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="task-widget absolute flex flex-col
|
||||||
|
w-full h-[99%]
|
||||||
|
top-1/2 left-1/2 [transform:translateX(-51%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-full bg-black border-solid border-2 border-white
|
||||||
|
rounded-lg
|
||||||
|
px-5 py-2
|
||||||
|
text-xl text-white
|
||||||
|
flex flex-row justify-between items-center
|
||||||
|
font-['Fredoka',_sans-serif]"
|
||||||
|
>
|
||||||
|
<span>Hover here!</span>
|
||||||
|
<span>0/100+</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
|
||||||
|
>
|
||||||
|
<div class="scroll-element primary px-1 absolute w-full">
|
||||||
|
{#each streamers as { streamer, task }}
|
||||||
|
<div
|
||||||
|
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
||||||
|
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
||||||
|
>
|
||||||
|
O {streamer} : {task}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="scroll-element secondary px-1 absolute w-full">
|
||||||
|
{#each streamers as { streamer, task }}
|
||||||
|
<div
|
||||||
|
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
||||||
|
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
||||||
|
>
|
||||||
|
O {streamer} : {task}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="visit-div absolute w-full h-full bg-[rgba(0,0,0,0.5)] opacity-0
|
||||||
|
rounded-md
|
||||||
|
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
|
border-2 border-solid border-white
|
||||||
|
overflow-hidden"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
|
||||||
|
target="_blank"
|
||||||
|
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
font-bold
|
||||||
|
hidden lg:block
|
||||||
|
transition-colors duration-300
|
||||||
|
hover:bg-white hover:text-blue-500">View repository</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.image-container .task-widget {
|
||||||
|
transition: transform 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
@media (min-width: 1025px) {
|
||||||
|
.image-container:hover > .task-widget {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
animation: primary 20s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
animation: secondary 20s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes primary {
|
||||||
|
from {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(-1175px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes secondary {
|
||||||
|
from {
|
||||||
|
transform: translateY(1175px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 230 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
|
@ -4,7 +4,7 @@ import Layout from "../layouts/Layout.astro";
|
||||||
import NetworkLine from "../components/elements/NetworkLine.astro";
|
import NetworkLine from "../components/elements/NetworkLine.astro";
|
||||||
import WhatIDo from "../components/sections/WhatIDoComponent.astro";
|
import WhatIDo from "../components/sections/WhatIDoComponent.astro";
|
||||||
import Intro from "../components/sections/IntroComponent.svelte";
|
import Intro from "../components/sections/IntroComponent.svelte";
|
||||||
import Projects from "../components/sections/ProjectsComponent.svelte";
|
import Projects from "../components/sections/ProjectsComponent.astro";
|
||||||
import Education from "../components/sections/ExperienceComponent.astro";
|
import Education from "../components/sections/ExperienceComponent.astro";
|
||||||
import Skills from "../components/sections/SkillsComponent.astro";
|
import Skills from "../components/sections/SkillsComponent.astro";
|
||||||
import Contact from "../components/sections/ContactComponent.svelte";
|
import Contact from "../components/sections/ContactComponent.svelte";
|
||||||
|
|
@ -32,7 +32,7 @@ import Footer from "../components/sections/FooterComponent.astro";
|
||||||
<div id="projects">
|
<div id="projects">
|
||||||
<div class="pt-20">
|
<div class="pt-20">
|
||||||
<h1 class="text-5xl text-center mb-10">Projects</h1>
|
<h1 class="text-5xl text-center mb-10">Projects</h1>
|
||||||
<Projects client:visible />
|
<Projects />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="skills">
|
<div id="skills">
|
||||||
|
|
@ -42,7 +42,7 @@ import Footer from "../components/sections/FooterComponent.astro";
|
||||||
<Education />
|
<Education />
|
||||||
</div>
|
</div>
|
||||||
<div id="contact">
|
<div id="contact">
|
||||||
<Contact client:only />
|
<Contact />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
import NavBar from "../components/sections/NavBar.astro";
|
import NavBar from "../components/sections/NavBar.astro";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
|
import ProjectsComponent from "../components/sections/ProjectsComponent.astro";
|
||||||
import MoreProjects from "../components/sections/MoreProjects.svelte";
|
import MoreProjects from "../components/sections/MoreProjects.svelte";
|
||||||
import Footer from "../components/sections/FooterComponent.astro";
|
import Footer from "../components/sections/FooterComponent.astro";
|
||||||
---
|
---
|
||||||
|
|
@ -14,7 +14,7 @@ import Footer from "../components/sections/FooterComponent.astro";
|
||||||
<MoreProjects client:load />
|
<MoreProjects client:load />
|
||||||
</div>
|
</div>
|
||||||
<div class="pb-20">
|
<div class="pb-20">
|
||||||
<ProjectsComponent client:load />
|
<ProjectsComponent />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue