mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 15:53:57 +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 Card from "../global/Card.astro";
|
||||||
import Line from "../global/NetworkLine.astro";
|
import Line from "../global/NetworkLine.astro";
|
||||||
|
import Skill from "./Skill.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="Experience" class="h-fit">
|
<div id="Experience" class="h-fit">
|
||||||
<div class="flex flex-col items-center">
|
<div class="flex flex-col items-center">
|
||||||
<div class="w-[90%] md:w-[600px]">
|
<div class="w-[90%] md:w-[600px]">
|
||||||
<Line height="50px" />
|
<Line height="50px" />
|
||||||
<div class="mx-auto w-[90%] md:w-[600px]">
|
<Skill
|
||||||
<Card primaryColor="#9D76C1">
|
title="Content Creation"
|
||||||
<div class="px-8 py-8">
|
primaryColor="#9D76C1"
|
||||||
<div class="justify-left flex w-full flex-col">
|
tags={[
|
||||||
<h2 class="text-2xl font-bold">Content Creation</h2>
|
{ text: "OBS", bgColor: "#141414" },
|
||||||
</div>
|
{
|
||||||
<hr class="my-3 w-full" />
|
text: "DaVinci Resolve",
|
||||||
<p class="text-left">
|
bgColor: "white",
|
||||||
Since I was little, I loved watching YouTube videos
|
hoverTextColor: "black",
|
||||||
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
|
text: "Twitch",
|
||||||
streaming. I typically do coworking & study streams
|
bgColor: "var(--color-purple-500)",
|
||||||
to keep myself accountable and encourage
|
},
|
||||||
productivity amongst viewers. I also do software and
|
{
|
||||||
game development streams where I showcase my
|
text: "YouTube",
|
||||||
workflow.
|
bgColor: "red",
|
||||||
</p>
|
},
|
||||||
<div
|
]}
|
||||||
class="flex w-full flex-row flex-wrap justify-start"
|
|
||||||
>
|
>
|
||||||
<div
|
Since I was little, I loved watching YouTube videos and the idea
|
||||||
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"
|
of bringing joy and laughter to a wider audience. Thus, I began
|
||||||
>
|
my journey in content creation through YouTube videos and Twitch
|
||||||
OBS
|
streaming. I typically do coworking & study streams to keep
|
||||||
</div>
|
myself accountable and encourage productivity amongst viewers. I
|
||||||
<div
|
also do software and game development streams where I showcase
|
||||||
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"
|
my workflow.
|
||||||
>
|
</Skill>
|
||||||
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" />
|
<Line height="50px" />
|
||||||
<div class="mx-auto w-[90%] md:w-[600px]">
|
<Skill
|
||||||
<Card primaryColor="#9D76C1">
|
primaryColor="#9D76C1"
|
||||||
<div class="px-8 py-8">
|
title="Mobile Development"
|
||||||
<div class="justify-left flex w-full flex-col">
|
tags={[
|
||||||
<h2 class="text-2xl font-bold">
|
{
|
||||||
Mobile Development
|
text: "Android",
|
||||||
</h2>
|
bgColor: "#106539",
|
||||||
</div>
|
},
|
||||||
<hr class="my-3 w-full" />
|
{
|
||||||
<p class="text-left">
|
text: "Java",
|
||||||
In my Mobile App Development unit in University, I
|
bgColor: "var(--color-java)",
|
||||||
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
|
text: "Kotlin",
|
||||||
your own topics, viewing your question attempt
|
bgColor: "var(--color-kotlin)",
|
||||||
history afterwards, and upgrading your tier with
|
},
|
||||||
Google Pay.
|
]}
|
||||||
|
><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>
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
The marking tutor was impressed with my work, and
|
The marking tutor was impressed with my work, and offered me
|
||||||
offered me to join a research lab because I had good
|
to join a research lab because I had good potential.
|
||||||
potential.
|
|
||||||
</p>
|
</p>
|
||||||
<div
|
</Skill>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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 Card from "../global/Card.astro";
|
||||||
import Line from "../global/NetworkLine.astro";
|
import Line from "../global/NetworkLine.astro";
|
||||||
|
import Skill from "./Skill.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="h-fit w-full 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%] pt-10 md:w-[600px]">
|
<div class="w-[90%] pt-10 md:w-[600px]">
|
||||||
<Card primaryColor="#19a7ce">
|
<Skill
|
||||||
<div class="px-8 py-8">
|
title="Frontend Development"
|
||||||
<div class="justify-left flex w-full flex-col">
|
primaryColor="#19a7ce"
|
||||||
<h2 class="text-2xl font-bold">Frontend Development</h2>
|
tags={[
|
||||||
</div>
|
{
|
||||||
<hr class="my-3 w-full" />
|
text: "HTML",
|
||||||
<p class="text-left">
|
bgColor: "var(--color-html)",
|
||||||
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
|
text: "CSS",
|
||||||
web development, I delved into frontend frameworks such
|
bgColor: "var(--color-blue-700)",
|
||||||
as Svelte, React and Astro.
|
},
|
||||||
</p>
|
{
|
||||||
<div
|
text: "Javascript",
|
||||||
class="mt-4 flex w-full flex-row flex-wrap justify-start"
|
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",
|
||||||
|
},
|
||||||
|
]}
|
||||||
>
|
>
|
||||||
<div
|
I started my web development journey by building websites and
|
||||||
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"
|
widgets using vanilla HTML, CSS, Javascript and Express. As I
|
||||||
>
|
learnt more about the fundamentals of web development, I delved
|
||||||
HTML
|
into frontend frameworks such as Svelte, React and Astro.
|
||||||
</div>
|
</Skill>
|
||||||
<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>
|
|
||||||
<Line height="50px" />
|
<Line height="50px" />
|
||||||
<Card primaryColor="#474F7A">
|
<Skill
|
||||||
<div class="px-8 py-8">
|
title="Backend Development"
|
||||||
<div class="justify-left flex w-full flex-col">
|
primaryColor="#474F7A"
|
||||||
<h2 class="text-2xl font-bold">Backend Development</h2>
|
tags={[
|
||||||
</div>
|
{
|
||||||
<hr class="my-3 w-full" />
|
text: "Python",
|
||||||
<p class="text-left">
|
bgColor: "var(--color-python)",
|
||||||
With experience in various programming languages, I
|
},
|
||||||
learnt to setup databases, implement routing and
|
{
|
||||||
organized my code to ensure maintainability and
|
text: "C#",
|
||||||
scalability.
|
bgColor: "var(--color-csharp)",
|
||||||
</p>
|
},
|
||||||
<div
|
{
|
||||||
class="mt-4 flex w-full flex-row flex-wrap justify-start"
|
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)",
|
||||||
|
},
|
||||||
|
]}
|
||||||
>
|
>
|
||||||
<div
|
With experience in various programming languages, I learnt to
|
||||||
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"
|
setup databases, implement routing and organized my code to
|
||||||
>
|
ensure maintainability and scalability.
|
||||||
Python
|
</Skill>
|
||||||
</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>
|
|
||||||
<Line height="50px" />
|
<Line height="50px" />
|
||||||
<Card primaryColor="#a1eebd">
|
<Skill
|
||||||
<div class="px-8 py-8">
|
title="Data Science"
|
||||||
<div class="justify-left flex w-full flex-col">
|
primaryColor="#a1eebd"
|
||||||
<h2 class="text-2xl font-bold">Data Science</h2>
|
tags={[
|
||||||
</div>
|
{
|
||||||
<hr class="my-3 w-full" />
|
text: "Python",
|
||||||
<p class="text-left">
|
bgColor: "var(--color-python)",
|
||||||
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
|
text: "R",
|
||||||
Diploma course that is focused in data science, where I
|
bgColor: "var(--color-cyan-500)",
|
||||||
learnt how to do the fundamentals of data science such
|
},
|
||||||
as extracting, transforming and loading data, as well as
|
{
|
||||||
data visualisation.
|
text: "OpenCV",
|
||||||
</p>
|
bgColor: "var(--color-opencv)",
|
||||||
<div
|
},
|
||||||
class="mt-4 flex w-full flex-row flex-wrap justify-start"
|
{
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
]}
|
||||||
>
|
>
|
||||||
<div
|
My first exposure to data science was through learning Computer
|
||||||
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"
|
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
|
||||||
Python
|
in data science, where I learnt how to do the fundamentals of
|
||||||
</div>
|
data science such as extracting, transforming and loading data,
|
||||||
<div
|
as well as data visualisation.
|
||||||
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"
|
</Skill>
|
||||||
>
|
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue