added colours to theme

src/components/elements/Card.astro

@@ -17,7 +17,9 @@ const {
 ---
 
 <div class="card z-10" class:list={[{ scale: scaleOnHover }, className]}>
+	<div class="card-content">
 		<slot />
+	</div>
 </div>
 
 <style define:vars={{ primaryColor, bgColor, pixelHeight }}>
@@ -77,4 +79,16 @@ const {
 	.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>

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>

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

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>

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="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="mt-4 flex w-full flex-row flex-wrap justify-start"
+					>
+						<div
+							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="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="mt-4 flex w-full flex-row flex-wrap justify-start"
+					>
+						<div
+							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="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="mt-4 flex w-full flex-row flex-wrap justify-start"
+					>
+						<div
+							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>

src/styles/global.css

@@ -1 +1,23 @@
 @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;
+}

svelte.config.js

@@ -1,7 +1,7 @@
 import { vitePreprocess } from "@astrojs/svelte";
 
 export default {
-    preprocess: vitePreprocess({script:true}),
+    preprocess: vitePreprocess(),
     compilerOptions: {
 
     },