organized file structure, updated astro dependency

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",
+            "version": "2.12.2",
-            "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.12.1.tgz",
+            "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.12.2.tgz",
-            "integrity": "sha512-WDSyVIiz7sNcJcCJxJFITu6XjfGhJ50Z0auyaWsrM+xb07IlhBLFtQuDkNy0caVHWNcKTM2LISAaHhgkRqGAVg==",
+            "integrity": "sha512-w2zfvhjNCkNMmMMOn5b0J8+OmUaBL1o40ipMvqcG6NRpdC+lKxmTi48DT8Xw0SzJ3AfmeFLB45zXZXtmbsjcgw==",
             "license": "MIT"
         },
         "node_modules/@astrojs/internal-helpers": {
@@ -1587,12 +1587,12 @@
             }
         },
         "node_modules/astro": {
-            "version": "5.9.1",
+            "version": "5.10.0",
-            "resolved": "https://registry.npmjs.org/astro/-/astro-5.9.1.tgz",
+            "resolved": "https://registry.npmjs.org/astro/-/astro-5.10.0.tgz",
-            "integrity": "sha512-wxoJcTbuDZNFSv6EaL0PAlrp0Wx6VnOAULCXvy0scsV70oWMeUkdxuBxfO54JxO5Qgyvwj9h99y6E0elqOpGtA==",
+            "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",

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",

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>

src/components/experience/ExperienceComponent.astro

@@ -1,6 +1,6 @@
 ---
-import Card from "../elements/Card.astro";
+import Card from "../global/Card.astro";
-import Line from "../elements/NetworkLine.astro";
+import Line from "../global/NetworkLine.astro";
 ---
 
 <div id="Experience" class="h-fit">

src/components/experience/MoreExperience.astro

@@ -1,6 +1,6 @@
 ---
-import Card from "../elements/Card.astro";
+import Card from "../global/Card.astro";
-import Line from "../elements/NetworkLine.astro";
+import Line from "../global/NetworkLine.astro";
 ---
 
 <div id="Experience" class="h-fit">

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"]);

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 CoworkingGuide from "../images/projects/coworking-guide.webp";
-import Wnrs from "./images/projects/wnrs.webp";
+import Wnrs from "../images/projects/wnrs.webp";
-import TwitchPlays from "./images/projects/twitchplays.webp";
+import TwitchPlays from "../images/projects/twitchplays.webp";
 ---
 
 <div

src/components/sections/skills/MoreSkills.astro

@@ -1,6 +1,6 @@
 ---
-import Card from "../elements/Card.astro";
+import Card from "../global/Card.astro";
-import Line from "../elements/NetworkLine.astro";
+import Line from "../global/NetworkLine.astro";
 ---
 
 <div id="Experience" class="h-fit">

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>

src/components/skills/SkillsComponent.astro

@@ -1,6 +1,6 @@
 ---
-import Card from "../elements/Card.astro";
+import Card from "../global/Card.astro";
-import Line from "../elements/NetworkLine.astro";
+import Line from "../global/NetworkLine.astro";
 ---
 
 <div class="h-fit w-full pt-20">

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

src/pages/blog/[...slug].astro

@@ -1,8 +1,8 @@
 ---
 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");

src/pages/blog/index.astro

@@ -1,8 +1,7 @@
 ---
-import NavBar from "../../components/sections/NavBar.astro";
 import Layout from "../../layouts/Layout.astro";
-import Card from "../../components/elements/Card.astro";
+import Card from "../../components/global/Card.astro";
-import Footer from "../../components/sections/FooterComponent.astro";
+import Footer from "../../components/global/FooterComponent.astro";
 import { getCollection } from "astro:content";
 
 const blogPosts = await getCollection("blog");
@@ -45,7 +44,7 @@ const blogPosts = await getCollection("blog");
 										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"
+										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"

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 ContactComponent from "../components/contact/ContactComponent.svelte";
-import Card from "../components/elements/Card.astro";
+import Card from "../components/global/Card.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import Footer from "../components/global/FooterComponent.astro";
 ---
 
 <Layout

src/pages/experience.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 EducationComponent from "../components/sections/ExperienceComponent.astro";
+import EducationComponent from "../components/experience/ExperienceComponent.astro";
-import MoreExperience from "../components/sections/MoreExperience.astro";
+import MoreExperience from "../components/experience/MoreExperience.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import Footer from "../components/global/FooterComponent.astro";
 ---
 
 <Layout

src/pages/faq.astro

@@ -1,7 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Card from "../components/elements/Card.astro";
+import Card from "../components/global/Card.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import Footer from "../components/global/FooterComponent.astro";
 ---
 
 <Layout title="Socials" description="Check out Ryan's socials">

src/pages/index.astro

@@ -1,15 +1,15 @@
 ---
-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 NetworkLine from "../components/global/NetworkLine.astro";
-import WhatIDo from "../components/sections/WhatIDoComponent.astro";
+import WhatIDo from "../components/what-i-do/WhatIDoComponent.astro";
-import Intro from "../components/sections/IntroComponent.svelte";
+import Intro from "../components/home/IntroComponent.svelte";
-import Projects from "../components/sections/ProjectsComponent.astro";
+import Projects from "../components/projects/ProjectsComponent.astro";
-import Experience from "../components/sections/ExperienceComponent.astro";
+import Experience from "../components/experience/ExperienceComponent.astro";
-import Skills from "../components/sections/SkillsComponent.astro";
+import Skills from "../components/skills/SkillsComponent.astro";
-import Contact from "../components/sections/ContactComponent.svelte";
+import Contact from "../components/contact/ContactComponent.svelte";
-import Card from "../components/elements/Card.astro";
+import Card from "../components/global/Card.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import Footer from "../components/global/FooterComponent.astro";
 ---
 
 <Layout

src/pages/projects.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 ProjectsComponent from "../components/sections/ProjectsComponent.astro";
+import ProjectsComponent from "../components/projects/ProjectsComponent.astro";
-import MoreProjects from "../components/sections/MoreProjects.svelte";
+import MoreProjects from "../components/projects/MoreProjects.svelte";
-import Footer from "../components/sections/FooterComponent.astro";
+import Footer from "../components/global/FooterComponent.astro";
 ---
 
 <Layout title="Projects" description="View what projects RythonDev has made">

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 SkillsComponent from "../components/skills/SkillsComponent.astro";
-import MoreSkills from "../components/sections/MoreSkills.astro";
+import MoreSkills from "../components/skills/MoreSkills.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import Footer from "../components/global/FooterComponent.astro";
 ---
 
 <Layout

src/pages/socials.astro

@@ -1,7 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import StreamScheduleComponent from "../components/sections/StreamSchedule.svelte";
+import StreamScheduleComponent from "../components/socials/StreamSchedule.svelte";
-import Footer from "../components/sections/FooterComponent.astro";
+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";

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 WhatIDoComponent from "../components/what-i-do/WhatIDoComponent.astro";
-import Card from "../components/elements/Card.astro";
+import Card from "../components/global/Card.astro";
-import Line from "../components/elements/NetworkLine.astro";
+import Line from "../components/global/NetworkLine.astro";
-import Footer from "../components/sections/FooterComponent.astro";
+import Footer from "../components/global/FooterComponent.astro";
 ---
 
 <Layout

tailwind.config.cjs

@@ -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: [],
-};