stream schedule component added to socials

package.json

@@ -1,24 +1,26 @@
 {
-    "name": "dev-portfolio",
+  "name": "dev-portfolio",
-    "type": "module",
+  "type": "module",
-    "version": "3.0.1",
+  "version": "3.0.1",
-    "scripts": {
+  "scripts": {
-        "dev": "astro dev",
+    "dev": "astro dev",
-        "start": "astro dev",
+    "start": "astro dev",
-        "build": "astro build",
+    "build": "astro build",
-        "preview": "astro preview",
+    "preview": "astro preview",
-        "astro": "astro"
+    "astro": "astro"
-    },
+  },
-    "dependencies": {
+  "dependencies": {
-        "@astrojs/svelte": "^4.0.2",
+    "@astrojs/svelte": "^4.0.2",
-        "@astrojs/tailwind": "^5.0.0",
+    "@astrojs/tailwind": "^5.0.0",
-        "astro": "^3.2.0",
+    "astro": "^3.2.0",
-        "svelte": "^4.2.1",
+    "moment": "^2.30.1",
-        "tailwindcss": "^3.3.3"
+    "moment-timezone": "^0.5.45",
-    },
+    "svelte": "^4.2.1",
-    "devDependencies": {
+    "tailwindcss": "^3.3.3"
-        "prettier": "^3.0.3",
+  },
-        "prettier-plugin-astro": "^0.12.0",
+  "devDependencies": {
-        "prettier-plugin-svelte": "^3.0.3"
+    "prettier": "^3.0.3",
-    }
+    "prettier-plugin-astro": "^0.12.0",
+    "prettier-plugin-svelte": "^3.0.3"
+  }
 }

src/components/sections/IntroComponent.svelte

@@ -146,7 +146,8 @@
             >, <br class="sm:hidden" />I'm Ryan!
         </div>
         <p class="text-left">
-            I was born and raised in Malaysia, and fluent in Mandarin Chinese
+            I was born and raised in Malaysia, currently studying my Bachelor's
+            in Computer Science in Australia! I speak fluent in Mandarin Chinese
             and English.
             <br /><br />
             I'm passionate about developing open source projects that benefit others,

src/components/sections/StreamSchedule.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+    import moment from "moment-timezone";
+    import { onMount } from "svelte";
+
+    let adjusted = true;
+
+    const myLocation = "Australia/Melbourne";
+
+    /**
+     * Calculates the upcoming specified time for a given day of the week in my timezone.
+     *
+     * This function initially finds the upcoming Friday at 8 AM in my timezone.
+     * It then adjusts this time based on the provided `dayOfWeek` and `time24` parameters to find the
+     * upcoming time specified by these parameters. If the specified time has already passed for the current week,
+     * it calculates the time for the next week.
+     *
+     * @param dayOfWeek - The day of the week as an integer (1 for Monday, 7 for Sunday).
+     * @param time24 - The time in 24-hour format (e.g., "14:00" for 2 PM).
+     * @returns A moment object representing the upcoming specified time in my timezone.
+     */
+    function getUpcomingTimeDevTZ(
+        dayOfWeek: number,
+        time24: string,
+    ): moment.Moment {
+        // Current time in my timezone
+        let now = moment.tz(myLocation);
+
+        // Find the upcoming Friday
+        let upcomingFriday = now.clone().day(5).hour(8).minute(0).second(0);
+        if (now.day() >= 5 && now.format("HH:mm") >= "08:00") {
+            // If today is Friday and it's already past 8am, set to next Friday
+            upcomingFriday.add(1, "week");
+        }
+
+        // Adjust based on the provided day and time
+        let dayDiff = (5 - dayOfWeek + 7) % 7; // Calculate days until Friday
+        let inputTime = moment(time24, "HH:mm");
+        let upcomingTime = now
+            .clone()
+            .day(dayOfWeek)
+            .hour(inputTime.hour())
+            .minute(inputTime.minute())
+            .second(0);
+
+        if (now.isAfter(upcomingTime)) {
+            upcomingTime.add(1, "week"); // If the time has already passed this week, set to next week
+        }
+
+        return upcomingTime.tz(myLocation);
+    }
+
+    /**
+     * Convert a given time in my timezone to the user's local timezone.
+     * @param {moment.Moment} devTimeZone - Moment object representing the time in my timezone.
+     * @returns A moment object representing the equivalent time in the user's local timezone.
+     */
+    function convertToUserLocalTimezone(
+        devTimeZone: moment.Moment,
+    ): moment.Moment {
+        return devTimeZone.clone().tz(moment.tz.guess());
+    }
+
+    type Schedule = {
+        day: string;
+        start: string;
+        end: string;
+    };
+
+    let myStreamSchedule = [];
+    let localisedStreamSchedule = [];
+
+    let formattedSchedule: Schedule[] = [];
+    let formattedLocalisedSchedule: Schedule[] = [];
+
+    function displayStreamSchedule() {
+        myStreamSchedule = [
+            {
+                start: getUpcomingTimeDevTZ(5, "10:00"),
+                end: getUpcomingTimeDevTZ(5, "18:00"),
+            },
+            {
+                start: getUpcomingTimeDevTZ(6, "10:00"),
+                end: getUpcomingTimeDevTZ(6, "18:00"),
+            },
+        ];
+
+        localisedStreamSchedule = myStreamSchedule.map((stream) => ({
+            start: convertToUserLocalTimezone(stream.start),
+            end: convertToUserLocalTimezone(stream.end),
+        }));
+
+        formattedSchedule = myStreamSchedule.map((stream) => ({
+            day: stream.start.format("dddd"),
+            start: stream.start.format("h:mm a"),
+            end: stream.end.format("h:mm a"),
+        }));
+
+        formattedLocalisedSchedule = localisedStreamSchedule.map((stream) => ({
+            day: stream.start.format("dddd"),
+            start: stream.start.format("h:mm a"),
+            end: stream.end.format("h:mm a"),
+        }));
+    }
+
+    onMount(() => {
+        // Example usage
+        displayStreamSchedule();
+    });
+</script>
+
+<!-- TABS -->
+<div
+    class="w-full flex
+        bg-[#141414]
+        rounded-xl
+        px-1 py-1 z-20"
+>
+    <button
+        on:click={() => (adjusted = true)}
+        class="rounded-lg w-1/2 py-2
+        transition-colors duration-150
+        {adjusted ? 'text-white bg-[#303030]' : 'text-gray-400'}"
+        >Your Timezone</button
+    >
+    <button
+        on:click={() => (adjusted = false)}
+        class="rounded-lg flex-grow py-2
+        transition-colors duration-150
+        {adjusted ? 'text-gray-400' : 'text-white bg-[#303030]'}">AEDT</button
+    >
+</div>
+<div class="mt-2">
+    <table>
+        <tr>
+            <th>Day</th>
+            <th>Time</th>
+        </tr>
+        {#if adjusted}
+            {#each formattedLocalisedSchedule as localTime}
+                <tr>
+                    <td class="px-1 md:px-5">{localTime.day}</td>
+                    <td class="px-1 md:px-5"
+                        >{localTime.start} - {localTime.end}</td
+                    >
+                </tr>
+            {/each}
+        {:else}
+            {#each formattedSchedule as devTime}
+                <tr>
+                    <td class="px-1 md:px-5">{devTime.day}</td>
+                    <td class="px-1 md:px-5">{devTime.start} - {devTime.end}</td
+                    >
+                </tr>
+            {/each}
+        {/if}
+    </table>
+</div>

src/pages/socials.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import StreamScheduleComponent from "../components/sections/StreamSchedule.svelte";
 ---
 
 <Layout title="Socials" description="Check out Ryan's socials">
@@ -421,8 +422,17 @@ import Layout from "../layouts/Layout.astro";
 						</div>
 					</div>
 				</a>
+				<!-- Stream Schedule -->
+				<div class="social-card col-span-2 h-fit">
+					<div
+						class="social-card-content flex justify-center items-center flex-col p-0 md:p-3"
+					>
+						<h2 class="font-bold text-xl mb-3">Stream Schedule</h2>
+						<StreamScheduleComponent client:load />
+					</div>
+				</div>
 				<!-- Location -->
-				<div class="social-card col-span-2">
+				<div class="social-card col-span-2 md:col-span-1 lg:col-span-2">
 					<div
 						class="social-card-content flex flex-col justify-center items-start gap-5"
 					>
@@ -585,11 +595,14 @@ import Layout from "../layouts/Layout.astro";
 							</div>
 							<div>
 								<h2 class="font-bold text-xl">Discord</h2>
-								<p class="text-[#ccc]">rython.dev/discord</p>
+								<p class="text-[#ccc]">
+									rython.dev/<wbr />discord
+								</p>
 							</div>
 						</div>
 					</div>
 				</a>
+				<div class="opacity-0 hidden lg:block"></div>
 				<!-- Twitter -->
 				<a href="https://twitter.com/@RythonDev" target="_blank">
 					<div class="social-card">
@@ -648,6 +661,7 @@ import Layout from "../layouts/Layout.astro";
 						</div>
 					</div>
 				</a>
+				<div class="opacity-0 hidden md:block lg:hidden"></div>
 				<!-- Threads -->
 				<a href="https://www.threads.net/@rythondev" target="_blank">
 					<div class="social-card">
@@ -786,7 +800,6 @@ import Layout from "../layouts/Layout.astro";
 		border-radius: inherit;
 		/* flex-grow: 1; */
 		inset: 1px;
-		padding: 10px;
 		position: absolute;
 		padding: 1.75rem;
 		z-index: 3;