mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 15:53:57 +00:00
added socials page
This commit is contained in:
parent
ef3f88ff23
commit
fac82909fd
6 changed files with 192 additions and 14 deletions
BIN
public/images/RyanPogSmol.webp
Normal file
BIN
public/images/RyanPogSmol.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
|
|
@ -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 />
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
178
src/pages/socials.astro
Normal 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>
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue