all projects added

2026-02-07 18:23:04 +00:00 · 2026-02-05 13:07:22 +00:00
parent e8a34ac287
commit bbb0a8a1fb
69 changed files with 1098 additions and 98 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
+import { ProjectListItem } from "@/components/ProjectListItem";
+import { type ProjectEntry, projectList, projects } from "@/projects";
 import { Link, Route, Routes, useParams } from "react-router-dom";
-import { ThemeToggle } from "@/components/theme-toggle";
-import { cn } from "@/lib/utils";
-import { type ProjectMetadata, projectList, projects } from "@/projects";
+import { ThemeToggle } from "./components/theme-toggle";

 function App() {
 	return (
@@ -16,20 +16,28 @@ function App() {
 export default App;

 function Home() {
+	const isDevMode = import.meta.env.VITE_PUBLIC_DEV === "1";
+	const sortedProjects: ProjectEntry[] = [...projectList].sort(
+		(a, b) =>
+			parseDate(b.metadata.date).getTime() -
+			parseDate(a.metadata.date).getTime(),
+	);
+
 	return (
 		<div className="min-h-dvh flex flex-col items-center justify-center gap-8 text-2xl px-6 py-10">
 			<div className="flex flex-col items-center gap-4">
-				<h1 className="picnic text-8xl text-balance">Oliver Bryan</h1>
-				<ThemeToggle />
+				<h1 className="picnic text-7xl text-balance">Oliver Bryan</h1>
 			</div>
-			<div className="w-full max-w-2xl flex flex-col gap-4">
-				{projectList.map((project) => (
+			<div className="w-full max-w-5xl grid grid-cols-1 md:grid-cols-2 gap-4">
+				{sortedProjects.map((project) => (
 					<ProjectListItem
 						key={project.metadata.slug}
 						metadata={project.metadata}
+						isDevMode={isDevMode}
 					/>
 				))}
 			</div>
+			<ThemeToggle />
 		</div>
 	);
 }
@@ -45,77 +53,50 @@ function ProjectRoute() {
 function NotFound() {
 	return (
 		<div className="min-h-dvh flex flex-col items-center justify-center gap-4 text-2xl">
-			<h1 className="text-4xl text-ayu-accent text-balance">Not found</h1>
-			<Link className="text-ayu-accent underline" to="/">
+			<h1 className="text-4xl text-accent text-balance">Not found</h1>
+			<Link className="text-accent underline" to="/">
 				Go home
 			</Link>
 		</div>
 	);
 }

-type ProjectListItemProps = {
-	metadata: ProjectMetadata;
-	isDevMode?: boolean;
-	isHidden?: boolean;
-};
+function parseDate(dateStr: string): Date {
+	const lower = dateStr.toLowerCase();

-function ProjectListItem({
-	metadata,
-	isDevMode = false,
-	isHidden = false,
-}: ProjectListItemProps) {
-	const tags = metadata.tags ? [...metadata.tags].sort() : [];
-	const isDevHidden = isDevMode && isHidden;
+	if (lower.includes("q1")) return new Date("2023-01-01");
+	if (lower.includes("q2")) return new Date("2023-04-01");
+	if (lower.includes("q3")) return new Date("2023-07-01");
+	if (lower.includes("q4")) return new Date("2023-10-01");

-	return (
-		<Link
-			to={`/projects/${metadata.slug}`}
-			className={cn(
-				"group block flex flex-col justify-between rounded-md transition-colors duration-200",
-				isDevHidden
-					? "border border-dashed border-ayu-accent hover:border-ayu-accent"
-					: "border-2 border-ayu-gutter-dim hover:border-ayu-gutter",
-			)}
-			data-tags={tags.join(",")}
-		>
-			<div className="flex gap-4 p-4 pb-0">
-				<div className="w-16 h-16 flex-shrink-0">
-					{metadata.image ? (
-						<img
-							src={metadata.image}
-							alt={`${metadata.title} icon`}
-							className="w-full h-full object-cover rounded"
-						/>
-					) : (
-						<div className="w-full h-full border border-ayu-gutter rounded" />
-					)}
-				</div>
-				<div className="flex flex-col gap-2">
-					<h3 className="text-lg font-500 -mb-2 -mt-1 text-ayu-accent text-balance">
-						{metadata.title}
-					</h3>
-					<p className="text-sm text-ayu-fg text-pretty">
-						{metadata.description}
-					</p>
-					{tags.length > 0 ? (
-						<div className="flex gap-1.5 text-xs flex-wrap leading-3 items-center mb-1 no-select">
-							{tags.map((tag) => (
-								<span
-									key={tag}
-									className="flex items-center text-ayu-fg font-500 rounded-md border border-ayu-gutter px-1.5 py-0.5"
-								>
-									{tag}
-								</span>
-							))}
-						</div>
-					) : null}
-				</div>
-			</div>
-			<div className="w-full flex justify-end p-2 pt-1">
-				<p className="text-xs text-ayu-gutter group-hover:text-ayu-accent">
-					{metadata.date}
-				</p>
-			</div>
-		</Link>
-	);
+	const months: Record<string, number> = {
+		january: 0,
+		february: 1,
+		march: 2,
+		april: 3,
+		may: 4,
+		june: 5,
+		july: 6,
+		august: 7,
+		september: 8,
+		october: 9,
+		november: 10,
+		december: 11,
+	};
+
+	for (const [monthName, monthIndex] of Object.entries(months)) {
+		if (lower.includes(monthName)) {
+			const yearMatch = dateStr.match(/\b(20\d{2})\b/);
+			if (yearMatch) {
+				return new Date(Number.parseInt(yearMatch[1], 10), monthIndex, 1);
+			}
+		}
+	}
+
+	const yearMatch = dateStr.match(/\b(20\d{2})\b/);
+	if (yearMatch) {
+		return new Date(Number.parseInt(yearMatch[1], 10), 0, 1);
+	}
+
+	return new Date(0);
 }
--- a/src/components/ProjectListItem.tsx
+++ b/src/components/ProjectListItem.tsx
@@ -0,0 +1,64 @@
+import { cn } from "@/lib/utils";
+import type { ProjectMetadata } from "@/projects";
+import { Link } from "react-router-dom";
+
+export function ProjectListItem({
+	metadata,
+	isDevMode = false,
+}: {
+	metadata: ProjectMetadata;
+	isDevMode?: boolean;
+}) {
+	const tags = metadata.tags ? [...metadata.tags].sort() : [];
+	if (metadata.hidden && !isDevMode) return null;
+
+	return (
+		<Link
+			to={`/projects/${metadata.slug}`}
+			className={cn(
+				"group block flex flex-col justify-between rounded-md transition-colors duration-200 border-2 hover:border-accent",
+				isDevMode && metadata.hidden
+					? "border-dashed border-accent"
+					: "border-gutter-dim",
+			)}
+			data-tags={tags.join(",")}
+		>
+			<div className="flex gap-4 p-4 pb-0">
+				<div className="w-16 h-16 flex-shrink-0">
+					{metadata.image ? (
+						<img
+							src={metadata.image}
+							alt={`${metadata.title} icon`}
+							className="w-full h-full object-cover rounded"
+						/>
+					) : (
+						<div className="w-full h-full border border-gutter rounded" />
+					)}
+				</div>
+				<div className="flex flex-col gap-2">
+					<h3 className="text-lg font-500 -mb-2 -mt-1 text-accent text-balance">
+						{metadata.title}
+					</h3>
+					<p className="text-sm text-fg text-pretty">{metadata.description}</p>
+					{tags.length > 0 ? (
+						<div className="flex gap-1.5 text-xs flex-wrap leading-3 items-center mb-1 no-select">
+							{tags.map((tag) => (
+								<span
+									key={tag}
+									className="flex items-center text-fg font-500 rounded-md border border-gutter px-1.5 py-0.5"
+								>
+									{tag}
+								</span>
+							))}
+						</div>
+					) : null}
+				</div>
+			</div>
+			<div className="w-full flex justify-end p-2 pt-1">
+				<p className="text-xs text-gutter group-hover:text-accent">
+					{metadata.date}
+				</p>
+			</div>
+		</Link>
+	);
+}
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -1,8 +1,8 @@
-import { Moon, Sun } from "@nsmr/pixelart-react";
 import { useTheme } from "@/components/theme-provider";
 import { Button } from "@/components/ui/button";
+import { Moon, Sun } from "@nsmr/pixelart-react";

-function ThemeToggle() {
+export function ThemeToggle() {
 	const { resolvedTheme, setTheme } = useTheme();
 	const isDark = resolvedTheme === "dark";

@@ -16,5 +16,3 @@ function ThemeToggle() {
 		</Button>
 	);
 }
-
-export { ThemeToggle };
--- a/src/projects/factor-e/index.tsx
+++ b/src/projects/factor-e/index.tsx
@@ -0,0 +1,104 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "factor-e",
+	description:
+		"Isometric factory sandbox prototype in C++/raylib with procedural worlds, tile building, inventory & tools.",
+	date: "August 2025",
+	slug: "factor-e",
+	image: "/factor-e-icon.svg",
+	github: "https://github.com/hex248/factor-e",
+	hidden: false,
+	tags: ["Game", "C++", "OpenGL", "CMake", "Pixel Art"],
+	type: "personal",
+};
+
+export function FactorEProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="text-pretty">
+				"factor-e" is an isometric factory sandbox prototype I built to learn
+				C++ and{" "}
+				<a
+					href="https://www.raylib.com/"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="link-project-page"
+				>
+					raylib
+				</a>
+				. Inspired by Minecraft and{" "}
+				<a
+					href="https://store.steampowered.com/app/3433610/Terrafactor/"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="link-project-page"
+				>
+					Terrafactor
+				</a>
+				, it explores tile-based building, inventory management and procedural
+				world generation.
+			</p>
+
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Key features
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Isometric rendering with my own pixel art</li>
+						<li>Procedural world generation using Perlin noise</li>
+						<li>Simple tile place/destroy loop</li>
+						<li>Basic inventory and tool system</li>
+						<li>Dev/debug overlay</li>
+						<li>Cross-platform builds (Windows + Linux)</li>
+						<li>
+							<span className="text-green-500">Status:</span> active prototype
+						</li>
+					</ul>
+				</div>
+
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Technologies
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>C++</li>
+						<li>raylib (OpenGL)</li>
+						<li>CMake</li>
+						<li>Perlin noise generation</li>
+						<li>Aseprite</li>
+						<li>Engine-less game development</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Demo</h2>
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+					<Demo
+						image="/images/factor-e/world-gen.gif"
+						title="World generation"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/factor-e/pixel-art.png"
+						title="Pixel art"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/factor-e/place-destroy.gif"
+						title="Place/destroy loop"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/factor-e/debug-overlay.gif"
+						title="Dev/debug overlay"
+						type="boxed"
+					/>
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}
--- a/src/projects/flackie/index.tsx
+++ b/src/projects/flackie/index.tsx
@@ -0,0 +1,77 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "flackie",
+	description:
+		"A portable FLAC player built with C++ and Python for Raspberry Pi. Custom UI, hardware controls, e-ink display, and a 3D printed case.",
+	date: "October 2025",
+	slug: "flackie",
+	image: "/flackie-icon.svg",
+	github: "https://github.com/hex248/flackie",
+	hidden: true,
+	tags: [
+		"Raspberry Pi",
+		"Python",
+		"C++",
+		"CMake",
+		"Electronics",
+		"Pillow",
+		"Image Generation",
+	],
+	type: "personal",
+};
+
+export function FlackieProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="text-pretty">
+				"flackie" is a portable FLAC music player I built using a Raspberry Pi
+				Zero 2 W, a small e-ink display, and some physical buttons. The device
+				features a custom Python UI for browsing and playing FLAC files. The
+				case was designed in CAD and 3D printed to house all the components
+				neatly.
+			</p>
+
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Key features
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Portable design with a compact form factor</li>
+						<li>Custom Python UI for easy navigation</li>
+						<li>Physical buttons for playback control</li>
+						<li>3D printed case</li>
+						<li>Supports FLAC audio playback</li>
+					</ul>
+				</div>
+
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Technologies
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>C++</li>
+						<li>CMake</li>
+						<li>Python</li>
+						<li>Pillow</li>
+						<li>Raspberry Pi Zero 2 W</li>
+						<li>E-ink display</li>
+						<li>3D printing</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Pictures</h2>
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+					<Demo image="/images/flackie/1.png" title="1" type="boxed" />
+					<Demo image="/images/flackie/2.png" title="2" type="boxed" />
+					<Demo image="/images/flackie/3.png" title="3" type="boxed" />
+					<Demo image="/images/flackie/4.png" title="4" type="boxed" />
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}
--- a/src/projects/glimpse/index.tsx
+++ b/src/projects/glimpse/index.tsx
@@ -0,0 +1,104 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "glimpse",
+	description: "Simple social media app inspired by early Instagram.",
+	date: "May 2025",
+	slug: "glimpse",
+	image: "/glimpse-icon.svg",
+	url: "https://glimpse.ob248.com",
+	github: "https://github.com/hex248/glimpse",
+	hidden: false,
+	tags: [
+		"Web",
+		"React",
+		"TypeScript",
+		"PostgreSQL",
+		"Blob Storage",
+		"Databases",
+		"OAuth2",
+	],
+	type: "personal",
+};
+
+export function GlimpseProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="mb-4 text-pretty">
+				"glimpse" is a full-stack social app for sharing photos with friends and
+				building real community. Early Instagram and tumblr were huge
+				inspirations, no influencers and brands, just keeping up with your
+				friends and family. Sign in with Google, and immediately access a
+				dynamic feed, view and comment on posts. Choose your profile colour, and
+				enable push notifications for new posts, comments, and friend requests.
+			</p>
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="bg-highlight p-4 rounded">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Key features
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Photo uploads with caption and cropping function</li>
+						<li>User profiles with customisable colour themes</li>
+						<li>Dynamic, server-rendered feed of friends' photos</li>
+						<li>Commenting on posts</li>
+						<li>User search</li>
+						<li>Push notifications</li>
+					</ul>
+				</div>
+
+				<div className="bg-highlight p-4 rounded">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Technologies
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Next.js + TypeScript</li>
+						<li>Prisma ORM + PostgreSQL</li>
+						<li>Tailwind CSS</li>
+						<li>Google OAuth with NextAuth.js</li>
+						<li>Web Push API</li>
+						<li>Next.js server-side rendering and API routes</li>
+						<li>Progressive Web App (PWA)</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Screenshots</h2>
+				<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+					<Demo
+						image="/images/glimpse/feed.png"
+						title="Feed view"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/glimpse/crop.png"
+						title="Share - write a caption + crop"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/glimpse/comments.png"
+						title="Comments and interactions"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/glimpse/profile.png"
+						title="Profile (custom colours)"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/glimpse/settings.png"
+						title="Settings"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/glimpse/search.png"
+						title="User search and discovery"
+						type="boxed"
+					/>
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}
--- a/src/projects/good-morning/index.tsx
+++ b/src/projects/good-morning/index.tsx
@@ -0,0 +1,106 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "good morning!",
+	description:
+		"An app for couples or friends to share daily notices with songs and photos",
+	date: "October 2025",
+	slug: "good-morning",
+	image: "/good-morning-icon.png",
+	url: "https://gm.ob248.com",
+	github: "https://github.com/hex248/good-morning",
+	hidden: false,
+	tags: [
+		"Web",
+		"React",
+		"TypeScript",
+		"Go",
+		"PostgreSQL",
+		"AWS S3",
+		"Databases",
+		"OAuth2",
+		"Spotify API",
+	],
+	type: "personal",
+};
+
+export function GoodMorningProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="text-pretty">
+				"good morning!" is a web app I built to help couples or friends share
+				daily notices, songs, and photos with each other. It features a simple
+				and intuitive interface for sending and receiving messages, along with
+				support for photo attachments. The app is built with React and
+				TypeScript on the frontend, and Go with PostgreSQL on the backend. Media
+				files are stored securely using Cloudflare R2 (AWS S3).
+			</p>
+
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Key features
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Create daily notices with photos and Spotify songs</li>
+						<li>Simple user interface</li>
+						<li>Google OAuth2 authentication for user accounts</li>
+					</ul>
+				</div>
+
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Technologies
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>React</li>
+						<li>TypeScript</li>
+						<li>Go</li>
+						<li>PostgreSQL</li>
+						<li>Cloudflare R2 (AWS S3)</li>
+						<li>Spotify API</li>
+						<li>OAuth2 Authentication</li>
+						<li>Progressive Web App (PWA)</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Demo</h2>
+				<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+					<Demo
+						image="/images/good-morning/notice.png"
+						title="Notice from partner"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/good-morning/no-notice.png"
+						title="No notice from partner"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/good-morning/create-notice.png"
+						title="Create notice"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/good-morning/login-with-google.png"
+						title="Login with Google"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/good-morning/partner-pairing.png"
+						title="Partner pairing"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/good-morning/me.png"
+						title="'Me' page"
+						type="boxed"
+					/>
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}
--- a/src/projects/index.ts
+++ b/src/projects/index.ts
@@ -1,5 +1,20 @@
 import type { ComponentType } from "react";
+import { FactorEProject, metadata as factorEMetadata } from "./factor-e";
+import { FlackieProject, metadata as flackieMetadata } from "./flackie";
+import { GlimpseProject, metadata as glimpseMetadata } from "./glimpse";
+import {
+	GoodMorningProject,
+	metadata as goodMorningMetadata,
+} from "./good-morning";
+import { MizuProject, metadata as mizuMetadata } from "./mizu";
+import { PrayerbudProject, metadata as prayerbudMetadata } from "./prayerbud";
+import { ShleepProject, metadata as shleepMetadata } from "./shleep";
 import { SprintProject, metadata as sprintMetadata } from "./sprint";
+import {
+	WatercoolerProject,
+	metadata as watercoolerMetadata,
+} from "./watercooler";
+import { WiskatronProject, metadata as wiskatronMetadata } from "./wiskatron";

 export type ProjectMetadata = {
 	title: string;
@@ -20,10 +35,46 @@ export type ProjectEntry = {
 };

 export const projects = {
+	[factorEMetadata.slug]: {
+		metadata: factorEMetadata,
+		Component: FactorEProject,
+	},
+	[flackieMetadata.slug]: {
+		metadata: flackieMetadata,
+		Component: FlackieProject,
+	},
+	[glimpseMetadata.slug]: {
+		metadata: glimpseMetadata,
+		Component: GlimpseProject,
+	},
+	[goodMorningMetadata.slug]: {
+		metadata: goodMorningMetadata,
+		Component: GoodMorningProject,
+	},
+	[mizuMetadata.slug]: {
+		metadata: mizuMetadata,
+		Component: MizuProject,
+	},
+	[prayerbudMetadata.slug]: {
+		metadata: prayerbudMetadata,
+		Component: PrayerbudProject,
+	},
+	[shleepMetadata.slug]: {
+		metadata: shleepMetadata,
+		Component: ShleepProject,
+	},
 	[sprintMetadata.slug]: {
 		metadata: sprintMetadata,
 		Component: SprintProject,
 	},
+	[watercoolerMetadata.slug]: {
+		metadata: watercoolerMetadata,
+		Component: WatercoolerProject,
+	},
+	[wiskatronMetadata.slug]: {
+		metadata: wiskatronMetadata,
+		Component: WiskatronProject,
+	},
 } satisfies Record<string, ProjectEntry>;

 export const projectList = Object.values(projects);
--- a/src/projects/mizu/index.tsx
+++ b/src/projects/mizu/index.tsx
@@ -0,0 +1,134 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "MIZU",
+	description:
+		"A discord bot card trading and collection game. (Currently inactive, 4000+ players) ",
+	date: "2021 - 2024",
+	slug: "mizu",
+	image: "/mizu-icon.svg",
+	hidden: false,
+	tags: [
+		"Node.js",
+		"TypeScript",
+		"PostgreSQL",
+		"AWS S3",
+		"Discord API",
+		"Database",
+	],
+	type: "personal",
+};
+
+export function MizuProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="text-pretty">
+				I led a four-person team to create MIZU, a popular anime trading card
+				game on Discord. In this role, I was responsible for the full lifecycle
+				of the application: designing the core architecture, building the
+				application with Node.js and TypeScript, and deploying it on a
+				self-managed VPS. We successfully scaled to serve over 4,000 players.
+				Although MIZU is no longer active, it was a significant experience in
+				leading a team and scaling a live application.
+			</p>
+
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Technologies
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Node.js</li>
+						<li>TypeScript</li>
+						<li>Express.js</li>
+						<li>Discord.js</li>
+						<li>PostgreSQL</li>
+						<li>AWS S3</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Gameplay</h2>
+				<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+					<Demo
+						image="/images/mizu/card.png"
+						title="Card (Large image)"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/mizu/card-fighter.png"
+						title="Card (Fighter)"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/mizu/card-details.png"
+						title="Card (Details)"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/mizu/collection1.png"
+						title="Collection"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/mizu/collection2.png"
+						title="Collection with sorting and filtering"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/mizu/current-trade.png"
+						title="Ongoing Trade"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/mizu/complete-trade.png"
+						title="Completed Trade"
+						type="boxed"
+					/>
+					<Demo image="/images/mizu/forage.png" title="Forage" type="boxed" />
+					<Demo
+						image="/images/mizu/inventory.png"
+						title="Inventory"
+						type="boxed"
+					/>
+					<Demo image="/images/mizu/quests.png" title="Quests" type="boxed" />
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">
+					Pre-Production
+				</h2>
+				<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+					<Demo
+						image="/images/mizu/forage-design.png"
+						title="Forage Design"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/mizu/forage-locations.png"
+						title="Forage Locations"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/mizu/quests-planning.png"
+						title="Quests Planning"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/mizu/update-planning.png"
+						title="Update Management"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/mizu/pack-planning.png"
+						title="Pack System"
+						type="boxed"
+					/>
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}
--- a/src/projects/prayerbud/index.tsx
+++ b/src/projects/prayerbud/index.tsx
@@ -0,0 +1,100 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "PrayerBud",
+	description:
+		"A faith-based social platform facilitating sharing of support and prayers within communities.",
+	date: "February 2025 - Present",
+	slug: "prayerbud",
+	image: "/prayerbud-icon.svg",
+	url: "https://prayerbud.co.uk",
+	hidden: false,
+	tags: ["Web", "React", "TypeScript", "PostgreSQL", "OAuth2", "Databases"],
+	type: "professional",
+};
+
+export function PrayerbudProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<div className="space-y-4 mb-4 text-pretty">
+				<p>
+					Pray Together and Grow Together: Join a diverse community of
+					individuals from around the world who are passionate about prayer and
+					spiritual growth. Create and share prayer requests with your PrayerBud
+					community who are ready to offer support, encouragement, and heartfelt
+					prayers.
+				</p>
+				<p>
+					For prayer teams or churches, the app offers a streamlined way to
+					manage and organise prayer requests, ensuring that no request goes
+					unnoticed.
+				</p>
+			</div>
+
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="bg-highlight p-4 rounded">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Key features
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Create and manage prayer networks</li>
+						<li>Manage prayer communities</li>
+						<li>Intimate engagement with friends and family</li>
+						<li>Admin dashboard for managing users and user content</li>
+						<li>Responsive design for mobile and desktop</li>
+					</ul>
+				</div>
+
+				<div className="bg-highlight p-4 rounded">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Technologies
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Next.js</li>
+						<li>React</li>
+						<li>TypeScript</li>
+						<li>PostgreSQL</li>
+						<li>Node.js</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Screenshots</h2>
+				<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+					<Demo
+						image="/images/prayerbud/pre-login.png"
+						title="Front page / pre-login"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/prayerbud/post-login.png"
+						title="Post-login"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/prayerbud/create-network.png"
+						title="Create Network"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/prayerbud/welcome-to-network.png"
+						title="Welcome to your Network"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/prayerbud/prayer-card.png"
+						title="Create Prayer Card"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/prayerbud/dashboard.png"
+						title="Admin Dashboard"
+						type="boxed"
+					/>
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}
--- a/src/projects/shared/Demo.tsx
+++ b/src/projects/shared/Demo.tsx
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
 import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";

 type DemoProps = {
 	image: string;
@@ -13,8 +13,7 @@ export function Demo({ image, title, type = "plain", children }: DemoProps) {
 		<figure
 			className={cn(
 				"w-full",
-				type === "boxed" &&
-					"border border-ayu-gutter rounded bg-ayu-highlight p-2",
+				type === "boxed" && "border border-gutter rounded bg-highlight p-2",
 			)}
 		>
 			<img
@@ -22,7 +21,7 @@ export function Demo({ image, title, type = "plain", children }: DemoProps) {
 				alt={title}
 				className={cn("w-full", type === "boxed" ? "rounded" : "rounded-md")}
 			/>
-			<figcaption className="mt-2 text-sm text-ayu-gutter text-pretty">
+			<figcaption className="mt-2 text-sm text-gutter text-pretty">
 				{title}
 				{children}
 			</figcaption>
--- a/src/projects/shared/ProjectPage.tsx
+++ b/src/projects/shared/ProjectPage.tsx
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
 import type { ProjectMetadata } from "@/projects";
+import type { ReactNode } from "react";

 type ProjectPageProps = {
 	metadata: ProjectMetadata;
@@ -13,7 +13,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 		<div className="mx-auto w-full max-w-4xl px-6 py-10 text-md">
 			<div className="flex flex-wrap items-start justify-between gap-6 mb-4">
 				<div className="flex flex-col gap-2">
-					<h1 className="text-2xl text-ayu-accent text-balance">
+					<h1 className="text-2xl text-accent text-balance">
 						{metadata.title}
 					</h1>
 					{metadata.image ? (
@@ -23,7 +23,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 							className="w-24 h-24 rounded mb-2"
 						/>
 					) : (
-						<div className="w-24 h-24 mb-2 border border-ayu-gutter rounded" />
+						<div className="w-24 h-24 mb-2 border border-gutter rounded" />
 					)}
 				</div>
 				<div className="flex flex-col items-end gap-2">
@@ -40,7 +40,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 				</div>
 			</div>

-			<p className="text-sm text-ayu-gutter mb-2">
+			<p className="text-sm text-gutter mb-2">
 				{metadata.date}
 				{metadata.github ? (
 					<>
@@ -50,7 +50,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 							href={metadata.github}
 							target="_blank"
 							rel="noopener noreferrer"
-							className="text-ayu-green-500 hover:underline"
+							className="text-green-500 hover:underline"
 						>
 							Source Code
 						</a>
@@ -63,7 +63,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 					{tags.map((tag: string) => (
 						<span
 							key={tag}
-							className="flex items-center text-ayu-gutter font-500 rounded-md border border-ayu-gutter px-1.5 py-1"
+							className="flex items-center text-gutter font-500 rounded-md border border-gutter px-1.5 py-1"
 						>
 							{tag}
 						</span>
@@ -73,7 +73,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {

 			<div className="text-pretty">{children}</div>

-			<p className="text-center text-md text-ayu-gutter mt-8 mb-4">
+			<p className="text-center text-md text-gutter mt-8 mb-4">
 				Oliver Bryan - {metadata.date}
 				{metadata.github ? (
 					<>
@@ -83,7 +83,7 @@ export function ProjectPage({ metadata, children }: ProjectPageProps) {
 							href={metadata.github}
 							target="_blank"
 							rel="noopener noreferrer"
-							className="text-ayu-green-500 hover:underline"
+							className="text-green-500 hover:underline"
 						>
 							Source Code
 						</a>
--- a/src/projects/shleep/index.tsx
+++ b/src/projects/shleep/index.tsx
@@ -0,0 +1,51 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "Shleep",
+	description:
+		"A couch co-op base defense game where you protect a sleepign child from nightmares.",
+	date: "February - June 2023",
+	slug: "shleep",
+	image: "/shleep-icon.svg",
+	url: "https://bigbootstudio.itch.io/shleep",
+	hidden: true,
+	tags: ["Unity", "C#", "HLSL", "Shader Graph", "Visual Effects Graph"],
+	type: "personal",
+};
+
+export function ShleepProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="text-pretty">
+				Shleep is a couch co-op base defense game where you can build towers to
+				help aid you and your party to protect a sleeping child from nightmares.
+			</p>
+
+			<div className="bg-highlight p-4 rounded mt-4">
+				<h2 className="text-lg text-green-500 mb-2 text-balance">
+					Technologies
+				</h2>
+				<ul className="list-disc list-inside space-y-1 text-pretty">
+					<li>Unity</li>
+					<li>C#</li>
+					<li>HLSL</li>
+					<li>Shader Graph</li>
+					<li>Visual Effects Graph</li>
+				</ul>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Screenshots</h2>
+				<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+					<Demo image="/images/shleep/1.png" title="1" type="boxed" />
+					<Demo image="/images/shleep/2.png" title="2" type="boxed" />
+					<Demo image="/images/shleep/3.png" title="3" type="boxed" />
+					<Demo image="/images/shleep/4.png" title="4" type="boxed" />
+					<Demo image="/images/shleep/5.png" title="5" type="boxed" />
+					<Demo image="/images/shleep/6.png" title="6" type="boxed" />
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}
--- a/src/projects/sprint/index.tsx
+++ b/src/projects/sprint/index.tsx
@@ -36,8 +36,8 @@ export function SprintProject() {
 			</p>

 			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div className="bg-ayu-highlight p-4 rounded">
-					<h2 className="text-lg text-ayu-green-500 mb-2 text-balance">
+				<div className="bg-highlight p-4 rounded">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Key features
 					</h2>
 					<ul className="list-disc list-inside space-y-1 text-pretty">
@@ -54,8 +54,8 @@ export function SprintProject() {
 					</ul>
 				</div>

-				<div className="bg-ayu-highlight p-4 rounded">
-					<h2 className="text-lg text-ayu-green-500 mb-2 text-balance">
+				<div className="bg-highlight p-4 rounded">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
 						Technologies
 					</h2>
 					<ul className="list-disc list-inside space-y-1 text-pretty">
@@ -70,9 +70,7 @@ export function SprintProject() {
 			</div>

 			<div className="mt-4">
-				<h2 className="text-2xl text-ayu-accent mb-3 text-balance">
-					Architecture
-				</h2>
+				<h2 className="text-2xl text-accent mb-3 text-balance">Architecture</h2>
 				<p className="mb-4 text-pretty">
 					Sprint uses a monorepo structure with three packages: a shared package
 					containing database schemas and types, a Bun.serve API with Drizzle
@@ -82,9 +80,7 @@ export function SprintProject() {
 			</div>

 			<div className="mt-4">
-				<h2 className="text-2xl text-ayu-accent mb-3 text-balance">
-					Screenshots
-				</h2>
+				<h2 className="text-2xl text-accent mb-3 text-balance">Screenshots</h2>
 				<div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 gap-4">
 					<Demo
 						image="/images/sprint/landing-1.png"
--- a/src/projects/watercooler/index.tsx
+++ b/src/projects/watercooler/index.tsx
@@ -0,0 +1,69 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "Watercooler",
+	description:
+		"Virtual office space for remote teams allowing quick questions and spontaneous chats.",
+	date: "March 2025",
+	slug: "watercooler",
+	image: "/watercooler-icon.svg",
+	hidden: true,
+	tags: [
+		"Web",
+		"React",
+		"TypeScript",
+		"WebRTC",
+		"LiveKit",
+		"PostgreSQL",
+		"OAuth2",
+		"Databases",
+	],
+	type: "personal",
+};
+
+export function WatercoolerProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="text-pretty">watercooler description here</p>
+
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Key features
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>feature1</li>
+						<li>
+							<span className="text-green-500">Status:</span> active prototype
+						</li>
+					</ul>
+				</div>
+
+				<div className="bg-highlight p-4 rounded mt-4">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Technologies
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>LiveKit (WebRTC)</li>
+						<li>Next.js + TypeScript</li>
+						<li>Prisma ORM + PostgreSQL</li>
+						<li>Tailwind CSS</li>
+						<li>Google OAuth with NextAuth.js</li>
+						<li>Next.js server-side rendering and API routes</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Screenshots</h2>
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+					<Demo image="/images/watercooler/office.png" title="Office space" />
+					<Demo image="/images/watercooler/idk.png" title="idk" />
+					<Demo image="/images/watercooler/idk.png" title="idk" />
+					<Demo image="/images/watercooler/idk.png" title="idk" />
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}
--- a/src/projects/wiskatron/index.tsx
+++ b/src/projects/wiskatron/index.tsx
@@ -0,0 +1,64 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "Wiskatron",
+	description: "Spotify listening activity with dynamic visuals",
+	date: "February 2024",
+	slug: "wiskatron",
+	image: "/wiskatron-icon.svg",
+	github: "https://github.com/hex248/wiskatron",
+	hidden: false,
+	tags: ["Web", "React", "TypeScript", "Spotify API", "OAuth2"],
+	type: "personal",
+};
+
+export function WiskatronProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="mb-4 text-pretty">
+				Spotify listening activity web app with dynamic visuals, built with
+				Next.js.
+			</p>
+
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="bg-highlight p-4 rounded">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Key features
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Live fetch from Spotify API</li>
+						<li>OAuth 2.0 authentication</li>
+						<li>Dynamic colour palette extraction</li>
+						<li>Smooth song transitions</li>
+					</ul>
+				</div>
+
+				<div className="bg-highlight p-4 rounded">
+					<h2 className="text-lg text-green-500 mb-2 text-balance">
+						Technologies
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Next.js + TypeScript</li>
+						<li>Spotify API</li>
+						<li>OAuth 2.0 with fastify</li>
+						<li>Next.js server-side rendering and API routes</li>
+						<li>Colour palette extraction with node-vibrant</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Screenshots</h2>
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+					<Demo image="/images/wiskatron/1.png" title="Example 1" />
+					<Demo image="/images/wiskatron/2.png" title="Example 2" />
+					<Demo image="/images/wiskatron/3.png" title="Example 3" />
+					<Demo image="/images/wiskatron/4.png" title="Example 4" />
+					<Demo image="/images/wiskatron/5.png" title="Example 5" />
+					<Demo image="/images/wiskatron/6.png" title="Example 6" />
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}