mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
replaced "HexGuess" with WNRS
This commit is contained in:
liyunze
parent
f542b11d41
commit
a7733018a7
2 changed files with 276 additions and 276 deletions
|
|
@ -2,305 +2,305 @@
|
|||
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 Wnrs from "./images/projects/wnrs.webp";
|
||||
import TwitchPlays from "./images/projects/twitchplays.webp";
|
||||
---
|
||||
|
||||
<div
|
||||
id="projects"
|
||||
class="flex h-fit flex-col items-center [perspective:1000px]"
|
||||
id="projects"
|
||||
class="flex h-fit flex-col items-center [perspective:1000px]"
|
||||
>
|
||||
<div class="w-full max-w-[1440px]">
|
||||
<div
|
||||
class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<Image
|
||||
src={CoworkingGuide}
|
||||
alt="coworking guide"
|
||||
class=`absolute max-w-full
|
||||
<div class="w-full max-w-[1440px]">
|
||||
<div
|
||||
class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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
|
||||
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 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://coworking-guide.vercel.app/"
|
||||
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"
|
||||
>Visit site</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10 flex items-center justify-center lg:hidden">
|
||||
<a
|
||||
href="https://coworking-guide.vercel.app/"
|
||||
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"
|
||||
>View repository</a
|
||||
>
|
||||
</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"
|
||||
>
|
||||
<h2 class="mb-5 text-center text-3xl font-bold lg:text-left">
|
||||
Coworking Guide
|
||||
</h2>
|
||||
<p
|
||||
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
|
||||
range of topics from tips on how to get started with setting
|
||||
up stream to how to grow your audience!
|
||||
</p>
|
||||
<div
|
||||
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
|
||||
>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-white px-3 py-1 text-black transition-colors duration-300"
|
||||
>
|
||||
Astro
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
TypeScript
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
Markdown
|
||||
</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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
|
||||
Chat-Task-Tic Widget
|
||||
</h2>
|
||||
<p
|
||||
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
|
||||
to add their own tasks to the widget for accountability!
|
||||
Easy to setup and the customization possibilities are
|
||||
endless!
|
||||
</p>
|
||||
<div
|
||||
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
|
||||
>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
HTML
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
CSS
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300"
|
||||
>
|
||||
Javascript
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10 flex items-center justify-center lg:hidden">
|
||||
<a
|
||||
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
|
||||
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"
|
||||
>View repository</a
|
||||
>
|
||||
</div>
|
||||
<TaskWidget client:visible />
|
||||
</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%)]"
|
||||
>
|
||||
<a
|
||||
href="https://coworking-guide.vercel.app/"
|
||||
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"
|
||||
>Visit site</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10 flex items-center justify-center lg:hidden">
|
||||
<a
|
||||
href="https://coworking-guide.vercel.app/"
|
||||
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"
|
||||
>View repository</a
|
||||
>
|
||||
</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"
|
||||
>
|
||||
<h2 class="mb-5 text-center text-3xl font-bold lg:text-left">
|
||||
Coworking Guide
|
||||
</h2>
|
||||
<p
|
||||
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
|
||||
range of topics from tips on how to get started with setting
|
||||
up stream to how to grow your audience!
|
||||
</p>
|
||||
<div
|
||||
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
|
||||
>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-white px-3 py-1 text-black transition-colors duration-300"
|
||||
>
|
||||
Astro
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
TypeScript
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
Markdown
|
||||
</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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
|
||||
Chat-Task-Tic Widget
|
||||
</h2>
|
||||
<p
|
||||
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
|
||||
to add their own tasks to the widget for accountability!
|
||||
Easy to setup and the customization possibilities are
|
||||
endless!
|
||||
</p>
|
||||
<div
|
||||
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
|
||||
>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
HTML
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
CSS
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300"
|
||||
>
|
||||
Javascript
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10 flex items-center justify-center lg:hidden">
|
||||
<a
|
||||
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
|
||||
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"
|
||||
>View repository</a
|
||||
>
|
||||
</div>
|
||||
<TaskWidget client:visible />
|
||||
</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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<Image
|
||||
src={HexGuess}
|
||||
alt="Hex Guess"
|
||||
class=`absolute max-w-full
|
||||
<div
|
||||
class="mt-5 flex h-fit w-full flex-col justify-center px-10 lg:mt-0 lg:flex-row lg:px-20"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<Image
|
||||
src={Wnrs}
|
||||
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
|
||||
border-2 border-solid border-white rounded-xl
|
||||
aspect-video`
|
||||
width="700"
|
||||
/>
|
||||
<Image
|
||||
src={Wnrs}
|
||||
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 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/"
|
||||
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"
|
||||
>Visit site</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10 flex items-center justify-center lg:hidden">
|
||||
<a
|
||||
href="https://hex-guess.vercel.app/"
|
||||
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"
|
||||
>View repository</a
|
||||
>
|
||||
</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"
|
||||
>
|
||||
<h2 class="mb-5 text-center text-3xl font-bold">HexGuess</h2>
|
||||
<p
|
||||
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left"
|
||||
>
|
||||
Decode colours in 5 attempts. Guess the hexadecimal code and
|
||||
receive instant feedback! Built with Next.JS, TailwindCSS
|
||||
and TypeScript.
|
||||
</p>
|
||||
<div
|
||||
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
|
||||
>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
NextJS
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
Typescript
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#07B6D4] px-3 py-1 text-black transition-colors duration-300"
|
||||
>
|
||||
TailwindCSS
|
||||
</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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
|
||||
Twitch Plays X
|
||||
</h2>
|
||||
<p
|
||||
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
|
||||
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="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
|
||||
>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
Python
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#0078D4] px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
win32API
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10 flex items-center justify-center lg:hidden">
|
||||
<a
|
||||
href="https://github.com/liyunze-coding/TwitchPlaysX"
|
||||
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"
|
||||
>View repository</a
|
||||
>
|
||||
</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"
|
||||
>
|
||||
<Image
|
||||
src={TwitchPlays}
|
||||
alt="Twitch Plays X"
|
||||
class=`absolute max-w-full
|
||||
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%)]"
|
||||
>
|
||||
<a
|
||||
href="https://liyunze-coding.github.io/wnrs/"
|
||||
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"
|
||||
>Visit site</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10 flex items-center justify-center lg:hidden">
|
||||
<a
|
||||
href="https://hex-guess.vercel.app/"
|
||||
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"
|
||||
>View repository</a
|
||||
>
|
||||
</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"
|
||||
>
|
||||
<h2 class="mb-5 text-center text-3xl font-bold">
|
||||
We're Not Really Strangers
|
||||
</h2>
|
||||
<p
|
||||
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left"
|
||||
>
|
||||
Otherwise abbreviated as "WNRS", this is a digital
|
||||
adaptation of the popular card game designed to foster
|
||||
meaningful connections through engaging questions and
|
||||
prompts.
|
||||
</p>
|
||||
<div
|
||||
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
|
||||
>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300"
|
||||
>
|
||||
React
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
Typescript
|
||||
</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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
|
||||
Twitch Plays X
|
||||
</h2>
|
||||
<p
|
||||
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
|
||||
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="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
|
||||
>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
Python
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit rounded-full bg-[#0078D4] px-3 py-1 text-white transition-colors duration-300"
|
||||
>
|
||||
win32API
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10 flex items-center justify-center lg:hidden">
|
||||
<a
|
||||
href="https://github.com/liyunze-coding/TwitchPlaysX"
|
||||
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"
|
||||
>View repository</a
|
||||
>
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
`
|
||||
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 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://github.com/liyunze-coding/TwitchPlaysX"
|
||||
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"
|
||||
>View repository</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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%)]"
|
||||
>
|
||||
<a
|
||||
href="https://github.com/liyunze-coding/TwitchPlaysX"
|
||||
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"
|
||||
>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 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;
|
||||
}
|
||||
}
|
||||
.image-container:hover > .visit-div {
|
||||
opacity: 100%;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
BIN
src/components/sections/images/projects/wnrs.webp
Normal file
BIN
src/components/sections/images/projects/wnrs.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in a new issue