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

updated skills and formatting

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

2
.prettierrc
View file

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

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

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

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

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

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

@ -1,5 +1,5 @@
<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"
style="color: black; text-decoration: none;"
>

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

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

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

@ -4,28 +4,28 @@ import Line from "../elements/NetworkLine.astro";
---
<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="w-[90%] md:w-[600px]">
<Card primaryColor="#F6DFD8">
<div class="card-content md:px-8 md:py-8 px-4 py-4">
<div class="flex flex-col justify-start w-full mb-3 gap-1">
<h2 class="font-bold text-xl">
<div class="card-content px-4 py-4 md:px-8 md:py-8">
<div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold">
Bachelor of Computer Science student
</h2>
<h3>July 2024 - Present</h3>
</div>
<hr class="w-full mb-3" />
<hr class="mb-3 w-full" />
<p class="mb-3">
Currently pursuing my Bachelor's degree in Computer
Science in Melbourne as a Vice-Chancellor 50%
Scholarship Awardee.
</p>
<h3 class="mb-1 font-bold text-lg">Relevant skills:</h3>
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
<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>Vue.JS</li>
</ul>
@ -34,24 +34,24 @@ import Line from "../elements/NetworkLine.astro";
</Card>
<Line height="50px" />
<Card primaryColor="#F6DFD8">
<div class="card-content md:px-8 md:py-8 px-4 py-4">
<div class="flex flex-col justify-start w-full mb-3 gap-1">
<h2 class="font-bold text-xl">
<div class="card-content px-4 py-4 md:px-8 md:py-8">
<div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold">
Lead Frontend Web Developer
</h2>
<h3 class="font-bold">@ JW BizTech</h3>
<h3>Dec 2024 - Present</h3>
</div>
<hr class="w-full mb-3" />
<hr class="mb-3 w-full" />
<p class="mb-3">
Led implementation of frontend technology stack for
websites. Worked closely with UI/UX designers to
translate designs into code, and with backend developers
to ensure smooth integration with CMS.
</p>
<h3 class="mb-1 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>Typescript</li>
<li>TailwindCSS</li>
@ -60,30 +60,30 @@ import Line from "../elements/NetworkLine.astro";
</Card>
<Line height="50px" />
<Card primaryColor="#F6DFD8">
<div class="card-content md:px-8 md:py-8 px-4 py-4">
<div class="flex flex-col justify-start w-full mb-3 gap-1">
<h2 class="font-bold text-xl">
<div class="card-content px-4 py-4 md:px-8 md:py-8">
<div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold">
Frontend Web Developer Intern
</h2>
<h3>Jan 2024 - April 2024</h3>
</div>
<hr class="w-full mb-3" />
<hr class="mb-3 w-full" />
<p class="mb-3">
During my internship, I learnt how to build WordPress
sites and further enhance my skills in PHP. I also
learnt how to closely work with UI/UX designers and pay
close attention to details with the designs I am given.
</p>
<h3 class="mb-1 font-bold text-lg">Relevant skills:</h3>
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
<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>Typescript</li>
<li>TailwindCSS</li>
</ul>
<ul class="list-disc list-inside">
<ul class="list-inside list-disc">
<li>Adobe XD</li>
<li>NextJS & React</li>
</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">
Copyright © 2023-{new Date().getFullYear()} RythonDev. All Rights Reserved.
</div>

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

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

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]">
<Line height="50px" />
<Card primaryColor="#FFAC21">
<div class="card-content md:px-8 md:py-8 px-4 py-4">
<div class="flex flex-col justify-start w-full mb-3 gap-1">
<h2 class="font-bold text-xl">
<div class="card-content px-4 py-4 md:px-8 md:py-8">
<div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold">
Diploma in Computer Science student
</h2>
<h3 class="font-bold">
@ -18,9 +18,9 @@ import Line from "../elements/NetworkLine.astro";
</h3>
<h3>Jan 2022 - June 2024</h3>
</div>
<hr class="w-full mb-3" />
<h3 class="mb-1 font-bold text-lg">Achievements</h3>
<ul class="list-disc list-inside">
<hr class="mb-3 w-full" />
<h3 class="mb-1 text-lg font-bold">Achievements</h3>
<ul class="list-inside list-disc">
<li>
4-time Dean's List Award recipient (&gt;3.5 GPA)
</li>

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

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

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

@ -1,6 +1,6 @@
<div class="w-full">
<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"
transition:persist
transition:name="hamburger"
@ -9,70 +9,69 @@
<input type="checkbox" aria-label="Toggle menu" />
<span class="bottom-bun"></span>
</label>
<aside class="sidebar flex z-20">
<aside class="sidebar z-20 flex">
<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"
>
<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
>
<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
>
<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
>
<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
>
<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
>
<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
>
</nav>
</aside>
<div
id="navbar"
class="fixed z-50 top-0 w-full hidden md:flex justify-center
bg-[#202020]/80 backdrop-blur"
class="fixed top-0 z-50 hidden w-full justify-center bg-[#202020]/80 backdrop-blur md:flex"
transition:name="navBar"
>
<div
id="navbar-div"
class="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
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
>
<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
>
<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
>
<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
>
<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
>
<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
>
</div>

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

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

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

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

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

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

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

@ -2,21 +2,21 @@
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
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
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}>
<div class="card-content">
<h2 class="font-bold text-xl text-center">
<h2 class="text-center text-xl font-bold">
Web Development
</h2>
<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 my imagination to life through web development.
</p>
@ -25,9 +25,9 @@ import Card from "../elements/Card.astro";
<Card primaryColor="#a1eebd" scaleOnHover={true}>
<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" />
<p class="text-center text-balance">
<p class="text-balance text-center">
Using data to make decisions is a powerful tool. I am
experienced in analyzing data and making decisions based
on data.
@ -37,11 +37,11 @@ import Card from "../elements/Card.astro";
<Card primaryColor="#9D76C1" scaleOnHover={true}>
<div class="card-content">
<h2 class="font-bold text-xl text-center">
<h2 class="text-center text-xl font-bold">
Content Creation
</h2>
<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
produce content around productivity and software
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!"
>
<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>
<p class="text-gray-200 mt-3 text-lg">
<p class="mt-3 text-lg text-gray-200">
Published
{
new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
@ -33,18 +33,13 @@ const { Content } = await entry.render();
})
}
</p>
<p class="text-gray-200 text-lg">by {entry.data.author}</p>
<p class="text-white text-lg">{entry.data.description}</p>
<p class="text-lg text-gray-200">by {entry.data.author}</p>
<p class="text-lg text-white">{entry.data.description}</p>
<div class="flex flex-row flex-wrap justify-start items-start">
<div class="flex flex-row flex-wrap items-start justify-start">
{
entry.data.tags?.map((tag) => (
<div
class="mr-2 px-3 py-1 rounded-xl bg-[#282828]
border-2 border-solid border-gray-500
hover:border-white hover:bg-gray-300 hover:text-black
transition-colors duration-150"
>
<div class="mr-2 rounded-xl border-2 border-solid border-gray-500 bg-[#282828] px-3 py-1 transition-colors duration-150 hover:border-white hover:bg-gray-300 hover:text-black">
{tag}
</div>
))

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">
<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">
<p class="text-center text-lg">
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);">
{
blogPosts.map((blog) => (
<a class="mb-5 group" href={`/blog/${blog.slug}`}>
<a class="group mb-5" href={`/blog/${blog.slug}`}>
<Card
primaryColor={
blog.data.color ?? "rgba(0,0,0,0)"
}
pixelHeight="50px"
>
<div class="card-content py-3 px-8 text-left relative">
<h2 class="font-bold text-xl mb-1">
<div class="card-content relative px-8 py-3 text-left">
<h2 class="mb-1 text-xl font-bold">
{blog.data.title}
</h2>
<p class="line-clamp-2">
@ -45,11 +45,7 @@ const blogPosts = await getCollection("blog");
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
class="size-6
absolute top-3 right-3
group-hover:top-2 group-hover:right-2
stroke-white group-hover:stroke-green-400
transition-all duration-150"
class="absolute right-3 top-3 size-6 stroke-white transition-all duration-150 group-hover:right-2 group-hover:top-2 group-hover:stroke-green-400"
>
<path
stroke-linecap="round"

10
src/pages/contact.astro
View file

@ -13,19 +13,19 @@ import Footer from "../components/sections/FooterComponent.astro";
<NavBar />
<div id="contact-component" class="mt-10 pt-20">
<h1 class="text-center text-5xl">Contact</h1>
<div class="mt-10 flex justify-center items-center">
<div class="mt-10 flex items-center justify-center">
<div class="w-[90%] md:w-[600px]">
<Card primaryColor="#40A2D8">
<div class="card-content">
<div class="flex flex-col justify-left w-full mb-3">
<div class="justify-left mb-3 flex w-full flex-col">
<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?
</h2>
</div>
<hr class="w-full mb-3" />
<div class="text-center text-balance">
<hr class="mb-3 w-full" />
<div class="text-balance text-center">
Whether it's sponsorships or collaboration
opportunities, hit me up!
</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">
<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">
<div class="card-content md:px-8 md:py-8 px-4 py-4">
<h1 class="font-bold text-3xl text-center">
<div class="card-content px-4 py-4 md:px-8 md:py-8">
<h1 class="text-center text-3xl font-bold">
Frequently Asked Questions
</h1>
<hr class="my-2" />
<!-- Who are you? -->
<h2 class="font-bold text-xl">Who are you?</h2>
<h2 class="text-xl font-bold">Who are you?</h2>
<p>
I'm Ryan, I am a software developer and a coworking & study
streamer.
@ -27,7 +27,7 @@ import Footer from "../components/sections/FooterComponent.astro";
and my content creation projects.
</p>
<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?
</h2>
<p>
@ -37,7 +37,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</p>
<hr class="my-2" />
<!-- How to pronounce? -->
<h2 class="font-bold text-xl">
<h2 class="text-xl font-bold">
How to pronounce your username?
</h2>
<p>
@ -46,7 +46,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</p>
<hr class="my-2" />
<!-- 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>
That question is answered <a
target="_blank"
@ -57,7 +57,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</p>
<hr class="my-2" />
<!-- 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?
</h2>
<p>
@ -67,7 +67,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</p>
<hr class="my-2" />
<!-- 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>
<hr class="my-2" />
</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!"
>
<NavBar />
<div id="home" class="pt-20 flex justify-center items-center">
<div class="w-[90%] xl:w-1/2 lg:w-1/2 max-w-[1080px]">
<div id="home" class="flex items-center justify-center pt-20">
<div class="w-[90%] max-w-[1080px] lg:w-1/2 xl:w-1/2">
<Card
bgColor="#252525"
primaryColor="#BEADFA"
@ -30,12 +30,12 @@ import Footer from "../components/sections/FooterComponent.astro";
</div>
<NetworkLine height="70px" />
<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 />
</div>
<div id="projects">
<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 />
</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">
<NavBar />
<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 -->
<MoreProjects client:load />
</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">
<SkillsComponent />
<Line height="50px" />
<div class="w-[90%] md:w-[600px] mx-auto">
<div class="mx-auto w-[90%] md:w-[600px]">
<Card primaryColor="#9D76C1">
<div class="card-content">
<div class="flex flex-col justify-left w-full">
<h2 class="font-bold text-2xl">Content Creation</h2>
<div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Content Creation</h2>
</div>
<hr class="w-full" />
<p class="text-left">
@ -32,36 +32,24 @@ import Footer from "../components/sections/FooterComponent.astro";
software and game development streams where I showcase
my work flow.
</p>
<div class="w-full flex flex-row flex-wrap justify-start">
<div class="flex w-full flex-row flex-wrap justify-start">
<div
class="w-fit text-white bg-[#141414] md:bg-gray-500 hover:bg-[#141414] hover:text-white
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#141414] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#141414] hover:text-white md:bg-gray-500"
>
OBS
</div>
<div
class="w-fit text-black md:text-white bg-gray-50 md:bg-gray-500 hover:bg-gray-50 hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-50 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-50 hover:text-black md:bg-gray-500 md:text-white"
>
DaVinci Resolve
</div>
<div
class="w-fit text-white bg-purple-500 md:bg-gray-500 hover:bg-purple-500
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
class="my-1 mr-1 w-fit cursor-default rounded-full bg-purple-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-purple-500 md:bg-gray-500"
>
Twitch
</div>
<div
class="w-fit text-white bg-[#ff0000] md:bg-gray-500 hover:bg-[#ff0000] hover:text-white
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ff0000] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ff0000] hover:text-white md:bg-gray-500"
>
YouTube
</div>

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">
<div class="px-0 py-10 flex justify-center items-center flex-col">
<div class="max-w-[1024px] w-[calc(100%-20px)]">
<div class="flex flex-col items-center justify-center px-0 py-10">
<div class="w-[calc(100%-20px)] max-w-[1024px]">
<div
id="cards"
class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4"
>
<div
id="intro"
class="social-card col-span-2 md:col-span-3 lg:col-span-4
h-[450px] md:h-[280px]"
class="social-card col-span-2 h-[450px] md:col-span-3 md:h-[280px] lg:col-span-4"
>
<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
class="rounded-full border-2 border-white border-solid
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"
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"
>
<img
src="/images/RyanPogSmol.webp"
@ -34,8 +28,8 @@ import Footer from "../components/sections/FooterComponent.astro";
class="aspect-square w-32 md:w-44"
/>
</div>
<div class="md:h-1/2 md:mt-auto">
<h1 class="font-bold text-4xl mb-2">RythonDev</h1>
<div class="md:mt-auto md:h-1/2">
<h1 class="mb-2 text-4xl font-bold">RythonDev</h1>
<p class="text-lg text-[#ccc]">
I am a Malaysian Chinese content creator based
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">
<div class="social-card">
<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
class="absolute right-5 rotate-45 opacity-0
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -70,7 +62,7 @@ import Footer from "../components/sections/FooterComponent.astro";
fill="#fff"></path>
</svg>
</div>
<div id="website-icon" class="icon-box w-12 h-12">
<div id="website-icon" class="icon-box h-12 w-12">
<svg
fill="#fff"
width="26px"
@ -92,7 +84,7 @@ import Footer from "../components/sections/FooterComponent.astro";
>
</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>
</div>
</div>
@ -102,12 +94,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://twitch.tv/RythonDev/" target="_blank">
<div class="social-card">
<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
class="absolute right-5 rotate-45 opacity-0
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -148,7 +138,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg>
</div>
<div>
<h2 class="font-bold text-xl">Twitch</h2>
<h2 class="text-xl font-bold">Twitch</h2>
<p class="text-[#ccc]">RythonDev</p>
</div>
</div>
@ -158,12 +148,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://youtube.com/@RythonDev/" target="_blank">
<div class="social-card">
<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
class="absolute right-5 rotate-45 opacity-0
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -198,7 +186,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg>
</div>
<div>
<h2 class="font-bold text-xl">YouTube</h2>
<h2 class="text-xl font-bold">YouTube</h2>
<p class="text-[#ccc]">@RythonDev</p>
</div>
</div>
@ -208,12 +196,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://instagram.com/RythonDev" target="_blank">
<div class="social-card">
<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
class="absolute right-5 rotate-45 opacity-0
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -279,7 +265,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg>
</div>
<div>
<h2 class="font-bold text-xl">Instagram</h2>
<h2 class="text-xl font-bold">Instagram</h2>
<p class="text-[#ccc]">@RythonDev</p>
</div>
</div>
@ -289,12 +275,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://github.com/liyunze-coding" target="_blank">
<div class="social-card">
<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
class="absolute right-5 rotate-45 opacity-0
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -311,13 +295,11 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg>
</div>
<div
class="relative w-12 h-12 bg-white rounded-full
border-8 border-solid border-black z-20"
class="relative z-20 h-12 w-12 rounded-full border-8 border-solid border-black bg-white"
>
<div
id="github-icon"
class="icon-box w-12 h-12 rounded-full 2-10
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
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"
>
<svg
width="38px"
@ -353,7 +335,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</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>
</div>
</div>
@ -363,12 +345,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://codepen.io/RythonDev" target="_blank">
<div class="social-card">
<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
class="absolute right-5 rotate-45 opacity-0
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -386,7 +366,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</div>
<div
id="codepen-icon"
class="icon-box w-12 h-12 rounded-full"
class="icon-box h-12 w-12 rounded-full"
>
<svg
version="1.1"
@ -418,7 +398,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg>
</div>
<div>
<h2 class="font-bold text-xl">Codepen</h2>
<h2 class="text-xl font-bold">Codepen</h2>
<p class="text-[#ccc]">RythonDev</p>
</div>
</div>
@ -427,19 +407,19 @@ import Footer from "../components/sections/FooterComponent.astro";
<!-- Stream Schedule -->
<div class="social-card col-span-2 h-fit">
<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 />
</div>
</div>
<!-- Location -->
<div class="social-card col-span-2 md:col-span-1 lg:col-span-2">
<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
class="flex flex-row gap-3 items-center justify-center"
class="flex flex-row items-center justify-center gap-3"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -463,12 +443,12 @@ import Footer from "../components/sections/FooterComponent.astro";
></path>
</svg>
<div>
<h2 class="font-bold text-xl">Location</h2>
<h2 class="text-xl font-bold">Location</h2>
<p class="text-[#ccc]">Melbourne, Australia</p>
</div>
</div>
<div
class="flex flex-row justify-center items-center gap-3"
class="flex flex-row items-center justify-center gap-3"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -486,13 +466,13 @@ import Footer from "../components/sections/FooterComponent.astro";
</svg>
<div>
<h2 class="font-bold text-xl">Date & Time</h2>
<h2 class="text-xl font-bold">Date & Time</h2>
<p class="text-[#ccc]">
<div id="display-date" class="text-[#ccc]">
</div>
<span
id="time-in-aus"
class="text-[#ccc] uppercase"></span>
class="uppercase text-[#ccc]"></span>
<span
id="time-difference"
class="text-[#ccc]"
@ -507,12 +487,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://ko-fi.com/rython" target="_blank">
<div class="social-card">
<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
class="absolute right-5 rotate-45 opacity-0
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -530,7 +508,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</div>
<div
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
src="/images/socials/kofi_s_logo_nolabel.webp"
@ -539,7 +517,7 @@ import Footer from "../components/sections/FooterComponent.astro";
/>
</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>
</div>
</div>
@ -549,12 +527,10 @@ import Footer from "../components/sections/FooterComponent.astro";
<a href="https://rython.dev/discord" target="_blank">
<div class="social-card">
<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
class="absolute right-5 rotate-45 opacity-0
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -596,7 +572,7 @@ import Footer from "../components/sections/FooterComponent.astro";
>
</div>
<div>
<h2 class="font-bold text-xl">Discord</h2>
<h2 class="text-xl font-bold">Discord</h2>
<p class="text-[#ccc]">
rython.dev/<wbr />discord
</p>
@ -604,17 +580,15 @@ import Footer from "../components/sections/FooterComponent.astro";
</div>
</div>
</a>
<div class="opacity-0 hidden lg:block"></div>
<div class="hidden opacity-0 lg:block"></div>
<!-- Tiktok -->
<a href="https://tiktok.com/@RythonDev" target="_blank">
<div class="social-card">
<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
class="absolute right-5 rotate-45 opacity-0
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -632,7 +606,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</div>
<div
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
src="/images/socials/tiktok.webp"
@ -641,23 +615,21 @@ import Footer from "../components/sections/FooterComponent.astro";
/>
</div>
<div>
<h2 class="font-bold text-xl">Tiktok</h2>
<h2 class="text-xl font-bold">Tiktok</h2>
<p class="text-[#ccc]">@RythonDev</p>
</div>
</div>
</div>
</a>
<div class="opacity-0 hidden md:block lg:hidden"></div>
<div class="hidden opacity-0 md:block lg:hidden"></div>
<!-- Bluesky -->
<a href="https://bsky.app/profile/rython.dev" target="_blank">
<div class="social-card">
<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
class="absolute right-5 rotate-45 opacity-0
group-hover:opacity-100 group-hover:rotate-0
transition-all duration-300 ease-in-out"
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -675,9 +647,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</div>
<div
id="bluesky-icon"
class="icon-box w-12 h-12 aspect-square rounded-full
bg-[linear-gradient(0deg,_rgba(86,183,254,1)_0%,_rgba(13,125,253,1)_100%)]
flex justify-center items-center"
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%)]"
>
<img
src="/images/socials/bluesky.webp"
@ -686,17 +656,17 @@ import Footer from "../components/sections/FooterComponent.astro";
/>
</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>
</div>
</div>
</div>
</a>
</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
<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"
target="_blank"
>
@ -719,7 +689,8 @@ import Footer from "../components/sections/FooterComponent.astro";
}
#intro .social-card-content {
background-image: linear-gradient(
background-image:
linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(20, 20, 20, 1) 50%
@ -901,7 +872,7 @@ import Footer from "../components/sections/FooterComponent.astro";
let { hours, minutes } = getTimezoneDifference(
Intl.DateTimeFormat().resolvedOptions().timeZone,
MY_TIMEZONE
MY_TIMEZONE,
);
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"
>
<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 />
<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">
<div class="card-content">
<h2
id="web-dev"
class="font-bold text-2xl animate-gradient"
class="animate-gradient text-2xl font-bold"
>
Web Development
</h2>
<hr class="w-full mb-3 mt-3" />
<hr class="mb-3 mt-3 w-full" />
<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">
I go beyond coding; I'm a developer who translates
your vision into a captivating online presence.
@ -36,7 +36,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</p>
</div>
<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">
I craft solutions that streamline workflows, boost
efficiency, and empower your users to achieve more.
@ -47,7 +47,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</p>
</div>
<div>
<h3 class="font-bold text-xl">Widgets</h3>
<h3 class="text-xl font-bold">Widgets</h3>
<p class="mt-1 text-left">
Leveraging my web development skills, I built stream
widgets to level up livestreams on Twitch and
@ -62,13 +62,13 @@ import Footer from "../components/sections/FooterComponent.astro";
<div class="card-content">
<h2
id="data-science"
class="font-bold text-2xl animate-gradient"
class="animate-gradient text-2xl font-bold"
>
Data Science
</h2>
<hr class="w-full mb-3 mt-3" />
<hr class="mb-3 mt-3 w-full" />
<div class="mb-5">
<h3 class="font-bold text-xl">
<h3 class="text-xl font-bold">
Data Analysis and Visualization
</h3>
<p class="mt-1 text-left">
@ -79,7 +79,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</p>
</div>
<div class="mb-5">
<h3 class="font-bold text-xl">
<h3 class="text-xl font-bold">
Statistics and Probability
</h3>
<p class="mt-1 text-left">
@ -92,7 +92,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</p>
</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">
Machine learning isn't just about mimicking human
intelligence, it's about surpassing it. We push the
@ -107,13 +107,13 @@ import Footer from "../components/sections/FooterComponent.astro";
<div class="card-content">
<h2
id="content-creation"
class="font-bold text-2xl animate-gradient"
class="animate-gradient text-2xl font-bold"
>
Content Creation
</h2>
<hr class="w-full mb-3 mt-3" />
<hr class="mb-3 mt-3 w-full" />
<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">
Streaming isn't just about entertainment, it's about
building a brand that resonates and inspires.
@ -123,7 +123,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</p>
</div>
<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">
I may be at the beginning of my video editing
adventure, but I'm committed to making your vision a
@ -133,7 +133,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</p>
</div>
<div>
<h3 class="font-bold text-xl">Personality</h3>
<h3 class="text-xl font-bold">Personality</h3>
<p class="mt-1 text-left">
I believe content should be an adventure, not a
formula. My livestreams revolve around unscripted