From 6326b6f630e64f8b4ff78fcd13df2631e6b533d4 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Mon, 7 Apr 2025 11:47:16 +1000
Subject: [PATCH] updated skills

---
 src/components/sections/SkillsComponent.astro | 524 ++++++++----------
 1 file changed, 219 insertions(+), 305 deletions(-)

diff --git a/src/components/sections/SkillsComponent.astro b/src/components/sections/SkillsComponent.astro
index fb47ca6..1f5a251 100644
--- a/src/components/sections/SkillsComponent.astro
+++ b/src/components/sections/SkillsComponent.astro
@@ -3,312 +3,226 @@ import Card from "../elements/Card.astro";
 import Line from "../elements/NetworkLine.astro";
 ---
 
-<div class="w-full h-fit pt-20">
-	<h1 class="text-center text-5xl">Skills</h1>
-	<div class="flex flex-col items-center">
-		<div class="w-[90%] md:w-[600px] pt-10">
-			<Card primaryColor="#19a7ce">
-				<div class="card-content">
-					<div class="flex flex-col justify-left w-full">
-						<h2 class="font-bold text-2xl">Frontend Development</h2>
-					</div>
-					<hr class="w-full" />
-					<p class="text-left">
-						I started my web development journey by building
-						websites and widgets using vanilla HTML, CSS, Javascript
-						and Express. As I learnt more about the fundamentals of
-						web development, I delved into frontend frameworks such
-						as Svelte, React and Astro.
-					</p>
-					<div class="w-full flex flex-row flex-wrap justify-start">
-						<div
-							class="w-fit
-							text-white bg-[#B11700] md:bg-gray-500 hover:bg-[#B11700]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							HTML
-						</div>
-						<div
-							class="w-fit text-white bg-blue-700 md:bg-gray-500 hover:bg-blue-700
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							CSS
-						</div>
-						<div
-							class="w-fit md:text-white bg-yellow-400 md:bg-gray-500 hover:bg-yellow-400 text-black md:hover:text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Javascript
-						</div>
-						<div
-							class="w-fit md:text-white bg-[#3178C6] md:bg-gray-500 hover:bg-[#3178C6] text-white md:hover:text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							TypeScript
-						</div>
-						<div
-							class="w-fit text-white bg-[#B11700] md:bg-gray-500 hover:bg-[#B11700]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Svelte
-						</div>
-						<div
-							class="w-fit md:text-white bg-[#00D8FF] md:bg-gray-500 hover:bg-[#00D8FF] text-black md:hover:text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							React
-						</div>
-						<div
-							class="w-fit md:text-white bg-green-500 md:bg-gray-500 hover:bg-green-500 text-black md:hover:text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Vue
-						</div>
-						<div
-							class="w-fit text-white bg-[#21759B] md:bg-gray-500 hover:bg-[#21759B]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							WordPress
-						</div>
-						<div
-							class="w-fit md:text-white bg-white md:bg-gray-500 hover:bg-white text-black md:hover:text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Astro
-						</div>
-						<div
-							class="w-fit text-white bg-[#3366CC] md:bg-gray-500 hover:bg-[#3366CC] hover:text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							HTMX
-						</div>
-						<div
-							class="w-fit md:text-white bg-[#07B6D4] md:bg-gray-500 hover:bg-[#07B6D4] text-black md:hover:text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							TailwindCSS
-						</div>
-					</div>
-				</div>
-			</Card>
-			<Line height="50px" />
-			<Card primaryColor="#474F7A">
-				<div class="card-content">
-					<div class="flex flex-col justify-left w-full">
-						<h2 class="font-bold text-2xl">Backend Development</h2>
-					</div>
-					<hr class="w-full" />
-					<p class="text-left">
-						In the beginning, I used my Python skills to entertain
-						and to automate the boring stuff, such as using Selenium
-						for automation + web scraping, play chess by automating
-						mouse controls and build Discord bots. Now, I am
-						experienced with backend web development, managing
-						databases and building performant applications.
-					</p>
-					<div class="w-full flex flex-row flex-wrap justify-start">
-						<div
-							class="w-fit text-white bg-[#3776AB] md:bg-gray-500 hover:bg-[#3776AB]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Python
-						</div>
-						<div
-							class="w-fit text-white bg-[#ED8B00] md:bg-gray-500 hover:bg-[#ED8B00] 
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Java
-						</div>
-						<div
-							class="w-fit text-white bg-[#672079] md:bg-gray-500 hover:bg-[#672079]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							C#
-						</div>
-						<div
-							class="w-fit text-white bg-[#3D5694] md:bg-gray-500 hover:bg-[#3D5694]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							PHP
-						</div>
-						<div
-							class="w-fit text-white bg-[#006080] md:bg-gray-500 hover:bg-[#006080]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Go
-						</div>
-						<div
-							class="w-fit text-white bg-[#B11700] md:bg-gray-500 hover:bg-[#B11700]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Rust
-						</div>
-						<div
-							class="w-fit text-white bg-[#316192] md:bg-gray-500 hover:bg-[#4479A1]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							PostgreSQL
-						</div>
-						<div
-							class="w-fit text-white bg-[#4479A1] md:bg-gray-500 hover:bg-[#4479A1]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							MySQL
-						</div>
-
-						<div
-							class="w-fit md:text-white bg-[#24C8D8] md:bg-gray-500 hover:bg-[#24C8D8] text-black md:hover:text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Tauri
-						</div>
-					</div>
-				</div>
-			</Card>
-			<Line height="50px" />
-			<Card primaryColor="#a1eebd">
-				<div class="card-content">
-					<div class="flex flex-col justify-left w-full">
-						<h2 class="font-bold text-2xl">Data Science</h2>
-					</div>
-					<hr class="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
-						open a webcam and detect faces. Later on, I took a
-						Diploma course that is focused in data science, where I
-						learnt how to do the fundamentals of data science such
-						as extracting, transforming and loading data, as well as
-						data visualisation.
-					</p>
-					<div class="w-full flex flex-row flex-wrap justify-start">
-						<div
-							class="w-fit text-white bg-[#3776AB] md:bg-gray-500 hover:bg-[#3776AB]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Python
-						</div>
-						<div
-							class="w-fit text-white bg-cyan-500 md:bg-gray-500 hover:bg-cyan-500
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							R
-						</div>
-						<div
-							class="w-fit text-white bg-[#10652F] md:bg-gray-500 hover:bg-[#10652F]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							OpenCV
-						</div>
-						<div
-							class="w-fit md:text-white bg-blue-500 md:bg-gray-500 hover:bg-blue-500 text-black md:hover:text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							SAS
-						</div>
-						<div
-							class="w-fit text-white bg-[#4479A1] md:bg-gray-500 hover:bg-[#4479A1]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							MySQL
-						</div>
-						<div
-							class="w-fit text-white bg-blue-800 md:bg-gray-500 hover:bg-blue-800
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Pandas
-						</div>
-						<div
-							class="w-fit text-white bg-green-700 md:bg-gray-500 hover:bg-green-700
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							Selenium
-						</div>
-						<div
-							class="w-fit md:text-white bg-gray-200 md:bg-gray-500 hover:bg-gray-200 text-black md:hover:text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-						>
-							BeautifulSoup4
-						</div>
-					</div>
-				</div>
-			</Card>
-		</div>
-	</div>
+<div class="h-fit w-full pt-20">
+    <h1 class="text-center text-5xl">Skills</h1>
+    <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="justify-left flex w-full flex-col">
+                        <h2 class="text-2xl font-bold">Frontend Development</h2>
+                    </div>
+                    <hr class="w-full" />
+                    <p class="text-left">
+                        I started my web development journey by building
+                        websites and widgets using vanilla HTML, CSS, Javascript
+                        and Express. As I learnt more about the fundamentals of
+                        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"
+                        >
+                            HTML
+                        </div>
+                        <div
+                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-700 md:bg-gray-500"
+                        >
+                            CSS
+                        </div>
+                        <div
+                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300 hover:bg-yellow-400 md:bg-gray-500 md:text-white md:hover:text-black"
+                        >
+                            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"
+                        >
+                            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"
+                        >
+                            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"
+                        >
+                            React
+                        </div>
+                        <div
+                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-green-500 md:bg-gray-500 md:text-white md:hover:text-black"
+                        >
+                            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"
+                        >
+                            WordPress
+                        </div>
+                        <div
+                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-white px-3 py-1 text-black transition-colors duration-300 hover:bg-white md:bg-gray-500 md:text-white md:hover:text-black"
+                        >
+                            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"
+                        >
+                            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"
+                        >
+                            TailwindCSS
+                        </div>
+                    </div>
+                </div>
+            </Card>
+            <Line height="50px" />
+            <Card primaryColor="#474F7A">
+                <div class="card-content">
+                    <div class="justify-left flex w-full flex-col">
+                        <h2 class="text-2xl font-bold">Backend Development</h2>
+                    </div>
+                    <hr class="w-full" />
+                    <p class="text-left">
+                        In the beginning, I used my Python skills to entertain
+                        and to automate the boring stuff, such as using Selenium
+                        for automation + web scraping, play chess by automating
+                        mouse controls and build Discord bots. Now, I am
+                        experienced with backend web development, managing
+                        databases and building performant applications.
+                    </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"
+                        >
+                            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"
+                        >
+                            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"
+                        >
+                            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"
+                        >
+                            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"
+                        >
+                            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"
+                        >
+                            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"
+                        >
+                            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"
+                        >
+                            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"
+                        >
+                            MySQL
+                        </div>
+                    </div>
+                </div>
+            </Card>
+            <Line height="50px" />
+            <Card primaryColor="#a1eebd">
+                <div class="card-content">
+                    <div class="justify-left flex w-full flex-col">
+                        <h2 class="text-2xl font-bold">Data Science</h2>
+                    </div>
+                    <hr class="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
+                        open a webcam and detect faces. Later on, I took a
+                        Diploma course that is focused in data science, where I
+                        learnt how to do the fundamentals of data science such
+                        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"
+                        >
+                            Python
+                        </div>
+                        <div
+                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-cyan-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-cyan-500 md:bg-gray-500"
+                        >
+                            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"
+                        >
+                            OpenCV
+                        </div>
+                        <div
+                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-blue-500 md:bg-gray-500 md:text-white md:hover:text-black"
+                        >
+                            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"
+                        >
+                            MySQL
+                        </div>
+                        <div
+                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-800 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-800 md:bg-gray-500"
+                        >
+                            Pandas
+                        </div>
+                        <div
+                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-green-700 md:bg-gray-500"
+                        >
+                            Selenium
+                        </div>
+                        <div
+                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-200 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-200 md:bg-gray-500 md:text-white md:hover:text-black"
+                        >
+                            BeautifulSoup4
+                        </div>
+                    </div>
+                </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-top: 2rem;
-		padding-left: 2rem;
-		padding-right: 2rem;
-		padding-bottom: 0.5rem;
-		border-radius: 1.25rem;
-		overflow: hidden;
-	}
+    .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>