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

updated skills and formatting

Browse source
This commit is contained in:
liyunze 2025-04-07 09:31:53 +10:00
parent 8f41a1ccec
commit 1874e055b6
29 changed files with 2487 additions and 2602 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc
View file

@ -1,4 +1,4 @@
{
"plugins": ["prettier-plugin-tailwindcss","prettier-plugin-svelte", "prettier-plugin-astro"],
"plugins": ["prettier-plugin-svelte", "prettier-plugin-astro","prettier-plugin-tailwindcss"],
"tabWidth": 4
}

120
src/components/elements/Card.astro
View file

@ -1,80 +1,80 @@
---
interface Props {
primaryColor: string;
bgColor?: string;
scaleOnHover?: boolean;
pixelHeight?: string;
className?: string;
primaryColor: string;
bgColor?: string;
scaleOnHover?: boolean;
pixelHeight?: string;
className?: string;
}
const {
primaryColor,
bgColor = "#282828",
scaleOnHover = false,
pixelHeight = "70px",
className = "",
primaryColor,
bgColor = "#282828",
scaleOnHover = false,
pixelHeight = "70px",
className = "",
} = Astro.props;
---
<div class="card z-10" class:list={[{ scale: scaleOnHover }, className]}>
<slot />
<slot />
</div>
<style define:vars={{ primaryColor, bgColor, pixelHeight }}>
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
p {
margin: 0rem;
}
h1,
h2,
h3,
p {
margin: 0rem;
}
.card {
height: inherit;
position: relative;
background-color: var(--bgColor);
border: 1px solid rgb(255 255 255 / 5%);
border-radius: 1.5rem;
padding: 0.5rem;
box-shadow: 0px 5px 5px 5px #141414;
}
.card {
height: inherit;
position: relative;
background-color: var(--bgColor);
border: 1px solid rgb(255 255 255 / 5%);
border-radius: 1.5rem;
padding: 0.5rem;
box-shadow: 0px 5px 5px 5px #141414;
}
.card:after {
content: "";
height: var(--pixelHeight);
width: 1px;
position: absolute;
left: -1px;
top: 65%;
transition: top, opacity;
transition-duration: 600ms;
transition-timing-function: ease;
background: linear-gradient(
transparent,
var(--primaryColor),
transparent
);
opacity: 0;
}
.card:after {
content: "";
height: var(--pixelHeight);
width: 1px;
position: absolute;
left: -1px;
top: 65%;
transition: top, opacity;
transition-duration: 600ms;
transition-timing-function: ease;
background: linear-gradient(
transparent,
var(--primaryColor),
transparent
);
opacity: 0;
}
.card:after {
top: 65%;
opacity: 0;
}
.card:after {
top: 65%;
opacity: 0;
}
.card:hover:after {
top: 25%;
opacity: 1;
}
.card:hover:after {
top: 25%;
opacity: 1;
}
.card.scale {
transition: transform 0.5s ease;
}
.card.scale {
transition: transform 0.5s ease;
}
.card.scale:hover {
transform: scale(1.05);
}
.card.scale:hover {
transform: scale(1.05);
}
</style>

4
src/components/elements/NetworkLine.astro
View file

@ -6,8 +6,8 @@ interface Props {
const { height } = Astro.props;
---
<div id="line-container" class="flex justify-center items-center p-0 relative">
<div id="line" class="w-[1px] h-full"></div>
<div id="line-container" class="relative flex items-center justify-center p-0">
<div id="line" class="h-full w-[1px]"></div>
</div>
<style define:vars={{ height }}>

110
src/components/elements/Socials.svelte
View file

@ -1,67 +1,67 @@
<a href="https://github.com/liyunze-coding" target="_blank">
<div
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
>
<img
src="/images/socials/github.svg"
alt="github"
class="aspect-square max-w-full"
width="20"
/>
</div>
<div
class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
>
<img
src="/images/socials/github.svg"
alt="github"
class="aspect-square max-w-full"
width="20"
/>
</div>
</a>
<a href="https://codepen.io/rythondev" target="_blank">
<div
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
>
<img
src="/images/socials/codepen.svg"
alt="codepen"
class="w-5 h-5 aspect-square"
/>
</div>
<div
class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
>
<img
src="/images/socials/codepen.svg"
alt="codepen"
class="aspect-square h-5 w-5"
/>
</div>
</a>
<a href="https://youtube.com/@RythonDev" target="_blank">
<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]"
>
<img
src="/images/socials/youtube.svg"
alt="youtube"
class="w-5 h-5 aspect-square"
/>
</div>
<div
class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#00ffff] hover:invert"
>
<img
src="/images/socials/youtube.svg"
alt="youtube"
class="aspect-square h-5 w-5"
/>
</div>
</a>
<a href="https://twitch.tv/RythonDev" target="_blank">
<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]"
>
<img
src="/images/socials/twitch.svg"
alt="twitch"
class="w-4 h-4 aspect-square"
/>
</div>
<div
class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#6eb900] hover:invert"
>
<img
src="/images/socials/twitch.svg"
alt="twitch"
class="aspect-square h-4 w-4"
/>
</div>
</a>
<a href="https://instagram.com/RythonDev" target="_blank">
<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]"
>
<img
src="/images/socials/instagram.svg"
alt="twitch"
class="w-4 h-4 aspect-square"
/>
</div>
<div
class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#1bbfa0] hover:invert"
>
<img
src="/images/socials/instagram.svg"
alt="twitch"
class="aspect-square h-4 w-4"
/>
</div>
</a>
<a href="https://ko-fi.com/rython" target="_blank">
<div
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-[#FF5E5B] transition-colors duration-150"
>
<img
src="/images/socials/kofi.webp"
alt="twitch"
class="w-4 h-4 aspect-square translate-x-[1px] scale-125"
/>
</div>
<div
class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-colors duration-150 hover:bg-[#FF5E5B]"
>
<img
src="/images/socials/kofi.webp"
alt="twitch"
class="aspect-square h-4 w-4 translate-x-[1px] scale-125"
/>
</div>
</a>

34
src/components/sections/BackToBlogs.astro
View file

@ -1,21 +1,21 @@
<a
class="sticky top-5 left-5 ml-10 text-xl bg-white w-fit pr-5 pl-2 py-1 rounded-lg flex justify-center items-center gap-2"
href="/blog"
style="color: black; text-decoration: none;"
class="sticky left-5 top-5 ml-10 flex w-fit items-center justify-center gap-2 rounded-lg bg-white py-1 pl-2 pr-5 text-xl"
href="/blog"
style="color: black; text-decoration: none;"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"></path>
</svg>
Back
Back
</a>

14
src/components/sections/ContactComponent.svelte
View file

@ -2,25 +2,25 @@
import Socials from "../elements/Socials.svelte";
</script>
<div class="w-full h-fit flex flex-col justify-center items-center relative">
<div class="flex flex-col justify-center items-center">
<div class="relative flex h-fit w-full flex-col items-center justify-center">
<div class="flex flex-col items-center justify-center">
<div
id="title"
class="animate-gradient text-3xl text-center font-bold mb-3"
class="mb-3 animate-gradient text-center text-3xl font-bold"
>
Get in Touch with me!
</div>
<div class="text-lg text-center mb-10 px-5">
<div class="mb-10 px-5 text-center text-lg">
I'm always open to new opportunities and collaborations!
</div>
<a
class="text-center flex flex-row justify-center items-center border-2 border-blue-300 text-blue-300 px-5 py-5 hover:bg-blue-300 hover:text-black transition-colors duration-300 ease-in-out rounded-xl"
class="flex flex-row items-center justify-center rounded-xl border-2 border-blue-300 px-5 py-5 text-center text-blue-300 transition-colors duration-300 ease-in-out hover:bg-blue-300 hover:text-black"
href="mailto:rythondev@gmail.com"
><span class="text-3xl mr-2">&#9993;</span> Send me an email</a
><span class="mr-2 text-3xl">&#9993;</span> Send me an email</a
>
<div class="text-white flex flex-row py-10">
<div class="flex flex-row py-10 text-white">
<Socials />
</div>
</div>

198
src/components/sections/ExperienceComponent.astro
View file

@ -4,107 +4,107 @@ import Line from "../elements/NetworkLine.astro";
---
<div id="Experience" class="h-fit">
<h1 class="text-5xl text-center">Experience</h1>
<div class="flex flex-col items-center pt-10">
<div class="w-[90%] md:w-[600px]">
<Card primaryColor="#F6DFD8">
<div class="card-content md:px-8 md:py-8 px-4 py-4">
<div class="flex flex-col justify-start w-full mb-3 gap-1">
<h2 class="font-bold text-xl">
Bachelor of Computer Science student
</h2>
<h3>July 2024 - Present</h3>
</div>
<hr class="w-full mb-3" />
<p class="mb-3">
Currently pursuing my Bachelor's degree in Computer
Science in Melbourne as a Vice-Chancellor 50%
Scholarship Awardee.
</p>
<h3 class="mb-1 font-bold text-lg">Relevant skills:</h3>
<div
class="flex flex-col md:flex-row justify-start items-start gap-0 md:gap-10"
>
<ul class="list-disc list-inside">
<li>C#</li>
<li>Vue.JS</li>
</ul>
</div>
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#F6DFD8">
<div class="card-content md:px-8 md:py-8 px-4 py-4">
<div class="flex flex-col justify-start w-full mb-3 gap-1">
<h2 class="font-bold text-xl">
Lead Frontend Web Developer
</h2>
<h3 class="font-bold">@ JW BizTech</h3>
<h3>Dec 2024 - Present</h3>
</div>
<hr class="w-full mb-3" />
<p class="mb-3">
Led implementation of frontend technology stack for
websites. Worked closely with UI/UX designers to
translate designs into code, and with backend developers
to ensure smooth integration with CMS.
</p>
<h3 class="mb-1 font-bold text-lg">Relevant skills:</h3>
<h1 class="text-center text-5xl">Experience</h1>
<div class="flex flex-col items-center pt-10">
<div class="w-[90%] md:w-[600px]">
<Card primaryColor="#F6DFD8">
<div class="card-content px-4 py-4 md:px-8 md:py-8">
<div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold">
Bachelor of Computer Science student
</h2>
<h3>July 2024 - Present</h3>
</div>
<hr class="mb-3 w-full" />
<p class="mb-3">
Currently pursuing my Bachelor's degree in Computer
Science in Melbourne as a Vice-Chancellor 50%
Scholarship Awardee.
</p>
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
<div
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
>
<ul class="list-inside list-disc">
<li>C#</li>
<li>Vue.JS</li>
</ul>
</div>
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#F6DFD8">
<div class="card-content px-4 py-4 md:px-8 md:py-8">
<div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold">
Lead Frontend Web Developer
</h2>
<h3 class="font-bold">@ JW BizTech</h3>
<h3>Dec 2024 - Present</h3>
</div>
<hr class="mb-3 w-full" />
<p class="mb-3">
Led implementation of frontend technology stack for
websites. Worked closely with UI/UX designers to
translate designs into code, and with backend developers
to ensure smooth integration with CMS.
</p>
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
<ul class="list-disc list-inside">
<li>Astro</li>
<li>Typescript</li>
<li>TailwindCSS</li>
</ul>
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#F6DFD8">
<div class="card-content md:px-8 md:py-8 px-4 py-4">
<div class="flex flex-col justify-start w-full mb-3 gap-1">
<h2 class="font-bold text-xl">
Frontend Web Developer Intern
</h2>
<h3>Jan 2024 - April 2024</h3>
</div>
<hr class="w-full mb-3" />
<p class="mb-3">
During my internship, I learnt how to build WordPress
sites and further enhance my skills in PHP. I also
learnt how to closely work with UI/UX designers and pay
close attention to details with the designs I am given.
</p>
<h3 class="mb-1 font-bold text-lg">Relevant skills:</h3>
<div
class="flex flex-col md:flex-row justify-start items-start gap-0 md:gap-10"
>
<ul class="list-disc list-inside">
<li>WordPress & PHP</li>
<li>Typescript</li>
<li>TailwindCSS</li>
</ul>
<ul class="list-disc list-inside">
<li>Adobe XD</li>
<li>NextJS & React</li>
</ul>
</div>
</div>
</Card>
</div>
</div>
<ul class="list-inside list-disc">
<li>Astro</li>
<li>Typescript</li>
<li>TailwindCSS</li>
</ul>
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#F6DFD8">
<div class="card-content px-4 py-4 md:px-8 md:py-8">
<div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold">
Frontend Web Developer Intern
</h2>
<h3>Jan 2024 - April 2024</h3>
</div>
<hr class="mb-3 w-full" />
<p class="mb-3">
During my internship, I learnt how to build WordPress
sites and further enhance my skills in PHP. I also
learnt how to closely work with UI/UX designers and pay
close attention to details with the designs I am given.
</p>
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
<div
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
>
<ul class="list-inside list-disc">
<li>WordPress & PHP</li>
<li>Typescript</li>
<li>TailwindCSS</li>
</ul>
<ul class="list-inside list-disc">
<li>Adobe XD</li>
<li>NextJS & React</li>
</ul>
</div>
</div>
</Card>
</div>
</div>
</div>
<style>
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>

8
src/components/sections/FooterComponent.astro
View file

@ -1,5 +1,5 @@
<div class="w-full flex justify-center items-center pb-16">
<div class="text-center">
Copyright © 2023-{new Date().getFullYear()} RythonDev. All Rights Reserved.
</div>
<div class="flex w-full items-center justify-center pb-16">
<div class="text-center">
Copyright © 2023-{new Date().getFullYear()} RythonDev. All Rights Reserved.
</div>
</div>

26
src/components/sections/IntroComponent.svelte
View file

@ -108,31 +108,31 @@
<div
id="intro"
class="h-fit
text-white
flex flex-col"
class="flex
h-fit
flex-col text-white"
>
<div class="px-5 lg:px-10 pt-10 pb-2 card-content w-full">
<div class="flex flex-row h-20">
<div class="w-20 mr-1 flex justify-center items-center">
<div class="card-content w-full px-5 pb-2 pt-10 lg:px-10">
<div class="flex h-20 flex-row">
<div class="mr-1 flex w-20 items-center justify-center">
<img
src="/images/pfp_transparent_square.webp"
alt="Ryan"
width="100"
height="100"
class="rounded-full max-w-full bg-[#505050]"
class="max-w-full rounded-full bg-[#505050]"
/>
</div>
<div class="flex flex-col justify-center items-start ml-2">
<div id="name" class="text-2xl font-bold animate-gradient">
<div class="ml-2 flex flex-col items-start justify-center">
<div id="name" class="animate-gradient text-2xl font-bold">
RythonDev
</div>
<div class="text-xl w-full">
<div class="w-full text-xl">
{roleState}<span class="animate-pulse">|</span>
</div>
</div>
</div>
<div id="uwu" class="hidden justify-center items-center">
<div id="uwu" class="hidden items-center justify-center">
<img
src="/images/RythonDev-UwU-compressed.webp"
alt="RythonDev"
@ -140,7 +140,7 @@
height="131.8"
/>
</div>
<div class="text-2xl font-bold mt-2">
<div class="mt-2 text-2xl font-bold">
Good {greetingState}<span
bind:this={greetingPulse}
class="animate-pulse font-extralight">|</span
@ -163,7 +163,7 @@
<b> web development</b>, <b>computer vision</b> and
<b>data science</b>.
</p>
<div class="flex flex-row justify-center items-center mt-5">
<div class="mt-5 flex flex-row items-center justify-center">
<Socials />
</div>
</div>

80
src/components/sections/MoreExperience.astro
View file

@ -4,47 +4,47 @@ import Line from "../elements/NetworkLine.astro";
---
<div id="Experience" class="h-fit">
<div class="flex flex-col items-center">
<div class="w-[90%] md:w-[600px]">
<Line height="50px" />
<Card primaryColor="#FFAC21">
<div class="card-content md:px-8 md:py-8 px-4 py-4">
<div class="flex flex-col justify-start w-full mb-3 gap-1">
<h2 class="font-bold text-xl">
Diploma in Computer Science student
</h2>
<h3 class="font-bold">
@ Methodist College Kuala Lumpur
</h3>
<h3>Jan 2022 - June 2024</h3>
</div>
<hr class="w-full mb-3" />
<h3 class="mb-1 font-bold text-lg">Achievements</h3>
<ul class="list-disc list-inside">
<li>
4-time Dean's List Award recipient (&gt;3.5 GPA)
</li>
<li>3.8 CGPA</li>
<li>President of Computer Programming Club</li>
<li>Vice President of Diploma Union</li>
</ul>
</div>
</Card>
</div>
</div>
<div class="flex flex-col items-center">
<div class="w-[90%] md:w-[600px]">
<Line height="50px" />
<Card primaryColor="#FFAC21">
<div class="card-content px-4 py-4 md:px-8 md:py-8">
<div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold">
Diploma in Computer Science student
</h2>
<h3 class="font-bold">
@ Methodist College Kuala Lumpur
</h3>
<h3>Jan 2022 - June 2024</h3>
</div>
<hr class="mb-3 w-full" />
<h3 class="mb-1 text-lg font-bold">Achievements</h3>
<ul class="list-inside list-disc">
<li>
4-time Dean's List Award recipient (&gt;3.5 GPA)
</li>
<li>3.8 CGPA</li>
<li>President of Computer Programming Club</li>
<li>Vice President of Diploma Union</li>
</ul>
</div>
</Card>
</div>
</div>
</div>
<style>
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>

80
src/components/sections/MoreProjects.svelte
View file

@ -47,31 +47,31 @@
});
</script>
<div class="h-fit pt-20 [perspective:1000px] flex flex-col items-center">
<div class="flex h-fit flex-col items-center pt-20 [perspective:1000px]">
<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"
class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row 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"
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"
>
<img
src="/images/projects/chess-opencv.webp"
alt="computer vision chess bot"
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"
class="absolute left-1/2
top-1/2 max-w-full
rounded-xl border-2
border-solid border-white opacity-40 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)]"
width="700"
/>
<!-- svelte-ignore a11y-media-has-caption -->
<video
width="700"
class="playable 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"
class="playable opacity-1 absolute
left-1/2 top-1/2
max-w-full rounded-xl
border-2 border-solid border-white [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)]"
>
<source
src="/videos/chess_opencv_demo.webm"
@ -80,13 +80,13 @@
</video>
</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"
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="text-3xl font-bold mb-5 text-center lg:text-left">
<h2 class="mb-5 text-center text-3xl font-bold lg:text-left">
Computer Vision Chess bot
</h2>
<p
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left"
>
A script that plays against opponents on lichess. Uses
OpenCV to detect the board and pieces, and the Stockfish
@ -94,25 +94,25 @@
PyAutoGUI to play the moves on the browser.
</p>
<div
class="w-full flex flex-row flex-wrap lg:justify-start justify-center mt-5"
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
>
<div
class="w-fit bg-[#3776AB] text-white
rounded-full px-3 py-1 mr-1 my-1
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="w-fit bg-[#3178C6] text-white
rounded-full px-3 py-1 mr-1 my-1
class="my-1 mr-1 w-fit
rounded-full bg-[#3178C6] px-3 py-1 text-white
transition-colors duration-300"
>
OpenCV
</div>
<div
class="w-fit bg-black text-white
rounded-full px-3 py-1 mr-1 my-1
class="my-1 mr-1 w-fit
rounded-full bg-black px-3 py-1 text-white
transition-colors duration-300"
>
PyAutoGUI
@ -121,41 +121,41 @@
</div>
</div>
<div
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
>
<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"
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="text-3xl font-bold mb-5 lg:text-right text-center">
<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
Computer Vision AimLab Bot
</h2>
<p
class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-right"
>
A script that plays AimLab, a game that helps improve your
aim in FPS games. Uses OpenCV to detect the targets and
win32API to move the mouse and click.
</p>
<div
class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5 mb-10 lg:mb-0"
class="mb-10 mt-5 flex w-full flex-row flex-wrap justify-center lg:mb-0 lg:justify-end"
>
<div
class="w-fit bg-[#3776AB] text-white
rounded-full px-3 py-1 mr-1 my-1
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="w-fit bg-[#3178C6] text-white
rounded-full px-3 py-1 mr-1 my-1
class="my-1 mr-1 w-fit
rounded-full bg-[#3178C6] px-3 py-1 text-white
transition-colors duration-300"
>
OpenCV
</div>
<div
class="w-fit bg-[#0078D4] text-white
rounded-full px-3 py-1 mr-1 my-1
class="my-1 mr-1 w-fit
rounded-full bg-[#0078D4] px-3 py-1 text-white
transition-colors duration-300"
>
win32API
@ -163,24 +163,24 @@
</div>
</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"
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"
>
<img
src="/images/projects/aim-lab.webp"
alt="aim lab"
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"
class="absolute left-1/2
top-1/2 max-w-full rounded-xl border-2
border-solid border-white opacity-40 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)]"
width="700"
/>
<!-- svelte-ignore a11y-media-has-caption -->
<video
width="700"
class="playable 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"
class="playable opacity-1 absolute
left-1/2 top-1/2
max-w-full rounded-xl
border-2 border-solid border-white [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]"
><source src="/videos/aim_lab_demo.webm" /></video
>
</div>

465
src/components/sections/NavBar.astro
View file

@ -1,267 +1,266 @@
<div class="w-full">
<label
class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 rounded-lg"
aria-label="Menu"
transition:persist
transition:name="hamburger"
>
<span class="top-bun"></span>
<input type="checkbox" aria-label="Toggle menu" />
<span class="bottom-bun"></span>
</label>
<aside class="sidebar flex z-20">
<nav
class="flex flex-col justify-center items-center capitalize w-full gap-5"
role="navigation"
>
<a
class="text-2xl sidebar-url px-5 py-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="/">Home</a
>
<a
class="text-2xl sidebar-url px-5 py-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="/what-i-do">What I Do</a
>
<a
class="text-2xl sidebar-url px-5 py-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="/projects">Projects</a
>
<a
class="text-2xl sidebar-url px-5 py-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="/skills">Skills</a
>
<a
class="text-2xl sidebar-url px-5 py-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="/experience">Experience</a
>
<a
class="text-2xl sidebar-url px-5 py-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="/contact">Contact</a
>
</nav>
</aside>
<div
id="navbar"
class="fixed z-50 top-0 w-full hidden md:flex justify-center
bg-[#202020]/80 backdrop-blur"
transition:name="navBar"
>
<div
id="navbar-div"
class="py-4 uppercase w-full flex flex-row justify-center items-center"
>
<a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="/">home</a
>
<a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="/what-i-do">What I Do</a
>
<label
class="hamburger-menu bg-primary fixed flex rounded-lg border-2 border-solid border-gray-100"
aria-label="Menu"
transition:persist
transition:name="hamburger"
>
<span class="top-bun"></span>
<input type="checkbox" aria-label="Toggle menu" />
<span class="bottom-bun"></span>
</label>
<aside class="sidebar z-20 flex">
<nav
class="flex w-full flex-col items-center justify-center gap-5 capitalize"
role="navigation"
>
<a
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
href="/">Home</a
>
<a
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
href="/what-i-do">What I Do</a
>
<a
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
href="/projects">Projects</a
>
<a
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
href="/skills">Skills</a
>
<a
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
href="/experience">Experience</a
>
<a
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
href="/contact">Contact</a
>
</nav>
</aside>
<div
id="navbar"
class="fixed top-0 z-50 hidden w-full justify-center bg-[#202020]/80 backdrop-blur md:flex"
transition:name="navBar"
>
<div
id="navbar-div"
class="flex w-full flex-row items-center justify-center py-4 uppercase"
>
<a
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
href="/">home</a
>
<a
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
href="/what-i-do">What I Do</a
>
<a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="/projects">projects</a
>
<a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="/skills">skills</a
>
<a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="/experience">experience</a
>
<a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="/contact">contact</a
>
</div>
</div>
<a
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
href="/projects">projects</a
>
<a
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
href="/skills">skills</a
>
<a
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
href="/experience">experience</a
>
<a
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
href="/contact">contact</a
>
</div>
</div>
</div>
<style>
:root {
--bar-width: 30px;
--bar-height: 4px;
--hamburger-gap: 6px;
--foreground: #141414;
--background: white;
--hamburger-margin: 20px;
--animation-timing: 300ms ease-in-out;
--hamburger-height: calc(
var(--bar-height) * 3 + var(--hamburger-gap) * 2
);
}
:root {
--bar-width: 30px;
--bar-height: 4px;
--hamburger-gap: 6px;
--foreground: #141414;
--background: white;
--hamburger-margin: 20px;
--animation-timing: 300ms ease-in-out;
--hamburger-height: calc(
var(--bar-height) * 3 + var(--hamburger-gap) * 2
);
}
.hamburger-menu {
--x-width: calc(var(--hamburger-height) * 1.41421356237);
.hamburger-menu {
--x-width: calc(var(--hamburger-height) * 1.41421356237);
display: none;
display: none;
translate: 0 20px;
flex-direction: column;
translate: 0 20px;
flex-direction: column;
gap: var(--hamburger-gap);
top: var(--hamburger-margin);
right: var(--hamburger-margin);
z-index: 30;
cursor: pointer;
background: var(--foreground);
gap: var(--hamburger-gap);
top: var(--hamburger-margin);
right: var(--hamburger-margin);
z-index: 30;
cursor: pointer;
background: var(--foreground);
padding: 0.5rem;
padding: 0.5rem;
rotate: 180deg;
rotate: 180deg;
transition: all var(--animation-timing);
}
transition: all var(--animation-timing);
}
.hamburger-menu.active {
padding-right: 0;
}
.hamburger-menu.active {
padding-right: 0;
}
.hamburger-menu input:focus-visible {
border: 1px solid var(--background);
box-shadow: 0 0 0 1px var(--foreground);
}
.hamburger-menu input:focus-visible {
border: 1px solid var(--background);
box-shadow: 0 0 0 1px var(--foreground);
}
.hamburger-menu input,
.hamburger-menu span {
content: "";
width: var(--bar-width);
height: var(--bar-height);
background-color: white;
border-radius: 9999px;
transform-origin: left center;
transition:
opacity var(--animation-timing),
width var(--animation-timing),
rotate var(--animation-timing),
translate var(--animation-timing),
background-color var(--animation-timing);
}
.hamburger-menu input,
.hamburger-menu span {
content: "";
width: var(--bar-width);
height: var(--bar-height);
background-color: white;
border-radius: 9999px;
transform-origin: left center;
transition:
opacity var(--animation-timing),
width var(--animation-timing),
rotate var(--animation-timing),
translate var(--animation-timing),
background-color var(--animation-timing);
}
.hamburger-menu input {
appearance: none;
padding: 0;
margin: 0;
outline: none;
pointer-events: none;
}
.hamburger-menu input {
appearance: none;
padding: 0;
margin: 0;
outline: none;
pointer-events: none;
}
.hamburger-menu .top-bun.active {
rotate: 45deg;
width: var(--x-width);
translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / -2);
}
.hamburger-menu .top-bun.active {
rotate: 45deg;
width: var(--x-width);
translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / -2);
}
.hamburger-menu .bottom-bun.active {
rotate: -45deg;
width: var(--x-width);
translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / 2);
}
.hamburger-menu .bottom-bun.active {
rotate: -45deg;
width: var(--x-width);
translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / 2);
}
.hamburger-menu input:checked {
opacity: 0;
width: 0;
}
.hamburger-menu input:checked {
opacity: 0;
width: 0;
}
.sidebar {
position: fixed;
top: 0;
right: 0;
transition: translate var(--animation-timing);
translate: 100%;
padding: 0.5rem 1rem;
padding-top: calc(
var(--hamburger-height) + var(--hamburger-margin) + 1rem
);
background-color: var(--foreground);
color: var(--background);
width: 100vw;
min-height: 100vh;
}
.sidebar {
position: fixed;
top: 0;
right: 0;
transition: translate var(--animation-timing);
translate: 100%;
padding: 0.5rem 1rem;
padding-top: calc(
var(--hamburger-height) + var(--hamburger-margin) + 1rem
);
background-color: var(--foreground);
color: var(--background);
width: 100vw;
min-height: 100vh;
}
@media (max-width: 767px) {
.hamburger-menu {
display: flex;
}
}
@media (max-width: 767px) {
.hamburger-menu {
display: flex;
}
}
</style>
<script defer is:inline>
const sidebar = document.querySelectorAll(".sidebar-url");
const hamburger = document.querySelector(".hamburger-menu");
const checkbox = document.querySelector("input");
const sidebar = document.querySelectorAll(".sidebar-url");
const hamburger = document.querySelector(".hamburger-menu");
const checkbox = document.querySelector("input");
const topBun = document.querySelector(".top-bun");
const bottomBun = document.querySelector(".bottom-bun");
const topBun = document.querySelector(".top-bun");
const bottomBun = document.querySelector(".bottom-bun");
const openSideBar = () => {
checkbox.checked = true;
document.querySelector(".sidebar").style.translate = "0";
hamburger.classList.add("active");
topBun.classList.add("active");
bottomBun.classList.add("active");
};
const openSideBar = () => {
checkbox.checked = true;
document.querySelector(".sidebar").style.translate = "0";
hamburger.classList.add("active");
topBun.classList.add("active");
bottomBun.classList.add("active");
};
const closeSideBar = () => {
checkbox.checked = false;
document.querySelector(".sidebar").style.translate = "100%";
hamburger.classList.remove("active");
topBun.classList.remove("active");
bottomBun.classList.remove("active");
};
const closeSideBar = () => {
checkbox.checked = false;
document.querySelector(".sidebar").style.translate = "100%";
hamburger.classList.remove("active");
topBun.classList.remove("active");
bottomBun.classList.remove("active");
};
// for each sidebar url, if clicked on, uncheck the checkbox
sidebar.forEach((url) => {
url.addEventListener("click", () => {
closeSideBar();
});
});
// for each sidebar url, if clicked on, uncheck the checkbox
sidebar.forEach((url) => {
url.addEventListener("click", () => {
closeSideBar();
});
});
if (window.innerWidth < 768) {
hamburger.style.translate = "0 0";
}
if (window.innerWidth < 768) {
hamburger.style.translate = "0 0";
}
// window.addEventListener("scroll", () => {
// if (window.scrollY > 50 || window.innerWidth < 768) {
// hamburger.style.translate = "0 0";
// } else {
// hamburger.style.translate = "0 -200px";
// closeSideBar();
// }
// });
// window.addEventListener("scroll", () => {
// if (window.scrollY > 50 || window.innerWidth < 768) {
// hamburger.style.translate = "0 0";
// } else {
// hamburger.style.translate = "0 -200px";
// closeSideBar();
// }
// });
// if clicked outside of the hamburger menu, close the sidebar
window.addEventListener("click", (e) => {
if (
e.target !== hamburger &&
e.target !== topBun &&
e.target !== bottomBun &&
e.target !== checkbox &&
e.target !== document.querySelector(".sidebar") &&
e.target !== document.querySelector(".sidebar nav")
) {
closeSideBar();
}
});
// if clicked outside of the hamburger menu, close the sidebar
window.addEventListener("click", (e) => {
if (
e.target !== hamburger &&
e.target !== topBun &&
e.target !== bottomBun &&
e.target !== checkbox &&
e.target !== document.querySelector(".sidebar") &&
e.target !== document.querySelector(".sidebar nav")
) {
closeSideBar();
}
});
// if window is resized, check if it's less than 768px
window.addEventListener("resize", () => {
if (window.innerWidth < 768) {
hamburger.style.translate = "0 0";
} else {
hamburger.style.translate = "0 -200px";
closeSideBar();
}
});
// if window is resized, check if it's less than 768px
window.addEventListener("resize", () => {
if (window.innerWidth < 768) {
hamburger.style.translate = "0 0";
} else {
hamburger.style.translate = "0 -200px";
closeSideBar();
}
});
// if checked, translate the sidebar
checkbox.addEventListener("change", () => {
if (checkbox.checked) {
openSideBar();
} else {
closeSideBar();
}
});
// if checked, translate the sidebar
checkbox.addEventListener("change", () => {
if (checkbox.checked) {
openSideBar();
} else {
closeSideBar();
}
});
</script>

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

@ -7,364 +7,300 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
---
<div
id="projects"
class="h-fit [perspective:1000px] flex flex-col items-center"
id="projects"
class="flex h-fit flex-col items-center [perspective:1000px]"
>
<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
<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 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-600 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-600 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-[#B11700] 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-600 rounded-xl opacity-1
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="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
<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
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
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-600 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-600 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-600 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
/>
<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
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 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-600 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
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>

14
src/components/sections/StreamSchedule.svelte
View file

@ -119,23 +119,23 @@
<!-- TABS -->
{#if !sameTimezone}
<div
class="w-full flex
bg-[#141414]
class="z-20 flex
w-full
rounded-xl
px-1 py-1 z-20"
bg-[#141414] px-1 py-1"
>
<button
onclick={() => (adjusted = true)}
class="rounded-lg w-1/2 py-1
class="w-1/2 rounded-lg py-1
transition-colors duration-150
{adjusted ? 'text-white bg-[#303030]' : 'text-gray-400'}"
{adjusted ? 'bg-[#303030] text-white' : 'text-gray-400'}"
>Your Timezone</button
>
<button
onclick={() => (adjusted = false)}
class="rounded-lg flex-grow py-1
class="flex-grow rounded-lg py-1
transition-colors duration-150
{adjusted ? 'text-gray-400' : 'text-white bg-[#303030]'}"
{adjusted ? 'text-gray-400' : 'bg-[#303030] text-white'}"
>AEST/<wbr />AEDT</button
>
</div>

76
src/components/sections/TaskWidget.svelte
View file

@ -116,21 +116,21 @@
</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"
class="image-container relative mb-3 ml-0 mr-0 aspect-video [perspective:200px] md:mr-5 lg:mb-0 lg:ml-1 lg:mr-0 lg:w-1/2"
>
<!-- 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)]"
class="task-widget absolute left-1/2 top-1/2 flex
h-[99%] w-full
flex-col opacity-30 [transform:translateX(-50%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)]"
>
<div
class="w-full bg-black border-solid border-2 border-white
class="flex w-full flex-row items-center justify-between
rounded-lg
px-5 py-2
text-xl text-white
flex flex-row justify-between items-center
font-['Fredoka',_sans-serif]"
border-2 border-solid
border-white bg-black
px-5 py-2 font-['Fredoka',_sans-serif] text-xl
text-white"
>
<span>Hover here!</span>
<span>0/100+</span>
@ -138,21 +138,21 @@
<div
class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
>
<div class="scroll-element primary px-1 absolute w-full">
<div class="scroll-element primary absolute w-full px-1">
{#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"
class="my-2 w-full overflow-hidden overflow-ellipsis whitespace-nowrap rounded-md bg-[#404040]
px-5 py-1 text-white"
>
O {streamer} : {task}
</div>
{/each}
</div>
<div class="scroll-element secondary px-1 absolute w-full">
<div class="scroll-element secondary absolute w-full px-1">
{#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"
class="my-2 w-full overflow-hidden overflow-ellipsis whitespace-nowrap rounded-md bg-[#404040]
px-5 py-1 text-white"
>
O {streamer} : {task}
</div>
@ -161,17 +161,17 @@
</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)]"
class="task-widget absolute left-1/2 top-1/2
flex h-[99%]
w-full flex-col [transform:translateX(-51%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]"
>
<div
class="w-full bg-black border-solid border-2 border-white
class="flex w-full flex-row items-center justify-between
rounded-lg
px-5 py-2
text-xl text-white
flex flex-row justify-between items-center
font-['Fredoka',_sans-serif]"
border-2 border-solid
border-white bg-black
px-5 py-2 font-['Fredoka',_sans-serif] text-xl
text-white"
>
<span>Hover here!</span>
<span>0/100+</span>
@ -179,21 +179,21 @@
<div
class="scroll-parent relative h-full overflow-hidden font-['Fredoka',_sans-serif]"
>
<div class="scroll-element primary px-1 absolute w-full">
<div class="scroll-element primary absolute w-full px-1">
{#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"
class="my-2 w-full overflow-hidden overflow-ellipsis whitespace-nowrap rounded-md bg-[#404040]
px-5 py-1 text-white"
>
O {streamer} : {task}
</div>
{/each}
</div>
<div class="scroll-element secondary px-1 absolute w-full">
<div class="scroll-element secondary absolute w-full px-1">
{#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"
class="my-2 w-full overflow-hidden overflow-ellipsis whitespace-nowrap rounded-md bg-[#404040]
px-5 py-1 text-white"
>
O {streamer} : {task}
</div>
@ -202,21 +202,21 @@
</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"
class="visit-div absolute left-1/2 top-1/2 h-full w-full
overflow-hidden
rounded-md 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/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
class="opacity-1 absolute left-1/2 top-1/2
hidden rounded-xl bg-blue-500 px-5 py-3
font-bold
hidden lg:block
transition-colors duration-300
hover:bg-white hover:text-blue-500">View repository</a
[transform:translateX(-50%)_translateY(-50%)] hover:bg-white
hover:text-blue-500 lg:block">View repository</a
>
</div>
</div>

122
src/components/sections/WhatIDoComponent.astro
View file

@ -2,70 +2,70 @@
import Card from "../elements/Card.astro";
---
<div class="w-full flex flex-col justify-center items-center">
<div
class="w-full h-fit flex flex-col justify-center items-center max-w-[1440px]"
>
<h1 class="text-center text-5xl mb-10">What I Do</h1>
<div
class="grid grid-cols-1 w-[90%] sm:w-[350px] lg:w-[90%] lg:grid-cols-3 place-content-center justify-center xl:w-4/5 gap-5 xl:gap-12"
>
<Card primaryColor="#19a7ce" scaleOnHover={true}>
<div class="card-content">
<h2 class="font-bold text-xl text-center">
Web Development
</h2>
<hr class="w-full" />
<p class="text-center text-balance">
Bringing ideas to life on the web is my passion. I enjoy
bringing my imagination to life through web development.
</p>
</div>
</Card>
<div class="flex w-full flex-col items-center justify-center">
<div
class="flex h-fit w-full max-w-[1440px] flex-col items-center justify-center"
>
<h1 class="mb-10 text-center text-5xl">What I Do</h1>
<div
class="grid w-[90%] grid-cols-1 place-content-center justify-center gap-5 sm:w-[350px] lg:w-[90%] lg:grid-cols-3 xl:w-4/5 xl:gap-12"
>
<Card primaryColor="#19a7ce" scaleOnHover={true}>
<div class="card-content">
<h2 class="text-center text-xl font-bold">
Web Development
</h2>
<hr class="w-full" />
<p class="text-balance text-center">
Bringing ideas to life on the web is my passion. I enjoy
bringing my imagination to life through web development.
</p>
</div>
</Card>
<Card primaryColor="#a1eebd" scaleOnHover={true}>
<div class="card-content">
<h2 class="font-bold text-xl text-center">Data Science</h2>
<hr class="w-full" />
<p class="text-center text-balance">
Using data to make decisions is a powerful tool. I am
experienced in analyzing data and making decisions based
on data.
</p>
</div>
</Card>
<Card primaryColor="#a1eebd" scaleOnHover={true}>
<div class="card-content">
<h2 class="text-center text-xl font-bold">Data Science</h2>
<hr class="w-full" />
<p class="text-balance text-center">
Using data to make decisions is a powerful tool. I am
experienced in analyzing data and making decisions based
on data.
</p>
</div>
</Card>
<Card primaryColor="#9D76C1" scaleOnHover={true}>
<div class="card-content">
<h2 class="font-bold text-xl text-center">
Content Creation
</h2>
<hr class="w-full" />
<p class="text-center text-balance">
Everyone has something to give, or something to share. I
produce content around productivity and software
development.
</p>
</div>
</Card>
</div>
</div>
<Card primaryColor="#9D76C1" scaleOnHover={true}>
<div class="card-content">
<h2 class="text-center text-xl font-bold">
Content Creation
</h2>
<hr class="w-full" />
<p class="text-balance text-center">
Everyone has something to give, or something to share. I
produce content around productivity and software
development.
</p>
</div>
</Card>
</div>
</div>
</div>
<style>
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
padding: 2rem 2rem;
border-radius: 1.25rem;
overflow: hidden;
min-width: 210px;
}
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
padding: 2rem 2rem;
border-radius: 1.25rem;
overflow: hidden;
min-width: 210px;
}
</style>

211
src/pages/blog/[...slug].astro
View file

@ -5,11 +5,11 @@ import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/sections/FooterComponent.astro";
export async function getStaticPaths() {
const blogEntries = await getCollection("blog");
return blogEntries.map((entry) => ({
params: { slug: entry.slug },
props: { entry },
}));
const blogEntries = await getCollection("blog");
return blogEntries.map((entry) => ({
params: { slug: entry.slug },
props: { entry },
}));
}
const { entry } = Astro.props;
@ -17,123 +17,118 @@ const { Content } = await entry.render();
---
<Layout
title="Blog"
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
title="Blog"
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
>
<BackToBlogs />
<div id="blog-content-component" class="mt-10 pt-10 mx-auto">
<h1 class="text-left text-4xl">{entry.data.title}</h1>
<p class="text-gray-200 mt-3 text-lg">
Published
{
new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
day: "numeric",
month: "long",
year: "numeric",
})
}
</p>
<p class="text-gray-200 text-lg">by {entry.data.author}</p>
<p class="text-white text-lg">{entry.data.description}</p>
<BackToBlogs />
<div id="blog-content-component" class="mx-auto mt-10 pt-10">
<h1 class="text-left text-4xl">{entry.data.title}</h1>
<p class="mt-3 text-lg text-gray-200">
Published
{
new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
day: "numeric",
month: "long",
year: "numeric",
})
}
</p>
<p class="text-lg text-gray-200">by {entry.data.author}</p>
<p class="text-lg text-white">{entry.data.description}</p>
<div class="flex flex-row flex-wrap justify-start items-start">
{
entry.data.tags?.map((tag) => (
<div
class="mr-2 px-3 py-1 rounded-xl bg-[#282828]
border-2 border-solid border-gray-500
hover:border-white hover:bg-gray-300 hover:text-black
transition-colors duration-150"
>
{tag}
</div>
))
}
</div>
<div class="flex flex-row flex-wrap items-start justify-start">
{
entry.data.tags?.map((tag) => (
<div class="mr-2 rounded-xl border-2 border-solid border-gray-500 bg-[#282828] px-3 py-1 transition-colors duration-150 hover:border-white hover:bg-gray-300 hover:text-black">
{tag}
</div>
))
}
</div>
<hr class="my-5" />
<hr class="my-5" />
<Content />
</div>
<div class="mt-10">
<Footer />
</div>
<Content />
</div>
<div class="mt-10">
<Footer />
</div>
</Layout>
<style is:inline>
#blog-content-component {
width: clamp(310px, 60vw, 800px);
}
#blog-content-component {
width: clamp(310px, 60vw, 800px);
}
a:not(#navbar-div a) {
color: lightskyblue;
text-decoration: underline;
cursor: pointer;
}
a:not(#navbar-div a) {
color: lightskyblue;
text-decoration: underline;
cursor: pointer;
}
p {
display: block;
font-size: 1.1rem;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
p {
display: block;
font-size: 1.1rem;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
ul {
display: block;
list-style-type: disc;
margin-left: 0;
margin-right: 0;
margin-bottom: 0.5em;
padding-left: 40px;
}
ul {
display: block;
list-style-type: disc;
margin-left: 0;
margin-right: 0;
margin-bottom: 0.5em;
padding-left: 40px;
}
ul:not(ul ul) {
margin-top: 0.5em;
}
ul:not(ul ul) {
margin-top: 0.5em;
}
li {
display: list-item;
}
li {
display: list-item;
}
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
</style>

134
src/pages/blog/index.astro
View file

@ -9,78 +9,74 @@ const blogPosts = await getCollection("blog");
---
<Layout
title="Blog"
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
title="Blog"
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
>
<div id="blog-component" class="mt-10 pt-20">
<h1 class="text-center text-5xl">Blog</h1>
<div class="mt-10 flex flex-col justify-center items-center">
<div style="width: clamp(310px, 50vw, 800px);" class="mb-10">
<p class="text-center text-lg">
This is where I upload my blogs. No paywalls, no ads, no
bullshit.
</p>
</div>
<div id="blog-component" class="mt-10 pt-20">
<h1 class="text-center text-5xl">Blog</h1>
<div class="mt-10 flex flex-col items-center justify-center">
<div style="width: clamp(310px, 50vw, 800px);" class="mb-10">
<p class="text-center text-lg">
This is where I upload my blogs. No paywalls, no ads, no
bullshit.
</p>
</div>
<!-- Series of blog posts -->
<div style="width: clamp(310px, 50vw, 800px);">
{
blogPosts.map((blog) => (
<a class="mb-5 group" href={`/blog/${blog.slug}`}>
<Card
primaryColor={
blog.data.color ?? "rgba(0,0,0,0)"
}
pixelHeight="50px"
>
<div class="card-content py-3 px-8 text-left relative">
<h2 class="font-bold text-xl mb-1">
{blog.data.title}
</h2>
<p class="line-clamp-2">
{blog.data.description}
</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
class="size-6
absolute top-3 right-3
group-hover:top-2 group-hover:right-2
stroke-white group-hover:stroke-green-400
transition-all duration-150"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
/>
</svg>
</div>
</Card>
</a>
))
}
</div>
</div>
</div>
<div class="mt-10">
<Footer />
</div>
<!-- Series of blog posts -->
<div style="width: clamp(310px, 50vw, 800px);">
{
blogPosts.map((blog) => (
<a class="group mb-5" href={`/blog/${blog.slug}`}>
<Card
primaryColor={
blog.data.color ?? "rgba(0,0,0,0)"
}
pixelHeight="50px"
>
<div class="card-content relative px-8 py-3 text-left">
<h2 class="mb-1 text-xl font-bold">
{blog.data.title}
</h2>
<p class="line-clamp-2">
{blog.data.description}
</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
class="absolute right-3 top-3 size-6 stroke-white transition-all duration-150 group-hover:right-2 group-hover:top-2 group-hover:stroke-green-400"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
/>
</svg>
</div>
</Card>
</a>
))
}
</div>
</div>
</div>
<div class="mt-10">
<Footer />
</div>
</Layout>
<style>
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>

86
src/pages/contact.astro
View file

@ -7,51 +7,51 @@ import Footer from "../components/sections/FooterComponent.astro";
---
<Layout
title="Contact"
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
title="Contact"
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
>
<NavBar />
<div id="contact-component" class="mt-10 pt-20">
<h1 class="text-center text-5xl">Contact</h1>
<div class="mt-10 flex justify-center items-center">
<div class="w-[90%] md:w-[600px]">
<Card primaryColor="#40A2D8">
<div class="card-content">
<div class="flex flex-col justify-left w-full mb-3">
<h2
class="font-bold text-xl text-center text-balance"
>
Looking for a young developer with fresh ideas?
</h2>
</div>
<hr class="w-full mb-3" />
<div class="text-center text-balance">
Whether it's sponsorships or collaboration
opportunities, hit me up!
</div>
</div>
</Card>
</div>
</div>
<div class="mt-10">
<ContactComponent />
</div>
</div>
<Footer />
<NavBar />
<div id="contact-component" class="mt-10 pt-20">
<h1 class="text-center text-5xl">Contact</h1>
<div class="mt-10 flex items-center justify-center">
<div class="w-[90%] md:w-[600px]">
<Card primaryColor="#40A2D8">
<div class="card-content">
<div class="justify-left mb-3 flex w-full flex-col">
<h2
class="text-balance text-center text-xl font-bold"
>
Looking for a young developer with fresh ideas?
</h2>
</div>
<hr class="mb-3 w-full" />
<div class="text-balance text-center">
Whether it's sponsorships or collaboration
opportunities, hit me up!
</div>
</div>
</Card>
</div>
</div>
<div class="mt-10">
<ContactComponent />
</div>
</div>
<Footer />
</Layout>
<style>
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
padding: 2rem 2rem;
border-radius: 1.25rem;
overflow: hidden;
}
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
padding: 2rem 2rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>

8
src/pages/discord.astro
View file

@ -3,11 +3,11 @@ import InfoLayout from "../layouts/InfoLayout.astro";
---
<InfoLayout
title="RythonDev Discord Server"
description="Come join Ryan's Room for tech support or chaotic vibes!"
metaURL="https://rython.dev/discord"
title="RythonDev Discord Server"
description="Come join Ryan's Room for tech support or chaotic vibes!"
metaURL="https://rython.dev/discord"
/>
<script is:inline>
window.location.href = "https://discord.gg/UnHyHkhbga";
window.location.href = "https://discord.gg/UnHyHkhbga";
</script>

16
src/pages/experience.astro
View file

@ -7,13 +7,13 @@ import Footer from "../components/sections/FooterComponent.astro";
---
<Layout
title="Experience"
description="Find out RythonDev's previous education"
title="Experience"
description="Find out RythonDev's previous education"
>
<NavBar />
<div id="Experience" class="py-20">
<EducationComponent />
<MoreExperience />
</div>
<Footer />
<NavBar />
<div id="Experience" class="py-20">
<EducationComponent />
<MoreExperience />
</div>
<Footer />
</Layout>

168
src/pages/faq.astro
View file

@ -5,88 +5,88 @@ import Footer from "../components/sections/FooterComponent.astro";
---
<Layout title="Socials" description="Check out Ryan's socials">
<div class="mx-auto my-10 max-w-full w-[90%] md:w-1/2">
<Card primaryColor="aquamarine">
<div class="card-content md:px-8 md:py-8 px-4 py-4">
<h1 class="font-bold text-3xl text-center">
Frequently Asked Questions
</h1>
<hr class="my-2" />
<!-- Who are you? -->
<h2 class="font-bold text-xl">Who are you?</h2>
<p>
I'm Ryan, I am a software developer and a coworking & study
streamer.
<br />
<br />
See my website <a
target="_blank"
href="https://rython.dev/"
class="text-blue-400 underline">here</a
> to learn more about me, including my software development portfolio
and my content creation projects.
</p>
<hr class="my-2" />
<h2 class="font-bold text-xl">
Where are you from? What languages do you speak?
</h2>
<p>
I'm born and raised in Malaysia, studying in Australia. I
speak English, Mandarin Chinese, and some Malay. I can read
both traditional and simplified Chinese characters.
</p>
<hr class="my-2" />
<!-- How to pronounce? -->
<h2 class="font-bold text-xl">
How to pronounce your username?
</h2>
<p>
Try to pronounce Python, and then replace the "Py" with
"Ry". You can also call me "Ry" or "Ryan" if you prefer.
</p>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">What is a coworking stream?</h2>
<p>
That question is answered <a
target="_blank"
class="text-blue-400 underline"
href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams"
>here</a
>.
</p>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">
Why are you muted? Why aren't you reading chat?
</h2>
<p>
During work time, I am muted and not reading chat to focus
on my work. I will try to catch up on chat during break
time.
</p>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">Is that a keychron?</h2>
<p>No. It's an Epomaker GK64x modded with black switches.</p>
<hr class="my-2" />
</div>
</Card>
<Footer />
</div>
<style>
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>
<div class="mx-auto my-10 w-[90%] max-w-full md:w-1/2">
<Card primaryColor="aquamarine">
<div class="card-content px-4 py-4 md:px-8 md:py-8">
<h1 class="text-center text-3xl font-bold">
Frequently Asked Questions
</h1>
<hr class="my-2" />
<!-- Who are you? -->
<h2 class="text-xl font-bold">Who are you?</h2>
<p>
I'm Ryan, I am a software developer and a coworking & study
streamer.
<br />
<br />
See my website <a
target="_blank"
href="https://rython.dev/"
class="text-blue-400 underline">here</a
> to learn more about me, including my software development portfolio
and my content creation projects.
</p>
<hr class="my-2" />
<h2 class="text-xl font-bold">
Where are you from? What languages do you speak?
</h2>
<p>
I'm born and raised in Malaysia, studying in Australia. I
speak English, Mandarin Chinese, and some Malay. I can read
both traditional and simplified Chinese characters.
</p>
<hr class="my-2" />
<!-- How to pronounce? -->
<h2 class="text-xl font-bold">
How to pronounce your username?
</h2>
<p>
Try to pronounce Python, and then replace the "Py" with
"Ry". You can also call me "Ry" or "Ryan" if you prefer.
</p>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="text-xl font-bold">What is a coworking stream?</h2>
<p>
That question is answered <a
target="_blank"
class="text-blue-400 underline"
href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams"
>here</a
>.
</p>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="text-xl font-bold">
Why are you muted? Why aren't you reading chat?
</h2>
<p>
During work time, I am muted and not reading chat to focus
on my work. I will try to catch up on chat during break
time.
</p>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="text-xl font-bold">Is that a keychron?</h2>
<p>No. It's an Epomaker GK64x modded with black switches.</p>
<hr class="my-2" />
</div>
</Card>
<Footer />
</div>
<style>
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>
</Layout>

80
src/pages/index.astro
View file

@ -13,49 +13,49 @@ import Footer from "../components/sections/FooterComponent.astro";
---
<Layout
title="Ryan's Portfolio"
description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
title="Ryan's Portfolio"
description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
>
<NavBar />
<div id="home" class="pt-20 flex justify-center items-center">
<div class="w-[90%] xl:w-1/2 lg:w-1/2 max-w-[1080px]">
<Card
bgColor="#252525"
primaryColor="#BEADFA"
className="animate-fadeIn"
>
<Intro client:load />
</Card>
</div>
</div>
<NetworkLine height="70px" />
<div id="what-i-do">
<div class="h-[1px] w-1/3 bg-[#404040] mb-10 mx-auto"></div>
<WhatIDo />
</div>
<div id="projects">
<div class="pt-20">
<h1 class="text-5xl text-center mb-10">Projects</h1>
<Projects />
</div>
</div>
<div id="skills">
<Skills />
</div>
<div id="education" class="py-20">
<Experience />
</div>
<div id="contact">
<Contact />
</div>
<Footer />
<NavBar />
<div id="home" class="flex items-center justify-center pt-20">
<div class="w-[90%] max-w-[1080px] lg:w-1/2 xl:w-1/2">
<Card
bgColor="#252525"
primaryColor="#BEADFA"
className="animate-fadeIn"
>
<Intro client:load />
</Card>
</div>
</div>
<NetworkLine height="70px" />
<div id="what-i-do">
<div class="mx-auto mb-10 h-[1px] w-1/3 bg-[#404040]"></div>
<WhatIDo />
</div>
<div id="projects">
<div class="pt-20">
<h1 class="mb-10 text-center text-5xl">Projects</h1>
<Projects />
</div>
</div>
<div id="skills">
<Skills />
</div>
<div id="education" class="py-20">
<Experience />
</div>
<div id="contact">
<Contact />
</div>
<Footer />
</Layout>
<script is:inline>
location.search.includes("?uwu") &&
document.documentElement.classList.add("uwu");
location.search.includes("?uwu") &&
document.documentElement.classList.add("uwu");
</script>
<style is:global>
.uwu #uwu {
display: flex;
}
.uwu #uwu {
display: flex;
}
</style>

10
src/pages/live.astro
View file

@ -3,12 +3,12 @@ import InfoLayout from "../layouts/InfoLayout.astro";
---
<InfoLayout
title="RythonDev's Software Dev + Coworking Stream"
description="Come sit at the table with us! We can chill, nerd out, and enjoy good vibes together!"
thumbnail="/images/stream-live-thumbnail.webp"
metaURL="https://rython.dev/live"
title="RythonDev's Software Dev + Coworking Stream"
description="Come sit at the table with us! We can chill, nerd out, and enjoy good vibes together!"
thumbnail="/images/stream-live-thumbnail.webp"
metaURL="https://rython.dev/live"
/>
<script is:inline>
window.location.href = "https://www.twitch.tv/rythondev";
window.location.href = "https://www.twitch.tv/rythondev";
</script>

10
src/pages/onlyfans.astro
View file

@ -3,12 +3,12 @@ import InfoLayout from "../layouts/InfoLayout.astro";
---
<InfoLayout
title="OnlyFans"
description="UWU 💦 NYA MEOW SEXY TIME 🕓 ! RYAN IS 😗♻ HERE 🚢💪 TO 💦✌ EAT 😩🗣 YOUR 👉 TOES 👣 NOM NOM JUST KIDDING UWU 💦"
metaURL="https://rython.dev/onlyfans"
thumbnail="/images/of-logo-b.webp"
title="OnlyFans"
description="UWU 💦 NYA MEOW SEXY TIME 🕓 ! RYAN IS 😗♻ HERE 🚢💪 TO 💦✌ EAT 😩🗣 YOUR 👉 TOES 👣 NOM NOM JUST KIDDING UWU 💦"
metaURL="https://rython.dev/onlyfans"
thumbnail="/images/of-logo-b.webp"
/>
<script is:inline>
window.location.href = "https://youtu.be/dQw4w9WgXcQ";
window.location.href = "https://youtu.be/dQw4w9WgXcQ";
</script>

166
src/pages/projects.astro
View file

@ -7,102 +7,102 @@ import Footer from "../components/sections/FooterComponent.astro";
---
<Layout title="Projects" description="View what projects RythonDev has made">
<NavBar />
<div id="projects" class="pt-20">
<h1 class="text-5xl text-center mt-10">Projects</h1>
<!-- other projects -->
<MoreProjects client:load />
</div>
<div class="pb-20">
<ProjectsComponent />
</div>
<Footer />
<NavBar />
<div id="projects" class="pt-20">
<h1 class="mt-10 text-center text-5xl">Projects</h1>
<!-- other projects -->
<MoreProjects client:load />
</div>
<div class="pb-20">
<ProjectsComponent />
</div>
<Footer />
</Layout>
<style>
.image-container img,
.image-container video,
.image-container .task-widget {
transition: transform 0.5s ease-in-out;
}
@media (min-width: 1025px) {
.image-container:hover > img,
.image-container:hover > video,
.image-container:hover > .task-widget {
transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
translateX(-50%) translateY(-50%);
}
.image-container img,
.image-container video,
.image-container .task-widget {
transition: transform 0.5s ease-in-out;
}
@media (min-width: 1025px) {
.image-container:hover > img,
.image-container:hover > video,
.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;
}
}
.image-container:hover > .visit-div {
opacity: 100%;
transition: opacity 0.3s ease-in-out;
transition-delay: 0.3s;
}
}
.primary {
animation: primary 30s linear infinite;
}
.primary {
animation: primary 30s linear infinite;
}
.secondary {
animation: secondary 30s linear infinite;
}
.secondary {
animation: secondary 30s linear infinite;
}
@keyframes primary {
from {
transform: translateY(0);
}
to {
transform: translateY(-2175px);
}
}
@keyframes primary {
from {
transform: translateY(0);
}
to {
transform: translateY(-2175px);
}
}
@keyframes secondary {
from {
transform: translateY(2175px);
}
to {
transform: translateY(0);
}
}
@keyframes secondary {
from {
transform: translateY(2175px);
}
to {
transform: translateY(0);
}
}
</style>
<script is:inline>
document.addEventListener("DOMContentLoaded", () => {
const videos = document.querySelectorAll(".playable");
document.addEventListener("DOMContentLoaded", () => {
const videos = document.querySelectorAll(".playable");
videos.forEach((video) => {
// Ensure the video element supports play and pause methods
if (
typeof video.play === "function" &&
typeof video.pause === "function"
) {
video.addEventListener("mouseenter", () => {
video.play();
});
videos.forEach((video) => {
// Ensure the video element supports play and pause methods
if (
typeof video.play === "function" &&
typeof video.pause === "function"
) {
video.addEventListener("mouseenter", () => {
video.play();
});
video.addEventListener("mouseleave", () => {
video.pause();
video.currentTime = 0;
});
}
video.addEventListener("mouseleave", () => {
video.pause();
video.currentTime = 0;
});
}
videos.forEach((video) => {
if (window.innerWidth < 1025) {
video.muted = true;
video.play();
}
});
});
videos.forEach((video) => {
if (window.innerWidth < 1025) {
video.muted = true;
video.play();
}
});
});
// on screensize change
window.addEventListener("resize", () => {
videos.forEach((video) => {
if (window.innerWidth < 1025) {
video.muted = true;
// video.play();
}
});
});
});
// on screensize change
window.addEventListener("resize", () => {
videos.forEach((video) => {
if (window.innerWidth < 1025) {
video.muted = true;
// video.play();
}
});
});
});
</script>

146
src/pages/skills.astro
View file

@ -8,87 +8,75 @@ import Footer from "../components/sections/FooterComponent.astro";
---
<Layout
title="Skills"
description="Learn what skills RythonDev has honed in the past few years"
title="Skills"
description="Learn what skills RythonDev has honed in the past few years"
>
<NavBar />
<div id="skills" class="mt-10 pb-20">
<SkillsComponent />
<Line height="50px" />
<div class="w-[90%] md:w-[600px] mx-auto">
<Card primaryColor="#9D76C1">
<div class="card-content">
<div class="flex flex-col justify-left w-full">
<h2 class="font-bold text-2xl">Content Creation</h2>
</div>
<hr class="w-full" />
<p class="text-left">
Since I was little, I loved watching YouTube videos and
the idea of bringing joy and laughter to a wider
audience. Thus, I began my journey in content creation
through YouTube videos and Twitch streaming. I typically
do coworking & study streams to keep myself accountable
and encourage productivity amongst viewers. I also do
software and game development streams where I showcase
my work flow.
</p>
<div class="w-full flex flex-row flex-wrap justify-start">
<div
class="w-fit text-white bg-[#141414] md:bg-gray-500 hover:bg-[#141414] hover:text-white
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
OBS
</div>
<div
class="w-fit text-black md:text-white bg-gray-50 md:bg-gray-500 hover:bg-gray-50 hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
DaVinci Resolve
</div>
<div
class="w-fit text-white bg-purple-500 md:bg-gray-500 hover:bg-purple-500
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Twitch
</div>
<div
class="w-fit text-white bg-[#ff0000] md:bg-gray-500 hover:bg-[#ff0000] hover:text-white
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
YouTube
</div>
</div>
</div>
</Card>
</div>
</div>
<Footer />
<NavBar />
<div id="skills" class="mt-10 pb-20">
<SkillsComponent />
<Line height="50px" />
<div class="mx-auto w-[90%] md:w-[600px]">
<Card primaryColor="#9D76C1">
<div class="card-content">
<div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Content Creation</h2>
</div>
<hr class="w-full" />
<p class="text-left">
Since I was little, I loved watching YouTube videos and
the idea of bringing joy and laughter to a wider
audience. Thus, I began my journey in content creation
through YouTube videos and Twitch streaming. I typically
do coworking & study streams to keep myself accountable
and encourage productivity amongst viewers. I also do
software and game development streams where I showcase
my work flow.
</p>
<div class="flex w-full flex-row flex-wrap justify-start">
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#141414] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#141414] hover:text-white md:bg-gray-500"
>
OBS
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-50 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-50 hover:text-black md:bg-gray-500 md:text-white"
>
DaVinci Resolve
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-purple-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-purple-500 md:bg-gray-500"
>
Twitch
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ff0000] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ff0000] hover:text-white md:bg-gray-500"
>
YouTube
</div>
</div>
</div>
</Card>
</div>
</div>
<Footer />
</Layout>
<style>
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
padding-top: 2rem;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 0.5rem;
border-radius: 1.25rem;
overflow: hidden;
}
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
padding-top: 2rem;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 0.5rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>

1729
src/pages/socials.astro
View file

File diff suppressed because it is too large Load diff

362
src/pages/what-i-do.astro
View file

@ -8,202 +8,202 @@ import Footer from "../components/sections/FooterComponent.astro";
---
<Layout
title="What I Do"
description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
title="What I Do"
description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
>
<NavBar />
<div id="what-i-do" class="mt-10 pt-20 pb-20">
<WhatIDoComponent />
<NavBar />
<div id="what-i-do" class="mt-10 pb-20 pt-20">
<WhatIDoComponent />
<div class="mx-auto w-[90%] md:w-[750px] mt-20">
<Card primaryColor="#19a7ce">
<div class="card-content">
<h2
id="web-dev"
class="font-bold text-2xl animate-gradient"
>
Web Development
</h2>
<hr class="w-full mb-3 mt-3" />
<div class="mb-5">
<h3 class="font-bold text-xl">Websites</h3>
<p class="mt-1 text-left">
I go beyond coding; I'm a developer who translates
your vision into a captivating online presence.
Through custom designs, intuitive user experiences,
and special attention to detail, I bring your brand
to life online.
</p>
</div>
<div class="mb-5">
<h3 class="font-bold text-xl">Web Apps</h3>
<p class="mt-1 text-left">
I craft solutions that streamline workflows, boost
efficiency, and empower your users to achieve more.
With a focus on intuitive interfaces, powerful
functionality, and data-driven optimization, I
design and develop robust, scalable applications
that align with your business objectives.
</p>
</div>
<div>
<h3 class="font-bold text-xl">Widgets</h3>
<p class="mt-1 text-left">
Leveraging my web development skills, I built stream
widgets to level up livestreams on Twitch and
YouTube. Easy to use and customize, my work have
been used by 100+ Twitch streamers!
</p>
</div>
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#a1eebd">
<div class="card-content">
<h2
id="data-science"
class="font-bold text-2xl animate-gradient"
>
Data Science
</h2>
<hr class="w-full mb-3 mt-3" />
<div class="mb-5">
<h3 class="font-bold text-xl">
Data Analysis and Visualization
</h3>
<p class="mt-1 text-left">
Translating numbers into works of art that inform,
inspire, and guide decision-making. I can create
visually compelling narratives that turn dry
statistics into captivating stories.
</p>
</div>
<div class="mb-5">
<h3 class="font-bold text-xl">
Statistics and Probability
</h3>
<p class="mt-1 text-left">
Every number tells a story, but it takes the
language of statistics and probability to truly
understand it. Our world is full of data, but it's
only through powerful tools that we can transform it
into meaningful insights and actionable
intelligence.
</p>
</div>
<div>
<h3 class="font-bold text-xl">Machine Learning</h3>
<p class="mt-1 text-left">
Machine learning isn't just about mimicking human
intelligence, it's about surpassing it. We push the
boundaries of what's possible, collaborating with
code to solve problems beyond human capabilities.
</p>
</div>
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#9D76C1">
<div class="card-content">
<h2
id="content-creation"
class="font-bold text-2xl animate-gradient"
>
Content Creation
</h2>
<hr class="w-full mb-3 mt-3" />
<div class="mb-5">
<h3 class="font-bold text-xl">Streaming</h3>
<p class="mt-1 text-left">
Streaming isn't just about entertainment, it's about
building a brand that resonates and inspires.
Streaming allows me to engage with viewers in real
time, developing their trust and allows me to build
a community of like-minded people.
</p>
</div>
<div class="mb-5">
<h3 class="font-bold text-xl">Video Editing</h3>
<p class="mt-1 text-left">
I may be at the beginning of my video editing
adventure, but I'm committed to making your vision a
reality. I'll learn, adapt, and work tirelessly to
translate your ideas into compelling videos that
resonate with your audience.
</p>
</div>
<div>
<h3 class="font-bold text-xl">Personality</h3>
<p class="mt-1 text-left">
I believe content should be an adventure, not a
formula. My livestreams revolve around unscripted
interactions, quirky challenges, and raw emotional
moments. It's messy, it's exhilarating, and it's
uniquely me.
</p>
</div>
</div>
</Card>
</div>
</div>
<Footer />
<div class="mx-auto mt-20 w-[90%] md:w-[750px]">
<Card primaryColor="#19a7ce">
<div class="card-content">
<h2
id="web-dev"
class="animate-gradient text-2xl font-bold"
>
Web Development
</h2>
<hr class="mb-3 mt-3 w-full" />
<div class="mb-5">
<h3 class="text-xl font-bold">Websites</h3>
<p class="mt-1 text-left">
I go beyond coding; I'm a developer who translates
your vision into a captivating online presence.
Through custom designs, intuitive user experiences,
and special attention to detail, I bring your brand
to life online.
</p>
</div>
<div class="mb-5">
<h3 class="text-xl font-bold">Web Apps</h3>
<p class="mt-1 text-left">
I craft solutions that streamline workflows, boost
efficiency, and empower your users to achieve more.
With a focus on intuitive interfaces, powerful
functionality, and data-driven optimization, I
design and develop robust, scalable applications
that align with your business objectives.
</p>
</div>
<div>
<h3 class="text-xl font-bold">Widgets</h3>
<p class="mt-1 text-left">
Leveraging my web development skills, I built stream
widgets to level up livestreams on Twitch and
YouTube. Easy to use and customize, my work have
been used by 100+ Twitch streamers!
</p>
</div>
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#a1eebd">
<div class="card-content">
<h2
id="data-science"
class="animate-gradient text-2xl font-bold"
>
Data Science
</h2>
<hr class="mb-3 mt-3 w-full" />
<div class="mb-5">
<h3 class="text-xl font-bold">
Data Analysis and Visualization
</h3>
<p class="mt-1 text-left">
Translating numbers into works of art that inform,
inspire, and guide decision-making. I can create
visually compelling narratives that turn dry
statistics into captivating stories.
</p>
</div>
<div class="mb-5">
<h3 class="text-xl font-bold">
Statistics and Probability
</h3>
<p class="mt-1 text-left">
Every number tells a story, but it takes the
language of statistics and probability to truly
understand it. Our world is full of data, but it's
only through powerful tools that we can transform it
into meaningful insights and actionable
intelligence.
</p>
</div>
<div>
<h3 class="text-xl font-bold">Machine Learning</h3>
<p class="mt-1 text-left">
Machine learning isn't just about mimicking human
intelligence, it's about surpassing it. We push the
boundaries of what's possible, collaborating with
code to solve problems beyond human capabilities.
</p>
</div>
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#9D76C1">
<div class="card-content">
<h2
id="content-creation"
class="animate-gradient text-2xl font-bold"
>
Content Creation
</h2>
<hr class="mb-3 mt-3 w-full" />
<div class="mb-5">
<h3 class="text-xl font-bold">Streaming</h3>
<p class="mt-1 text-left">
Streaming isn't just about entertainment, it's about
building a brand that resonates and inspires.
Streaming allows me to engage with viewers in real
time, developing their trust and allows me to build
a community of like-minded people.
</p>
</div>
<div class="mb-5">
<h3 class="text-xl font-bold">Video Editing</h3>
<p class="mt-1 text-left">
I may be at the beginning of my video editing
adventure, but I'm committed to making your vision a
reality. I'll learn, adapt, and work tirelessly to
translate your ideas into compelling videos that
resonate with your audience.
</p>
</div>
<div>
<h3 class="text-xl font-bold">Personality</h3>
<p class="mt-1 text-left">
I believe content should be an adventure, not a
formula. My livestreams revolve around unscripted
interactions, quirky challenges, and raw emotional
moments. It's messy, it's exhilarating, and it's
uniquely me.
</p>
</div>
</div>
</Card>
</div>
</div>
<Footer />
</Layout>
<style>
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
padding: 2rem;
overflow: hidden;
}
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
padding: 2rem;
overflow: hidden;
}
#web-dev {
background: linear-gradient(
90deg,
#afd3e2 0%,
#19a7ce 45%,
#a5d7e8 100%
);
#web-dev {
background: linear-gradient(
90deg,
#afd3e2 0%,
#19a7ce 45%,
#a5d7e8 100%
);
background-size: 300%;
background-size: 300%;
background-clip: text;
-webkit-background-clip: text;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
-webkit-text-fill-color: transparent;
}
#data-science {
background: linear-gradient(
90deg,
#a1eebd 0%,
#7bd3ea 45%,
#f6f7c4 100%
);
#data-science {
background: linear-gradient(
90deg,
#a1eebd 0%,
#7bd3ea 45%,
#f6f7c4 100%
);
background-size: 300%;
background-size: 300%;
background-clip: text;
-webkit-background-clip: text;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
-webkit-text-fill-color: transparent;
}
#content-creation {
background: linear-gradient(90deg, #9d76c1 40%, #ff6868 90%);
#content-creation {
background: linear-gradient(90deg, #9d76c1 40%, #ff6868 90%);
background-size: 300%;
background-size: 300%;
background-clip: text;
-webkit-background-clip: text;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
-webkit-text-fill-color: transparent;
}
</style>