diff --git a/src/routes/projects/[category]/[id]/+page.svelte b/src/routes/projects/[category]/[id]/+page.svelte
new file mode 100644
index 0000000..64546f6
--- /dev/null
+++ b/src/routes/projects/[category]/[id]/+page.svelte
@@ -0,0 +1,29 @@
+<script>
+    import Banner2 from "$lib/banner2.svelte";
+    import Content from "$lib/viewport/content.svelte";
+    // import TableOfContents from "$lib/components/table-of-contents.svelte";
+
+	export let data;
+</script>
+
+<svelte:head>
+    <title>{data.projectDetails.title} | denizk0461</title>
+    <meta name="description" content="{data.projectDetails.description}">
+    <meta name="DCTERMS.created" content="{data.projectDetails.date}T12:00">
+</svelte:head>
+
+<Content>
+    <Banner2
+        title="{data.projectDetails.title}"
+        subtitle="{data.projectDetails.subtitle}"
+        date="{data.projectDetails.date}"
+        dateUpdated="{data.projectDetails.dateUpdated}"
+        banner="{data.projectDetails.banner}"
+        bannerAlt="{data.projectDetails.bannerAlt}"
+        />
+
+    <!-- <TableOfContents /> -->
+
+    <svelte:component this={data.content} />
+
+</Content>
\ No newline at end of file
diff --git a/src/routes/projects/[category]/[id]/+page.ts b/src/routes/projects/[category]/[id]/+page.ts
new file mode 100644
index 0000000..72f25e5
--- /dev/null
+++ b/src/routes/projects/[category]/[id]/+page.ts
@@ -0,0 +1,22 @@
+import { projects, type Project } from '../../projects2';
+
+export async function load({ params }) {
+    const post = await import(`../../${params.category}/${params.id}.md`);
+
+    // const tag: string = `${params.year}/${params.date}`; // link to the page. not to be confused with tags. i know it's confusing naming
+    const projectDetails = projects.find((p: Project) => p.category.toString() == params.category.toString() && p.id == params.id);
+    const content = post.default;
+    // const title: string = postValues?.title ?? "";
+    // const subtitle: string = postValues?.subtitle ?? "";
+    // const date: string = postValues?.date ?? "";
+    // const dateUpdated: string = postValues?.dateUpdated ?? "";
+    // const time: string = postValues?.time ?? "";
+    // const banner: string = postValues?.banner ?? "";
+    // const description: string = postValues?.description ?? "";
+    // const tags: BlogPostTag[] = postValues?.tags ?? []; // blog post tags. should be renamed 'keywords'
+
+    return {
+        content,
+        projectDetails,
+    };
+}
\ No newline at end of file