added socials page

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

View file

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

View file

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

View file

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

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>

View file

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