feat: refactor

src/components/Footer.astro

@@ -0,0 +1,31 @@
+---
+---
+
+<footer>
+  <span class="greek-delta">&Delta;</span>
+  <div class="footer-links">
+    <a target="_blank" href="https://git.barrettruth.com">git</a>
+    <a target="_blank" href="https://www.linkedin.com/in/barrett-ruth/">linkedin</a>
+    <a target="_blank" href="mailto:br.barrettruth@gmail.com">email</a>
+  </div>
+</footer>
+
+<style>
+  footer {
+    padding: 20px;
+    font-size: 1.5em;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .greek-delta {
+    font-family: "Times New Roman", Times, serif;
+    font-size: 1.5em;
+  }
+
+  .footer-links a {
+    margin-left: 25px;
+    text-decoration: none;
+  }
+</style>

src/components/Header.astro

@@ -0,0 +1,113 @@
+---
+const path = Astro.url.pathname;
+const isHome = path === "/" || path === "/index.html";
+
+// Determine topic from path
+function getTopic() {
+  const pathname = path.split("/");
+  
+  if (pathname.length === 2 && pathname[1].endsWith(".html")) {
+    return "/" + pathname[1].replace(".html", "");
+  } else if (pathname.length >= 3) {
+    return "/" + pathname.slice(2, -1).join("/").replace(".html", "");
+  }
+  return "";
+}
+
+const topic = getTopic();
+const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
+---
+
+<header>
+  <a href="/" style="text-decoration: none; color: inherit">
+    <div class="terminal-container">
+      <span class="terminal-prompt">{promptText}</span>
+      <span class="terminal-cursor"></span>
+    </div>
+  </a>
+  <div class="header-links">
+    <a target="_blank" href="/resume.pdf">resume</a>
+    <a target="_blank" href="/transcript.pdf">transcript</a>
+    <a href="/about">about</a>
+  </div>
+</header>
+
+<script>
+  // Terminal functionality
+  const TERMINAL_PROMPT = "barrett@ruth:~$ ";
+  let clearing = false;
+
+  // Clear the terminal prompt with animation
+  function clearPrompt(delay, callback) {
+    if (clearing) return;
+    clearing = true;
+
+    const terminalPrompt = document.querySelector(".terminal-prompt");
+    if (!terminalPrompt) {
+      clearing = false;
+      return;
+    }
+    
+    const topicLength = terminalPrompt.innerHTML.length - TERMINAL_PROMPT.length;
+    let i = 0;
+
+    function removeChar() {
+      if (i++ < topicLength) {
+        terminalPrompt.textContent = terminalPrompt.textContent.slice(0, -1);
+        setTimeout(removeChar, delay / topicLength);
+      } else {
+        i = 0;
+        clearing = false;
+        callback && callback();
+      }
+    }
+
+    removeChar();
+  }
+
+  function goHome(e) {
+    e.preventDefault();
+    clearPrompt(500, () => (window.location.href = "/"));
+  }
+  
+  document.addEventListener('DOMContentLoaded', () => {
+    window.TERMINAL_PROMPT = TERMINAL_PROMPT;
+    window.clearPrompt = clearPrompt;
+    window.goHome = goHome;
+    
+    const homeLink = document.querySelector('header a[href="/"]');
+    if (homeLink) {
+      const path = window.location.pathname;
+      const isHome = path === "/" || path === "/index.html";
+      
+      if (isHome) {
+        homeLink.addEventListener('click', (e) => {
+          e.preventDefault();
+          const topics = document.querySelectorAll(".topic a");
+          topics.forEach((topic) => {
+            topic.classList.remove("active");
+            topic.style.color = "";
+          });
+          document.getElementById("posts").innerHTML = "";
+          clearPrompt(500);
+        });
+      } else {
+        homeLink.addEventListener('click', goHome);
+      }
+    }
+  });
+</script>
+
+<style>
+  header {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .header-links a {
+    margin-left: 25px;
+    text-decoration: none;
+  }
+</style>