From ee2bd693b8d1277ff0e1ba6aa599baddd89c37d2 Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Mon, 30 Jun 2025 02:11:34 +1000
Subject: [PATCH 01/13] feat: dark mode toggle hook

---
 src/app/(frontend)/layout.tsx     | 14 ++---
 src/components/DarkModeToggle.tsx | 14 +++--
 src/components/Navbar.tsx         |  4 +-
 src/hooks/Providers.tsx           | 14 +++++
 src/hooks/useTheme.tsx            | 97 +++++++++++++++++++++++++++++++
 5 files changed, 131 insertions(+), 12 deletions(-)
 create mode 100644 src/hooks/Providers.tsx
 create mode 100644 src/hooks/useTheme.tsx
diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
index f6708ae..0e306a7 100644
--- a/src/app/(frontend)/layout.tsx
+++ b/src/app/(frontend)/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import "@/styles/globals.css";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
+import Providers from "@/hooks/Providers";
 
 export const metadata: Metadata = {
   title: "Silvia Tan - Software Engineer",
@@ -9,18 +10,17 @@ export const metadata: Metadata = {
   keywords: "Silvia, Silvia Silvia, Silvia Tan, Portfolio, Software Engineer, Full Stack, Startup, Web, Frontend",
 };
 
-const RootLayout = ({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) => {
+const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   return (
     <html lang="en">
       <head>
-        <link rel="icon" href="/favicon.png" type="image/png"/>
+        <title>{`${metadata.title}`}</title>
+        <link rel="icon" href="/favicon.png" type="image/png" />
       </head>
       <body className="antialiased">
-        {children}
+        <Providers>
+          {children}
+        </Providers>
         <Analytics />
         <SpeedInsights />
       </body>
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index c1cf0e9..2ecae60 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -1,14 +1,20 @@
+import { IconDeviceDesktop, IconMoon, IconSun } from "@tabler/icons-react";
+import { useTheme } from "@/hooks/useTheme";
+
 const DarkModeToggle = () => {
+  const { handler: themeHandler, status: themeStatus } = useTheme();
+
   const toggleTheme = () => {
-    document.documentElement.classList.toggle("dark",);
+    // document.documentElement.classList.toggle("dark",);
+    themeHandler.toggle();
   };
 
   return (
     <button className="rounded-full bg-red-800" onClick={toggleTheme}>
       <div className="px-4 py-2 rounded-full -translate-y-1 bg-red-200 text-red-600 font-semibold active:translate-y-0 transition-all active:shadow-inner active:shadow-red-800">
-        {/*<IconDeviceDesktop />*/}
-        {/*<IconSun />*/}
-        {/*<IconMoon />*/}
+        {themeStatus.isDark && <IconDeviceDesktop />}
+        {themeStatus.isSystem && <IconSun />}
+        {themeStatus.isLight && <IconMoon />}
       </div>
     </button>
   );
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d4611c5..0149eb7 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ReactNode, useState } from "react";
 import { IconExternalLink } from "@tabler/icons-react";
+import DarkModeToggle from "@/components/DarkModeToggle";
 
 const NavbarLink = ({ children, className = "", link = "", newTab } : {children?: ReactNode, className?: string, link?: string, newTab?: true}) => {
   const pathname = usePathname();
@@ -24,7 +25,8 @@ const Navbar = () => {
 
   return (
     <nav className="navbar">
-      <div className="logo">
+      <div className="logo gap-4">
+        <DarkModeToggle />
         <h1>{"silvia's"}</h1>
         <button className={`burger-menu ${isBurgerOpened ? "opened" : ""}`} onClick={handleBurgerClick}>menu</button>
       </div>
diff --git a/src/hooks/Providers.tsx b/src/hooks/Providers.tsx
new file mode 100644
index 0000000..2efa556
--- /dev/null
+++ b/src/hooks/Providers.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { ReactNode } from "react";
+import { ThemeProvider } from "./useTheme";
+
+const Providers = ({ children }: {children:ReactNode}) => {
+  return (
+    <ThemeProvider>
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default Providers;
diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
new file mode 100644
index 0000000..4b4b2e2
--- /dev/null
+++ b/src/hooks/useTheme.tsx
@@ -0,0 +1,97 @@
+import { createContext, FC, ReactNode, useContext, useEffect, useState } from "react";
+
+enum Theme {
+  System = "system",
+  Light = "light",
+  Dark = "dark",
+}
+
+interface IThemeContext {
+  theme: Theme;
+  handler: {
+    toggle: () => void;
+    system: () => void;
+    light: () => void;
+    dark: () => void;
+  },
+  status: {
+    isSystem: boolean;
+    isLight: boolean;
+    isDark: boolean;
+  }
+}
+
+const defaultTheme = Theme.System;
+
+const ThemeProviderContext = createContext<IThemeContext>({
+  theme: defaultTheme,
+  handler: {
+    toggle: () => {},
+    system: () => {},
+    light: () => {},
+    dark: () => {},
+  },
+  status: {
+    isSystem: false,
+    isLight: false,
+    isDark: false,
+  },
+});
+
+interface IThemeProvider {
+  children: ReactNode;
+}
+
+export const ThemeProvider: FC<IThemeProvider> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme> (() => {
+    if (typeof window === "undefined") return defaultTheme;
+    return (localStorage.getItem("theme") as Theme) || defaultTheme;
+  });
+
+  useEffect(() => {
+    if (theme !== localStorage.getItem("theme")) localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const handleToggleTheme = () => {
+    setTheme((prev) =>
+      prev === Theme.System ? Theme.Light
+        : prev === Theme.Light ? Theme.Dark
+          : prev === Theme.Dark ? Theme.System : Theme.Light,
+    );
+  };
+
+  const handleSystemTheme = () => setTheme(Theme.System);
+  const handleLightTheme = () => setTheme(Theme.Light);
+  const handleDarkTheme = () => setTheme(Theme.Dark);
+
+  const getTheme = () => {
+    if (theme !== Theme.System) return theme;
+    const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return systemDark ? Theme.Dark : Theme.Light;
+  };
+
+  const value = {
+    theme: theme,
+    handler: {
+      toggle: handleToggleTheme,
+      system: handleSystemTheme,
+      light: handleLightTheme,
+      dark: handleDarkTheme,
+    },
+    status: {
+      isSystem: theme === Theme.System,
+      isLight: theme === Theme.Light,
+      isDark: theme === Theme.Dark,
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider value={value}>
+      <div className={`${getTheme()}`}>
+        {children}
+      </div>
+    </ThemeProviderContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeProviderContext);

From eba960152627eed9c2145ec03e6d3e41b01b5aa6 Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Sat, 5 Jul 2025 02:54:03 +1000
Subject: [PATCH 02/13] util: update eslint rule

---
 eslint.config.mjs | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index f311531..9b67851 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -16,33 +16,49 @@ const eslintConfig = [
       "indent": ["error", 2],
       "eol-last": ["error", "always"],
       "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": ["error", {
-        "argsIgnorePattern": "^_",
-      }],
       "no-trailing-spaces": "error",
       "no-multiple-empty-lines": "error",
       "no-irregular-whitespace": "error",
-      "react-hooks/rules-of-hooks": "error",
-      "react-hooks/exhaustive-deps": "error",
       "semi": ["error", "always"],
       "object-curly-spacing": ["error", "always"],
       "array-bracket-spacing": ["error", "never"],
+      "comma-dangle": ["error", "always-multiline"],
+      "comma-spacing": ["error", {
+        "before": false,
+        "after": true,
+      }],
+      "keyword-spacing": "error",
+      "space-before-blocks": "error",
       "quotes": ["error", "double"],
+      "arrow-spacing": ["error", {
+        before: true,
+        after: true,
+      }],
+
       "jsx-quotes": ["error", "prefer-double"],
-      "@typescript-eslint/no-empty-object-type": "off"
+      "react/jsx-tag-spacing": ["error", {
+        "beforeSelfClosing": "always",
+      }],
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "error",
+
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/no-unused-vars": ["error", {
+        "argsIgnorePattern": "^_",
+      }],
     },
     ignores: [
       "src/app/(payload)/**",
-    ]
+    ],
   },
   {
     files: ["src/migrations/*"],
     rules: {
       "@typescript-eslint/no-unused-vars": "off",
       "no-unused-vars": "off",
-      "quotes": "off"
-    }
-  }
+      "quotes": "off",
+    },
+  },
 ];
 
 export default eslintConfig;

From 826247f0565208b208cf59aa7191855cc9b2e786 Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Sun, 6 Jul 2025 23:56:12 +1000
Subject: [PATCH 03/13] fix: hydration issues

---
 src/hooks/Providers.tsx | 7 +++++--
 src/hooks/useTheme.tsx  | 3 ++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/hooks/Providers.tsx b/src/hooks/Providers.tsx
index 2efa556..1b8d7dc 100644
--- a/src/hooks/Providers.tsx
+++ b/src/hooks/Providers.tsx
@@ -1,9 +1,12 @@
 "use client";
 
 import { ReactNode } from "react";
-import { ThemeProvider } from "./useTheme";
+import dynamic from "next/dynamic";
 
-const Providers = ({ children }: {children:ReactNode}) => {
+// note: dynamically load custom themeprovider to avoid hydration warnings
+const ThemeProvider = dynamic(() => import("./useTheme").then((e) => e.ThemeProvider), { ssr: false });
+
+const Providers = ({ children }: { children: ReactNode }) => {
   return (
     <ThemeProvider>
       {children}
diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
index 4b4b2e2..04d89fb 100644
--- a/src/hooks/useTheme.tsx
+++ b/src/hooks/useTheme.tsx
@@ -42,6 +42,7 @@ interface IThemeProvider {
   children: ReactNode;
 }
 
+// note: use of `window` (i think?) in this provider might cause hydration issues, so need to be dynamically loaded when used
 export const ThemeProvider: FC<IThemeProvider> = ({ children }) => {
   const [theme, setTheme] = useState<Theme> (() => {
     if (typeof window === "undefined") return defaultTheme;
@@ -65,7 +66,7 @@ export const ThemeProvider: FC<IThemeProvider> = ({ children }) => {
   const handleDarkTheme = () => setTheme(Theme.Dark);
 
   const getTheme = () => {
-    if (theme !== Theme.System) return theme;
+    if (typeof window === "undefined" || theme !== Theme.System) return theme;
     const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     return systemDark ? Theme.Dark : Theme.Light;
   };

From 7552422bc37e95d09dc6d4d6dd1ffb3c8ed27887 Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Sun, 10 Aug 2025 01:50:00 +1000
Subject: [PATCH 04/13] fix: add useTheme provider requirement

---
 src/hooks/useTheme.tsx | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
index 04d89fb..a665c00 100644
--- a/src/hooks/useTheme.tsx
+++ b/src/hooks/useTheme.tsx
@@ -23,27 +23,14 @@ interface IThemeContext {
 
 const defaultTheme = Theme.System;
 
-const ThemeProviderContext = createContext<IThemeContext>({
-  theme: defaultTheme,
-  handler: {
-    toggle: () => {},
-    system: () => {},
-    light: () => {},
-    dark: () => {},
-  },
-  status: {
-    isSystem: false,
-    isLight: false,
-    isDark: false,
-  },
-});
+const ThemeProviderContext = createContext<IThemeContext|undefined>(undefined);
 
 interface IThemeProvider {
   children: ReactNode;
 }
 
 // note: use of `window` (i think?) in this provider might cause hydration issues, so need to be dynamically loaded when used
-export const ThemeProvider: FC<IThemeProvider> = ({ children }) => {
+const ThemeProvider: FC<IThemeProvider> = ({ children }) => {
   const [theme, setTheme] = useState<Theme> (() => {
     if (typeof window === "undefined") return defaultTheme;
     return (localStorage.getItem("theme") as Theme) || defaultTheme;
@@ -95,4 +82,17 @@ export const ThemeProvider: FC<IThemeProvider> = ({ children }) => {
   );
 };
 
-export const useTheme = () => useContext(ThemeProviderContext);
+/*
+ * @legacy Old implementation of theme provider/switcher.
+ * Use themeAtom instead.
+*/
+const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+  if (context == null) throw new Error("useTheme must be used within ThemeProvider.");
+  return context;
+};
+
+export {
+  ThemeProvider,
+  useTheme,
+};

From fbb9ab7ed1c200f137433e4014fdfb6793b165c5 Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Sun, 10 Aug 2025 01:51:22 +1000
Subject: [PATCH 05/13] refactor: use jotai and move providers

---
 package-lock.json                 | 30 +++++++++++++++++++++
 package.json                      |  1 +
 src/app/(frontend)/layout.tsx     |  2 +-
 src/atoms/themeAtom.ts            | 44 +++++++++++++++++++++++++++++++
 src/components/DarkModeToggle.tsx | 17 +++++-------
 src/components/Providers.tsx      | 31 ++++++++++++++++++++++
 src/hooks/Providers.tsx           | 17 ------------
 7 files changed, 114 insertions(+), 28 deletions(-)
 create mode 100644 src/atoms/themeAtom.ts
 create mode 100644 src/components/Providers.tsx
 delete mode 100644 src/hooks/Providers.tsx

diff --git a/package-lock.json b/package-lock.json
index 4f6df40..71c8daf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@vercel/analytics": "^1.5.0",
         "@vercel/speed-insights": "^1.2.0",
         "graphql": "^16.10.0",
+        "jotai": "^2.13.0",
         "next": "15.3.3",
         "payload": "^3.41.0",
         "react": "^19.0.0",
@@ -7544,6 +7545,35 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
+    "node_modules/jotai": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.13.0.tgz",
+      "integrity": "sha512-H43zXdanNTdpfOEJ4NVbm4hgmrctpXLZagjJNcqAywhUv+sTE7esvFjwm5oBg/ywT9Qw63lIkM6fjrhFuW8UDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0",
+        "@babel/template": ">=7.0.0",
+        "@types/react": ">=17.0.0",
+        "react": ">=17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@babel/template": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/joycon": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
diff --git a/package.json b/package.json
index 2aa9b78..363b34a 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@vercel/analytics": "^1.5.0",
     "@vercel/speed-insights": "^1.2.0",
     "graphql": "^16.10.0",
+    "jotai": "^2.13.0",
     "next": "15.3.3",
     "payload": "^3.41.0",
     "react": "^19.0.0",
diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
index 0e306a7..0d161f3 100644
--- a/src/app/(frontend)/layout.tsx
+++ b/src/app/(frontend)/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import "@/styles/globals.css";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
-import Providers from "@/hooks/Providers";
+import Providers from "@/components/Providers";
 
 export const metadata: Metadata = {
   title: "Silvia Tan - Software Engineer",
diff --git a/src/atoms/themeAtom.ts b/src/atoms/themeAtom.ts
new file mode 100644
index 0000000..4d08a59
--- /dev/null
+++ b/src/atoms/themeAtom.ts
@@ -0,0 +1,44 @@
+import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+enum Theme {
+  System = "system",
+  Light = "light",
+  Dark = "dark",
+}
+
+const localThemeAtom = atomWithStorage("theme", Theme.System);
+
+const getTheme = (theme: Theme) => {
+  if (typeof window === "undefined" || theme !== Theme.System) return theme;
+  const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return systemDark ? Theme.Dark : Theme.Light;
+};
+
+const themeAtom = atom(
+  (get) => {
+    return {
+      theme: getTheme(get(localThemeAtom)),
+      themeStatus: {
+        isDark: get(localThemeAtom) === Theme.Dark,
+        isLight: get(localThemeAtom) === Theme.Light,
+        isSystem: get(localThemeAtom) === Theme.System,
+      },
+    }
+  },
+  (_get, set) => {
+    set(localThemeAtom, (currTheme) => {
+      switch (currTheme) {
+        case Theme.System: return Theme.Light;
+        case Theme.Light: return Theme.Dark
+        case Theme.Dark:
+        default:
+          return Theme.System
+      }
+    })
+  }
+);
+
+export {
+  themeAtom
+};
\ No newline at end of file
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index 2ecae60..819220a 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -1,20 +1,17 @@
 import { IconDeviceDesktop, IconMoon, IconSun } from "@tabler/icons-react";
-import { useTheme } from "@/hooks/useTheme";
+import { useAtomValue, useSetAtom } from "jotai";
+import { themeAtom } from "@/atoms/themeAtom";
 
 const DarkModeToggle = () => {
-  const { handler: themeHandler, status: themeStatus } = useTheme();
-
-  const toggleTheme = () => {
-    // document.documentElement.classList.toggle("dark",);
-    themeHandler.toggle();
-  };
+  const themeStatus = useAtomValue(themeAtom).themeStatus;
+  const toggleTheme = useSetAtom(themeAtom);
 
   return (
     <button className="rounded-full bg-red-800" onClick={toggleTheme}>
       <div className="px-4 py-2 rounded-full -translate-y-1 bg-red-200 text-red-600 font-semibold active:translate-y-0 transition-all active:shadow-inner active:shadow-red-800">
-        {themeStatus.isDark && <IconDeviceDesktop />}
-        {themeStatus.isSystem && <IconSun />}
-        {themeStatus.isLight && <IconMoon />}
+        {themeStatus.isDark && <IconMoon />}
+        {themeStatus.isSystem && <IconDeviceDesktop />}
+        {themeStatus.isLight && <IconSun />}
       </div>
     </button>
   );
diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
new file mode 100644
index 0000000..691a79b
--- /dev/null
+++ b/src/components/Providers.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { ReactNode } from "react";
+import dynamic from "next/dynamic";
+import { useAtomValue } from "jotai";
+import { themeAtom } from "@/atoms/themeAtom";
+
+// note: dynamically load jotai provider so that theme atom won't flicker
+const Provider = dynamic(() => import("jotai").then((e) => e.Provider), { ssr: false });
+
+const Theme = ({ children }: {children: ReactNode}) => {
+  const theme = useAtomValue(themeAtom).theme;
+
+  return (
+    <div className={`${theme}`}>
+      {children}
+    </div>
+  );
+};
+
+const Providers = ({ children }: { children: ReactNode }) => {
+  return (
+    <Provider>
+      <Theme>
+        {children}
+      </Theme>
+    </Provider>
+  );
+};
+
+export default Providers;
diff --git a/src/hooks/Providers.tsx b/src/hooks/Providers.tsx
deleted file mode 100644
index 1b8d7dc..0000000
--- a/src/hooks/Providers.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-import dynamic from "next/dynamic";
-
-// note: dynamically load custom themeprovider to avoid hydration warnings
-const ThemeProvider = dynamic(() => import("./useTheme").then((e) => e.ThemeProvider), { ssr: false });
-
-const Providers = ({ children }: { children: ReactNode }) => {
-  return (
-    <ThemeProvider>
-      {children}
-    </ThemeProvider>
-  );
-};
-
-export default Providers;

From bd04ec6134de08a2e04511d5853060ae452f4cbe Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Sun, 10 Aug 2025 01:51:45 +1000
Subject: [PATCH 06/13] chore: lint

---
 src/app/(frontend)/blogs/[slug]/page.tsx | 4 ++--
 src/app/(frontend)/blogs/page.tsx        | 2 +-
 src/app/(frontend)/contact/page.tsx      | 2 +-
 src/app/(frontend)/projects/page.tsx     | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/(frontend)/blogs/[slug]/page.tsx b/src/app/(frontend)/blogs/[slug]/page.tsx
index c503096..066932b 100644
--- a/src/app/(frontend)/blogs/[slug]/page.tsx
+++ b/src/app/(frontend)/blogs/[slug]/page.tsx
@@ -10,9 +10,9 @@ const Blog = async ({ params } : {params: Promise<{slug: string}>}) => {
     collection: "blogs",
     select: {
       metadata: { slug: true },
-      content: { title: true, body: true }
+      content: { title: true, body: true },
     },
-    where: { "metadata.slug": { "equals": slug } }
+    where: { "metadata.slug": { "equals": slug } },
   });
 
   const content = post.docs[0].content;
diff --git a/src/app/(frontend)/blogs/page.tsx b/src/app/(frontend)/blogs/page.tsx
index af7ce3e..97c0b55 100644
--- a/src/app/(frontend)/blogs/page.tsx
+++ b/src/app/(frontend)/blogs/page.tsx
@@ -7,7 +7,7 @@ const Blogs = async () => {
     collection: "blogs",
     select:  {
       metadata: { slug: true },
-      content: { title: true  }
+      content: { title: true },
     },
     where: { _status: { equals: "published" } },
     page: 1,
diff --git a/src/app/(frontend)/contact/page.tsx b/src/app/(frontend)/contact/page.tsx
index 6f3c2af..787a116 100644
--- a/src/app/(frontend)/contact/page.tsx
+++ b/src/app/(frontend)/contact/page.tsx
@@ -17,7 +17,7 @@ const Contact = () => {
       </main>
 
       <footer>
-        <Footer hideContent/>
+        <Footer hideContent />
       </footer>
     </div>
   );
diff --git a/src/app/(frontend)/projects/page.tsx b/src/app/(frontend)/projects/page.tsx
index 8f9af90..91bd670 100644
--- a/src/app/(frontend)/projects/page.tsx
+++ b/src/app/(frontend)/projects/page.tsx
@@ -15,7 +15,7 @@ const Projects = async () => {
     page: 1,
     limit: 10,
     pagination: true,
-    sort: "_order"
+    sort: "_order",
   });
 
   return (
@@ -30,7 +30,7 @@ const Projects = async () => {
           <p>
             Stuff I&apos;ve built, including this website!
           </p>
-          <ProjectCards projects={posts}/>
+          <ProjectCards projects={posts} />
         </section>
       </main>
 

From 1dba9699ae387d8e21c76bf3e73c51b12612a5d0 Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Sun, 10 Aug 2025 01:57:28 +1000
Subject: [PATCH 07/13] chore: update deprecated tag and fix doc string

---
 src/hooks/useTheme.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
index a665c00..861de3f 100644
--- a/src/hooks/useTheme.tsx
+++ b/src/hooks/useTheme.tsx
@@ -24,13 +24,16 @@ interface IThemeContext {
 const defaultTheme = Theme.System;
 
 const ThemeProviderContext = createContext<IThemeContext|undefined>(undefined);
-
 interface IThemeProvider {
   children: ReactNode;
 }
 
-// note: use of `window` (i think?) in this provider might cause hydration issues, so need to be dynamically loaded when used
+/**
+ * @deprecated Old implementation of theme provider/switcher.
+ * Use themeAtom instead.
+ */
 const ThemeProvider: FC<IThemeProvider> = ({ children }) => {
+  // note: use of `window` (i think?) in this provider might cause hydration issues, so need to be dynamically loaded when used
   const [theme, setTheme] = useState<Theme> (() => {
     if (typeof window === "undefined") return defaultTheme;
     return (localStorage.getItem("theme") as Theme) || defaultTheme;
@@ -82,10 +85,10 @@ const ThemeProvider: FC<IThemeProvider> = ({ children }) => {
   );
 };
 
-/*
- * @legacy Old implementation of theme provider/switcher.
+/**
+ * @deprecated Old implementation of theme provider/switcher.
  * Use themeAtom instead.
-*/
+ */
 const useTheme = () => {
   const context = useContext(ThemeProviderContext);
   if (context == null) throw new Error("useTheme must be used within ThemeProvider.");

From 5caa1bcefdaae293dd3a2cbed4909addd127c5dc Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Sun, 10 Aug 2025 04:27:53 +1000
Subject: [PATCH 08/13] feat: listen to system theme automatically

* fixes issue where user needs to press the button again or refresh page to get system theme
---
 src/atoms/themeAtom.ts            | 31 ++++++++++++++------
 src/components/DarkModeToggle.tsx |  2 ++
 src/styles/globals.css            | 47 ++++++++-----------------------
 tailwind.config.ts                |  1 +
 4 files changed, 37 insertions(+), 44 deletions(-)

diff --git a/src/atoms/themeAtom.ts b/src/atoms/themeAtom.ts
index 4d08a59..579e922 100644
--- a/src/atoms/themeAtom.ts
+++ b/src/atoms/themeAtom.ts
@@ -7,22 +7,37 @@ enum Theme {
   Dark = "dark",
 }
 
-const localThemeAtom = atomWithStorage("theme", Theme.System);
-
-const getTheme = (theme: Theme) => {
-  if (typeof window === "undefined" || theme !== Theme.System) return theme;
+const getSystemTheme = () => {
   const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
   return systemDark ? Theme.Dark : Theme.Light;
 };
 
+const localThemeAtom = atomWithStorage("theme", Theme.System);
+const systemThemeAtom = atom(getSystemTheme());
+
+// track the actual system theme and update on changes
+systemThemeAtom.onMount = (set) => {
+  if (typeof window === "undefined") return;
+
+  const systemColorSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
+  const setSystemThemeAtom = () => set(getSystemTheme());
+
+  systemColorSchemeMedia.addEventListener("change", setSystemThemeAtom);
+  return () => systemColorSchemeMedia.removeEventListener("change", setSystemThemeAtom);
+};
+
 const themeAtom = atom(
   (get) => {
+    const localTheme = get(localThemeAtom);
+    const systemTheme = get(systemThemeAtom);
+    const resolvedTheme = localTheme === Theme.System ? systemTheme : localTheme;
+
     return {
-      theme: getTheme(get(localThemeAtom)),
+      theme: resolvedTheme,
       themeStatus: {
-        isDark: get(localThemeAtom) === Theme.Dark,
-        isLight: get(localThemeAtom) === Theme.Light,
-        isSystem: get(localThemeAtom) === Theme.System,
+        isDark: localTheme === Theme.Dark,
+        isLight: localTheme === Theme.Light,
+        isSystem: localTheme === Theme.System,
       },
     }
   },
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index 819220a..3697713 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { IconDeviceDesktop, IconMoon, IconSun } from "@tabler/icons-react";
 import { useAtomValue, useSetAtom } from "jotai";
 import { themeAtom } from "@/atoms/themeAtom";
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0980b3f..1a25537 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -4,19 +4,14 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  /*--background: #ffffff;*/
-  /*--foreground: #171717;*/
-  /*--background: #f6fff4;*/
-  /*--background: #fffcec;*/
-  --background: #fdfae5;
-  --foreground: #171717;
-}
-
 ::-webkit-scrollbar {
   @apply w-2.5;
 }
 
+::-webkit-scrollbar-track {
+  /* background: #f1f1f1; */
+}
+
 ::-webkit-scrollbar-thumb {
   @apply rounded-2xl
   bg-red-300
@@ -30,36 +25,16 @@
   @apply bg-red-500 bg-opacity-30;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    /*--background: #0a0a0a;*/
-    /*--background: #291000;*/
-    /*--background: #301100;*/
-    /*--background: #120000;*/
-    /*--background: #4c2624;*/
-    --background: #4a2828;
-    --foreground: #ffe4d9;
-  }
-
-  ::-webkit-scrollbar {
-
-  }
-
-  ::-webkit-scrollbar-thumb {
-
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
+body {
+  font-family: Poppins, Helvetica, sans-serif;
+}
 
-  }
+body .light {
+  @apply bg-[#fdfae5] text-[#171717];
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  /*background: url("/bg.jpg") center center;*/
-  /*background-size: 100vw auto;*/
-  font-family: Poppins, Helvetica, sans-serif;
+body .dark {
+  @apply bg-[#4a2828] text-[#ffe4d9];
 }
 
 a {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 109807b..bd80592 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,7 @@ export default {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  darkMode: "class",
   theme: {
     extend: {
       colors: {

From 3388956406f2eb47d4879355a1ea186cfcd93b8f Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Sat, 16 Aug 2025 13:41:33 +1000
Subject: [PATCH 09/13] fix: window undefined error

---
 src/atoms/themeAtom.ts | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/atoms/themeAtom.ts b/src/atoms/themeAtom.ts
index 579e922..89442e5 100644
--- a/src/atoms/themeAtom.ts
+++ b/src/atoms/themeAtom.ts
@@ -8,6 +8,8 @@ enum Theme {
 }
 
 const getSystemTheme = () => {
+  if (typeof window === "undefined") return;
+
   const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
   return systemDark ? Theme.Dark : Theme.Light;
 };
@@ -39,21 +41,21 @@ const themeAtom = atom(
         isLight: localTheme === Theme.Light,
         isSystem: localTheme === Theme.System,
       },
-    }
+    };
   },
   (_get, set) => {
     set(localThemeAtom, (currTheme) => {
       switch (currTheme) {
-        case Theme.System: return Theme.Light;
-        case Theme.Light: return Theme.Dark
-        case Theme.Dark:
-        default:
-          return Theme.System
+      case Theme.System: return Theme.Light;
+      case Theme.Light: return Theme.Dark;
+      case Theme.Dark:
+      default:
+        return Theme.System;
       }
-    })
-  }
+    });
+  },
 );
 
 export {
-  themeAtom
-};
\ No newline at end of file
+  themeAtom,
+};

From d2a514a218bca10de099cf15d8ffde9e22997e1f Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Sun, 17 Aug 2025 16:21:34 +1000
Subject: [PATCH 10/13] feat: dark mode toggle colors

---
 src/components/DarkModeToggle.tsx      |  4 ++--
 src/styles/components/project-card.css | 15 +++++----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index 3697713..627db85 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -9,8 +9,8 @@ const DarkModeToggle = () => {
   const toggleTheme = useSetAtom(themeAtom);
 
   return (
-    <button className="rounded-full bg-red-800" onClick={toggleTheme}>
-      <div className="px-4 py-2 rounded-full -translate-y-1 bg-red-200 text-red-600 font-semibold active:translate-y-0 transition-all active:shadow-inner active:shadow-red-800">
+    <button className="rounded-full bg-red-800 dark:bg-red-950" onClick={toggleTheme}>
+      <div className="p-2 rounded-full -translate-y-1 bg-red-200 dark:bg-red-900 text-red-600 dark:text-red-300 font-semibold active:translate-y-0 transition-all active:shadow-inner active:shadow-red-800 dark:active:shadow-black">
         {themeStatus.isDark && <IconMoon />}
         {themeStatus.isSystem && <IconDeviceDesktop />}
         {themeStatus.isLight && <IconSun />}
diff --git a/src/styles/components/project-card.css b/src/styles/components/project-card.css
index d1e266f..16f4117 100644
--- a/src/styles/components/project-card.css
+++ b/src/styles/components/project-card.css
@@ -7,6 +7,11 @@
   shadow-[inset_0_0_0_0_#9a3412,0_2px_4px_0_#9a3412]
   hover:shadow-[inset_0_2px_4px_1px_#9a3412,0_0_0_0_#9a3412]
   hover:bg-opacity-45
+
+  dark:transition-shadow
+  dark:shadow-[inset_0_0_0_0_black,0_2px_4px_0_black]
+  dark:hover:shadow-[inset_0_2px_4px_1px_black,0_0_0_0_black]
+  dark:hover:bg-opacity-15
   ;
 
   .project-card-title {
@@ -39,13 +44,3 @@
     dark:text-orange-400 dark:bg-opacity-50 lowercase;
   }
 }
-
-@media(prefers-color-scheme: dark) {
-  .project-card .project-card-content {
-    @apply transition-shadow
-    shadow-[inset_0_0_0_0_black,0_2px_4px_0_black]
-    hover:shadow-[inset_0_2px_4px_1px_black,0_0_0_0_black]
-    hover:bg-opacity-15
-    ;
-  }
-}

From 7e770cd5bf586ddddfbb5b0aebfd38e6f7ee2763 Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Mon, 18 Aug 2025 09:30:32 +1000
Subject: [PATCH 11/13] feat: add dark mode toggle to all pages

---
 src/app/(frontend)/contact/page.tsx  |  2 ++
 src/app/(frontend)/page.tsx          |  2 ++
 src/app/(frontend)/projects/page.tsx |  2 ++
 src/components/DarkModeToggle.tsx    | 22 ++++++++++++++--------
 src/components/Navbar.tsx            |  2 +-
 src/styles/pages/contact.css         |  2 +-
 6 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/app/(frontend)/contact/page.tsx b/src/app/(frontend)/contact/page.tsx
index 787a116..e5375fd 100644
--- a/src/app/(frontend)/contact/page.tsx
+++ b/src/app/(frontend)/contact/page.tsx
@@ -1,6 +1,7 @@
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import ContactLinks from "@/components/ContactLinks";
+import DarkModeToggle from "@/components/DarkModeToggle";
 
 const Contact = () => {
   return (
@@ -14,6 +15,7 @@ const Contact = () => {
           <h1>connect or message me!</h1>
           <ContactLinks />
         </section>
+        <DarkModeToggle float mobileOnly />
       </main>
 
       <footer>
diff --git a/src/app/(frontend)/page.tsx b/src/app/(frontend)/page.tsx
index 1688ff1..d3caed7 100644
--- a/src/app/(frontend)/page.tsx
+++ b/src/app/(frontend)/page.tsx
@@ -1,5 +1,6 @@
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
+import DarkModeToggle from "@/components/DarkModeToggle";
 
 const Home = () => {
   return (
@@ -13,6 +14,7 @@ const Home = () => {
           <h1>hello i&apos;m <span className="name">silvia</span></h1>
           <p>a full stack software engineer who loves to build intuitive user-friendly web applications.</p>
         </div>
+        <DarkModeToggle float mobileOnly />
       </main>
 
       <footer>
diff --git a/src/app/(frontend)/projects/page.tsx b/src/app/(frontend)/projects/page.tsx
index 91bd670..b38b2b8 100644
--- a/src/app/(frontend)/projects/page.tsx
+++ b/src/app/(frontend)/projects/page.tsx
@@ -3,6 +3,7 @@ import Footer from "@/components/Footer";
 import { cmsClient } from "@/services/cms-client";
 import React from "react";
 import ProjectCards from "@/components/ProjectCards";
+import DarkModeToggle from "@/components/DarkModeToggle";
 
 const Projects = async () => {
   const posts = await cmsClient.find({
@@ -32,6 +33,7 @@ const Projects = async () => {
           </p>
           <ProjectCards projects={posts} />
         </section>
+        <DarkModeToggle float mobileOnly />
       </main>
 
       <footer>
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index 627db85..ecd335f 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -4,18 +4,24 @@ import { IconDeviceDesktop, IconMoon, IconSun } from "@tabler/icons-react";
 import { useAtomValue, useSetAtom } from "jotai";
 import { themeAtom } from "@/atoms/themeAtom";
 
-const DarkModeToggle = () => {
+const DarkModeToggle = ({ float, desktopOnly, mobileOnly }:{ float?: true, desktopOnly?: true, mobileOnly?: true }) => {
   const themeStatus = useAtomValue(themeAtom).themeStatus;
   const toggleTheme = useSetAtom(themeAtom);
 
   return (
-    <button className="rounded-full bg-red-800 dark:bg-red-950" onClick={toggleTheme}>
-      <div className="p-2 rounded-full -translate-y-1 bg-red-200 dark:bg-red-900 text-red-600 dark:text-red-300 font-semibold active:translate-y-0 transition-all active:shadow-inner active:shadow-red-800 dark:active:shadow-black">
-        {themeStatus.isDark && <IconMoon />}
-        {themeStatus.isSystem && <IconDeviceDesktop />}
-        {themeStatus.isLight && <IconSun />}
-      </div>
-    </button>
+    <div className={`
+      ${desktopOnly ? "hide-on-mobile" : ""}
+      ${mobileOnly ? "hide-on-desktop" : ""}
+      ${float ? "sticky self-end bottom-6 -mb-6 md:mr-8" : ""}
+    `}>
+      <button className="rounded-full bg-red-800 dark:bg-red-950" onClick={toggleTheme}>
+        <div className="p-3 md:p-2 rounded-full -translate-y-1 bg-red-200 dark:bg-red-900 text-red-600 dark:text-red-300 font-semibold active:translate-y-0 transition-all active:shadow-inner active:shadow-red-800 dark:active:shadow-black">
+          {themeStatus.isDark && <IconMoon />}
+          {themeStatus.isSystem && <IconDeviceDesktop />}
+          {themeStatus.isLight && <IconSun />}
+        </div>
+      </button>
+    </div>
   );
 };
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0149eb7..f983e05 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -26,7 +26,7 @@ const Navbar = () => {
   return (
     <nav className="navbar">
       <div className="logo gap-4">
-        <DarkModeToggle />
+        <DarkModeToggle desktopOnly />
         <h1>{"silvia's"}</h1>
         <button className={`burger-menu ${isBurgerOpened ? "opened" : ""}`} onClick={handleBurgerClick}>menu</button>
       </div>
diff --git a/src/styles/pages/contact.css b/src/styles/pages/contact.css
index b6e7a41..6249d26 100644
--- a/src/styles/pages/contact.css
+++ b/src/styles/pages/contact.css
@@ -4,7 +4,7 @@
   }
 
   .contact-links-section {
-    @apply sm:mx-36;
+    @apply md:mx-36 sm:mx-32;
 
     h1 {
       @apply text-5xl;

From 948e948b145ce654c2b290d5108f60bbce3e93fa Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Mon, 18 Aug 2025 09:32:05 +1000
Subject: [PATCH 12/13] fix: temporarily disable comma-dangle rule

---
 eslint.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 9b67851..cc1dfc0 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -22,7 +22,7 @@ const eslintConfig = [
       "semi": ["error", "always"],
       "object-curly-spacing": ["error", "always"],
       "array-bracket-spacing": ["error", "never"],
-      "comma-dangle": ["error", "always-multiline"],
+      // "comma-dangle": ["error", "always-multiline"],
       "comma-spacing": ["error", {
         "before": false,
         "after": true,

From e04c4d4d2d0557a380d07bad326b78d41eaa854e Mon Sep 17 00:00:00 2001
From: ItsLame <37344470+ItsLame@users.noreply.github.com>
Date: Sat, 30 Aug 2025 00:14:30 +1000
Subject: [PATCH 13/13] fix: scrollbar color

---
 src/components/Providers.tsx |  9 ++++++++-
 src/styles/globals.css       | 19 +++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
index 691a79b..ff87da6 100644
--- a/src/components/Providers.tsx
+++ b/src/components/Providers.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { useAtomValue } from "jotai";
 import { themeAtom } from "@/atoms/themeAtom";
@@ -11,6 +11,13 @@ const Provider = dynamic(() => import("jotai").then((e) => e.Provider), { ssr: f
 const Theme = ({ children }: {children: ReactNode}) => {
   const theme = useAtomValue(themeAtom).theme;
 
+  useEffect(() => {
+    // apply theme class to html element for webkit scrollbar support
+    const htmlElement = document.documentElement;
+    htmlElement.classList.remove("light", "dark");
+    if (theme) htmlElement.classList.add(theme);
+  }, [theme]);
+
   return (
     <div className={`${theme}`}>
       {children}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 1a25537..5f6fa50 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -9,22 +9,29 @@
 }
 
 ::-webkit-scrollbar-track {
-  /* background: #f1f1f1; */
+  background: #f1f1f1;
+}
+
+.dark ::-webkit-scrollbar-track {
+  background: #2d1a1a;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply rounded-2xl
-  bg-red-300
-  bg-opacity-40
+  @apply rounded-2xl bg-red-300 bg-opacity-40;
+}
 
-  dark:bg-red-800
-  dark:bg-opacity-50;
+.dark ::-webkit-scrollbar-thumb {
+  @apply bg-red-800 bg-opacity-50;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   @apply bg-red-500 bg-opacity-30;
 }
 
+.dark ::-webkit-scrollbar-thumb:hover {
+  @apply bg-red-600 bg-opacity-40;
+}
+
 body {
   font-family: Poppins, Helvetica, sans-serif;
 }
