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> </div>
<a <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" 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">Send me an email!</a href="mailto:ryanpython932@gmail.com"
><span class="text-2xl mr-2">&#9993;</span> Send me an email</a
> >
</div> </div>
<div <div
@ -72,9 +73,9 @@
#title { #title {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
#03c988 0%, #85e6c5 0%,
#4ca1a3 55%, #a084e8 45%,
#a149fa 100% #33bbc5 100%
); );
background-size: 300%; background-size: 300%;

View file

@ -94,7 +94,7 @@
text-white text-white
flex flex-col" 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="flex flex-row h-20">
<div class="w-20 mr-1 flex justify-center items-center"> <div class="w-20 mr-1 flex justify-center items-center">
<img <img
@ -123,8 +123,9 @@
>well networked with various Twitch streamers and content >well networked with various Twitch streamers and content
creators</b creators</b
>, with prominent projects that positively impacted the streaming >, with prominent projects that positively impacted the streaming
community. Strongly motivated in the fields of community. I'm strongly motivated in the fields of
<b> web development, computer vision and data science</b>. <b> web development</b>, <b>computer vision</b> and
<b>data science</b>.
</p> </p>
<div class="flex flex-row justify-center items-center mt-5"> <div class="flex flex-row justify-center items-center mt-5">
<a href="https://github.com/liyunze-coding" target="_blank"> <a href="https://github.com/liyunze-coding" target="_blank">
@ -194,9 +195,9 @@
#name { #name {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
#31e1f7 0%, #16ff00 0%,
#00ffab 45%, #72ffff 45%,
#14c38e 100% #0096ff 100%
); );
background-size: 300%; background-size: 300%;

View file

@ -52,7 +52,7 @@ import Line from "../components/NetworkLine.astro";
Svelte Svelte
</div> </div>
<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 React
</div> </div>
@ -114,7 +114,7 @@ import Line from "../components/NetworkLine.astro";
OpenCV OpenCV
</div> </div>
<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 SAS
</div> </div>
@ -128,16 +128,16 @@ import Line from "../components/NetworkLine.astro";
> >
Pandas Pandas
</div> </div>
<div
class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
>
BeautifulSoup4
</div>
<div <div
class="w-fit bg-green-700 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 Selenium
</div> </div>
<div
class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
>
BeautifulSoup4
</div>
</div> </div>
</div> </div>
</Card> </Card>

View file

@ -6,10 +6,10 @@ import Card from "../components/Card.astro";
<div <div
class="w-full h-fit flex flex-col justify-center items-center max-w-[1440px]" 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> <h1 class="text-center text-5xl mb-10">What I Do</h1>
<div <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}> <Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
<div class="card-content"> <div class="card-content">