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 (
@@ -178,7 +187,9 @@ export default async function PortfolioPage({ params }: Props) {
-
+
+
+
diff --git a/src/components/portfolio/CategoryFilter.tsx b/src/components/portfolio/CategoryFilter.tsx
new file mode 100644
index 0000000..d933ecf
--- /dev/null
+++ b/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 (
+
+
+ {/* All button */}
+
+
+ {/* Category buttons */}
+ {categories.map((category) => {
+ const isActive = selectedCategory === category;
+ return (
+
+ );
+ })}
+
+