Merge origin/master

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/contact/ContactForm.tsx

@@ -15,6 +15,8 @@ interface FormData {
 export function ContactForm() {
   const t = useTranslations('pages.contact');
 
+  const MAX_MESSAGE_LENGTH = 1000;
+
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -26,6 +28,8 @@ export function ContactForm() {
   const [errors, setErrors] = useState<Partial<FormData>>({});
   const [remainingAttempts, setRemainingAttempts] = useState<number | null>(null);
 
+  const messageLength = formData.message.length;
+
   const validateForm = () => {
     const newErrors: Partial<FormData> = {};
 
@@ -319,6 +323,7 @@ export function ContactForm() {
                       onChange={handleChange}
                       placeholder={t('contactForm.message.placeholder')}
                       rows={6}
+                      maxLength={MAX_MESSAGE_LENGTH}
                       disabled={isSubmitting}
                       aria-required="true"
                       aria-invalid={!!errors.message}
@@ -328,6 +333,19 @@ export function ContactForm() {
                     {errors.message && (
                       <p id="message-error" role="alert" className="text-sm text-red-400">{errors.message}</p>
                     )}
+                    <div className="flex justify-end">
+                      <p
+                        className={`text-xs transition-colors ${
+                          messageLength > MAX_MESSAGE_LENGTH
+                            ? 'text-red-500'
+                            : messageLength >= MAX_MESSAGE_LENGTH * 0.8
+                            ? 'text-yellow-500'
+                            : 'text-zinc-500'
+                        }`}
+                      >
+                        {t('contactForm.characterCounter', { current: messageLength, max: MAX_MESSAGE_LENGTH })}
+                      </p>
+                    </div>
                   </div>
                 </div>
 

src/components/layout/LanguageSwitcher.tsx

@@ -11,6 +11,7 @@ const LanguageSwitcher = () => {
   const pathname = usePathname();
   const [isOpen, setIsOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState<number>(-1);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const languages = [
@@ -30,8 +31,28 @@ const LanguageSwitcher = () => {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      setIsOpen(false);
+    if (!isOpen) return;
+
+    switch (e.key) {
+      case 'Escape':
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        setFocusedIndex(prev => (prev + 1) % languages.length);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setFocusedIndex(prev => (prev - 1 + languages.length) % languages.length);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (focusedIndex >= 0) {
+          handleLanguageChange(languages[focusedIndex].code);
+          setFocusedIndex(-1);
+        }
+        break;
     }
   };
 
@@ -63,7 +84,10 @@ const LanguageSwitcher = () => {
              px-4 py-2 rounded-full transition-all duration-200
              hover:bg-zinc-800/50 border border-transparent hover:border-zinc-800
              hover:scale-105 active:scale-95"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => {
+          setIsOpen(!isOpen);
+          setFocusedIndex(-1);
+        }}
         aria-expanded={isOpen}
         aria-haspopup="listbox"
         aria-label="Select language"
@@ -79,18 +103,21 @@ const LanguageSwitcher = () => {
                    ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'}`}
         role="listbox"
         aria-label="Languages"
+        aria-activedescendant={focusedIndex >= 0 ? `lang-option-${languages[focusedIndex].code}` : undefined}
         onKeyDown={handleKeyDown}
       >
         <div className="py-1">
-          {languages.map((lang) => (
+          {languages.map((lang, index) => (
             <button
               key={lang.code}
+              id={`lang-option-${lang.code}`}
               className={`w-full text-left px-4 py-2 text-sm transition-colors duration-200
                 hover:bg-zinc-800/50
                 ${locale === lang.code
                   ? 'bg-zinc-800 text-white'
                   : 'text-zinc-400 hover:text-white'
-              }`}
+                }
+                ${focusedIndex === index ? 'ring-2 ring-orange-500 ring-inset' : ''}`}
               onClick={() => handleLanguageChange(lang.code)}
               role="option"
               aria-selected={locale === lang.code}

src/components/layout/NavLink.tsx

@@ -27,6 +27,7 @@ export function NavLink({ href, icon, label, onClick, className }: NavLinkProps)
       className={`
         relative flex items-center gap-2 rounded-full py-2 px-4
         transition-all duration-200 ease-in-out
+        focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2 focus:ring-offset-zinc-950
         ${isActive ? 'text-white bg-zinc-700/60' : 'text-zinc-400 hover:text-white hover:bg-zinc-800/30'}
         ${className || ''}
       `}

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';