view transition draft

src/pages/404.astro

@@ -0,0 +1,28 @@
+---
+import Layout from '@layouts/Layout.astro';
+import { Image } from 'astro:assets';
+
+import DataGif from '../img/it-does-not-exist.gif';
+---
+
+<Layout title="Not Found">
+	<h2>404 - Page Not Found</h2>
+	<Image
+		class="gif"
+		src={DataGif}
+		alt="Data from Star Trek with the caption 'It does not exist'"
+	/>
+</Layout>
+
+<style>
+	h2 {
+		text-align: center;
+	}
+
+	.gif {
+		display: block;
+		margin: auto;
+		border-radius: var(--radius);
+		box-shadow: var(--shadow);
+	}
+</style>

src/pages/404.md

@@ -1,10 +0,0 @@
----
-layout: ../layouts/Layout.astro
-title: Page Not Found
----
-
-## 404 - Page not found!
-
-You're trying to find a page that does not exist.
-
-[Click here](/) to find your way home.

src/pages/blog/[...slug].astro

@@ -15,18 +15,18 @@ export async function getStaticPaths() {
 
 const { post } = Astro.props;
 
-const { data } = post;
+const { data, slug } = post;
 
 const { Content } = await post.render();
 ---
 
 <Layout title={data.title}>
-	<BlogHeader title={data.title} date={data.pubDate} />
-	<article>
+	<article transition:name={slug}>
+		<BlogHeader title={data.title} date={data.pubDate} />
 		<Content />
+		<a href="https://notbyai.fyi/">
+			<i class="not-by-ai"></i>
+		</a>
+		<Tags tags={data.tags} />
 	</article>
-	<a href="https://notbyai.fyi/">
-		<i class="not-by-ai"></i>
-	</a>
-	<Tags tags={data.tags} />
 </Layout>

src/pages/blog/archive/[tag].astro

@@ -50,7 +50,7 @@ posts.sort(
 	<ul>
 		{
 			posts.map(({ slug, data }) => (
-				<li>
+				<li transition:name={slug}>
 					<a href={`/posts/${slug}`}>{data.title}</a> -
 					<span>
 						{format(add(new Date(data.pubDate), { hours: 6 }), 'MMM do, y')}
@@ -60,3 +60,9 @@ posts.sort(
 		}
 	</ul>
 </Layout>
+
+<style>
+	ul {
+		list-style: none;
+	}
+</style>

src/pages/index.astro

@@ -4,7 +4,7 @@ import { Image } from 'astro:assets';
 import { getCollection } from 'astro:content';
 
 import Layout from '@layouts/Layout.astro';
-import LatestPost from '@components/LatestPost.astro';
+import Avatar from '@components/Avatar.astro';
 
 import portrait from '../img/portrait.jpg';
 import MastodonIcon from '../img/svg/mastodon.svg';
@@ -20,13 +20,9 @@ const latestPost = posts.sort(
 ---
 
 <Layout title="About">
-	<Image
-		src={portrait}
-		alt="Illustrated portrait of a person with glasses and a beard, wearing a red and black plaid shirt. The background is a solid green color."
-		class="portrait"
-		width="250"
-		height="250"
-	/>
+	<div transition:name="my-avatar">
+		<Avatar size={250} />
+	</div>
 	<p>
 		My name is <strong>Graham</strong> (he/him), a full-stack web developer, and
 		tech enthusiast.
@@ -42,8 +38,9 @@ const latestPost = posts.sort(
 		development, and whatever else strikes my fancy.
 	</p>
 	<p>
-		Read my latest blog post, <a href={`blog/${latestPost.slug}`}
-			>{latestPost.data.title}</a
+		Read my latest blog post, <a
+			transition:name={latestPost.slug}
+			href={`blog/${latestPost.slug}`}>{latestPost.data.title}</a
 		>, from {new Date(latestPost.data.pubDate).toLocaleDateString()}.
 	</p>
 	<p>
@@ -68,17 +65,4 @@ const latestPost = posts.sort(
 			target="_blank">Natalia Vazquez</a
 		>.
 	</p>
-	<LatestPost />
 </Layout>
-
-<style>
-	.portrait {
-		display: block;
-		margin: auto;
-		margin-bottom: 26px;
-		border-radius: 200px;
-	}
-	a > svg {
-		transform: translateY(0.18rem);
-	}
-</style>

src/pages/now.md

@@ -7,12 +7,6 @@ Hey there, this is my [/now page](https://nownownow.com/about)!
 
 _Last updated: February 4, 2025_
 
-## 🔨 Making
-
-- This blog!
-- [AutoDock](https://github.com/ghall89/AutoDock) - A Mac menubar utility that automatically hides and shows your dock based on the size of your connected display.
-- [KeyStash](https://github.com/ghall89/KeyStash) - A native Mac app for managing registration codes for your apps, modelled on the feature from 1Password.
-
 ## 🎧 Listening
 
 - [Tonight - Franz Ferdinand](https://music.apple.com/us/album/tonight/300683347)

src/pages/projects.md

@@ -0,0 +1,16 @@
+---
+layout: ../layouts/Layout.astro
+title: Projects
+---
+
+### [AutoDock](https://github.com/ghall89/AutoDock)
+
+A MacOS menubar utility for automatically hiding and showing the Dock based on the screen size of the connected displays.
+
+### [KeyStash](https://github.com/ghall89/KeyStash)
+
+A MacOS application for managing software license keys for software purchased outside the Mac App Store.
+
+### BGG Search (Raycast Extension) - Coming Soon!
+
+A Raycast extension for searching [BoardGameGeek.com](https://boardgamegeek.com).