diff --git a/config.yaml b/config.yaml
index aa9fd4e..2632e97 100644
--- a/config.yaml
+++ b/config.yaml
@@ -12,6 +12,9 @@ markup:
 # permalinks:
 #   post: /blog/:title
 
+params:
+  Description: "Hi! I'm Daniel. I live in Kansas City where I help run a small Christian church, raise two kids with my awesome wife, and write software for Divvy."
+
 outputs:
   home: [html]
   blog: ['html', 'rss']
diff --git a/content/_index.md b/content/_index.md
index 864accd..a2e0dc1 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,6 +1,8 @@
 ## Hi! I'm Daniel.
 
-<img class="rounded" src="/img/avatar-256.jpg" height=256 width=256 />
+<img alt="photo of daniel" class="rounded" src="/img/avatar-256.jpg" height=256 width=256 />
+
+<!-- updates here must be mirrored in site config for meta description-->
 
 I live in Kansas City where I help run <a target="_blank"
 href="https://kcrising.church">a small Christian church</a>, raise two kids
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index afae5f4..b26ca60 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,20 +1,21 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
 		<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
 		<link rel="shortcut icon" href="/icon.png" />
-		<link rel="stylesheet" href="/styles.css" />
+		<link defer rel="stylesheet" href="/styles.css" />
 		<script defer src="/global.js"></script>
 		<script async defer data-domain="lyte.dev" src="https://a.lyte.dev/js/plausible.js"></script>
 		<script defer src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
 	</head>
 	<body>
 		<header>
-			<a href="#start-of-content" class="hidden-in-browsers js-disabled-only">Skip to Content</a>
+			<a href="#start-of-content" class="hide-unless-focused">Skip to Content</a>
 			<section>
-				<a href="/" id="logo">
+				<a href="/" aria-label="index link" id="logo">
 					{{ partial "logo.svg.html" . }}
 				</a>
 				<a href="/">
@@ -32,15 +33,15 @@
 				{{ end }}
 			</section>
 			<section style="position:absolute;height:100%;right:0">
-				<button class="no-bg theme-toggler js-only centerize">
+				<button class="no-bg theme-toggler js-only centerize" aria-label="toggle dark theme">
 					{{ partial "theme-toggle.html" . }}
 				</button>
-				<button class="no-bg align-toggler js-only hidden-on-mobile centerize">
+				<button class="no-bg align-toggler js-only hidden-on-mobile centerize" aria-label="toggle text alignment">
 					{{ partial "align-toggle.html" . }}
 				</button>
 			</section>
 		</header>
-		<main>{{ block "main" . }}{{ .Content }}{{ end }}</main>
+		<main id="start-of-content">{{ block "main" . }}{{ .Content }}{{ end }}</main>
 		<footer style="padding-bottom: 5em"></footer>
 	</body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
index ef80ac1..3a76ccb 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -12,9 +12,9 @@
 	{{ end }}
 </ul>
 
-<h2>More Me</h2>
+<h2>External Links</h2>
 
-<ul>
+<ul class="horizontal-blocks">
 	<li>
 		<a href="https://discord.gg/jUCXCYp">Discord</a>
 	</li>
@@ -31,7 +31,7 @@
 
 <h2>Meta</h2>
 
-<ul>
+<ul class="horizontal-blocks">
 	<li>
 		<a href="/privacy">Privacy Policy</a>
 	</li>
diff --git a/src/stylus/core.styl b/src/stylus/core.styl
index b89612f..2c7e798 100644
--- a/src/stylus/core.styl
+++ b/src/stylus/core.styl
@@ -145,6 +145,20 @@ form
 @media (max-width 600px)
 	.hidden-on-mobile { display: none }
 
+.hide-unless-focused
+	transform translateY(-200%)
+	position fixed
+	top 0.5em
+	left 0.5em
+	padding 0.5em 0.8em
+	border dotted 0.1em #ccc
+	border-radius 0.25em
+	box-shadow 0 0 0.5em rgba(0, 0, 0, 0.25)
+	background rgba(0, 0, 0, 0.8)
+
+	&:focus
+		transform translateX(0%)
+
 @media (min-width 600px)
 	body.align-left
 		.hide-in-align-left { display: none }
@@ -189,3 +203,29 @@ form
 				margin-left auto
 				margin-right auto
 				display block
+
+ul.horizontal-blocks
+	display flex
+	flex-wrap wrap
+	list-style none
+	padding 0
+	gap 0.5em
+
+	> li
+		flex 1
+		display flex
+
+		> a
+			flex-grow 1
+			display flex
+			padding 0.5em 2em
+			background-color rgba(255, 255, 255, 0.05)
+			text-align center
+			justify-content center
+			align-items center
+			text-decoration none
+			white-space nowrap
+
+			&:hover
+				background-color rgba(255, 255, 255, 0.1)
+
