feat: implement internationalization with next-intl and add core portfolio sections

src/features/projects/projects-section.tsx

@@ -13,85 +13,70 @@ import {
   Globe,
   Layers,
 } from "lucide-react";
-
-interface Project {
-  id: string;
-  title: string;
-  description: string;
-  category: "backend" | "frontend" | "mobile";
-  tags: string[];
-  metrics?: string;
-  repoUrl?: string;
-  liveUrl?: string;
-}
-
-const projects: Project[] = [
-  {
-    id: "1",
-    title: "Core Banking API Gateway",
-    description:
-      "High-performance API Gateway handling 500K+ daily transactions with rate limiting, circuit breaker pattern, and distributed tracing across 12 microservices.",
-    category: "backend",
-    tags: ["Spring Boot", "Kafka", "Redis", "Docker"],
-    metrics: "Increased throughput by 40%, 99.9% uptime",
-  },
-  {
-    id: "2",
-    title: "Payment Processing Engine",
-    description:
-      "Event-driven payment system with Saga pattern for distributed transactions, supporting real-time transfers, bill payments, and batch processing.",
-    category: "backend",
-    tags: ["Java", "Kafka", "PostgreSQL", "gRPC"],
-    metrics: "Processing 200K+ payments/day",
-  },
-  {
-    id: "3",
-    title: "Customer Onboarding Portal",
-    description:
-      "Modern onboarding portal with multi-step KYC verification, document upload, and real-time status tracking for banking customers.",
-    category: "frontend",
-    tags: ["React", "Next.js", "TypeScript", "Tailwind"],
-    repoUrl: "#",
-    liveUrl: "#",
-  },
-  {
-    id: "4",
-    title: "Internal Dashboard",
-    description:
-      "Admin dashboard for monitoring API performance, user analytics, and system health with real-time WebSocket updates.",
-    category: "frontend",
-    tags: ["React", "Chart.js", "WebSocket", "REST"],
-    repoUrl: "#",
-  },
-  {
-    id: "5",
-    title: "Mobile Banking App",
-    description:
-      "Cross-platform mobile banking application with biometric authentication, push notifications, and offline transaction history.",
-    category: "mobile",
-    tags: ["React Native", "TypeScript", "Redux"],
-  },
-  {
-    id: "6",
-    title: "Authentication Microservice",
-    description:
-      "Centralized auth service with OAuth2, JWT, MFA, and session management. Supports SSO across 8 internal applications.",
-    category: "backend",
-    tags: ["Spring Security", "OAuth2", "JWT", "Redis"],
-    metrics: "Securing 50K+ active users",
-  },
-];
-
-const filters = [
-  { value: "all", label: "All Projects", icon: <Layers size={16} /> },
-  { value: "backend", label: "Backend", icon: <Server size={16} /> },
-  { value: "frontend", label: "Frontend", icon: <Globe size={16} /> },
-  { value: "mobile", label: "Mobile", icon: <Smartphone size={16} /> },
-];
+import { useTranslations } from "next-intl";
 
 export function ProjectsSection() {
+  const t = useTranslations("Projects");
   const [activeFilter, setActiveFilter] = useState("all");
 
+  const projects = [
+    {
+      id: "1",
+      title: t("items.apiGateway.title"),
+      description: t("items.apiGateway.description"),
+      category: "backend",
+      tags: ["Spring Boot", "Kafka", "Redis", "Docker"],
+      metrics: t.has("items.apiGateway.metrics") ? t("items.apiGateway.metrics") : undefined,
+    },
+    {
+      id: "2",
+      title: t("items.paymentEngine.title"),
+      description: t("items.paymentEngine.description"),
+      category: "backend",
+      tags: ["Java", "Kafka", "PostgreSQL", "gRPC"],
+      metrics: t.has("items.paymentEngine.metrics") ? t("items.paymentEngine.metrics") : undefined,
+    },
+    {
+      id: "3",
+      title: t("items.onboarding.title"),
+      description: t("items.onboarding.description"),
+      category: "frontend",
+      tags: ["React", "Next.js", "TypeScript", "Tailwind"],
+      repoUrl: "#",
+      liveUrl: "#",
+    },
+    {
+      id: "4",
+      title: t("items.dashboard.title"),
+      description: t("items.dashboard.description"),
+      category: "frontend",
+      tags: ["React", "Chart.js", "WebSocket", "REST"],
+      repoUrl: "#",
+    },
+    {
+      id: "5",
+      title: t("items.mobileApp.title"),
+      description: t("items.mobileApp.description"),
+      category: "mobile",
+      tags: ["React Native", "TypeScript", "Redux"],
+    },
+    {
+      id: "6",
+      title: t("items.authService.title"),
+      description: t("items.authService.description"),
+      category: "backend",
+      tags: ["Spring Security", "OAuth2", "JWT", "Redis"],
+      metrics: t.has("items.authService.metrics") ? t("items.authService.metrics") : undefined,
+    },
+  ];
+
+  const filters = [
+    { value: "all", label: t("filters.all"), icon: <Layers size={16} /> },
+    { value: "backend", label: t("filters.backend"), icon: <Server size={16} /> },
+    { value: "frontend", label: t("filters.frontend"), icon: <Globe size={16} /> },
+    { value: "mobile", label: t("filters.mobile"), icon: <Smartphone size={16} /> },
+  ];
+
   const filteredProjects =
     activeFilter === "all"
       ? projects
@@ -102,9 +87,9 @@ export function ProjectsSection() {
       <div className="max-w-6xl mx-auto px-6">
         <AnimatedSection>
           <SectionHeading
-            badge="Portfolio"
-            title="Projects & Case Studies"
-            subtitle="Real-world enterprise solutions built for scale, security, and reliability."
+            badge={t("badge")}
+            title={t("title")}
+            subtitle={t("subtitle")}
           />
         </AnimatedSection>