mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 15:53:57 +00:00
updated skills
This commit is contained in:
liyunze
parent
1874e055b6
commit
6326b6f630
1 changed files with 219 additions and 305 deletions
|
|
@ -3,14 +3,14 @@ import Card from "../elements/Card.astro";
|
||||||
import Line from "../elements/NetworkLine.astro";
|
import Line from "../elements/NetworkLine.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="w-full h-fit pt-20">
|
<div class="h-fit w-full pt-20">
|
||||||
<h1 class="text-center text-5xl">Skills</h1>
|
<h1 class="text-center text-5xl">Skills</h1>
|
||||||
<div class="flex flex-col items-center">
|
<div class="flex flex-col items-center">
|
||||||
<div class="w-[90%] md:w-[600px] pt-10">
|
<div class="w-[90%] pt-10 md:w-[600px]">
|
||||||
<Card primaryColor="#19a7ce">
|
<Card primaryColor="#19a7ce">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="flex flex-col justify-left w-full">
|
<div class="justify-left flex w-full flex-col">
|
||||||
<h2 class="font-bold text-2xl">Frontend Development</h2>
|
<h2 class="text-2xl font-bold">Frontend Development</h2>
|
||||||
</div>
|
</div>
|
||||||
<hr class="w-full" />
|
<hr class="w-full" />
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
|
|
@ -20,93 +20,59 @@ import Line from "../elements/NetworkLine.astro";
|
||||||
web development, I delved into frontend frameworks such
|
web development, I delved into frontend frameworks such
|
||||||
as Svelte, React and Astro.
|
as Svelte, React and Astro.
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full flex flex-row flex-wrap justify-start">
|
<div class="flex w-full flex-row flex-wrap justify-start">
|
||||||
<div
|
<div
|
||||||
class="w-fit
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
|
||||||
text-white bg-[#B11700] md:bg-gray-500 hover:bg-[#B11700]
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
HTML
|
HTML
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-blue-700 md:bg-gray-500 hover:bg-blue-700
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-700 md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
CSS
|
CSS
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit md:text-white bg-yellow-400 md:bg-gray-500 hover:bg-yellow-400 text-black md:hover:text-black
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300 hover:bg-yellow-400 md:bg-gray-500 md:text-white md:hover:text-black"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
Javascript
|
Javascript
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit md:text-white bg-[#3178C6] md:bg-gray-500 hover:bg-[#3178C6] text-white md:hover:text-white
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3178C6] md:bg-gray-500 md:text-white md:hover:text-white"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
TypeScript
|
TypeScript
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#B11700] md:bg-gray-500 hover:bg-[#B11700]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
Svelte
|
Svelte
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit md:text-white bg-[#00D8FF] md:bg-gray-500 hover:bg-[#00D8FF] text-black md:hover:text-black
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#00D8FF] md:bg-gray-500 md:text-white md:hover:text-black"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
React
|
React
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit md:text-white bg-green-500 md:bg-gray-500 hover:bg-green-500 text-black md:hover:text-black
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-green-500 md:bg-gray-500 md:text-white md:hover:text-black"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
Vue
|
Vue
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#21759B] md:bg-gray-500 hover:bg-[#21759B]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#21759B] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#21759B] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
WordPress
|
WordPress
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit md:text-white bg-white md:bg-gray-500 hover:bg-white text-black md:hover:text-black
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-white px-3 py-1 text-black transition-colors duration-300 hover:bg-white md:bg-gray-500 md:text-white md:hover:text-black"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
Astro
|
Astro
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#3366CC] md:bg-gray-500 hover:bg-[#3366CC] hover:text-white
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3366CC] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3366CC] hover:text-white md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
HTMX
|
HTMX
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit md:text-white bg-[#07B6D4] md:bg-gray-500 hover:bg-[#07B6D4] text-black md:hover:text-black
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#07B6D4] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#07B6D4] md:bg-gray-500 md:text-white md:hover:text-black"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
TailwindCSS
|
TailwindCSS
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -116,8 +82,8 @@ import Line from "../elements/NetworkLine.astro";
|
||||||
<Line height="50px" />
|
<Line height="50px" />
|
||||||
<Card primaryColor="#474F7A">
|
<Card primaryColor="#474F7A">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="flex flex-col justify-left w-full">
|
<div class="justify-left flex w-full flex-col">
|
||||||
<h2 class="font-bold text-2xl">Backend Development</h2>
|
<h2 class="text-2xl font-bold">Backend Development</h2>
|
||||||
</div>
|
</div>
|
||||||
<hr class="w-full" />
|
<hr class="w-full" />
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
|
|
@ -128,88 +94,60 @@ import Line from "../elements/NetworkLine.astro";
|
||||||
experienced with backend web development, managing
|
experienced with backend web development, managing
|
||||||
databases and building performant applications.
|
databases and building performant applications.
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full flex flex-row flex-wrap justify-start">
|
<div class="flex w-full flex-row flex-wrap justify-start">
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#3776AB] md:bg-gray-500 hover:bg-[#3776AB]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
Python
|
Python
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#ED8B00] md:bg-gray-500 hover:bg-[#ED8B00]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#672079] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#672079] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
Java
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit text-white bg-[#672079] md:bg-gray-500 hover:bg-[#672079]
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
C#
|
C#
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#3D5694] md:bg-gray-500 hover:bg-[#3D5694]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
>
|
||||||
cursor-default
|
Java
|
||||||
transition-colors duration-300"
|
</div>
|
||||||
|
<div
|
||||||
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500"
|
||||||
|
>
|
||||||
|
Kotlin
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3D5694] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3D5694] md:bg-gray-500"
|
||||||
>
|
>
|
||||||
PHP
|
PHP
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#006080] md:bg-gray-500 hover:bg-[#006080]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#006080] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#006080] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
Go
|
Go
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#B11700] md:bg-gray-500 hover:bg-[#B11700]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
Rust
|
Rust
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#316192] md:bg-gray-500 hover:bg-[#4479A1]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#316192] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
PostgreSQL
|
PostgreSQL
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#4479A1] md:bg-gray-500 hover:bg-[#4479A1]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
MySQL
|
MySQL
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
class="w-fit md:text-white bg-[#24C8D8] md:bg-gray-500 hover:bg-[#24C8D8] text-black md:hover:text-black
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
Tauri
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
<Line height="50px" />
|
<Line height="50px" />
|
||||||
<Card primaryColor="#a1eebd">
|
<Card primaryColor="#a1eebd">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="flex flex-col justify-left w-full">
|
<div class="justify-left flex w-full flex-col">
|
||||||
<h2 class="font-bold text-2xl">Data Science</h2>
|
<h2 class="text-2xl font-bold">Data Science</h2>
|
||||||
</div>
|
</div>
|
||||||
<hr class="w-full" />
|
<hr class="w-full" />
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
|
|
@ -221,68 +159,44 @@ import Line from "../elements/NetworkLine.astro";
|
||||||
as extracting, transforming and loading data, as well as
|
as extracting, transforming and loading data, as well as
|
||||||
data visualisation.
|
data visualisation.
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full flex flex-row flex-wrap justify-start">
|
<div class="flex w-full flex-row flex-wrap justify-start">
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#3776AB] md:bg-gray-500 hover:bg-[#3776AB]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
Python
|
Python
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-cyan-500 md:bg-gray-500 hover:bg-cyan-500
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-cyan-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-cyan-500 md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
R
|
R
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#10652F] md:bg-gray-500 hover:bg-[#10652F]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#10652F] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#10652F] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
OpenCV
|
OpenCV
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit md:text-white bg-blue-500 md:bg-gray-500 hover:bg-blue-500 text-black md:hover:text-black
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-blue-500 md:bg-gray-500 md:text-white md:hover:text-black"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
SAS
|
SAS
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-[#4479A1] md:bg-gray-500 hover:bg-[#4479A1]
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
MySQL
|
MySQL
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-blue-800 md:bg-gray-500 hover:bg-blue-800
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-800 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-800 md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
Pandas
|
Pandas
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-green-700 md:bg-gray-500 hover:bg-green-700
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-green-700 md:bg-gray-500"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
Selenium
|
Selenium
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit md:text-white bg-gray-200 md:bg-gray-500 hover:bg-gray-200 text-black md:hover:text-black
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-200 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-200 md:bg-gray-500 md:text-white md:hover:text-black"
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
cursor-default
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
>
|
||||||
BeautifulSoup4
|
BeautifulSoup4
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue