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

added socials page

Browse source
This commit is contained in:
liyunze 2024-02-18 13:49:39 +08:00
parent ef3f88ff23
commit fac82909fd
6 changed files with 192 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/RyanPogSmol.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 94 KiB

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

@ -115,7 +115,7 @@
<div class="text-2xl font-bold mt-10">
Good {greeting}, <br class="sm:hidden" />I'm Ryan!
</div>
<p class="text-left lg:text-justify">
<p class="text-left">
I was born and raised in Malaysia, and fluent in Mandarin and
English.
<br /><br />

6
src/components/sections/SkillsComponent.astro
View file

@ -13,7 +13,7 @@ import Line from "../elements/NetworkLine.astro";
<h2 class="font-bold text-2xl">Frontend Development</h2>
</div>
<hr class="w-full" />
<p class="text-left lg:text-justify">
<p class="text-left">
I started my web development journey by building
websites and widgets using vanilla HTML, CSS, Javascript
and Express. As I learnt more about the fundamentals of
@ -119,7 +119,7 @@ import Line from "../elements/NetworkLine.astro";
<h2 class="font-bold text-2xl">Backend Development</h2>
</div>
<hr class="w-full" />
<p class="text-left lg:text-justify">
<p class="text-left">
In the beginning, I used my Python skills to entertain
and to automate the boring stuff, such as using Selenium
for automation + web scraping, play chess by automating
@ -250,7 +250,7 @@ import Line from "../elements/NetworkLine.astro";
<h2 class="font-bold text-2xl">Data Science</h2>
</div>
<hr class="w-full" />
<p class="text-left lg:text-justify">
<p class="text-left">
My first exposure to data science was through learning
Computer Vision. I learn how to use OpenCV in Python to
open a webcam and detect faces. Later on, I took a

2
src/pages/skills.astro
View file

@ -21,7 +21,7 @@ import Card from "../components/elements/Card.astro";
<h2 class="font-bold text-2xl">Content Creation</h2>
</div>
<hr class="w-full" />
<p class="text-left lg:text-justify">
<p class="text-left">
Since I was little, I loved watching YouTube videos and
the idea of bringing joy and laughter to a wider
audience. Thus, I began my journey in content creation

178
src/pages/socials.astro Normal file
View file

@ -0,0 +1,178 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="Skills" description="Check out Ryan's socials">
<!-- twitch, youtube, github, codepen, discord, instagram, ko-fi, -->
<div class="px-0 pt-10">
<div class="flex flex-col justify-center items-center">
<div
class="overflow-hidden rounded-full
border-2 border-white border-solid"
>
<img
src="/public/images/RyanPogSmol.webp"
alt="Ryan's Avatar"
width="100"
/>
</div>
<h2 class="text-lg text-center">@RythonDev</h2>
<h3 class="mt-5 text-center">Web Developer, Twitch streamer</h3>
<div class="flex flex-row justify-center items-center py-5">
<a href="https://github.com/liyunze-coding" target="_blank">
<div
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200"
>
<img
src="/images/socials/github.svg"
alt="github"
class="aspect-square max-w-full"
width="20"
/>
</div>
</a>
<a href="https://codepen.io/liyunze-coding" target="_blank">
<div
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200 transition-colors duration-150"
>
<img
src="/images/socials/codepen.svg"
alt="codepen"
class="w-5 h-5 aspect-square"
/>
</div>
</a>
<a href="https://youtube.com/@RythonDev" target="_blank">
<div
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-red-400 transition-colors duration-150"
>
<img
src="/images/socials/youtube.svg"
alt="youtube"
class="w-5 h-5 aspect-square"
/>
</div>
</a>
<a href="https://twitch.tv/RythonDev" target="_blank">
<div
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-purple-400 transition-colors duration-150"
>
<img
src="/images/socials/twitch.svg"
alt="twitch"
class="w-4 h-4 aspect-square"
/>
</div>
</a>
</div>
</div>
<div
class="w-full
grid grid-cols-1 place-items-center gap-5
px-0 py-5
text-white"
>
<!-- SOCIALS START HERE -->
<a
href="https://twitch.tv/RythonDev"
target="_blank"
class="inline-block w-[clamp(200px,50vw,600px)]
relative
rounded-full
bg-[#9146FF] border-[#9146FF]
border-solid border
px-2 py-2
text-center text-white
hover:bg-transparent hover:text-[#9146FF]
transition-colors duration-150"
>
Twitch
</a>
<a
href="https://youtube.com/@RythonDev"
target="_blank"
class="inline-block w-[clamp(200px,50vw,600px)]
relative
rounded-full
bg-[#ff0000] border-[#ff0000]
border-solid border
px-7 py-2
text-center text-white
hover:bg-transparent hover:text-[#ff0000]
transition-colors duration-150"
>
YouTube
</a>
<a
href="https://rython.dev/discord"
target="_blank"
class="inline-block w-[clamp(200px,50vw,600px)]
relative
rounded-full
bg-[#5865F2] border-[#5865F2]
border-solid border
px-7 py-2
text-center text-white
hover:bg-transparent hover:text-[#5865F2]"
>
Discord
</a>
<a
href="https://instagram.com/rythondev"
target="_blank"
class="inline-block w-[clamp(200px,50vw,600px)]
relative
rounded-full
bg-gradient-to-r from-purple-600 via-red-600 to-yellow-400
border-solid border
px-7 py-2
text-center text-white
hover:from-transparent hover:via-transparent hover:to-transparent"
>
Instagram
</a>
<a
href="https://ko-fi/rython"
target="_blank"
class="inline-block w-[clamp(200px,50vw,600px)]
relative
rounded-full
bg-cyan-500 border-cyan-500
border-solid border
px-7 py-2
text-center text-white
hover:bg-transparent hover:text-cyan-500"
>
Ko-fi
</a>
<a
href="https://github.com/liyunze-coding"
target="_blank"
class="inline-block w-[clamp(200px,50vw,600px)]
relative
rounded-full
bg-gray-100 border-gray-100
border-solid border
px-7 py-2
text-center text-black
hover:bg-transparent hover:text-gray-100"
>
Github
</a>
<a
href="https://codepen.io/liyunze-coding"
target="_blank"
class="inline-block w-[clamp(200px,50vw,600px)]
relative
rounded-full
bg-gray-100 border-gray-100
border-solid border
px-7 py-2
text-center text-black
hover:bg-transparent hover:text-gray-100"
>
Codepen
</a>
</div>
</div>
</Layout>

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

@ -26,7 +26,7 @@ import Line from "../components/elements/NetworkLine.astro";
<hr class="w-full mb-3 mt-3" />
<div class="mb-5">
<h3 class="font-bold text-xl">Websites</h3>
<p class="mt-1 md:text-justify text-left">
<p class="mt-1 text-left">
I go beyond coding; I'm a developer who translates
your vision into a captivating online presence.
Through custom designs, intuitive user experiences,
@ -36,7 +36,7 @@ import Line from "../components/elements/NetworkLine.astro";
</div>
<div class="mb-5">
<h3 class="font-bold text-xl">Web Apps</h3>
<p class="mt-1 md:text-justify text-left">
<p class="mt-1 text-left">
I craft solutions that streamline workflows, boost
efficiency, and empower your users to achieve more.
With a focus on intuitive interfaces, powerful
@ -47,7 +47,7 @@ import Line from "../components/elements/NetworkLine.astro";
</div>
<div>
<h3 class="font-bold text-xl">Widgets</h3>
<p class="mt-1 md:text-justify text-left">
<p class="mt-1 text-left">
Leveraging my web development skills, I built stream
widgets to level up the stream! Easy to use and
customize, my work have been used by 100+ streamers
@ -70,7 +70,7 @@ import Line from "../components/elements/NetworkLine.astro";
<h3 class="font-bold text-xl">
Data Analysis and Visualization
</h3>
<p class="mt-1 md:text-justify text-left">
<p class="mt-1 text-left">
I'm your data artist, translating numbers into works
of art that inform, inspire, and guide
decision-making. We'll create visually compelling
@ -82,7 +82,7 @@ import Line from "../components/elements/NetworkLine.astro";
<h3 class="font-bold text-xl">
Statistics and Probability
</h3>
<p class="mt-1 md:text-justify text-left">
<p class="mt-1 text-left">
Every number tells a story, but it takes the
language of statistics and probability to truly
understand it. Our world is awash in data, but it's
@ -93,7 +93,7 @@ import Line from "../components/elements/NetworkLine.astro";
</div>
<div>
<h3 class="font-bold text-xl">Machine Learning</h3>
<p class="mt-1 md:text-justify text-left">
<p class="mt-1 text-left">
Machine learning isn't just about mimicking human
intelligence, it's about surpassing it. We push the
boundaries of what's possible, collaborating with
@ -114,7 +114,7 @@ import Line from "../components/elements/NetworkLine.astro";
<hr class="w-full mb-3 mt-3" />
<div class="mb-5">
<h3 class="font-bold text-xl">Streaming</h3>
<p class="mt-1 md:text-justify text-left">
<p class="mt-1 text-left">
Streaming isn't just about entertainment, it's about
building a brand that resonates and inspires.
Streaming allows me to enhance my marketing skills
@ -124,7 +124,7 @@ import Line from "../components/elements/NetworkLine.astro";
</div>
<div class="mb-5">
<h3 class="font-bold text-xl">Video Editing</h3>
<p class="mt-1 md:text-justify text-left">
<p class="mt-1 text-left">
I may be at the beginning of my video editing
adventure, but I'm committed to making your vision a
reality. I'll learn, adapt, and work tirelessly to
@ -134,7 +134,7 @@ import Line from "../components/elements/NetworkLine.astro";
</div>
<div>
<h3 class="font-bold text-xl">Personality</h3>
<p class="mt-1 md:text-justify text-left">
<p class="mt-1 text-left">
I believe content should be an adventure, not a
formula. my world is a vibrant playground of
unscripted interactions, quirky challenges, and raw