updated skills section

This commit is contained in:
liyunze 2023-11-16 22:57:07 +08:00
parent 799f6bd5c2
commit 8dd3662cec

View file

@ -22,62 +22,86 @@ import Line from "../components/NetworkLine.astro";
</p>
<div class="w-full flex flex-row flex-wrap justify-start">
<div
class="w-fit bg-orange-700 rounded-full px-3 py-1 mr-1 my-1"
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"
>
HTML
</div>
<div
class="w-fit bg-blue-700 rounded-full px-3 py-1 mr-1 my-1"
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"
>
CSS
</div>
<div
class="w-fit bg-yellow-400 text-black rounded-full px-3 py-1 mr-1 my-1"
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"
>
Javascript
</div>
<div
class="w-fit bg-blue-400 text-black rounded-full px-3 py-1 mr-1 my-1"
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"
>
TypeScript
</div>
<div
class="w-fit bg-[#617CBE] rounded-full px-3 py-1 mr-1 my-1"
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"
>
PHP
</div>
<div
class="w-fit bg-yellow-500 text-black rounded-full px-3 py-1 mr-1 my-1"
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"
>
Express
</div>
<div
class="w-fit bg-orange-400 text-black rounded-full px-3 py-1 mr-1 my-1"
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"
>
Svelte
</div>
<div
class="w-fit bg-[#00D8FF] text-black rounded-full px-3 py-1 mr-1 my-1"
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"
>
React
</div>
<div
class="w-fit bg-white text-black rounded-full px-3 py-1 mr-1 my-1"
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"
>
Astro
</div>
<div
class="w-fit bg-purple-400 text-black rounded-full px-3 py-1 mr-1 my-1"
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"
>
Qwik
</div>
<div
class="w-fit bg-[#07B6D4] text-black rounded-full px-3 py-1 mr-1 my-1"
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"
>
TailwindCSS
</div>
<div
class="w-fit bg-[#8500C7] rounded-full px-3 py-1 mr-1 my-1"
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"
>
Vite
</div>
@ -102,44 +126,58 @@ import Line from "../components/NetworkLine.astro";
</p>
<div class="w-full flex flex-row flex-wrap justify-start">
<div
class="w-fit bg-yellow-400 bg-[linear-gradient(_125deg,_#4b8bbe_0%,_#4b8bbe_50%,_#ffd43b_51%,_#f0c808_100%_)]
text-black rounded-full px-3 py-1 mr-1 my-1"
class="w-fit text-white bg-gray-500 hover:text-black hover:bg-[linear-gradient(_125deg,_#4b8bbe_0%,_#4b8bbe_50%,_#ffd43b_51%,_#f0c808_100%_)]
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500"
>
Python
</div>
<div
class="w-fit bg-cyan-500 rounded-full px-3 py-1 mr-1 my-1"
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"
>
R
</div>
<div
class="w-fit bg-green-600 bg-[linear-gradient(_90deg,_#BB0000_0%,_#BB0000_32%,_#00AA00_33%,_#00AA00_65%,_#0000BB_66%,_#0000BB_100%_)]
text-white rounded-full px-3 py-1 mr-1 my-1"
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%_)]
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500"
>
OpenCV
</div>
<div
class="w-fit bg-blue-500 text-black rounded-full px-3 py-1 mr-1 my-1"
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"
>
SAS
</div>
<div
class="w-fit bg-orange-700 rounded-full px-3 py-1 mr-1 my-1"
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"
>
MySQL
</div>
<div
class="w-fit bg-blue-800 text-white rounded-full px-3 py-1 mr-1 my-1"
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"
>
Pandas
</div>
<div
class="w-fit bg-green-700 text-white rounded-full px-3 py-1 mr-1 my-1"
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"
>
Selenium
</div>
<div
class="w-fit bg-gray-200 text-black rounded-full px-3 py-1 mr-1 my-1"
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"
>
BeautifulSoup4
</div>