updated socials, added faq

This commit is contained in:
liyunze 2024-06-29 23:10:51 +10:00
parent 0b13b82462
commit 6f05d793bd
6 changed files with 287 additions and 205 deletions

View file

@ -14,23 +14,29 @@ import Line from "../elements/NetworkLine.astro";
Frontend Web Developer Intern Frontend Web Developer Intern
</h2> </h2>
<h3 class="font-bold">@ Studio20 Malaysia</h3> <h3 class="font-bold">@ Studio20 Malaysia</h3>
<h3>Jan - April 2024</h3> <h3>Jan 2024 - April 2024</h3>
</div> </div>
<hr class="w-full mb-3" /> <hr class="w-full mb-3" />
<p class="mb-3"> <p class="mb-3">
During my internship, I learnt how to do WordPress and During my internship, I learnt how to build WordPress
further enhanced my skills in PHP. I also learnt how to sites and further enhance my skills in PHP. I also
closely work with UI/UX designers and pay close learnt how to closely work with UI/UX designers and pay
attention to details with the design I am given. close attention to details with the designs I am given.
</p> </p>
<h3 class="mb-1 font-bold text-lg">Relevant skills:</h3> <h3 class="mb-1 font-bold text-lg">Relevant skills:</h3>
<ul class="list-disc list-inside"> <div
<li>WordPress & PHP</li> class="flex flex-col md:flex-row justify-start items-start gap-0 md:gap-10"
<li>NextJS</li> >
<li>Typescript</li> <ul class="list-disc list-inside">
<li>TailwindCSS</li> <li>WordPress & PHP</li>
<li>Adobe XD</li> <li>Typescript</li>
</ul> <li>TailwindCSS</li>
</ul>
<ul class="list-disc list-inside">
<li>Adobe XD</li>
<li>NextJS & React</li>
</ul>
</div>
</div> </div>
</Card> </Card>
<Line height="50px" /> <Line height="50px" />
@ -38,8 +44,8 @@ import Line from "../elements/NetworkLine.astro";
<div class="card-content md:px-8 md:py-8 px-4 py-4"> <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"> <div class="flex flex-col justify-start w-full mb-3 gap-1">
<h2 class="font-bold text-xl"> <h2 class="font-bold text-xl">
Diploma in Computer Science Diploma in Computer Science student
</h2><h3>Jan 2022 - 2024</h3> </h2><h3>Jan 2022 - June 2024</h3>
</div> </div>
<hr class="w-full mb-3" /> <hr class="w-full mb-3" />
<h3 class="mb-1 font-bold text-lg">Achievements</h3> <h3 class="mb-1 font-bold text-lg">Achievements</h3>

View file

@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
--- ---
<Layout title="Discord" description="Join Ryan's Discord server!"> <Layout title="Discord" description="Join Ryan's Discord server!">
<script is:inline> <script is:inline>
window.location.href = " https://discord.gg/UnHyHkhbga"; window.location.href = " https://discord.gg/UnHyHkhbga";
</script> </script>
</Layout> </Layout>

76
src/pages/faq.astro Normal file
View file

@ -0,0 +1,76 @@
---
import Layout from "../layouts/Layout.astro";
import Card from "../components/elements/Card.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">
<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">
Frequently Asked Questions
</h1>
<hr class="my-2" />
<!-- Who are you? -->
<h2 class="font-bold text-xl">Who are you?</h2>
<p>
I'm Ryan, I am a software developer and a coworking & study
streamer.
<br /> <br/>
See my website <a
target="_blank"
href="https://rython.dev/"
class="text-blue-400 underline">here</a
> to learn more about me, including my software development portfolio and my content creation projects.
</p>
<hr class="my-2" />
<h2 class="font-bold text-xl">Where are you from? What languages do you speak?</h2>
<p>
I'm born and raised in Malaysia, studying in Australia. I speak English, Mandarin Chinese, and some Malay. I can read both traditional and simplified Chinese characters.
</p>
<hr class="my-2" />
<!-- How to pronounce? -->
<h2 class="font-bold text-xl">How to pronounce your username?</h2>
<p>
Try to pronounce Python, and then replace the "Py" with "Ry". You can also call me "Ry" or "Ryan" if you prefer.
</p>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">What is a coworking stream?</h2>
<p>
That question is answered <a target="_blank"
class="text-blue-400 underline"
href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams">here</a>.
</p>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">Why are you muted? Why aren't you reading chat?</h2>
<p>
During work time, I am muted and not reading chat to focus on my work. I will try to catch up on chat during break time.
</p>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">Is that a keychron?</h2>
<p>
No. It's an Epomaker GK64x modded with black switches.
</p>
<hr class="my-2" />
</div>
</Card>
</div>
<style>
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>
</Layout>

View file

@ -5,8 +5,8 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
--- ---
<Layout title="Projects" description="View what projects RythonDev has made"> <Layout title="Projects" description="View what projects RythonDev has made">
<NavBar /> <NavBar />
<div id="what-i-do" class="mt-10 pb-20"> <div id="what-i-do" class="mt-10 pb-20">
<ProjectsComponent /> <ProjectsComponent />
</div> </div>
</Layout> </Layout>

View file

@ -452,7 +452,7 @@ import Layout from "../layouts/Layout.astro";
</svg> </svg>
<div> <div>
<h2 class="font-bold text-xl">Location</h2> <h2 class="font-bold text-xl">Location</h2>
<p class="text-[#ccc]">Asia, Malaysia</p> <p class="text-[#ccc]">Melbourne, Australia</p>
</div> </div>
</div> </div>
<div <div
@ -845,7 +845,7 @@ import Layout from "../layouts/Layout.astro";
} }
</style> </style>
<script is:inline> <script is:inline>
const MY_TIMEZONE = "Asia/Kuala_Lumpur"; const MY_TIMEZONE = "Australia/Melbourne";
document.getElementById("cards").onmousemove = (e) => { document.getElementById("cards").onmousemove = (e) => {
for (const card of document.getElementsByClassName("social-card")) { for (const card of document.getElementsByClassName("social-card")) {
const rect = card.getBoundingClientRect(), const rect = card.getBoundingClientRect(),
@ -930,7 +930,7 @@ import Layout from "../layouts/Layout.astro";
setInterval(() => { setInterval(() => {
time = new Date().toLocaleTimeString("en-UK", { time = new Date().toLocaleTimeString("en-UK", {
timeZone: "Asia/Kuala_Lumpur", timeZone: MY_TIMEZONE,
hour: "numeric", hour: "numeric",
minute: "numeric", minute: "numeric",
hour12: true, hour12: true,

View file

@ -7,202 +7,202 @@ import Line from "../components/elements/NetworkLine.astro";
--- ---
<Layout <Layout
title="What I Do" title="What I Do"
description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation" description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
> >
<NavBar /> <NavBar />
<div id="what-i-do" class="mt-10 pt-20 pb-20"> <div id="what-i-do" class="mt-10 pt-20 pb-20">
<WhatIDoComponent /> <WhatIDoComponent />
<div class="mx-auto w-[90%] md:w-[750px] mt-20"> <div class="mx-auto w-[90%] md:w-[750px] mt-20">
<Card primaryColor="#19a7ce"> <Card primaryColor="#19a7ce">
<div class="card-content"> <div class="card-content">
<h2 <h2
id="web-dev" id="web-dev"
class="font-bold text-2xl animate-gradient" class="font-bold text-2xl animate-gradient"
> >
Web Development Web Development
</h2> </h2>
<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 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,
and special attention to detail, I weave your unique and special attention to detail, I weave your unique
narrative into every strand of your website. narrative into every strand of your website.
</p> </p>
</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 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
functionality, and data-driven optimization, I functionality, and data-driven optimization, I
transform complex ideas into elegant tools that transform complex ideas into elegant tools that
seamlessly integrate into your ecosystem. seamlessly integrate into your ecosystem.
</p> </p>
</div> </div>
<div> <div>
<h3 class="font-bold text-xl">Widgets</h3> <h3 class="font-bold text-xl">Widgets</h3>
<p class="mt-1 text-left"> <p class="mt-1 text-left">
Leveraging my web development skills, I built stream Leveraging my web development skills, I built stream
widgets to level up 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
from pomodoro timers to to-do lists! from pomodoro timers to to-do lists!
</p> </p>
</div> </div>
</div> </div>
</Card> </Card>
<Line height="50px" /> <Line height="50px" />
<Card primaryColor="#a1eebd"> <Card primaryColor="#a1eebd">
<div class="card-content"> <div class="card-content">
<h2 <h2
id="data-science" id="data-science"
class="font-bold text-2xl animate-gradient" class="font-bold text-2xl animate-gradient"
> >
Data Science Data Science
</h2> </h2>
<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"> <h3 class="font-bold text-xl">
Data Analysis and Visualization Data Analysis and Visualization
</h3> </h3>
<p class="mt-1 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
narratives that turn dry statistics into captivating narratives that turn dry statistics into captivating
stories using Python and R. stories using Python and R.
</p> </p>
</div> </div>
<div class="mb-5"> <div class="mb-5">
<h3 class="font-bold text-xl"> <h3 class="font-bold text-xl">
Statistics and Probability Statistics and Probability
</h3> </h3>
<p class="mt-1 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
only through these powerful tools that we can only through these powerful tools that we can
transform it into meaningful insights and actionable transform it into meaningful insights and actionable
intelligence. intelligence.
</p> </p>
</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 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
code to solve problems beyond human capabilities. code to solve problems beyond human capabilities.
</p> </p>
</div> </div>
</div> </div>
</Card> </Card>
<Line height="50px" /> <Line height="50px" />
<Card primaryColor="#9D76C1"> <Card primaryColor="#9D76C1">
<div class="card-content"> <div class="card-content">
<h2 <h2
id="content-creation" id="content-creation"
class="font-bold text-2xl animate-gradient" class="font-bold text-2xl animate-gradient"
> >
Content Creation Content Creation
</h2> </h2>
<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 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
and the ability to entertain and engage with viewers and the ability to entertain and engage with viewers
in real time. in real time.
</p> </p>
</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 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
translate your ideas into compelling videos that translate your ideas into compelling videos that
resonate with your audience. resonate with your audience.
</p> </p>
</div> </div>
<div> <div>
<h3 class="font-bold text-xl">Personality</h3> <h3 class="font-bold text-xl">Personality</h3>
<p class="mt-1 text-left"> <p class="mt-1 text-left">
I believe content should be an adventure, not a I believe content should be an adventure, not a
formula. my 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
emotional moments. It's messy, it's exhilarating, emotional moments. It's messy, it's exhilarating,
and it's uniquely me. and it's uniquely me.
</p> </p>
</div> </div>
</div> </div>
</Card> </Card>
</div> </div>
</div> </div>
</Layout> </Layout>
<style> <style>
.card-content { .card-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-image: radial-gradient( background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px,
transparent 1px transparent 1px
); );
background-position: 50% 50%; background-position: 50% 50%;
background-size: 1.1rem 1.1rem; background-size: 1.1rem 1.1rem;
padding: 2rem 2rem; border-radius: 1.25rem;
border-radius: 1.25rem; padding: 2rem;
overflow: hidden; overflow: hidden;
} }
#web-dev { #web-dev {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
#afd3e2 0%, #afd3e2 0%,
#19a7ce 45%, #19a7ce 45%,
#a5d7e8 100% #a5d7e8 100%
); );
background-size: 300%; background-size: 300%;
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
#data-science { #data-science {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
#a1eebd 0%, #a1eebd 0%,
#7bd3ea 45%, #7bd3ea 45%,
#f6f7c4 100% #f6f7c4 100%
); );
background-size: 300%; background-size: 300%;
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
#content-creation { #content-creation {
background: linear-gradient(90deg, #9d76c1 40%, #ff6868 90%); background: linear-gradient(90deg, #9d76c1 40%, #ff6868 90%);
background-size: 300%; background-size: 300%;
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
</style> </style>