From b1a6ef42371fdde64639b8abdf38c06a796c48e8 Mon Sep 17 00:00:00 2001 From: liyunze <50455574+liyunze-coding@users.noreply.github.com> Date: Sat, 21 Jun 2025 09:31:53 +1000 Subject: [PATCH] added skill component --- src/components/skills/MoreSkills.astro | 149 ++++---- src/components/skills/Skill.astro | 63 ++++ src/components/skills/SkillsComponent.astro | 361 +++++++++----------- 3 files changed, 280 insertions(+), 293 deletions(-) create mode 100644 src/components/skills/Skill.astro diff --git a/src/components/skills/MoreSkills.astro b/src/components/skills/MoreSkills.astro index 773bda2..12d12a1 100644 --- a/src/components/skills/MoreSkills.astro +++ b/src/components/skills/MoreSkills.astro @@ -1,103 +1,72 @@ --- import Card from "../global/Card.astro"; import Line from "../global/NetworkLine.astro"; +import Skill from "./Skill.astro"; ---
-
- -
-
-

Content Creation

-
-
-

- 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. -

-
-
- OBS -
-
- DaVinci Resolve -
-
- Twitch -
-
- YouTube -
-
-
- -
+ + 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. + -
- -
-
-

- Mobile Development -

-
-
-

- 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. -

-

- The marking tutor was impressed with my work, and - offered me to join a research lab because I had good - potential. -

-
-
- Android -
-
- Java -
-
- Kotlin -
-
-
- -
+

+ 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. +

+

+ The marking tutor was impressed with my work, and offered me + to join a research lab because I had good potential. +

+
diff --git a/src/components/skills/Skill.astro b/src/components/skills/Skill.astro new file mode 100644 index 0000000..9a0c787 --- /dev/null +++ b/src/components/skills/Skill.astro @@ -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; +--- + +
+ +
+
+

{title}

+
+
+

+ +

+
+ { + tags?.map((tag, index) => ( +
+ {tag.text} +
+ )) + } +
+
+ +
+ + diff --git a/src/components/skills/SkillsComponent.astro b/src/components/skills/SkillsComponent.astro index 11533b1..eb9e443 100644 --- a/src/components/skills/SkillsComponent.astro +++ b/src/components/skills/SkillsComponent.astro @@ -1,217 +1,172 @@ --- import Card from "../global/Card.astro"; import Line from "../global/NetworkLine.astro"; +import Skill from "./Skill.astro"; ---

Skills

- -
-
-

Frontend Development

-
-
-

- 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. -

-
-
- HTML -
-
- CSS -
-
- Javascript -
-
- TypeScript -
-
- Svelte -
-
- React -
-
- Vue -
-
- WordPress -
-
- Astro -
-
- HTMX -
-
- TailwindCSS -
-
-
- + + 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. + + - -
-
-

Backend Development

-
-
-

- With experience in various programming languages, I - learnt to setup databases, implement routing and - organized my code to ensure maintainability and - scalability. -

-
-
- Python -
-
- C# -
-
- Java -
-
- Kotlin -
-
- PHP -
-
- Go -
-
- Rust -
-
- PostgreSQL -
-
- MySQL -
-
- MongoDB -
-
-
- + + With experience in various programming languages, I learnt to + setup databases, implement routing and organized my code to + ensure maintainability and scalability. + - -
-
-

Data Science

-
-
-

- 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. -

-
-
- Python -
-
- R -
-
- OpenCV -
-
- SAS -
-
- MySQL -
-
- Pandas -
-
- Selenium -
-
- BeautifulSoup4 -
-
-
- + + 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. +