From 7c38977b86b202a60707f8437cf56c8daf813026 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sat, 7 Jun 2025 10:33:57 +1000
Subject: [PATCH] updated code

---
 astro.config.mjs                              |   6 +-
 package-lock.json                             |   5 +-
 package.json                                  |   1 -
 .../sections/ExperienceComponent.astro        |  58 +++++-----
 src/components/sections/IntroComponent.svelte |  16 +--
 src/components/sections/MoreExperience.astro  |  71 +++++-------
 src/components/sections/MoreSkills.astro      |  30 +----
 .../sections/WhatIDoComponent.astro           | 108 ++++++++----------
 src/pages/contact.astro                       |  76 +++++-------
 src/pages/what-i-do.astro                     |  28 ++---
 10 files changed, 152 insertions(+), 247 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 4a5144f..c0187e4 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,14 +1,14 @@
 import { defineConfig, passthroughImageService } from "astro/config";
 
-import svelte from "@astrojs/svelte";
-
 import mdx from "@astrojs/mdx";
 
 import tailwindcss from "@tailwindcss/vite";
 
+import svelte from "@astrojs/svelte";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [svelte(), mdx()],
+  integrations: [mdx(), svelte()],
 
   server: {
       port: 8008,
diff --git a/package-lock.json b/package-lock.json
index 9b147f1..b0a53c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,6 @@
                 "typescript": "^5.8.3"
             },
             "devDependencies": {
-                "@sveltejs/vite-plugin-svelte": "^5.1.0",
                 "prettier": "^3.5.3",
                 "prettier-plugin-astro": "^0.14.1",
                 "prettier-plugin-svelte": "^3.4.0",
@@ -1094,6 +1093,8 @@
         },
         "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
             "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
+            "integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
             "license": "MIT",
             "dependencies": {
                 "debug": "^4.3.7"
@@ -2040,6 +2041,8 @@
         },
         "node_modules/deepmerge": {
             "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+            "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
diff --git a/package.json b/package.json
index e9082eb..8213c18 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
         "typescript": "^5.8.3"
     },
     "devDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^5.1.0",
         "prettier": "^3.5.3",
         "prettier-plugin-astro": "^0.14.1",
         "prettier-plugin-svelte": "^3.4.0",
diff --git a/src/components/sections/ExperienceComponent.astro b/src/components/sections/ExperienceComponent.astro
index 4d4cc32..611498a 100644
--- a/src/components/sections/ExperienceComponent.astro
+++ b/src/components/sections/ExperienceComponent.astro
@@ -7,6 +7,31 @@ import Line from "../elements/NetworkLine.astro";
 	<h1 class="text-center text-5xl">Experience</h1>
 	<div class="flex flex-col items-center pt-10">
 		<div class="w-[90%] md:w-[600px]">
+			<Card primaryColor="#F6DFD8">
+				<div class="px-4 py-4 md:px-8 md:py-8">
+					<div class="mb-3 flex w-full flex-col justify-start gap-1">
+						<h2 class="text-xl font-bold">Full Stack Developer</h2>
+						<h3 class="font-bold">@ JW BizTech</h3>
+						<h3>Dec 2024 - Present</h3>
+					</div>
+					<hr class="mb-3 w-full" />
+					<p class="mb-3">
+						Led implementation of frontend technology stack for
+						websites. Worked closely with UI/UX designers to
+						translate designs into code, and integrate smoothly with
+						CMS. Performing research and development for backend
+						projects.
+					</p>
+					<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
+
+					<ul class="list-inside list-disc">
+						<li>Astro</li>
+						<li>Typescript</li>
+						<li>TailwindCSS</li>
+					</ul>
+				</div>
+			</Card>
+			<Line height="50px" />
 			<Card primaryColor="#F6DFD8">
 				<div class="px-4 py-4 md:px-8 md:py-8">
 					<div class="mb-3 flex w-full flex-col justify-start gap-1">
@@ -37,32 +62,7 @@ import Line from "../elements/NetworkLine.astro";
 					</div>
 				</div>
 			</Card>
-			<Line height="50px" />
-			<Card primaryColor="#F6DFD8">
-				<div class="px-4 py-4 md:px-8 md:py-8">
-					<div class="mb-3 flex w-full flex-col justify-start gap-1">
-						<h2 class="text-xl font-bold">
-							Lead Full Stack Developer
-						</h2>
-						<h3 class="font-bold">@ JW BizTech</h3>
-						<h3>Dec 2024 - Present</h3>
-					</div>
-					<hr class="mb-3 w-full" />
-					<p class="mb-3">
-						Led implementation of frontend technology stack for
-						websites. Worked closely with UI/UX designers to
-						translate designs into code, and with backend developers
-						to ensure smooth integration with CMS.
-					</p>
-					<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
 
-					<ul class="list-inside list-disc">
-						<li>Astro</li>
-						<li>Typescript</li>
-						<li>TailwindCSS</li>
-					</ul>
-				</div>
-			</Card>
 			<Line height="50px" />
 			<Card primaryColor="#F6DFD8">
 				<div class="px-4 py-4 md:px-8 md:py-8">
@@ -74,10 +74,10 @@ import Line from "../elements/NetworkLine.astro";
 					</div>
 					<hr class="mb-3 w-full" />
 					<p class="mb-3">
-						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.
+						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 text-lg font-bold">Relevant skills:</h3>
 					<div
diff --git a/src/components/sections/IntroComponent.svelte b/src/components/sections/IntroComponent.svelte
index b212fe0..4adec1e 100644
--- a/src/components/sections/IntroComponent.svelte
+++ b/src/components/sections/IntroComponent.svelte
@@ -107,7 +107,7 @@
         h-fit
         flex-col text-white"
 >
-    <div class="card-content w-full px-5 pt-10 pb-2 lg:px-10">
+    <div class="w-full px-5 pt-10 pb-2 lg:px-10">
         <div class="flex h-20 flex-row">
             <div class="mr-1 flex w-20 items-center justify-center">
                 <img
@@ -165,20 +165,6 @@
 </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;
-    }
-
     #name {
         background: linear-gradient(
             90deg,
diff --git a/src/components/sections/MoreExperience.astro b/src/components/sections/MoreExperience.astro
index 86d056e..d1c1dc3 100644
--- a/src/components/sections/MoreExperience.astro
+++ b/src/components/sections/MoreExperience.astro
@@ -4,47 +4,32 @@ import Line from "../elements/NetworkLine.astro";
 ---
 
 <div id="Experience" class="h-fit">
-    <div class="flex flex-col items-center">
-        <div class="w-[90%] md:w-[600px]">
-            <Line height="50px" />
-            <Card primaryColor="#FFAC21">
-                <div class="card-content px-4 py-4 md:px-8 md:py-8">
-                    <div class="mb-3 flex w-full flex-col justify-start gap-1">
-                        <h2 class="text-xl font-bold">
-                            Diploma in Computer Science student
-                        </h2>
-                        <h3 class="font-bold">
-                            @ Methodist College Kuala Lumpur
-                        </h3>
-                        <h3>Jan 2022 - June 2024</h3>
-                    </div>
-                    <hr class="mb-3 w-full" />
-                    <h3 class="mb-1 text-lg font-bold">Achievements</h3>
-                    <ul class="list-inside list-disc">
-                        <li>
-                            4-time Dean's List Award recipient (&gt;3.5 GPA)
-                        </li>
-                        <li>3.8 CGPA</li>
-                        <li>President of Computer Programming Club</li>
-                        <li>Vice President of Diploma Union</li>
-                    </ul>
-                </div>
-            </Card>
-        </div>
-    </div>
+	<div class="flex flex-col items-center">
+		<div class="w-[90%] md:w-[600px]">
+			<Line height="50px" />
+			<Card primaryColor="#FFAC21">
+				<div class="px-4 py-4 md:px-8 md:py-8">
+					<div class="mb-3 flex w-full flex-col justify-start gap-1">
+						<h2 class="text-xl font-bold">
+							Diploma in Computer Science student
+						</h2>
+						<h3 class="font-bold">
+							@ Methodist College Kuala Lumpur
+						</h3>
+						<h3>Jan 2022 - June 2024</h3>
+					</div>
+					<hr class="mb-3 w-full" />
+					<h3 class="mb-1 text-lg font-bold">Achievements</h3>
+					<ul class="list-inside list-disc">
+						<li>
+							4-time Dean's List Award recipient (&gt;3.5 GPA)
+						</li>
+						<li>3.8 CGPA</li>
+						<li>President of Computer Programming Club</li>
+						<li>Vice President of Diploma Union</li>
+					</ul>
+				</div>
+			</Card>
+		</div>
+	</div>
 </div>
-
-<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;
-        border-radius: 1.25rem;
-        overflow: hidden;
-    }
-</style>
diff --git a/src/components/sections/MoreSkills.astro b/src/components/sections/MoreSkills.astro
index cc38bb8..6e8b536 100644
--- a/src/components/sections/MoreSkills.astro
+++ b/src/components/sections/MoreSkills.astro
@@ -9,11 +9,11 @@ import Line from "../elements/NetworkLine.astro";
 			<Line height="50px" />
 			<div class="mx-auto w-[90%] md:w-[600px]">
 				<Card primaryColor="#9D76C1">
-					<div class="card-content">
+					<div class="px-8 py-8">
 						<div class="justify-left flex w-full flex-col">
 							<h2 class="text-2xl font-bold">Content Creation</h2>
 						</div>
-						<hr class="w-full" />
+						<hr class="my-5 w-full" />
 						<p class="text-left">
 							Since I was little, I loved watching YouTube videos
 							and the idea of bringing joy and laughter to a wider
@@ -55,13 +55,13 @@ import Line from "../elements/NetworkLine.astro";
 			<Line height="50px" />
 			<div class="mx-auto w-[90%] md:w-[600px]">
 				<Card primaryColor="#9D76C1">
-					<div class="card-content">
+					<div class="px-8 py-8">
 						<div class="justify-left flex w-full flex-col">
 							<h2 class="text-2xl font-bold">
 								Mobile Development
 							</h2>
 						</div>
-						<hr class="w-full" />
+						<hr class="my-5 w-full" />
 						<p class="text-left">
 							In my Mobile App Development unit in University, I
 							am tasked to develop Android apps using Android
@@ -77,7 +77,7 @@ import Line from "../elements/NetworkLine.astro";
 							potential.
 						</p>
 						<div
-							class="flex w-full flex-row flex-wrap justify-start"
+							class="mt-5 flex w-full flex-row flex-wrap justify-start"
 						>
 							<div
 								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#106539] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#106539] hover:text-white md:bg-gray-500"
@@ -101,23 +101,3 @@ import Line from "../elements/NetworkLine.astro";
 		</div>
 	</div>
 </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;
-		padding-top: 2rem;
-		padding-left: 2rem;
-		padding-right: 2rem;
-		padding-bottom: 0.5rem;
-		border-radius: 1.25rem;
-		overflow: hidden;
-	}
-</style>
diff --git a/src/components/sections/WhatIDoComponent.astro b/src/components/sections/WhatIDoComponent.astro
index a0ce981..e40343d 100644
--- a/src/components/sections/WhatIDoComponent.astro
+++ b/src/components/sections/WhatIDoComponent.astro
@@ -3,69 +3,51 @@ import Card from "../elements/Card.astro";
 ---
 
 <div class="flex w-full flex-col items-center justify-center">
-    <div
-        class="flex h-fit w-full max-w-[1440px] flex-col items-center justify-center"
-    >
-        <h1 class="mb-10 text-center text-5xl">What I Do</h1>
-        <div
-            class="grid w-[90%] grid-cols-1 place-content-center justify-center gap-5 sm:w-[350px] lg:w-[90%] lg:grid-cols-3 xl:w-4/5 xl:gap-12"
-        >
-            <Card primaryColor="#19a7ce" scaleOnHover={true}>
-                <div class="card-content">
-                    <h2 class="text-center text-xl font-bold">
-                        Web Development
-                    </h2>
-                    <hr class="w-full" />
-                    <p class="text-balance text-center">
-                        Bringing ideas to life on the web is my passion. I enjoy
-                        bringing my imagination to life through web development.
-                    </p>
-                </div>
-            </Card>
+	<div
+		class="flex h-fit w-full max-w-[1440px] flex-col items-center justify-center"
+	>
+		<h1 class="mb-10 text-center text-5xl">What I Do</h1>
+		<div
+			class="grid w-[90%] grid-cols-1 place-content-center justify-center gap-5 sm:w-[350px] lg:w-[90%] lg:grid-cols-3 xl:w-4/5 xl:gap-12"
+		>
+			<Card primaryColor="#19a7ce" scaleOnHover={true}>
+				<div class="px-8 py-8">
+					<h2 class="text-center text-xl font-bold">
+						Web Development
+					</h2>
+					<hr class="my-5 w-full" />
+					<p class="text-center text-balance">
+						Bringing ideas to life on the web is my passion. I enjoy
+						bringing my imagination to life through web development.
+					</p>
+				</div>
+			</Card>
 
-            <Card primaryColor="#a1eebd" scaleOnHover={true}>
-                <div class="card-content">
-                    <h2 class="text-center text-xl font-bold">Data Science</h2>
-                    <hr class="w-full" />
-                    <p class="text-balance text-center">
-                        Using data to make decisions is a powerful tool. I am
-                        experienced in analyzing data and making decisions based
-                        on data.
-                    </p>
-                </div>
-            </Card>
+			<Card primaryColor="#a1eebd" scaleOnHover={true}>
+				<div class="px-8 py-8">
+					<h2 class="text-center text-xl font-bold">Data Science</h2>
+					<hr class="my-5 w-full" />
+					<p class="text-center text-balance">
+						Using data to make decisions is a powerful tool. I am
+						experienced in analyzing data and making decisions based
+						on data.
+					</p>
+				</div>
+			</Card>
 
-            <Card primaryColor="#9D76C1" scaleOnHover={true}>
-                <div class="card-content">
-                    <h2 class="text-center text-xl font-bold">
-                        Content Creation
-                    </h2>
-                    <hr class="w-full" />
-                    <p class="text-balance text-center">
-                        Everyone has something to give, or something to share. I
-                        produce content around productivity and software
-                        development.
-                    </p>
-                </div>
-            </Card>
-        </div>
-    </div>
+			<Card primaryColor="#9D76C1" scaleOnHover={true}>
+				<div class="px-8 py-8">
+					<h2 class="text-center text-xl font-bold">
+						Content Creation
+					</h2>
+					<hr class="my-5 w-full" />
+					<p class="text-center text-balance">
+						Everyone has something to give, or something to share. I
+						produce content around productivity and software
+						development.
+					</p>
+				</div>
+			</Card>
+		</div>
+	</div>
 </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;
-        padding: 2rem 2rem;
-        border-radius: 1.25rem;
-        overflow: hidden;
-        min-width: 210px;
-    }
-</style>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index d4cfc5f..e6aa029 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -7,51 +7,35 @@ import Footer from "../components/sections/FooterComponent.astro";
 ---
 
 <Layout
-    title="Contact"
-    description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
+	title="Contact"
+	description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
 >
-    <NavBar />
-    <div id="contact-component" class="mt-10 pt-20">
-        <h1 class="text-center text-5xl">Contact</h1>
-        <div class="mt-10 flex items-center justify-center">
-            <div class="w-[90%] md:w-[600px]">
-                <Card primaryColor="#40A2D8">
-                    <div class="card-content">
-                        <div class="justify-left mb-3 flex w-full flex-col">
-                            <h2
-                                class="text-balance text-center text-xl font-bold"
-                            >
-                                Looking for a young developer with fresh ideas?
-                            </h2>
-                        </div>
-                        <hr class="mb-3 w-full" />
-                        <div class="text-balance text-center">
-                            Whether it's sponsorships or collaboration
-                            opportunities, hit me up!
-                        </div>
-                    </div>
-                </Card>
-            </div>
-        </div>
-        <div class="mt-10">
-            <ContactComponent />
-        </div>
-    </div>
-    <Footer />
+	<NavBar />
+	<div id="contact-component" class="mt-10 pt-20">
+		<h1 class="text-center text-5xl">Contact</h1>
+		<div class="mt-10 flex items-center justify-center">
+			<div class="w-[90%] md:w-[600px]">
+				<Card primaryColor="#40A2D8">
+					<div class="px-8 py-8">
+						<div class="justify-left mb-3 flex w-full flex-col">
+							<h2
+								class="text-center text-xl font-bold text-balance"
+							>
+								Looking for a young developer with fresh ideas?
+							</h2>
+						</div>
+						<hr class="my-5 w-full" />
+						<div class="text-center text-balance">
+							Whether it's sponsorships or collaboration
+							opportunities, hit me up!
+						</div>
+					</div>
+				</Card>
+			</div>
+		</div>
+		<div class="mt-10">
+			<ContactComponent />
+		</div>
+	</div>
+	<Footer />
 </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;
-    }
-</style>
diff --git a/src/pages/what-i-do.astro b/src/pages/what-i-do.astro
index d36654a..f26cef6 100644
--- a/src/pages/what-i-do.astro
+++ b/src/pages/what-i-do.astro
@@ -12,19 +12,19 @@ import Footer from "../components/sections/FooterComponent.astro";
 	description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
 >
 	<NavBar />
-	<div id="what-i-do" class="mt-10 pb-20 pt-20">
+	<div id="what-i-do" class="mt-10 pt-20 pb-20">
 		<WhatIDoComponent />
 
 		<div class="mx-auto mt-20 w-[90%] md:w-[750px]">
 			<Card primaryColor="#19a7ce">
-				<div class="card-content">
+				<div class="px-8 py-8">
 					<h2
 						id="web-dev"
 						class="animate-gradient text-2xl font-bold"
 					>
 						Web Development
 					</h2>
-					<hr class="mb-3 mt-3 w-full" />
+					<hr class="mt-3 mb-3 w-full" />
 					<div class="mb-5">
 						<h3 class="text-xl font-bold">Websites</h3>
 						<p class="mt-1 text-left">
@@ -57,14 +57,14 @@ import Footer from "../components/sections/FooterComponent.astro";
 			</Card>
 			<Line height="50px" />
 			<Card primaryColor="#a1eebd">
-				<div class="card-content">
+				<div class="px-8 py-8">
 					<h2
 						id="data-science"
 						class="animate-gradient text-2xl font-bold"
 					>
 						Data Science
 					</h2>
-					<hr class="mb-3 mt-3 w-full" />
+					<hr class="mt-3 mb-3 w-full" />
 					<div class="mb-5">
 						<h3 class="text-xl font-bold">
 							Data Analysis and Visualization
@@ -102,14 +102,14 @@ import Footer from "../components/sections/FooterComponent.astro";
 			</Card>
 			<Line height="50px" />
 			<Card primaryColor="#9D76C1">
-				<div class="card-content">
+				<div class="px-8 py-8">
 					<h2
 						id="content-creation"
 						class="animate-gradient text-2xl font-bold"
 					>
 						Content Creation
 					</h2>
-					<hr class="mb-3 mt-3 w-full" />
+					<hr class="mt-3 mb-3 w-full" />
 					<div class="mb-5">
 						<h3 class="text-xl font-bold">Streaming</h3>
 						<p class="mt-1 text-left">
@@ -148,20 +148,6 @@ import Footer from "../components/sections/FooterComponent.astro";
 </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;
-		border-radius: 1.25rem;
-		padding: 2rem;
-		overflow: hidden;
-	}
-
 	#web-dev {
 		background: linear-gradient(
 			90deg,