mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 15:53:57 +00:00
321 lines
12 KiB
Text
321 lines
12 KiB
Text
---
|
|
import Card from "../elements/Card.astro";
|
|
import Line from "../elements/NetworkLine.astro";
|
|
---
|
|
|
|
<div class="w-full h-fit pt-20">
|
|
<h1 class="text-center text-5xl">Skills</h1>
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-[90%] md:w-[600px] pt-10">
|
|
<Card primaryColor="#19a7ce">
|
|
<div class="card-content">
|
|
<div class="flex flex-col justify-left w-full">
|
|
<h2 class="font-bold text-2xl">Frontend Development</h2>
|
|
</div>
|
|
<hr class="w-full" />
|
|
<p class="text-left">
|
|
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 frontend frameworks such
|
|
as Svelte, React and Astro.
|
|
</p>
|
|
<div class="w-full flex flex-row flex-wrap justify-start">
|
|
<div
|
|
class="w-fit text-white bg-orange-700 md:bg-gray-500 hover:bg-orange-700
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
HTML
|
|
</div>
|
|
<div
|
|
class="w-fit text-white bg-blue-700 md:bg-gray-500 hover:bg-blue-700
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
CSS
|
|
</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
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
Javascript
|
|
</div>
|
|
<div
|
|
class="w-fit md:text-white bg-[#3178C6] md:bg-gray-500 hover:bg-[#3178C6] text-white md:hover:text-white
|
|
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-[#FF3E00] md:bg-gray-500 hover:bg-[#FF3E00]
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
Svelte
|
|
</div>
|
|
<div
|
|
class="w-fit md:text-white bg-[#00D8FF] md:bg-gray-500 hover:bg-[#00D8FF] text-black md:hover:text-black
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
React
|
|
</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
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
Vue
|
|
</div>
|
|
<div
|
|
class="w-fit text-white bg-[#21759B] md: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 md:text-white bg-gray-500 hover:bg-white text-black md:hover:text-black
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
Astro
|
|
</div>
|
|
<div
|
|
class="w-fit text-white bg-[#3366CC] md:bg-gray-500 hover:bg-[#3366CC] hover:text-white
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
HTMX
|
|
</div>
|
|
<div
|
|
class="w-fit md:text-white bg-[#07B6D4] md:bg-gray-500 hover:bg-[#07B6D4] text-black md:hover:text-black
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
TailwindCSS
|
|
</div>
|
|
<div
|
|
class="w-fit text-white bg-[#646CFF] md:bg-gray-500 hover:bg-[#646CFF]
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
Vite
|
|
</div>
|
|
</div>
|
|
</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">
|
|
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-[#3776AB] md: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 md:text-white bg-yellow-400 md:bg-gray-500 hover:bg-yellow-400 text-black md: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 md:text-white bg-[#3178C6] md:bg-gray-500 hover:bg-[#3178C6] text-white md:hover:text-white
|
|
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-[#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#
|
|
</div>
|
|
<div
|
|
class="w-fit text-white bg-[#617CBE] md: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-[#00ADD8] md: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-[#4479A1] md: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 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>
|
|
</Card>
|
|
<Line height="50px" />
|
|
<Card primaryColor="#a1eebd">
|
|
<div class="card-content">
|
|
<div class="flex flex-col justify-left w-full">
|
|
<h2 class="font-bold text-2xl">Data Science</h2>
|
|
</div>
|
|
<hr class="w-full" />
|
|
<p class="text-left">
|
|
My first exposure to data science was through learning
|
|
Computer Vision. I learn how to use OpenCV in Python to
|
|
open a webcam and detect faces. Later on, I took a
|
|
Diploma course that is focused in data science, where I
|
|
learnt how to do the fundamentals of data science such
|
|
as extracting, transforming and loading data, as well as
|
|
data visualisation.
|
|
</p>
|
|
<div class="w-full flex flex-row flex-wrap justify-start">
|
|
<div
|
|
class="w-fit text-white bg-[#3776AB] md: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-cyan-500 md:bg-gray-500 hover:bg-cyan-500
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
R
|
|
</div>
|
|
<div
|
|
class="w-fit text-white bg-green-600 md:bg-gray-500 hover:bg-green-600
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
OpenCV
|
|
</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
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
SAS
|
|
</div>
|
|
<div
|
|
class="w-fit text-white bg-[#4479A1] md: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-blue-800 md:bg-gray-500 hover:bg-blue-800
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
Pandas
|
|
</div>
|
|
<div
|
|
class="w-fit text-white bg-green-700 md:bg-gray-500 hover:bg-green-700
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
Selenium
|
|
</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
|
|
rounded-full px-3 py-1 mr-1 my-1
|
|
cursor-default
|
|
transition-colors duration-300"
|
|
>
|
|
BeautifulSoup4
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
background-image: radial-gradient(
|
|
rgba(255, 255, 255, 0.1) 1px,
|
|
transparent 1px
|
|
);
|
|
background-position: 50% 50%;
|
|
background-size: 1.1rem 1.1rem;
|
|
padding-top: 2rem;
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
padding-bottom: 0.5rem;
|
|
border-radius: 1.25rem;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|