Add projects page

src/app.css

@@ -123,7 +123,8 @@ a:hover {
 	gap: 0.45rem;
 }
 
-.identity h1 {
+.identity h1,
+.identity .site-name {
 	font-size: 1.25rem;
 	font-weight: 600;
 	letter-spacing: 0.03em;
@@ -190,6 +191,10 @@ a:hover {
 	text-decoration: underline;
 }
 
+.menu a[aria-current='page'] {
+	text-decoration: underline;
+}
+
 .rail-bottom {
 	display: flex;
 	flex-direction: column;
@@ -229,6 +234,20 @@ a:hover {
 	text-decoration: none;
 }
 
+.card {
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	padding: 1.25rem 1.4rem;
+	transition: border-color var(--ease);
+}
+
+@media (hover: hover) {
+	.card:hover {
+		border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
+	}
+}
+
 .page {
 	padding: 2rem clamp(1.5rem, 4vw, 4rem) 4rem;
 }

src/lib/projects.js

@@ -0,0 +1,57 @@
+export const projects = [
+	{
+		name: 'The Subline',
+		href: 'https://subline.leemorgan.dev',
+		description:
+			'A web application to assist restaurant owners in managing their inventories. Providing insights into usage, waste and other details through the use of data.'
+	},
+	{
+		name: 'Suma',
+		href: 'https://suma.leemorgan.dev',
+		description:
+			'A simple web application to help people to budget their money in a simple and approachable manner.'
+	},
+	{
+		name: 'Workout Tracker',
+		href: 'https://workout.leemorgan.dev',
+		description:
+			'Track lifting sessions, compare your last workout, and save history to see progress over time.'
+	},
+	{
+		name: 'Recipes',
+		href: 'https://recipes.leemorgan.dev',
+		description: 'A web application for creating and sharing recipes.'
+	},
+	{
+		name: 'Sudoku Solver',
+		href: 'https://leemorgan.dev/sudoku',
+		description:
+			'Stuck on a particularly difficult game of sudoku? Enter any sudoku puzzle and have it solved immediately.'
+	},
+	{
+		name: 'The Birthday Paradox',
+		href: 'https://leemorgan.dev/birthdayparadox',
+		description: 'A demonstration of the counterintuitive birthday paradox.'
+	},
+	{
+		name: 'BLACKLIST.AERO',
+		href: 'https://www.blacklist.aero/',
+		description:
+			'A site to enable airports to blacklist and check on the status of those who use their services.'
+	},
+	{
+		name: 'Black Plag',
+		href: 'https://github.com/MorganLee909/black-plag',
+		description: 'Website for searching for assignment plagiarism using TF-IDF. Built for 2U bootcamps.'
+	},
+	{
+		name: 'Tetris',
+		href: 'https://leemorgan.dev/tetris',
+		description: 'A tetris clone built in a single HTML file.'
+	},
+	{
+		name: 'Woodworking in 3D',
+		href: 'https://woodworking.leemorgan.dev',
+		description: 'Collection of woodworking projects planned in 3D with ThreeJS.'
+	}
+];

src/routes/+layout.svelte

@@ -1,8 +1,12 @@
 <script>
 	import '../app.css';
 	import favicon from '#lib/assets/favicon.svg';
+	import { page } from '$app/state';
 
 	let { children } = $props();
+
+	const isHome = $derived(page.url.pathname === '/');
+	const isProjects = $derived(page.url.pathname === '/projects');
 </script>
 
 <svelte:head>
@@ -17,7 +21,11 @@
 	<aside class="rail">
 		<div class="rail-top">
 			<div class="identity">
-				<h1><a class="wordmark" href="/">Lee Morgan</a></h1>
+				{#if isHome}
+					<h1><a class="wordmark" href="/">Lee Morgan</a></h1>
+				{:else}
+					<p class="site-name"><a class="wordmark" href="/">Lee Morgan</a></p>
+				{/if}
 				<p class="role">Web developer &amp; systems administrator</p>
 			</div>
 			<p class="status">
@@ -27,7 +35,9 @@
 			<p class="place">Murrells Inlet, SC</p>
 			<nav aria-label="Site">
 				<ul class="menu">
-					<li><a href="/">Projects</a></li>
+					<li>
+						<a href="/projects" aria-current={isProjects ? 'page' : undefined}>Projects</a>
+					</li>
 					<li><a href="/">Blog</a></li>
 					<li><a href="/">Gallery</a></li>
 					<li><a href="/">Currency</a></li>

src/routes/projects/+page.svelte

@@ -0,0 +1,109 @@
+<script>
+	import { projects } from '#lib/projects.js';
+</script>
+
+<svelte:head>
+	<title>Projects — Lee Morgan</title>
+	<meta
+		name="description"
+		content="Selected projects by Lee Morgan, including web applications, tools, and experiments."
+	/>
+</svelte:head>
+
+<section class="projects-page">
+	<h1>Projects</h1>
+	<ul class="projects">
+		{#each projects as project}
+			<li>
+				<a
+					class="card project"
+					href={project.href}
+					rel="noopener noreferrer"
+					target="_blank"
+				>
+					<h2>
+						{project.name}
+						<svg class="icon" viewBox="0 0 12 12" aria-hidden="true">
+							<path d="M3.5 2h6.5v6.5M10 2 2 10" />
+						</svg>
+					</h2>
+					<p>{project.description}</p>
+				</a>
+			</li>
+		{/each}
+	</ul>
+</section>
+
+<style>
+	.projects-page {
+		max-width: 52rem;
+	}
+
+	h1 {
+		font-size: 1.25rem;
+		font-weight: 500;
+		letter-spacing: 0.02em;
+		margin-bottom: 1.5rem;
+	}
+
+	.projects {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-auto-rows: 1fr;
+		gap: 0.85rem;
+	}
+
+	.projects li {
+		display: flex;
+		min-height: 0;
+	}
+
+	.project {
+		display: flex;
+		flex-direction: column;
+		gap: 0.45rem;
+		width: 100%;
+		height: 100%;
+		min-height: 11.5rem;
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.project:hover {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.project h2 {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		font-size: 1.125rem;
+		font-weight: 600;
+		letter-spacing: 0.02em;
+	}
+
+	.project p {
+		color: var(--muted);
+		font-size: 0.9375rem;
+	}
+
+	.icon {
+		width: 0.7rem;
+		height: 0.7rem;
+		stroke: var(--accent);
+		stroke-width: 1.5;
+		fill: none;
+		stroke-linecap: square;
+		flex-shrink: 0;
+	}
+
+	@media (min-width: 800px) {
+		.projects {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+</style>