From 5095a79758abb0d306d2d69c30f86eccd661b3c4 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Fri, 6 Jun 2025 21:50:52 +1000
Subject: [PATCH] added colours to theme

---
 src/components/elements/Card.astro            | 134 ++++++++++--------
 .../sections/ExperienceComponent.astro        |  21 +--
 src/components/sections/IntroComponent.svelte |   2 +-
 .../sections/ProjectsComponent.astro          |  10 +-
 src/components/sections/SkillsComponent.astro |  84 +++++------
 src/styles/global.css                         |  24 +++-
 svelte.config.js                              |   2 +-
 7 files changed, 142 insertions(+), 135 deletions(-)

diff --git a/src/components/elements/Card.astro b/src/components/elements/Card.astro
index ef7b0d3..6da89e8 100644
--- a/src/components/elements/Card.astro
+++ b/src/components/elements/Card.astro
@@ -1,80 +1,94 @@
 ---
 interface Props {
-    primaryColor: string;
-    bgColor?: string;
-    scaleOnHover?: boolean;
-    pixelHeight?: string;
-    className?: string;
+	primaryColor: string;
+	bgColor?: string;
+	scaleOnHover?: boolean;
+	pixelHeight?: string;
+	className?: string;
 }
 
 const {
-    primaryColor,
-    bgColor = "#282828",
-    scaleOnHover = false,
-    pixelHeight = "70px",
-    className = "",
+	primaryColor,
+	bgColor = "#282828",
+	scaleOnHover = false,
+	pixelHeight = "70px",
+	className = "",
 } = Astro.props;
 ---
 
 <div class="card z-10" class:list={[{ scale: scaleOnHover }, className]}>
-    <slot />
+	<div class="card-content">
+		<slot />
+	</div>
 </div>
 
 <style define:vars={{ primaryColor, bgColor, pixelHeight }}>
-    * {
-        box-sizing: border-box;
-    }
+	* {
+		box-sizing: border-box;
+	}
 
-    h1,
-    h2,
-    h3,
-    p {
-        margin: 0rem;
-    }
+	h1,
+	h2,
+	h3,
+	p {
+		margin: 0rem;
+	}
 
-    .card {
-        height: inherit;
-        position: relative;
-        background-color: var(--bgColor);
-        border: 1px solid rgb(255 255 255 / 5%);
-        border-radius: 1.5rem;
-        padding: 0.5rem;
-        box-shadow: 0px 5px 5px 5px #141414;
-    }
+	.card {
+		height: inherit;
+		position: relative;
+		background-color: var(--bgColor);
+		border: 1px solid rgb(255 255 255 / 5%);
+		border-radius: 1.5rem;
+		padding: 0.5rem;
+		box-shadow: 0px 5px 5px 5px #141414;
+	}
 
-    .card:after {
-        content: "";
-        height: var(--pixelHeight);
-        width: 1px;
-        position: absolute;
-        left: -1px;
-        top: 65%;
-        transition: top, opacity;
-        transition-duration: 600ms;
-        transition-timing-function: ease;
-        background: linear-gradient(
-            transparent,
-            var(--primaryColor),
-            transparent
-        );
-        opacity: 0;
-    }
+	.card:after {
+		content: "";
+		height: var(--pixelHeight);
+		width: 1px;
+		position: absolute;
+		left: -1px;
+		top: 65%;
+		transition: top, opacity;
+		transition-duration: 600ms;
+		transition-timing-function: ease;
+		background: linear-gradient(
+			transparent,
+			var(--primaryColor),
+			transparent
+		);
+		opacity: 0;
+	}
 
-    .card:after {
-        top: 65%;
-        opacity: 0;
-    }
+	.card:after {
+		top: 65%;
+		opacity: 0;
+	}
 
-    .card:hover:after {
-        top: 25%;
-        opacity: 1;
-    }
+	.card:hover:after {
+		top: 25%;
+		opacity: 1;
+	}
 
-    .card.scale {
-        transition: transform 0.5s ease;
-    }
+	.card.scale {
+		transition: transform 0.5s ease;
+	}
 
-    .card.scale:hover {
-        transform: scale(1.05);
-    }
+	.card.scale:hover {
+		transform: scale(1.05);
+	}
+
+	.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;
+	}
 </style>
diff --git a/src/components/sections/ExperienceComponent.astro b/src/components/sections/ExperienceComponent.astro
index 0f76169..4d4cc32 100644
--- a/src/components/sections/ExperienceComponent.astro
+++ b/src/components/sections/ExperienceComponent.astro
@@ -8,7 +8,7 @@ import Line from "../elements/NetworkLine.astro";
 	<div class="flex flex-col items-center pt-10">
 		<div class="w-[90%] md:w-[600px]">
 			<Card primaryColor="#F6DFD8">
-				<div class="card-content px-4 py-4 md:px-8 md:py-8">
+				<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">
 							Bachelor of Computer Science student
@@ -39,7 +39,7 @@ import Line from "../elements/NetworkLine.astro";
 			</Card>
 			<Line height="50px" />
 			<Card primaryColor="#F6DFD8">
-				<div class="card-content px-4 py-4 md:px-8 md:py-8">
+				<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
@@ -65,7 +65,7 @@ import Line from "../elements/NetworkLine.astro";
 			</Card>
 			<Line height="50px" />
 			<Card primaryColor="#F6DFD8">
-				<div class="card-content px-4 py-4 md:px-8 md:py-8">
+				<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">
 							Frontend Web Developer Intern
@@ -98,18 +98,3 @@ import Line from "../elements/NetworkLine.astro";
 		</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/IntroComponent.svelte b/src/components/sections/IntroComponent.svelte
index 0e7b2ed..fb09413 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 pb-2 pt-10 lg:px-10">
+    <div class="card-content 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
diff --git a/src/components/sections/ProjectsComponent.astro b/src/components/sections/ProjectsComponent.astro
index cc62d80..55e6b49 100644
--- a/src/components/sections/ProjectsComponent.astro
+++ b/src/components/sections/ProjectsComponent.astro
@@ -109,7 +109,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
 					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
 				>
 					<div
-						class="my-1 mr-1 w-fit rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300"
+						class="bg-html my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
 					>
 						HTML
 					</div>
@@ -199,12 +199,12 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
 					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
 				>
 					<div
-						class="my-1 mr-1 w-fit rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300"
+						class="bg-react my-1 mr-1 w-fit rounded-full px-3 py-1 text-black transition-colors duration-300"
 					>
 						React
 					</div>
 					<div
-						class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
+						class="bg-typescript my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
 					>
 						Typescript
 					</div>
@@ -232,12 +232,12 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
 					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
 				>
 					<div
-						class="my-1 mr-1 w-fit rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300"
+						class="bg-python my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
 					>
 						Python
 					</div>
 					<div
-						class="my-1 mr-1 w-fit rounded-full bg-[#0078D4] px-3 py-1 text-white transition-colors duration-300"
+						class="bg-win32api my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
 					>
 						win32API
 					</div>
diff --git a/src/components/sections/SkillsComponent.astro b/src/components/sections/SkillsComponent.astro
index db432bb..7037e70 100644
--- a/src/components/sections/SkillsComponent.astro
+++ b/src/components/sections/SkillsComponent.astro
@@ -8,11 +8,11 @@ import Line from "../elements/NetworkLine.astro";
 	<div class="flex flex-col items-center">
 		<div class="w-[90%] pt-10 md:w-[600px]">
 			<Card primaryColor="#19a7ce">
-				<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">Frontend Development</h2>
 					</div>
-					<hr class="w-full" />
+					<hr class="my-5 w-full" />
 					<p class="text-left">
 						I started my web development journey by building
 						websites and widgets using vanilla HTML, CSS, Javascript
@@ -20,9 +20,11 @@ import Line from "../elements/NetworkLine.astro";
 						web development, I delved into frontend frameworks such
 						as Svelte, React and Astro.
 					</p>
-					<div class="flex w-full flex-row flex-wrap justify-start">
+					<div
+						class="mt-4 flex w-full flex-row flex-wrap justify-start"
+					>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
+							class="bg-html hover:bg-html my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							HTML
 						</div>
@@ -37,17 +39,17 @@ import Line from "../elements/NetworkLine.astro";
 							Javascript
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3178C6] md:bg-gray-500 md:text-white md:hover:text-white"
+							class="bg-typescript hover:bg-typescript my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500 md:text-white md:hover:text-white"
 						>
 							TypeScript
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
+							class="hover:bg-svelte bg-svelte my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							Svelte
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#00D8FF] md:bg-gray-500 md:text-white md:hover:text-black"
+							class="bg-react hover:bg-react my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-black transition-colors duration-300 md:bg-gray-500 md:text-white md:hover:text-black"
 						>
 							React
 						</div>
@@ -57,7 +59,7 @@ import Line from "../elements/NetworkLine.astro";
 							Vue
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#21759B] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#21759B] md:bg-gray-500"
+							class="bg-wordpress hover:bg-wordpress my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							WordPress
 						</div>
@@ -67,12 +69,12 @@ import Line from "../elements/NetworkLine.astro";
 							Astro
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3366CC] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3366CC] hover:text-white md:bg-gray-500"
+							class="bg-htmx hover:bg-htmx my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 hover:text-white md:bg-gray-500"
 						>
 							HTMX
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#07B6D4] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#07B6D4] md:bg-gray-500 md:text-white md:hover:text-black"
+							class="bg-tailwind hover:bg-tailwind my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-black transition-colors duration-300 md:bg-gray-500 md:text-white md:hover:text-black"
 						>
 							TailwindCSS
 						</div>
@@ -81,65 +83,67 @@ import Line from "../elements/NetworkLine.astro";
 			</Card>
 			<Line height="50px" />
 			<Card primaryColor="#474F7A">
-				<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">Backend Development</h2>
 					</div>
-					<hr class="w-full" />
+					<hr class="my-5 w-full" />
 					<p class="text-left">
 						With experience in various programming languages, I
 						learnt to setup databases, implement routing and
 						organized my code to ensure maintainability and
 						scalability.
 					</p>
-					<div class="flex w-full flex-row flex-wrap justify-start">
+					<div
+						class="mt-4 flex w-full flex-row flex-wrap justify-start"
+					>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500"
+							class="bg-python hover:bg-python my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							Python
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#672079] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#672079] md:bg-gray-500"
+							class="bg-csharp hover:bg-csharp my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							C#
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500"
+							class="bg-java hover:bg-java my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							Java
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500"
+							class="bg-kotlin hover:bg-kotlin my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							Kotlin
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3D5694] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3D5694] md:bg-gray-500"
+							class="bg-php hover:bg-php my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							PHP
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#006080] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#006080] md:bg-gray-500"
+							class="bg-go hover:bg-go my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-30 md:bg-gray-500"
 						>
 							Go
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
+							class="bg-rust hover:bg-rust my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							Rust
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#316192] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
+							class="bg-postgresql hover:bg-postgresql my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							PostgreSQL
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
+							class="bg-mysql hover:bg-mysql my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							MySQL
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#09934E] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#09934E] md:bg-gray-500"
+							class="bg-mongodb hover:bg-mongodb my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							MongoDB
 						</div>
@@ -148,11 +152,11 @@ import Line from "../elements/NetworkLine.astro";
 			</Card>
 			<Line height="50px" />
 			<Card primaryColor="#a1eebd">
-				<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">Data Science</h2>
 					</div>
-					<hr class="w-full" />
+					<hr class="my-5 w-full" />
 					<p class="text-left">
 						My first exposure to data science was through learning
 						Computer Vision. I learn how to use OpenCV in Python to
@@ -162,9 +166,11 @@ import Line from "../elements/NetworkLine.astro";
 						as extracting, transforming and loading data, as well as
 						data visualisation.
 					</p>
-					<div class="flex w-full flex-row flex-wrap justify-start">
+					<div
+						class="mt-4 flex w-full flex-row flex-wrap justify-start"
+					>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500"
+							class="bg-python hover:bg-python my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							Python
 						</div>
@@ -174,7 +180,7 @@ import Line from "../elements/NetworkLine.astro";
 							R
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#10652F] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#10652F] md:bg-gray-500"
+							class="bg-opencv hover:bg-opencv my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							OpenCV
 						</div>
@@ -184,7 +190,7 @@ import Line from "../elements/NetworkLine.astro";
 							SAS
 						</div>
 						<div
-							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
+							class="bg-mysql hover:bg-mysql my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
 						>
 							MySQL
 						</div>
@@ -209,23 +215,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/styles/global.css b/src/styles/global.css
index a461c50..80e6cc3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1 +1,23 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+
+@theme {
+    --color-html: #B11700;
+    --color-typescript: #3178C6;
+    --color-svelte: #B11700;
+    --color-react: #00D8FF;
+    --color-wordpress: #21759B;
+    --color-htmx: #3366CC;
+    --color-tailwind: #07B6D4;
+    --color-python: #3776AB;
+    --color-csharp: #672079;
+    --color-java: #ED8B00;
+    --color-kotlin: #7F52FF;
+    --color-php: #3D5694;
+    --color-go: #006080;
+    --color-rust: #B11700;
+    --color-postgresql: #4479A1;
+    --color-mysql: #1D6998;
+    --color-mongodb: #09934E;
+    --color-opencv: #10652F;
+    --color-win32api: #0078D4;
+}
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index 2a17bbb..3103bb9 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,7 +1,7 @@
 import { vitePreprocess } from "@astrojs/svelte";
 
 export default {
-    preprocess: vitePreprocess({script:true}),
+    preprocess: vitePreprocess(),
     compilerOptions: {
 
     },