updated skills, Backend

This commit is contained in:
liyunze 2024-01-30 18:26:41 +08:00
parent 4e82e18472
commit ef3f88ff23

View file

@ -10,15 +10,15 @@ import Line from "../elements/NetworkLine.astro";
<Card primaryColor="#19a7ce">
<div class="card-content">
<div class="flex flex-col justify-left w-full">
<h2 class="font-bold text-2xl">Web Development</h2>
<h2 class="font-bold text-2xl">Frontend Development</h2>
</div>
<hr class="w-full" />
<p class="text-left lg:text-justify">
I started my web development journey by building
websites and widgets using vanilla HTML, CSS, Javascript
and Express. As I learnt more about the fundamentals of
web development, I delved into frameworks such as
Svelte, React and Astro.
web development, I delved into frontend frameworks such
as Svelte, React and Astro.
</p>
<div class="w-full flex flex-row flex-wrap justify-start">
<div
@ -54,39 +54,7 @@ import Line from "../elements/NetworkLine.astro";
TypeScript
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#617CBE]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
PHP
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#00ADD8] hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Go
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Rust
</div>
<div
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
cursor-default
transition-colors duration-300"
>
Express
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-orange-500
class="w-fit text-white bg-gray-500 hover:bg-[#FF3E00]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
@ -134,7 +102,7 @@ import Line from "../elements/NetworkLine.astro";
TailwindCSS
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#8500C7]
class="w-fit text-white bg-gray-500 hover:bg-[#646CFF]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
@ -145,6 +113,137 @@ import Line from "../elements/NetworkLine.astro";
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#474F7A">
<div class="card-content">
<div class="flex flex-col justify-left w-full">
<h2 class="font-bold text-2xl">Backend Development</h2>
</div>
<hr class="w-full" />
<p class="text-left lg:text-justify">
In the beginning, I used my Python skills to entertain
and to automate the boring stuff, such as using Selenium
for automation + web scraping, play chess by automating
mouse controls and build Discord bots. Now, I am
experienced with backend web development, managing
databases and building performant applications.
</p>
<div class="w-full flex flex-row flex-wrap justify-start">
<div
class="w-fit text-white bg-gray-500 hover:bg-[#3776AB]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Python
</div>
<div
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
cursor-default
transition-colors duration-300"
>
Javascript
</div>
<div
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
cursor-default
transition-colors duration-300"
>
TypeScript
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#617CBE]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
PHP
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#00ADD8]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Go
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Rust
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#4479A1]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
MySQL
</div>
<div
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
cursor-default
transition-colors duration-300"
>
Express
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#339933]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Node.js
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#FBEFDF] hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Bun
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#FF3E00]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Sveltekit
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Next.js
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#21759B]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
WordPress
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-[#24C8D8] hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Tauri
</div>
</div>
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#a1eebd">
<div class="card-content">
<div class="flex flex-col justify-left w-full">
@ -162,7 +261,7 @@ import Line from "../elements/NetworkLine.astro";
</p>
<div class="w-full flex flex-row flex-wrap justify-start">
<div
class="w-fit text-white bg-gray-500 hover:text-white hover:bg-blue-700
class="w-fit text-white bg-gray-500 hover:bg-[#3776AB]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
@ -194,7 +293,7 @@ import Line from "../elements/NetworkLine.astro";
SAS
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-orange-700
class="w-fit text-white bg-gray-500 hover:bg-[#4479A1]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"