project setup

src/App.tsx

@@ -1,16 +1,121 @@
+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";
 
 function App() {
 	return (
-		<div
-			className={
-				"min-h-screen flex flex-col items-center justify-center gap-4 text-2xl"
-			}
-		>
-			<h1 className={"picnic text-8xl"}>Oliver Bryan</h1>
-			<ThemeToggle />
-		</div>
+		<Routes>
+			<Route path="/" element={<Home />} />
+			<Route path="/projects/:slug" element={<ProjectRoute />} />
+			<Route path="*" element={<NotFound />} />
+		</Routes>
 	);
 }
 
 export default App;
+
+function Home() {
+	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 />
+			</div>
+			<div className="w-full max-w-2xl flex flex-col gap-4">
+				{projectList.map((project) => (
+					<ProjectListItem
+						key={project.metadata.slug}
+						metadata={project.metadata}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function ProjectRoute() {
+	const { slug } = useParams();
+	if (!slug || !projects[slug]) return <NotFound />;
+
+	const { Component } = projects[slug];
+	return <Component />;
+}
+
+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="/">
+				Go home
+			</Link>
+		</div>
+	);
+}
+
+type ProjectListItemProps = {
+	metadata: ProjectMetadata;
+	isDevMode?: boolean;
+	isHidden?: boolean;
+};
+
+function ProjectListItem({
+	metadata,
+	isDevMode = false,
+	isHidden = false,
+}: ProjectListItemProps) {
+	const tags = metadata.tags ? [...metadata.tags].sort() : [];
+	const isDevHidden = isDevMode && isHidden;
+
+	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>
+	);
+}

src/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 import { ThemeProvider } from "@/components/theme-provider";
 import "./index.css";
 import App from "./App.tsx";
@@ -9,7 +10,9 @@ if (!root) throw new Error("Failed to find the root element");
 createRoot(root).render(
 	<StrictMode>
 		<ThemeProvider>
-			<App />
+			<BrowserRouter>
+				<App />
+			</BrowserRouter>
 		</ThemeProvider>
 	</StrictMode>,
 );

src/projects/index.ts

@@ -0,0 +1,29 @@
+import type { ComponentType } from "react";
+import { SprintProject, metadata as sprintMetadata } from "./sprint";
+
+export type ProjectMetadata = {
+	title: string;
+	description: string;
+	date: string;
+	slug: string;
+	image?: string | null;
+	url?: string;
+	github?: string;
+	hidden: boolean;
+	tags?: string[];
+	type: string;
+};
+
+export type ProjectEntry = {
+	metadata: ProjectMetadata;
+	Component: ComponentType;
+};
+
+export const projects = {
+	[sprintMetadata.slug]: {
+		metadata: sprintMetadata,
+		Component: SprintProject,
+	},
+} satisfies Record<string, ProjectEntry>;
+
+export const projectList = Object.values(projects);

src/projects/shared/Demo.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+type DemoProps = {
+	image: string;
+	title: string;
+	type?: "boxed" | "plain";
+	children?: ReactNode;
+};
+
+export function Demo({ image, title, type = "plain", children }: DemoProps) {
+	return (
+		<figure
+			className={cn(
+				"w-full",
+				type === "boxed" &&
+					"border border-ayu-gutter rounded bg-ayu-highlight p-2",
+			)}
+		>
+			<img
+				src={image}
+				alt={title}
+				className={cn("w-full", type === "boxed" ? "rounded" : "rounded-md")}
+			/>
+			<figcaption className="mt-2 text-sm text-ayu-gutter text-pretty">
+				{title}
+				{children}
+			</figcaption>
+		</figure>
+	);
+}

src/projects/shared/ProjectPage.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode } from "react";
+import type { ProjectMetadata } from "@/projects";
+
+type ProjectPageProps = {
+	metadata: ProjectMetadata;
+	children: ReactNode;
+};
+
+export function ProjectPage({ metadata, children }: ProjectPageProps) {
+	const tags = metadata.tags ? [...metadata.tags].sort() : [];
+
+	return (
+		<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">
+						{metadata.title}
+					</h1>
+					{metadata.image ? (
+						<img
+							src={metadata.image}
+							alt={`${metadata.title} project icon`}
+							className="w-24 h-24 rounded mb-2"
+						/>
+					) : (
+						<div className="w-24 h-24 mb-2 border border-ayu-gutter rounded" />
+					)}
+				</div>
+				<div className="flex flex-col items-end gap-2">
+					{metadata.url ? (
+						<a
+							href={metadata.url}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="link-project-page inline-block text-sm"
+						>
+							Try {metadata.title}
+						</a>
+					) : null}
+				</div>
+			</div>
+
+			<p className="text-sm text-ayu-gutter mb-2">
+				{metadata.date}
+				{metadata.github ? (
+					<>
+						{" "}
+						-{" "}
+						<a
+							href={metadata.github}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-ayu-green-500 hover:underline"
+						>
+							Source Code
+						</a>
+					</>
+				) : null}
+			</p>
+
+			{tags.length > 0 ? (
+				<div className="flex gap-1.5 text-sm flex-wrap leading-3 items-center mb-2 no-select">
+					{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"
+						>
+							{tag}
+						</span>
+					))}
+				</div>
+			) : null}
+
+			<div className="text-pretty">{children}</div>
+
+			<p className="text-center text-md text-ayu-gutter mt-8 mb-4">
+				Oliver Bryan - {metadata.date}
+				{metadata.github ? (
+					<>
+						{" "}
+						-{" "}
+						<a
+							href={metadata.github}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-ayu-green-500 hover:underline"
+						>
+							Source Code
+						</a>
+					</>
+				) : null}
+			</p>
+		</div>
+	);
+}

src/projects/sprint/index.tsx

@@ -0,0 +1,148 @@
+import { Demo } from "@/projects/shared/Demo";
+import { ProjectPage } from "@/projects/shared/ProjectPage";
+
+export const metadata = {
+	title: "Sprint",
+	description:
+		"A simple project management tool for developers. Born out of frustration with Jira.",
+	date: "December 2025 - Present",
+	slug: "sprint",
+	image: "/sprint-icon.svg",
+	url: "https://sprintpm.org",
+	github: "https://github.com/hex248/sprint",
+	hidden: false,
+	tags: [
+		"Web",
+		"React",
+		"TypeScript",
+		"Tauri",
+		"PostgreSQL",
+		"Databases",
+		"Bun",
+	],
+	type: "personal",
+};
+
+export function SprintProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="mb-4 text-pretty">
+				Sprint is a lightweight, self-hostable project management tool built for
+				developers who want simplicity over complexity. Frustrated with bloated
+				tools like Jira, I created Sprint to focus on what matters: tracking
+				tasks within organisations and projects without the overhead. Deploy it
+				on your own infrastructure for full control over your data, and access
+				it via the web or as a native desktop application via Tauri.
+			</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">
+						Key features
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>Organisation and project management</li>
+						<li>Issue creation with titles and descriptions</li>
+						<li>Issue assignment to team members</li>
+						<li>Time tracking with start, pause, and resume timers</li>
+						<li>Sprint management with date ranges</li>
+						<li>Customizable issue statuses per organisation</li>
+						<li>Resizable split-pane interface</li>
+						<li>Role-based access: owner, admin, member</li>
+						<li>Avatar uploads with S3 storage</li>
+						<li>Native desktop app via Tauri</li>
+					</ul>
+				</div>
+
+				<div className="bg-ayu-highlight p-4 rounded">
+					<h2 className="text-lg text-ayu-green-500 mb-2 text-balance">
+						Technologies
+					</h2>
+					<ul className="list-disc list-inside space-y-1 text-pretty">
+						<li>React + TypeScript (frontend)</li>
+						<li>Bun.serve + Drizzle ORM (backend)</li>
+						<li>PostgreSQL</li>
+						<li>Tailwind + shadcn/ui</li>
+						<li>Tauri (desktop)</li>
+						<li>S3 file storage (avatars)</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-ayu-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
+					ORM and auth middleware, and a React frontend that runs as a web app
+					or is bundled as a native desktop application with Tauri.
+				</p>
+			</div>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-ayu-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"
+						title="Landing — 1"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/sprint/landing-light-1.png"
+						title="Landing (light) — 1"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/sprint/selected-issue.png"
+						title="Main interface — issues list and detail pane"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/sprint/filter-status.png"
+						title="Filter status"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/sprint/create-issue.png"
+						title="Create issue"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/sprint/sprints.png"
+						title="Sprints"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/sprint/account-settings.png"
+						title="Account settings"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/sprint/organisations-edit.png"
+						title="Organisation edit"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/sprint/organisations-projects-settings.png"
+						title="Organisation projects settings"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/sprint/organisations-issues-settings.png"
+						title="Organisation issues settings"
+						type="boxed"
+					/>
+					<Demo
+						image="/images/sprint/organisations-features-settings.png"
+						title="Organisation features settings"
+						type="boxed"
+					/>
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}