added pagination controls, test

app/blog/[slug]/page.tsx

@@ -6,8 +6,9 @@ import { useSharedData } from '@/app/context/ProjectContext';
 import { useMountTransition } from '@/hooks/useAnimations';
 import "../../../styles/markdown-container.css";
 import Link from 'next/link';
-import { BLOG_POSTS } from '@/data/content';
+import { BLOG_POSTS, categoryLabel } from '@/data/content';
 import SimpleGallery from '@/components/SimpleGallery';
+import "../../../styles/blog.css";
 
 export default function BlogPostPage({params}: { params: Promise<{ slug: string }> })
 {
@@ -32,6 +33,16 @@ export default function BlogPostPage({params}: { params: Promise<{ slug: string
      }}
       >          
 
+   {hasValidPost.category && (
+    <Link
+      className="blog-category-chip is-active blog-post-category-chip"
+      href={`/blog?category=${hasValidPost.category}`}
+      title={`All ${categoryLabel(hasValidPost.category)} posts`}
+    >
+      {categoryLabel(hasValidPost.category)}
+    </Link>
+    )}
+
    {
     hasValidDetails ? 
     (

app/blog/category/[category]/page.tsx

@@ -0,0 +1,21 @@
+import { notFound } from "next/navigation";
+import { blogCategories } from "@/data/content";
+import BlogList from "@/components/BlogList";
+
+/**
+ * Shareable category URL: /blog/category/meta. Thin wrapper around the same
+ * client-side BlogList the /blog?category=… form renders -- the slug pins the
+ * category, the ?page= search param still drives pagination, and the chip row
+ * links use the ?category= form so navigation stays consistent across both.
+ * Unknown slugs 404: a real route can notFound(), a query param cannot.
+ */
+export default function BlogCategoryPage({ params }: { params: Promise<{ category: string }> }) {
+  const { category } = await params;
+  if (!category || !blogCategories().includes(category)) notFound();
+
+  return (
+    <main>
+      <BlogList category={category} />
+    </main>
+  );
+}