improved accessibility and mobile responsiveness

This commit is contained in:
liyunze 2023-10-07 20:20:29 +08:00
parent e50c7772c6
commit 60d477db94
4 changed files with 22 additions and 20 deletions

View file

@ -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%;

View file

@ -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%;

View file

@ -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>

View file

@ -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">