From e50c7772c688df4213d7871411bbfb8a9b6c51bc Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sat, 7 Oct 2023 17:42:58 +0800
Subject: [PATCH] better accessibility + content

---
 src/components/Contact.astro   |  3 +-
 src/components/Education.astro |  5 ++-
 src/components/Intro.svelte    | 38 ++++++++++++----
 src/components/Projects.svelte | 26 ++++++-----
 src/components/Skills.astro    | 30 ++++++-------
 src/components/WhatIDo.astro   | 79 +++++++++++++++++++---------------
 src/pages/index.astro          |  4 +-
 7 files changed, 111 insertions(+), 74 deletions(-)

diff --git a/src/components/Contact.astro b/src/components/Contact.astro
index 06cb89d..2bb6a4c 100644
--- a/src/components/Contact.astro
+++ b/src/components/Contact.astro
@@ -1,6 +1,5 @@
 <div
-    class="w-full h-fit pb-40 flex flex-col justify-center items-center relative
-    bg-[rgb(32,32,32)] bg-[linear-gradient(180deg,_rgba(32,32,32,1)_0%,_rgba(30,30,30,1)_10%)]"
+    class="w-full h-fit pb-40 flex flex-col justify-center items-center relative"
 >
     <div class="flex flex-col justify-center items-center">
         <div
diff --git a/src/components/Education.astro b/src/components/Education.astro
index b3aa821..7c3ae9b 100644
--- a/src/components/Education.astro
+++ b/src/components/Education.astro
@@ -17,7 +17,10 @@ import Line from "./NetworkLine.astro";
                     <hr class="w-full mb-3" />
                     <h3 class="mb-1 font-bold text-lg">Achievements</h3>
                     <ul class="list-disc list-inside">
-                        <li>3-time Dean's List recipient</li>
+                        <li>
+                            3-time Dean's List Award recipient (&gt;3.5 GPA)
+                        </li>
+                        <li>3.77 CGPA</li>
                         <li>President of Computer Programming Club</li>
                         <li>Vice President of Diploma Union</li>
                     </ul>
diff --git a/src/components/Intro.svelte b/src/components/Intro.svelte
index 640f480..20162a4 100644
--- a/src/components/Intro.svelte
+++ b/src/components/Intro.svelte
@@ -101,11 +101,11 @@
                     src="/images/pfp_transparent_square.png"
                     alt="Ryan"
                     width="100"
-                    class="rounded-full max-w-full bg-[#404040]"
+                    class="rounded-full max-w-full bg-[#505050]"
                 />
             </div>
             <div class="flex flex-col justify-center items-start ml-2">
-                <div class="text-2xl font-bold">RythonDev</div>
+                <div id="name" class="text-2xl font-bold">RythonDev</div>
                 <div class="text-xl w-full">
                     {roleState}<span class="animate-pulse">|</span>
                 </div>
@@ -114,13 +114,19 @@
         <div class="text-2xl font-bold mt-10">
             Good {greeting}, I'm Ryan!
         </div>
-        <p class="mt-3">
-            I am an undergraduate student, passionate in frontend web
-            development. I built this website using Astro, Svelte, TailwindCSS
-            and Typescript!
+        <p class="text-left lg:text-justify">
+            I'm passionate in developing open source projects to benefit others,
+            with vast experience in leadership roles.
+            <br /><br />
+            I'm also
+            <b
+                >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>.
         </p>
-        <p class="mt-1">I hope you enjoy your stay here!</p>
-        <div class="flex flex-row justify-center items-center mt-10">
+        <div class="flex flex-row justify-center items-center mt-5">
             <a href="https://github.com/liyunze-coding" target="_blank">
                 <div
                     class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200"
@@ -184,4 +190,20 @@
         border-radius: 1.25rem;
         overflow: hidden;
     }
+
+    #name {
+        background: linear-gradient(
+            90deg,
+            #31e1f7 0%,
+            #00ffab 45%,
+            #14c38e 100%
+        );
+
+        background-size: 300%;
+
+        background-clip: text;
+        -webkit-background-clip: text;
+
+        -webkit-text-fill-color: transparent;
+    }
 </style>
diff --git a/src/components/Projects.svelte b/src/components/Projects.svelte
index 987bfa1..ea69ad9 100644
--- a/src/components/Projects.svelte
+++ b/src/components/Projects.svelte
@@ -224,15 +224,18 @@
     // });
 </script>
 
-<div id="projects" class="h-fit pt-20 pb-10 [perspective:1000px]">
+<div
+    id="projects"
+    class="h-fit pt-20 [perspective:1000px] flex flex-col items-center"
+>
     <h1 class="text-5xl text-center">Projects</h1>
 
-    <div class="mt-10 w-full">
+    <div class="mt-10 w-full max-w-[1440px]">
         <div
-            class="flex flex-col lg:flex-row justify-between h-fit w-full px-10 lg:px-20"
+            class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
         >
             <div
-                class="image-container w-full lg:w-1/2 mb-3 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
+                class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-3 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
             >
                 <img
                     src="/images/projects/coworking-guide.webp"
@@ -241,19 +244,19 @@
                     top-1/2 left-1/2
                     [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
                     border-2 border-solid border-white rounded-xl"
-                    width="600"
+                    width="700"
                 />
                 <img
                     src="/images/projects/coworking-guide.webp"
                     alt="coworking guide"
-                    width="600"
+                    width="700"
                     class="absolute max-w-full
                     top-1/2 left-1/2
                     [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
                     border-2 border-solid border-white rounded-xl"
                 />
                 <div
-                    class="visit-div absolute w-[600px] bg-[rgba(0,0,0,0.5)] opacity-0
+                    class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
                     aspect-video
                     rounded-xl
                     [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
@@ -270,7 +273,7 @@
                 </div>
             </div>
             <div
-                class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:pr-20"
+                class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
             >
                 <h2 class="text-3xl font-bold mb-5">Coworking Guide</h2>
                 <p class="text-xl">
@@ -290,9 +293,10 @@
                     Chat-Task-Tic Widget
                 </h2>
                 <p class="text-xl lg:text-right">
-                    A widget for Coworking and Study Twitch streamers, allows
-                    the streamer and the chatters to add their tasks to the
-                    widget, to be displayed on stream!
+                    Used by 100+ Twitch streamers, allow viewers and streamers
+                    to add their own tasks to the widget for accountability!
+                    Easy to setup and the customization possibilities are
+                    endless!
                 </p>
             </div>
             <div
diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index 32ef575..fbd2575 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -22,12 +22,12 @@ import Line from "../components/NetworkLine.astro";
                     </p>
                     <div class="w-full flex flex-row flex-wrap justify-center">
                         <div
-                            class="w-fit bg-orange-500 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-orange-700 rounded-full px-3 py-1 mr-1 my-1"
                         >
                             HTML
                         </div>
                         <div
-                            class="w-fit bg-blue-500 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
                         >
                             CSS
                         </div>
@@ -37,7 +37,7 @@ import Line from "../components/NetworkLine.astro";
                             Javascript
                         </div>
                         <div
-                            class="w-fit bg-blue-500 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
                         >
                             TypeScript
                         </div>
@@ -47,12 +47,12 @@ import Line from "../components/NetworkLine.astro";
                             Express
                         </div>
                         <div
-                            class="w-fit bg-orange-600 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-orange-700 rounded-full px-3 py-1 mr-1 my-1"
                         >
                             Svelte
                         </div>
                         <div
-                            class="w-fit bg-cyan-500 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-cyan-700 rounded-full px-3 py-1 mr-1 my-1"
                         >
                             React
                         </div>
@@ -72,7 +72,7 @@ import Line from "../components/NetworkLine.astro";
                             TailwindCSS
                         </div>
                         <div
-                            class="w-fit bg-purple-400 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-purple-700 rounded-full px-3 py-1 mr-1 my-1"
                         >
                             Vite
                         </div>
@@ -103,7 +103,7 @@ import Line from "../components/NetworkLine.astro";
                             Python
                         </div>
                         <div
-                            class="w-fit bg-cyan-400 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-cyan-500 rounded-full px-3 py-1 mr-1 my-1"
                         >
                             R
                         </div>
@@ -119,25 +119,25 @@ import Line from "../components/NetworkLine.astro";
                             SAS
                         </div>
                         <div
-                            class="w-fit bg-purple-500 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-purple-600 rounded-full px-3 py-1 mr-1 my-1"
                         >
                             Machine Learning
                         </div>
                         <div
-                            class="w-fit bg-blue-500 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-blue-600 text-white rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            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-500 text-white rounded-full px-3 py-1 mr-1 my-1"
+                            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-500 text-white rounded-full px-3 py-1 mr-1 my-1"
-                        >
-                            Pandas
-                        </div>
                     </div>
                 </div>
             </Card>
diff --git a/src/components/WhatIDo.astro b/src/components/WhatIDo.astro
index 6fd56b5..58b901c 100644
--- a/src/components/WhatIDo.astro
+++ b/src/components/WhatIDo.astro
@@ -2,45 +2,54 @@
 import Card from "../components/Card.astro";
 ---
 
-<div class="w-full h-fit flex justify-center items-center flex-col">
-    <div class="h-[1px] w-1/3 bg-[#404040] mb-5"></div>
-    <h1 class="text-center text-5xl mb-10">What I Do</h1>
+<div class="w-full flex flex-col justify-center items-center">
     <div
-        class="grid grid-cols-1 w-[400px] lg:w-[90%] lg:grid-cols-3 place-content-center justify-center xl:w-4/5 gap-5 xl:gap-12"
+        class="w-full h-fit flex flex-col justify-center items-center max-w-[1440px]"
     >
-        <Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
-            <div class="card-content">
-                <h2 class="font-bold text-xl text-center">Web Development</h2>
-                <hr class="w-full" />
-                <p class="text-center">
-                    I like to code things for the web, particularly on the
-                    frontend. I enjoy bringing ideas to life in the browser.
-                </p>
-            </div>
-        </Card>
+        <div class="h-[1px] w-1/3 bg-[#404040] mb-5"></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"
+        >
+            <Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
+                <div class="card-content">
+                    <h2 class="font-bold text-xl text-center">
+                        Web Development
+                    </h2>
+                    <hr class="w-full" />
+                    <p class="text-center">
+                        Bringing ideas to life on the web is my passion. I enjoy
+                        bringing my imagination to life through web development.
+                    </p>
+                </div>
+            </Card>
 
-        <Card primaryColor="#40F8FF" bgColor="#282828" scaleOnHover={true}>
-            <div class="card-content">
-                <h2 class="font-bold text-xl text-center">Data Science</h2>
-                <hr class="w-full" />
-                <p class="text-center">
-                    I possess knowledge of data science and machine learning,
-                    particularly interested in Computer Vision.
-                </p>
-            </div>
-        </Card>
+            <Card primaryColor="#40F8FF" bgColor="#282828" scaleOnHover={true}>
+                <div class="card-content">
+                    <h2 class="font-bold text-xl text-center">Data Science</h2>
+                    <hr class="w-full" />
+                    <p class="text-center">
+                        Using data to make decisions is a powerful tool. I am
+                        experienced in analyzing data and make decisions based
+                        on data.
+                    </p>
+                </div>
+            </Card>
 
-        <Card primaryColor="#9D76C1" bgColor="#282828" scaleOnHover={true}>
-            <div class="card-content">
-                <h2 class="font-bold text-xl text-center">Content Creation</h2>
-                <hr class="w-full" />
-                <p class="text-center">
-                    I am experienced in streaming on Twitch, experienced in
-                    customizing settings in OBS, and aim to improve my video
-                    editing skills.
-                </p>
-            </div>
-        </Card>
+            <Card primaryColor="#9D76C1" bgColor="#282828" scaleOnHover={true}>
+                <div class="card-content">
+                    <h2 class="font-bold text-xl text-center">
+                        Content Creation
+                    </h2>
+                    <hr class="w-full" />
+                    <p class="text-center">
+                        Everyone has something to give, something to share. I
+                        amassed a loyal following as a streamer on Twitch, and I
+                        strive to help smaller creators grow their brand.
+                    </p>
+                </div>
+            </Card>
+        </div>
     </div>
 </div>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7b6f431..5eee6a5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,7 +14,7 @@ import Card from "../components/Card.astro";
 <Layout title="Ryan's Portfolio">
     <NavBar />
     <div id="home" class="pt-20 flex justify-center items-center">
-        <div class="w-[90%] lg:w-1/2">
+        <div class="w-[90%] xl:w-1/2 lg:w-1/2 max-w-[1080px]">
             <Card bgColor="#252525" primaryColor="#BEADFA" scaleOnHover={false}>
                 <Intro client:load />
             </Card>
@@ -22,7 +22,7 @@ import Card from "../components/Card.astro";
     </div>
 
     <div id="what-i-do">
-        <NetworkLine height="100px" />
+        <NetworkLine height="70px" />
         <WhatIDo />
     </div>
     <div id="projects">