Merge origin/master

auto-claude: 003-add-blog-search-and-category-filter

.gitignore

@@ -85,3 +85,8 @@ source-images/
 
 # Auto Claude data directory
 .auto-claude/
+<<<<<<< HEAD
+.auto-claude-*
+.claude_settings.json
+=======
+>>>>>>> origin/master

src/app/[locale]/blog/page.tsx

@@ -1,17 +1,19 @@
 import { setRequestLocale } from 'next-intl/server';
 import { getTranslations } from 'next-intl/server';
-import { ArrowRight, Calendar, Tag, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
-import Link from 'next/link';
-import Image from 'next/image';
+import { ArrowRight } from 'lucide-react';
 import type { Metadata } from 'next';
 import { getAllBlogPosts, BlogPost } from '@/lib/blog';
+<<<<<<< HEAD
+import { BlogList } from '@/components/blog/BlogList';
+=======
 import { legacyBlogPosts } from '@/data/legacyBlogPosts';
 
 const POSTS_PER_PAGE = 12;
+>>>>>>> origin/master
 
 type Props = {
   params: Promise<{ locale: string }>;
-  searchParams: Promise<{ page?: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
 const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';
@@ -82,6 +84,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
+<<<<<<< HEAD
+=======
 function getFormattedDate(date: string, locale: string) {
   const languageMap: Record<string, string> = {
     de: 'de-DE',
@@ -334,10 +338,11 @@ function Pagination({
     </nav>
   );
 }
+>>>>>>> origin/master
 
 export default async function BlogPage({ params, searchParams }: Props) {
   const { locale } = await params;
-  const { page } = await searchParams;
+  const resolvedSearchParams = await searchParams;
   setRequestLocale(locale);
 
   const t = await getTranslations('blog');
@@ -355,14 +360,9 @@ export default async function BlogPage({ params, searchParams }: Props) {
     ...legacyPosts,
   ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 
-  // Pagination
-  const currentPage = Math.max(1, parseInt(page || '1', 10) || 1);
-  const totalPages = Math.ceil(allPosts.length / POSTS_PER_PAGE);
-  const validPage = Math.min(currentPage, totalPages || 1);
-
-  const startIndex = (validPage - 1) * POSTS_PER_PAGE;
-  const endIndex = startIndex + POSTS_PER_PAGE;
-  const posts = allPosts.slice(startIndex, endIndex);
+  // Extract search and category from URL params
+  const initialSearch = typeof resolvedSearchParams.search === 'string' ? resolvedSearchParams.search : '';
+  const initialCategory = typeof resolvedSearchParams.category === 'string' ? resolvedSearchParams.category : null;
 
   return (
     <main className="min-h-screen">
@@ -379,37 +379,23 @@ export default async function BlogPage({ params, searchParams }: Props) {
           <p className="text-lg sm:text-xl text-zinc-400 max-w-2xl">
             {t('meta.header.subtitle')}
           </p>
-          {/* Post count */}
-          <p className="text-sm text-zinc-500 mt-4">
-            {t('ui.pagination.showing', {
-              start: startIndex + 1,
-              end: Math.min(endIndex, allPosts.length),
-              total: allPosts.length,
-            })}
-          </p>
         </div>
 
-        {/* Blog Posts Grid */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
-          {posts.map((post) => (
-            <BlogPostCard key={post.slug} post={post} locale={locale} />
-          ))}
-        </div>
-
-        {/* Pagination */}
-        <Pagination
-          currentPage={validPage}
-          totalPages={totalPages}
+        {/* Blog List with Search and Filters */}
+        <BlogList
+          posts={allPosts}
           locale={locale}
-          t={(key) => t(key)}
+          initialSearch={initialSearch}
+          initialCategory={initialCategory}
+          translations={{
+            searchPlaceholder: t('ui.search.placeholder'),
+            showingText: (start: number, end: number, total: number) =>
+              t('ui.pagination.showing', { start, end, total }),
+            noPostsText: t('ui.errors.posts'),
+            paginationPrevious: t('ui.pagination.previous'),
+            paginationNext: t('ui.pagination.next'),
+          }}
         />
-
-        {/* Empty State */}
-        {posts.length === 0 && (
-          <div className="text-center py-12">
-            <p className="text-zinc-400">{t('ui.errors.posts')}</p>
-          </div>
-        )}
       </div>
     </main>
   );

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/blog/BlogList.tsx

@@ -0,0 +1,427 @@
+'use client';
+
+import { useState, useMemo, useEffect } from 'react';
+import { Calendar, Tag, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useRouter, usePathname } from 'next/navigation';
+import { BlogPost } from '@/lib/blog';
+import { SearchBar } from './SearchBar';
+import { CategoryFilter } from './CategoryFilter';
+
+const POSTS_PER_PAGE = 12;
+
+// Placeholder image for posts without cover images
+const PLACEHOLDER_IMAGE = 'data:image/svg+xml,' + encodeURIComponent(`
+  <svg width="1792" height="1024" xmlns="http://www.w3.org/2000/svg">
+    <rect width="100%" height="100%" fill="#181C14"/>
+    <rect x="40%" y="35%" width="20%" height="30%" rx="8" fill="#697565" opacity="0.3"/>
+    <circle cx="50%" cy="45%" r="8%" fill="#697565" opacity="0.2"/>
+    <rect x="30%" y="65%" width="40%" height="4%" rx="2" fill="#465B50" opacity="0.3"/>
+    <rect x="35%" y="72%" width="30%" height="3%" rx="2" fill="#465B50" opacity="0.2"/>
+  </svg>
+`);
+
+// Known existing images (from public/images/posts/)
+const EXISTING_IMAGES = new Set([
+  '/images/posts/erp-integration-breuninger/cover.jpg',
+  '/images/posts/fullstack-development-timetracking/cover.jpg',
+  '/images/posts/rfid-automation/cover.jpg',
+  '/images/posts/automated-ad-creatives/cover.jpg',
+]);
+
+function getFormattedDate(date: string, locale: string) {
+  const languageMap: Record<string, string> = {
+    de: 'de-DE',
+    en: 'en-US',
+    sr: 'sr-RS',
+  };
+
+  return new Date(date).toLocaleDateString(languageMap[locale] || 'de-DE', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+function getImagePath(coverImage: string) {
+  if (coverImage.startsWith('http')) {
+    return coverImage;
+  }
+  return coverImage.replace('/blog/', '/images/posts/');
+}
+
+// Blog image component with fallback
+function BlogImage({ src, alt, fallback }: { src: string; alt: string; fallback: string }) {
+  const imageSrc = EXISTING_IMAGES.has(src) ? src : fallback;
+
+  return (
+    <Image
+      src={imageSrc}
+      alt={alt}
+      fill
+      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+      className="object-cover transition-transform duration-700 group-hover:scale-110"
+      unoptimized={imageSrc.startsWith('data:')}
+    />
+  );
+}
+
+function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
+  return (
+    <Link
+      href={`/${locale}/blog/${post.slug}`}
+      className="group relative block bg-zinc-900/50 backdrop-blur-sm
+               rounded-xl shadow-lg hover:shadow-2xl
+               ring-1 ring-zinc-800 hover:ring-zinc-700
+               transition-all duration-500 focus:outline-none focus:ring-2
+               focus:ring-zinc-600 focus:ring-offset-2 focus:ring-offset-zinc-950
+               transform hover:-translate-y-1"
+    >
+      <div className="relative overflow-hidden rounded-xl">
+        {/* Image Container */}
+        <div className="aspect-[16/9] w-full relative overflow-hidden bg-zinc-900">
+          <BlogImage
+            src={getImagePath(post.coverImage)}
+            alt={post.title}
+            fallback={PLACEHOLDER_IMAGE}
+          />
+          <div className="absolute inset-x-0 -bottom-20 top-0 bg-gradient-to-t from-zinc-900 via-zinc-900/70 to-transparent opacity-95" />
+        </div>
+
+        {/* Content */}
+        <div className="relative -mt-2 p-6 bg-zinc-900 z-10">
+          <div className="flex items-center gap-4 mb-4 text-zinc-500">
+            <div className="flex items-center gap-2 text-sm">
+              <Calendar className="h-4 w-4" />
+              <span>{getFormattedDate(post.date, locale)}</span>
+            </div>
+            {post.tags && post.tags.length > 0 && (
+              <div className="flex items-center gap-2 text-sm">
+                <Tag className="h-4 w-4" />
+                <span>{post.tags.length} Tags</span>
+              </div>
+            )}
+          </div>
+
+          <h3 className="text-xl font-semibold text-white mb-3
+                       group-hover:text-zinc-100 transition-colors duration-300">
+            {post.title}
+          </h3>
+          <p className="text-zinc-400 text-sm line-clamp-2 mb-4
+                      group-hover:text-zinc-300 transition-colors duration-300">
+            {post.excerpt}
+          </p>
+
+          {/* Tags */}
+          <div className="flex flex-wrap gap-2">
+            {post.tags?.slice(0, 3).map((tag, index) => (
+              <span
+                key={index}
+                className="px-3 py-1 bg-zinc-800/50
+                         text-sm text-zinc-400 rounded-full
+                         ring-1 ring-zinc-700/50 group-hover:ring-zinc-600/50
+                         group-hover:bg-zinc-800/70 group-hover:text-zinc-300
+                         transition-all duration-300"
+              >
+                {tag}
+              </span>
+            ))}
+            {post.tags && post.tags.length > 3 && (
+              <span className="text-sm text-zinc-600">
+                +{post.tags.length - 3} more
+              </span>
+            )}
+          </div>
+
+          {/* Link Icon */}
+          <div className="absolute top-6 right-6 p-2.5 rounded-full
+                        bg-zinc-800/60 backdrop-blur-sm ring-1 ring-zinc-700/50
+                        opacity-0 group-hover:opacity-100
+                        transform translate-y-2 group-hover:translate-y-0
+                        transition-all duration-300">
+            <ExternalLink className="h-4 w-4 text-zinc-400" />
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+// Pagination component
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  t,
+}: {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  t: (key: string) => string;
+}) {
+  const getPageNumbers = () => {
+    const pages: (number | 'ellipsis')[] = [];
+
+    if (totalPages <= 7) {
+      // Show all pages if 7 or fewer
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Always show first page
+      pages.push(1);
+
+      if (currentPage > 3) {
+        pages.push('ellipsis');
+      }
+
+      // Show pages around current
+      const start = Math.max(2, currentPage - 1);
+      const end = Math.min(totalPages - 1, currentPage + 1);
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (currentPage < totalPages - 2) {
+        pages.push('ellipsis');
+      }
+
+      // Always show last page
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <nav className="flex items-center justify-center gap-2 mt-12 sm:mt-16" aria-label="Pagination">
+      {/* Previous button */}
+      {currentPage > 1 ? (
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
+                     bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
+                     hover:ring-zinc-600 transition-all duration-200"
+          aria-label={t('ui.pagination.previous')}
+        >
+          <ChevronLeft className="h-4 w-4" />
+          <span className="hidden sm:inline">{t('ui.pagination.previous')}</span>
+        </button>
+      ) : (
+        <span
+          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
+                     bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
+          aria-disabled="true"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          <span className="hidden sm:inline">{t('ui.pagination.previous')}</span>
+        </span>
+      )}
+
+      {/* Page numbers */}
+      <div className="flex items-center gap-1">
+        {getPageNumbers().map((page, index) => {
+          if (page === 'ellipsis') {
+            return (
+              <span key={`ellipsis-${index}`} className="px-2 text-zinc-600">
+                ...
+              </span>
+            );
+          }
+
+          const isCurrentPage = page === currentPage;
+
+          return (
+            <button
+              key={page}
+              onClick={() => onPageChange(page)}
+              className={`min-w-[40px] h-10 flex items-center justify-center text-sm rounded-lg
+                         ring-1 transition-all duration-200
+                         ${isCurrentPage
+                           ? 'bg-[#697565] text-white ring-[#697565] font-medium'
+                           : 'text-zinc-400 hover:text-white bg-zinc-800/50 hover:bg-zinc-800 ring-zinc-700/50 hover:ring-zinc-600'
+                         }`}
+              aria-current={isCurrentPage ? 'page' : undefined}
+            >
+              {page}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Next button */}
+      {currentPage < totalPages ? (
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
+                     bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
+                     hover:ring-zinc-600 transition-all duration-200"
+          aria-label={t('ui.pagination.next')}
+        >
+          <span className="hidden sm:inline">{t('ui.pagination.next')}</span>
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      ) : (
+        <span
+          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
+                     bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
+          aria-disabled="true"
+        >
+          <span className="hidden sm:inline">{t('ui.pagination.next')}</span>
+          <ChevronRight className="h-4 w-4" />
+        </span>
+      )}
+    </nav>
+  );
+}
+
+interface BlogListProps {
+  posts: BlogPost[];
+  locale: string;
+  initialSearch?: string;
+  initialCategory?: string | null;
+  translations: {
+    searchPlaceholder: string;
+    showingText: (start: number, end: number, total: number) => string;
+    noPostsText: string;
+    paginationPrevious: string;
+    paginationNext: string;
+  };
+}
+
+export function BlogList({ posts, locale, initialSearch = '', initialCategory = null, translations }: BlogListProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [searchQuery, setSearchQuery] = useState(initialSearch);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(initialCategory);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Update URL when filters change
+  useEffect(() => {
+    const params = new URLSearchParams();
+
+    if (searchQuery.trim()) {
+      params.set('search', searchQuery.trim());
+    }
+
+    if (selectedCategory) {
+      params.set('category', selectedCategory);
+    }
+
+    const queryString = params.toString();
+    const newUrl = queryString ? `${pathname}?${queryString}` : pathname;
+
+    router.push(newUrl, { scroll: false });
+  }, [searchQuery, selectedCategory, pathname, router]);
+
+  // Extract unique categories from all posts
+  const allCategories = useMemo(() => {
+    const categories = new Set(posts.map(post => post.category).filter(Boolean));
+    return Array.from(categories).sort();
+  }, [posts]);
+
+  // Filter posts based on search query and category
+  const filteredPosts = useMemo(() => {
+    let filtered = posts;
+
+    // Apply search filter (case-insensitive search in title, excerpt, and tags)
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(post => {
+        const titleMatch = post.title.toLowerCase().includes(query);
+        const excerptMatch = post.excerpt.toLowerCase().includes(query);
+        const tagsMatch = post.tags?.some(tag => tag.toLowerCase().includes(query)) || false;
+        return titleMatch || excerptMatch || tagsMatch;
+      });
+    }
+
+    // Apply category filter
+    if (selectedCategory) {
+      filtered = filtered.filter(post => post.category === selectedCategory);
+    }
+
+    return filtered;
+  }, [posts, searchQuery, selectedCategory]);
+
+  // Reset to first page when filters change
+  useMemo(() => {
+    setCurrentPage(1);
+  }, [searchQuery, selectedCategory]);
+
+  // Paginate filtered posts
+  const totalPages = Math.ceil(filteredPosts.length / POSTS_PER_PAGE);
+  const validPage = Math.min(Math.max(1, currentPage), totalPages || 1);
+
+  const startIndex = (validPage - 1) * POSTS_PER_PAGE;
+  const endIndex = startIndex + POSTS_PER_PAGE;
+  const paginatedPosts = filteredPosts.slice(startIndex, endIndex);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    // Scroll to top of the page
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <div>
+      {/* Search and Filter Section */}
+      <div className="mb-8 sm:mb-12 space-y-6">
+        {/* Search Bar */}
+        <SearchBar
+          value={searchQuery}
+          onChange={setSearchQuery}
+          placeholder={translations.searchPlaceholder}
+        />
+
+        {/* Category Filter */}
+        <CategoryFilter
+          categories={allCategories}
+          selectedCategory={selectedCategory}
+          onCategoryChange={setSelectedCategory}
+        />
+      </div>
+
+      {/* Results count */}
+      <p className="text-sm text-zinc-500 mb-6">
+        {translations.showingText(
+          startIndex + 1,
+          Math.min(endIndex, filteredPosts.length),
+          filteredPosts.length
+        )}
+      </p>
+
+      {/* Blog Posts Grid */}
+      {paginatedPosts.length > 0 ? (
+        <>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
+            {paginatedPosts.map((post) => (
+              <BlogPostCard key={post.slug} post={post} locale={locale} />
+            ))}
+          </div>
+
+          {/* Pagination */}
+          <Pagination
+            currentPage={validPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+            t={(key) => {
+              if (key === 'ui.pagination.previous') return translations.paginationPrevious;
+              if (key === 'ui.pagination.next') return translations.paginationNext;
+              return '';
+            }}
+          />
+        </>
+      ) : (
+        /* Empty State */
+        <div className="text-center py-12">
+          <p className="text-zinc-400">{translations.noPostsText}</p>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/blog/CategoryFilter.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { Tag } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+interface CategoryFilterProps {
+  categories: string[];
+  selectedCategory: string | null;
+  onCategoryChange: (category: string | null) => void;
+  className?: string;
+}
+
+export function CategoryFilter({
+  categories,
+  selectedCategory,
+  onCategoryChange,
+  className = ''
+}: CategoryFilterProps) {
+  const allCategories = ['All', ...categories];
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.1 }}
+      className={`${className}`}
+    >
+      <div className="flex items-center gap-3 mb-4">
+        <Tag className="h-5 w-5 text-zinc-400 flex-shrink-0" />
+        <h3 className="text-sm font-medium text-zinc-300">Filter by Category</h3>
+      </div>
+
+      {/* Mobile: Horizontal scrollable */}
+      <div className="md:hidden overflow-x-auto pb-2 -mx-4 px-4">
+        <div className="flex gap-2 min-w-max">
+          {allCategories.map((category) => {
+            const isActive = category === 'All'
+              ? selectedCategory === null
+              : selectedCategory === category;
+
+            return (
+              <button
+                key={category}
+                onClick={() => onCategoryChange(category === 'All' ? null : category)}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap ${
+                  isActive
+                    ? 'bg-[#697565] text-white'
+                    : 'bg-zinc-900/50 text-zinc-400 border border-zinc-800 hover:bg-zinc-800/50 hover:text-white'
+                }`}
+              >
+                {category}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Desktop: Grid */}
+      <div className="hidden md:grid md:grid-cols-4 lg:grid-cols-6 gap-2">
+        {allCategories.map((category) => {
+          const isActive = category === 'All'
+            ? selectedCategory === null
+            : selectedCategory === category;
+
+          return (
+            <button
+              key={category}
+              onClick={() => onCategoryChange(category === 'All' ? null : category)}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                isActive
+                  ? 'bg-[#697565] text-white'
+                  : 'bg-zinc-900/50 text-zinc-400 border border-zinc-800 hover:bg-zinc-800/50 hover:text-white'
+              }`}
+            >
+              {category}
+            </button>
+          );
+        })}
+      </div>
+    </motion.div>
+  );
+}

src/components/blog/SearchBar.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { Search, X } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function SearchBar({
+  value,
+  onChange,
+  placeholder = 'Search posts...',
+  className = ''
+}: SearchBarProps) {
+  const handleClear = () => {
+    onChange('');
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={`relative ${className}`}
+    >
+      <div className="relative">
+        <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-zinc-400" />
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          className="w-full pl-12 pr-12 py-3 bg-zinc-900/50 border border-zinc-800 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-[#697565] focus:border-transparent transition-all"
+        />
+        {value && (
+          <button
+            onClick={handleClear}
+            className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-white transition-colors"
+            aria-label="Clear search"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        )}
+      </div>
+    </motion.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": {
@@ -476,12 +477,15 @@
     },
     "ui": {
       "readMore": "Weiterlesen",
+      "search": {
+        "placeholder": "Beiträge durchsuchen..."
+      },
       "loading": {
         "posts": "Blogbeiträge werden geladen...",
         "post": "Blogbeitrag wird geladen..."
       },
       "errors": {
-        "posts": "Fehler beim Laden der Blogbeiträge",
+        "posts": "Keine Beiträge gefunden",
         "post": "Der gesuchte Blogbeitrag existiert nicht oder wurde verschoben."
       },
       "backToBlog": "Zurück zum Blog",

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": {
@@ -491,12 +492,15 @@
     },
     "ui": {
       "readMore": "Read More",
+      "search": {
+        "placeholder": "Search posts..."
+      },
       "loading": {
         "posts": "Loading blog posts...",
         "post": "Loading blog post..."
       },
       "errors": {
-        "posts": "Error loading blog posts",
+        "posts": "No posts found",
         "post": "The requested blog post does not exist or has been moved."
       },
       "backToBlog": "Back to Blog",

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": {
@@ -498,12 +499,15 @@
     },
     "ui": {
       "readMore": "Procitaj vise",
+      "search": {
+        "placeholder": "Pretrazi postove..."
+      },
       "loading": {
         "posts": "Ucitavanje blog postova...",
         "post": "Ucitavanje blog posta..."
       },
       "errors": {
-        "posts": "Greska pri ucitavanju blog postova",
+        "posts": "Nema pronađenih postova",
         "post": "Trazeni blog post ne postoji ili je premesten."
       },
       "backToBlog": "Nazad na Blog",

tsconfig.json

@@ -30,8 +30,13 @@
   ],
   "exclude": [
     "node_modules",
+<<<<<<< HEAD
+    "src/components-vite",
+    "src/pages-vite",
+=======
     "src/hooks",
     "src/services",
+>>>>>>> origin/master
     "**/*.bak"
   ]
 }