mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
added skill component
This commit is contained in:
liyunze
parent
cb53ad26f4
commit
b1a6ef4237
3 changed files with 280 additions and 293 deletions
|
|
@ -1,103 +1,72 @@
|
|||
---
|
||||
import Card from "../global/Card.astro";
|
||||
import Line from "../global/NetworkLine.astro";
|
||||
import Skill from "./Skill.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="px-8 py-8">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">Content Creation</h2>
|
||||
</div>
|
||||
<hr class="my-3 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>
|
||||
<Skill
|
||||
title="Content Creation"
|
||||
primaryColor="#9D76C1"
|
||||
tags={[
|
||||
{ text: "OBS", bgColor: "#141414" },
|
||||
{
|
||||
text: "DaVinci Resolve",
|
||||
bgColor: "white",
|
||||
hoverTextColor: "black",
|
||||
},
|
||||
{
|
||||
text: "Twitch",
|
||||
bgColor: "var(--color-purple-500)",
|
||||
},
|
||||
{
|
||||
text: "YouTube",
|
||||
bgColor: "red",
|
||||
},
|
||||
]}
|
||||
>
|
||||
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.
|
||||
</Skill>
|
||||
<Line height="50px" />
|
||||
<div class="mx-auto w-[90%] md:w-[600px]">
|
||||
<Card primaryColor="#9D76C1">
|
||||
<div class="px-8 py-8">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">
|
||||
Mobile Development
|
||||
</h2>
|
||||
</div>
|
||||
<hr class="my-3 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="mt-5 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>
|
||||
<Skill
|
||||
primaryColor="#9D76C1"
|
||||
title="Mobile Development"
|
||||
tags={[
|
||||
{
|
||||
text: "Android",
|
||||
bgColor: "#106539",
|
||||
},
|
||||
{
|
||||
text: "Java",
|
||||
bgColor: "var(--color-java)",
|
||||
},
|
||||
{
|
||||
text: "Kotlin",
|
||||
bgColor: "var(--color-kotlin)",
|
||||
},
|
||||
]}
|
||||
><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>
|
||||
</Skill>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
63
src/components/skills/Skill.astro
Normal file
63
src/components/skills/Skill.astro
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
---
|
||||
import Card from "../global/Card.astro";
|
||||
|
||||
interface Tag {
|
||||
text: string;
|
||||
bgColor: string;
|
||||
textColor?: string;
|
||||
hoverTextColor?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
tags?: Tag[];
|
||||
primaryColor: string;
|
||||
}
|
||||
|
||||
const { title, tags, primaryColor } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="mx-auto w-[90%] md:w-[600px]">
|
||||
<Card primaryColor={primaryColor}>
|
||||
<div class="px-8 py-8">
|
||||
<div class="flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">{title}</h2>
|
||||
</div>
|
||||
<hr class="my-3 w-full" />
|
||||
<p class="text-left">
|
||||
<slot />
|
||||
</p>
|
||||
<div class="mt-5 flex w-full flex-row flex-wrap justify-start">
|
||||
{
|
||||
tags?.map((tag, index) => (
|
||||
<div
|
||||
class={`tag-${index} my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 transition-colors duration-300`}
|
||||
style={`--tag-bg: ${tag.bgColor || "#000"}; --tag-text: ${tag.textColor || "#ffffff"};
|
||||
--tag-hover-text: ${tag.hoverTextColor || "#ffffff"}`}
|
||||
>
|
||||
{tag.text}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[class*="tag-"] {
|
||||
background-color: var(--tag-bg);
|
||||
color: var(--tag-text);
|
||||
|
||||
@media (width >= 48rem /* 768px */) {
|
||||
background-color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--tag-bg);
|
||||
color: var(--tag-hover-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,217 +1,172 @@
|
|||
---
|
||||
import Card from "../global/Card.astro";
|
||||
import Line from "../global/NetworkLine.astro";
|
||||
import Skill from "./Skill.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="px-8 py-8">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">Frontend Development</h2>
|
||||
</div>
|
||||
<hr class="my-3 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="mt-4 flex w-full flex-row flex-wrap justify-start"
|
||||
>
|
||||
<div
|
||||
class="bg-html hover:bg-html my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 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="bg-typescript hover:bg-typescript my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500 md:text-white md:hover:text-white"
|
||||
>
|
||||
TypeScript
|
||||
</div>
|
||||
<div
|
||||
class="hover:bg-svelte bg-svelte my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
|
||||
>
|
||||
Svelte
|
||||
</div>
|
||||
<div
|
||||
class="bg-react hover:bg-react my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-black transition-colors duration-300 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="bg-wordpress hover:bg-wordpress my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 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="bg-htmx hover:bg-htmx my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 hover:text-white md:bg-gray-500"
|
||||
>
|
||||
HTMX
|
||||
</div>
|
||||
<div
|
||||
class="bg-tailwind hover:bg-tailwind my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-black transition-colors duration-300 md:bg-gray-500 md:text-white md:hover:text-black"
|
||||
>
|
||||
TailwindCSS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Skill
|
||||
title="Frontend Development"
|
||||
primaryColor="#19a7ce"
|
||||
tags={[
|
||||
{
|
||||
text: "HTML",
|
||||
bgColor: "var(--color-html)",
|
||||
},
|
||||
{
|
||||
text: "CSS",
|
||||
bgColor: "var(--color-blue-700)",
|
||||
},
|
||||
{
|
||||
text: "Javascript",
|
||||
bgColor: "var(--color-yellow-400)",
|
||||
hoverTextColor: "black",
|
||||
},
|
||||
{
|
||||
text: "Typescript",
|
||||
bgColor: "var(--color-typescript)",
|
||||
},
|
||||
{
|
||||
text: "Svelte",
|
||||
bgColor: "var(--color-svelte)",
|
||||
},
|
||||
{
|
||||
text: "React",
|
||||
bgColor: "var(--color-react)",
|
||||
hoverTextColor: "black",
|
||||
},
|
||||
{
|
||||
text: "Vue",
|
||||
bgColor: "var(--color-green-500)",
|
||||
hoverTextColor: "black",
|
||||
},
|
||||
{
|
||||
text: "WordPress",
|
||||
bgColor: "var(--color-wordpress)",
|
||||
},
|
||||
{
|
||||
text: "Astro",
|
||||
bgColor: "white",
|
||||
hoverTextColor: "black",
|
||||
},
|
||||
{
|
||||
text: "HTMX",
|
||||
bgColor: "var(--color-htmx)",
|
||||
},
|
||||
{
|
||||
text: "TailwindCSS",
|
||||
bgColor: "var(--color-tailwind)",
|
||||
hoverTextColor: "black",
|
||||
},
|
||||
]}
|
||||
>
|
||||
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.
|
||||
</Skill>
|
||||
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#474F7A">
|
||||
<div class="px-8 py-8">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">Backend Development</h2>
|
||||
</div>
|
||||
<hr class="my-3 w-full" />
|
||||
<p class="text-left">
|
||||
With experience in various programming languages, I
|
||||
learnt to setup databases, implement routing and
|
||||
organized my code to ensure maintainability and
|
||||
scalability.
|
||||
</p>
|
||||
<div
|
||||
class="mt-4 flex w-full flex-row flex-wrap justify-start"
|
||||
>
|
||||
<div
|
||||
class="bg-python hover:bg-python my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
|
||||
>
|
||||
Python
|
||||
</div>
|
||||
<div
|
||||
class="bg-csharp hover:bg-csharp my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
|
||||
>
|
||||
C#
|
||||
</div>
|
||||
<div
|
||||
class="bg-java hover:bg-java my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
|
||||
>
|
||||
Java
|
||||
</div>
|
||||
<div
|
||||
class="bg-kotlin hover:bg-kotlin my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
|
||||
>
|
||||
Kotlin
|
||||
</div>
|
||||
<div
|
||||
class="bg-php hover:bg-php my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
|
||||
>
|
||||
PHP
|
||||
</div>
|
||||
<div
|
||||
class="bg-go hover:bg-go my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-30 md:bg-gray-500"
|
||||
>
|
||||
Go
|
||||
</div>
|
||||
<div
|
||||
class="bg-rust hover:bg-rust my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
|
||||
>
|
||||
Rust
|
||||
</div>
|
||||
<div
|
||||
class="bg-postgresql hover:bg-postgresql my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
|
||||
>
|
||||
PostgreSQL
|
||||
</div>
|
||||
<div
|
||||
class="bg-mysql hover:bg-mysql my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
|
||||
>
|
||||
MySQL
|
||||
</div>
|
||||
<div
|
||||
class="bg-mongodb hover:bg-mongodb my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
|
||||
>
|
||||
MongoDB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Skill
|
||||
title="Backend Development"
|
||||
primaryColor="#474F7A"
|
||||
tags={[
|
||||
{
|
||||
text: "Python",
|
||||
bgColor: "var(--color-python)",
|
||||
},
|
||||
{
|
||||
text: "C#",
|
||||
bgColor: "var(--color-csharp)",
|
||||
},
|
||||
{
|
||||
text: "Java",
|
||||
bgColor: "var(--color-java)",
|
||||
},
|
||||
{
|
||||
text: "Kotlin",
|
||||
bgColor: "var(--color-kotlin)",
|
||||
},
|
||||
{
|
||||
text: "PHP",
|
||||
bgColor: "var(--color-php)",
|
||||
},
|
||||
{
|
||||
text: "Go",
|
||||
bgColor: "var(--color-go)",
|
||||
},
|
||||
{
|
||||
text: "Rust",
|
||||
bgColor: "var(--color-rust)",
|
||||
},
|
||||
{
|
||||
text: "PostgreSQL",
|
||||
bgColor: "var(--color-postgresql)",
|
||||
},
|
||||
{
|
||||
text: "MySQL",
|
||||
bgColor: "var(--color-mysql)",
|
||||
},
|
||||
{
|
||||
text: "MongoDB",
|
||||
bgColor: "var(--color-mongodb)",
|
||||
},
|
||||
]}
|
||||
>
|
||||
With experience in various programming languages, I learnt to
|
||||
setup databases, implement routing and organized my code to
|
||||
ensure maintainability and scalability.
|
||||
</Skill>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#a1eebd">
|
||||
<div class="px-8 py-8">
|
||||
<div class="justify-left flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">Data Science</h2>
|
||||
</div>
|
||||
<hr class="my-3 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="mt-4 flex w-full flex-row flex-wrap justify-start"
|
||||
>
|
||||
<div
|
||||
class="bg-python hover:bg-python my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 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="bg-opencv hover:bg-opencv my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 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="bg-mysql hover:bg-mysql my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 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>
|
||||
<Skill
|
||||
title="Data Science"
|
||||
primaryColor="#a1eebd"
|
||||
tags={[
|
||||
{
|
||||
text: "Python",
|
||||
bgColor: "var(--color-python)",
|
||||
},
|
||||
{
|
||||
text: "R",
|
||||
bgColor: "var(--color-cyan-500)",
|
||||
},
|
||||
{
|
||||
text: "OpenCV",
|
||||
bgColor: "var(--color-opencv)",
|
||||
},
|
||||
{
|
||||
text: "SAS",
|
||||
bgColor: "var(--color-blue-500)",
|
||||
},
|
||||
{
|
||||
text: "MySQL",
|
||||
bgColor: "var(--color-mysql)",
|
||||
},
|
||||
{
|
||||
text: "Pandas",
|
||||
bgColor: "var(--color-blue-800)",
|
||||
},
|
||||
{
|
||||
text: "Selenium",
|
||||
bgColor: "var(--color-green-700)",
|
||||
},
|
||||
{
|
||||
text: "BeautifulSoup4",
|
||||
bgColor: "white",
|
||||
hoverTextColor: "black",
|
||||
},
|
||||
]}
|
||||
>
|
||||
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.
|
||||
</Skill>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue