From 11eb4f034a782963316c52b85812a9961a3f0539 Mon Sep 17 00:00:00 2001
From: Ryan Marx <ryanbmarx@gmail.com>
Date: Tue, 20 Dec 2022 10:50:02 -0600
Subject: [PATCH 1/7] Add color mode switcher

---
 src/components/Header.svelte   |  32 +++++++-
 src/components/Switcher.svelte | 140 +++++++++++++++++++++++++++++++++
 src/svg/moon.svg               |   1 +
 src/svg/sun.svg                |   1 +
 4 files changed, 173 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Switcher.svelte
 create mode 100644 src/svg/moon.svg
 create mode 100644 src/svg/sun.svg

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index c4ceb4e..9a6aaa2 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,4 +1,26 @@
-<script></script>
+<script>
+	import { onMount } from "svelte";
+	import Switcher from "./Switcher.svelte";
+
+	let modeSwitcher;
+
+	let darkMode = false;
+	$: modeLabel = `Dark mode ${darkMode ? "is" : "is not"} active. Press to toggle it ${
+		darkMode ? "off" : "on."
+	}`;
+
+	onMount(() => {
+		// Initially set our darkmode state based on user preference.
+		// This will default to light mode, which is _my_ preference.
+		darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+		// On load, switch to dark if needed.
+		if (darkMode) document.body.classList.add("dark");
+	});
+	function handleModeSwitch(e) {
+		document.body.classList.toggle("dark");
+	}
+</script>
 
 <style>
 	.header {
@@ -139,4 +161,12 @@
 			target="_blank"
 			rel="noopener noreferrer">John J. Kim</a>
 	</p>
+	<Switcher
+		bind:this={modeSwitcher}
+		bind:checked={darkMode}
+		on:input={handleModeSwitch}
+		id="mode"
+		label={modeLabel}
+		labelLeft="Light"
+		labelRight="Dark" />
 </header>
diff --git a/src/components/Switcher.svelte b/src/components/Switcher.svelte
new file mode 100644
index 0000000..88d8fa2
--- /dev/null
+++ b/src/components/Switcher.svelte
@@ -0,0 +1,140 @@
+<script>
+	export let id;
+	export let label;
+	export let labelLeft, labelRight;
+	export let checked = false;
+</script>
+
+<style>
+	.switcher {
+		--switcher-height-default: 2rem;
+		--switcher-color-background-default: #eeb6a2;
+		--switcher-color-accent-default: #fe4502;
+		--switcher-color-accent-text-default: #000;
+
+		position: absolute;
+		top: var(--gap);
+		right: var(--gap);
+		list-style: none;
+		margin: 0;
+		outline: 1px solid red;
+		padding: 0.5rem;
+		background: white;
+	}
+
+	.visually-hidden {
+		appearance: none;
+		display: none;
+	}
+
+	.switcher__wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		cursor: pointer;
+	}
+	.switcher__label {
+		font: bold var(--font-size-very-small) / 1em var(--sans-serif-fonts);
+		color: var(--color-gray);
+		text-transform: uppercase;
+		margin: 0;
+	}
+
+	.switcher__toggle {
+		display: block;
+		height: var(--switcher-height, var(--switcher-height-default));
+		width: calc(2 * var(--switcher-height, var(--switcher-height-default)));
+		background-color: var(
+			--switcher-color-background,
+			var(--switcher-color-background-default)
+		);
+		border-radius: 3rem;
+		position: relative;
+		transition: background-color var(--speed-transition) ease-in-out;
+	}
+
+	.switcher__toggle__dot {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		background-color: var(
+			--switcher-color-accent,
+			var(--switcher-color-accent-default)
+		);
+		border: 2px solid
+			var(--switcher-color-accent-text, var(--switcher-color-accent-text-default));
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: var(--switcher-height, var(--switcher-height-default));
+		width: var(--switcher-height, var(--switcher-height-default));
+		border-radius: 50%;
+		transform: translate(0, -50%);
+
+		transition: transform var(--speed-transition) ease-in-out,
+			left var(--speed-transition) ease-in-out,
+			background-color var(--speed-transition) ease-in-out;
+	}
+	.switcher__toggle__icon {
+		width: 75%;
+		height: 75%;
+		fill: var(--switcher-color-accent-text, var(--switcher-color-accent-text-default));
+	}
+	.switcher__toggle__icon--dark {
+		width: 50%;
+		height: 50%;
+		transform: rotate(180deg);
+		fill: var(--switcher-color-accent-text, var(--switcher-color-accent-text-default));
+	}
+	.switcher__toggle__icon--dark {
+		display: none;
+	}
+	input:checked + .switcher__wrapper .switcher__toggle__dot {
+		left: 100%;
+		transform: translate(-100%, -50%) rotate(180deg);
+	}
+	input:checked + .switcher__wrapper {
+		--switcher-color-background-default: lightblue;
+		--switcher-color-accent-default: navy;
+		--switcher-color-accent-text-default: white;
+	}
+	input:checked + .switcher__wrapper .switcher__toggle__icon--light {
+		display: none;
+	}
+	input:checked + .switcher__wrapper .switcher__toggle__icon--dark {
+		display: block;
+	}
+</style>
+
+<div class="switcher">
+	<input
+		on:input
+		id="{id}-switcher"
+		type="checkbox"
+		name="{id}-switcher"
+		bind:checked
+		class="visually-hidden" />
+	<label class="switcher__wrapper" for="{id}-switcher" aria-label={label}>
+		{#if labelLeft}<span class="switcher__label switcher__label--left">{labelLeft}</span
+			>{/if}
+		<span class="switcher__toggle">
+			<span class="switcher__toggle__dot">
+				<svg
+					class="switcher__toggle__icon switcher__toggle__icon--dark"
+					role="img"
+					viewbox="0 0 1200 1200">
+					<use href="#moon" />
+				</svg>
+				<svg
+					class="switcher__toggle__icon switcher__toggle__icon--light"
+					role="img"
+					viewbox="0 0 1200 1200">
+					<use href="#sun" />
+				</svg>
+			</span>
+		</span>
+		{#if labelRight}
+			<span class="switcher__label switcher__label--right">{labelRight}</span>{/if}
+	</label>
+</div>
diff --git a/src/svg/moon.svg b/src/svg/moon.svg
new file mode 100644
index 0000000..3425e02
--- /dev/null
+++ b/src/svg/moon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><path d="M1180.7,525.38c-8.62-1.12-17.06,4.31-19.88,12.56-54,160.5-204,268.31-373.31,268.31-217.12,0-393.75-176.62-393.75-393.75,0-169.31,107.81-319.31,268.31-373.31,8.44-2.81,13.69-11.06,12.56-19.88s-8.06-15.75-16.88-16.5C638.82,.94,619.32,0,600.01,0,269.26,0,.01,269.25,.01,600s269.25,600,600,600,600-269.25,600-600c0-18.94-.94-38.25-2.81-57.75-.75-8.81-7.69-15.94-16.5-16.88h0Z"/><path d="M712.5,262.5c41.44,0,75,33.56,75,75,0,10.31,8.44,18.75,18.75,18.75s18.75-8.44,18.75-18.75c0-41.44,33.56-75,75-75,10.31,0,18.75-8.44,18.75-18.75s-8.44-18.75-18.75-18.75c-41.44,0-75-33.56-75-75,0-10.31-8.44-18.75-18.75-18.75s-18.75,8.44-18.75,18.75c0,41.44-33.56,75-75,75-10.31,0-18.75,8.44-18.75,18.75s8.44,18.75,18.75,18.75Z"/><path d="M956.25,150c51.75,0,93.75,42,93.75,93.75,0,10.31,8.44,18.75,18.75,18.75s18.75-8.44,18.75-18.75c0-51.75,42-93.75,93.75-93.75,10.31,0,18.75-8.44,18.75-18.75s-8.44-18.75-18.75-18.75c-51.75,0-93.75-42-93.75-93.75,0-10.31-8.44-18.75-18.75-18.75s-18.75,8.44-18.75,18.75c0,51.75-42,93.75-93.75,93.75-10.31,0-18.75,8.44-18.75,18.75s8.44,18.75,18.75,18.75Z"/></svg>
\ No newline at end of file
diff --git a/src/svg/sun.svg b/src/svg/sun.svg
new file mode 100644
index 0000000..0926648
--- /dev/null
+++ b/src/svg/sun.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1075 1075"><path d="M825,537.5c.16-68.3-24.02-134.43-68.19-186.52-44.18-52.09-105.46-86.75-172.87-97.75s-136.54,2.37-194.98,37.71c-58.45,35.34-102.39,90.35-123.96,155.16-.73,1.62-1.37,3.3-1.9,5-17.67,56.14-17.67,116.36,0,172.5,.53,1.7,1.17,3.37,1.9,5,21.56,64.78,65.48,119.77,123.89,155.12,58.41,35.34,127.5,48.73,194.89,37.77,67.39-10.97,128.68-45.56,172.88-97.6,44.2-52.04,68.43-118.11,68.34-186.39h0Z"/><path d="M575,137.5V37.5c0-13.4-7.15-25.78-18.75-32.48-11.6-6.7-25.9-6.7-37.5,0-11.6,6.7-18.75,19.08-18.75,32.48v100c0,13.4,7.15,25.78,18.75,32.48,11.6,6.7,25.9,6.7,37.5,0s18.75-19.08,18.75-32.48Z"/><path d="M917.5,157.5c-7.04-7.04-16.57-10.99-26.52-10.99s-19.49,3.95-26.53,10.99l-70.6,70.65c-9.48,9.48-13.18,23.29-9.71,36.23,3.47,12.95,13.58,23.06,26.53,26.53,12.94,3.47,26.75-.23,36.23-9.71l70.6-70.75c7.01-7.03,10.94-16.55,10.94-26.47s-3.93-19.45-10.94-26.48h0Z"/><path d="M1037.5,500h-100c-13.4,0-25.78,7.15-32.48,18.75-6.7,11.6-6.7,25.9,0,37.5s19.08,18.75,32.48,18.75h100c13.4,0,25.78-7.15,32.48-18.75,6.7-11.6,6.7-25.9,0-37.5s-19.08-18.75-32.48-18.75Z"/><path d="M864.55,917.5c9.62,8.6,22.98,11.65,35.37,8.08s22.09-13.26,25.66-25.66,.52-25.75-8.08-35.37l-70.7-70.75c-9.48-9.48-23.29-13.18-36.23-9.71-12.95,3.47-23.05,13.58-26.52,26.53-3.47,12.95,.23,26.76,9.71,36.23l70.8,70.65Z"/><path d="M500,937.5v100c0,13.4,7.15,25.78,18.75,32.48,11.6,6.7,25.9,6.7,37.5,0s18.75-19.08,18.75-32.48v-100c0-13.4-7.15-25.78-18.75-32.48-11.6-6.7-25.9-6.7-37.5,0s-18.75,19.08-18.75,32.48Z"/><path d="M157.5,917.5c7.05,7.01,16.58,10.95,26.52,10.95s19.48-3.94,26.53-10.95l70.7-70.75c9.2-9.52,12.7-23.19,9.21-35.96-3.5-12.77-13.47-22.76-26.24-26.27-12.77-3.51-26.44-.02-35.97,9.18l-70.75,70.85c-7.01,7.03-10.94,16.55-10.94,26.47s3.93,19.45,10.94,26.48h0Z"/><path d="M0,537.5c0,9.95,3.95,19.48,10.98,26.52,7.03,7.04,16.57,10.98,26.52,10.98h100c13.4,0,25.78-7.15,32.48-18.75,6.7-11.6,6.7-25.9,0-37.5s-19.08-18.75-32.48-18.75H37.5c-9.95,0-19.48,3.95-26.52,10.98-7.04,7.03-10.98,16.57-10.98,26.52Z"/><path d="M281.15,281.2c7.04-7.03,10.99-16.57,10.99-26.52s-3.95-19.49-10.99-26.53l-70.7-70.65c-9.62-8.6-22.98-11.65-35.37-8.08s-22.09,13.26-25.66,25.66-.52,25.75,8.08,35.37l70.65,70.75c7.04,7.01,16.57,10.95,26.5,10.95s19.46-3.93,26.5-10.95h0Z"/></svg>
\ No newline at end of file

From fed1c6167918de971b237c69e8f536845d5557ae Mon Sep 17 00:00:00 2001
From: Ryan Marx <ryanbmarx@gmail.com>
Date: Tue, 20 Dec 2022 10:50:17 -0600
Subject: [PATCH 2/7] Add some dark mode styling

---
 src/components/About.svelte         | 11 +++++++++++
 src/components/PortfolioItem.svelte |  3 ++-
 src/components/WorkItem.svelte      |  4 ++++
 src/static/global.css               | 12 ++++++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 31061f3..c013dcf 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -67,6 +67,12 @@
 		gap: var(--gap);
 		flex-wrap: wrap;
 	}
+
+	:global(.dark) .about {
+		background-color: var(--color-slate);
+		gap: calc(2 * var(--gap));
+	}
+
 	.bio {
 		flex: 4 4 25rem;
 	}
@@ -80,6 +86,11 @@
 		background: var(--color-apricot-light);
 	}
 
+	:global(.dark) .work {
+		background: transparent;
+		padding: 0;
+	}
+
 	.work ul {
 		list-style: none;
 		margin: 0;
diff --git a/src/components/PortfolioItem.svelte b/src/components/PortfolioItem.svelte
index 0bdfded..2bd8e60 100644
--- a/src/components/PortfolioItem.svelte
+++ b/src/components/PortfolioItem.svelte
@@ -32,13 +32,14 @@
 
 	.project__date {
 		font: bold var(--font-size-very-small) / var(--line-height) var(--sans-serif-fonts);
-		color: var(--color-purple);
+		color: var(--color-font-muted);
 		margin-top: calc(-1 * var(--gap));
 	}
 	.links {
 		list-style: none;
 		margin: 0;
 		padding: 0;
+		color: var(--color-font);
 	}
 
 	.links li {
diff --git a/src/components/WorkItem.svelte b/src/components/WorkItem.svelte
index 825cfd0..5ca4957 100644
--- a/src/components/WorkItem.svelte
+++ b/src/components/WorkItem.svelte
@@ -49,6 +49,7 @@
 
 	.item__role {
 		font: bold var(--font-size) / var(--line-height) var(--sans-serif-fonts);
+		color: var(--color-font);
 		margin: 0;
 		cursor: pointer;
 	}
@@ -101,6 +102,9 @@
 		padding: 0 0 0 calc(var(--icon-width) + var(--gap));
 	}
 
+	.item__description :global(p) {
+		font: var(--font-size-small) / var(--line-height) var(--sans-serif-fonts);
+	}
 	.item__description :global(p:last-child) {
 		margin-bottom: 0;
 	}
diff --git a/src/static/global.css b/src/static/global.css
index edc0121..732a0fb 100644
--- a/src/static/global.css
+++ b/src/static/global.css
@@ -21,6 +21,7 @@
 	--color-link: var(--color-pink);
 	--color-link-text: white;
 	--color-font: var(--color-slate);
+	--color-font-muted: var(--color-purple);
 
 	/* TYPE */
 
@@ -48,6 +49,14 @@
 	--speed-transition-quick: 80ms;
 }
 
+/* ------ DARK MODE */
+
+.dark {
+	--color-font: #eee;
+	--color-font-muted: #aaa;
+	background: var(--color-black);
+}
+
 html body {
 	margin: 0;
 	padding: 0;
@@ -89,15 +98,18 @@ h6 {
 
 .header {
 	font: var(--font-size-very-large) / var(--line-height-tight) var(--display-fonts);
+	color: var(--color-font);
 }
 
 .label {
 	font: var(--font-size-large) / var(--line-height-tight) var(--display-fonts);
 	font-weight: 200;
+	color: var(--color-font);
 }
 .sublabel {
 	font: var(--font-size) / var(--line-height-tight) var(--display-fonts);
 	font-weight: 200;
+	color: var(--color-font);
 }
 
 .agate {

From 1b5d0d00ae10d5c4cfbb348c375018030ba7381b Mon Sep 17 00:00:00 2001
From: Ryan Marx <ryanbmarx@gmail.com>
Date: Tue, 20 Dec 2022 10:51:37 -0600
Subject: [PATCH 3/7] Ignore more generated content

---
 .gitignore               | 1 +
 src/functions/sprite.svg | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)
 delete mode 100644 src/functions/sprite.svg

diff --git a/.gitignore b/.gitignore
index 516fdcc..91243ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -108,3 +108,4 @@ dist
 
 # Generated content
 public/
+functions/sprite.svg
diff --git a/src/functions/sprite.svg b/src/functions/sprite.svg
deleted file mode 100644
index 5354cdd..0000000
--- a/src/functions/sprite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="0" height="0" style="position:absolute"><symbol viewBox="0 0 145.76 103.68" id="email" xmlns="http://www.w3.org/2000/svg"><defs><style>.ac{fill:#231f20}</style></defs><g id="ab"><path class="ac" d="m73.04 54.05 72.7-44.88c-.25-5.1-4.47-9.17-9.63-9.17H9.65C4.56 0 .38 3.97.03 8.98l73.01 45.07Z"/><path class="ac" d="m73.04 59.93-13.15-8.12-55.13 50.52c1.44.85 3.1 1.34 4.89 1.34h126.46c1.87 0 3.6-.54 5.08-1.46l-55-50.4-13.15 8.12ZM0 14.83v79.19c0 1.72.46 3.34 1.25 4.74l54.22-49.68L0 14.83ZM144.62 98.57c.73-1.36 1.14-2.9 1.14-4.55V15.03L90.61 49.08l54.01 49.49Z"/></g></symbol><symbol viewBox="0 0 477.1 511.04" id="github" xmlns="http://www.w3.org/2000/svg"><path d="M177.53 511.04c-12.25 0-22.19-9.93-22.19-22.19v-38.77c-66.96 10.19-95.32-25.74-114.82-50.54-8.62-10.94-16.08-20.41-23.71-22.32C4.92 374.25-2.3 362.2.67 350.33c2.99-11.92 15.04-19.09 26.91-16.14 22.34 5.57 35.86 22.75 47.81 37.9 18.56 23.58 33.6 42.65 79.95 33v-2.12c-1-13.76 1.32-27.85 6.59-41C99.4 347.71 33.29 309.4 33.29 190.38c-.17-32.52 10.61-63.69 30.59-89.02-7.63-28.92-5.44-59.44 6.49-87.26 2.6-6.06 7.76-10.65 14.09-12.53 8.08-2.44 38.34-6.95 97.04 30.21 48.43-11.51 98.99-11.49 147.4 0 58.68-37.14 88.91-32.63 97.04-30.2a22.178 22.178 0 0 1 14.09 12.53c11.92 27.81 14.13 58.34 6.5 87.26 19.81 25.12 30.58 56.02 30.58 88.35 0 125.95-76.54 160.82-128.46 172.13a96.778 96.778 0 0 1 6.35 42.89l.07 84.12c0 12.27-9.93 22.19-22.19 22.19" style="fill:inherit"/></symbol><symbol viewBox="0 0 255.06 256.31" id="linkedin" xmlns="http://www.w3.org/2000/svg"><path d="M5 86.27h50.64v170.04H5V86.27ZM30.01 0c16.88 0 30.63 13.75 30.63 30.63S46.89 61.26 30.01 61.26 0 47.51 0 30.63 13.13 0 30.01 0Zm55.64 86.27h50.01v23.76C146.29 94.4 163.79 84.4 183.8 84.4h13.75c31.88 0 57.51 26.26 57.51 57.51v114.4h-50.01V164.41c-.63-19.38-13.75-34.38-33.13-34.38-19.38 0-35.63 15-36.26 34.38v91.9H85.65V86.27Z" style="fill:#231f20"/></symbol><symbol viewBox="0 0 574.83 615.26" id="mastodon" xmlns="http://www.w3.org/2000/svg"><path d="M574.81 202.01c0-133.49-87.59-172.61-87.59-172.61C443.04 9.16 367.24.66 288.43 0h-1.94C207.72.66 131.95 9.16 87.8 29.4c0 0-87.62 39.12-87.62 172.61 0 30.56-.59 67.12.38 105.86 3.19 130.52 23.97 259.16 144.86 291.1 55.71 14.75 103.55 17.81 142.11 15.69 69.87-3.84 109.11-24.87 109.11-24.87l-2.31-50.65s-49.93 15.75-106.02 13.81c-55.56-1.91-114.24-5.97-123.24-74.09-.81-6-1.22-12.37-1.22-19.09 0 0 54.53 13.31 123.68 16.47 42.28 1.94 81.9-2.47 122.18-7.28 77.21-9.19 144.42-56.68 152.89-100.12 13.31-68.37 12.22-166.83 12.22-166.83ZM471.49 373.96h-64.12V217.1c0-33.06-13.94-49.84-41.81-49.84-30.81 0-46.28 19.9-46.28 59.28v85.87h-63.74v-85.87c0-39.37-15.44-59.28-46.28-59.28-27.87 0-41.81 16.78-41.81 49.84v156.86h-64.11V212.35c0-33.03 8.44-59.28 25.34-78.68 17.47-19.44 40.31-29.37 68.68-29.37 32.81 0 57.65 12.59 74.09 37.78l15.97 26.72 15.97-26.72c16.44-25.18 41.28-37.78 74.12-37.78 28.34 0 51.21 9.94 68.65 29.37 16.94 19.4 25.34 45.65 25.34 78.68v161.61Z" style="fill:#231f20"/></symbol><symbol viewBox="0 0 278.44 226.15" id="twitter" xmlns="http://www.w3.org/2000/svg"><path d="M137.37 69.55c-11.08-58.35 59.09-93.06 100.44-50.96 0 0 18.46-5.17 34.71-15.51 0 0-5.91 19.94-25.85 32.5 0 0 22.16-2.95 31.76-8.86 0 0-9.6 19.94-27.33 27.33C260.71 187.72 116.69 268.97 0 202.49c0 0 57.61 2.95 81.98-25.11 0 0-35.45 2.95-53.18-39.88 0 0 13.29 5.17 26.59-1.48 0 0-41.36-6.65-45.05-56.13 0 0 13.29 10.34 28.07 6.65 0 0-45.79-27.33-19.94-76.81 0 0 48.75 62.04 118.91 59.82Z" style="fill:#231f20"/></symbol><symbol viewBox="0 0 278.44 226.15" id="twtiter" xmlns="http://www.w3.org/2000/svg"><path d="M137.37 69.55c-11.08-58.35 59.09-93.06 100.44-50.96 0 0 18.46-5.17 34.71-15.51 0 0-5.91 19.94-25.85 32.5 0 0 22.16-2.95 31.76-8.86 0 0-9.6 19.94-27.33 27.33C260.71 187.72 116.69 268.97 0 202.49c0 0 57.61 2.95 81.98-25.11 0 0-35.45 2.95-53.18-39.88 0 0 13.29 5.17 26.59-1.48 0 0-41.36-6.65-45.05-56.13 0 0 13.29 10.34 28.07 6.65 0 0-45.79-27.33-19.94-76.81 0 0 48.75 62.04 118.91 59.82Z" style="fill:none;fill-rule:evenodd"/></symbol></svg>
\ No newline at end of file

From 8b7c93ae7e0ff03563bdea97febd9d78fdf9c84f Mon Sep 17 00:00:00 2001
From: Ryan Marx <ryanbmarx@gmail.com>
Date: Tue, 20 Dec 2022 10:52:26 -0600
Subject: [PATCH 4/7] Oops. Wrong path

---
 .gitignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 91243ca..02a754d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -108,4 +108,4 @@ dist
 
 # Generated content
 public/
-functions/sprite.svg
+src/functions/sprite.svg

From 6dc4dbdae2e8390fcd0f9874ab5274bfbdf64747 Mon Sep 17 00:00:00 2001
From: Ryan Marx <ryanbmarx@gmail.com>
Date: Tue, 20 Dec 2022 11:05:00 -0600
Subject: [PATCH 5/7] Schnazzier effect

---
 src/components/Switcher.svelte | 39 +++++++++++++++++++++++++++++-----
 src/static/global.css          |  8 +++++--
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/components/Switcher.svelte b/src/components/Switcher.svelte
index 88d8fa2..c0ef16c 100644
--- a/src/components/Switcher.svelte
+++ b/src/components/Switcher.svelte
@@ -17,9 +17,8 @@
 		right: var(--gap);
 		list-style: none;
 		margin: 0;
-		outline: 1px solid red;
 		padding: 0.5rem;
-		background: white;
+		background: rgba(0, 0, 0, 0.35);
 	}
 
 	.visually-hidden {
@@ -38,6 +37,30 @@
 		color: var(--color-gray);
 		text-transform: uppercase;
 		margin: 0;
+		padding: 0 0 0.15rem 0;
+		color: white;
+		transform: color var(--speed-transition) ease-in-out;
+		position: relative;
+	}
+
+	.switcher__label::after {
+		content: "";
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 100%;
+		background-color: currentColor;
+		width: 100%;
+		height: 2px;
+		transition: transform var(--speed-transition) ease-in-out;
+	}
+
+	.switcher__label--muted {
+		color: var(--color-gray);
+		border-color: transparent;
+	}
+	.switcher__label--muted::after {
+		transform: scaleX(0);
 	}
 
 	.switcher__toggle {
@@ -116,8 +139,11 @@
 		bind:checked
 		class="visually-hidden" />
 	<label class="switcher__wrapper" for="{id}-switcher" aria-label={label}>
-		{#if labelLeft}<span class="switcher__label switcher__label--left">{labelLeft}</span
-			>{/if}
+		{#if labelLeft}
+			<span
+				class="switcher__label switcher__label--left"
+				class:switcher__label--muted={checked}>{labelLeft}</span>
+		{/if}
 		<span class="switcher__toggle">
 			<span class="switcher__toggle__dot">
 				<svg
@@ -135,6 +161,9 @@
 			</span>
 		</span>
 		{#if labelRight}
-			<span class="switcher__label switcher__label--right">{labelRight}</span>{/if}
+			<span
+				class="switcher__label switcher__label--right"
+				class:switcher__label--muted={!checked}>{labelRight}</span>
+		{/if}
 	</label>
 </div>
diff --git a/src/static/global.css b/src/static/global.css
index 732a0fb..98ee029 100644
--- a/src/static/global.css
+++ b/src/static/global.css
@@ -45,8 +45,8 @@
 	--tap-target: 48px;
 
 	/* OTHER VISUAL THINGS */
-	--speed-transition: 150ms;
-	--speed-transition-quick: 80ms;
+	--speed-transition: 1ms;
+	--speed-transition-quick: 1ms;
 }
 
 /* ------ DARK MODE */
@@ -165,6 +165,10 @@ a:where(:hover, :focus-visible) {
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
+	:root {
+		--speed-transition: 150ms;
+		--speed-transition-quick: 80ms;
+	}
 	a::before {
 		transform-origin: middle bottom;
 		transform: translate(0, 100%) scaleY(0);

From 1fdaa6146d8eeb1ec3893b21ab6e80bcd44da498 Mon Sep 17 00:00:00 2001
From: Ryan Marx <ryanbmarx@gmail.com>
Date: Tue, 20 Dec 2022 11:50:50 -0600
Subject: [PATCH 6/7] More dark modes

---
 src/components/About.svelte     |  33 ++++++---
 src/components/Contact.svelte   |   2 +-
 src/components/Header.svelte    |   8 ++-
 src/components/Portfolio.svelte |  14 ----
 src/components/Switcher.svelte  | 116 +++++++++++++++++++-------------
 src/components/Tags.svelte      |  21 ++++++
 src/static/global.css           |  12 ++++
 7 files changed, 133 insertions(+), 73 deletions(-)

diff --git a/src/components/About.svelte b/src/components/About.svelte
index c013dcf..7e62db3 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -66,11 +66,7 @@
 		align-items: start;
 		gap: var(--gap);
 		flex-wrap: wrap;
-	}
-
-	:global(.dark) .about {
-		background-color: var(--color-slate);
-		gap: calc(2 * var(--gap));
+		transition: background-color var(--speed-transition) ease-in-out;
 	}
 
 	.bio {
@@ -82,13 +78,10 @@
 
 	.work {
 		flex: 1 1 20rem;
+		align-self: stretch;
 		padding: var(--gap);
 		background: var(--color-apricot-light);
-	}
-
-	:global(.dark) .work {
-		background: transparent;
-		padding: 0;
+		transition: background var(--speed-transition) ease-in-out;
 	}
 
 	.work ul {
@@ -96,6 +89,26 @@
 		margin: 0;
 		padding: 0;
 	}
+
+	/* DARK MODE ---------- */
+	:global(.dark) .about {
+		background-color: var(--color-slate);
+		gap: calc(2 * var(--gap));
+	}
+
+	:global(.dark) .work {
+		background: rgba(0, 0, 0, 0.35);
+	}
+
+	@media screen and (prefers-color-scheme: dark) {
+		.about {
+			background-color: var(--color-slate);
+			gap: calc(2 * var(--gap));
+		}
+		.work {
+			background: rgba(0, 0, 0, 0.35);
+		}
+	}
 </style>
 
 <section aria-labelledby="about-header" class="about container">
diff --git a/src/components/Contact.svelte b/src/components/Contact.svelte
index 7586826..d2bb2b7 100644
--- a/src/components/Contact.svelte
+++ b/src/components/Contact.svelte
@@ -102,7 +102,7 @@
 	<ul class="contact__social">
 		{#each networks as { label, icon, url, rel = null, target = null }}
 			<li class="contact__link contact__link--{label}">
-				<a href={url} {target} {rel}>
+				<a href={url} {target} {rel} tabindex="0">
 					<span class="visually-hidden">Visit me on {label}</span>
 					<svg class="icon">
 						<title>{label} icon</title>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 9a6aaa2..3497bc1 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -2,8 +2,7 @@
 	import { onMount } from "svelte";
 	import Switcher from "./Switcher.svelte";
 
-	let modeSwitcher;
-
+	let displayModeSwitcher = false;
 	let darkMode = false;
 	$: modeLabel = `Dark mode ${darkMode ? "is" : "is not"} active. Press to toggle it ${
 		darkMode ? "off" : "on."
@@ -16,6 +15,9 @@
 
 		// On load, switch to dark if needed.
 		if (darkMode) document.body.classList.add("dark");
+
+		// We are using JS and should display the toggle
+		displayModeSwitcher = true;
 	});
 	function handleModeSwitch(e) {
 		document.body.classList.toggle("dark");
@@ -162,7 +164,7 @@
 			rel="noopener noreferrer">John J. Kim</a>
 	</p>
 	<Switcher
-		bind:this={modeSwitcher}
+		visible={displayModeSwitcher}
 		bind:checked={darkMode}
 		on:input={handleModeSwitch}
 		id="mode"
diff --git a/src/components/Portfolio.svelte b/src/components/Portfolio.svelte
index 6794e3c..9caf7cd 100644
--- a/src/components/Portfolio.svelte
+++ b/src/components/Portfolio.svelte
@@ -63,20 +63,6 @@
 		padding: 0;
 		margin: 0;
 	}
-
-	:global(.tag) {
-		padding: 0.25rem 0.5rem;
-		border-radius: 0.25rem;
-		/* background-color: var(--color-purple); */
-		/* color: var(--color-gray-light); */
-		font: bold var(--font-size-very-small) / var(--line-height) var(--sans-serif-fonts);
-		text-transform: uppercase;
-
-		border: 1px solid var(--color-purple);
-		color: var(--color-purple);
-		background-color: transparent;
-		transition: background-color var(--speed-transition) ease-in-out;
-	}
 </style>
 
 <section id="portfolio" class="container" aria-labelledby="portfolio-header">
diff --git a/src/components/Switcher.svelte b/src/components/Switcher.svelte
index c0ef16c..c0f11d1 100644
--- a/src/components/Switcher.svelte
+++ b/src/components/Switcher.svelte
@@ -1,15 +1,19 @@
 <script>
+	import { fade } from "svelte/transition";
 	export let id;
 	export let label;
 	export let labelLeft, labelRight;
 	export let checked = false;
+	export let visible = false;
 </script>
 
 <style>
 	.switcher {
 		--switcher-height-default: 2rem;
+		--switcher-bar-height-default: 6px;
+		--switcher-width-default: 2.8rem;
 		--switcher-color-background-default: #eeb6a2;
-		--switcher-color-accent-default: #fe4502;
+		--switcher-color-accent-default: var(--color-apricot-light);
 		--switcher-color-accent-text-default: #000;
 
 		position: absolute;
@@ -19,6 +23,14 @@
 		margin: 0;
 		padding: 0.5rem;
 		background: rgba(0, 0, 0, 0.35);
+
+		opacity: 0.7;
+		transition: opacity var(--speed-transition) ease-in-out;
+	}
+
+	.switcher:hover,
+	.switcher:focus {
+		opacity: 1;
 	}
 
 	.visually-hidden {
@@ -66,7 +78,8 @@
 	.switcher__toggle {
 		display: block;
 		height: var(--switcher-height, var(--switcher-height-default));
-		width: calc(2 * var(--switcher-height, var(--switcher-height-default)));
+		height: var(--switcher-bar-height, var(--switcher-bar-height-default));
+		width: var(--switcher-width, var(--switcher-width-default));
 		background-color: var(
 			--switcher-color-background,
 			var(--switcher-color-background-default)
@@ -97,21 +110,30 @@
 
 		transition: transform var(--speed-transition) ease-in-out,
 			left var(--speed-transition) ease-in-out,
-			background-color var(--speed-transition) ease-in-out;
+			background-color var(--speed-transition) ease-in-out,
+			border-color var(--speed-transition) ease-in-out;
 	}
 	.switcher__toggle__icon {
 		width: 75%;
 		height: 75%;
 		fill: var(--switcher-color-accent-text, var(--switcher-color-accent-text-default));
+		transition: transform var(--speed-transition) ease-in-out,
+			fill var(--speed-transition) ease-in-out,
+			opacity var(--speed-transition) ease-in-out;
+
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
 	}
 	.switcher__toggle__icon--dark {
 		width: 50%;
 		height: 50%;
-		transform: rotate(180deg);
-		fill: var(--switcher-color-accent-text, var(--switcher-color-accent-text-default));
 	}
-	.switcher__toggle__icon--dark {
-		display: none;
+
+	.switcher__toggle__icon[hidden] {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0);
 	}
 	input:checked + .switcher__wrapper .switcher__toggle__dot {
 		left: 100%;
@@ -122,48 +144,52 @@
 		--switcher-color-accent-default: navy;
 		--switcher-color-accent-text-default: white;
 	}
-	input:checked + .switcher__wrapper .switcher__toggle__icon--light {
+	/* input:checked + .switcher__wrapper .switcher__toggle__icon--light {
 		display: none;
 	}
 	input:checked + .switcher__wrapper .switcher__toggle__icon--dark {
 		display: block;
-	}
+	} */
 </style>
 
-<div class="switcher">
-	<input
-		on:input
-		id="{id}-switcher"
-		type="checkbox"
-		name="{id}-switcher"
-		bind:checked
-		class="visually-hidden" />
-	<label class="switcher__wrapper" for="{id}-switcher" aria-label={label}>
-		{#if labelLeft}
-			<span
-				class="switcher__label switcher__label--left"
-				class:switcher__label--muted={checked}>{labelLeft}</span>
-		{/if}
-		<span class="switcher__toggle">
-			<span class="switcher__toggle__dot">
-				<svg
-					class="switcher__toggle__icon switcher__toggle__icon--dark"
-					role="img"
-					viewbox="0 0 1200 1200">
-					<use href="#moon" />
-				</svg>
-				<svg
-					class="switcher__toggle__icon switcher__toggle__icon--light"
-					role="img"
-					viewbox="0 0 1200 1200">
-					<use href="#sun" />
-				</svg>
+{#if visible}
+	<div class="switcher" transition:fade>
+		<input
+			on:input
+			id="{id}-switcher"
+			type="checkbox"
+			name="{id}-switcher"
+			bind:checked
+			class="visually-hidden" />
+		<label class="switcher__wrapper" for="{id}-switcher" aria-label={label}>
+			{#if labelLeft}
+				<span
+					class="switcher__label switcher__label--left"
+					class:switcher__label--muted={checked}>{labelLeft}</span>
+			{/if}
+			<span class="switcher__toggle">
+				<span class="switcher__toggle__dot">
+					<svg
+						class="switcher__toggle__icon switcher__toggle__icon--dark"
+						hidden={checked ? null : true}
+						role="img"
+						viewbox="0 0 1200 1200">
+						<use href="#moon" />
+					</svg>
+					<svg
+						class="switcher__toggle__icon switcher__toggle__icon--light"
+						hidden={checked ? true : null}
+						role="img"
+						viewbox="0 0 1200 1200">
+						<use href="#sun" />
+					</svg>
+				</span>
 			</span>
-		</span>
-		{#if labelRight}
-			<span
-				class="switcher__label switcher__label--right"
-				class:switcher__label--muted={!checked}>{labelRight}</span>
-		{/if}
-	</label>
-</div>
+			{#if labelRight}
+				<span
+					class="switcher__label switcher__label--right"
+					class:switcher__label--muted={!checked}>{labelRight}</span>
+			{/if}
+		</label>
+	</div>
+{/if}
diff --git a/src/components/Tags.svelte b/src/components/Tags.svelte
index 858f577..812072a 100644
--- a/src/components/Tags.svelte
+++ b/src/components/Tags.svelte
@@ -19,6 +19,27 @@
 
 	.tag {
 		flex: 0 0 fit-content;
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		font: bold var(--font-size-very-small) / var(--line-height) var(--sans-serif-fonts);
+		text-transform: uppercase;
+
+		color: var(--color-purple);
+		border: 1px solid currentColor;
+		background-color: transparent;
+		transition: background-color var(--speed-transition) ease-in-out,
+			border-color var(--speed-transition) ease-in-out;
+	}
+
+	/* ---- DARK MODE ------------ */
+	:global(.dark) .tag {
+		color: var(--color-font-muted);
+	}
+
+	@media screen and (prefers-color-scheme: dark) {
+		.tag {
+			color: var(--color-font-muted);
+		}
 	}
 </style>
 
diff --git a/src/static/global.css b/src/static/global.css
index 98ee029..a4c02bc 100644
--- a/src/static/global.css
+++ b/src/static/global.css
@@ -52,6 +52,7 @@
 /* ------ DARK MODE */
 
 .dark {
+	/* Also applied in media query below */
 	--color-font: #eee;
 	--color-font-muted: #aaa;
 	background: var(--color-black);
@@ -177,3 +178,14 @@ a:where(:hover, :focus-visible) {
 		transform: translate(0, 0) scaleY(1);
 	}
 }
+
+@media screen and (prefers-color-scheme: dark) {
+	:root {
+		/* Also applied in media query below */
+		--color-font: #eee;
+		--color-font-muted: #aaa;
+	}
+	body {
+		background: var(--color-black);
+	}
+}

From 2e37a78e660318ac45ae301593803cd9e6fac254 Mon Sep 17 00:00:00 2001
From: Ryan Marx <ryanbmarx@gmail.com>
Date: Thu, 1 Jun 2023 22:12:07 -0500
Subject: [PATCH 7/7] more eupdates

---
 src/App.svelte                 |  3 ---
 src/components/Header.svelte   |  1 +
 src/components/Tags.svelte     | 21 ++++++++++++++++++---
 src/config/portfolioItems.json | 22 +++++++++++-----------
 src/config/tagDefinitions.json |  2 +-
 src/stores.js                  |  3 +++
 6 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 src/stores.js

diff --git a/src/App.svelte b/src/App.svelte
index 2802a3b..b16552a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,4 @@
 <script>
-	// UTILS
-	import { setContext } from "svelte";
-
 	// COMPONENTS
 	import Header from "./components/Header.svelte";
 	import Contact from "./components/Contact.svelte";
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 3497bc1..e22a5a3 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -143,6 +143,7 @@
 	<picture>
 		<source srcset="/img/header-background--desktop.jpg" media="(min-width: 768px)" />
 		<img
+			fetchpriority="high"
 			class="header__image"
 			src="/img/header-background--thumb.jpg"
 			alt="An overhead view of Ryan Marx, smiling while he works, sitting at his desk. The walls of his cubicle are covered in small posters and family photos. Ryan is wearing one of his favofite fleece zip-up jackets." />
diff --git a/src/components/Tags.svelte b/src/components/Tags.svelte
index 812072a..802df69 100644
--- a/src/components/Tags.svelte
+++ b/src/components/Tags.svelte
@@ -1,5 +1,6 @@
 <script>
-	import { getContext } from "svelte";
+	import { activeTag } from "../stores.js";
+
 	export let tags = [];
 
 	export let tagDefinitions = {};
@@ -28,7 +29,13 @@
 		border: 1px solid currentColor;
 		background-color: transparent;
 		transition: background-color var(--speed-transition) ease-in-out,
-			border-color var(--speed-transition) ease-in-out;
+			border-color var(--speed-transition) ease-in-out,
+			color var(--speed-transition) ease-in-out;
+	}
+
+	.tag--active {
+		background-color: var(--color-purple);
+		color: white;
 	}
 
 	/* ---- DARK MODE ------------ */
@@ -46,7 +53,15 @@
 {#if tags.length}
 	<ul class="tags" role="list">
 		{#each tags.filter(t => t in tagDefinitions) as tag}
-			<li class="tag" role="listitem">{tagDefinitions[tag].label}</li>
+			<li
+				class="tag"
+				class:tag--active={tag.toLowerCase() === $activeTag}
+				role="listitem">
+				<button
+					on:click={e => {
+						console.log(tag);
+					}}>{tagDefinitions[tag].label}</button>
+			</li>
 		{/each}
 	</ul>
 {/if}
diff --git a/src/config/portfolioItems.json b/src/config/portfolioItems.json
index a7b4ad7..9530c19 100644
--- a/src/config/portfolioItems.json
+++ b/src/config/portfolioItems.json
@@ -29,13 +29,13 @@
 				"link": "https://www.usatoday.com/storytelling/find-out-how-conservative-you-really-are/"
 			}
 		],
-		"tags": ["tool", "ui", "svelte"]
+		"tags": ["tools", "ui", "svelte"]
 	},
 	{
 		"label": "Cast of Characters",
 		"image": "cast.png",
 		"repo": "https://github.com/ryanbmarx/storytelling-cast-of-characters/",
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 
 		"links": [
 			{
@@ -66,7 +66,7 @@
 				"link": "https://www.democratandchronicle.com/storytelling/sibley-building-downtown-rochester-ny-quiz/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"description": "Sometimes the news can and should be fun. Part of our ongoing 'news play' experiments, this quiz framework has been used to create topical and evergreen quizzes for 6 different news properties, and has been published weekly  by USA TODAY for more than two years. The primary business goals of this project was to drive reader registrations (not subscriptions).\n\nThousands of quiztakers visited Gannett sign-up pages. To encourage habitual quiztaking, this frameworks supports the possibility of two different leaderboards — weekly and all-time — as well as syndication across Gannett properties."
 	},
 
@@ -87,7 +87,7 @@
 				"link": "https://www.lohud.com/in-depth/news/2022/11/17/jennifer-jones-rockette-radio-city-music-hall/69616543007/"
 			}
 		],
-		"tags": ["tool"],
+		"tags": ["tools"],
 		"description": "My team at Gannett is responsible for designing, engineering and maintaining the In-Depth article framework. This collection of tools enables more than 100 web producers across the company to craft visually stunning, reader-focused multimedia presentations using the everyday CMS and our own story editor.\n\nIt's been used to create more than 7,500 (as of December 2022) articles and is the tool of choice to present the strongest, most impactful journalism Gannett has to offer.\n\nIt has generated hundreds of thousands of pageviews, a 2x increase in engaged time over standard templates and frequently leads to subscriber conversions."
 	},
 	{
@@ -107,7 +107,7 @@
 				"link": "https://www.oklahoman.com/in-depth/news/2021/08/31/hispanic-domestic-abuse-survivors-speak-out-help-other-victims/7497178002/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"description": "This component for the In-Depth toolbox was our second-pass at audio clips. I designed and developed this from scratch as an attempt to grow the poor interaction rates observed with the first version. It's bigger and bolder — more pixels on the page — and has a strong visual presence."
 	},
 	{
@@ -126,7 +126,7 @@
 				"link": "https://www.desmoinesregister.com/in-depth/news/local/columnists/courtney-crowder/2019/11/26/abbie-kampman-iowa-strangers-find-peace-20-years-after-wrong-way-crash-kills-5-mother-sisters/2570864001/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"image": "sms.png",
 		"description": "This component from the In-Depth toolbox is a top-to-bottom refactor of an existing app. Originally written in Angular (with the data hard-coded into the application), I rewrote it in our preferred Svelte, and abstracted the input data so that it could be used in any project. Visually, it uses the same CSS styling variables as the broader article stylesheets, so it adapts to existing "
 	},
@@ -147,7 +147,7 @@
 				"link": "https://www.usatoday.com/in-depth/graphics/2021/07/07/climate-change-images-offer-present-and-future-views-our-world/5173622001/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"description": "This component for In-Depth takes two images, lines them up and toggles between them. We had originally decided to let the myriad 3rd-party versions of this tool serve In-Depth, but this one provides us useful analytics."
 	},
 	{
@@ -168,7 +168,7 @@
 				"link": "https://www.palmbeachpost.com/storytelling/palm-beach-florida-election-voters-guide-2022/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"description": "This concept was born in the early days of the Covid-19 pandemic. Our readers had lots of questions and needed easy access to the answers. Gannett was covering the heck out of the ordeal, but organizing that content in ways satisfy these specific, informational needs was difficult. Enter the big page of help.\n\nConstructed with SEO as a top priority, these experiences are intuitive and transactional. Individual questions are grouped by topic, and each question, by design, has an answer with more information available if desired.\n\nThe concept has been adapted for civic resources, hurricane preparedness and voting."
 	},
 	{
@@ -186,7 +186,7 @@
 				"link": "https://www.azcentral.com/in-depth/news/local/arizona-wildfires/2019/07/22/wildfire-risks-more-than-500-spots-have-greater-hazard-than-paradise/1434502001/"
 			}
 		],
-		"tags": ["tool", "ui", "svelte"],
+		"tags": ["tools", "ui", "svelte"],
 		"description": "This collaboration with the Arizona Republic and the USA TODAY graphics team is a custom-build interface for a custom-built database of wildfire potential in the U.S. west. Each town is measured by a series of metrics calculating the probability that it could be consumed by wildfire.\n\nThe application had a standalone instance with it's own URL, but it also was embedded into a handful of articles (built using the In-Depth framework) and pre-configured to display specific towns."
 	},
 	{
@@ -207,7 +207,7 @@
 				"link": "https://www.palmbeachpost.com/storytelling/news/surfside-miami-florida-building-collapse-victims-who-died-obituaries/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"description": "The Covid-19 pandemic claimed at least 1.1 million Americans, and at least 6.6 million worldwide. This presentation was developed in conjunction with a newsroom in New Jersey as an artful, elegant and respectful way  to display the names of people who had died in the pandemic. It was adapted for use in Detroit and south Florida  for similar purposes."
 	},
 	{
@@ -300,7 +300,7 @@
 				"link": "https://graphics.chicagotribune.com/news/local/eastland/"
 			}
 		],
-		"tags": ["article", "tool"]
+		"tags": ["article", "tools"]
 	},
 	{
 		"label": "The Tax Divide - A 4-part series",
diff --git a/src/config/tagDefinitions.json b/src/config/tagDefinitions.json
index 0ece766..6772308 100644
--- a/src/config/tagDefinitions.json
+++ b/src/config/tagDefinitions.json
@@ -11,7 +11,7 @@
 		"label": "Featured",
 		"description": "A nicely-designed article or other featured content that might not have a ton of interactivity but is full of information and organization."
 	},
-	"tool": {
+	"tools": {
 		"label": "Tools",
 		"description": "These are not one-off projects. The codebase consitutes a tool or framework and has been reused several times."
 	},
diff --git a/src/stores.js b/src/stores.js
new file mode 100644
index 0000000..ba378cf
--- /dev/null
+++ b/src/stores.js
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const activeTag = writable("tools");