Mom look what I did!

astro.config.mjs

@@ -1,20 +1,4 @@
-import { execSync } from "node:child_process";
 import { defineConfig } from "astro/config";
 
-// Get Git commit hash at build time
-const getGitCommitHash = () => {
-  try {
-    return execSync("git rev-parse HEAD", { encoding: "utf-8" }).trim();
-  } catch (error) {
-    return "unknown";
-  }
-};
-
 // https://astro.build/config
-export default defineConfig({
-  vite: {
-    define: {
-      __GIT_COMMIT_HASH__: JSON.stringify(getGitCommitHash()),
-    },
-  },
-});
+export default defineConfig({});

src/components/Footer.astro

@@ -0,0 +1,26 @@
+---
+import { GIT_COMMIT_HASH, REPO_URL } from "@/constants";
+---
+
+<footer>
+    <span>
+        🦴 <a href={`${REPO_URL}/commit/${GIT_COMMIT_HASH}`}>
+            {GIT_COMMIT_HASH}
+        </a> 🐕‍🦺
+    </span>
+</footer>
+
+<style>
+    footer {
+        text-align: center;
+        font-size: 0.8rem;
+        margin-top: 3rem;
+    }
+
+    footer a {
+        color: var(--text-color);
+        text-decoration: none;
+        font-style: italic;
+        text-decoration: underline;
+    }
+</style>

src/components/Header.astro

@@ -0,0 +1,132 @@
+---
+import { Image } from "astro:assets";
+import headshot from "@/images/headshot.jpg";
+---
+<header>
+    <a href="/" class="logo-link">
+        <Image src={headshot} alt="Bradley's Headshot" width={48} height={48} class="header-icon" />
+    </a>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/now">Now</a></li>
+        </ul>
+    </nav>
+    <button id="theme-toggle" aria-label="Toggle dark mode">
+        <svg class="sun" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <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>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+        <svg class="moon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+        </svg>
+    </button>
+</header>
+
+<script is:inline>
+    const theme = (() => {
+        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+            return localStorage.getItem('theme');
+        }
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
+    })();
+
+    if (theme === 'light') {
+        document.documentElement.setAttribute('data-theme', 'light');
+    } else {
+        document.documentElement.setAttribute('data-theme', 'dark');
+    }
+
+    window.localStorage.setItem('theme', theme);
+
+    const handleToggleClick = () => {
+        const element = document.documentElement;
+        const isDark = element.getAttribute("data-theme") === "dark";
+        const newTheme = isDark ? "light" : "dark";
+        element.setAttribute("data-theme", newTheme);
+        localStorage.setItem("theme", newTheme);
+    }
+
+    document.getElementById("theme-toggle").addEventListener("click", handleToggleClick);
+</script>
+
+<style>
+    header {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+        padding-bottom: 2rem;
+        margin: 0 auto 2rem auto;
+        max-width: 800px;
+        width: 100%;
+    }
+
+    .logo-link {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        color: inherit;
+        /* Ensure logo keeps size even if flex tries to squash (though images usually don't) */
+        flex-shrink: 0;
+    }
+
+    #theme-toggle {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--text-color);
+        padding: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        transition: background-color 0.2s;
+        flex-shrink: 0;
+    }
+
+    #theme-toggle:hover {
+        background-color: rgba(128, 128, 128, 0.1);
+    }
+
+    .sun { display: none; }
+    .moon { display: block; }
+
+    :global([data-theme="dark"]) .sun { display: block; }
+    :global([data-theme="dark"]) .moon { display: none; }
+
+    :global(.header-icon) {
+        border-radius: 50%;
+        display: block;
+    }
+
+    nav ul {
+        display: flex;
+        flex-direction: row;
+        gap: 2rem;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    nav a {
+        color: var(--text-color, #333);
+        text-decoration: none;
+        font-weight: 500;
+        white-space: nowrap;
+    }
+
+    nav a:hover {
+        color: var(--accent-color, #0056b3);
+    }
+</style>

src/constants.ts

@@ -1,2 +1,12 @@
+import { execSync } from "node:child_process";
+
 export const REPO_URL =
   "https://github.com/shenanigansd/shenanigansd.github.io";
+
+export const GIT_COMMIT_HASH = (() => {
+  try {
+    return execSync("git rev-parse HEAD", { encoding: "utf-8" }).trim();
+  } catch {
+    return "unknown";
+  }
+})();

src/layouts/BaseLayout.astro

@@ -0,0 +1,20 @@
+---
+import Footer from "../components/Footer.astro";
+import Header from "../components/Header.astro";
+import "../styles/global.css";
+const { pageTitle } = Astro.props;
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{pageTitle}</title>
+  </head>
+  <body>
+    <Header/>
+    <slot />
+    <Footer />
+  </body>
+</html>

src/pages/index.astro

@@ -1,45 +1,84 @@
 ---
-import { REPO_URL } from "@/constants";
+import { Image } from "astro:assets";
+import headshot from "@/images/headshot.jpg";
+import BaseLayout from "@/layouts/BaseLayout.astro";
+
+const pageTitle = "Howdy";
 ---
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-		<footer>
-			<span>
-				🐶 &bull; <a href={REPO_URL}>View on GitHub</a>
-				&bull; <code>{__GIT_COMMIT_HASH__}</code>
-			</span>
-		</footer>
-
-		<style>
-			footer {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				height: 50px;
-				background-color: var(--color-bg);
-				color: var(--color-text);
-				font-size: 0.9rem;
-				text-align: center;
-			}
-
-			footer a {
-				color: var(--color-text);
-				text-decoration: none;
-				font-weight: bold;
-			}
-
-			footer a:hover {
-				text-decoration: underline;
-			}
-		</style>
-	</body>
-</html>
+<BaseLayout pageTitle={pageTitle}>
+    <section class="hero">
+        <div class="headshot-container">
+            <Image
+                class="nav-icon"
+                src={headshot}
+                alt="Gracie the dog and Bradley the human"
+                quality="max"
+                width="256"
+                height="256"
+                densities={[1.5, 2]}
+                loading="eager"
+            />
+        </div>
+        <div class="intro-text">
+            <p class="lead">Of course you can pet her! Her name is Gracie.</p>
+            <p class="mb-4">
+                Now that I've got your attention, hi, my name is <strong>Bradley</strong>. 
+            </p>
+        </div>
+    </section>
+
+    <section class="content">
+        <h2 id="shenanigans">Latest Shenanigans</h2>
+        <ul>
+            <li><a href="/posts/post-1">Astro tutorial blog post</a></li>
+        </ul>
+    </section>
+</BaseLayout>
+
+<style>
+    .hero {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2rem;
+        margin-bottom: 3rem;
+        text-align: center;
+    }
+
+    @media (min-width: 640px) {
+        .hero {
+            flex-direction: row;
+            text-align: left;
+            align-items: center;
+        }
+    }
+
+    .headshot-container img {
+        border-radius: 50%;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        display: block;
+    }
+
+    .lead {
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin-bottom: 1rem;
+        color: var(--text-color);
+        line-height: 1.3;
+    }
+
+    .mb-4 {
+        margin-bottom: 1.5rem;
+    }
+
+    .content {
+        margin-top: 2rem;
+    }
+
+    .content h2 {
+        border-bottom: 2px solid #eee;
+        padding-bottom: 0.5rem;
+        margin-top: 2rem;
+    }
+</style>

src/pages/now.astro

@@ -0,0 +1,16 @@
+---
+import BaseLayout from "@/layouts/BaseLayout.astro";
+
+const pageTitle = "Now (as of January 2026)";
+---
+
+<BaseLayout pageTitle={pageTitle}>
+    <h1>{pageTitle}</h1>
+    This page shows what I’m doing currently, 
+    if you have your own website, 
+    you <a href="https://nownownow.com/about">should make your own</a> too.
+    <br><br>
+    But uh...  I'm actually not sure what I want to work on going into 2026, I'm still figuring some stuff out.
+    <br>
+    So I guess I'm "working on my roadmap" for now.
+</BaseLayout>

src/pages/posts/post-1.md

@@ -0,0 +1,27 @@
+---
+title: 'My First Blog Post'
+pubDate: 2022-07-01
+description: 'This is the first post of my new Astro blog.'
+author: 'Astro Learner'
+image:
+    url: 'https://docs.astro.build/assets/rose.webp'
+    alt: 'The Astro logo on a dark background with a pink glow.'
+tags: ["astro", "blogging", "learning in public"]
+---
+# My First Blog Post
+
+Published on: 2022-07-01
+
+Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
+
+## What I've accomplished
+
+1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
+
+2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
+
+3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
+
+## What's next
+
+I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.