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

added ProductiVue project

Browse source
This commit is contained in:
liyunze 2024-01-02 16:04:24 +08:00
parent 8210c5b744
commit cf91d4e4d1
3 changed files with 64 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/projects/ProductiVue.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 202 KiB

58
src/components/Projects.svelte
View file

@ -466,10 +466,66 @@
>
<h2 class="text-3xl font-bold mb-5">HexGuess</h2>
<p class="text-xl">
Decode colours in 5 attempts. Guess the hexadecimal code and receive instant feedback! Built with Next.JS, Tailwind and TypeScript.
Decode colours in 5 attempts. Guess the hexadecimal code and receive instant feedback! Built with Next.JS, TailwindCSS and TypeScript.
</p>
</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"
>
<h2 class="text-3xl font-bold mb-5 lg:text-right">
ProductiVue
</h2>
<p class="text-xl lg:text-right">
Boost your productivity streaming with ProductiVue,
a sleek minimalism-focused desktop app for Twitch streamers.
Built using Vue, Tauri, Typescript and TailwindCSS.
</p>
</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/ProductiVue.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/ProductiVue.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://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
transition-colors duration-300
hover:bg-white hover:text-blue-500
">Visit site</a
>
</div>
</div>
</div>
</div>
</div>

14
src/components/Skills.astro
View file

@ -77,6 +77,13 @@ import Line from "../components/NetworkLine.astro";
>
React
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-green-500 hover:text-black
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
>
Vue
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-white hover:text-black
rounded-full px-3 py-1 mr-1 my-1
@ -84,13 +91,6 @@ import Line from "../components/NetworkLine.astro";
>
Astro
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-purple-400 hover:text-black
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
>
Qwik
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#07B6D4] hover:text-black
rounded-full px-3 py-1 mr-1 my-1