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
} }

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 }}>

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

@ -1,6 +1,6 @@
<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"
@ -12,56 +12,56 @@
</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>

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

@ -1,5 +1,5 @@
<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;"
> >

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>

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

@ -4,28 +4,28 @@ 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>
@ -34,24 +34,24 @@ import Line from "../elements/NetworkLine.astro";
</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>
@ -60,30 +60,30 @@ import Line from "../elements/NetworkLine.astro";
</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>

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

@ -1,4 +1,4 @@
<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>

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>

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

@ -8,9 +8,9 @@ import Line from "../elements/NetworkLine.astro";
<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">
@ -18,9 +18,9 @@ import Line from "../elements/NetworkLine.astro";
</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>

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>

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

@ -1,6 +1,6 @@
<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"
@ -9,70 +9,69 @@
<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="py-4 uppercase w-full flex flex-row justify-center items-center" class="flex w-full flex-row items-center justify-center py-4 uppercase"
> >
<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="/">home</a href="/">home</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="/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>

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

@ -8,14 +8,14 @@ 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}
@ -36,71 +36,52 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
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
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
border-2 border-solid border-white
max-w-full"
> >
<a <a
href="https://coworking-guide.vercel.app/" href="https://coworking-guide.vercel.app/"
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 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"
px-5 py-3 bg-blue-600 rounded-xl opacity-1
font-bold
transition-colors duration-300
hidden lg:block
hover:bg-white hover:text-blue-500"
>Visit site</a >Visit site</a
> >
</div> </div>
</div> </div>
<div class="lg:hidden flex justify-center items-center mb-10"> <div class="mb-10 flex items-center justify-center lg:hidden">
<a <a
href="https://coworking-guide.vercel.app/" href="https://coworking-guide.vercel.app/"
target="_blank" target="_blank"
class="px-5 py-3 bg-blue-600 rounded-xl opacity-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-500"
font-bold
transition-colors duration-300
hover:bg-white hover:text-blue-500"
>View repository</a >View repository</a
> >
</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">
Coworking Guide Coworking Guide
</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 guide to coworking streams for streamers, covers wide A guide to coworking streams for streamers, covers wide
range of topics from tips on how to get started with setting range of topics from tips on how to get started with setting
up stream to how to grow your audience! up stream to how to grow your audience!
</p> </p>
<div <div
class="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5" class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
> >
<div <div
class="w-fit bg-white text-black class="my-1 mr-1 w-fit rounded-full bg-white px-3 py-1 text-black transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
Astro Astro
</div> </div>
<div <div
class="w-fit bg-[#3178C6] text-white class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
TypeScript TypeScript
</div> </div>
<div <div
class="w-fit bg-black text-white class="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
Markdown Markdown
</div> </div>
@ -108,16 +89,16 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
</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">
Chat-Task-Tic Widget Chat-Task-Tic Widget
</h2> </h2>
<p <p
class="text-xl lg:text-right text-center 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"
> >
Used by 100+ Twitch streamers, allow viewers and streamers Used by 100+ Twitch streamers, allow viewers and streamers
to add their own tasks to the widget for accountability! to add their own tasks to the widget for accountability!
@ -125,39 +106,30 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
endless! endless!
</p> </p>
<div <div
class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5" class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
> >
<div <div
class="w-fit bg-[#B11700] text-white class="my-1 mr-1 w-fit rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
HTML HTML
</div> </div>
<div <div
class="w-fit bg-blue-700 text-white class="my-1 mr-1 w-fit rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
CSS CSS
</div> </div>
<div <div
class="w-fit bg-yellow-400 text-black class="my-1 mr-1 w-fit rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
Javascript Javascript
</div> </div>
</div> </div>
</div> </div>
<div class="lg:hidden flex justify-center items-center mb-10"> <div class="mb-10 flex items-center justify-center lg:hidden">
<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="px-5 py-3 bg-blue-600 rounded-xl opacity-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"
font-bold
transition-colors duration-300
hover:bg-white hover:text-blue-600"
>View repository</a >View repository</a
> >
</div> </div>
@ -165,10 +137,10 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
</div> </div>
<div <div
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20 mt-5 lg:mt-0" 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}
@ -189,69 +161,50 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
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
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
border-2 border-solid border-white
max-w-full"
> >
<a <a
href="https://hex-guess.vercel.app/" href="https://hex-guess.vercel.app/"
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 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"
px-5 py-3 bg-blue-600 rounded-xl opacity-1
font-bold
hidden lg:block
transition-colors duration-300
hover:bg-white hover:text-blue-500"
>Visit site</a >Visit site</a
> >
</div> </div>
</div> </div>
<div class="lg:hidden flex justify-center items-center mb-10"> <div class="mb-10 flex items-center justify-center lg:hidden">
<a <a
href="https://hex-guess.vercel.app/" href="https://hex-guess.vercel.app/"
target="_blank" target="_blank"
class="px-5 py-3 bg-blue-600 rounded-xl opacity-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-500"
font-bold
transition-colors duration-300
hover:bg-white hover:text-blue-500"
>View repository</a >View repository</a
> >
</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">HexGuess</h2> <h2 class="mb-5 text-center text-3xl font-bold">HexGuess</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"
> >
Decode colours in 5 attempts. Guess the hexadecimal code and Decode colours in 5 attempts. Guess the hexadecimal code and
receive instant feedback! Built with Next.JS, TailwindCSS receive instant feedback! Built with Next.JS, TailwindCSS
and TypeScript. and TypeScript.
</p> </p>
<div <div
class="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5" class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
> >
<div <div
class="w-fit bg-black text-white class="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
NextJS NextJS
</div> </div>
<div <div
class="w-fit bg-[#3178C6] text-white class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
Typescript Typescript
</div> </div>
<div <div
class="w-fit bg-[#07B6D4] text-black class="my-1 mr-1 w-fit rounded-full bg-[#07B6D4] px-3 py-1 text-black transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
TailwindCSS TailwindCSS
</div> </div>
@ -259,16 +212,16 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
</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">
Twitch Plays X Twitch Plays X
</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"
> >
Allow Twitch chatters play games such as Pokemon! Chatters Allow Twitch chatters play games such as Pokemon! Chatters
can enter messages such as "up up down down left right B A" can enter messages such as "up up down down left right B A"
@ -276,37 +229,30 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
keypresses. keypresses.
</p> </p>
<div <div
class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5" class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
> >
<div <div
class="w-fit bg-[#3776AB] text-white class="my-1 mr-1 w-fit rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
Python Python
</div> </div>
<div <div
class="w-fit bg-[#0078D4] text-white class="my-1 mr-1 w-fit rounded-full bg-[#0078D4] px-3 py-1 text-white transition-colors duration-300"
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
> >
win32API win32API
</div> </div>
</div> </div>
</div> </div>
<div class="lg:hidden flex justify-center items-center mb-10"> <div class="mb-10 flex items-center justify-center lg:hidden">
<a <a
href="https://github.com/liyunze-coding/TwitchPlaysX" href="https://github.com/liyunze-coding/TwitchPlaysX"
target="_blank" target="_blank"
class="px-5 py-3 bg-blue-600 rounded-xl opacity-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-500"
font-bold
transition-colors duration-300
hover:bg-white hover:text-blue-500"
>View repository</a >View repository</a
> >
</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"
> >
<Image <Image
src={TwitchPlays} src={TwitchPlays}
@ -327,22 +273,12 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
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
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
border-2 border-solid border-white
max-w-full"
> >
<a <a
href="https://github.com/liyunze-coding/TwitchPlaysX" href="https://github.com/liyunze-coding/TwitchPlaysX"
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 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"
px-5 py-3 bg-blue-600 rounded-xl opacity-1
font-bold
hidden lg:block
transition-colors duration-300
hover:bg-white hover:text-blue-500"
>View repository</a >View repository</a
> >
</div> </div>

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>

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

@ -2,21 +2,21 @@
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>
@ -25,9 +25,9 @@ import Card from "../elements/Card.astro";
<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.
@ -37,11 +37,11 @@ import Card from "../elements/Card.astro";
<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.

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

@ -21,9 +21,9 @@ const { Content } = await entry.render();
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", {
@ -33,18 +33,13 @@ const { Content } = await entry.render();
}) })
} }
</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]
border-2 border-solid border-gray-500
hover:border-white hover:bg-gray-300 hover:text-black
transition-colors duration-150"
>
{tag} {tag}
</div> </div>
)) ))

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

@ -14,7 +14,7 @@ const blogPosts = await getCollection("blog");
> >
<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
@ -26,15 +26,15 @@ const blogPosts = await getCollection("blog");
<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">
@ -45,11 +45,7 @@ const blogPosts = await getCollection("blog");
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
stroke-white group-hover:stroke-green-400
transition-all duration-150"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"

10
src/pages/contact.astro
View file

@ -13,19 +13,19 @@ import Footer from "../components/sections/FooterComponent.astro";
<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>

18
src/pages/faq.astro
View file

@ -5,15 +5,15 @@ 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.
@ -27,7 +27,7 @@ import Footer from "../components/sections/FooterComponent.astro";
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>
@ -37,7 +37,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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>
@ -46,7 +46,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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"
@ -57,7 +57,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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>
@ -67,7 +67,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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>

8
src/pages/index.astro
View file

@ -17,8 +17,8 @@ import Footer from "../components/sections/FooterComponent.astro";
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"
@ -30,12 +30,12 @@ import Footer from "../components/sections/FooterComponent.astro";
</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>

2
src/pages/projects.astro
View file

@ -9,7 +9,7 @@ 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>

28
src/pages/skills.astro
View file

@ -15,11 +15,11 @@ import Footer from "../components/sections/FooterComponent.astro";
<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">
@ -32,36 +32,24 @@ import Footer from "../components/sections/FooterComponent.astro";
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
transition-colors duration-300"
> >
OBS OBS
</div> </div>
<div <div
class="w-fit text-black md:text-white bg-gray-50 md:bg-gray-500 hover:bg-gray-50 hover:text-black 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"
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
> >
DaVinci Resolve DaVinci Resolve
</div> </div>
<div <div
class="w-fit text-white bg-purple-500 md:bg-gray-500 hover:bg-purple-500 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"
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
> >
Twitch Twitch
</div> </div>
<div <div
class="w-fit text-white bg-[#ff0000] md:bg-gray-500 hover:bg-[#ff0000] hover:text-white 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"
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
> >
YouTube YouTube
</div> </div>

147
src/pages/socials.astro
View file

@ -5,27 +5,21 @@ 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="px-0 py-10 flex justify-center items-center flex-col"> <div class="flex flex-col items-center justify-center px-0 py-10">
<div class="max-w-[1024px] w-[calc(100%-20px)]"> <div class="w-[calc(100%-20px)] max-w-[1024px]">
<div <div
id="cards" id="cards"
class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4" class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4"
> >
<div <div
id="intro" id="intro"
class="social-card col-span-2 md:col-span-3 lg:col-span-4 class="social-card col-span-2 h-[450px] md:col-span-3 md:h-[280px] lg:col-span-4"
h-[450px] md:h-[280px]"
> >
<div <div
class="social-card-content flex flex-col md:flex-row md:justify-between md:gap-3 bg-cover bg-center" class="social-card-content flex flex-col bg-cover bg-center md:flex-row md:justify-between md:gap-3"
> >
<div <div
class="rounded-full border-2 border-white border-solid class="mb-5 mt-auto flex aspect-square w-32 items-center justify-center overflow-hidden rounded-full border-2 border-solid border-white bg-[rgb(20,20,20)] md:mb-0 md:w-72"
overflow-hidden aspect-square
mt-auto mb-5 md:mb-0
flex justify-center items-center
bg-[rgb(20,20,20)]
w-32 md:w-72"
> >
<img <img
src="/images/RyanPogSmol.webp" src="/images/RyanPogSmol.webp"
@ -34,8 +28,8 @@ import Footer from "../components/sections/FooterComponent.astro";
class="aspect-square w-32 md:w-44" class="aspect-square w-32 md:w-44"
/> />
</div> </div>
<div class="md:h-1/2 md:mt-auto"> <div class="md:mt-auto md:h-1/2">
<h1 class="font-bold text-4xl mb-2">RythonDev</h1> <h1 class="mb-2 text-4xl font-bold">RythonDev</h1>
<p class="text-lg text-[#ccc]"> <p class="text-lg text-[#ccc]">
I am a Malaysian Chinese content creator based I am a Malaysian Chinese content creator based
in Australia! I mainly stream co-working and in Australia! I mainly stream co-working and
@ -49,12 +43,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://rython.dev/" target="_blank"> <a href="https://rython.dev/" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
class="social-card-content flex flex-col justify-between items-start group" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -70,7 +62,7 @@ import Footer from "../components/sections/FooterComponent.astro";
fill="#fff"></path> fill="#fff"></path>
</svg> </svg>
</div> </div>
<div id="website-icon" class="icon-box w-12 h-12"> <div id="website-icon" class="icon-box h-12 w-12">
<svg <svg
fill="#fff" fill="#fff"
width="26px" width="26px"
@ -92,7 +84,7 @@ import Footer from "../components/sections/FooterComponent.astro";
> >
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">Website</h2> <h2 class="text-xl font-bold">Website</h2>
<p class="text-[#ccc]">rython.dev</p> <p class="text-[#ccc]">rython.dev</p>
</div> </div>
</div> </div>
@ -102,12 +94,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://twitch.tv/RythonDev/" target="_blank"> <a href="https://twitch.tv/RythonDev/" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
class="social-card-content flex flex-col justify-between items-start group" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -148,7 +138,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg> </svg>
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">Twitch</h2> <h2 class="text-xl font-bold">Twitch</h2>
<p class="text-[#ccc]">RythonDev</p> <p class="text-[#ccc]">RythonDev</p>
</div> </div>
</div> </div>
@ -158,12 +148,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://youtube.com/@RythonDev/" target="_blank"> <a href="https://youtube.com/@RythonDev/" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
class="social-card-content flex flex-col justify-between items-start group" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -198,7 +186,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg> </svg>
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">YouTube</h2> <h2 class="text-xl font-bold">YouTube</h2>
<p class="text-[#ccc]">@RythonDev</p> <p class="text-[#ccc]">@RythonDev</p>
</div> </div>
</div> </div>
@ -208,12 +196,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://instagram.com/RythonDev" target="_blank"> <a href="https://instagram.com/RythonDev" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
class="social-card-content flex flex-col justify-between items-start group" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -279,7 +265,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg> </svg>
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">Instagram</h2> <h2 class="text-xl font-bold">Instagram</h2>
<p class="text-[#ccc]">@RythonDev</p> <p class="text-[#ccc]">@RythonDev</p>
</div> </div>
</div> </div>
@ -289,12 +275,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://github.com/liyunze-coding" target="_blank"> <a href="https://github.com/liyunze-coding" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
class="social-card-content flex flex-col justify-between items-start group" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -311,13 +295,11 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg> </svg>
</div> </div>
<div <div
class="relative w-12 h-12 bg-white rounded-full class="relative z-20 h-12 w-12 rounded-full border-8 border-solid border-black bg-white"
border-8 border-solid border-black z-20"
> >
<div <div
id="github-icon" id="github-icon"
class="icon-box w-12 h-12 rounded-full 2-10 class="icon-box 2-10 absolute left-1/2 top-1/2 h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full"
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
> >
<svg <svg
width="38px" width="38px"
@ -353,7 +335,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</div> </div>
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">Github</h2> <h2 class="text-xl font-bold">Github</h2>
<p class="text-[#ccc]">liyunze-coding</p> <p class="text-[#ccc]">liyunze-coding</p>
</div> </div>
</div> </div>
@ -363,12 +345,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://codepen.io/RythonDev" target="_blank"> <a href="https://codepen.io/RythonDev" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
class="social-card-content flex flex-col justify-between items-start group" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -386,7 +366,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</div> </div>
<div <div
id="codepen-icon" id="codepen-icon"
class="icon-box w-12 h-12 rounded-full" class="icon-box h-12 w-12 rounded-full"
> >
<svg <svg
version="1.1" version="1.1"
@ -418,7 +398,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg> </svg>
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">Codepen</h2> <h2 class="text-xl font-bold">Codepen</h2>
<p class="text-[#ccc]">RythonDev</p> <p class="text-[#ccc]">RythonDev</p>
</div> </div>
</div> </div>
@ -427,19 +407,19 @@ import Footer from "../components/sections/FooterComponent.astro";
<!-- Stream Schedule --> <!-- Stream Schedule -->
<div class="social-card col-span-2 h-fit"> <div class="social-card col-span-2 h-fit">
<div <div
class="social-card-content flex justify-center items-center flex-col p-0 md:p-3" class="social-card-content flex flex-col items-center justify-center p-0 md:p-3"
> >
<h2 class="font-bold text-xl mb-1">Stream Schedule</h2> <h2 class="mb-1 text-xl font-bold">Stream Schedule</h2>
<StreamScheduleComponent client:load /> <StreamScheduleComponent client:load />
</div> </div>
</div> </div>
<!-- Location --> <!-- Location -->
<div class="social-card col-span-2 md:col-span-1 lg:col-span-2"> <div class="social-card col-span-2 md:col-span-1 lg:col-span-2">
<div <div
class="social-card-content flex flex-col justify-center items-start gap-5" class="social-card-content flex flex-col items-start justify-center gap-5"
> >
<div <div
class="flex flex-row gap-3 items-center justify-center" class="flex flex-row items-center justify-center gap-3"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -463,12 +443,12 @@ import Footer from "../components/sections/FooterComponent.astro";
></path> ></path>
</svg> </svg>
<div> <div>
<h2 class="font-bold text-xl">Location</h2> <h2 class="text-xl font-bold">Location</h2>
<p class="text-[#ccc]">Melbourne, Australia</p> <p class="text-[#ccc]">Melbourne, Australia</p>
</div> </div>
</div> </div>
<div <div
class="flex flex-row justify-center items-center gap-3" class="flex flex-row items-center justify-center gap-3"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -486,13 +466,13 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg> </svg>
<div> <div>
<h2 class="font-bold text-xl">Date & Time</h2> <h2 class="text-xl font-bold">Date & Time</h2>
<p class="text-[#ccc]"> <p class="text-[#ccc]">
<div id="display-date" class="text-[#ccc]"> <div id="display-date" class="text-[#ccc]">
</div> </div>
<span <span
id="time-in-aus" id="time-in-aus"
class="text-[#ccc] uppercase"></span> class="uppercase text-[#ccc]"></span>
<span <span
id="time-difference" id="time-difference"
class="text-[#ccc]" class="text-[#ccc]"
@ -507,12 +487,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://ko-fi.com/rython" target="_blank"> <a href="https://ko-fi.com/rython" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
class="social-card-content flex flex-col justify-between items-start group" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -530,7 +508,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</div> </div>
<div <div
id="kofi-icon" id="kofi-icon"
class="icon-box w-12 h-12 aspect-square rounded-full bg-[#00BCF2] flex justify-center items-center" class="icon-box flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-[#00BCF2]"
> >
<img <img
src="/images/socials/kofi_s_logo_nolabel.webp" src="/images/socials/kofi_s_logo_nolabel.webp"
@ -539,7 +517,7 @@ import Footer from "../components/sections/FooterComponent.astro";
/> />
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">Ko-fi</h2> <h2 class="text-xl font-bold">Ko-fi</h2>
<p class="text-[#ccc]">Rython</p> <p class="text-[#ccc]">Rython</p>
</div> </div>
</div> </div>
@ -549,12 +527,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://rython.dev/discord" target="_blank"> <a href="https://rython.dev/discord" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
class="social-card-content flex flex-col justify-between items-start group" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -596,7 +572,7 @@ import Footer from "../components/sections/FooterComponent.astro";
> >
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">Discord</h2> <h2 class="text-xl font-bold">Discord</h2>
<p class="text-[#ccc]"> <p class="text-[#ccc]">
rython.dev/<wbr />discord rython.dev/<wbr />discord
</p> </p>
@ -604,17 +580,15 @@ import Footer from "../components/sections/FooterComponent.astro";
</div> </div>
</div> </div>
</a> </a>
<div class="opacity-0 hidden lg:block"></div> <div class="hidden opacity-0 lg:block"></div>
<!-- Tiktok --> <!-- Tiktok -->
<a href="https://tiktok.com/@RythonDev" target="_blank"> <a href="https://tiktok.com/@RythonDev" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
class="social-card-content flex flex-col justify-between items-start group" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -632,7 +606,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</div> </div>
<div <div
id="tiktok-icon" id="tiktok-icon"
class="icon-box bg-[#111] rounded-full w-12 h-12 flex justify-center items-center" class="icon-box flex h-12 w-12 items-center justify-center rounded-full bg-[#111]"
> >
<img <img
src="/images/socials/tiktok.webp" src="/images/socials/tiktok.webp"
@ -641,23 +615,21 @@ import Footer from "../components/sections/FooterComponent.astro";
/> />
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">Tiktok</h2> <h2 class="text-xl font-bold">Tiktok</h2>
<p class="text-[#ccc]">@RythonDev</p> <p class="text-[#ccc]">@RythonDev</p>
</div> </div>
</div> </div>
</div> </div>
</a> </a>
<div class="opacity-0 hidden md:block lg:hidden"></div> <div class="hidden opacity-0 md:block lg:hidden"></div>
<!-- Bluesky --> <!-- Bluesky -->
<a href="https://bsky.app/profile/rython.dev" target="_blank"> <a href="https://bsky.app/profile/rython.dev" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
class="social-card-content flex flex-col justify-between items-start group" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -675,9 +647,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</div> </div>
<div <div
id="bluesky-icon" id="bluesky-icon"
class="icon-box w-12 h-12 aspect-square rounded-full class="icon-box flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-[linear-gradient(0deg,_rgba(86,183,254,1)_0%,_rgba(13,125,253,1)_100%)]"
bg-[linear-gradient(0deg,_rgba(86,183,254,1)_0%,_rgba(13,125,253,1)_100%)]
flex justify-center items-center"
> >
<img <img
src="/images/socials/bluesky.webp" src="/images/socials/bluesky.webp"
@ -686,17 +656,17 @@ import Footer from "../components/sections/FooterComponent.astro";
/> />
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">Bluesky</h2> <h2 class="text-xl font-bold">Bluesky</h2>
<p class="text-[#ccc]">@rython.dev</p> <p class="text-[#ccc]">@rython.dev</p>
</div> </div>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="mx-auto md:ml-auto mt-10 w-fit"> <div class="mx-auto mt-10 w-fit md:ml-auto">
Hover Light effect by Hover Light effect by
<a <a
class="underline text-white hover:text-blue-500" class="text-white underline hover:text-blue-500"
href="https://www.youtube.com/watch?v=htGfnF1zN4g" href="https://www.youtube.com/watch?v=htGfnF1zN4g"
target="_blank" target="_blank"
> >
@ -719,7 +689,8 @@ import Footer from "../components/sections/FooterComponent.astro";
} }
#intro .social-card-content { #intro .social-card-content {
background-image: linear-gradient( background-image:
linear-gradient(
to bottom, to bottom,
rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%,
rgba(20, 20, 20, 1) 50% rgba(20, 20, 20, 1) 50%
@ -901,7 +872,7 @@ import Footer from "../components/sections/FooterComponent.astro";
let { hours, minutes } = getTimezoneDifference( let { hours, minutes } = getTimezoneDifference(
Intl.DateTimeFormat().resolvedOptions().timeZone, Intl.DateTimeFormat().resolvedOptions().timeZone,
MY_TIMEZONE MY_TIMEZONE,
); );
let timeDifference = displayTimeDifference(hours, minutes); let timeDifference = displayTimeDifference(hours, minutes);

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

@ -12,21 +12,21 @@ import Footer from "../components/sections/FooterComponent.astro";
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.
@ -36,7 +36,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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.
@ -47,7 +47,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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
@ -62,13 +62,13 @@ import Footer from "../components/sections/FooterComponent.astro";
<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">
@ -79,7 +79,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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">
@ -92,7 +92,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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
@ -107,13 +107,13 @@ import Footer from "../components/sections/FooterComponent.astro";
<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.
@ -123,7 +123,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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
@ -133,7 +133,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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