From 60d477db9419a9da50db863596650156e318be21 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sat, 7 Oct 2023 20:20:29 +0800
Subject: [PATCH] improved accessibility and mobile responsiveness

---
 src/components/Contact.astro | 11 ++++++-----
 src/components/Intro.svelte  | 13 +++++++------
 src/components/Skills.astro  | 14 +++++++-------
 src/components/WhatIDo.astro |  4 ++--
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/Contact.astro b/src/components/Contact.astro
index 2bb6a4c..1fd52e0 100644
--- a/src/components/Contact.astro
+++ b/src/components/Contact.astro
@@ -13,8 +13,9 @@
         </div>
 
         <a
-            class="border-2 border-purple-500 text-purple-500 px-5 py-5 hover:bg-purple-500 hover:text-black transition-colors duration-500 ease-in-out rounded-xl"
-            href="mailto:ryanpython932@gmail.com">Send me an email!</a
+            class="text-center flex flex-row justify-center items-center border-2 border-blue-300 text-blue-300 px-5 py-5 hover:bg-blue-300 hover:text-black transition-colors duration-500 ease-in-out rounded-xl"
+            href="mailto:ryanpython932@gmail.com"
+            ><span class="text-2xl mr-2">&#9993;</span> Send me an email</a
         >
     </div>
     <div
@@ -72,9 +73,9 @@
     #title {
         background: linear-gradient(
             90deg,
-            #03c988 0%,
-            #4ca1a3 55%,
-            #a149fa 100%
+            #85e6c5 0%,
+            #a084e8 45%,
+            #33bbc5 100%
         );
 
         background-size: 300%;
diff --git a/src/components/Intro.svelte b/src/components/Intro.svelte
index 20162a4..7fc4105 100644
--- a/src/components/Intro.svelte
+++ b/src/components/Intro.svelte
@@ -94,7 +94,7 @@
         text-white
         flex flex-col"
 >
-    <div class="px-10 pt-10 pb-2 card-content w-full">
+    <div class="px-1 lg:px-10 pt-10 pb-2 card-content w-full">
         <div class="flex flex-row h-20">
             <div class="w-20 mr-1 flex justify-center items-center">
                 <img
@@ -123,8 +123,9 @@
                 >well networked with various Twitch streamers and content
                 creators</b
             >, with prominent projects that positively impacted the streaming
-            community. Strongly motivated in the fields of
-            <b> web development, computer vision and data science</b>.
+            community. I'm strongly motivated in the fields of
+            <b> web development</b>, <b>computer vision</b> and
+            <b>data science</b>.
         </p>
         <div class="flex flex-row justify-center items-center mt-5">
             <a href="https://github.com/liyunze-coding" target="_blank">
@@ -194,9 +195,9 @@
     #name {
         background: linear-gradient(
             90deg,
-            #31e1f7 0%,
-            #00ffab 45%,
-            #14c38e 100%
+            #16ff00 0%,
+            #72ffff 45%,
+            #0096ff 100%
         );
 
         background-size: 300%;
diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index fbd2575..c863347 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -52,7 +52,7 @@ import Line from "../components/NetworkLine.astro";
                             Svelte
                         </div>
                         <div
-                            class="w-fit bg-cyan-700 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-cyan-400 text-black rounded-full px-3 py-1 mr-1 my-1"
                         >
                             React
                         </div>
@@ -114,7 +114,7 @@ import Line from "../components/NetworkLine.astro";
                             OpenCV
                         </div>
                         <div
-                            class="w-fit bg-blue-400 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-blue-500 text-black rounded-full px-3 py-1 mr-1 my-1"
                         >
                             SAS
                         </div>
@@ -128,16 +128,16 @@ import Line from "../components/NetworkLine.astro";
                         >
                             Pandas
                         </div>
-                        <div
-                            class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
-                        >
-                            BeautifulSoup4
-                        </div>
                         <div
                             class="w-fit bg-green-700 text-white rounded-full px-3 py-1 mr-1 my-1"
                         >
                             Selenium
                         </div>
+                        <div
+                            class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            BeautifulSoup4
+                        </div>
                     </div>
                 </div>
             </Card>
diff --git a/src/components/WhatIDo.astro b/src/components/WhatIDo.astro
index 58b901c..eea0510 100644
--- a/src/components/WhatIDo.astro
+++ b/src/components/WhatIDo.astro
@@ -6,10 +6,10 @@ import Card from "../components/Card.astro";
     <div
         class="w-full h-fit flex flex-col justify-center items-center max-w-[1440px]"
     >
-        <div class="h-[1px] w-1/3 bg-[#404040] mb-5"></div>
+        <div class="h-[1px] w-1/3 bg-[#404040] mb-10"></div>
         <h1 class="text-center text-5xl mb-10">What I Do</h1>
         <div
-            class="grid grid-cols-1 w-4/5 sm:w-[350px] lg:w-[90%] lg:grid-cols-3 place-content-center justify-center xl:w-4/5 gap-5 xl:gap-12"
+            class="grid grid-cols-1 w-[90%] sm:w-[350px] lg:w-[90%] lg:grid-cols-3 place-content-center justify-center xl:w-4/5 gap-5 xl:gap-12"
         >
             <Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
                 <div class="card-content">