Seemingly ready for release

src/components/About.astro

@@ -9,11 +9,7 @@ import Divider from "./Divider.astro"
 	<div class={styles.row}>
 		<article>
 			<img
-				src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/overview.svg${
+				src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/overview.svg#gh-dark-mode-only`}
-					false // TODO: add light mode again
-						? "#gh-light-mode-only"
-						: "#gh-dark-mode-only"
-				}`}
 				alt="My Github Stats"
 			/>
 		</article>
@@ -45,7 +41,7 @@ import Divider from "./Divider.astro"
 					rel="noreferrer"
 				>
 					<img
-						src="/images/az-900.png"
+						src="/images/ai-900.png"
 						alt="Azure AI Fundamentals Badge"
 					/>
 				</a>
@@ -55,7 +51,7 @@ import Divider from "./Divider.astro"
 					rel="noreferrer"
 				>
 					<img
-						src="/images/az-900.png"
+						src="/images/dp-900.png"
 						alt="Azure Data Fundamentals Badge"
 					/>
 				</a>

src/components/Jumbo.astro

@@ -1,17 +1,16 @@
 ---
-import  RoundDivider  from "./RoundDivider.astro"
+import RoundDivider from "./RoundDivider.astro"
 import styles from "../styles/Jumbo.module.css"
-import  Divider  from "./Divider.astro"
+import Divider from "./Divider.astro"
 ---
+
 <header>
 	<section id={styles.jumbo}>
-		<h1>
+		<h1>Henry Hiles</h1>
-			<img src="images/logo.png" alt="Henry Hiles" />
-		</h1>
 		<Divider />
 		<span id={styles.shortAbout}>
 			Full Stack .NET Developer & Discord Bot Developer
 		</span>
 		<RoundDivider />
 	</section>
-</header>
+</header>

src/components/Nav.astro

@@ -3,8 +3,7 @@ import { Icon } from "astro-icon"
 import styles from "../styles/Nav.module.css"
 ---
 
-<!-- export const Nav = ({ lightTheme, setLightTheme }) => { --><!-- class={y == 0 ? "" : styles.navbarShrink} -->
+<nav class={styles.nav} aria-expanded="true">
-<nav class={styles.nav} data-expanded="true">
 	<ul class={styles.links}>
 		<li>
 			<a href="/#">Home</a>
@@ -16,10 +15,10 @@ import styles from "../styles/Nav.module.css"
 			<a href="/#about">About Me</a>
 		</li>
 		<li>
-			<button id="themeToggle">
+			<div id="themeToggle">
-				<Icon name="ph:sun-fill" />
+				<div aria-hidden="false"><Icon name="ph:sun-fill" /></div>
-				<!-- <Icon name="ph:moon-fill" /> -->
+				<div aria-hidden="true"><Icon name="ph:moon-fill" /></div>
-			</button>
+			</div>
 		</li>
 		<li>
 			<a
@@ -31,18 +30,35 @@ import styles from "../styles/Nav.module.css"
 			</a>
 		</li>
 	</ul>
-</nav>
 
-<script defer>
+	<script defer>
-	const dataset = document.querySelector(`nav`)?.dataset
+		let nav = document.querySelector(`nav`)
-	document.addEventListener("scroll", () => {
+		document.addEventListener("scroll", () => {
-		if (dataset) {
+			if (nav) nav.setAttribute("aria-expanded", window.scrollY == 0)
-			if (window.scrollY > 0) dataset.expanded = false
+		})
-			else dataset.expanded = true
+
+		const body = document.querySelector("body")
+		const themeToggle = document.querySelector("#themeToggle")
+		const icons = document.querySelectorAll("#themeToggle > div")
+		let lightMode = localStorage.getItem("lightMode") === "true" || false
+		const setLightMode = () => {
+			localStorage.setItem("lightMode", lightMode)
+			if (lightMode) body.classList.add("light")
+			else body.classList.remove("light")
+			icons[0].setAttribute("aria-hidden", !lightMode)
+			icons[1].setAttribute("aria-hidden", lightMode)
+			icons.forEach((icon) =>
+				icon.setAttribute(
+					"aria-hidden",
+					icon.getAttribute("aria-hidden") === "false"
+				)
+			)
 		}
-	})
+		setLightMode()
 
-	const body = document.querySelector("body")
+		themeToggle.addEventListener("click", () => {
-	const themeToggle = document.querySelector("#themeToggle")
+			lightMode = !lightMode
-	themeToggle.addEventListener("click", () => body.classList.toggle("light"))
+			setLightMode()
-</script>
+		})
+	</script>
+</nav>

src/components/Portfolio.astro

@@ -10,7 +10,7 @@ import Divider from "./Divider.astro"
 	<article class={styles.portfolioItems}>
 		{
 			projects.map((project, index) => (
-				<a href={`/projects/${index}#`}>
+				<a href={`/projects/${index}`}>
 					<img
 						src={`/images/${project.thumbImage}`}
 						alt={project.name}

src/pages/404.astro

@@ -8,8 +8,8 @@ import Layout from "../layouts/Layout.astro"
 		<h1 id={styles.header}>Page not found.</h1>
 		<span id={styles.description}>
 			We couldn't find that page. Please{" "}
-			<a href="javascript:window.history.go(-1)"> go back</a>
+			<a href="javascript:window.history.go(-1)"> go back</a>, or return
-			, or return to our <a href="/">home page</a>.
+			to our <a href="/">home page</a>.
 		</span>
 	</div>
 </Layout>

src/styles/Nav.module.css

@@ -13,8 +13,12 @@
 	gap: 20px;
 }
 
+.nav [aria-hidden="true"] {
+	display: none;
+}
+
 @media (min-width: 600px) {
-	.nav[data-expanded="false"] {
+	.nav[aria-expanded="false"] {
 		padding: 1rem;
 		width: unset;
 		top: 10px;
@@ -23,7 +27,7 @@
 		padding: 0;
 	}
 
-	.nav[data-expanded="true"] {
+	.nav[aria-expanded="true"] {
 		font-size: 1.5em;
 	}