mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
added experiences and skills
This commit is contained in:
liyunze
parent
a7733018a7
commit
7267c82972
4 changed files with 377 additions and 288 deletions
|
|
@ -30,6 +30,10 @@ import Line from "../elements/NetworkLine.astro";
|
|||
<li>C#</li>
|
||||
<li>Vue.JS</li>
|
||||
</ul>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>MongoDB</li>
|
||||
<li>PostgreSQL</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
|
@ -38,7 +42,7 @@ import Line from "../elements/NetworkLine.astro";
|
|||
<div class="card-content px-4 py-4 md:px-8 md:py-8">
|
||||
<div class="mb-3 flex w-full flex-col justify-start gap-1">
|
||||
<h2 class="text-xl font-bold">
|
||||
Lead Frontend Web Developer
|
||||
Lead Full Stack Developer
|
||||
</h2>
|
||||
<h3 class="font-bold">@ JW BizTech</h3>
|
||||
<h3>Dec 2024 - Present</h3>
|
||||
|
|
|
|||
123
src/components/sections/MoreSkills.astro
Normal file
123
src/components/sections/MoreSkills.astro
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
---
|
||||
import Card from "../elements/Card.astro";
|
||||
import Line from "../elements/NetworkLine.astro";
|
||||
---
|
||||
|
||||
<div id="Experience" class="h-fit">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-[90%] md:w-[600px]">
|
||||
<Line height="50px" />
|
||||
<div class="mx-auto w-[90%] md:w-[600px]">
|
||||
<Card primaryColor="#9D76C1">
|
||||
<div class="card-content">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">Content Creation</h2>
|
||||
</div>
|
||||
<hr class="w-full" />
|
||||
<p class="text-left">
|
||||
Since I was little, I loved watching YouTube videos
|
||||
and the idea of bringing joy and laughter to a wider
|
||||
audience. Thus, I began my journey in content
|
||||
creation through YouTube videos and Twitch
|
||||
streaming. I typically do coworking & study streams
|
||||
to keep myself accountable and encourage
|
||||
productivity amongst viewers. I also do software and
|
||||
game development streams where I showcase my
|
||||
workflow.
|
||||
</p>
|
||||
<div
|
||||
class="flex w-full flex-row flex-wrap justify-start"
|
||||
>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#141414] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#141414] hover:text-white md:bg-gray-500"
|
||||
>
|
||||
OBS
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-50 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-50 hover:text-black md:bg-gray-500 md:text-white"
|
||||
>
|
||||
DaVinci Resolve
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit cursor-default rounded-full bg-purple-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-purple-500 md:bg-gray-500"
|
||||
>
|
||||
Twitch
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ff0000] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ff0000] hover:text-white md:bg-gray-500"
|
||||
>
|
||||
YouTube
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<Line height="50px" />
|
||||
<div class="mx-auto w-[90%] md:w-[600px]">
|
||||
<Card primaryColor="#9D76C1">
|
||||
<div class="card-content">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">
|
||||
Mobile Development
|
||||
</h2>
|
||||
</div>
|
||||
<hr class="w-full" />
|
||||
<p class="text-left">
|
||||
In my Mobile App Development unit in University, I
|
||||
am tasked to develop Android apps using Android
|
||||
Studio. The final app project I had developed was a
|
||||
LLM-powered quiz app with features such as choosing
|
||||
your own topics, viewing your question attempt
|
||||
history afterwards, and upgrading your tier with
|
||||
Google Pay.
|
||||
</p>
|
||||
<p class="text-left">
|
||||
The marking tutor was impressed with my work, and
|
||||
offered me to join a research lab because I had good
|
||||
potential.
|
||||
</p>
|
||||
<div
|
||||
class="flex w-full flex-row flex-wrap justify-start"
|
||||
>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#106539] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#106539] hover:text-white md:bg-gray-500"
|
||||
>
|
||||
Android
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Java
|
||||
</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>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -4,225 +4,230 @@ import Line from "../elements/NetworkLine.astro";
|
|||
---
|
||||
|
||||
<div class="h-fit w-full pt-20">
|
||||
<h1 class="text-center text-5xl">Skills</h1>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-[90%] pt-10 md:w-[600px]">
|
||||
<Card primaryColor="#19a7ce">
|
||||
<div class="card-content">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">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="flex w-full flex-row flex-wrap justify-start">
|
||||
<div
|
||||
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"
|
||||
>
|
||||
HTML
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
CSS
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Javascript
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
TypeScript
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Svelte
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
React
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Vue
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
WordPress
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Astro
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
HTMX
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
TailwindCSS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#474F7A">
|
||||
<div class="card-content">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">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="flex w-full flex-row flex-wrap justify-start">
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Python
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
C#
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Java
|
||||
</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
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Go
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Rust
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
PostgreSQL
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
MySQL
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#a1eebd">
|
||||
<div class="card-content">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">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="flex w-full flex-row flex-wrap justify-start">
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Python
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
R
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
OpenCV
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
SAS
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
MySQL
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Pandas
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Selenium
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
BeautifulSoup4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-center text-5xl">Skills</h1>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-[90%] pt-10 md:w-[600px]">
|
||||
<Card primaryColor="#19a7ce">
|
||||
<div class="card-content">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">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="flex w-full flex-row flex-wrap justify-start">
|
||||
<div
|
||||
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"
|
||||
>
|
||||
HTML
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
CSS
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Javascript
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
TypeScript
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Svelte
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
React
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Vue
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
WordPress
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Astro
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
HTMX
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
TailwindCSS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#474F7A">
|
||||
<div class="card-content">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">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="flex w-full flex-row flex-wrap justify-start">
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Python
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
C#
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Java
|
||||
</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
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Go
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Rust
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
PostgreSQL
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
MySQL
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#09934E] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#09934E] md:bg-gray-500"
|
||||
>
|
||||
MongoDB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#a1eebd">
|
||||
<div class="card-content">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">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="flex w-full flex-row flex-wrap justify-start">
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Python
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
R
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
OpenCV
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
SAS
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
MySQL
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Pandas
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
Selenium
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
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;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -2,81 +2,38 @@
|
|||
import NavBar from "../components/sections/NavBar.astro";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import SkillsComponent from "../components/sections/SkillsComponent.astro";
|
||||
import Line from "../components/elements/NetworkLine.astro";
|
||||
import Card from "../components/elements/Card.astro";
|
||||
import MoreSkills from "../components/sections/MoreSkills.astro";
|
||||
import Footer from "../components/sections/FooterComponent.astro";
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Skills"
|
||||
description="Learn what skills RythonDev has honed in the past few years"
|
||||
title="Skills"
|
||||
description="Learn what skills RythonDev has honed in the past few years"
|
||||
>
|
||||
<NavBar />
|
||||
<div id="skills" class="mt-10 pb-20">
|
||||
<SkillsComponent />
|
||||
<Line height="50px" />
|
||||
<div class="mx-auto w-[90%] md:w-[600px]">
|
||||
<Card primaryColor="#9D76C1">
|
||||
<div class="card-content">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">Content Creation</h2>
|
||||
</div>
|
||||
<hr class="w-full" />
|
||||
<p class="text-left">
|
||||
Since I was little, I loved watching YouTube videos and
|
||||
the idea of bringing joy and laughter to a wider
|
||||
audience. Thus, I began my journey in content creation
|
||||
through YouTube videos and Twitch streaming. I typically
|
||||
do coworking & study streams to keep myself accountable
|
||||
and encourage productivity amongst viewers. I also do
|
||||
software and game development streams where I showcase
|
||||
my workflow.
|
||||
</p>
|
||||
<div class="flex w-full flex-row flex-wrap justify-start">
|
||||
<div
|
||||
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#141414] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#141414] hover:text-white md:bg-gray-500"
|
||||
>
|
||||
OBS
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-50 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-50 hover:text-black md:bg-gray-500 md:text-white"
|
||||
>
|
||||
DaVinci Resolve
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit cursor-default rounded-full bg-purple-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-purple-500 md:bg-gray-500"
|
||||
>
|
||||
Twitch
|
||||
</div>
|
||||
<div
|
||||
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ff0000] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ff0000] hover:text-white md:bg-gray-500"
|
||||
>
|
||||
YouTube
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
<NavBar />
|
||||
<div id="skills" class="mt-10 pb-20">
|
||||
<SkillsComponent />
|
||||
<MoreSkills />
|
||||
</div>
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<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;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue