From 64463e2c5988e595d358a3faf17d327af1966b2d Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sat, 18 Nov 2023 19:12:41 +0800
Subject: [PATCH] removed borders

---
 src/components/NavBar.astro    | 29 +++++++++++-----------
 src/components/Projects.svelte | 15 +++++++++---
 src/components/Skills.astro    | 44 +++++++++++++++++-----------------
 3 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index e767190..cccf28b 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -7,65 +7,66 @@
         <input type="checkbox" aria-label="Toggle menu" />
         <span class="bottom-bun"></span>
     </label>
-    <aside class="sidebar flex z-20 border-l border-white">
+    <aside class="sidebar flex z-20">
         <nav class="flex flex-col capitalize" role="navigation">
             <a
-                class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+                class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                 href="#home">Home</a
             >
             <a
-                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                 href="#what-i-do">What I Do</a
             >
             <a
-                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                 href="#projects">Projects</a
             >
             <a
-                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                 href="#skills">Skills</a
             >
             <a
-                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                 href="#education">Education</a
             >
             <a
-                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                 href="#contact">Contact</a
             >
         </nav>
     </aside>
     <div
         id="navbar"
-        class="fixed z-50 top-0 w-full hidden md:flex justify-center bg-[#202020] border-b border-solid border-white"
+        class="fixed z-50 top-0 w-full hidden md:flex justify-center
+            bg-[linear-gradient(180deg,_rgba(32,32,32,1)_70%,_rgba(32,32,32,0)_100%)]"
     >
         <div
             id="navbar-div"
             class="py-4 uppercase w-full flex flex-row justify-center items-center"
         >
             <a
-                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                 href="#home">home</a
             >
             <a
-                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                 href="#what-i-do">What I Do</a
             >
 
             <a
-                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                 href="#projects">projects</a
             >
             <a
-                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                 href="#skills">skills</a
             >
             <a
-                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                 href="#education">education</a
             >
             <a
-                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                 href="#contact">contact</a
             >
         </div>
diff --git a/src/components/Projects.svelte b/src/components/Projects.svelte
index 0972bbc..5463558 100644
--- a/src/components/Projects.svelte
+++ b/src/components/Projects.svelte
@@ -268,7 +268,10 @@
                         target="_blank"
                         class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
                         px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold">Visit site</a
+                        font-bold
+                        transition-colors duration-300
+                        hover:bg-white hover:text-blue-500
+                        ">Visit site</a
                     >
                 </div>
             </div>
@@ -406,7 +409,10 @@
                         target="_blank"
                         class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
                         px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold">View repository</a
+                        font-bold
+                        transition-colors duration-300
+                        hover:bg-white hover:text-blue-500
+                        ">View repository</a
                     >
                 </div>
             </div>
@@ -448,7 +454,10 @@
                         target="_blank"
                         class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
                         px-5 py-3 bg-blue-500 rounded-xl opacity-1
-                        font-bold">Visit site</a
+                        font-bold
+                        transition-colors duration-300
+                        hover:bg-white hover:text-blue-500
+                        ">Visit site</a
                     >
                 </div>
             </div>
diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index 82c8002..da6f46e 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -24,84 +24,84 @@ import Line from "../components/NetworkLine.astro";
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             HTML
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             CSS
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             Javascript
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             TypeScript
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             PHP
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             Express
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             Svelte
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             React
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             Astro
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             Qwik
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             TailwindCSS
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             Vite
                         </div>
@@ -126,58 +126,58 @@ import Line from "../components/NetworkLine.astro";
                     </p>
                     <div class="w-full flex flex-row flex-wrap justify-start">
                         <div
-                            class="w-fit text-white bg-gray-500 hover:text-black hover:bg-[linear-gradient(_125deg,_#4b8bbe_0%,_#4b8bbe_50%,_#ffd43b_51%,_#f0c808_100%_)]
+                            class="w-fit text-white bg-gray-500 hover:text-white hover:bg-blue-700
                                 rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-500"
+                                transition-colors duration-300"
                         >
                             Python
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             R
                         </div>
                         <div
-                            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%_)]
+                            class="w-fit text-white bg-gray-500 hover:bg-green-600
                                 rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-500"
+                                transition-colors duration-300"
                         >
                             OpenCV
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             SAS
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             MySQL
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             Pandas
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             Selenium
                         </div>
                         <div
                             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"
+                                transition-colors duration-300"
                         >
                             BeautifulSoup4
                         </div>