From 7ff2cb276e239b17634fc2be2849acf2bbb7b545 Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Sun, 25 Jan 2026 06:36:33 +0100
Subject: [PATCH] auto-claude: subtask-1-3 - Update portfolio page with
 filtering logic

- Import CategoryFilter component
- Add searchParams to Props type to receive category query param
- Filter projects based on selected category
- Render CategoryFilter component above PortfolioGrid
- Pass filtered projects to PortfolioGrid

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/app/[locale]/portfolio/page.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/[locale]/portfolio/page.tsx b/src/app/[locale]/portfolio/page.tsx
index 96b2e3e..d122d49 100644
--- a/src/app/[locale]/portfolio/page.tsx
+++ b/src/app/[locale]/portfolio/page.tsx
@@ -1,10 +1,11 @@
 import { setRequestLocale } from 'next-intl/server';
 import type { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
-import { PortfolioGrid } from '@/components/portfolio';
+import { PortfolioGrid, CategoryFilter } from '@/components/portfolio';
 
 type Props = {
   params: Promise<{ locale: string }>;
+  searchParams: Promise<{ category?: string }>;
 };
 
 const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';
@@ -159,12 +160,20 @@ const projects = [
   },
 ];
 
-export default async function PortfolioPage({ params }: Props) {
+export default async function PortfolioPage({ params, searchParams }: Props) {
   const { locale } = await params;
   setRequestLocale(locale);
 
   const t = await getTranslations('portfolio');
 
+  // Get category filter from URL params
+  const { category } = await searchParams;
+
+  // Filter projects by category if specified
+  const filteredProjects = category
+    ? projects.filter((project) => project.category === category)
+    : projects;
+
   return (
     <div className="relative min-h-screen">
       <section className="py-24">
@@ -178,7 +187,9 @@ export default async function PortfolioPage({ params }: Props) {
             </p>
           </div>
 
-          <PortfolioGrid projects={projects} />
+          <CategoryFilter />
+
+          <PortfolioGrid projects={filteredProjects} />
         </div>
       </section>
     </div>