From 6f05d793bd6d354c8cea788a9e2c9452d0a3a73c Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sat, 29 Jun 2024 23:10:51 +1000
Subject: [PATCH] updated socials, added faq

---
 .../sections/ExperienceComponent.astro        |  34 +-
 src/pages/discord.astro                       |   6 +-
 src/pages/faq.astro                           |  76 ++++
 src/pages/projects.astro                      |   8 +-
 src/pages/socials.astro                       |   6 +-
 src/pages/what-i-do.astro                     | 362 +++++++++---------
 6 files changed, 287 insertions(+), 205 deletions(-)
 create mode 100644 src/pages/faq.astro

diff --git a/src/components/sections/ExperienceComponent.astro b/src/components/sections/ExperienceComponent.astro
index 4d05246..e23a3f9 100644
--- a/src/components/sections/ExperienceComponent.astro
+++ b/src/components/sections/ExperienceComponent.astro
@@ -14,23 +14,29 @@ import Line from "../elements/NetworkLine.astro";
 							Frontend Web Developer Intern
 						</h2>
 						<h3 class="font-bold">@ Studio20 Malaysia</h3>
-						<h3>Jan - April 2024</h3>
+						<h3>Jan 2024 - April 2024</h3>
 					</div>
 					<hr class="w-full mb-3" />
 					<p class="mb-3">
-						During my internship, I learnt how to do WordPress and
-						further enhanced my skills in PHP. I also learnt how to
-						closely work with UI/UX designers and pay close
-						attention to details with the design I am given.
+						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>
-					<ul class="list-disc list-inside">
-						<li>WordPress & PHP</li>
-						<li>NextJS</li>
-						<li>Typescript</li>
-						<li>TailwindCSS</li>
-						<li>Adobe XD</li>
-					</ul>
+					<div
+						class="flex flex-col md:flex-row justify-start items-start gap-0 md:gap-10"
+					>
+						<ul class="list-disc list-inside">
+							<li>WordPress & PHP</li>
+							<li>Typescript</li>
+							<li>TailwindCSS</li>
+						</ul>
+						<ul class="list-disc list-inside">
+							<li>Adobe XD</li>
+							<li>NextJS & React</li>
+						</ul>
+					</div>
 				</div>
 			</Card>
 			<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="flex flex-col justify-start w-full mb-3 gap-1">
 						<h2 class="font-bold text-xl">
-							Diploma in Computer Science
-						</h2><h3>Jan 2022 - 2024</h3>
+							Diploma in Computer Science student
+						</h2><h3>Jan 2022 - June 2024</h3>
 					</div>
 					<hr class="w-full mb-3" />
 					<h3 class="mb-1 font-bold text-lg">Achievements</h3>
diff --git a/src/pages/discord.astro b/src/pages/discord.astro
index 4a6b393..3a49f29 100644
--- a/src/pages/discord.astro
+++ b/src/pages/discord.astro
@@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="Discord" description="Join Ryan's Discord server!">
-    <script is:inline>
-        window.location.href = " https://discord.gg/UnHyHkhbga";
-    </script>
+	<script is:inline>
+		window.location.href = " https://discord.gg/UnHyHkhbga";
+	</script>
 </Layout>
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
new file mode 100644
index 0000000..c6850f1
--- /dev/null
+++ b/src/pages/faq.astro
@@ -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>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index a222d95..ce5d6f8 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -5,8 +5,8 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
 ---
 
 <Layout title="Projects" description="View what projects RythonDev has made">
-    <NavBar />
-    <div id="what-i-do" class="mt-10 pb-20">
-        <ProjectsComponent />
-    </div>
+	<NavBar />
+	<div id="what-i-do" class="mt-10 pb-20">
+		<ProjectsComponent />
+	</div>
 </Layout>
diff --git a/src/pages/socials.astro b/src/pages/socials.astro
index 8e2edbf..b025103 100644
--- a/src/pages/socials.astro
+++ b/src/pages/socials.astro
@@ -452,7 +452,7 @@ import Layout from "../layouts/Layout.astro";
 							</svg>
 							<div>
 								<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
@@ -845,7 +845,7 @@ import Layout from "../layouts/Layout.astro";
 	}
 </style>
 <script is:inline>
-	const MY_TIMEZONE = "Asia/Kuala_Lumpur";
+	const MY_TIMEZONE = "Australia/Melbourne";
 	document.getElementById("cards").onmousemove = (e) => {
 		for (const card of document.getElementsByClassName("social-card")) {
 			const rect = card.getBoundingClientRect(),
@@ -930,7 +930,7 @@ import Layout from "../layouts/Layout.astro";
 
 	setInterval(() => {
 		time = new Date().toLocaleTimeString("en-UK", {
-			timeZone: "Asia/Kuala_Lumpur",
+			timeZone: MY_TIMEZONE,
 			hour: "numeric",
 			minute: "numeric",
 			hour12: true,
diff --git a/src/pages/what-i-do.astro b/src/pages/what-i-do.astro
index cee08cd..1f59da2 100644
--- a/src/pages/what-i-do.astro
+++ b/src/pages/what-i-do.astro
@@ -7,202 +7,202 @@ import Line from "../components/elements/NetworkLine.astro";
 ---
 
 <Layout
-    title="What I Do"
-    description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
+	title="What I Do"
+	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">
-        <WhatIDoComponent />
+	<NavBar />
+	<div id="what-i-do" class="mt-10 pt-20 pb-20">
+		<WhatIDoComponent />
 
-        <div class="mx-auto w-[90%] md:w-[750px] mt-20">
-            <Card primaryColor="#19a7ce">
-                <div class="card-content">
-                    <h2
-                        id="web-dev"
-                        class="font-bold text-2xl animate-gradient"
-                    >
-                        Web Development
-                    </h2>
-                    <hr class="w-full mb-3 mt-3" />
-                    <div class="mb-5">
-                        <h3 class="font-bold text-xl">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.
-                            Through custom designs, intuitive user experiences,
-                            and special attention to detail, I weave your unique
-                            narrative into every strand of your website.
-                        </p>
-                    </div>
-                    <div class="mb-5">
-                        <h3 class="font-bold text-xl">Web Apps</h3>
-                        <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
-                            functionality, and data-driven optimization, I
-                            transform complex ideas into elegant tools that
-                            seamlessly integrate into your ecosystem.
-                        </p>
-                    </div>
-                    <div>
-                        <h3 class="font-bold text-xl">Widgets</h3>
-                        <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
-                            from pomodoro timers to to-do lists!
-                        </p>
-                    </div>
-                </div>
-            </Card>
-            <Line height="50px" />
-            <Card primaryColor="#a1eebd">
-                <div class="card-content">
-                    <h2
-                        id="data-science"
-                        class="font-bold text-2xl animate-gradient"
-                    >
-                        Data Science
-                    </h2>
-                    <hr class="w-full mb-3 mt-3" />
-                    <div class="mb-5">
-                        <h3 class="font-bold text-xl">
-                            Data Analysis and Visualization
-                        </h3>
-                        <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
-                            narratives that turn dry statistics into captivating
-                            stories using Python and R.
-                        </p>
-                    </div>
-                    <div class="mb-5">
-                        <h3 class="font-bold text-xl">
-                            Statistics and Probability
-                        </h3>
-                        <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
-                            only through these powerful tools that we can
-                            transform it into meaningful insights and actionable
-                            intelligence.
-                        </p>
-                    </div>
-                    <div>
-                        <h3 class="font-bold text-xl">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
-                            boundaries of what's possible, collaborating with
-                            code to solve problems beyond human capabilities.
-                        </p>
-                    </div>
-                </div>
-            </Card>
-            <Line height="50px" />
-            <Card primaryColor="#9D76C1">
-                <div class="card-content">
-                    <h2
-                        id="content-creation"
-                        class="font-bold text-2xl animate-gradient"
-                    >
-                        Content Creation
-                    </h2>
-                    <hr class="w-full mb-3 mt-3" />
-                    <div class="mb-5">
-                        <h3 class="font-bold text-xl">Streaming</h3>
-                        <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
-                            and the ability to entertain and engage with viewers
-                            in real time.
-                        </p>
-                    </div>
-                    <div class="mb-5">
-                        <h3 class="font-bold text-xl">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
-                            reality. I'll learn, adapt, and work tirelessly to
-                            translate your ideas into compelling videos that
-                            resonate with your audience.
-                        </p>
-                    </div>
-                    <div>
-                        <h3 class="font-bold text-xl">Personality</h3>
-                        <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
-                            emotional moments. It's messy, it's exhilarating,
-                            and it's uniquely me.
-                        </p>
-                    </div>
-                </div>
-            </Card>
-        </div>
-    </div>
+		<div class="mx-auto w-[90%] md:w-[750px] mt-20">
+			<Card primaryColor="#19a7ce">
+				<div class="card-content">
+					<h2
+						id="web-dev"
+						class="font-bold text-2xl animate-gradient"
+					>
+						Web Development
+					</h2>
+					<hr class="w-full mb-3 mt-3" />
+					<div class="mb-5">
+						<h3 class="font-bold text-xl">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.
+							Through custom designs, intuitive user experiences,
+							and special attention to detail, I weave your unique
+							narrative into every strand of your website.
+						</p>
+					</div>
+					<div class="mb-5">
+						<h3 class="font-bold text-xl">Web Apps</h3>
+						<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
+							functionality, and data-driven optimization, I
+							transform complex ideas into elegant tools that
+							seamlessly integrate into your ecosystem.
+						</p>
+					</div>
+					<div>
+						<h3 class="font-bold text-xl">Widgets</h3>
+						<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
+							from pomodoro timers to to-do lists!
+						</p>
+					</div>
+				</div>
+			</Card>
+			<Line height="50px" />
+			<Card primaryColor="#a1eebd">
+				<div class="card-content">
+					<h2
+						id="data-science"
+						class="font-bold text-2xl animate-gradient"
+					>
+						Data Science
+					</h2>
+					<hr class="w-full mb-3 mt-3" />
+					<div class="mb-5">
+						<h3 class="font-bold text-xl">
+							Data Analysis and Visualization
+						</h3>
+						<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
+							narratives that turn dry statistics into captivating
+							stories using Python and R.
+						</p>
+					</div>
+					<div class="mb-5">
+						<h3 class="font-bold text-xl">
+							Statistics and Probability
+						</h3>
+						<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
+							only through these powerful tools that we can
+							transform it into meaningful insights and actionable
+							intelligence.
+						</p>
+					</div>
+					<div>
+						<h3 class="font-bold text-xl">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
+							boundaries of what's possible, collaborating with
+							code to solve problems beyond human capabilities.
+						</p>
+					</div>
+				</div>
+			</Card>
+			<Line height="50px" />
+			<Card primaryColor="#9D76C1">
+				<div class="card-content">
+					<h2
+						id="content-creation"
+						class="font-bold text-2xl animate-gradient"
+					>
+						Content Creation
+					</h2>
+					<hr class="w-full mb-3 mt-3" />
+					<div class="mb-5">
+						<h3 class="font-bold text-xl">Streaming</h3>
+						<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
+							and the ability to entertain and engage with viewers
+							in real time.
+						</p>
+					</div>
+					<div class="mb-5">
+						<h3 class="font-bold text-xl">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
+							reality. I'll learn, adapt, and work tirelessly to
+							translate your ideas into compelling videos that
+							resonate with your audience.
+						</p>
+					</div>
+					<div>
+						<h3 class="font-bold text-xl">Personality</h3>
+						<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
+							emotional moments. It's messy, it's exhilarating,
+							and it's uniquely me.
+						</p>
+					</div>
+				</div>
+			</Card>
+		</div>
+	</div>
 </Layout>
 
 <style>
-    .card-content {
-        display: flex;
-        flex-direction: column;
-        background-image: radial-gradient(
-            rgba(255, 255, 255, 0.1) 1px,
-            transparent 1px
-        );
-        background-position: 50% 50%;
-        background-size: 1.1rem 1.1rem;
-        padding: 2rem 2rem;
-        border-radius: 1.25rem;
-        overflow: hidden;
-    }
+	.card-content {
+		display: flex;
+		flex-direction: column;
+		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;
+		padding: 2rem;
+		overflow: hidden;
+	}
 
-    #web-dev {
-        background: linear-gradient(
-            90deg,
-            #afd3e2 0%,
-            #19a7ce 45%,
-            #a5d7e8 100%
-        );
+	#web-dev {
+		background: linear-gradient(
+			90deg,
+			#afd3e2 0%,
+			#19a7ce 45%,
+			#a5d7e8 100%
+		);
 
-        background-size: 300%;
+		background-size: 300%;
 
-        background-clip: text;
-        -webkit-background-clip: text;
+		background-clip: text;
+		-webkit-background-clip: text;
 
-        -webkit-text-fill-color: transparent;
-    }
+		-webkit-text-fill-color: transparent;
+	}
 
-    #data-science {
-        background: linear-gradient(
-            90deg,
-            #a1eebd 0%,
-            #7bd3ea 45%,
-            #f6f7c4 100%
-        );
+	#data-science {
+		background: linear-gradient(
+			90deg,
+			#a1eebd 0%,
+			#7bd3ea 45%,
+			#f6f7c4 100%
+		);
 
-        background-size: 300%;
+		background-size: 300%;
 
-        background-clip: text;
-        -webkit-background-clip: text;
+		background-clip: text;
+		-webkit-background-clip: text;
 
-        -webkit-text-fill-color: transparent;
-    }
+		-webkit-text-fill-color: transparent;
+	}
 
-    #content-creation {
-        background: linear-gradient(90deg, #9d76c1 40%, #ff6868 90%);
+	#content-creation {
+		background: linear-gradient(90deg, #9d76c1 40%, #ff6868 90%);
 
-        background-size: 300%;
+		background-size: 300%;
 
-        background-clip: text;
-        -webkit-background-clip: text;
+		background-clip: text;
+		-webkit-background-clip: text;
 
-        -webkit-text-fill-color: transparent;
-    }
+		-webkit-text-fill-color: transparent;
+	}
 </style>