diff --git a/src/components/elements/Card.astro b/src/components/global/Card.astro
similarity index 100%
rename from src/components/elements/Card.astro
rename to src/components/global/Card.astro
diff --git a/src/components/sections/FooterComponent.astro b/src/components/global/FooterComponent.astro
similarity index 100%
rename from src/components/sections/FooterComponent.astro
rename to src/components/global/FooterComponent.astro
diff --git a/src/components/sections/NavBar.astro b/src/components/global/NavBar.astro
similarity index 100%
rename from src/components/sections/NavBar.astro
rename to src/components/global/NavBar.astro
diff --git a/src/components/elements/NetworkLine.astro b/src/components/global/NetworkLine.astro
similarity index 100%
rename from src/components/elements/NetworkLine.astro
rename to src/components/global/NetworkLine.astro
diff --git a/src/components/sections/IntroComponent.svelte b/src/components/home/IntroComponent.svelte
similarity index 99%
rename from src/components/sections/IntroComponent.svelte
rename to src/components/home/IntroComponent.svelte
index 7e77127..a5c846c 100644
--- a/src/components/sections/IntroComponent.svelte
+++ b/src/components/home/IntroComponent.svelte
@@ -1,6 +1,6 @@
+
+
diff --git a/src/components/projects/Project.astro b/src/components/projects/Project.astro
new file mode 100644
index 0000000..648ce82
--- /dev/null
+++ b/src/components/projects/Project.astro
@@ -0,0 +1,144 @@
+---
+import { Image } from "astro:assets";
+
+interface Tag {
+ text: string;
+ textColor: string;
+ bgColor: string;
+}
+
+interface Props {
+ position?: "left" | "right";
+ image?: ImageMetadata;
+ alt?: string;
+ href: string;
+ title: string;
+ description: string;
+ label?: string;
+ tags?: Tag[];
+}
+
+const {
+ image,
+ alt,
+ href,
+ title,
+ description,
+ label = "View Repository",
+ tags = [],
+ position = "left",
+} = Astro.props;
+
+const leftProject = position == "left";
+---
+
+
+
+
diff --git a/src/components/projects/ProjectsComponent.astro b/src/components/projects/ProjectsComponent.astro
new file mode 100644
index 0000000..f30423d
--- /dev/null
+++ b/src/components/projects/ProjectsComponent.astro
@@ -0,0 +1,156 @@
+---
+import TaskWidget from "./TaskWidget.svelte";
+import CoworkingGuide from "../images/projects/coworking-guide.webp";
+import Wnrs from "../images/projects/wnrs.webp";
+import TwitchPlays from "../images/projects/twitchplays.webp";
+import Project from "./Project.astro";
+---
+
+
+
+
diff --git a/src/components/sections/TaskWidget.svelte b/src/components/projects/TaskWidget.svelte
similarity index 55%
rename from src/components/sections/TaskWidget.svelte
rename to src/components/projects/TaskWidget.svelte
index 607fc1a..80ab1c9 100644
--- a/src/components/sections/TaskWidget.svelte
+++ b/src/components/projects/TaskWidget.svelte
@@ -113,24 +113,24 @@
task: "anki flashcards",
},
];
+
+ interface Props {
+ classList: string;
+ }
+
+ let { classList }: Props = $props();
-
+
diff --git a/src/components/sections/MoreSkills.astro b/src/components/sections/MoreSkills.astro
deleted file mode 100644
index adbb4b5..0000000
--- a/src/components/sections/MoreSkills.astro
+++ /dev/null
@@ -1,103 +0,0 @@
----
-import Card from "../elements/Card.astro";
-import Line from "../elements/NetworkLine.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
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
-
-
-
diff --git a/src/components/sections/ProjectsComponent.astro b/src/components/sections/ProjectsComponent.astro
deleted file mode 100644
index 55e6b49..0000000
--- a/src/components/sections/ProjectsComponent.astro
+++ /dev/null
@@ -1,306 +0,0 @@
----
-import TaskWidget from "./TaskWidget.svelte";
-import { Image } from "astro:assets";
-import CoworkingGuide from "./images/projects/coworking-guide.webp";
-import Wnrs from "./images/projects/wnrs.webp";
-import TwitchPlays from "./images/projects/twitchplays.webp";
----
-
-
-
-
-
-
-
-
- Coworking Guide
-
-
- A guide to coworking streams for streamers, covers wide
- range of topics from tips on how to get started with setting
- up stream to how to grow your audience!
-
-
-
- Astro
-
-
- TypeScript
-
-
- Markdown
-
-
-
-
-
-
-
- Chat-Task-Tic Widget
-
-
- Used by 100+ Twitch streamers, allow viewers and streamers
- to add their own tasks to the widget for accountability!
- Easy to setup and the customization possibilities are
- endless!
-
-
-
- HTML
-
-
- CSS
-
-
- Javascript
-
-
-
-
-
-
-
-
-
-
-
-
- We're Not Really Strangers
-
-
- Otherwise abbreviated as "WNRS", this is a digital
- adaptation of the popular card game designed to foster
- meaningful connections through engaging questions and
- prompts.
-
-
-
- React
-
-
- Typescript
-
-
-
-
-
-
-
- Twitch Plays X
-
-
- Allow Twitch chatters to play games such as Pokemon!
- Chatters can enter messages such as "up up down down left
- right B A" and the Python program will trigger the
- corresponding keypresses.
-
-
-
- Python
-
-
- win32API
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/sections/SkillsComponent.astro b/src/components/sections/SkillsComponent.astro
deleted file mode 100644
index a6309e5..0000000
--- a/src/components/sections/SkillsComponent.astro
+++ /dev/null
@@ -1,217 +0,0 @@
----
-import Card from "../elements/Card.astro";
-import Line from "../elements/NetworkLine.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
-
-
-
-
-
-
-
-
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
-
-
-
-
-
-
-
-
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
-
-
-
-
-
-
diff --git a/src/components/skills/MoreSkills.astro b/src/components/skills/MoreSkills.astro
new file mode 100644
index 0000000..12d12a1
--- /dev/null
+++ b/src/components/skills/MoreSkills.astro
@@ -0,0 +1,72 @@
+---
+import Card from "../global/Card.astro";
+import Line from "../global/NetworkLine.astro";
+import Skill from "./Skill.astro";
+---
+
+
+
+
+
+
+ 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.
+
+
+
+ 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
new file mode 100644
index 0000000..eb9e443
--- /dev/null
+++ b/src/components/skills/SkillsComponent.astro
@@ -0,0 +1,172 @@
+---
+import Card from "../global/Card.astro";
+import Line from "../global/NetworkLine.astro";
+import Skill from "./Skill.astro";
+---
+
+
+
Skills
+
+
+
+ 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.
+
+
+
+
+ With experience in various programming languages, I learnt to
+ setup databases, implement routing and organized my code to
+ ensure maintainability and scalability.
+
+
+
+ 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.
+
+
+
+
diff --git a/src/components/elements/Socials.svelte b/src/components/socials/Socials.svelte
similarity index 100%
rename from src/components/elements/Socials.svelte
rename to src/components/socials/Socials.svelte
diff --git a/src/components/sections/StreamSchedule.svelte b/src/components/socials/StreamSchedule.svelte
similarity index 100%
rename from src/components/sections/StreamSchedule.svelte
rename to src/components/socials/StreamSchedule.svelte
diff --git a/src/components/sections/WhatIDoComponent.astro b/src/components/what-i-do/WhatIDoComponent.astro
similarity index 97%
rename from src/components/sections/WhatIDoComponent.astro
rename to src/components/what-i-do/WhatIDoComponent.astro
index 1141af6..0423e3e 100644
--- a/src/components/sections/WhatIDoComponent.astro
+++ b/src/components/what-i-do/WhatIDoComponent.astro
@@ -1,5 +1,5 @@
---
-import Card from "../elements/Card.astro";
+import Card from "../global/Card.astro";
---
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 2c76319..6e662b5 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -1,15 +1,15 @@
---
import { getCollection } from "astro:content";
-import BackToBlogs from "../../components/sections/BackToBlogs.astro";
+import BackToBlogs from "../../components/blog/BackToBlogs.astro";
import Layout from "../../layouts/Layout.astro";
-import Footer from "../../components/sections/FooterComponent.astro";
+import Footer from "../../components/global/FooterComponent.astro";
export async function getStaticPaths() {
- const blogEntries = await getCollection("blog");
- return blogEntries.map((entry) => ({
- params: { slug: entry.slug },
- props: { entry },
- }));
+ const blogEntries = await getCollection("blog");
+ return blogEntries.map((entry) => ({
+ params: { slug: entry.slug },
+ props: { entry },
+ }));
}
const { entry } = Astro.props;
@@ -17,118 +17,118 @@ const { Content } = await entry.render();
---
-
-
-
{entry.data.title}
-
- Published
- {
- new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
- day: "numeric",
- month: "long",
- year: "numeric",
- })
- }
-
-
by {entry.data.author}
-
{entry.data.description}
+
+
+
{entry.data.title}
+
+ Published
+ {
+ new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
+ day: "numeric",
+ month: "long",
+ year: "numeric",
+ })
+ }
+
+
by {entry.data.author}
+
{entry.data.description}
-
- {
- entry.data.tags?.map((tag) => (
-
- {tag}
-
- ))
- }
-
+
+ {
+ entry.data.tags?.map((tag) => (
+
+ {tag}
+
+ ))
+ }
+
-
+
-
-
-
-
-
+
+
+
+
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 2072ab2..ed84bac 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,82 +1,81 @@
---
-import NavBar from "../../components/sections/NavBar.astro";
import Layout from "../../layouts/Layout.astro";
-import Card from "../../components/elements/Card.astro";
-import Footer from "../../components/sections/FooterComponent.astro";
+import Card from "../../components/global/Card.astro";
+import Footer from "../../components/global/FooterComponent.astro";
import { getCollection } from "astro:content";
const blogPosts = await getCollection("blog");
---
-
-
Blog
-
-
-
- This is where I upload my blogs. No paywalls, no ads, no
- bullshit.
-
-
+
+
Blog
+
+
+
+ This is where I upload my blogs. No paywalls, no ads, no
+ bullshit.
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index e96d77b..a3b4ce9 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -1,9 +1,9 @@
---
-import NavBar from "../components/sections/NavBar.astro";
+import NavBar from "../components/global/NavBar.astro";
import Layout from "../layouts/Layout.astro";
-import ContactComponent from "../components/sections/ContactComponent.svelte";
-import Card from "../components/elements/Card.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import ContactComponent from "../components/contact/ContactComponent.svelte";
+import Card from "../components/global/Card.astro";
+import Footer from "../components/global/FooterComponent.astro";
---
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
index ac814d2..9178154 100644
--- a/src/pages/faq.astro
+++ b/src/pages/faq.astro
@@ -1,92 +1,92 @@
---
import Layout from "../layouts/Layout.astro";
-import Card from "../components/elements/Card.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import Card from "../components/global/Card.astro";
+import Footer from "../components/global/FooterComponent.astro";
---
-
-
-
-
- Frequently Asked Questions
-
-
-
-
Who are you?
-
- I'm Ryan, I am a software developer and a coworking & study
- streamer.
-
-
- See my website here to learn more about me, including my software development portfolio
- and my content creation projects.
-
-
-
- Where are you from? What languages do you speak?
-
-
- I'm born and raised in Malaysia, studying in Australia. I
- speak English, Mandarin Chinese, and some Malay. I can read
- both traditional and simplified Chinese characters.
-
-
-
-
- How to pronounce your username?
-
-
- Try to pronounce Python, and then replace the "Py" with
- "Ry". You can also call me "Ry" or "Ryan" if you prefer.
-
-
-
-
What is a coworking stream?
-
- That question is answered here.
-
-
-
-
- Why are you muted? Why aren't you reading chat?
-
-
- During work time, I am muted and not reading chat to focus
- on my work. I will try to catch up on chat during break
- time.
-
-
-
-
Is that a keychron?
-
No. It's an Epomaker GK64x modded with black switches.
-
-
-
-
+
+
+
+ Frequently Asked Questions
+
+
+
+
Who are you?
+
+ I'm Ryan, I am a software developer and a coworking & study
+ streamer.
+
+
+ See my website here to learn more about me, including my software development portfolio
+ and my content creation projects.
+
+
+
+ Where are you from? What languages do you speak?
+
+
+ I'm born and raised in Malaysia, studying in Australia. I
+ speak English, Mandarin Chinese, and some Malay. I can read
+ both traditional and simplified Chinese characters.
+
+
+
+
+ How to pronounce your username?
+
+
+ Try to pronounce Python, and then replace the "Py" with
+ "Ry". You can also call me "Ry" or "Ryan" if you prefer.
+
+
+
+
What is a coworking stream?
+
+ That question is answered here.
+
+
+
+
+ Why are you muted? Why aren't you reading chat?
+
+
+ During work time, I am muted and not reading chat to focus
+ on my work. I will try to catch up on chat during break
+ time.
+
+
+
+
Is that a keychron?
+
No. It's an Epomaker GK64x modded with black switches.
+
+
+
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4a3ae19..9ad8e9f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,61 +1,61 @@
---
-import NavBar from "../components/sections/NavBar.astro";
+import NavBar from "../components/global/NavBar.astro";
import Layout from "../layouts/Layout.astro";
-import NetworkLine from "../components/elements/NetworkLine.astro";
-import WhatIDo from "../components/sections/WhatIDoComponent.astro";
-import Intro from "../components/sections/IntroComponent.svelte";
-import Projects from "../components/sections/ProjectsComponent.astro";
-import Experience from "../components/sections/ExperienceComponent.astro";
-import Skills from "../components/sections/SkillsComponent.astro";
-import Contact from "../components/sections/ContactComponent.svelte";
-import Card from "../components/elements/Card.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import NetworkLine from "../components/global/NetworkLine.astro";
+import WhatIDo from "../components/what-i-do/WhatIDoComponent.astro";
+import Intro from "../components/home/IntroComponent.svelte";
+import Projects from "../components/projects/ProjectsComponent.astro";
+import Experience from "../components/experience/ExperienceComponent.astro";
+import Skills from "../components/skills/SkillsComponent.astro";
+import Contact from "../components/contact/ContactComponent.svelte";
+import Card from "../components/global/Card.astro";
+import Footer from "../components/global/FooterComponent.astro";
---
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 1e44d0d..0974b09 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,108 +1,108 @@
---
-import NavBar from "../components/sections/NavBar.astro";
+import NavBar from "../components/global/NavBar.astro";
import Layout from "../layouts/Layout.astro";
-import ProjectsComponent from "../components/sections/ProjectsComponent.astro";
-import MoreProjects from "../components/sections/MoreProjects.svelte";
-import Footer from "../components/sections/FooterComponent.astro";
+import ProjectsComponent from "../components/projects/ProjectsComponent.astro";
+import MoreProjects from "../components/projects/MoreProjects.svelte";
+import Footer from "../components/global/FooterComponent.astro";
---
-
-
-
Projects
-
-
-
-
-
+
+
+
Projects
+
+
+
+
+
diff --git a/src/pages/skills.astro b/src/pages/skills.astro
index 4996854..82cafcc 100644
--- a/src/pages/skills.astro
+++ b/src/pages/skills.astro
@@ -1,9 +1,9 @@
---
-import NavBar from "../components/sections/NavBar.astro";
+import NavBar from "../components/global/NavBar.astro";
import Layout from "../layouts/Layout.astro";
-import SkillsComponent from "../components/sections/SkillsComponent.astro";
-import MoreSkills from "../components/sections/MoreSkills.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import SkillsComponent from "../components/skills/SkillsComponent.astro";
+import MoreSkills from "../components/skills/MoreSkills.astro";
+import Footer from "../components/global/FooterComponent.astro";
---