@@ -61,15 +61,9 @@ const {
}
.card {
- background: #1c1c1c;
- background: linear-gradient(
- 135deg,
- rgba(18, 18, 18, 1) 0%,
- rgba(30, 30, 30, 1) 33%,
- rgba(25, 25, 25, 1) 66%,
- rgba(19, 19, 19, 1) 100%
- );
- --tw-shadow-color: var(--shadowColor);
+ /* background: #1c1c1c; */
+ /* background: linear-gradient(135deg, rgb(38, 38, 38)#101010 20%, 100%); */
+ box-shadow: 0 10px 25px 10px var(--shadowColor);
padding: 0.5rem;
}
diff --git a/src/components/global/FooterComponent.astro b/src/components/global/FooterComponent.astro
index 8a0d84e..4da3549 100644
--- a/src/components/global/FooterComponent.astro
+++ b/src/components/global/FooterComponent.astro
@@ -1,5 +1,5 @@
diff --git a/src/components/global/NavBar.astro b/src/components/global/NavBar.astro
index 437c7e9..dd30de6 100644
--- a/src/components/global/NavBar.astro
+++ b/src/components/global/NavBar.astro
@@ -25,8 +25,4 @@ const navLinks = [
];
---
-
- Copyright © 2023-{new Date().getFullYear()} RythonDev. All Rights Reserved.
+ Copyright © 2023-{new Date().getFullYear()} Ryan Lee. All Rights Reserved.
-
+
@@ -40,13 +43,13 @@ import { Image } from "astro:assets";
/>
@@ -26,7 +29,7 @@ import { Image } from "astro:assets";
id="name"
class="animate-gradient text-2xl font-bold"
>
- RythonDev
+ Ryan Lee
Full Stack Developer
-
I'm Ryan! +
I'm Ryan! +
- A Malaysian software developer studying in Australia, fluent - in English and Mandarin Chinese. My work in software - development has connected me with many Twitch streamers and - content creators. + I'm a Malaysian software developer studying in Australia on + a 50% excellence scholarship. My work in software + development and content creation has connected me with many + Twitch streamers and content creators.
@@ -61,12 +64,12 @@ import { Image } from "astro:assets";
#name {
background: linear-gradient(
90deg,
- #16ff00 0%,
- #72ffff 45%,
+ #72ffff 0%,
+ #20ffb8 55%,
#0096ff 100%
);
- background-size: 300%;
+ background-size: 200%;
background-clip: text;
-webkit-background-clip: text;
diff --git a/src/components/images/pfp_new_medium.webp b/src/components/images/pfp_new_medium.webp
new file mode 100644
index 0000000..a9ed000
Binary files /dev/null and b/src/components/images/pfp_new_medium.webp differ
diff --git a/src/components/images/projects/portfolio-roast-bot.webp b/src/components/images/projects/portfolio-roast-bot.webp
new file mode 100644
index 0000000..2888639
Binary files /dev/null and b/src/components/images/projects/portfolio-roast-bot.webp differ
diff --git a/src/components/projects/Project.astro b/src/components/projects/Project.astro
index 75e3a0a..040e49d 100644
--- a/src/components/projects/Project.astro
+++ b/src/components/projects/Project.astro
@@ -27,7 +27,7 @@ const leftProject = position == "left";
---
- const streamers = [
- {
- streamer: "4l1c3_0",
- task: "mental breakdance",
- },
- {
- streamer: "arcanexviii",
- task: "babysit",
- },
- {
- streamer: "brisim_claimhte",
- task: "rewrite history thesis",
- },
- {
- streamer: "Bubxmicn",
- task: "drive a truck",
- },
- {
- streamer: "charliosaurus",
- task: "praise the lord",
- },
- {
- streamer: "clari_miu",
- task: "be sweaty",
- },
- {
- streamer: "cloudydayzzz",
- task: "stay up at night",
- },
- {
- streamer: "creativepepper",
- task: "develop mobile app",
- },
- {
- streamer: "DATJI_",
- task: "IRL KBBQ stream",
- },
- {
- streamer: "EarliestTea",
- task: "chat about MBTI",
- },
- {
- streamer: "Ellyskey",
- task: "sell YOUthversity merch",
- },
- {
- streamer: "HarryIsTrying",
- task: "be a strategy consultant",
- },
- {
- streamer: "itsbrandonut",
- task: "cowork then league",
- },
- {
- streamer: "lala_xitlali",
- task: "design fashionable clothes",
- },
- {
- streamer: "lyricalclove",
- task: "teach English",
- },
- {
- streamer: "nachoburrit0",
- task: "update spreadsheets",
- },
- {
- streamer: "nihn_",
- task: "Release new Lo-fi music",
- },
- {
- streamer: "lanezzz_",
- task: "be a supermodel",
- },
- {
- streamer: "PineappleEffect",
- task: "edit video",
- },
- {
- streamer: "pinsaregood",
- task: "go on another hiatus",
- },
- {
- streamer: "lilylikesrocks",
- task: "learn about rocks",
- },
- {
- streamer: "snowxcone",
- task: "do more leetcode",
- },
- {
- streamer: "studypaws",
- task: "be a vet",
- },
- {
- streamer: "sunfflawer",
- task: "be a sunflower",
- },
- {
- streamer: "Supernaturalwriter",
- task: "hit the gym",
- },
- {
- streamer: "ThePainfulPhD",
- task: "study about pain",
- },
- {
- streamer: "theyolotato",
- task: "be a potato",
- },
- {
- streamer: "xeno_hiraeth",
- task: "anki flashcards",
- },
- ];
+ const streamers = [
+ {
+ streamer: "4l1c3_0",
+ task: "mental breakdance",
+ },
+ {
+ streamer: "arcanexviii",
+ task: "babysit",
+ },
+ {
+ streamer: "brisim_claimhte",
+ task: "rewrite history thesis",
+ },
+ {
+ streamer: "Bubxmicn",
+ task: "drive a truck",
+ },
+ {
+ streamer: "charliosaurus",
+ task: "praise the lord",
+ },
+ {
+ streamer: "clari_miu",
+ task: "be sweaty",
+ },
+ {
+ streamer: "cloudydayzzz",
+ task: "stay up at night",
+ },
+ {
+ streamer: "creativepepper",
+ task: "develop mobile app",
+ },
+ {
+ streamer: "DATJI_",
+ task: "IRL KBBQ stream",
+ },
+ {
+ streamer: "EarliestTea",
+ task: "chat about MBTI",
+ },
+ {
+ streamer: "Ellyskey",
+ task: "sell YOUthversity merch",
+ },
+ {
+ streamer: "HarryIsTrying",
+ task: "be a strategy consultant",
+ },
+ {
+ streamer: "itsbrandonut",
+ task: "cowork then league",
+ },
+ {
+ streamer: "lala_xitlali",
+ task: "design fashionable clothes",
+ },
+ {
+ streamer: "lyricalclove",
+ task: "teach English",
+ },
+ {
+ streamer: "nachoburrit0",
+ task: "update spreadsheets",
+ },
+ {
+ streamer: "nihn_",
+ task: "Release new Lo-fi music",
+ },
+ {
+ streamer: "lanezzz_",
+ task: "be a supermodel",
+ },
+ {
+ streamer: "PineappleEffect",
+ task: "edit video",
+ },
+ {
+ streamer: "pinsaregood",
+ task: "go on another hiatus",
+ },
+ {
+ streamer: "lilylikesrocks",
+ task: "learn about rocks",
+ },
+ {
+ streamer: "snowxcone",
+ task: "do more leetcode",
+ },
+ {
+ streamer: "studypaws",
+ task: "be a vet",
+ },
+ {
+ streamer: "sunfflawer",
+ task: "be a sunflower",
+ },
+ {
+ streamer: "Supernaturalwriter",
+ task: "hit the gym",
+ },
+ {
+ streamer: "ThePainfulPhD",
+ task: "study about pain",
+ },
+ {
+ streamer: "theyolotato",
+ task: "be a potato",
+ },
+ {
+ streamer: "xeno_hiraeth",
+ task: "anki flashcards",
+ },
+ ];
- interface Props {
- classList: string;
- }
+ interface Props {
+ classList: string;
+ }
- let { classList }: Props = $props();
+ let { classList }: Props = $props();
(".playable");
- let userInteracted = false;
-
- const handleUserInteraction = () => {
- userInteracted = true;
- document.removeEventListener("click", handleUserInteraction);
- document.removeEventListener("keydown", handleUserInteraction);
- };
-
- document.addEventListener("click", handleUserInteraction);
- document.addEventListener("keydown", handleUserInteraction);
-
videos.forEach((video) => {
// Ensure the video element supports play and pause methods
if (
@@ -44,15 +33,9 @@
typeof video.pause === "function"
) {
video.addEventListener("mouseenter", () => {
- if (userInteracted) {
- video.volume = 0.2;
- video.muted = false;
- video.play();
- } else {
- video.volume = 0;
- video.muted = true;
- video.play();
- }
+ video.volume = 0;
+ video.muted = true;
+ video.play();
});
video.addEventListener("mouseleave", () => {
@@ -86,7 +69,7 @@
class="background-img absolute
top-1/2
left-1/2 max-w-full rounded-xl border-2
- border-solid border-white
+ border-solid border-gray-800
opacity-40
{positionLeft ? 'left' : 'right'}"
width="700"
@@ -98,7 +81,7 @@
class="playable frontfacing-vid absolute
top-1/2 left-1/2 max-w-full rounded-xl
border-2
- border-solid border-white
+ border-solid border-gray-800
opacity-100
{positionLeft ? 'left' : 'right'}"
>
@@ -127,9 +110,9 @@
>
{#each tags as tag}
;
- primaryColor?: string;
- className?: string;
-}
-
-const { title, tags, primaryColor, className = "" } = Astro.props;
----
-
-
+
{tag}
))
@@ -119,30 +105,53 @@ const leftProject = position == "left";
-
-
+
+
diff --git a/src/components/projects/VideoProject.svelte b/src/components/projects/VideoProject.svelte
index 953b163..5184d27 100644
--- a/src/components/projects/VideoProject.svelte
+++ b/src/components/projects/VideoProject.svelte
@@ -26,17 +26,6 @@
onMount(() => {
const videos = document.querySelectorAll
{tag}
@@ -140,27 +123,45 @@
diff --git a/src/components/skills/MoreSkills.astro b/src/components/skills/MoreSkills.astro
deleted file mode 100644
index 898d8f7..0000000
--- a/src/components/skills/MoreSkills.astro
+++ /dev/null
@@ -1,57 +0,0 @@
----
-import Card from "../global/Card.astro";
-import Line from "../global/NetworkLine.astro";
-import Skill from "./Skill.astro";
----
-
-
-
diff --git a/src/components/skills/Skill.astro b/src/components/skills/Skill.astro
deleted file mode 100644
index 96bc434..0000000
--- a/src/components/skills/Skill.astro
+++ /dev/null
@@ -1,37 +0,0 @@
----
-import Card from "../global/Card.astro";
-
-interface Props {
- title: string;
- tags?: Array
-
-
-
-
-
-
-
diff --git a/src/components/skills/SkillsComponent.astro b/src/components/skills/SkillsComponent.astro
index 97834b2..9948a81 100644
--- a/src/components/skills/SkillsComponent.astro
+++ b/src/components/skills/SkillsComponent.astro
@@ -1,63 +1,86 @@
---
import Card from "../global/Card.astro";
-import Line from "../global/NetworkLine.astro";
-import Skill from "./Skill.astro";
---
-
-
-
-
-
- {title}
--
-
- {
- tags?.map((tag, index) => (
-
-
- {tag}
-
- ))
- }
-
-
Skills
-
-
-
+
+
diff --git a/src/components/socials/Socials.astro b/src/components/socials/Socials.astro
index e7fdbe8..87aaeee 100644
--- a/src/components/socials/Socials.astro
+++ b/src/components/socials/Socials.astro
@@ -1,7 +1,7 @@
-Skills
+ +
+
+
+
+
+
+
+
+ Frontend
+
+
+ Typescript,
+ React,
+ TailwindCSS
+
+
+ Backend
+
+
+ Node.js,
+ PHP,
+ Go,
+ Rust
+
+
+ Tools
+
+
+ Git,
+ Github,
+ Codeberg,
+ Visual Studio Code
+
+
+
+
+ + I primarily work on websites on both the frontend and + the backend. +
++ Other projects I work on include Python scripts, Discord + bots, and Streamer.bot C# scripts. +
++ Full resume available upon requests via + Email. +
+
+
+ View Resume
+
+
+
+
-
+
@@ -35,7 +35,7 @@
- import moment from "moment-timezone";
- import { onMount } from "svelte";
+ import moment from "moment-timezone";
+ import { onMount } from "svelte";
- const myLocation = "Australia/Melbourne";
+ const myLocation = "Australia/Melbourne";
- type StreamScheduleDay = {
- start: moment.Moment;
- end: moment.Moment;
- };
+ type StreamScheduleDay = {
+ start: moment.Moment;
+ end: moment.Moment;
+ };
- const myStreamSchedule: null | StreamScheduleDay[] = [
- {
- start: getUpcomingTimeDevTZ(4, "11:00"),
- end: getUpcomingTimeDevTZ(4, "16:00"),
- },
- {
- start: getUpcomingTimeDevTZ(5, "11:00"),
- end: getUpcomingTimeDevTZ(5, "16:00"),
- },
- ];
+ const myStreamSchedule: null | StreamScheduleDay[] = [
+ {
+ start: getUpcomingTimeDevTZ(4, "10:00"),
+ end: getUpcomingTimeDevTZ(4, "20:00"),
+ },
+ {
+ start: getUpcomingTimeDevTZ(5, "14:00"),
+ end: getUpcomingTimeDevTZ(5, "20:00"),
+ },
+ ];
- /**
- * 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);
+ /**
+ * 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);
- let inputTime = moment(time24, "HH:mm");
- let upcomingTime = now
- .clone()
- .day(dayOfWeek)
- .hour(inputTime.hour())
- .minute(inputTime.minute())
- .second(0);
+ 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
- }
+ if (now.isAfter(upcomingTime)) {
+ upcomingTime.add(1, "week"); // If the time has already passed this week, set to next week
+ }
- return upcomingTime.tz(myLocation);
- }
+ 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());
- }
+ /**
+ * 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;
- };
+ type Schedule = {
+ day: string;
+ start: string;
+ end: string;
+ };
- let sameTimezone = $state(true);
- let adjusted = $state(true);
+ let sameTimezone = $state(true);
+ let adjusted = $state(true);
- let localisedStreamSchedule = [];
+ let localisedStreamSchedule = [];
- let formattedSchedule: Schedule[] = $state([]);
- let formattedLocalisedSchedule: Schedule[] = $state([]);
+ let formattedSchedule: Schedule[] = $state([]);
+ let formattedLocalisedSchedule: Schedule[] = $state([]);
- function displayStreamSchedule() {
- if (myStreamSchedule == null) {
- return;
- }
- localisedStreamSchedule = myStreamSchedule.map((stream) => ({
- start: convertToUserLocalTimezone(stream.start),
- end: convertToUserLocalTimezone(stream.end),
- }));
+ function displayStreamSchedule() {
+ if (myStreamSchedule == null) {
+ return;
+ }
+ 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"),
- }));
+ 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"),
- }));
- }
+ 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();
+ onMount(() => {
+ // Example usage
+ displayStreamSchedule();
- if (
- formattedLocalisedSchedule[0].day === formattedSchedule[0].day &&
- formattedLocalisedSchedule[0].start === formattedSchedule[0].start
- ) {
- sameTimezone = true;
- } else {
- sameTimezone = false;
- }
- });
+ if (
+ formattedLocalisedSchedule[0].day === formattedSchedule[0].day &&
+ formattedLocalisedSchedule[0].start === formattedSchedule[0].start
+ ) {
+ sameTimezone = true;
+ } else {
+ sameTimezone = false;
+ }
+ });
{#if !sameTimezone}
- (false);
- const animationFrameRef = useRef(null);
-
- const handleMouseMove = (event: any) => {
- if (animationFrameRef.current) {
- cancelAnimationFrame(animationFrameRef.current);
- }
- };
-
- return (
- <>
- (null);
+ const [activeIndex, setActiveIndex] = useState(null);
const [hamburgerOpen, setHamburgerOpen] = useState(false);
- const { width } = useWindowDimensions();
+ const hamburgerRef = useRef(null);
+ const menuRef = useRef(null);
+
+ // Track which section is in view
+ useEffect(() => {
+ const sectionIds = items.map((item) => {
+ const url = new URL(item.link, window.location.origin);
+ return url.hash.replace("#", "");
+ });
+
+ const observers: IntersectionObserver[] = [];
+
+ sectionIds.forEach((id, idx) => {
+ if (!id) return;
+
+ const element = document.getElementById(id);
+ if (!element) return;
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setActiveIndex(idx);
+ }
+ });
+ },
+ {
+ rootMargin: "-20% 0px -50% 0px",
+ },
+ );
+
+ observer.observe(element);
+ observers.push(observer);
+ });
+
+ // set hover index on projects when on "/projects"
+ const splittedURL = window.location.href.split("/");
+
+ if (splittedURL[splittedURL.length - 1]) {
+ setActiveIndex(2);
+ }
+
+ return () => {
+ observers.forEach((observer) => observer.disconnect());
+ };
+ }, [items]);
+
+ useEffect(() => {
+ // hamburger stuff
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ hamburgerOpen &&
+ hamburgerRef.current &&
+ menuRef.current &&
+ !hamburgerRef.current.contains(event.target as Node) &&
+ !menuRef.current.contains(event.target as Node)
+ ) {
+ setHamburgerOpen(false);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [hamburgerOpen]);
+
+ // Use hoveredIndex when hovering, otherwise use activeIndex
+ const displayIndex = hoveredIndex !== null ? hoveredIndex : activeIndex;
return (
-
@@ -35,7 +35,7 @@
- import moment from "moment-timezone";
- import { onMount } from "svelte";
+ import moment from "moment-timezone";
+ import { onMount } from "svelte";
- const myLocation = "Australia/Melbourne";
+ const myLocation = "Australia/Melbourne";
- type StreamScheduleDay = {
- start: moment.Moment;
- end: moment.Moment;
- };
+ type StreamScheduleDay = {
+ start: moment.Moment;
+ end: moment.Moment;
+ };
- const myStreamSchedule: null | StreamScheduleDay[] = [
- {
- start: getUpcomingTimeDevTZ(4, "11:00"),
- end: getUpcomingTimeDevTZ(4, "16:00"),
- },
- {
- start: getUpcomingTimeDevTZ(5, "11:00"),
- end: getUpcomingTimeDevTZ(5, "16:00"),
- },
- ];
+ const myStreamSchedule: null | StreamScheduleDay[] = [
+ {
+ start: getUpcomingTimeDevTZ(4, "10:00"),
+ end: getUpcomingTimeDevTZ(4, "20:00"),
+ },
+ {
+ start: getUpcomingTimeDevTZ(5, "14:00"),
+ end: getUpcomingTimeDevTZ(5, "20:00"),
+ },
+ ];
- /**
- * 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);
+ /**
+ * 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);
- let inputTime = moment(time24, "HH:mm");
- let upcomingTime = now
- .clone()
- .day(dayOfWeek)
- .hour(inputTime.hour())
- .minute(inputTime.minute())
- .second(0);
+ 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
- }
+ if (now.isAfter(upcomingTime)) {
+ upcomingTime.add(1, "week"); // If the time has already passed this week, set to next week
+ }
- return upcomingTime.tz(myLocation);
- }
+ 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());
- }
+ /**
+ * 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;
- };
+ type Schedule = {
+ day: string;
+ start: string;
+ end: string;
+ };
- let sameTimezone = $state(true);
- let adjusted = $state(true);
+ let sameTimezone = $state(true);
+ let adjusted = $state(true);
- let localisedStreamSchedule = [];
+ let localisedStreamSchedule = [];
- let formattedSchedule: Schedule[] = $state([]);
- let formattedLocalisedSchedule: Schedule[] = $state([]);
+ let formattedSchedule: Schedule[] = $state([]);
+ let formattedLocalisedSchedule: Schedule[] = $state([]);
- function displayStreamSchedule() {
- if (myStreamSchedule == null) {
- return;
- }
- localisedStreamSchedule = myStreamSchedule.map((stream) => ({
- start: convertToUserLocalTimezone(stream.start),
- end: convertToUserLocalTimezone(stream.end),
- }));
+ function displayStreamSchedule() {
+ if (myStreamSchedule == null) {
+ return;
+ }
+ 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"),
- }));
+ 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"),
- }));
- }
+ 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();
+ onMount(() => {
+ // Example usage
+ displayStreamSchedule();
- if (
- formattedLocalisedSchedule[0].day === formattedSchedule[0].day &&
- formattedLocalisedSchedule[0].start === formattedSchedule[0].start
- ) {
- sameTimezone = true;
- } else {
- sameTimezone = false;
- }
- });
+ if (
+ formattedLocalisedSchedule[0].day === formattedSchedule[0].day &&
+ formattedLocalisedSchedule[0].start === formattedSchedule[0].start
+ ) {
+ sameTimezone = true;
+ } else {
+ sameTimezone = false;
+ }
+ });
{#if !sameTimezone}
-
-
+ >AEST/
- {#if myStreamSchedule.length}
-
-
-
- {:else}
-
+
+
+ {:else}
+
diff --git a/src/components/ui/AnimatedToolTip.tsx b/src/components/ui/AnimatedToolTip.tsx
deleted file mode 100644
index d50c973..0000000
--- a/src/components/ui/AnimatedToolTip.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-
-import { useState, useRef } from "react";
-import {
- motion,
- useTransform,
- AnimatePresence,
- useMotionValue,
- useSpring,
-} from "motion/react";
-import { cn } from "@/lib/utils";
-
-export const AnimatedTooltip = ({
- className,
- children,
- text,
- href,
-}: {
- className?: string;
- children: React.ReactNode;
- text: string;
- href?: string;
-}) => {
- const [hovered, setHovered] = useState| Day | -Time | -
|---|---|
| {localTime.day} | -{localTime.start} - {localTime.end} | -
| {devTime.day} | -{devTime.start} - {devTime.end} | -
- To be announced on Discord
-
- {/if}
+ {#if myStreamSchedule.length}
+ | Day | +Time | +
|---|---|
| {localTime.day} | +{localTime.start} - {localTime.end} | +
| {devTime.day} | +{devTime.start} - {devTime.end} | +
+ To be announced on Discord
+
+ {/if}
setHovered(true)}
- onMouseLeave={() => setHovered(false)}
- >
-
- {hovered && (
-
-
-
-
- )}
-
- {!href && (
-
-
- );
-};
diff --git a/src/components/ui/NavigationBar.tsx b/src/components/ui/NavigationBar.tsx
index 539117c..24ffbf9 100644
--- a/src/components/ui/NavigationBar.tsx
+++ b/src/components/ui/NavigationBar.tsx
@@ -1,41 +1,12 @@
import { cn } from "@/lib/utils";
-import {
- AnimatePresence,
- motion,
- useScroll,
- useMotionValueEvent,
-} from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
import { Cross as HamburgerCross } from "hamburger-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
-function useWindowDimensions() {
- const hasWindow = typeof window !== "undefined";
-
- function getWindowDimensions() {
- const width = hasWindow ? window.innerWidth : 0;
- const height = hasWindow ? window.innerHeight : 0;
- return {
- width,
- height,
- };
+declare module "react" {
+ interface CSSProperties {
+ [key: `--${string}`]: string | number;
}
-
- const [windowDimensions, setWindowDimensions] = useState(
- getWindowDimensions(),
- );
-
- useEffect(() => {
- if (hasWindow) {
- function handleResize() {
- setWindowDimensions(getWindowDimensions());
- }
-
- window.addEventListener("resize", handleResize);
- return () => window.removeEventListener("resize", handleResize);
- }
- }, [hasWindow]);
-
- return windowDimensions;
}
export const HoverNavigation = ({
@@ -49,124 +20,191 @@ export const HoverNavigation = ({
className?: string;
}) => {
const [hoveredIndex, setHoveredIndex] = useState
- {text}
-
-
- {children}
-
- )}
- {href && (
-
- {children}
-
- )}
-
-
-
-
-
- 
-
-
-
-
-
-
-
- Available for work
-
-
-
-
-
-
-
-