diff --git a/package.json b/package.json
index db32c92..5e443ac 100644
--- a/package.json
+++ b/package.json
@@ -1,32 +1,32 @@
 {
-	"name": "blog.z0x.ca",
-	"type": "module",
-	"version": "1.0.0",
-	"scripts": {
-		"dev": "astro dev",
-		"start": "astro dev",
-		"build": "astro check && astro build",
-		"preview": "astro preview",
-		"astro": "astro"
-	},
-	"dependencies": {
-		"@astrojs/check": "^0.9.4",
-		"@astrojs/rss": "^4.0.11",
-		"@astrojs/sitemap": "^3.2.1",
-		"@astrojs/tailwind": "^5.1.4",
-		"@fontsource/geist-mono": "^5.1.1",
-		"@fontsource/geist-sans": "^5.1.0",
-		"@r4ai/remark-callout": "^0.6.2",
-		"@yeskunall/astro-umami": "^0.0.3",
-		"astro": "^5.1.7",
-		"clsx": "^2.1.1",
-		"tailwind-merge": "^2.6.0",
-		"tailwindcss": "^3.4.17",
-		"typescript": "^5.7.3"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "1.9.4",
-		"@tailwindcss/typography": "^0.5.16"
-	},
-	"trustedDependencies": ["@biomejs/biome"]
+  "name": "blog.z0x.ca",
+  "type": "module",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/rss": "^4.0.11",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/tailwind": "^5.1.4",
+    "@fontsource/geist-mono": "^5.1.1",
+    "@fontsource/geist-sans": "^5.1.0",
+    "@r4ai/remark-callout": "^0.6.2",
+    "@yeskunall/astro-umami": "^0.0.3",
+    "astro": "^5.1.7",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.3"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@tailwindcss/typography": "^0.5.16"
+  },
+  "trustedDependencies": ["@biomejs/biome", "esbuild", "sharp"]
 }
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 8bc26f1..81fae17 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -4,7 +4,7 @@ import Container from "@components/Container.astro";
 import { SITE } from "@consts";
 ---
 
-<footer class="animate">
+<footer>
   <Container>
     <div class="relative">
       <div class="absolute -top-12 right-0">
@@ -14,15 +14,46 @@ import { SITE } from "@consts";
     <div class="flex items-center justify-between">
       <div>&copy; {new Date().getFullYear()} • {SITE.TITLE}</div>
       <div class="flex flex-wrap items-center gap-1.5">
-        <a aria-label="RSS" href="/rss.xml" target="_blank" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white">
+        <a
+          aria-label="RSS"
+          href="/rss.xml"
+          target="_blank"
+          class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"
+          >
             <path d="M5 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
             <path d="M4 4a16 16 0 0 1 16 16"></path>
             <path d="M4 11a9 9 0 0 1 9 9"></path>
           </svg>
         </a>
-        <button id="light-theme-button" aria-label="Light theme" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white">
+        <button
+          id="light-theme-button"
+          aria-label="Light theme"
+          class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"
+          >
             <circle cx="12" cy="12" r="5"></circle>
             <line x1="12" y1="1" x2="12" y2="3"></line>
             <line x1="12" y1="21" x2="12" y2="23"></line>
@@ -34,13 +65,43 @@ import { SITE } from "@consts";
             <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
           </svg>
         </button>
-        <button id="dark-theme-button" aria-label="Dark theme" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white">
+        <button
+          id="dark-theme-button"
+          aria-label="Dark theme"
+          class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"
+          >
             <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
           </svg>
         </button>
-        <button id="system-theme-button" aria-label="System theme" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white">
+        <button
+          id="system-theme-button"
+          aria-label="System theme"
+          class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"
+          >
             <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
             <line x1="8" y1="21" x2="16" y2="21"></line>
             <line x1="12" y1="17" x2="12" y2="21"></line>
diff --git a/src/components/Head.astro b/src/components/Head.astro
index 0c30419..e202410 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -2,8 +2,6 @@
 import "../styles/global.css";
 import "../styles/callout.css";
 
-import { ClientRouter } from "astro:transitions";
-
 import "@fontsource/geist-sans/100.css";
 import "@fontsource/geist-sans/200.css";
 import "@fontsource/geist-sans/300.css";
@@ -24,9 +22,9 @@ import "@fontsource/geist-mono/800.css";
 import "@fontsource/geist-mono/900.css";
 
 interface Props {
-	title: string;
-	description: string;
-	image?: string;
+  title: string;
+  description: string;
+  image?: string;
 }
 
 const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
@@ -35,7 +33,10 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22></text></svg>" />
+<link
+  rel="icon"
+  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22></text></svg>"
+/>
 <meta name="generator" content={Astro.generator} />
 
 <title>{title}</title>
@@ -54,16 +55,12 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
-<ClientRouter />
-
 <script is:inline>
   function init() {
     preloadTheme();
     onScroll();
-    animate();
     updateThemeButtons();
     addCopyCodeButtons();
-    setGiscusTheme();
 
     const backToTop = document.getElementById("back-to-top");
     backToTop?.addEventListener("click", (event) => scrollToTop(event));
@@ -92,11 +89,13 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
       updateThemeButtons();
     });
 
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
-      if (localStorage.theme === "system") {
-        toggleTheme(event.matches);
-      }
-    });
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (event) => {
+        if (localStorage.theme === "system") {
+          toggleTheme(event.matches);
+        }
+      });
 
     document.addEventListener("scroll", onScroll);
   }
@@ -130,16 +129,6 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
     }
   }
 
-  function animate() {
-    const animateElements = document.querySelectorAll(".animate");
-
-    animateElements.forEach((element, index) => {
-      setTimeout(() => {
-        element.classList.add("show");
-      }, index * 100);
-    });
-  }
-
   function onScroll() {
     if (window.scrollY > 0) {
       document.documentElement.classList.add("scrolled");
@@ -182,8 +171,6 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 
     window.getComputedStyle(css).opacity;
     document.head.removeChild(css);
-
-    setGiscusTheme();
   }
 
   function preloadTheme() {
@@ -233,18 +220,6 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
     }
   }
 
-  const setGiscusTheme = () => {
-    const giscus = document.querySelector(".giscus-frame");
-
-    const isDark = document.documentElement.classList.contains("dark");
-
-    if (giscus) {
-      const url = new URL(giscus.src);
-      url.searchParams.set("theme", isDark ? "dark" : "light");
-      giscus.src = url.toString();
-    }
-  };
-
   document.addEventListener("DOMContentLoaded", () => init());
   document.addEventListener("astro:after-swap", () => init());
   preloadTheme();
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
index 9578fb2..dc89df2 100644
--- a/src/components/TableOfContents.astro
+++ b/src/components/TableOfContents.astro
@@ -5,28 +5,28 @@ const { headings } = Astro.props;
 const toc = buildToc(headings);
 
 export interface Heading {
-	depth: number;
-	id: string;
-	text: string;
+  depth: number;
+  id: string;
+  text: string;
 }
 
 function buildToc(headings: Heading[]) {
-	const toc: Heading[] = [];
-	const parentHeadings = new Map();
-	headings.forEach((h) => {
-		const heading = { ...h, subheadings: [] };
-		parentHeadings.set(heading.depth, heading);
-		if (heading.depth === 2) {
-			toc.push(heading);
-		} else {
-			parentHeadings.get(heading.depth - 1).subheadings.push(heading);
-		}
-	});
-	return toc;
+  const toc: Heading[] = [];
+  const parentHeadings = new Map();
+  headings.forEach((h) => {
+    const heading = { ...h, subheadings: [] };
+    parentHeadings.set(heading.depth, heading);
+    if (heading.depth === 2) {
+      toc.push(heading);
+    } else {
+      parentHeadings.get(heading.depth - 1).subheadings.push(heading);
+    }
+  });
+  return toc;
 }
 ---
 
-<details open class="animate rounded-lg border border-black/15 dark:border-white/20">
+<details open class="rounded-lg border border-black/15 dark:border-white/20">
   <summary>Table of Contents</summary>
   <nav class="">
     <ul class="py-3">
diff --git a/src/pages/404.astro b/src/pages/404.astro
index faa21f4..a4fa20c 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -7,7 +7,9 @@ import Layout from "@layouts/Layout.astro";
 <Layout title="404" description={SITE.DESCRIPTION}>
   <Container>
     <div class="text-center">
-      <h4 class="animate text-2xl font-semibold text-black dark:text-white">404: Page not found</h4>
+      <h4 class="text-2xl font-semibold text-black dark:text-white">
+        404: Page not found
+      </h4>
     </div>
   </Container>
 </Layout>
diff --git a/src/pages/[...id].astro b/src/pages/[...id].astro
index 6a86ae2..f1c6381 100644
--- a/src/pages/[...id].astro
+++ b/src/pages/[...id].astro
@@ -50,23 +50,27 @@ const { Content, headings } = await render(post);
 ---
 
 <Layout title={post.data.title} description={post.data.description}>
-  <Container>
-    <div class="my-10 space-y-1">
-      <div class="animate flex items-center gap-1.5">
-        <div class="font-base text-sm">
-          <FormattedDate date={post.data.date} />
-        </div>
-        &bull;
-        {post.body && <div class="font-base text-sm">{readingTime(post.body)}</div>}
-      </div>
-      <h1 class="animate text-3xl font-semibold text-black dark:text-white">
-        {post.data.title}
-      </h1>
-    </div>
-    {headings.length > 0 && <TableOfContents headings={headings} />}
-    <article class="animate">
-      <Content />
-      <PostNavigation prevPost={prevPost} nextPost={nextPost} />
-    </article>
-  </Container>
+	<Container>
+		<div class="my-10 space-y-1">
+			<div class="flex items-center gap-1.5">
+				<div class="font-base text-sm">
+					<FormattedDate date={post.data.date} />
+				</div>
+				&bull;
+				{
+					post.body && (
+						<div class="font-base text-sm">{readingTime(post.body)}</div>
+					)
+				}
+			</div>
+			<h1 class="text-3xl font-semibold text-black dark:text-white">
+				{post.data.title}
+			</h1>
+		</div>
+		{headings.length > 0 && <TableOfContents headings={headings} />}
+		<article>
+			<Content />
+			<PostNavigation prevPost={prevPost} nextPost={nextPost} />
+		</article>
+	</Container>
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2a8c6ae..4e095f4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,24 +7,24 @@ import { HOME } from "@consts";
 import Layout from "@layouts/Layout.astro";
 
 const data = (await getCollection("blog"))
-	.filter((post) => !post.data.draft)
-	.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+  .filter((post) => !post.data.draft)
+  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 
 type Acc = {
-	[year: string]: CollectionEntry<"blog">[];
+  [year: string]: CollectionEntry<"blog">[];
 };
 
 const posts = data.reduce((acc: Acc, post) => {
-	const year = post.data.date.getFullYear().toString();
-	if (!acc[year]) {
-		acc[year] = [];
-	}
-	acc[year].push(post);
-	return acc;
+  const year = post.data.date.getFullYear().toString();
+  if (!acc[year]) {
+    acc[year] = [];
+  }
+  acc[year].push(post);
+  return acc;
 }, {});
 
 const years = Object.keys(posts).sort(
-	(a, b) => Number.parseInt(b) - Number.parseInt(a),
+  (a, b) => Number.parseInt(b) - Number.parseInt(a),
 );
 ---
 
@@ -35,8 +35,10 @@ const years = Object.keys(posts).sort(
         <div class="space-y-4">
           {
             years.map((year) => (
-              <section class="animate space-y-4">
-                <div class="font-semibold text-black dark:text-white">{year}</div>
+              <section class="space-y-4">
+                <div class="font-semibold text-black dark:text-white">
+                  {year}
+                </div>
                 <div>
                   <ul class="not-prose flex flex-col gap-4">
                     {posts[year].map((post) => (
diff --git a/src/styles/global.css b/src/styles/global.css
index 0f1c3b0..e40cefa 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -56,14 +56,6 @@ article {
 	}
 }
 
-.animate {
-	@apply -translate-y-3 opacity-0;
-	@apply transition-all duration-300 ease-out;
-}
-
-.animate.show {
-	@apply translate-y-0 opacity-100;
-}
 
 html #back-to-top {
 	@apply pointer-events-none opacity-0;