Merge pull request #25 from damjan1996/auto-claude/006-add-portfolio-category-filter

auto-claude: 006-add-portfolio-category-filter

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>

src/components/portfolio/CategoryFilter.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+const categories = [
+  'AI Development',
+  'IoT',
+  'Full-Stack',
+  'Enterprise Software',
+  'E-Commerce',
+  'Developer Tools',
+] as const;
+
+export function CategoryFilter() {
+  const t = useTranslations('portfolio.filters');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const selectedCategory = searchParams.get('category');
+
+  const handleCategoryClick = (category: string | null) => {
+    if (category === null) {
+      // Remove category param to show all
+      router.push(window.location.pathname);
+    } else {
+      // Set category param
+      const params = new URLSearchParams(searchParams.toString());
+      params.set('category', category);
+      router.push(`${window.location.pathname}?${params.toString()}`);
+    }
+  };
+
+  return (
+    <div className="mb-12">
+      <div className="flex items-center gap-3 overflow-x-auto pb-4 scrollbar-hide">
+        {/* All button */}
+        <button
+          onClick={() => handleCategoryClick(null)}
+          className={`
+            relative whitespace-nowrap rounded-full py-2 px-4
+            transition-all duration-200 ease-in-out text-sm tracking-wide
+            ${!selectedCategory
+              ? 'text-white bg-zinc-700/60'
+              : 'text-zinc-400 hover:text-white hover:bg-zinc-800/30'
+            }
+          `}
+        >
+          {t('all')}
+        </button>
+
+        {/* Category buttons */}
+        {categories.map((category) => {
+          const isActive = selectedCategory === category;
+          return (
+            <button
+              key={category}
+              onClick={() => handleCategoryClick(category)}
+              className={`
+                relative whitespace-nowrap rounded-full py-2 px-4
+                transition-all duration-200 ease-in-out text-sm tracking-wide
+                ${isActive
+                  ? 'text-white bg-zinc-700/60'
+                  : 'text-zinc-400 hover:text-white hover:bg-zinc-800/30'
+                }
+              `}
+            >
+              {t(`categories.${category}`)}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/portfolio/index.ts

@@ -1,2 +1,3 @@
+export { CategoryFilter } from './CategoryFilter';
 export { default as PortfolioCard } from './PortfolioCard';
 export { default as PortfolioGrid } from './PortfolioGrid';

src/messages/de.json

@@ -450,11 +450,12 @@
     "filters": {
       "all": "Alle",
       "categories": {
-        "Data Science": "Data Science",
         "AI Development": "KI-Entwicklung",
-        "Integration": "Integration",
-        "Full-Stack Development": "Full-Stack Entwicklung",
-        "Data Processing": "Datenverarbeitung"
+        "IoT": "IoT",
+        "Full-Stack": "Full-Stack",
+        "Enterprise Software": "Unternehmenssoftware",
+        "E-Commerce": "E-Commerce",
+        "Developer Tools": "Entwickler-Tools"
       }
     },
     "ui": {

src/messages/en.json

@@ -465,11 +465,12 @@
     "filters": {
       "all": "All",
       "categories": {
-        "Data Science": "Data Science",
         "AI Development": "AI Development",
-        "Integration": "Integration",
-        "Full-Stack Development": "Full-Stack Development",
-        "Data Processing": "Data Processing"
+        "IoT": "IoT",
+        "Full-Stack": "Full-Stack",
+        "Enterprise Software": "Enterprise Software",
+        "E-Commerce": "E-Commerce",
+        "Developer Tools": "Developer Tools"
       }
     },
     "ui": {

src/messages/sr.json

@@ -472,11 +472,12 @@
     "filters": {
       "all": "Sve",
       "categories": {
-        "Data Science": "Data Science",
         "AI Development": "AI Razvoj",
-        "Integration": "Integracija",
-        "Full-Stack Development": "Full-Stack Razvoj",
-        "Data Processing": "Obrada podataka"
+        "IoT": "IoT",
+        "Full-Stack": "Full-Stack",
+        "Enterprise Software": "Korporativni Softver",
+        "E-Commerce": "E-trgovina",
+        "Developer Tools": "Alati za Razvoj"
       }
     },
     "ui": {