diff --git a/public/images/ryan-run-TR.webp b/public/images/ryan-run-TR.webp new file mode 100644 index 0000000..7369d06 Binary files /dev/null and b/public/images/ryan-run-TR.webp differ diff --git a/public/images/socials/kofi_s_logo_nolabel.webp b/public/images/socials/kofi_s_logo_nolabel.webp new file mode 100644 index 0000000..e78257f Binary files /dev/null and b/public/images/socials/kofi_s_logo_nolabel.webp differ diff --git a/src/pages/socials.astro b/src/pages/socials.astro index c28cf1a..10f648e 100644 --- a/src/pages/socials.astro +++ b/src/pages/socials.astro @@ -1,135 +1,790 @@ --- import Layout from "../layouts/Layout.astro"; -import SocialsComponent from "../components/elements/Socials.svelte"; + +const MY_TIMEZONE = "Asia/Kuala_Lumpur"; + +let hoursAhead = 0; +let minutesAhead = 0; + +function getTimezoneDifference(timezone1: string, timezone2: string) { + // Create two dates: one in each time zone + const date1 = new Date().toLocaleString("en-US", { timeZone: timezone1 }); + const date2 = new Date().toLocaleString("en-US", { timeZone: timezone2 }); + + // Convert the dates to Date objects + const dateObj1 = new Date(date1); + const dateObj2 = new Date(date2); + + // Get the difference in minutes between the two dates + const diffMinutes = (dateObj2.getTime() - dateObj1.getTime()) / (1000 * 60); + + // Convert the difference in minutes to hours and minutes + const diffHours = Math.floor(diffMinutes / 60); + const diffMinutesRemaining = Math.floor(diffMinutes % 60); + + return { hours: diffHours, minutes: diffMinutesRemaining }; +} + +function displayTimeDifference(hour: number, minutes: number) { + let ahead = false; + if (hour < 0) { + hour = 24 + hour; + } else { + ahead = true; + } + + if (hour === 0 && minutes === 0) { + return ""; + } + + let differenceDisplay = ahead ? "ahead" : "behind"; + + if (hour === 0) { + return `( ${minutes} minutes ${differenceDisplay} )`; + } + + if (minutes === 0) { + return `( ${hour} hours ${differenceDisplay} )`; + } + + return `( ${hour} hours and ${minutes} minutes ${differenceDisplay} )`; +} + +let { hours, minutes } = getTimezoneDifference( + Intl.DateTimeFormat().resolvedOptions().timeZone, + MY_TIMEZONE +); + +let timeDifference = displayTimeDifference(hours, minutes); + +let time = new Date().toLocaleTimeString("en-US", { + timeZone: MY_TIMEZONE, + hour: "numeric", + minute: "numeric", + hour12: true, +}); + +let displayDate = new Date().toLocaleDateString("en-UK", { + timeZone: MY_TIMEZONE, + weekday: "long", + year: "numeric", + month: "short", + day: "numeric", +}); --- - -
-
-
- Ryan's Avatar -
-

@RythonDev

-

Web Developer, Twitch streamer

-
- -
-
+
- - - Twitch + +
+ + - - YouTube + + - - Discord + + - - Instagram + + + - - Ko-fi + + - - Github + + - - Codepen + + + + + + + + + + + + + + + +
+
+ Hover Light effect by + + Hyperplexed
+ + +