new projects page

.astro/content-assets.mjs

@@ -1,10 +1,10 @@
 
-import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
 import __ASTRO_IMAGE_IMPORT_1G57ng from "src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
 import __ASTRO_IMAGE_IMPORT_Z1ESWoO from "src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
 import __ASTRO_IMAGE_IMPORT_rrnp from "src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
+import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
 import __ASTRO_IMAGE_IMPORT_Zi2DqH from "src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
 import __ASTRO_IMAGE_IMPORT_1OkzEl from "src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
 import __ASTRO_IMAGE_IMPORT_FYQiW from "src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
-export default new Map([["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
+export default new Map([["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
 		

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1756244081510
+		"lastUpdateCheck": 1757801179888
 	}
 }

src/components/Card.astro

@@ -0,0 +1,54 @@
+---
+interface Props {
+	title?: string;
+	image?: ImageMetadata;
+	links?: {
+		label: string;
+		href: string;
+		newWindow?: boolean;
+	}[];
+}
+
+const { title, image, links } = Astro.props;
+---
+
+<div class="card">
+	{image && <img src={image.src} alt="" />}
+	<div>
+		{title && <h2>{title}</h2>}
+		<slot />
+		{
+			links &&
+				links.map((link) => (
+					<a
+						href={link.href}
+						target={link.newWindow ? '_blank' : '_self'}
+						rel="noopener noreferrer"
+					>
+						{link.label}
+					</a>
+				))
+		}
+	</div>
+</div>
+
+<style>
+	.card {
+		border: var(--border);
+		border-radius: var(--radius);
+		overflow: hidden;
+	}
+
+	.card > div {
+		padding: 1rem;
+	}
+
+	h2 {
+		margin: 0;
+	}
+
+	img {
+		object-fit: cover;
+		max-width: 100%;
+	}
+</style>

src/components/Footer.astro

@@ -7,7 +7,10 @@ const year = new Date().getFullYear();
 
 <footer>
 	<div class="socials">
-		<a href="https://mastodon.social/@ghalldev" target="_blank"
+		<a
+			href="https://mastodon.social/@ghalldev"
+			target="_blank"
+			rel="noopener noreferrer"
 			><MastodonIcon class="mastodon-icon" width={20} height={20} /> Follow me on
 			Mastodon</a
 		>

src/data/projects.ts

@@ -0,0 +1,34 @@
+import autodockImg from '@assets/projects/autodock.png';
+import keystashImg from '@assets/projects/keystash.png';
+import bggClientImg from '@assets/projects/bgg-client.png';
+
+export interface Project {
+	title: string;
+	description: string;
+	image: ImageMetadata;
+	link: string;
+}
+
+export const projects: Project[] = [
+	{
+		title: 'AutoDock',
+		description:
+			'A MacOS menubar utility for automatically hiding and showing the Dock based on the screen size of the connected displays.',
+		image: autodockImg,
+		link: 'https://github.com/ghall89/AutoDock',
+	},
+	{
+		title: 'KeyStash',
+		description:
+			'A MacOS application for managing software license keys for software purchased outside the Mac App Store.',
+		image: keystashImg,
+		link: 'https://github.com/ghall89/KeyStash',
+	},
+	{
+		title: 'bgg-client',
+		description:
+			'A TypeScript client for working with the BoardGameGeek.com API.',
+		image: bggClientImg,
+		link: 'https://www.npmjs.com/package/bgg-client',
+	},
+];

src/pages/projects.astro

@@ -0,0 +1,47 @@
+---
+import Layout from '@layouts/Layout.astro';
+import Card from '@components/Card.astro';
+import { projects } from '@data/projects';
+
+const title = 'Projects';
+---
+
+<Layout title={title}>
+	<h1>{title}</h1>
+	<div class="projects-grid">
+		{
+			projects.map((project) => (
+				<Card
+					title={project.title}
+					image={project.image}
+					links={[
+						{
+							label: 'More...',
+							href: project.link,
+							newWindow: true,
+						},
+					]}
+				>
+					<div class="project-content">
+						<p>{project.description}</p>
+					</div>
+				</Card>
+			))
+		}
+	</div>
+</Layout>
+
+<style>
+	.projects-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		gap: 1rem;
+	}
+
+	.project-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 8rem;
+	}
+</style>

src/pages/projects.md

@@ -1,36 +0,0 @@
----
-layout: ../layouts/Layout.astro
-title: Projects
----
-
-# Projects
-
-## Mac Apps
-
-### [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.
-
-## Node Packages
-
-### [bgg-client](https://www.npmjs.com/package/bgg-client)
-
-A Typescript client for working with the BoardGameGeek.com API.
-
-### [try-catcher-ts](https://www.npmjs.com/package/try-catcher-ts)
-
-A type-safe try/catch wrapper.
-
-### [tunes-js](https://www.npmjs.com/package/tunes-js)
-
-A Node package for controlling Music.app on macOS.
-
-## Other
-
-### [BGG Search (Raycast Extension)](https://www.raycast.com/graham_hall/board-game-geek)
-
-A Raycast extension for searching [BoardGameGeek.com](https://boardgamegeek.com).

tsconfig.json

@@ -7,7 +7,8 @@
 			"@components/*": ["src/components/*"],
 			"@layouts/*": ["src/layouts/*"],
 			"@styles/*": ["src/styles/*"],
-			"@images/*": ["src/images/*"]
+			"@assets/*": ["src/assets/*"],
+			"@data/*": ["src/data/*"]
 		},
 		"plugins": [{ "name": "@astrojs/ts-plugin" }]
 	}