diff --git a/public/scripts/index.js b/public/scripts/index.js
index 788176d..d8cdc30 100644
--- a/public/scripts/index.js
+++ b/public/scripts/index.js
@@ -1,5 +1,3 @@
-import { getTopicColor } from "../../src/utils/colors.js";
-
 const TERMINAL_PROMPT = "barrett@ruth:~$ ";
 let typing = false;
 let clearing = false;
@@ -108,7 +106,7 @@ document.addEventListener("DOMContentLoaded", function () {
     const topicName = topic.dataset.topic;
 
     topic.addEventListener("mouseenter", () => {
-      const color = getTopicColor(topicName);
+      const color = window.getTopicColor(topicName);
       topic.style.color = color;
     });
 
diff --git a/public/scripts/models-of-production.js b/public/scripts/models-of-production.js
index 4437c94..17a99fc 100644
--- a/public/scripts/models-of-production.js
+++ b/public/scripts/models-of-production.js
@@ -1,5 +1,3 @@
-import { getTopicColor } from "../../src/utils/colors.js";
-
 function urlToTopic() {
   const path = window.location.pathname;
   const pathParts = path.split("/");
@@ -84,7 +82,7 @@ function drawSolowGraph() {
     .append("path")
     .datum(outputData)
     .attr("fill", "none")
-    .attr("stroke", getTopicColor(urlToTopic()))
+    .attr("stroke", window.getTopicColor(urlToTopic()))
     .attr("stroke-width", 2)
     .attr(
       "d",
@@ -267,7 +265,7 @@ function drawRomerGraph() {
     .append("path")
     .datum(romerData)
     .attr("fill", "none")
-    .attr("stroke", getTopicColor(urlToTopic()))
+    .attr("stroke", window.getTopicColor(urlToTopic()))
     .attr("stroke-width", 2)
     .attr(
       "d",
@@ -360,7 +358,7 @@ function drawRomerlGraph() {
     .append("path")
     .datum(romerData)
     .attr("fill", "none")
-    .attr("stroke", getTopicColor(urlToTopic()))
+    .attr("stroke", window.getTopicColor(urlToTopic()))
     .attr("stroke-width", 2)
     .attr(
       "d",
@@ -506,7 +504,7 @@ function drawRomerSolowGraph() {
     .append("path")
     .datum(romerSolowData)
     .attr("fill", "none")
-    .attr("stroke", getTopicColor(urlToTopic()))
+    .attr("stroke", window.getTopicColor(urlToTopic()))
     .attr("stroke-width", 2)
     .attr(
       "d",
@@ -603,7 +601,7 @@ function drawRomerSolowChangeGraph() {
     .append("path")
     .datum(romerSolowData)
     .attr("fill", "none")
-    .attr("stroke", getTopicColor(urlToTopic()))
+    .attr("stroke", window.getTopicColor(urlToTopic()))
     .attr("stroke-width", 2)
     .attr(
       "d",
diff --git a/src/content/posts/software/designing-this-website.mdx b/src/content/posts/software/designing-this-website.mdx
index 054cd7d..60478e8 100644
--- a/src/content/posts/software/designing-this-website.mdx
+++ b/src/content/posts/software/designing-this-website.mdx
@@ -3,6 +3,10 @@ title: "designing this website"
 date: "18/06/2024"
 ---
 
+## Update: Port to Astro (<span class="date">22/05/2025</span>)
+
+hi
+
 ## HTML, JavaScript, and CSS
 
 That's all there is to it.
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 57a3f07..f3625db 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -27,6 +27,20 @@ const {
       <slot />
     </main>
     <Footer />
+    <script is:inline>
+      window.getTopicColor = function(topicName) {
+        switch (topicName) {
+          case "software":
+            return "#0073e6";
+          case "algorithms":
+            return "#d50032";
+          case "meditations":
+            return "#6a0dad";
+          default:
+            return "#000000";
+        }
+      };
+    </script>
     <slot name="scripts" />
   </body>
 </html>
diff --git a/src/pages/[category].astro b/src/pages/[category].astro
index 8b88abb..955e017 100644
--- a/src/pages/[category].astro
+++ b/src/pages/[category].astro
@@ -91,14 +91,10 @@ const capitalizedCategory =
 </style>
 
 <script define:vars={{ category }}>
-  import { getTopicColor } from "../utils/colors.js";
-
   document.addEventListener("DOMContentLoaded", function () {
     document.documentElement.style.setProperty(
       "--topic-color",
-      getTopicColor(category),
+      window.getTopicColor(category),
     );
-
-    window.getTopicColor = getTopicColor;
   });
 </script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 816c0a4..cd550df 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,6 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { getCollection } from "astro:content";
-import { getTopicColor } from "../utils/colors.js";
 
 const title = "Barrett Ruth";
 
diff --git a/src/utils/colors.js b/src/utils/colors.js
index 540068d..bd3a90a 100644
--- a/src/utils/colors.js
+++ b/src/utils/colors.js
@@ -9,4 +9,4 @@ export function getTopicColor(topicName) {
     default:
       return "#000000";
   }
-}
+}
\ No newline at end of file