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

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 "tabWidth": 4
} }

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

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

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

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

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

@ -1,21 +1,21 @@
<a <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" 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" href="/blog"
style="color: black; text-decoration: none;" style="color: black; text-decoration: none;"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="size-5" class="size-5"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
d="M15.75 19.5 8.25 12l7.5-7.5"></path> d="M15.75 19.5 8.25 12l7.5-7.5"></path>
</svg> </svg>
Back Back
</a> </a>

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

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

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

@ -108,31 +108,31 @@
<div <div
id="intro" id="intro"
class="h-fit class="flex
text-white h-fit
flex flex-col" flex-col text-white"
> >
<div class="px-5 lg:px-10 pt-10 pb-2 card-content w-full"> <div class="card-content w-full px-5 pb-2 pt-10 lg:px-10">
<div class="flex flex-row h-20"> <div class="flex h-20 flex-row">
<div class="w-20 mr-1 flex justify-center items-center"> <div class="mr-1 flex w-20 items-center justify-center">
<img <img
src="/images/pfp_transparent_square.webp" src="/images/pfp_transparent_square.webp"
alt="Ryan" alt="Ryan"
width="100" width="100"
height="100" height="100"
class="rounded-full max-w-full bg-[#505050]" class="max-w-full rounded-full bg-[#505050]"
/> />
</div> </div>
<div class="flex flex-col justify-center items-start ml-2"> <div class="ml-2 flex flex-col items-start justify-center">
<div id="name" class="text-2xl font-bold animate-gradient"> <div id="name" class="animate-gradient text-2xl font-bold">
RythonDev RythonDev
</div> </div>
<div class="text-xl w-full"> <div class="w-full text-xl">
{roleState}<span class="animate-pulse">|</span> {roleState}<span class="animate-pulse">|</span>
</div> </div>
</div> </div>
</div> </div>
<div id="uwu" class="hidden justify-center items-center"> <div id="uwu" class="hidden items-center justify-center">
<img <img
src="/images/RythonDev-UwU-compressed.webp" src="/images/RythonDev-UwU-compressed.webp"
alt="RythonDev" alt="RythonDev"
@ -140,7 +140,7 @@
height="131.8" height="131.8"
/> />
</div> </div>
<div class="text-2xl font-bold mt-2"> <div class="mt-2 text-2xl font-bold">
Good {greetingState}<span Good {greetingState}<span
bind:this={greetingPulse} bind:this={greetingPulse}
class="animate-pulse font-extralight">|</span class="animate-pulse font-extralight">|</span
@ -163,7 +163,7 @@
<b> web development</b>, <b>computer vision</b> and <b> web development</b>, <b>computer vision</b> and
<b>data science</b>. <b>data science</b>.
</p> </p>
<div class="flex flex-row justify-center items-center mt-5"> <div class="mt-5 flex flex-row items-center justify-center">
<Socials /> <Socials />
</div> </div>
</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 id="Experience" class="h-fit">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<div class="w-[90%] md:w-[600px]"> <div class="w-[90%] md:w-[600px]">
<Line height="50px" /> <Line height="50px" />
<Card primaryColor="#FFAC21"> <Card primaryColor="#FFAC21">
<div class="card-content md:px-8 md:py-8 px-4 py-4"> <div class="card-content px-4 py-4 md:px-8 md:py-8">
<div class="flex flex-col justify-start w-full mb-3 gap-1"> <div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="font-bold text-xl"> <h2 class="text-xl font-bold">
Diploma in Computer Science student Diploma in Computer Science student
</h2> </h2>
<h3 class="font-bold"> <h3 class="font-bold">
@ Methodist College Kuala Lumpur @ Methodist College Kuala Lumpur
</h3> </h3>
<h3>Jan 2022 - June 2024</h3> <h3>Jan 2022 - June 2024</h3>
</div> </div>
<hr class="w-full mb-3" /> <hr class="mb-3 w-full" />
<h3 class="mb-1 font-bold text-lg">Achievements</h3> <h3 class="mb-1 text-lg font-bold">Achievements</h3>
<ul class="list-disc list-inside"> <ul class="list-inside list-disc">
<li> <li>
4-time Dean's List Award recipient (&gt;3.5 GPA) 4-time Dean's List Award recipient (&gt;3.5 GPA)
</li> </li>
<li>3.8 CGPA</li> <li>3.8 CGPA</li>
<li>President of Computer Programming Club</li> <li>President of Computer Programming Club</li>
<li>Vice President of Diploma Union</li> <li>Vice President of Diploma Union</li>
</ul> </ul>
</div> </div>
</Card> </Card>
</div> </div>
</div> </div>
</div> </div>
<style> <style>
.card-content { .card-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-image: radial-gradient( background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px,
transparent 1px transparent 1px
); );
background-position: 50% 50%; background-position: 50% 50%;
background-size: 1.1rem 1.1rem; background-size: 1.1rem 1.1rem;
border-radius: 1.25rem; border-radius: 1.25rem;
overflow: hidden; overflow: hidden;
} }
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

@ -2,70 +2,70 @@
import Card from "../elements/Card.astro"; import Card from "../elements/Card.astro";
--- ---
<div class="w-full flex flex-col justify-center items-center"> <div class="flex w-full flex-col items-center justify-center">
<div <div
class="w-full h-fit flex flex-col justify-center items-center max-w-[1440px]" class="flex h-fit w-full max-w-[1440px] flex-col items-center justify-center"
> >
<h1 class="text-center text-5xl mb-10">What I Do</h1> <h1 class="mb-10 text-center text-5xl">What I Do</h1>
<div <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" 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}> <Card primaryColor="#19a7ce" scaleOnHover={true}>
<div class="card-content"> <div class="card-content">
<h2 class="font-bold text-xl text-center"> <h2 class="text-center text-xl font-bold">
Web Development Web Development
</h2> </h2>
<hr class="w-full" /> <hr class="w-full" />
<p class="text-center text-balance"> <p class="text-balance text-center">
Bringing ideas to life on the web is my passion. I enjoy Bringing ideas to life on the web is my passion. I enjoy
bringing my imagination to life through web development. bringing my imagination to life through web development.
</p> </p>
</div> </div>
</Card> </Card>
<Card primaryColor="#a1eebd" scaleOnHover={true}> <Card primaryColor="#a1eebd" scaleOnHover={true}>
<div class="card-content"> <div class="card-content">
<h2 class="font-bold text-xl text-center">Data Science</h2> <h2 class="text-center text-xl font-bold">Data Science</h2>
<hr class="w-full" /> <hr class="w-full" />
<p class="text-center text-balance"> <p class="text-balance text-center">
Using data to make decisions is a powerful tool. I am Using data to make decisions is a powerful tool. I am
experienced in analyzing data and making decisions based experienced in analyzing data and making decisions based
on data. on data.
</p> </p>
</div> </div>
</Card> </Card>
<Card primaryColor="#9D76C1" scaleOnHover={true}> <Card primaryColor="#9D76C1" scaleOnHover={true}>
<div class="card-content"> <div class="card-content">
<h2 class="font-bold text-xl text-center"> <h2 class="text-center text-xl font-bold">
Content Creation Content Creation
</h2> </h2>
<hr class="w-full" /> <hr class="w-full" />
<p class="text-center text-balance"> <p class="text-balance text-center">
Everyone has something to give, or something to share. I Everyone has something to give, or something to share. I
produce content around productivity and software produce content around productivity and software
development. development.
</p> </p>
</div> </div>
</Card> </Card>
</div> </div>
</div> </div>
</div> </div>
<style> <style>
.card-content { .card-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
background-image: radial-gradient( background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px,
transparent 1px transparent 1px
); );
background-position: 50% 50%; background-position: 50% 50%;
background-size: 1.1rem 1.1rem; background-size: 1.1rem 1.1rem;
padding: 2rem 2rem; padding: 2rem 2rem;
border-radius: 1.25rem; border-radius: 1.25rem;
overflow: hidden; overflow: hidden;
min-width: 210px; min-width: 210px;
} }
</style> </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"; import Footer from "../../components/sections/FooterComponent.astro";
export async function getStaticPaths() { export async function getStaticPaths() {
const blogEntries = await getCollection("blog"); const blogEntries = await getCollection("blog");
return blogEntries.map((entry) => ({ return blogEntries.map((entry) => ({
params: { slug: entry.slug }, params: { slug: entry.slug },
props: { entry }, props: { entry },
})); }));
} }
const { entry } = Astro.props; const { entry } = Astro.props;
@ -17,123 +17,118 @@ const { Content } = await entry.render();
--- ---
<Layout <Layout
title="Blog" title="Blog"
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!" description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
> >
<BackToBlogs /> <BackToBlogs />
<div id="blog-content-component" class="mt-10 pt-10 mx-auto"> <div id="blog-content-component" class="mx-auto mt-10 pt-10">
<h1 class="text-left text-4xl">{entry.data.title}</h1> <h1 class="text-left text-4xl">{entry.data.title}</h1>
<p class="text-gray-200 mt-3 text-lg"> <p class="mt-3 text-lg text-gray-200">
Published Published
{ {
new Date(entry.data.pubDate).toLocaleDateString("en-UK", { new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
day: "numeric", day: "numeric",
month: "long", month: "long",
year: "numeric", year: "numeric",
}) })
} }
</p> </p>
<p class="text-gray-200 text-lg">by {entry.data.author}</p> <p class="text-lg text-gray-200">by {entry.data.author}</p>
<p class="text-white text-lg">{entry.data.description}</p> <p class="text-lg text-white">{entry.data.description}</p>
<div class="flex flex-row flex-wrap justify-start items-start"> <div class="flex flex-row flex-wrap items-start justify-start">
{ {
entry.data.tags?.map((tag) => ( entry.data.tags?.map((tag) => (
<div <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">
class="mr-2 px-3 py-1 rounded-xl bg-[#282828] {tag}
border-2 border-solid border-gray-500 </div>
hover:border-white hover:bg-gray-300 hover:text-black ))
transition-colors duration-150" }
> </div>
{tag}
</div>
))
}
</div>
<hr class="my-5" /> <hr class="my-5" />
<Content /> <Content />
</div> </div>
<div class="mt-10"> <div class="mt-10">
<Footer /> <Footer />
</div> </div>
</Layout> </Layout>
<style is:inline> <style is:inline>
#blog-content-component { #blog-content-component {
width: clamp(310px, 60vw, 800px); width: clamp(310px, 60vw, 800px);
} }
a:not(#navbar-div a) { a:not(#navbar-div a) {
color: lightskyblue; color: lightskyblue;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
p { p {
display: block; display: block;
font-size: 1.1rem; font-size: 1.1rem;
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
h1 { h1 {
display: block; display: block;
font-size: 2em; font-size: 2em;
margin-top: 0.67em; margin-top: 0.67em;
margin-bottom: 0.67em; margin-bottom: 0.67em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: bold; font-weight: bold;
} }
h2 { h2 {
display: block; display: block;
font-size: 1.5em; font-size: 1.5em;
margin-top: 0.83em; margin-top: 0.83em;
margin-bottom: 0.83em; margin-bottom: 0.83em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: bold; font-weight: bold;
} }
h3 { h3 {
display: block; display: block;
font-size: 1.17em; font-size: 1.17em;
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: bold; font-weight: bold;
} }
ul { ul {
display: block; display: block;
list-style-type: disc; list-style-type: disc;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding-left: 40px; padding-left: 40px;
} }
ul:not(ul ul) { ul:not(ul ul) {
margin-top: 0.5em; margin-top: 0.5em;
} }
li { li {
display: list-item; display: list-item;
} }
ol { ol {
display: block; display: block;
list-style-type: decimal; list-style-type: decimal;
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
padding-left: 40px; padding-left: 40px;
} }
</style> </style>

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

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

86
src/pages/contact.astro
View file

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

8
src/pages/discord.astro
View file

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

16
src/pages/experience.astro
View file

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

80
src/pages/index.astro
View file

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

10
src/pages/live.astro
View file

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

10
src/pages/onlyfans.astro
View file

@ -3,12 +3,12 @@ import InfoLayout from "../layouts/InfoLayout.astro";
--- ---
<InfoLayout <InfoLayout
title="OnlyFans" title="OnlyFans"
description="UWU 💦 NYA MEOW SEXY TIME 🕓 ! RYAN IS 😗♻ HERE 🚢💪 TO 💦✌ EAT 😩🗣 YOUR 👉 TOES 👣 NOM NOM JUST KIDDING UWU 💦" description="UWU 💦 NYA MEOW SEXY TIME 🕓 ! RYAN IS 😗♻ HERE 🚢💪 TO 💦✌ EAT 😩🗣 YOUR 👉 TOES 👣 NOM NOM JUST KIDDING UWU 💦"
metaURL="https://rython.dev/onlyfans" metaURL="https://rython.dev/onlyfans"
thumbnail="/images/of-logo-b.webp" thumbnail="/images/of-logo-b.webp"
/> />
<script is:inline> <script is:inline>
window.location.href = "https://youtu.be/dQw4w9WgXcQ"; window.location.href = "https://youtu.be/dQw4w9WgXcQ";
</script> </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"> <Layout title="Projects" description="View what projects RythonDev has made">
<NavBar /> <NavBar />
<div id="projects" class="pt-20"> <div id="projects" class="pt-20">
<h1 class="text-5xl text-center mt-10">Projects</h1> <h1 class="mt-10 text-center text-5xl">Projects</h1>
<!-- other projects --> <!-- other projects -->
<MoreProjects client:load /> <MoreProjects client:load />
</div> </div>
<div class="pb-20"> <div class="pb-20">
<ProjectsComponent /> <ProjectsComponent />
</div> </div>
<Footer /> <Footer />
</Layout> </Layout>
<style> <style>
.image-container img, .image-container img,
.image-container video, .image-container video,
.image-container .task-widget { .image-container .task-widget {
transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out;
} }
@media (min-width: 1025px) { @media (min-width: 1025px) {
.image-container:hover > img, .image-container:hover > img,
.image-container:hover > video, .image-container:hover > video,
.image-container:hover > .task-widget { .image-container:hover > .task-widget {
transform: rotateY(0deg) rotateX(0deg) translateZ(0px) transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
translateX(-50%) translateY(-50%); translateX(-50%) translateY(-50%);
} }
.image-container:hover > .visit-div { .image-container:hover > .visit-div {
opacity: 100%; opacity: 100%;
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
transition-delay: 0.3s; transition-delay: 0.3s;
} }
} }
.primary { .primary {
animation: primary 30s linear infinite; animation: primary 30s linear infinite;
} }
.secondary { .secondary {
animation: secondary 30s linear infinite; animation: secondary 30s linear infinite;
} }
@keyframes primary { @keyframes primary {
from { from {
transform: translateY(0); transform: translateY(0);
} }
to { to {
transform: translateY(-2175px); transform: translateY(-2175px);
} }
} }
@keyframes secondary { @keyframes secondary {
from { from {
transform: translateY(2175px); transform: translateY(2175px);
} }
to { to {
transform: translateY(0); transform: translateY(0);
} }
} }
</style> </style>
<script is:inline> <script is:inline>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const videos = document.querySelectorAll(".playable"); const videos = document.querySelectorAll(".playable");
videos.forEach((video) => { videos.forEach((video) => {
// Ensure the video element supports play and pause methods // Ensure the video element supports play and pause methods
if ( if (
typeof video.play === "function" && typeof video.play === "function" &&
typeof video.pause === "function" typeof video.pause === "function"
) { ) {
video.addEventListener("mouseenter", () => { video.addEventListener("mouseenter", () => {
video.play(); video.play();
}); });
video.addEventListener("mouseleave", () => { video.addEventListener("mouseleave", () => {
video.pause(); video.pause();
video.currentTime = 0; video.currentTime = 0;
}); });
} }
videos.forEach((video) => { videos.forEach((video) => {
if (window.innerWidth < 1025) { if (window.innerWidth < 1025) {
video.muted = true; video.muted = true;
video.play(); video.play();
} }
}); });
}); });
// on screensize change // on screensize change
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
videos.forEach((video) => { videos.forEach((video) => {
if (window.innerWidth < 1025) { if (window.innerWidth < 1025) {
video.muted = true; video.muted = true;
// video.play(); // video.play();
} }
}); });
}); });
}); });
</script> </script>

146
src/pages/skills.astro
View file

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