diff --git a/package-lock.json b/package-lock.json
index 63bae9c..4319b36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
                 "@astrojs/mdx": "^4.3.0",
                 "@astrojs/svelte": "^7.1.0",
                 "@tailwindcss/vite": "^4.1.8",
-                "astro": "^5.9.1",
+                "astro": "^5.10.0",
                 "caniuse-lite": "^1.0.30001698",
                 "moment": "^2.30.1",
                 "moment-timezone": "^0.6.0",
@@ -38,9 +38,9 @@
             }
         },
         "node_modules/@astrojs/compiler": {
-            "version": "2.12.1",
-            "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.12.1.tgz",
-            "integrity": "sha512-WDSyVIiz7sNcJcCJxJFITu6XjfGhJ50Z0auyaWsrM+xb07IlhBLFtQuDkNy0caVHWNcKTM2LISAaHhgkRqGAVg==",
+            "version": "2.12.2",
+            "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.12.2.tgz",
+            "integrity": "sha512-w2zfvhjNCkNMmMMOn5b0J8+OmUaBL1o40ipMvqcG6NRpdC+lKxmTi48DT8Xw0SzJ3AfmeFLB45zXZXtmbsjcgw==",
             "license": "MIT"
         },
         "node_modules/@astrojs/internal-helpers": {
@@ -1587,12 +1587,12 @@
             }
         },
         "node_modules/astro": {
-            "version": "5.9.1",
-            "resolved": "https://registry.npmjs.org/astro/-/astro-5.9.1.tgz",
-            "integrity": "sha512-wxoJcTbuDZNFSv6EaL0PAlrp0Wx6VnOAULCXvy0scsV70oWMeUkdxuBxfO54JxO5Qgyvwj9h99y6E0elqOpGtA==",
+            "version": "5.10.0",
+            "resolved": "https://registry.npmjs.org/astro/-/astro-5.10.0.tgz",
+            "integrity": "sha512-g/t54kVzQnFVijs+GbbbX/NBAFTl/3yNAEA/AQYq4FumLLVv7n4BIF+jKhcPGn9iFGyT1Cjvr7KB/qYyNvHEIg==",
             "license": "MIT",
             "dependencies": {
-                "@astrojs/compiler": "^2.12.1",
+                "@astrojs/compiler": "^2.12.2",
                 "@astrojs/internal-helpers": "0.6.1",
                 "@astrojs/markdown-remark": "6.3.2",
                 "@astrojs/telemetry": "3.3.0",
diff --git a/package.json b/package.json
index 2f242ba..21b1a83 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
         "@astrojs/mdx": "^4.3.0",
         "@astrojs/svelte": "^7.1.0",
         "@tailwindcss/vite": "^4.1.8",
-        "astro": "^5.9.1",
+        "astro": "^5.10.0",
         "caniuse-lite": "^1.0.30001698",
         "moment": "^2.30.1",
         "moment-timezone": "^0.6.0",
diff --git a/src/components/sections/BackToBlogs.astro b/src/components/blog/BackToBlogs.astro
similarity index 100%
rename from src/components/sections/BackToBlogs.astro
rename to src/components/blog/BackToBlogs.astro
diff --git a/src/components/sections/ContactComponent.svelte b/src/components/contact/ContactComponent.svelte
similarity index 91%
rename from src/components/sections/ContactComponent.svelte
rename to src/components/contact/ContactComponent.svelte
index 4286817..7313b3c 100644
--- a/src/components/sections/ContactComponent.svelte
+++ b/src/components/contact/ContactComponent.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import Socials from "../elements/Socials.svelte";
+    import Socials from "../socials/Socials.svelte";
 </script>
 
 <div class="relative flex h-fit w-full flex-col items-center justify-center">
     <div class="flex flex-col items-center justify-center">
         <div
             id="title"
-            class="mb-3 animate-gradient text-center text-3xl font-bold"
+            class="animate-gradient mb-3 text-center text-3xl font-bold"
         >
             Get in Touch with me!
         </div>
diff --git a/src/components/sections/ExperienceComponent.astro b/src/components/experience/ExperienceComponent.astro
similarity index 96%
rename from src/components/sections/ExperienceComponent.astro
rename to src/components/experience/ExperienceComponent.astro
index 611498a..46b4ba0 100644
--- a/src/components/sections/ExperienceComponent.astro
+++ b/src/components/experience/ExperienceComponent.astro
@@ -1,6 +1,6 @@
 ---
-import Card from "../elements/Card.astro";
-import Line from "../elements/NetworkLine.astro";
+import Card from "../global/Card.astro";
+import Line from "../global/NetworkLine.astro";
 ---
 
 <div id="Experience" class="h-fit">
diff --git a/src/components/sections/MoreExperience.astro b/src/components/experience/MoreExperience.astro
similarity index 90%
rename from src/components/sections/MoreExperience.astro
rename to src/components/experience/MoreExperience.astro
index d1c1dc3..8340ef4 100644
--- a/src/components/sections/MoreExperience.astro
+++ b/src/components/experience/MoreExperience.astro
@@ -1,6 +1,6 @@
 ---
-import Card from "../elements/Card.astro";
-import Line from "../elements/NetworkLine.astro";
+import Card from "../global/Card.astro";
+import Line from "../global/NetworkLine.astro";
 ---
 
 <div id="Experience" class="h-fit">
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 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import Socials from "../elements/Socials.svelte";
+    import Socials from "../socials/Socials.svelte";
 
     // Roles
     let roles = $state(["Developer", "Streamer", "Content creator", "Student"]);
diff --git a/src/components/sections/images/projects/ProductiVue.webp b/src/components/images/projects/ProductiVue.webp
similarity index 100%
rename from src/components/sections/images/projects/ProductiVue.webp
rename to src/components/images/projects/ProductiVue.webp
diff --git a/src/components/sections/images/projects/coworking-guide.webp b/src/components/images/projects/coworking-guide.webp
similarity index 100%
rename from src/components/sections/images/projects/coworking-guide.webp
rename to src/components/images/projects/coworking-guide.webp
diff --git a/src/components/sections/images/projects/hexguess.webp b/src/components/images/projects/hexguess.webp
similarity index 100%
rename from src/components/sections/images/projects/hexguess.webp
rename to src/components/images/projects/hexguess.webp
diff --git a/src/components/sections/images/projects/twitchplays.webp b/src/components/images/projects/twitchplays.webp
similarity index 100%
rename from src/components/sections/images/projects/twitchplays.webp
rename to src/components/images/projects/twitchplays.webp
diff --git a/src/components/sections/images/projects/wnrs.webp b/src/components/images/projects/wnrs.webp
similarity index 100%
rename from src/components/sections/images/projects/wnrs.webp
rename to src/components/images/projects/wnrs.webp
diff --git a/src/components/sections/MoreProjects.svelte b/src/components/projects/MoreProjects.svelte
similarity index 100%
rename from src/components/sections/MoreProjects.svelte
rename to src/components/projects/MoreProjects.svelte
diff --git a/src/components/sections/ProjectsComponent.astro b/src/components/projects/ProjectsComponent.astro
similarity index 98%
rename from src/components/sections/ProjectsComponent.astro
rename to src/components/projects/ProjectsComponent.astro
index 55e6b49..a701f2c 100644
--- a/src/components/sections/ProjectsComponent.astro
+++ b/src/components/projects/ProjectsComponent.astro
@@ -1,9 +1,9 @@
 ---
 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";
+import CoworkingGuide from "../images/projects/coworking-guide.webp";
+import Wnrs from "../images/projects/wnrs.webp";
+import TwitchPlays from "../images/projects/twitchplays.webp";
 ---
 
 <div
diff --git a/src/components/sections/TaskWidget.svelte b/src/components/projects/TaskWidget.svelte
similarity index 100%
rename from src/components/sections/TaskWidget.svelte
rename to src/components/projects/TaskWidget.svelte
diff --git a/src/components/sections/MoreSkills.astro b/src/components/sections/skills/MoreSkills.astro
similarity index 97%
rename from src/components/sections/MoreSkills.astro
rename to src/components/sections/skills/MoreSkills.astro
index adbb4b5..773bda2 100644
--- a/src/components/sections/MoreSkills.astro
+++ b/src/components/sections/skills/MoreSkills.astro
@@ -1,6 +1,6 @@
 ---
-import Card from "../elements/Card.astro";
-import Line from "../elements/NetworkLine.astro";
+import Card from "../global/Card.astro";
+import Line from "../global/NetworkLine.astro";
 ---
 
 <div id="Experience" class="h-fit">
diff --git a/src/components/skills/MoreSkills.astro b/src/components/skills/MoreSkills.astro
new file mode 100644
index 0000000..773bda2
--- /dev/null
+++ b/src/components/skills/MoreSkills.astro
@@ -0,0 +1,103 @@
+---
+import Card from "../global/Card.astro";
+import Line from "../global/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="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>
+			<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>
+		</div>
+	</div>
+</div>
diff --git a/src/components/sections/SkillsComponent.astro b/src/components/skills/SkillsComponent.astro
similarity index 98%
rename from src/components/sections/SkillsComponent.astro
rename to src/components/skills/SkillsComponent.astro
index a6309e5..11533b1 100644
--- a/src/components/sections/SkillsComponent.astro
+++ b/src/components/skills/SkillsComponent.astro
@@ -1,6 +1,6 @@
 ---
-import Card from "../elements/Card.astro";
-import Line from "../elements/NetworkLine.astro";
+import Card from "../global/Card.astro";
+import Line from "../global/NetworkLine.astro";
 ---
 
 <div class="h-fit w-full pt-20">
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";
 ---
 
 <div class="flex w-full flex-col items-center justify-center">
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();
 ---
 
 <Layout
-    title="Blog"
-    description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
+	title="Blog"
+	description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
 >
-    <BackToBlogs />
-    <div id="blog-content-component" class="mx-auto mt-10 pt-10">
-        <h1 class="text-left text-4xl">{entry.data.title}</h1>
-        <p class="mt-3 text-lg text-gray-200">
-            Published
-            {
-                new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
-                    day: "numeric",
-                    month: "long",
-                    year: "numeric",
-                })
-            }
-        </p>
-        <p class="text-lg text-gray-200">by {entry.data.author}</p>
-        <p class="text-lg text-white">{entry.data.description}</p>
+	<BackToBlogs />
+	<div id="blog-content-component" class="mx-auto mt-10 pt-10">
+		<h1 class="text-left text-4xl">{entry.data.title}</h1>
+		<p class="mt-3 text-lg text-gray-200">
+			Published
+			{
+				new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
+					day: "numeric",
+					month: "long",
+					year: "numeric",
+				})
+			}
+		</p>
+		<p class="text-lg text-gray-200">by {entry.data.author}</p>
+		<p class="text-lg text-white">{entry.data.description}</p>
 
-        <div class="flex flex-row flex-wrap items-start justify-start">
-            {
-                entry.data.tags?.map((tag) => (
-                    <div class="mr-2 rounded-xl border-2 border-solid border-gray-500 bg-[#282828] px-3 py-1 transition-colors duration-150 hover:border-white hover:bg-gray-300 hover:text-black">
-                        {tag}
-                    </div>
-                ))
-            }
-        </div>
+		<div class="flex flex-row flex-wrap items-start justify-start">
+			{
+				entry.data.tags?.map((tag) => (
+					<div class="mr-2 rounded-xl border-2 border-solid border-gray-500 bg-[#282828] px-3 py-1 transition-colors duration-150 hover:border-white hover:bg-gray-300 hover:text-black">
+						{tag}
+					</div>
+				))
+			}
+		</div>
 
-        <hr class="my-5" />
+		<hr class="my-5" />
 
-        <Content />
-    </div>
-    <div class="mt-10">
-        <Footer />
-    </div>
+		<Content />
+	</div>
+	<div class="mt-10">
+		<Footer />
+	</div>
 </Layout>
 
 <style is:inline>
-    #blog-content-component {
-        width: clamp(310px, 60vw, 800px);
-    }
+	#blog-content-component {
+		width: clamp(310px, 60vw, 800px);
+	}
 
-    a:not(#navbar-div a) {
-        color: lightskyblue;
-        text-decoration: underline;
-        cursor: pointer;
-    }
+	a:not(#navbar-div a) {
+		color: lightskyblue;
+		text-decoration: underline;
+		cursor: pointer;
+	}
 
-    p {
-        display: block;
-        font-size: 1.1rem;
-        margin-top: 1em;
-        margin-bottom: 1em;
-        margin-left: 0;
-        margin-right: 0;
-    }
+	p {
+		display: block;
+		font-size: 1.1rem;
+		margin-top: 1em;
+		margin-bottom: 1em;
+		margin-left: 0;
+		margin-right: 0;
+	}
 
-    h1 {
-        display: block;
-        font-size: 2em;
-        margin-top: 0.67em;
-        margin-bottom: 0.67em;
-        margin-left: 0;
-        margin-right: 0;
-        font-weight: bold;
-    }
+	h1 {
+		display: block;
+		font-size: 2em;
+		margin-top: 0.67em;
+		margin-bottom: 0.67em;
+		margin-left: 0;
+		margin-right: 0;
+		font-weight: bold;
+	}
 
-    h2 {
-        display: block;
-        font-size: 1.5em;
-        margin-top: 0.83em;
-        margin-bottom: 0.83em;
-        margin-left: 0;
-        margin-right: 0;
-        font-weight: bold;
-    }
+	h2 {
+		display: block;
+		font-size: 1.5em;
+		margin-top: 0.83em;
+		margin-bottom: 0.83em;
+		margin-left: 0;
+		margin-right: 0;
+		font-weight: bold;
+	}
 
-    h3 {
-        display: block;
-        font-size: 1.17em;
-        margin-top: 1em;
-        margin-bottom: 1em;
-        margin-left: 0;
-        margin-right: 0;
-        font-weight: bold;
-    }
+	h3 {
+		display: block;
+		font-size: 1.17em;
+		margin-top: 1em;
+		margin-bottom: 1em;
+		margin-left: 0;
+		margin-right: 0;
+		font-weight: bold;
+	}
 
-    ul {
-        display: block;
-        list-style-type: disc;
-        margin-left: 0;
-        margin-right: 0;
-        margin-bottom: 0.5em;
-        padding-left: 40px;
-    }
+	ul {
+		display: block;
+		list-style-type: disc;
+		margin-left: 0;
+		margin-right: 0;
+		margin-bottom: 0.5em;
+		padding-left: 40px;
+	}
 
-    ul:not(ul ul) {
-        margin-top: 0.5em;
-    }
+	ul:not(ul ul) {
+		margin-top: 0.5em;
+	}
 
-    li {
-        display: list-item;
-    }
+	li {
+		display: list-item;
+	}
 
-    ol {
-        display: block;
-        list-style-type: decimal;
-        margin-top: 1em;
-        margin-bottom: 1em;
-        margin-left: 0;
-        margin-right: 0;
-        padding-left: 40px;
-    }
+	ol {
+		display: block;
+		list-style-type: decimal;
+		margin-top: 1em;
+		margin-bottom: 1em;
+		margin-left: 0;
+		margin-right: 0;
+		padding-left: 40px;
+	}
 </style>
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");
 ---
 
 <Layout
-    title="Blog"
-    description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
+	title="Blog"
+	description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
 >
-    <div id="blog-component" class="mt-10 pt-20">
-        <h1 class="text-center text-5xl">Blog</h1>
-        <div class="mt-10 flex flex-col items-center justify-center">
-            <div style="width: clamp(310px, 50vw, 800px);" class="mb-10">
-                <p class="text-center text-lg">
-                    This is where I upload my blogs. No paywalls, no ads, no
-                    bullshit.
-                </p>
-            </div>
+	<div id="blog-component" class="mt-10 pt-20">
+		<h1 class="text-center text-5xl">Blog</h1>
+		<div class="mt-10 flex flex-col items-center justify-center">
+			<div style="width: clamp(310px, 50vw, 800px);" class="mb-10">
+				<p class="text-center text-lg">
+					This is where I upload my blogs. No paywalls, no ads, no
+					bullshit.
+				</p>
+			</div>
 
-            <!-- Series of blog posts -->
-            <div style="width: clamp(310px, 50vw, 800px);">
-                {
-                    blogPosts.map((blog) => (
-                        <a class="group mb-5" href={`/blog/${blog.slug}`}>
-                            <Card
-                                primaryColor={
-                                    blog.data.color ?? "rgba(0,0,0,0)"
-                                }
-                                pixelHeight="50px"
-                            >
-                                <div class="card-content relative px-8 py-3 text-left">
-                                    <h2 class="mb-1 text-xl font-bold">
-                                        {blog.data.title}
-                                    </h2>
-                                    <p class="line-clamp-2">
-                                        {blog.data.description}
-                                    </p>
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        fill="none"
-                                        viewBox="0 0 24 24"
-                                        stroke-width="1.5"
-                                        class="absolute right-3 top-3 size-6 stroke-white transition-all duration-150 group-hover:right-2 group-hover:top-2 group-hover:stroke-green-400"
-                                    >
-                                        <path
-                                            stroke-linecap="round"
-                                            stroke-linejoin="round"
-                                            d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
-                                        />
-                                    </svg>
-                                </div>
-                            </Card>
-                        </a>
-                    ))
-                }
-            </div>
-        </div>
-    </div>
-    <div class="mt-10">
-        <Footer />
-    </div>
+			<!-- Series of blog posts -->
+			<div style="width: clamp(310px, 50vw, 800px);">
+				{
+					blogPosts.map((blog) => (
+						<a class="group mb-5" href={`/blog/${blog.slug}`}>
+							<Card
+								primaryColor={
+									blog.data.color ?? "rgba(0,0,0,0)"
+								}
+								pixelHeight="50px"
+							>
+								<div class="card-content relative px-8 py-3 text-left">
+									<h2 class="mb-1 text-xl font-bold">
+										{blog.data.title}
+									</h2>
+									<p class="line-clamp-2">
+										{blog.data.description}
+									</p>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										class="absolute top-3 right-3 size-6 stroke-white transition-all duration-150 group-hover:top-2 group-hover:right-2 group-hover:stroke-green-400"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+										/>
+									</svg>
+								</div>
+							</Card>
+						</a>
+					))
+				}
+			</div>
+		</div>
+	</div>
+	<div class="mt-10">
+		<Footer />
+	</div>
 </Layout>
 
 <style>
-    .card-content {
-        display: flex;
-        flex-direction: column;
-        background-image: radial-gradient(
-            rgba(255, 255, 255, 0.1) 1px,
-            transparent 1px
-        );
-        background-position: 50% 50%;
-        background-size: 1.1rem 1.1rem;
-        border-radius: 1.25rem;
-        overflow: hidden;
-    }
+	.card-content {
+		display: flex;
+		flex-direction: column;
+		background-image: radial-gradient(
+			rgba(255, 255, 255, 0.1) 1px,
+			transparent 1px
+		);
+		background-position: 50% 50%;
+		background-size: 1.1rem 1.1rem;
+		border-radius: 1.25rem;
+		overflow: hidden;
+	}
 </style>
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";
 ---
 
 <Layout
diff --git a/src/pages/experience.astro b/src/pages/experience.astro
index 10ade78..421ff58 100644
--- a/src/pages/experience.astro
+++ b/src/pages/experience.astro
@@ -1,19 +1,19 @@
 ---
-import NavBar from "../components/sections/NavBar.astro";
+import NavBar from "../components/global/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
-import EducationComponent from "../components/sections/ExperienceComponent.astro";
-import MoreExperience from "../components/sections/MoreExperience.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import EducationComponent from "../components/experience/ExperienceComponent.astro";
+import MoreExperience from "../components/experience/MoreExperience.astro";
+import Footer from "../components/global/FooterComponent.astro";
 ---
 
 <Layout
-    title="Experience"
-    description="Find out RythonDev's previous education"
+	title="Experience"
+	description="Find out RythonDev's previous education"
 >
-    <NavBar />
-    <div id="Experience" class="py-20">
-        <EducationComponent />
-        <MoreExperience />
-    </div>
-    <Footer />
+	<NavBar />
+	<div id="Experience" class="py-20">
+		<EducationComponent />
+		<MoreExperience />
+	</div>
+	<Footer />
 </Layout>
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";
 ---
 
 <Layout title="Socials" description="Check out Ryan's socials">
-    <div class="mx-auto my-10 w-[90%] max-w-full md:w-1/2">
-        <Card primaryColor="aquamarine">
-            <div class="card-content px-4 py-4 md:px-8 md:py-8">
-                <h1 class="text-center text-3xl font-bold">
-                    Frequently Asked Questions
-                </h1>
-                <hr class="my-2" />
-                <!-- Who are you? -->
-                <h2 class="text-xl font-bold">Who are you?</h2>
-                <p>
-                    I'm Ryan, I am a software developer and a coworking & study
-                    streamer.
-                    <br />
-                    <br />
-                    See my website <a
-                        target="_blank"
-                        href="https://rython.dev/"
-                        class="text-blue-400 underline">here</a
-                    > to learn more about me, including my software development portfolio
-                    and my content creation projects.
-                </p>
-                <hr class="my-2" />
-                <h2 class="text-xl font-bold">
-                    Where are you from? What languages do you speak?
-                </h2>
-                <p>
-                    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.
-                </p>
-                <hr class="my-2" />
-                <!-- How to pronounce? -->
-                <h2 class="text-xl font-bold">
-                    How to pronounce your username?
-                </h2>
-                <p>
-                    Try to pronounce Python, and then replace the "Py" with
-                    "Ry". You can also call me "Ry" or "Ryan" if you prefer.
-                </p>
-                <hr class="my-2" />
-                <!-- What is a coworking stream? -->
-                <h2 class="text-xl font-bold">What is a coworking stream?</h2>
-                <p>
-                    That question is answered <a
-                        target="_blank"
-                        class="text-blue-400 underline"
-                        href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams"
-                        >here</a
-                    >.
-                </p>
-                <hr class="my-2" />
-                <!-- What is a coworking stream? -->
-                <h2 class="text-xl font-bold">
-                    Why are you muted? Why aren't you reading chat?
-                </h2>
-                <p>
-                    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.
-                </p>
-                <hr class="my-2" />
-                <!-- What is a coworking stream? -->
-                <h2 class="text-xl font-bold">Is that a keychron?</h2>
-                <p>No. It's an Epomaker GK64x modded with black switches.</p>
-                <hr class="my-2" />
-            </div>
-        </Card>
-        <Footer />
-    </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;
-            border-radius: 1.25rem;
-            overflow: hidden;
-        }
-    </style>
+	<div class="mx-auto my-10 w-[90%] max-w-full md:w-1/2">
+		<Card primaryColor="aquamarine">
+			<div class="card-content px-4 py-4 md:px-8 md:py-8">
+				<h1 class="text-center text-3xl font-bold">
+					Frequently Asked Questions
+				</h1>
+				<hr class="my-2" />
+				<!-- Who are you? -->
+				<h2 class="text-xl font-bold">Who are you?</h2>
+				<p>
+					I'm Ryan, I am a software developer and a coworking & study
+					streamer.
+					<br />
+					<br />
+					See my website <a
+						target="_blank"
+						href="https://rython.dev/"
+						class="text-blue-400 underline">here</a
+					> to learn more about me, including my software development portfolio
+					and my content creation projects.
+				</p>
+				<hr class="my-2" />
+				<h2 class="text-xl font-bold">
+					Where are you from? What languages do you speak?
+				</h2>
+				<p>
+					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.
+				</p>
+				<hr class="my-2" />
+				<!-- How to pronounce? -->
+				<h2 class="text-xl font-bold">
+					How to pronounce your username?
+				</h2>
+				<p>
+					Try to pronounce Python, and then replace the "Py" with
+					"Ry". You can also call me "Ry" or "Ryan" if you prefer.
+				</p>
+				<hr class="my-2" />
+				<!-- What is a coworking stream? -->
+				<h2 class="text-xl font-bold">What is a coworking stream?</h2>
+				<p>
+					That question is answered <a
+						target="_blank"
+						class="text-blue-400 underline"
+						href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams"
+						>here</a
+					>.
+				</p>
+				<hr class="my-2" />
+				<!-- What is a coworking stream? -->
+				<h2 class="text-xl font-bold">
+					Why are you muted? Why aren't you reading chat?
+				</h2>
+				<p>
+					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.
+				</p>
+				<hr class="my-2" />
+				<!-- What is a coworking stream? -->
+				<h2 class="text-xl font-bold">Is that a keychron?</h2>
+				<p>No. It's an Epomaker GK64x modded with black switches.</p>
+				<hr class="my-2" />
+			</div>
+		</Card>
+		<Footer />
+	</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;
+			border-radius: 1.25rem;
+			overflow: hidden;
+		}
+	</style>
 </Layout>
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";
 ---
 
 <Layout
-    title="Ryan's Portfolio"
-    description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
+	title="Ryan's Portfolio"
+	description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
 >
-    <NavBar />
-    <div id="home" class="flex items-center justify-center pt-20">
-        <div class="w-[90%] max-w-[1080px] lg:w-1/2 xl:w-1/2">
-            <Card
-                bgColor="#252525"
-                primaryColor="#BEADFA"
-                className="animate-fadeIn"
-            >
-                <Intro client:load />
-            </Card>
-        </div>
-    </div>
-    <NetworkLine height="70px" />
-    <div id="what-i-do">
-        <div class="mx-auto mb-10 h-[1px] w-1/3 bg-[#404040]"></div>
-        <WhatIDo />
-    </div>
-    <div id="projects">
-        <div class="pt-20">
-            <h1 class="mb-10 text-center text-5xl">Projects</h1>
-            <Projects />
-        </div>
-    </div>
-    <div id="skills">
-        <Skills />
-    </div>
-    <div id="education" class="py-20">
-        <Experience />
-    </div>
-    <div id="contact">
-        <Contact />
-    </div>
-    <Footer />
+	<NavBar />
+	<div id="home" class="flex items-center justify-center pt-20">
+		<div class="w-[90%] max-w-[1080px] lg:w-1/2 xl:w-1/2">
+			<Card
+				bgColor="#252525"
+				primaryColor="#BEADFA"
+				className="animate-fadeIn"
+			>
+				<Intro client:load />
+			</Card>
+		</div>
+	</div>
+	<NetworkLine height="70px" />
+	<div id="what-i-do">
+		<div class="mx-auto mb-10 h-[1px] w-1/3 bg-[#404040]"></div>
+		<WhatIDo />
+	</div>
+	<div id="projects">
+		<div class="pt-20">
+			<h1 class="mb-10 text-center text-5xl">Projects</h1>
+			<Projects />
+		</div>
+	</div>
+	<div id="skills">
+		<Skills />
+	</div>
+	<div id="education" class="py-20">
+		<Experience />
+	</div>
+	<div id="contact">
+		<Contact />
+	</div>
+	<Footer />
 </Layout>
 <script is:inline>
-    location.search.includes("?uwu") &&
-        document.documentElement.classList.add("uwu");
+	location.search.includes("?uwu") &&
+		document.documentElement.classList.add("uwu");
 </script>
 <style is:global>
-    .uwu #uwu {
-        display: flex;
-    }
+	.uwu #uwu {
+		display: flex;
+	}
 </style>
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";
 ---
 
 <Layout title="Projects" description="View what projects RythonDev has made">
-    <NavBar />
-    <div id="projects" class="pt-20">
-        <h1 class="mt-10 text-center text-5xl">Projects</h1>
-        <!-- other projects -->
-        <MoreProjects client:load />
-    </div>
-    <div class="pb-20">
-        <ProjectsComponent />
-    </div>
-    <Footer />
+	<NavBar />
+	<div id="projects" class="pt-20">
+		<h1 class="mt-10 text-center text-5xl">Projects</h1>
+		<!-- other projects -->
+		<MoreProjects client:load />
+	</div>
+	<div class="pb-20">
+		<ProjectsComponent />
+	</div>
+	<Footer />
 </Layout>
 
 <style>
-    .image-container img,
-    .image-container video,
-    .image-container .task-widget {
-        transition: transform 0.5s ease-in-out;
-    }
-    @media (min-width: 1025px) {
-        .image-container:hover > img,
-        .image-container:hover > video,
-        .image-container:hover > .task-widget {
-            transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
-                translateX(-50%) translateY(-50%);
-        }
+	.image-container img,
+	.image-container video,
+	.image-container .task-widget {
+		transition: transform 0.5s ease-in-out;
+	}
+	@media (min-width: 1025px) {
+		.image-container:hover > img,
+		.image-container:hover > video,
+		.image-container:hover > .task-widget {
+			transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
+				translateX(-50%) translateY(-50%);
+		}
 
-        .image-container:hover > .visit-div {
-            opacity: 100%;
-            transition: opacity 0.3s ease-in-out;
-            transition-delay: 0.3s;
-        }
-    }
+		.image-container:hover > .visit-div {
+			opacity: 100%;
+			transition: opacity 0.3s ease-in-out;
+			transition-delay: 0.3s;
+		}
+	}
 
-    .primary {
-        animation: primary 30s linear infinite;
-    }
+	.primary {
+		animation: primary 30s linear infinite;
+	}
 
-    .secondary {
-        animation: secondary 30s linear infinite;
-    }
+	.secondary {
+		animation: secondary 30s linear infinite;
+	}
 
-    @keyframes primary {
-        from {
-            transform: translateY(0);
-        }
-        to {
-            transform: translateY(-2175px);
-        }
-    }
+	@keyframes primary {
+		from {
+			transform: translateY(0);
+		}
+		to {
+			transform: translateY(-2175px);
+		}
+	}
 
-    @keyframes secondary {
-        from {
-            transform: translateY(2175px);
-        }
-        to {
-            transform: translateY(0);
-        }
-    }
+	@keyframes secondary {
+		from {
+			transform: translateY(2175px);
+		}
+		to {
+			transform: translateY(0);
+		}
+	}
 </style>
 
 <script is:inline>
-    document.addEventListener("DOMContentLoaded", () => {
-        const videos = document.querySelectorAll(".playable");
+	document.addEventListener("DOMContentLoaded", () => {
+		const videos = document.querySelectorAll(".playable");
 
-        videos.forEach((video) => {
-            // Ensure the video element supports play and pause methods
-            if (
-                typeof video.play === "function" &&
-                typeof video.pause === "function"
-            ) {
-                video.addEventListener("mouseenter", () => {
-                    video.play();
-                });
+		videos.forEach((video) => {
+			// Ensure the video element supports play and pause methods
+			if (
+				typeof video.play === "function" &&
+				typeof video.pause === "function"
+			) {
+				video.addEventListener("mouseenter", () => {
+					video.play();
+				});
 
-                video.addEventListener("mouseleave", () => {
-                    video.pause();
-                    video.currentTime = 0;
-                });
-            }
+				video.addEventListener("mouseleave", () => {
+					video.pause();
+					video.currentTime = 0;
+				});
+			}
 
-            videos.forEach((video) => {
-                if (window.innerWidth < 1025) {
-                    video.muted = true;
-                    video.play();
-                }
-            });
-        });
+			videos.forEach((video) => {
+				if (window.innerWidth < 1025) {
+					video.muted = true;
+					video.play();
+				}
+			});
+		});
 
-        // on screensize change
-        window.addEventListener("resize", () => {
-            videos.forEach((video) => {
-                if (window.innerWidth < 1025) {
-                    video.muted = true;
-                    // video.play();
-                }
-            });
-        });
-    });
+		// on screensize change
+		window.addEventListener("resize", () => {
+			videos.forEach((video) => {
+				if (window.innerWidth < 1025) {
+					video.muted = true;
+					// video.play();
+				}
+			});
+		});
+	});
 </script>
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";
 ---
 
 <Layout
diff --git a/src/pages/socials.astro b/src/pages/socials.astro
index 347aa77..3847845 100644
--- a/src/pages/socials.astro
+++ b/src/pages/socials.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import StreamScheduleComponent from "../components/sections/StreamSchedule.svelte";
-import Footer from "../components/sections/FooterComponent.astro";
+import StreamScheduleComponent from "../components/socials/StreamSchedule.svelte";
+import Footer from "../components/global/FooterComponent.astro";
 import { Image } from "astro:assets";
 import profile from "./_images/profile.webp";
 import WebsiteIcon from "./_images/website-icon.svg";
diff --git a/src/pages/what-i-do.astro b/src/pages/what-i-do.astro
index f26cef6..e06896e 100644
--- a/src/pages/what-i-do.astro
+++ b/src/pages/what-i-do.astro
@@ -1,10 +1,10 @@
 ---
-import NavBar from "../components/sections/NavBar.astro";
+import NavBar from "../components/global/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
-import WhatIDoComponent from "../components/sections/WhatIDoComponent.astro";
-import Card from "../components/elements/Card.astro";
-import Line from "../components/elements/NetworkLine.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import WhatIDoComponent from "../components/what-i-do/WhatIDoComponent.astro";
+import Card from "../components/global/Card.astro";
+import Line from "../components/global/NetworkLine.astro";
+import Footer from "../components/global/FooterComponent.astro";
 ---
 
 <Layout
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
deleted file mode 100644
index b68b7db..0000000
--- a/tailwind.config.cjs
+++ /dev/null
@@ -1,30 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-    theme: {
-        extend: {
-            keyframes: {
-                gradient: {
-                    "0%": {
-                        "background-position": "0% 50%",
-                    },
-                    "50%": {
-                        "background-position": "100% 50%",
-                    },
-                    "100%": {
-                        "background-position": "0% 50%",
-                    },
-                },
-                fadeIn: {
-                    "0%": { opacity: 0 },
-                    "100%": { opacity: 1 },
-                },
-            },
-            animation: {
-                gradient: "gradient 15s ease infinite",
-                fadeIn: "fadeIn 1s ease",
-            },
-        },
-    },
-    plugins: [],
-};