From 8dd3662cecb701705934e08e692ffd2ed4fd2786 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Thu, 16 Nov 2023 22:57:07 +0800
Subject: [PATCH] updated skills section

---
 src/components/Skills.astro | 82 +++++++++++++++++++++++++++----------
 1 file changed, 60 insertions(+), 22 deletions(-)

diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index 61fb6de..82c8002 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -22,62 +22,86 @@ import Line from "../components/NetworkLine.astro";
                     </p>
                     <div class="w-full flex flex-row flex-wrap justify-start">
                         <div
-                            class="w-fit bg-orange-700 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-orange-700
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             HTML
                         </div>
                         <div
-                            class="w-fit bg-blue-700 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-blue-700
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             CSS
                         </div>
                         <div
-                            class="w-fit bg-yellow-400 text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-yellow-400 hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             Javascript
                         </div>
                         <div
-                            class="w-fit bg-blue-400 text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-blue-400 hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             TypeScript
                         </div>
                         <div
-                            class="w-fit bg-[#617CBE] rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-[#617CBE]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             PHP
                         </div>
                         <div
-                            class="w-fit bg-yellow-500 text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-yellow-500 hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             Express
                         </div>
                         <div
-                            class="w-fit bg-orange-400 text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-orange-500
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             Svelte
                         </div>
                         <div
-                            class="w-fit bg-[#00D8FF] text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-[#00D8FF] hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             React
                         </div>
                         <div
-                            class="w-fit bg-white text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-white hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             Astro
                         </div>
                         <div
-                            class="w-fit bg-purple-400 text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-purple-400 hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             Qwik
                         </div>
                         <div
-                            class="w-fit bg-[#07B6D4] text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-[#07B6D4] hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             TailwindCSS
                         </div>
                         <div
-                            class="w-fit bg-[#8500C7] rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-[#8500C7]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             Vite
                         </div>
@@ -102,44 +126,58 @@ import Line from "../components/NetworkLine.astro";
                     </p>
                     <div class="w-full flex flex-row flex-wrap justify-start">
                         <div
-                            class="w-fit bg-yellow-400 bg-[linear-gradient(_125deg,_#4b8bbe_0%,_#4b8bbe_50%,_#ffd43b_51%,_#f0c808_100%_)]
-                            text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:text-black hover:bg-[linear-gradient(_125deg,_#4b8bbe_0%,_#4b8bbe_50%,_#ffd43b_51%,_#f0c808_100%_)]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             Python
                         </div>
                         <div
-                            class="w-fit bg-cyan-500 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-cyan-500
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             R
                         </div>
                         <div
-                            class="w-fit bg-green-600 bg-[linear-gradient(_90deg,_#BB0000_0%,_#BB0000_32%,_#00AA00_33%,_#00AA00_65%,_#0000BB_66%,_#0000BB_100%_)]
-                            text-white rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-green-600 hover:bg-[linear-gradient(_90deg,_#BB0000_0%,_#BB0000_32%,_#00AA00_33%,_#00AA00_65%,_#0000BB_66%,_#0000BB_100%_)]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             OpenCV
                         </div>
                         <div
-                            class="w-fit bg-blue-500 text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-blue-500 hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             SAS
                         </div>
                         <div
-                            class="w-fit bg-orange-700 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-orange-700
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             MySQL
                         </div>
                         <div
-                            class="w-fit bg-blue-800 text-white rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-blue-800
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             Pandas
                         </div>
                         <div
-                            class="w-fit bg-green-700 text-white rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-green-700
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             Selenium
                         </div>
                         <div
-                            class="w-fit bg-gray-200 text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit text-white bg-gray-500 hover:bg-gray-200 hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-500"
                         >
                             BeautifulSoup4
                         </div>