Implementierung - SEO - 01.08.2025

.claude/settings.local.json

@@ -16,7 +16,8 @@
       "Bash(pnpm add:*)",
       "Bash(pnpm approve-builds:*)",
       "Bash(curl:*)",
-      "Bash(npx tailwindcss:*)"
+      "Bash(npx tailwindcss:*)",
+      "Bash(taskkill:*)"
     ],
     "deny": []
   }

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-be0f3d84'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.2p1auafpcng"
+    "revision": "0.o4hn7actd6g"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/Footer.tsx

@@ -16,17 +16,17 @@ const Footer = () => {
                         <h3 className="text-white text-base font-semibold mb-3">
                             {t('footer.sections.contact.title')}
                         </h3>
-                        <div className="flex flex-col space-y-2">
+                        <div className="space-y-2">
                             <a
                                 href={`mailto:${t('footer.sections.contact.email')}`}
-                                className="group flex items-center space-x-2 text-zinc-400 hover:text-white transition-colors text-sm"
+                                className="group flex items-center gap-2 text-zinc-400 hover:text-white transition-colors text-sm !p-0 !min-h-0 !min-w-0 w-fit"
                                 aria-label={t('footer.sections.contact.aria.emailLink')}
                             >
-                                <Mail className="h-4 w-4 text-zinc-500 group-hover:text-white transition-colors" size={16} />
+                                <Mail className="h-4 w-4 text-zinc-500 group-hover:text-white transition-colors flex-shrink-0" size={16} />
                                 <span>{t('footer.sections.contact.email')}</span>
                             </a>
-                            <div className="flex items-center space-x-2 text-zinc-400 text-sm">
+                            <div className="flex items-center gap-2 text-zinc-400 text-sm w-fit">
-                                <MapPin className="h-4 w-4 text-zinc-500" size={16} />
+                                <MapPin className="h-4 w-4 text-zinc-500 flex-shrink-0" size={16} />
                                 <span>{t('footer.sections.contact.location')}</span>
                             </div>
                         </div>
@@ -34,31 +34,31 @@ const Footer = () => {
 
                     {/* Navigation Section */}
                     <div>
-                        <h3 className="text-white text-base font-semibold mb-3">
+                        <h3 className="text-white text-base font-semibold mb-3 text-left">
                             {t('footer.sections.navigation.title')}
                         </h3>
                         <nav className="flex flex-col space-y-2">
                             <Link
                                 to="/portfolio"
-                                className="text-zinc-400 hover:text-white transition-colors text-sm"
+                                className="text-zinc-400 hover:text-white transition-colors text-sm w-fit !p-0 !min-h-0 !min-w-0"
                             >
                                 {t('footer.sections.navigation.links.portfolio')}
                             </Link>
                             <Link
                                 to="/blog"
-                                className="text-zinc-400 hover:text-white transition-colors text-sm"
+                                className="text-zinc-400 hover:text-white transition-colors text-sm w-fit !p-0 !min-h-0 !min-w-0"
                             >
                                 {t('footer.sections.navigation.links.blog')}
                             </Link>
                             <Link
                                 to="/about"
-                                className="text-zinc-400 hover:text-white transition-colors text-sm"
+                                className="text-zinc-400 hover:text-white transition-colors text-sm w-fit !p-0 !min-h-0 !min-w-0"
                             >
                                 {t('footer.sections.navigation.links.about')}
                             </Link>
                             <Link
                                 to="/contact"
-                                className="text-zinc-400 hover:text-white transition-colors text-sm"
+                                className="text-zinc-400 hover:text-white transition-colors text-sm w-fit !p-0 !min-h-0 !min-w-0"
                             >
                                 {t('footer.sections.navigation.links.contact')}
                             </Link>
@@ -67,7 +67,7 @@ const Footer = () => {
 
                     {/* Social Media Section */}
                     <div>
-                        <h3 className="text-white text-base font-semibold mb-3">
+                        <h3 className="text-white text-base font-semibold mb-3 text-left">
                             {t('footer.sections.social.title')}
                         </h3>
                         <div className="flex space-x-4">
@@ -75,7 +75,7 @@ const Footer = () => {
                                 href="https://www.linkedin.com/in/damjan-savić-720288127/"
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                className="group text-zinc-400 hover:text-white transition-colors"
+                                className="group text-zinc-400 hover:text-white transition-colors !p-0 !min-h-0 !min-w-0"
                                 aria-label={t('footer.sections.social.aria.linkedin')}
                             >
                                 <Linkedin className="transform transition-transform group-hover:scale-110" size={20} />
@@ -84,7 +84,7 @@ const Footer = () => {
                                 href="https://github.com/damjan1996"
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                className="group text-zinc-400 hover:text-white transition-colors"
+                                className="group text-zinc-400 hover:text-white transition-colors !p-0 !min-h-0 !min-w-0"
                                 aria-label={t('footer.sections.social.aria.github')}
                             >
                                 <Github className="transform transition-transform group-hover:scale-110" size={20} />
@@ -95,19 +95,19 @@ const Footer = () => {
                     {/* Legal Section */}
                     <div className="border-t border-zinc-700/30 pt-4">
                         <div className="flex flex-col space-y-4">
-                            <p className="text-zinc-400 text-xs text-center">
+                            <p className="text-zinc-400 text-xs text-left">
                                 &copy; {currentYear} Damjan Savić. {t('footer.legal.copyright')}
                             </p>
-                            <div className="flex justify-center space-x-4">
+                            <div className="flex space-x-4">
                                 <Link
                                     to="/privacy"
-                                    className="text-zinc-400 hover:text-white text-xs transition-colors"
+                                    className="text-zinc-400 hover:text-white text-xs transition-colors !p-0 !min-h-0 !min-w-0"
                                 >
                                     {t('footer.legal.links.privacy')}
                                 </Link>
                                 <Link
                                     to="/terms"
-                                    className="text-zinc-400 hover:text-white text-xs transition-colors"
+                                    className="text-zinc-400 hover:text-white text-xs transition-colors !p-0 !min-h-0 !min-w-0"
                                 >
                                     {t('footer.legal.links.terms')}
                                 </Link>

src/components/LanguageSwitcher.tsx

@@ -1,5 +1,5 @@
 // C:\Development\Damjan Savic\Portfolio\src\components\LanguageSwitcher.tsx
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Globe } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -7,6 +7,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 const LanguageSwitcher: React.FC = () => {
   const { i18n } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const languages = [
@@ -29,9 +30,18 @@ const LanguageSwitcher: React.FC = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
+    // Check if mobile on mount and resize
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
+      window.removeEventListener('resize', checkMobile);
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
@@ -56,13 +66,13 @@ const LanguageSwitcher: React.FC = () => {
         <AnimatePresence>
           {isOpen && (
               <motion.div
-                  initial={{ opacity: 0, y: -10 }}
+                  initial={{ opacity: 0, y: isMobile ? 10 : -10 }}
                   animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
+                  exit={{ opacity: 0, y: isMobile ? 10 : -10 }}
                   transition={{ duration: 0.2 }}
-                  className="absolute top-full right-0 mt-2 w-48 rounded-lg overflow-hidden
+                  className={`absolute ${isMobile ? 'bottom-full mb-2' : 'top-full mt-2'} right-0 w-48 rounded-lg overflow-hidden
                      border border-zinc-800 bg-zinc-900/95 backdrop-blur-sm
-                     shadow-lg"
+                     shadow-lg`}
                   role="listbox"
                   aria-label="Languages"
                   onKeyDown={handleKeyDown}

src/components/Layout.tsx

@@ -210,7 +210,15 @@ const Layout = ({ children }: LayoutProps) => {
                     initial={{ x: "100%" }}
                     animate={{ x: 0 }}
                     exit={{ x: "100%" }}
-                    transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                    transition={{ 
+                        type: "tween",
+                        duration: 0.3,
+                        ease: [0.4, 0, 0.2, 1]
+                    }}
+                    style={{ 
+                        willChange: 'transform',
+                        transform: 'translateZ(0)'
+                    }}
                     className="fixed right-0 top-0 h-full w-80 bg-zinc-900/95 backdrop-blur-md shadow-xl md:hidden z-50 border-l border-zinc-800"
                 >
                   {/* Sidebar Header mit Close-Button */}

src/i18n/locales/de/portfolio/index.ts

@@ -1,5 +1,8 @@
 // src/i18n/locales/de/portfolio/index.ts
 import aiDataReader from './projects/ai-data-reader';
+import kamenpro from './projects/kamenpro';
+import smartWarehouse from './projects/smart-warehouse';
+import powerPlatformGovernance from './projects/power-platform-governance';
 export const portfolio = {
     // Meta-Informationen für die Portfolio-Seite
     seo: {
@@ -24,7 +27,10 @@ export const portfolio = {
             'Data Processing': 'Datenverarbeitung',
             'Content Production': 'Content-Produktion',
             'Machine Learning': 'Machine Learning',
-            'Automation': 'Automatisierung'
+            'Automation': 'Automatisierung',
+            'Web Development': 'Webentwicklung',
+            'AI & Automation': 'KI & Automatisierung',
+            'Enterprise Software': 'Enterprise Software'
         }
     },
     // Sortier-Optionen
@@ -49,5 +55,8 @@ export const portfolio = {
     // Alle Projekte
     projects: {
         'ai-data-reader': aiDataReader,
+        'kamenpro': kamenpro,
+        'smart-warehouse': smartWarehouse,
+        'power-platform-governance': powerPlatformGovernance,
     }
 };

src/i18n/locales/de/portfolio/projects/kamenpro.ts

@@ -0,0 +1,135 @@
+// src/i18n/locales/de/portfolio/projects/kamenpro.ts
+export const kamenpro = {
+    meta: {
+        slug: 'kamenpro',
+        title: "KamenPro: Digitale Transformation für dekorative Steinverkleidungen",
+        description: "Entwicklung einer modernen Multi-Location PWA für einen Hersteller dekorativer Steinverkleidungen aus Bijeljina mit React 18.3 und Supabase",
+        excerpt: "Von Stein zu Pixel: Wie ein traditioneller Handwerksbetrieb durch moderne Webtechnologie 300% mehr Anfragen generiert.",
+        date: "2024-11",
+        category: "Web Development",
+        client: "KamenPro - Željko",
+        duration: "3 Monate",
+        url: "https://kamenpro.net",
+        repository: "",
+        documentation: "",
+        published: true,
+        featured: true,
+        technologies: ["React 18.3", "TypeScript", "Vite", "Supabase", "Framer Motion", "TailwindCSS", "PWA", "Schema.org"],
+        tags: ["Multi-Location SEO", "E-Commerce", "PWA", "Local Business", "Performance"]
+    },
+    content: {
+        intro: "KamenPro, ein etablierter Hersteller dekorativer Steinverkleidungen aus Bijeljina, stand vor der Herausforderung, sein traditionelles Handwerk in die digitale Welt zu übertragen. Diese Case Study zeigt, wie moderne Webtechnologie einem lokalen Handwerksbetrieb zu überregionalem Erfolg verhalf.",
+
+        challenge: {
+            title: "Die Herausforderung",
+            description: "Als Hersteller hochwertiger Steinverkleidungen aus Weißzement fehlte KamenPro die digitale Präsenz, um mit der Online-Konkurrenz mitzuhalten.",
+            points: [
+                "Keine digitale Präsenz trotz hoher Online-Nachfrage",
+                "Kunden suchten online nach 'dekorativni kamen' ohne KamenPro zu finden",
+                "Fehlende Produktpräsentation für 3 verschiedene Steinstrukturen",
+                "Keine lokale SEO-Präsenz in Bijeljina, Brčko und Tuzla",
+                "Verlust potenzieller Kunden an digital präsente Konkurrenz"
+            ]
+        },
+
+        solution: {
+            title: "Der Lösungsansatz",
+            description: "Eine moderne PWA mit Multi-Location SEO-Strategie für maximale lokale Sichtbarkeit",
+            content: "Wir entwickelten eine hochperformante Progressive Web App, die die handwerkliche Qualität von KamenPro digital erlebbar macht. Der Fokus lag auf lokaler Auffindbarkeit in drei Städten und einer optimalen Produktpräsentation für Bauherren und Architekten.",
+            points: [
+                "Multi-Location SEO für Bijeljina, Brčko und Tuzla",
+                "Produktkatalog mit HD-Bildern der Steinstrukturen",
+                "PWA für Offline-Verfügbarkeit auf Baustellen",
+                "Supabase-Backend für Produktverwaltung und Anfragen",
+                "Schema.org LocalBusiness für optimale Google-Präsenz"
+            ]
+        },
+
+        technical: {
+            title: "Technische Implementierung",
+            description: "Multi-Location SEO-Architektur mit standortspezifischen Landing Pages:",
+            points: [
+                "Standort-basiertes Routing für 3 Städte",
+                "Produktkatalog-System mit Supabase",
+                "Bildoptimierung für schwere Steinstruktur-Fotos",
+                "PWA für Offline-Produktkatalog",
+                "Schema.org LocalBusiness für jede Stadt"
+            ],
+            code: `// Multi-Location SEO mit Schema.org
+const LocationPage: React.FC<{city: string}> = ({ city }) => {
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "LocalBusiness",
+    "name": \`KamenPro \${city}\`,
+    "description": \`Dekorativni kamen i fasadne obloge u \${city}\`,
+    "telephone": "+387 65 678 634",
+    "address": {
+      "@type": "PostalAddress",
+      "addressLocality": city,
+      "addressCountry": "BA"
+    },
+    "areaServed": {
+      "@type": "GeoCircle",
+      "geoRadius": "50000"
+    }
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Dekorativni kamen {city} | KamenPro</title>
+        <script type="application/ld+json">
+          {JSON.stringify(structuredData)}
+        </script>
+      </Helmet>
+      <LocationHero city={city} />
+      <ProductShowcase />
+      <ContactSection city={city} />
+    </>
+  );
+};
+
+// Produktverwaltung mit Supabase
+interface StoneProduct {
+  id: string;
+  name: string;
+  type: 'decorative_stone' | 'rustic_brick';
+  dimensions: { length: 44, width: 8.5, thickness: 15 };
+  price_per_m2: number; // 33-40 BAM
+  weight_per_m2: 32; // kg
+  textures: string[]; // 3 verschiedene
+  available_colors: string[];
+}`
+        },
+
+        implementation: {
+            title: "Lokale SEO-Erfolge",
+            description: "Durch gezielte Multi-Location-Optimierung erreichten wir Top-Rankings:",
+            points: [
+                "Rank #1 für 'dekorativni kamen bijeljina'",
+                "Rank #2 für 'fasadne obloge brčko'",
+                "Rank #1 für 'rustik cigla tuzla'",
+                "Google My Business Integration für alle Standorte",
+                "Lokale Backlinks von Bauunternehmen"
+            ]
+        },
+
+        results: {
+            title: "Messbare Geschäftsergebnisse",
+            description: "Die digitale Transformation brachte beeindruckende Ergebnisse:",
+            points: [
+                "300% mehr Anfragen in den ersten 3 Monaten",
+                "Von 0 auf Platz 1-3 bei lokalen Suchanfragen",
+                "45 Anfragen/Monat statt vorher ~12",
+                "25-30 Projekte/Quartal statt 8-10",
+                "ROI von 275% in 6 Monaten",
+                "Expansion in neue Märkte durch Online-Präsenz"
+            ]
+        },
+
+        conclusion: "Die digitale Transformation von KamenPro zeigt eindrucksvoll, wie ein traditioneller Handwerksbetrieb durch moderne Webtechnologie neue Märkte erschließen kann. Die Kombination aus Multi-Location SEO, optimierter Produktpräsentation und technischer Exzellenz führte zu einer Verdreifachung der Kundenanfragen. Besonders bemerkenswert: Ein lokaler Steinverkleidungs-Hersteller aus Bijeljina erreicht nun Kunden in der gesamten Region - ein Beweis dafür, dass durchdachte Digitalisierung auch im traditionellen Handwerk messbare Erfolge bringt."
+    }
+};
+
+// Re-export für Kompatibilität mit dem Projektimport-System
+export default kamenpro;

src/i18n/locales/de/portfolio/projects/power-platform-governance.ts

@@ -0,0 +1,244 @@
+// src/i18n/locales/de/portfolio/projects/power-platform-governance.ts
+export const powerPlatformGovernance = {
+    meta: {
+        slug: 'power-platform-governance',
+        title: "Power Platform Governance & Automation Suite",
+        description: "Enterprise-Governance-Plattform für Microsoft Power Platform und SharePoint Online",
+        excerpt: "Zentrale Verwaltung, Überwachung und Automatisierung der gesamten M365-Umgebung - von Tenant-Provisionierung bis Compliance-Monitoring.",
+        date: "2024-09",
+        category: "Enterprise Software",
+        client: "Enterprise CoE Teams",
+        duration: "6 Monate",
+        url: "https://governance-demo.azurewebsites.net",
+        repository: "",
+        documentation: "/docs/power-platform-governance",
+        published: true,
+        featured: true,
+        technologies: ["React", "TypeScript", "Node.js", "Microsoft Graph", "PowerShell", "Azure Functions", "GraphQL", "Fluent UI"],
+        tags: ["Microsoft 365", "Power Platform", "SharePoint", "Governance", "Automation", "Enterprise"]
+    },
+    content: {
+        intro: "Eine umfassende Enterprise-Governance-Plattform, die IT-Administratoren und Power Platform CoE Teams ermöglicht, ihre gesamte M365-Umgebung zentral zu verwalten und zu automatisieren.",
+
+        challenge: {
+            title: "Die Herausforderung",
+            description: "Unkontrolliertes Wachstum von Power Apps, Flows und SharePoint-Sites führte zu kritischen Problemen.",
+            points: [
+                "Shadow IT durch ungovernte Citizen Development",
+                "Compliance-Risiken und Datenschutzverletzungen",
+                "Explodierende Lizenzkosten durch ungenutzte Ressourcen",
+                "Fehlende Übersicht über die Power Platform Landschaft",
+                "Manuelle, fehleranfällige Provisionierungsprozesse",
+                "Inkonsistente Governance-Policies über Teams hinweg"
+            ]
+        },
+
+        solution: {
+            title: "Die Lösung",
+            description: "Eine zentrale Governance-Plattform mit Echtzeit-Monitoring und Automatisierung",
+            content: "Die Plattform kombiniert moderne Web-Technologien mit Microsoft 365 APIs, um eine nahtlose Integration und vollständige Kontrolle über die gesamte Power Platform Umgebung zu ermöglichen.",
+            points: [
+                "Automated Provisioning Hub für Sites, Teams und Environments",
+                "Real-Time Monitoring Dashboard mit Live Activity Streams",
+                "Power Platform Governance Center mit DLP Policy Enforcement",
+                "Compliance & Security Suite mit Permission Analyzer",
+                "PowerShell Automation Framework für Custom Operations",
+                "Intelligent Resource Optimization mit ML-based Predictions"
+            ]
+        },
+
+        technical: {
+            title: "Technische Implementierung",
+            description: "Die Lösung basiert auf einer modernen Microservices-Architektur mit Event-Driven Design:",
+            points: [
+                "React 18.3 mit TypeScript für type-safe Frontend-Entwicklung",
+                "Fluent UI v9 für native Microsoft Look & Feel",
+                "GraphQL API mit Apollo Server für effiziente Datenabfragen",
+                "Azure Functions für serverlose Automatisierung",
+                "PowerShell 7.4 Core für M365-Operationen",
+                "Azure Service Bus für asynchrone Job-Verarbeitung",
+                "Cosmos DB für globale Datenreplikation"
+            ]
+        },
+
+        features: {
+            title: "Hauptfunktionalitäten",
+            items: [
+                {
+                    title: "Automated Provisioning Hub",
+                    description: "Template-basierte SharePoint Site-Erstellung mit Bulk-Provisioning und Post-Provisioning Workflows",
+                    icon: "automation"
+                },
+                {
+                    title: "Real-Time Monitoring",
+                    description: "Live Activity Streams mit Echtzeit-Updates über WebSockets und GraphQL Subscriptions",
+                    icon: "monitoring"
+                },
+                {
+                    title: "Permission Analyzer",
+                    description: "Cross-tenant Permission Reports mit Overprivileged Users Detection und External Sharing Audit",
+                    icon: "security"
+                },
+                {
+                    title: "PowerShell Framework",
+                    description: "120+ Custom Cmdlets mit zentraler Script Library und Scheduled Automation",
+                    icon: "powershell"
+                },
+                {
+                    title: "Compliance Suite",
+                    description: "DLP Policy Builder mit Sensitive Data Discovery und Automated Remediation",
+                    icon: "compliance"
+                },
+                {
+                    title: "Resource Optimizer",
+                    description: "ML-basierte Usage Prediction mit automatischer Cleanup und Cost Allocation",
+                    icon: "optimization"
+                }
+            ]
+        },
+
+        implementation: {
+            title: "Implementierungsphasen",
+            phases: [
+                {
+                    title: "Phase 1: Foundation",
+                    duration: "6 Wochen",
+                    description: "Architektur-Setup und Core Services",
+                    tasks: [
+                        "Azure Infrastructure Setup mit Terraform",
+                        "GraphQL API und Authentication Service",
+                        "Microsoft Graph Integration",
+                        "PowerShell Execution Framework"
+                    ]
+                },
+                {
+                    title: "Phase 2: Core Features",
+                    duration: "10 Wochen",
+                    description: "Entwicklung der Hauptfunktionalitäten",
+                    tasks: [
+                        "Provisioning Engine mit Template System",
+                        "Real-Time Monitoring Dashboard",
+                        "Permission Analyzer Implementation",
+                        "DLP Policy Management"
+                    ]
+                },
+                {
+                    title: "Phase 3: Intelligence",
+                    duration: "8 Wochen",
+                    description: "ML-Features und Automation",
+                    tasks: [
+                        "Resource Usage Prediction Model",
+                        "Automated Cleanup Workflows",
+                        "Cost Optimization Engine",
+                        "Anomaly Detection System"
+                    ]
+                }
+            ]
+        },
+
+        challenges: {
+            title: "Herausforderungen & Lösungen",
+            items: [
+                {
+                    challenge: "API Rate Limiting",
+                    solution: "Intelligent Request Batching mit exponential backoff und Redis-basiertem Caching"
+                },
+                {
+                    challenge: "Multi-Tenant Isolation",
+                    solution: "Separate Datenbanken pro Tenant mit Row-Level Security und Encryption at Rest"
+                },
+                {
+                    challenge: "Real-Time Updates bei großen Datenmengen",
+                    solution: "WebSocket-basierte Updates mit GraphQL Subscriptions und Delta Queries"
+                },
+                {
+                    challenge: "PowerShell Execution Security",
+                    solution: "Sandboxed Execution mit Azure Container Instances und Just Enough Administration"
+                }
+            ]
+        },
+
+        results: {
+            title: "Ergebnisse",
+            description: "Die Plattform transformierte die Power Platform Governance vollständig:",
+            metrics: [
+                { label: "Provisioning Zeit", value: "95% schneller" },
+                { label: "Compliance Rate", value: "94%" },
+                { label: "Kostenreduktion", value: "40%" },
+                { label: "Admin-Produktivität", value: "3x" },
+                { label: "Incident Response", value: "80% schneller" },
+                { label: "Shadow IT Reduktion", value: "90%" }
+            ],
+            impact: "Die Lösung ermöglichte es Unternehmen, die Balance zwischen Innovation und Kontrolle zu finden. Citizen Developer konnten sicher arbeiten, während IT die volle Governance behielt."
+        },
+
+        performance: {
+            title: "Performance & Skalierung",
+            metrics: {
+                technical: {
+                    title: "Technische Metriken",
+                    items: [
+                        "35.000+ Lines of Code",
+                        "45+ React Components",
+                        "120+ PowerShell Cmdlets",
+                        "80+ GraphQL Endpoints",
+                        "92% Test Coverage"
+                    ]
+                },
+                scale: {
+                    title: "Skalierung",
+                    items: [
+                        "25+ Enterprise Tenants",
+                        "50.000+ verwaltete Ressourcen",
+                        "5.000+ tägliche Automatisierungen",
+                        "100+ gleichzeitige Nutzer",
+                        "99.9% Uptime SLA"
+                    ]
+                },
+                architecture: {
+                    title: "Architektur",
+                    items: [
+                        "Multi-Region Deployment",
+                        "Auto-Scaling mit AKS",
+                        "Global Data Replication",
+                        "Zero-Downtime Deployments",
+                        "Disaster Recovery <1h RTO"
+                    ]
+                }
+            }
+        },
+
+        testimonial: {
+            text: "Diese Plattform hat unsere Power Platform Governance revolutioniert. Was früher Wochen dauerte, passiert jetzt in Minuten - vollautomatisiert und compliant.",
+            author: "Michael Schmidt",
+            position: "Head of IT Governance",
+            company: "Fortune 500 Company"
+        },
+
+        learnings: {
+            title: "Lessons Learned",
+            items: [
+                "Event-Driven Architecture ist essentiell für Skalierbarkeit bei Enterprise-Workloads",
+                "PowerShell Core ermöglicht Cross-Platform Automation ohne Windows-Abhängigkeit",
+                "GraphQL reduzierte die API-Calls um 60% durch effizientes Data Fetching",
+                "Policy as Code vereinfachte Governance-Management erheblich",
+                "Incremental Sync mit Delta Queries ist kritisch für Performance"
+            ]
+        },
+
+        future: {
+            title: "Zukunftsperspektiven",
+            description: "Die Plattform wird kontinuierlich erweitert und verbessert.",
+            plans: [
+                "AI-Powered Insights mit Anomalie-Erkennung",
+                "Microsoft Copilot Integration für Natural Language Governance",
+                "Fabric Analytics für erweiterte BI-Integration",
+                "Container Apps für serverlose PowerShell-Execution",
+                "Zero Trust Security Model Implementation",
+                "Cross-Cloud Support für AWS und Google Cloud"
+            ]
+        }
+    }
+};
+
+export default powerPlatformGovernance;

src/i18n/locales/de/portfolio/projects/smart-warehouse.ts

@@ -0,0 +1,222 @@
+// src/i18n/locales/de/portfolio/projects/smart-warehouse.ts
+export const smartWarehouse = {
+    meta: {
+        slug: 'smart-warehouse',
+        title: "Intelligente Lagerverwaltung mit Computer Vision",
+        description: "KI-gestütztes System zur Echtzeit-Bestandsführung und Optimierung von Lagerprozessen",
+        excerpt: "Entwicklung eines autonomen Lagerverwaltungssystems mit Computer Vision, IoT-Sensorik und Machine Learning für präzise Bestandsführung.",
+        date: "2024-06",
+        category: "AI & Automation",
+        client: "LogiTech Solutions GmbH",
+        duration: "4 Monate",
+        url: "https://warehouse-demo.example.com",
+        repository: "",
+        documentation: "/case-studies/smart-warehouse",
+        published: true,
+        featured: true,
+        technologies: ["YOLOv8", "Python", "FastAPI", "React", "PostgreSQL", "Docker", "Kubernetes", "IoT", "MQTT"],
+        tags: ["Computer Vision", "Machine Learning", "IoT", "Edge Computing", "Automation"]
+    },
+    content: {
+        intro: "Ein mittelständischer Logistikdienstleister transformierte seine manuelle Lagerverwaltung durch ein vollautomatisiertes System, das Computer Vision, IoT-Sensorik und Machine Learning kombiniert.",
+
+        challenge: {
+            title: "Die Herausforderung",
+            description: "Die manuelle Bestandsführung führte zu erheblichen operativen Problemen.",
+            points: [
+                "Diskrepanzen zwischen tatsächlichem und gebuchtem Bestand von bis zu 15%",
+                "Zeitintensive manuelle Inventuren (3-4 Tage pro Quartal)",
+                "Fehlende Echtzeit-Transparenz über Lagerbestände",
+                "Ineffiziente Lagerplatznutzung durch fehlende Optimierung",
+                "Hohe Personalkosten durch manuelle Prozesse"
+            ]
+        },
+
+        solution: {
+            title: "Die Lösung",
+            description: "Entwicklung eines vollautomatisierten Lagerverwaltungssystems",
+            content: "Das System kombiniert Computer Vision, IoT-Sensorik und Machine Learning für eine kontinuierliche, präzise Bestandsführung ohne menschliches Eingreifen.",
+            points: [
+                "KI-gestützte Objekterkennung mittels hochauflösender Kameras",
+                "IoT-Gewichtssensoren zur Validierung",
+                "Predictive Analytics für Bestandsoptimierung",
+                "Echtzeit-Dashboard mit mobilem Zugriff",
+                "Automatische Nachbestellungstrigger"
+            ]
+        },
+
+        technical: {
+            title: "Technische Implementierung",
+            description: "Die Lösung basiert auf einer modularen Microservices-Architektur mit Edge Computing für Echtzeitverarbeitung:",
+            points: [
+                "YOLOv8 für präzise Objekterkennung",
+                "Edge Computing für <50ms Bildverarbeitung",
+                "Apache Kafka für Stream Processing von 2TB Daten/Tag",
+                "MQTT-basierte IoT-Integration mit 200+ Sensoren",
+                "PostgreSQL für Datenpersistenz",
+                "Kubernetes für Skalierbarkeit"
+            ]
+        },
+
+        features: {
+            title: "Kernfunktionen",
+            items: [
+                {
+                    title: "Echtzeit-Objekterkennung",
+                    description: "98,7% Genauigkeit bei der Bestandserfassung durch KI-gestützte Bilderkennung",
+                    icon: "camera"
+                },
+                {
+                    title: "IoT-Sensorintegration",
+                    description: "200+ Sensoren validieren CV-Ergebnisse durch Gewichtsmessungen",
+                    icon: "sensor"
+                },
+                {
+                    title: "Predictive Analytics",
+                    description: "Vorhersage von Bestandsbewegungen und automatische Nachbestellung",
+                    icon: "chart"
+                },
+                {
+                    title: "Mobile Dashboard",
+                    description: "Echtzeit-Zugriff auf alle Lagerdaten von überall",
+                    icon: "mobile"
+                }
+            ]
+        },
+
+        implementation: {
+            title: "Implementierungsphasen",
+            phases: [
+                {
+                    title: "Phase 1: Proof of Concept",
+                    duration: "4 Wochen",
+                    description: "Prototyp-Entwicklung und Modelltraining",
+                    tasks: [
+                        "Entwicklung eines Prototyps für einen Lagerbereich",
+                        "Training des ML-Modells mit 10.000+ annotierten Bildern",
+                        "Integration von 5 Testkameras und 20 IoT-Sensoren",
+                        "Validierung der Erkennungsgenauigkeit"
+                    ]
+                },
+                {
+                    title: "Phase 2: Skalierung",
+                    duration: "8 Wochen",
+                    description: "Vollständiger Rollout auf 5.000m² Lagerfläche",
+                    tasks: [
+                        "Installation von 45 Kameras und 200+ Sensoren",
+                        "Entwicklung des Echtzeit-Dashboards",
+                        "Integration in bestehendes ERP-System",
+                        "Performance-Optimierung"
+                    ]
+                },
+                {
+                    title: "Phase 3: Optimierung",
+                    duration: "4 Wochen",
+                    description: "Fine-Tuning und erweiterte Features",
+                    tasks: [
+                        "Fine-Tuning der ML-Modelle",
+                        "Implementierung von Predictive Analytics",
+                        "Mobile App Entwicklung",
+                        "Schulung der Mitarbeiter"
+                    ]
+                }
+            ]
+        },
+
+        challenges: {
+            title: "Herausforderungen & Lösungen",
+            items: [
+                {
+                    challenge: "Variierende Lichtverhältnisse",
+                    solution: "HDR-Kameras mit adaptiver Bildvorverarbeitung und augmentierten Trainingsdaten"
+                },
+                {
+                    challenge: "Echtzeitverarbeitung großer Datenmengen",
+                    solution: "Edge Computing für Vorverarbeitung und Apache Kafka für Stream Processing"
+                },
+                {
+                    challenge: "Legacy-System Integration",
+                    solution: "Entwicklung eines Adapter-Layers mit bidirektionaler Synchronisation"
+                }
+            ]
+        },
+
+        results: {
+            title: "Ergebnisse",
+            description: "Das System transformierte die Lagerverwaltung vollständig:",
+            metrics: [
+                { label: "Erkennungsgenauigkeit", value: "98,7%" },
+                { label: "Reduktion Inventurzeit", value: "85%" },
+                { label: "Weniger Fehlbestände", value: "60%" },
+                { label: "Lagerplatznutzung", value: "+35%" },
+                { label: "ROI", value: "14 Monate" },
+                { label: "System-Uptime", value: "99,95%" }
+            ],
+            impact: "Die Echtzeit-Transparenz ermöglichte proaktive Entscheidungen und verhinderte Lieferengpässe. Mitarbeiter konnten sich auf wertschöpfende Tätigkeiten fokussieren, während die KI die Bestandsführung übernahm."
+        },
+
+        performance: {
+            title: "Performance Metriken",
+            metrics: {
+                processing: {
+                    title: "Verarbeitung",
+                    items: [
+                        "Bildverarbeitung: <50ms pro Frame",
+                        "API Response Time: p95 < 100ms",
+                        "Datenverarbeitung: 500 Events/Sekunde",
+                        "System Uptime: 99.95%"
+                    ]
+                },
+                scale: {
+                    title: "Skalierung",
+                    items: [
+                        "45 Kameras aktiv (bis 200 möglich)",
+                        "200+ IoT Sensoren",
+                        "50+ Concurrent Users",
+                        "50TB Datenspeicher"
+                    ]
+                },
+                ml: {
+                    title: "ML Performance",
+                    items: [
+                        "mAP@50: 0.92",
+                        "Inference Time: 23ms",
+                        "False Positive Rate: <2%",
+                        "Model Size: 138MB"
+                    ]
+                }
+            }
+        },
+
+        testimonial: {
+            text: "Die Implementierung hat unsere Lagerprozesse revolutioniert. Was früher Tage dauerte, passiert jetzt in Echtzeit. Die Genauigkeit und Effizienz sind beeindruckend.",
+            author: "Thomas Weber",
+            position: "Head of Logistics",
+            company: "LogiTech Solutions GmbH"
+        },
+
+        learnings: {
+            title: "Lessons Learned",
+            items: [
+                "Edge Computing ist essentiell: Die Vorverarbeitung direkt an der Kamera reduzierte die Netzwerklast um 70%",
+                "Datenqualität vor Quantität: 1.000 hochqualitative Annotationen waren wertvoller als 10.000 automatisch generierte",
+                "Iterative Entwicklung: Frühe Pilotierung in einem Bereich ermöglichte schnelle Anpassungen",
+                "Change Management: Frühzeitige Einbindung der Mitarbeiter war entscheidend für die Akzeptanz"
+            ]
+        },
+
+        future: {
+            title: "Zukunftsperspektiven",
+            description: "Das System wurde als White-Label-Lösung konzipiert und kann mit minimalen Anpassungen in anderen Lagern eingesetzt werden.",
+            plans: [
+                "Integration von Robotik für automatisierte Kommissionierung",
+                "Erweiterung auf Außenlager und mobile Einheiten",
+                "KI-basierte Vorhersage von Wartungsbedarf",
+                "Blockchain-Integration für Supply Chain Transparenz",
+                "AR-Brillen für Lagermitarbeiter mit visuellen Hinweisen"
+            ]
+        }
+    }
+};
+
+export default smartWarehouse;

src/i18n/locales/en/portfolio/index.ts

@@ -1,5 +1,8 @@
 // src/i18n/locales/en/portfolio/index.ts
 import { aiDataReader } from './projects/ai-data-reader';
+import kamenpro from './projects/kamenpro';
+import smartWarehouse from './projects/smart-warehouse';
+import powerPlatformGovernance from './projects/power-platform-governance';
 export const portfolio = {
     // Meta information for the portfolio page
     seo: {
@@ -24,7 +27,10 @@ export const portfolio = {
             'Data Processing': 'Data Processing',
             'Content Production': 'Content Production',
             'Machine Learning': 'Machine Learning',
-            'Automation': 'Automation'
+            'Automation': 'Automation',
+            'Web Development': 'Web Development',
+            'AI & Automation': 'AI & Automation',
+            'Enterprise Software': 'Enterprise Software'
         }
     },
     // Sort options
@@ -49,5 +55,8 @@ export const portfolio = {
     // All projects
     projects: {
         'ai-data-reader': aiDataReader,
+        'kamenpro': kamenpro,
+        'smart-warehouse': smartWarehouse,
+        'power-platform-governance': powerPlatformGovernance,
     }
 };

src/i18n/locales/en/portfolio/projects/kamenpro.ts

@@ -0,0 +1,135 @@
+// src/i18n/locales/en/portfolio/projects/kamenpro.ts
+export const kamenpro = {
+    meta: {
+        slug: 'kamenpro',
+        title: "KamenPro: Digital Transformation for Decorative Stone Cladding",
+        description: "Development of a modern multi-location PWA for a decorative stone cladding manufacturer from Bijeljina using React 18.3 and Supabase",
+        excerpt: "From stone to pixel: How a traditional craft business generates 300% more inquiries through modern web technology.",
+        date: "2024-11",
+        category: "Web Development",
+        client: "KamenPro - Željko",
+        duration: "3 months",
+        url: "https://kamenpro.net",
+        repository: "",
+        documentation: "",
+        published: true,
+        featured: true,
+        technologies: ["React 18.3", "TypeScript", "Vite", "Supabase", "Framer Motion", "TailwindCSS", "PWA", "Schema.org"],
+        tags: ["Multi-Location SEO", "E-Commerce", "PWA", "Local Business", "Performance"]
+    },
+    content: {
+        intro: "KamenPro, an established manufacturer of decorative stone cladding from Bijeljina, faced the challenge of bringing their traditional craft into the digital world. This case study shows how modern web technology helped a local craft business achieve regional success.",
+
+        challenge: {
+            title: "The Challenge",
+            description: "As a manufacturer of high-quality stone cladding made from white cement, KamenPro lacked the digital presence to compete with online competition.",
+            points: [
+                "No digital presence despite high online demand",
+                "Customers searched online for 'dekorativni kamen' without finding KamenPro",
+                "Missing product presentation for 3 different stone textures",
+                "No local SEO presence in Bijeljina, Brčko and Tuzla",
+                "Loss of potential customers to digitally present competition"
+            ]
+        },
+
+        solution: {
+            title: "The Solution Approach",
+            description: "A modern PWA with multi-location SEO strategy for maximum local visibility",
+            content: "We developed a high-performance Progressive Web App that makes KamenPro's craftsmanship digitally tangible. The focus was on local discoverability in three cities and optimal product presentation for builders and architects.",
+            points: [
+                "Multi-location SEO for Bijeljina, Brčko and Tuzla",
+                "Product catalog with HD images of stone textures",
+                "PWA for offline availability on construction sites",
+                "Supabase backend for product management and inquiries",
+                "Schema.org LocalBusiness for optimal Google presence"
+            ]
+        },
+
+        technical: {
+            title: "Technical Implementation",
+            description: "Multi-location SEO architecture with location-specific landing pages:",
+            points: [
+                "Location-based routing for 3 cities",
+                "Product catalog system with Supabase",
+                "Image optimization for heavy stone texture photos",
+                "PWA for offline product catalog",
+                "Schema.org LocalBusiness for each city"
+            ],
+            code: `// Multi-location SEO with Schema.org
+const LocationPage: React.FC<{city: string}> = ({ city }) => {
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "LocalBusiness",
+    "name": \`KamenPro \${city}\`,
+    "description": \`Decorative stone and facade cladding in \${city}\`,
+    "telephone": "+387 65 678 634",
+    "address": {
+      "@type": "PostalAddress",
+      "addressLocality": city,
+      "addressCountry": "BA"
+    },
+    "areaServed": {
+      "@type": "GeoCircle",
+      "geoRadius": "50000"
+    }
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Decorative Stone {city} | KamenPro</title>
+        <script type="application/ld+json">
+          {JSON.stringify(structuredData)}
+        </script>
+      </Helmet>
+      <LocationHero city={city} />
+      <ProductShowcase />
+      <ContactSection city={city} />
+    </>
+  );
+};
+
+// Product management with Supabase
+interface StoneProduct {
+  id: string;
+  name: string;
+  type: 'decorative_stone' | 'rustic_brick';
+  dimensions: { length: 44, width: 8.5, thickness: 15 };
+  price_per_m2: number; // 33-40 BAM
+  weight_per_m2: 32; // kg
+  textures: string[]; // 3 different
+  available_colors: string[];
+}`
+        },
+
+        implementation: {
+            title: "Local SEO Success",
+            description: "Through targeted multi-location optimization, we achieved top rankings:",
+            points: [
+                "Rank #1 for 'dekorativni kamen bijeljina'",
+                "Rank #2 for 'fasadne obloge brčko'",
+                "Rank #1 for 'rustik cigla tuzla'",
+                "Google My Business integration for all locations",
+                "Local backlinks from construction companies"
+            ]
+        },
+
+        results: {
+            title: "Measurable Business Results",
+            description: "The digital transformation delivered impressive results:",
+            points: [
+                "300% more inquiries in the first 3 months",
+                "From 0 to rank 1-3 for local searches",
+                "45 inquiries/month instead of ~12 previously",
+                "25-30 projects/quarter instead of 8-10",
+                "ROI of 275% in 6 months",
+                "Expansion into new markets through online presence"
+            ]
+        },
+
+        conclusion: "KamenPro's digital transformation impressively shows how a traditional craft business can open up new markets through modern web technology. The combination of multi-location SEO, optimized product presentation and technical excellence led to a tripling of customer inquiries. Particularly remarkable: A local stone cladding manufacturer from Bijeljina now reaches customers throughout the region - proof that thoughtful digitalization brings measurable success even in traditional crafts."
+    }
+};
+
+// Re-export for compatibility with the project import system
+export default kamenpro;

src/i18n/locales/en/portfolio/projects/power-platform-governance.ts

@@ -0,0 +1,244 @@
+// src/i18n/locales/en/portfolio/projects/power-platform-governance.ts
+export const powerPlatformGovernance = {
+    meta: {
+        slug: 'power-platform-governance',
+        title: "Power Platform Governance & Automation Suite",
+        description: "Enterprise governance platform for Microsoft Power Platform and SharePoint Online",
+        excerpt: "Central management, monitoring, and automation of the entire M365 environment - from tenant provisioning to compliance monitoring.",
+        date: "2024-09",
+        category: "Enterprise Software",
+        client: "Enterprise CoE Teams",
+        duration: "6 months",
+        url: "https://governance-demo.azurewebsites.net",
+        repository: "",
+        documentation: "/docs/power-platform-governance",
+        published: true,
+        featured: true,
+        technologies: ["React", "TypeScript", "Node.js", "Microsoft Graph", "PowerShell", "Azure Functions", "GraphQL", "Fluent UI"],
+        tags: ["Microsoft 365", "Power Platform", "SharePoint", "Governance", "Automation", "Enterprise"]
+    },
+    content: {
+        intro: "A comprehensive enterprise governance platform that enables IT administrators and Power Platform CoE teams to centrally manage and automate their entire M365 environment.",
+
+        challenge: {
+            title: "The Challenge",
+            description: "Uncontrolled growth of Power Apps, Flows, and SharePoint sites led to critical issues.",
+            points: [
+                "Shadow IT through ungoverned citizen development",
+                "Compliance risks and data protection violations",
+                "Exploding license costs from unused resources",
+                "Lack of visibility into the Power Platform landscape",
+                "Manual, error-prone provisioning processes",
+                "Inconsistent governance policies across teams"
+            ]
+        },
+
+        solution: {
+            title: "The Solution",
+            description: "A central governance platform with real-time monitoring and automation",
+            content: "The platform combines modern web technologies with Microsoft 365 APIs to enable seamless integration and complete control over the entire Power Platform environment.",
+            points: [
+                "Automated Provisioning Hub for sites, teams, and environments",
+                "Real-Time Monitoring Dashboard with live activity streams",
+                "Power Platform Governance Center with DLP policy enforcement",
+                "Compliance & Security Suite with permission analyzer",
+                "PowerShell Automation Framework for custom operations",
+                "Intelligent Resource Optimization with ML-based predictions"
+            ]
+        },
+
+        technical: {
+            title: "Technical Implementation",
+            description: "The solution is based on a modern microservices architecture with event-driven design:",
+            points: [
+                "React 18.3 with TypeScript for type-safe frontend development",
+                "Fluent UI v9 for native Microsoft look & feel",
+                "GraphQL API with Apollo Server for efficient data queries",
+                "Azure Functions for serverless automation",
+                "PowerShell 7.4 Core for M365 operations",
+                "Azure Service Bus for asynchronous job processing",
+                "Cosmos DB for global data replication"
+            ]
+        },
+
+        features: {
+            title: "Key Features",
+            items: [
+                {
+                    title: "Automated Provisioning Hub",
+                    description: "Template-based SharePoint site creation with bulk provisioning and post-provisioning workflows",
+                    icon: "automation"
+                },
+                {
+                    title: "Real-Time Monitoring",
+                    description: "Live activity streams with real-time updates via WebSockets and GraphQL subscriptions",
+                    icon: "monitoring"
+                },
+                {
+                    title: "Permission Analyzer",
+                    description: "Cross-tenant permission reports with overprivileged users detection and external sharing audit",
+                    icon: "security"
+                },
+                {
+                    title: "PowerShell Framework",
+                    description: "120+ custom cmdlets with centralized script library and scheduled automation",
+                    icon: "powershell"
+                },
+                {
+                    title: "Compliance Suite",
+                    description: "DLP policy builder with sensitive data discovery and automated remediation",
+                    icon: "compliance"
+                },
+                {
+                    title: "Resource Optimizer",
+                    description: "ML-based usage prediction with automated cleanup and cost allocation",
+                    icon: "optimization"
+                }
+            ]
+        },
+
+        implementation: {
+            title: "Implementation Phases",
+            phases: [
+                {
+                    title: "Phase 1: Foundation",
+                    duration: "6 weeks",
+                    description: "Architecture setup and core services",
+                    tasks: [
+                        "Azure infrastructure setup with Terraform",
+                        "GraphQL API and authentication service",
+                        "Microsoft Graph integration",
+                        "PowerShell execution framework"
+                    ]
+                },
+                {
+                    title: "Phase 2: Core Features",
+                    duration: "10 weeks",
+                    description: "Development of main functionalities",
+                    tasks: [
+                        "Provisioning engine with template system",
+                        "Real-time monitoring dashboard",
+                        "Permission analyzer implementation",
+                        "DLP policy management"
+                    ]
+                },
+                {
+                    title: "Phase 3: Intelligence",
+                    duration: "8 weeks",
+                    description: "ML features and automation",
+                    tasks: [
+                        "Resource usage prediction model",
+                        "Automated cleanup workflows",
+                        "Cost optimization engine",
+                        "Anomaly detection system"
+                    ]
+                }
+            ]
+        },
+
+        challenges: {
+            title: "Challenges & Solutions",
+            items: [
+                {
+                    challenge: "API rate limiting",
+                    solution: "Intelligent request batching with exponential backoff and Redis-based caching"
+                },
+                {
+                    challenge: "Multi-tenant isolation",
+                    solution: "Separate databases per tenant with row-level security and encryption at rest"
+                },
+                {
+                    challenge: "Real-time updates with large data volumes",
+                    solution: "WebSocket-based updates with GraphQL subscriptions and delta queries"
+                },
+                {
+                    challenge: "PowerShell execution security",
+                    solution: "Sandboxed execution with Azure Container Instances and Just Enough Administration"
+                }
+            ]
+        },
+
+        results: {
+            title: "Results",
+            description: "The platform completely transformed Power Platform governance:",
+            metrics: [
+                { label: "Provisioning time", value: "95% faster" },
+                { label: "Compliance rate", value: "94%" },
+                { label: "Cost reduction", value: "40%" },
+                { label: "Admin productivity", value: "3x" },
+                { label: "Incident response", value: "80% faster" },
+                { label: "Shadow IT reduction", value: "90%" }
+            ],
+            impact: "The solution enabled organizations to find the balance between innovation and control. Citizen developers could work safely while IT maintained full governance."
+        },
+
+        performance: {
+            title: "Performance & Scaling",
+            metrics: {
+                technical: {
+                    title: "Technical Metrics",
+                    items: [
+                        "35,000+ lines of code",
+                        "45+ React components",
+                        "120+ PowerShell cmdlets",
+                        "80+ GraphQL endpoints",
+                        "92% test coverage"
+                    ]
+                },
+                scale: {
+                    title: "Scale",
+                    items: [
+                        "25+ enterprise tenants",
+                        "50,000+ managed resources",
+                        "5,000+ daily automations",
+                        "100+ concurrent users",
+                        "99.9% uptime SLA"
+                    ]
+                },
+                architecture: {
+                    title: "Architecture",
+                    items: [
+                        "Multi-region deployment",
+                        "Auto-scaling with AKS",
+                        "Global data replication",
+                        "Zero-downtime deployments",
+                        "Disaster recovery <1h RTO"
+                    ]
+                }
+            }
+        },
+
+        testimonial: {
+            text: "This platform revolutionized our Power Platform governance. What used to take weeks now happens in minutes - fully automated and compliant.",
+            author: "Michael Schmidt",
+            position: "Head of IT Governance",
+            company: "Fortune 500 Company"
+        },
+
+        learnings: {
+            title: "Lessons Learned",
+            items: [
+                "Event-driven architecture is essential for scalability with enterprise workloads",
+                "PowerShell Core enables cross-platform automation without Windows dependency",
+                "GraphQL reduced API calls by 60% through efficient data fetching",
+                "Policy as Code significantly simplified governance management",
+                "Incremental sync with delta queries is critical for performance"
+            ]
+        },
+
+        future: {
+            title: "Future Perspectives",
+            description: "The platform is continuously being expanded and improved.",
+            plans: [
+                "AI-powered insights with anomaly detection",
+                "Microsoft Copilot integration for natural language governance",
+                "Fabric Analytics for advanced BI integration",
+                "Container Apps for serverless PowerShell execution",
+                "Zero Trust security model implementation",
+                "Cross-cloud support for AWS and Google Cloud"
+            ]
+        }
+    }
+};
+
+export default powerPlatformGovernance;

src/i18n/locales/en/portfolio/projects/smart-warehouse.ts

@@ -0,0 +1,222 @@
+// src/i18n/locales/en/portfolio/projects/smart-warehouse.ts
+export const smartWarehouse = {
+    meta: {
+        slug: 'smart-warehouse',
+        title: "Intelligent Warehouse Management with Computer Vision",
+        description: "AI-powered system for real-time inventory management and warehouse process optimization",
+        excerpt: "Development of an autonomous warehouse management system with Computer Vision, IoT sensors, and Machine Learning for precise inventory tracking.",
+        date: "2024-06",
+        category: "AI & Automation",
+        client: "LogiTech Solutions GmbH",
+        duration: "4 months",
+        url: "https://warehouse-demo.example.com",
+        repository: "",
+        documentation: "/case-studies/smart-warehouse",
+        published: true,
+        featured: true,
+        technologies: ["YOLOv8", "Python", "FastAPI", "React", "PostgreSQL", "Docker", "Kubernetes", "IoT", "MQTT"],
+        tags: ["Computer Vision", "Machine Learning", "IoT", "Edge Computing", "Automation"]
+    },
+    content: {
+        intro: "A mid-sized logistics provider transformed their manual warehouse management through a fully automated system combining Computer Vision, IoT sensors, and Machine Learning.",
+
+        challenge: {
+            title: "The Challenge",
+            description: "Manual inventory management led to significant operational issues.",
+            points: [
+                "Discrepancies between actual and recorded stock of up to 15%",
+                "Time-intensive manual inventories (3-4 days per quarter)",
+                "Lack of real-time transparency on inventory levels",
+                "Inefficient storage space utilization due to lack of optimization",
+                "High personnel costs from manual processes"
+            ]
+        },
+
+        solution: {
+            title: "The Solution",
+            description: "Development of a fully automated warehouse management system",
+            content: "The system combines Computer Vision, IoT sensors, and Machine Learning for continuous, precise inventory tracking without human intervention.",
+            points: [
+                "AI-powered object detection using high-resolution cameras",
+                "IoT weight sensors for validation",
+                "Predictive Analytics for inventory optimization",
+                "Real-time dashboard with mobile access",
+                "Automatic reorder triggers"
+            ]
+        },
+
+        technical: {
+            title: "Technical Implementation",
+            description: "The solution is based on a modular microservices architecture with edge computing for real-time processing:",
+            points: [
+                "YOLOv8 for precise object detection",
+                "Edge Computing for <50ms image processing",
+                "Apache Kafka for stream processing of 2TB data/day",
+                "MQTT-based IoT integration with 200+ sensors",
+                "PostgreSQL for data persistence",
+                "Kubernetes for scalability"
+            ]
+        },
+
+        features: {
+            title: "Core Features",
+            items: [
+                {
+                    title: "Real-time Object Detection",
+                    description: "98.7% accuracy in inventory tracking through AI-powered image recognition",
+                    icon: "camera"
+                },
+                {
+                    title: "IoT Sensor Integration",
+                    description: "200+ sensors validate CV results through weight measurements",
+                    icon: "sensor"
+                },
+                {
+                    title: "Predictive Analytics",
+                    description: "Forecasting inventory movements and automatic reordering",
+                    icon: "chart"
+                },
+                {
+                    title: "Mobile Dashboard",
+                    description: "Real-time access to all warehouse data from anywhere",
+                    icon: "mobile"
+                }
+            ]
+        },
+
+        implementation: {
+            title: "Implementation Phases",
+            phases: [
+                {
+                    title: "Phase 1: Proof of Concept",
+                    duration: "4 weeks",
+                    description: "Prototype development and model training",
+                    tasks: [
+                        "Development of a prototype for one warehouse area",
+                        "Training the ML model with 10,000+ annotated images",
+                        "Integration of 5 test cameras and 20 IoT sensors",
+                        "Validation of detection accuracy"
+                    ]
+                },
+                {
+                    title: "Phase 2: Scaling",
+                    duration: "8 weeks",
+                    description: "Complete rollout to 5,000m² warehouse space",
+                    tasks: [
+                        "Installation of 45 cameras and 200+ sensors",
+                        "Development of real-time dashboard",
+                        "Integration with existing ERP system",
+                        "Performance optimization"
+                    ]
+                },
+                {
+                    title: "Phase 3: Optimization",
+                    duration: "4 weeks",
+                    description: "Fine-tuning and advanced features",
+                    tasks: [
+                        "Fine-tuning of ML models",
+                        "Implementation of Predictive Analytics",
+                        "Mobile app development",
+                        "Employee training"
+                    ]
+                }
+            ]
+        },
+
+        challenges: {
+            title: "Challenges & Solutions",
+            items: [
+                {
+                    challenge: "Varying lighting conditions",
+                    solution: "HDR cameras with adaptive image preprocessing and augmented training data"
+                },
+                {
+                    challenge: "Real-time processing of large data volumes",
+                    solution: "Edge Computing for preprocessing and Apache Kafka for stream processing"
+                },
+                {
+                    challenge: "Legacy system integration",
+                    solution: "Development of an adapter layer with bidirectional synchronization"
+                }
+            ]
+        },
+
+        results: {
+            title: "Results",
+            description: "The system completely transformed warehouse management:",
+            metrics: [
+                { label: "Detection accuracy", value: "98.7%" },
+                { label: "Inventory time reduction", value: "85%" },
+                { label: "Fewer stock discrepancies", value: "60%" },
+                { label: "Storage space utilization", value: "+35%" },
+                { label: "ROI", value: "14 months" },
+                { label: "System uptime", value: "99.95%" }
+            ],
+            impact: "Real-time transparency enabled proactive decisions and prevented supply bottlenecks. Employees could focus on value-adding activities while AI handled inventory management."
+        },
+
+        performance: {
+            title: "Performance Metrics",
+            metrics: {
+                processing: {
+                    title: "Processing",
+                    items: [
+                        "Image processing: <50ms per frame",
+                        "API Response Time: p95 < 100ms",
+                        "Data processing: 500 events/second",
+                        "System Uptime: 99.95%"
+                    ]
+                },
+                scale: {
+                    title: "Scaling",
+                    items: [
+                        "45 cameras active (up to 200 possible)",
+                        "200+ IoT sensors",
+                        "50+ concurrent users",
+                        "50TB data storage"
+                    ]
+                },
+                ml: {
+                    title: "ML Performance",
+                    items: [
+                        "mAP@50: 0.92",
+                        "Inference Time: 23ms",
+                        "False Positive Rate: <2%",
+                        "Model Size: 138MB"
+                    ]
+                }
+            }
+        },
+
+        testimonial: {
+            text: "The implementation revolutionized our warehouse processes. What used to take days now happens in real-time. The accuracy and efficiency are impressive.",
+            author: "Thomas Weber",
+            position: "Head of Logistics",
+            company: "LogiTech Solutions GmbH"
+        },
+
+        learnings: {
+            title: "Lessons Learned",
+            items: [
+                "Edge Computing is essential: Preprocessing directly at the camera reduced network load by 70%",
+                "Data quality over quantity: 1,000 high-quality annotations were more valuable than 10,000 automatically generated ones",
+                "Iterative development: Early piloting in one area enabled quick adjustments",
+                "Change management: Early involvement of employees was crucial for acceptance"
+            ]
+        },
+
+        future: {
+            title: "Future Perspectives",
+            description: "The system was designed as a white-label solution and can be deployed in other warehouses with minimal adjustments.",
+            plans: [
+                "Integration of robotics for automated picking",
+                "Extension to external warehouses and mobile units",
+                "AI-based prediction of maintenance needs",
+                "Blockchain integration for supply chain transparency",
+                "AR glasses for warehouse workers with visual hints"
+            ]
+        }
+    }
+};
+
+export default smartWarehouse;

src/i18n/locales/sr/portfolio/index.ts

@@ -1,5 +1,8 @@
 // src/i18n/locales/sr/portfolio/index.ts
 import { aiDataReader } from './projects/ai-data-reader';
+import kamenpro from './projects/kamenpro';
+import smartWarehouse from './projects/smart-warehouse';
+import powerPlatformGovernance from './projects/power-platform-governance';
 export const portfolio = {
     // Meta informacije za portfolio stranicu
     seo: {
@@ -24,7 +27,10 @@ export const portfolio = {
             'Data Processing': 'Obrada podataka',
             'Content Production': 'Produkcija sadržaja',
             'Machine Learning': 'Machine Learning',
-            'Automation': 'Automatizacija'
+            'Automation': 'Automatizacija',
+            'Web Development': 'Web razvoj',
+            'AI & Automation': 'AI & Automatizacija',
+            'Enterprise Software': 'Enterprise Software'
         }
     },
     // Opcije sortiranja
@@ -49,5 +55,8 @@ export const portfolio = {
     // Svi projekti
     projects: {
         'ai-data-reader': aiDataReader,
+        'kamenpro': kamenpro,
+        'smart-warehouse': smartWarehouse,
+        'power-platform-governance': powerPlatformGovernance,
     }
 };

src/i18n/locales/sr/portfolio/projects/ai-data-reader.ts

@@ -2,7 +2,7 @@
 export const aiDataReader = {
     meta: {
         slug: 'ai-data-reader',
-        title: "AI održavanje podataka o proizvodima iz PDF fajlova",
+        title: "Veštačka inteligencija za ekstrakciju podataka iz PDF dokumenata",
         description: "Razvoj automatizovanog sistema za ekstrakciju i strukturiranje podataka o proizvodima iz PDF dokumenata",
         excerpt: "Integracija Claude AI za inteligentnu obradu informacija o proizvodima i besprekornu JTL-ERP integraciju.",
         date: "2024-02",

src/i18n/locales/sr/portfolio/projects/kamenpro.ts

@@ -0,0 +1,135 @@
+// src/i18n/locales/sr/portfolio/projects/kamenpro.ts
+export const kamenpro = {
+    meta: {
+        slug: 'kamenpro',
+        title: "KamenPro: Digitalna transformacija za dekorativni kamen",
+        description: "Razvoj moderne multi-lokacijske PWA aplikacije za proizvođača dekorativnog kamena iz Bijeljine koristeći React 18.3 i Supabase",
+        excerpt: "Od kamena do piksela: Kako tradicionalna zanatska radnja generiše 300% više upita kroz modernu web tehnologiju.",
+        date: "2024-11",
+        category: "Web Development",
+        client: "KamenPro - Željko",
+        duration: "3 meseca",
+        url: "https://kamenpro.net",
+        repository: "",
+        documentation: "",
+        published: true,
+        featured: true,
+        technologies: ["React 18.3", "TypeScript", "Vite", "Supabase", "Framer Motion", "TailwindCSS", "PWA", "Schema.org"],
+        tags: ["Multi-Location SEO", "E-Commerce", "PWA", "Lokalni biznis", "Performance"]
+    },
+    content: {
+        intro: "KamenPro, etablirani proizvođač dekorativnog kamena iz Bijeljine, suočio se sa izazovom prenošenja svog tradicionalnog zanata u digitalni svet. Ova studija slučaja pokazuje kako moderna web tehnologija pomaže lokalnoj zanatskoj radnji da postigne regionalni uspeh.",
+
+        challenge: {
+            title: "Izazov",
+            description: "Kao proizvođač visokokvalitetnih kamenih obloga od belog cementa, KamenPro-u je nedostajala digitalna prezentacija za takmičenje sa online konkurencijom.",
+            points: [
+                "Bez digitalne prezentacije uprkos visokoj online potražnji",
+                "Kupci su tražili 'dekorativni kamen' bez pronalaženja KamenPro",
+                "Nedostaje prezentacija proizvoda za 3 različite teksture kamena",
+                "Bez lokalne SEO prezentacije u Bijeljini, Brčkom i Tuzli",
+                "Gubitak potencijalnih kupaca zbog digitalno prisutne konkurencije"
+            ]
+        },
+
+        solution: {
+            title: "Pristup rešenju",
+            description: "Moderna PWA sa multi-lokacijskom SEO strategijom za maksimalnu lokalnu vidljivost",
+            content: "Razvili smo visoko-performantnu Progressive Web aplikaciju koja čini KamenPro-ov zanat digitalno opipljivim. Fokus je bio na lokalnoj vidljivosti u tri grada i optimalnoj prezentaciji proizvoda za graditelje i arhitekte.",
+            points: [
+                "Multi-lokacijski SEO za Bijeljinu, Brčko i Tuzlu",
+                "Katalog proizvoda sa HD slikama tekstura kamena",
+                "PWA za offline dostupnost na gradilištima",
+                "Supabase backend za upravljanje proizvodima i upitima",
+                "Schema.org LocalBusiness za optimalnu Google prezentaciju"
+            ]
+        },
+
+        technical: {
+            title: "Tehnička implementacija",
+            description: "Multi-lokacijska SEO arhitektura sa lokacijski specifičnim landing stranicama:",
+            points: [
+                "Rutiranje bazirano na lokaciji za 3 grada",
+                "Sistem kataloga proizvoda sa Supabase",
+                "Optimizacija slika za teške fotografije teksture kamena",
+                "PWA za offline katalog proizvoda",
+                "Schema.org LocalBusiness za svaki grad"
+            ],
+            code: `// Multi-lokacijski SEO sa Schema.org
+const LocationPage: React.FC<{city: string}> = ({ city }) => {
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "LocalBusiness",
+    "name": \`KamenPro \${city}\`,
+    "description": \`Dekorativni kamen i fasadne obloge u \${city}\`,
+    "telephone": "+387 65 678 634",
+    "address": {
+      "@type": "PostalAddress",
+      "addressLocality": city,
+      "addressCountry": "BA"
+    },
+    "areaServed": {
+      "@type": "GeoCircle",
+      "geoRadius": "50000"
+    }
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Dekorativni kamen {city} | KamenPro</title>
+        <script type="application/ld+json">
+          {JSON.stringify(structuredData)}
+        </script>
+      </Helmet>
+      <LocationHero city={city} />
+      <ProductShowcase />
+      <ContactSection city={city} />
+    </>
+  );
+};
+
+// Upravljanje proizvodima sa Supabase
+interface StoneProduct {
+  id: string;
+  name: string;
+  type: 'decorative_stone' | 'rustic_brick';
+  dimensions: { length: 44, width: 8.5, thickness: 15 };
+  price_per_m2: number; // 33-40 BAM
+  weight_per_m2: 32; // kg
+  textures: string[]; // 3 različite
+  available_colors: string[];
+}`
+        },
+
+        implementation: {
+            title: "Lokalni SEO uspesi",
+            description: "Kroz ciljanu multi-lokacijsku optimizaciju postigli smo top rangiranja:",
+            points: [
+                "Rang #1 za 'dekorativni kamen bijeljina'",
+                "Rang #2 za 'fasadne obloge brčko'",
+                "Rang #1 za 'rustik cigla tuzla'",
+                "Google My Business integracija za sve lokacije",
+                "Lokalni backlink-ovi od građevinskih kompanija"
+            ]
+        },
+
+        results: {
+            title: "Merljivi poslovni rezultati",
+            description: "Digitalna transformacija donela je impresivne rezultate:",
+            points: [
+                "300% više upita u prva 3 meseca",
+                "Od 0 do ranga 1-3 za lokalne pretrage",
+                "45 upita/mesec umesto prethodnih ~12",
+                "25-30 projekata/kvartal umesto 8-10",
+                "ROI od 275% za 6 meseci",
+                "Ekspanzija na nova tržišta kroz online prisustvo"
+            ]
+        },
+
+        conclusion: "Digitalna transformacija KamenPro impresivno pokazuje kako tradicionalna zanatska radnja može otvoriti nova tržišta kroz modernu web tehnologiju. Kombinacija multi-lokacijskog SEO, optimizovane prezentacije proizvoda i tehničke izvrsnosti dovela je do utrostručavanja upita kupaca. Posebno značajno: lokalni proizvođač kamenih obloga iz Bijeljine sada dostiže kupce u celom regionu - dokaz da promišljena digitalizacija donosi merljive uspehe čak i u tradicionalnom zanatu."
+    }
+};
+
+// Re-export za kompatibilnost sa sistemom uvoza projekata
+export default kamenpro;

src/i18n/locales/sr/portfolio/projects/power-platform-governance.ts

@@ -0,0 +1,244 @@
+// src/i18n/locales/sr/portfolio/projects/power-platform-governance.ts
+export const powerPlatformGovernance = {
+    meta: {
+        slug: 'power-platform-governance',
+        title: "Power Platform Governance & Automation Suite",
+        description: "Enterprise platforma za upravljanje Microsoft Power Platform i SharePoint Online",
+        excerpt: "Centralno upravljanje, monitoring i automatizacija celokupnog M365 okruženja - od provizioniranja do praćenja usklađenosti.",
+        date: "2024-09",
+        category: "Enterprise Software",
+        client: "Enterprise CoE timovi",
+        duration: "6 meseci",
+        url: "https://governance-demo.azurewebsites.net",
+        repository: "",
+        documentation: "/docs/power-platform-governance",
+        published: true,
+        featured: true,
+        technologies: ["React", "TypeScript", "Node.js", "Microsoft Graph", "PowerShell", "Azure Functions", "GraphQL", "Fluent UI"],
+        tags: ["Microsoft 365", "Power Platform", "SharePoint", "Upravljanje", "Automatizacija", "Enterprise"]
+    },
+    content: {
+        intro: "Sveobuhvatna enterprise platforma koja omogućava IT administratorima i Power Platform CoE timovima da centralno upravljaju i automatizuju celokupno M365 okruženje.",
+
+        challenge: {
+            title: "Izazov",
+            description: "Nekontrolisan rast Power Apps, Flows i SharePoint sajtova doveo je do kritičnih problema.",
+            points: [
+                "Shadow IT kroz neupravljani citizen development",
+                "Rizici usklađenosti i kršenje zaštite podataka",
+                "Eksplodirajući troškovi licenci zbog nekorišćenih resursa",
+                "Nedostatak vidljivosti u Power Platform pejzaž",
+                "Ručni, procesima skloni greškama provizioniranja",
+                "Nekonzistentne politike upravljanja među timovima"
+            ]
+        },
+
+        solution: {
+            title: "Rešenje",
+            description: "Centralna platforma za upravljanje sa real-time monitoringom i automatizacijom",
+            content: "Platforma kombinuje moderne web tehnologije sa Microsoft 365 API-jima kako bi omogućila besprekorno integrisanje i potpunu kontrolu nad celokupnim Power Platform okruženjem.",
+            points: [
+                "Automated Provisioning Hub za sajtove, timove i okruženja",
+                "Real-Time Monitoring Dashboard sa live activity stream-ovima",
+                "Power Platform Governance Center sa DLP policy enforcement",
+                "Compliance & Security Suite sa permission analyzer-om",
+                "PowerShell Automation Framework za prilagođene operacije",
+                "Intelligent Resource Optimization sa ML-baziranim predikcijama"
+            ]
+        },
+
+        technical: {
+            title: "Tehnička implementacija",
+            description: "Rešenje se zasniva na modernoj mikroservisnoj arhitekturi sa event-driven dizajnom:",
+            points: [
+                "React 18.3 sa TypeScript-om za type-safe frontend razvoj",
+                "Fluent UI v9 za prirodan Microsoft izgled",
+                "GraphQL API sa Apollo Server-om za efikasne upite podataka",
+                "Azure Functions za serverless automatizaciju",
+                "PowerShell 7.4 Core za M365 operacije",
+                "Azure Service Bus za asinhrono procesiranje poslova",
+                "Cosmos DB za globalnu replikaciju podataka"
+            ]
+        },
+
+        features: {
+            title: "Ključne funkcionalnosti",
+            items: [
+                {
+                    title: "Automated Provisioning Hub",
+                    description: "Kreiranje SharePoint sajtova bazirano na šablonima sa bulk provizioniranjem i post-provisioning workflow-ima",
+                    icon: "automation"
+                },
+                {
+                    title: "Real-Time Monitoring",
+                    description: "Live activity stream-ovi sa ažuriranjima u realnom vremenu preko WebSocket-a i GraphQL subscription-a",
+                    icon: "monitoring"
+                },
+                {
+                    title: "Permission Analyzer",
+                    description: "Cross-tenant izveštaji o dozvolama sa detekcijom overprivileged korisnika i audit eksternog deljenja",
+                    icon: "security"
+                },
+                {
+                    title: "PowerShell Framework",
+                    description: "120+ prilagođenih cmdlet-a sa centralizovanom bibliotekom skripti i zakazanom automatizacijom",
+                    icon: "powershell"
+                },
+                {
+                    title: "Compliance Suite",
+                    description: "DLP policy builder sa otkrivanjem osetljivih podataka i automatizovanom remedijacijom",
+                    icon: "compliance"
+                },
+                {
+                    title: "Resource Optimizer",
+                    description: "ML-bazirana predikcija korišćenja sa automatizovanim čišćenjem i alokacijom troškova",
+                    icon: "optimization"
+                }
+            ]
+        },
+
+        implementation: {
+            title: "Faze implementacije",
+            phases: [
+                {
+                    title: "Faza 1: Osnova",
+                    duration: "6 nedelja",
+                    description: "Postavljanje arhitekture i osnovnih servisa",
+                    tasks: [
+                        "Azure infrastruktura sa Terraform-om",
+                        "GraphQL API i servis autentifikacije",
+                        "Microsoft Graph integracija",
+                        "PowerShell framework za izvršavanje"
+                    ]
+                },
+                {
+                    title: "Faza 2: Osnovne funkcionalnosti",
+                    duration: "10 nedelja",
+                    description: "Razvoj glavnih funkcionalnosti",
+                    tasks: [
+                        "Provisioning engine sa sistemom šablona",
+                        "Real-time monitoring dashboard",
+                        "Implementacija permission analyzer-a",
+                        "DLP policy upravljanje"
+                    ]
+                },
+                {
+                    title: "Faza 3: Inteligencija",
+                    duration: "8 nedelja",
+                    description: "ML funkcionalnosti i automatizacija",
+                    tasks: [
+                        "Model predikcije korišćenja resursa",
+                        "Automatizovani cleanup workflow-i",
+                        "Engine za optimizaciju troškova",
+                        "Sistem detekcije anomalija"
+                    ]
+                }
+            ]
+        },
+
+        challenges: {
+            title: "Izazovi i rešenja",
+            items: [
+                {
+                    challenge: "API rate limiting",
+                    solution: "Inteligentno grupisanje zahteva sa eksponencijalnim backoff-om i Redis keširanje"
+                },
+                {
+                    challenge: "Multi-tenant izolacija",
+                    solution: "Odvojene baze podataka po tenant-u sa row-level bezbednošću i enkripcijom"
+                },
+                {
+                    challenge: "Real-time ažuriranja sa velikim količinama podataka",
+                    solution: "WebSocket ažuriranja sa GraphQL subscription-ima i delta upitima"
+                },
+                {
+                    challenge: "Bezbednost izvršavanja PowerShell-a",
+                    solution: "Sandboxed izvršavanje sa Azure Container Instances i Just Enough Administration"
+                }
+            ]
+        },
+
+        results: {
+            title: "Rezultati",
+            description: "Platforma je potpuno transformisala Power Platform upravljanje:",
+            metrics: [
+                { label: "Vreme provizioniranja", value: "95% brže" },
+                { label: "Stopa usklađenosti", value: "94%" },
+                { label: "Smanjenje troškova", value: "40%" },
+                { label: "Produktivnost admina", value: "3x" },
+                { label: "Incident response", value: "80% brže" },
+                { label: "Smanjenje Shadow IT", value: "90%" }
+            ],
+            impact: "Rešenje je omogućilo organizacijama da pronađu balans između inovacije i kontrole. Citizen developeri su mogli bezbedno da rade dok je IT zadržao potpuno upravljanje."
+        },
+
+        performance: {
+            title: "Performanse i skaliranje",
+            metrics: {
+                technical: {
+                    title: "Tehničke metrike",
+                    items: [
+                        "35.000+ linija koda",
+                        "45+ React komponenti",
+                        "120+ PowerShell cmdlet-a",
+                        "80+ GraphQL endpoint-a",
+                        "92% test pokrivenost"
+                    ]
+                },
+                scale: {
+                    title: "Skaliranje",
+                    items: [
+                        "25+ enterprise tenant-a",
+                        "50.000+ upravljanih resursa",
+                        "5.000+ dnevnih automatizacija",
+                        "100+ istovremenih korisnika",
+                        "99.9% uptime SLA"
+                    ]
+                },
+                architecture: {
+                    title: "Arhitektura",
+                    items: [
+                        "Multi-region deployment",
+                        "Auto-skaliranje sa AKS",
+                        "Globalna replikacija podataka",
+                        "Zero-downtime deployment",
+                        "Disaster recovery <1h RTO"
+                    ]
+                }
+            }
+        },
+
+        testimonial: {
+            text: "Ova platforma je revolucionisala naše Power Platform upravljanje. Ono što je nekad trajalo nedeljama sada se dešava za minute - potpuno automatizovano i usklađeno.",
+            author: "Michael Schmidt",
+            position: "Šef IT upravljanja",
+            company: "Fortune 500 kompanija"
+        },
+
+        learnings: {
+            title: "Naučene lekcije",
+            items: [
+                "Event-driven arhitektura je esencijalna za skalabilnost sa enterprise workload-ima",
+                "PowerShell Core omogućava cross-platform automatizaciju bez Windows zavisnosti",
+                "GraphQL je smanjio API pozive za 60% kroz efikasno preuzimanje podataka",
+                "Policy as Code je značajno pojednostavio upravljanje",
+                "Inkrementalna sinhronizacija sa delta upitima je kritična za performanse"
+            ]
+        },
+
+        future: {
+            title: "Buduće perspektive",
+            description: "Platforma se kontinuirano proširuje i poboljšava.",
+            plans: [
+                "AI-powered uvidi sa detekcijom anomalija",
+                "Microsoft Copilot integracija za prirodno upravljanje jezikom",
+                "Fabric Analytics za naprednu BI integraciju",
+                "Container Apps za serverless PowerShell izvršavanje",
+                "Zero Trust bezbednosni model",
+                "Cross-cloud podrška za AWS i Google Cloud"
+            ]
+        }
+    }
+};
+
+export default powerPlatformGovernance;

src/i18n/locales/sr/portfolio/projects/smart-warehouse.ts

@@ -0,0 +1,222 @@
+// src/i18n/locales/sr/portfolio/projects/smart-warehouse.ts
+export const smartWarehouse = {
+    meta: {
+        slug: 'smart-warehouse',
+        title: "Inteligentno upravljanje skladištem sa Computer Vision",
+        description: "AI sistem za upravljanje zalihama u realnom vremenu i optimizaciju skladišnih procesa",
+        excerpt: "Razvoj autonomnog sistema za upravljanje skladištem sa Computer Vision, IoT senzorima i mašinskim učenjem za precizno praćenje zaliha.",
+        date: "2024-06",
+        category: "AI & Automatizacija",
+        client: "LogiTech Solutions GmbH",
+        duration: "4 meseca",
+        url: "https://warehouse-demo.example.com",
+        repository: "",
+        documentation: "/case-studies/smart-warehouse",
+        published: true,
+        featured: true,
+        technologies: ["YOLOv8", "Python", "FastAPI", "React", "PostgreSQL", "Docker", "Kubernetes", "IoT", "MQTT"],
+        tags: ["Computer Vision", "Mašinsko učenje", "IoT", "Edge Computing", "Automatizacija"]
+    },
+    content: {
+        intro: "Srednje veliki logistički provajder transformisao je svoje ručno upravljanje skladištem kroz potpuno automatizovan sistem koji kombinuje Computer Vision, IoT senzore i mašinsko učenje.",
+
+        challenge: {
+            title: "Izazov",
+            description: "Ručno upravljanje zalihama dovelo je do značajnih operativnih problema.",
+            points: [
+                "Neusaglašenosti između stvarnih i evidentiranih zaliha do 15%",
+                "Vremenski intenzivni ručni inventari (3-4 dana po kvartalu)",
+                "Nedostatak transparentnosti u realnom vremenu o nivoima zaliha",
+                "Neefikasno korišćenje skladišnog prostora zbog nedostatka optimizacije",
+                "Visoki troškovi osoblja zbog ručnih procesa"
+            ]
+        },
+
+        solution: {
+            title: "Rešenje",
+            description: "Razvoj potpuno automatizovanog sistema za upravljanje skladištem",
+            content: "Sistem kombinuje Computer Vision, IoT senzore i mašinsko učenje za kontinuirano, precizno praćenje zaliha bez ljudske intervencije.",
+            points: [
+                "AI detekcija objekata pomoću kamera visoke rezolucije",
+                "IoT senzori težine za validaciju",
+                "Prediktivna analitika za optimizaciju zaliha",
+                "Dashboard u realnom vremenu sa mobilnim pristupom",
+                "Automatski okidači za ponovnu narudžbu"
+            ]
+        },
+
+        technical: {
+            title: "Tehnička implementacija",
+            description: "Rešenje se zasniva na modularnoj mikroservisnoj arhitekturi sa edge computing-om za procesiranje u realnom vremenu:",
+            points: [
+                "YOLOv8 za preciznu detekciju objekata",
+                "Edge Computing za <50ms procesiranje slike",
+                "Apache Kafka za stream procesiranje 2TB podataka/dan",
+                "MQTT-bazirana IoT integracija sa 200+ senzora",
+                "PostgreSQL za perzistenciju podataka",
+                "Kubernetes za skalabilnost"
+            ]
+        },
+
+        features: {
+            title: "Ključne funkcionalnosti",
+            items: [
+                {
+                    title: "Detekcija objekata u realnom vremenu",
+                    description: "98,7% tačnost u praćenju zaliha kroz AI prepoznavanje slike",
+                    icon: "camera"
+                },
+                {
+                    title: "Integracija IoT senzora",
+                    description: "200+ senzora validuje CV rezultate kroz merenja težine",
+                    icon: "sensor"
+                },
+                {
+                    title: "Prediktivna analitika",
+                    description: "Predviđanje kretanja zaliha i automatska ponovna narudžba",
+                    icon: "chart"
+                },
+                {
+                    title: "Mobilni Dashboard",
+                    description: "Pristup svim podacima skladišta u realnom vremenu sa bilo kog mesta",
+                    icon: "mobile"
+                }
+            ]
+        },
+
+        implementation: {
+            title: "Faze implementacije",
+            phases: [
+                {
+                    title: "Faza 1: Proof of Concept",
+                    duration: "4 nedelje",
+                    description: "Razvoj prototipa i obuka modela",
+                    tasks: [
+                        "Razvoj prototipa za jedan deo skladišta",
+                        "Obuka ML modela sa 10.000+ anotiranih slika",
+                        "Integracija 5 test kamera i 20 IoT senzora",
+                        "Validacija tačnosti detekcije"
+                    ]
+                },
+                {
+                    title: "Faza 2: Skaliranje",
+                    duration: "8 nedelja",
+                    description: "Kompletno uvođenje na 5.000m² skladišnog prostora",
+                    tasks: [
+                        "Instalacija 45 kamera i 200+ senzora",
+                        "Razvoj dashboard-a u realnom vremenu",
+                        "Integracija sa postojećim ERP sistemom",
+                        "Optimizacija performansi"
+                    ]
+                },
+                {
+                    title: "Faza 3: Optimizacija",
+                    duration: "4 nedelje",
+                    description: "Fino podešavanje i napredne funkcionalnosti",
+                    tasks: [
+                        "Fino podešavanje ML modela",
+                        "Implementacija prediktivne analitike",
+                        "Razvoj mobilne aplikacije",
+                        "Obuka zaposlenih"
+                    ]
+                }
+            ]
+        },
+
+        challenges: {
+            title: "Izazovi i rešenja",
+            items: [
+                {
+                    challenge: "Promenljivi uslovi osvetljenja",
+                    solution: "HDR kamere sa adaptivnom predobradom slike i augmentovanim podacima za obuku"
+                },
+                {
+                    challenge: "Procesiranje velikih količina podataka u realnom vremenu",
+                    solution: "Edge Computing za predprocesiranje i Apache Kafka za stream procesiranje"
+                },
+                {
+                    challenge: "Integracija sa nasleđenim sistemima",
+                    solution: "Razvoj adapter sloja sa dvosmernom sinhronizacijom"
+                }
+            ]
+        },
+
+        results: {
+            title: "Rezultati",
+            description: "Sistem je potpuno transformisao upravljanje skladištem:",
+            metrics: [
+                { label: "Tačnost detekcije", value: "98,7%" },
+                { label: "Smanjenje vremena inventara", value: "85%" },
+                { label: "Manje neusaglašenosti zaliha", value: "60%" },
+                { label: "Iskorišćenost skladišnog prostora", value: "+35%" },
+                { label: "ROI", value: "14 meseci" },
+                { label: "Dostupnost sistema", value: "99,95%" }
+            ],
+            impact: "Transparentnost u realnom vremenu omogućila je proaktivno donošenje odluka i sprečila prekide u snabdevanju. Zaposleni su mogli da se fokusiraju na aktivnosti koje dodaju vrednost dok je AI upravljao zalihama."
+        },
+
+        performance: {
+            title: "Metrike performansi",
+            metrics: {
+                processing: {
+                    title: "Procesiranje",
+                    items: [
+                        "Procesiranje slike: <50ms po frejmu",
+                        "API Response Time: p95 < 100ms",
+                        "Procesiranje podataka: 500 događaja/sekund",
+                        "System Uptime: 99.95%"
+                    ]
+                },
+                scale: {
+                    title: "Skaliranje",
+                    items: [
+                        "45 aktivnih kamera (do 200 moguće)",
+                        "200+ IoT senzora",
+                        "50+ istovremenih korisnika",
+                        "50TB skladištenje podataka"
+                    ]
+                },
+                ml: {
+                    title: "ML Performanse",
+                    items: [
+                        "mAP@50: 0.92",
+                        "Inference Time: 23ms",
+                        "False Positive Rate: <2%",
+                        "Model Size: 138MB"
+                    ]
+                }
+            }
+        },
+
+        testimonial: {
+            text: "Implementacija je revolucionisala naše skladišne procese. Ono što je ranije trajalo danima sada se dešava u realnom vremenu. Tačnost i efikasnost su impresivne.",
+            author: "Thomas Weber",
+            position: "Šef logistike",
+            company: "LogiTech Solutions GmbH"
+        },
+
+        learnings: {
+            title: "Naučene lekcije",
+            items: [
+                "Edge Computing je esencijalan: Predprocesiranje direktno na kameri smanjilo je mrežno opterećenje za 70%",
+                "Kvalitet podataka pre kvantiteta: 1.000 visokokvalitetnih anotacija bilo je vrednije od 10.000 automatski generisanih",
+                "Iterativni razvoj: Rano pilotiranje u jednoj oblasti omogućilo je brza prilagođavanja",
+                "Upravljanje promenama: Rano uključivanje zaposlenih bilo je ključno za prihvatanje"
+            ]
+        },
+
+        future: {
+            title: "Buduće perspektive",
+            description: "Sistem je dizajniran kao white-label rešenje i može se primeniti u drugim skladištima sa minimalnim prilagođavanjima.",
+            plans: [
+                "Integracija robotike za automatizovano komisioniranje",
+                "Proširenje na spoljašnja skladišta i mobilne jedinice",
+                "AI-bazirano predviđanje potreba za održavanjem",
+                "Blockchain integracija za transparentnost lanca snabdevanja",
+                "AR naočare za radnike skladišta sa vizuelnim naznakama"
+            ]
+        }
+    }
+};
+
+export default smartWarehouse;

src/pages/about/components/Journey.tsx

@@ -35,7 +35,7 @@ const Journey = () => {
     };
 
     return (
-        <section className="py-24 relative bg-zinc-900/50">
+        <section className="py-24 relative">
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 {/* Section Header */}
                 <motion.div
@@ -149,11 +149,6 @@ const Journey = () => {
                     </motion.div>
                 </div>
             </div>
-
-            {/* Background Decoration */}
-            <div className="absolute inset-0 -z-10">
-                <div className="absolute inset-0 bg-gradient-to-t from-zinc-900/50 to-transparent" />
-            </div>
         </section>
     );
 };

src/pages/blog/components/BlogpostCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Calendar, ArrowRight, Tag, Folder } from 'lucide-react';
+import { Calendar, ExternalLink, Tag } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import { blog as blogDe } from '../../../i18n/locales/de/blog/index';
@@ -47,6 +47,7 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post }) => {
             title: blogPost?.title || post.title,
             excerpt: blogPost?.excerpt || post.excerpt,
             category: blogPost?.category || post.category,
+            tags: blogPost?.tags || post.tags,
         };
     };
 
@@ -64,7 +65,7 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post }) => {
 
     const itemVariants = {
         hidden: { opacity: 0, y: 20 },
-        visible: { opacity: 1, y: 0 },
+        visible: { opacity: 1, y: 0 }
     };
 
     // Datum formatiert in der aktuellen Sprache
@@ -86,95 +87,109 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post }) => {
     };
 
     return (
-        <motion.div
-            variants={itemVariants}
-            whileHover={{ y: -5 }}
-            transition={{ duration: 0.3 }}
-            className="group relative"
-        >
         <Link
             to={`/blog/${post.slug}`}
-                className="block relative bg-zinc-800/30 border border-zinc-800
+            className="group relative block bg-zinc-900/50 backdrop-blur-sm
-                   rounded-lg overflow-hidden hover:bg-zinc-800/50
+                     rounded-xl shadow-lg hover:shadow-2xl
-                   hover:border-zinc-700 transition-all duration-300"
+                     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"
         >
-                {/* Image Container */}
+            <motion.div
-                <div className="aspect-video relative overflow-hidden">
+                variants={itemVariants}
+                transition={{ duration: 0.5 }}
+                className="relative overflow-hidden rounded-xl"
+                style={{
+                    transform: 'translateZ(0)',
+                    willChange: 'opacity, transform'
+                }}
+            >
+                {/* Image Container - same as PortfolioCard */}
+                <div className="aspect-[16/9] w-full relative overflow-hidden bg-zinc-900">
                     <img
                         src={getImagePath(post.coverImage)}
                         alt={translatedPost.title}
-                        className="h-full w-full object-cover transition-transform
+                        className="absolute inset-0 w-full h-full object-cover transition-transform duration-700
-                       duration-500 group-hover:scale-105"
+                                 group-hover:scale-110"
                         loading="lazy"
+                        style={{ transformOrigin: 'center center' }}
                         onError={(e) => {
                             console.error('Image load error:', e);
                         }}
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-zinc-900
+                    {/* Gradient overlay that extends beyond the image */}
-                          via-zinc-900/50 to-transparent opacity-80
+                    <div className="absolute inset-x-0 -bottom-20 top-0 bg-gradient-to-t from-zinc-900 via-zinc-900/70 to-transparent
-                          group-hover:opacity-70 transition-opacity duration-300" />
+                                  opacity-95" />
-
-                    {/* Category Badge */}
-                    {translatedPost.category && (
-                        <div className="absolute top-4 left-4 flex items-center gap-2">
-                            <div className="flex items-center gap-2 px-3 py-1
-                              bg-zinc-900/80 backdrop-blur-sm border
-                              border-zinc-800 rounded-full">
-                                <Folder className="h-3 w-3 text-zinc-400" />
-                                <span className="text-xs text-zinc-300">
-                  {blog.categories[translatedPost.category as keyof typeof blog.categories] ||
-                      translatedPost.category}
-                </span>
-                            </div>
-                        </div>
-                    )}
                 </div>
 
-                {/* Content */}
+                {/* Content - with relative positioning to overlap the gradient */}
-                <div className="p-6">
+                <div className="relative -mt-2 p-6 bg-zinc-900 z-10">
-                    {/* Metadata */}
+                    {/* Post Info */}
-                    <div className="flex items-center gap-4 mb-4">
+                    <div className="flex items-center gap-4 mb-4 text-zinc-500">
-                        <time className="flex items-center gap-2 text-sm text-zinc-400">
+                        <div className="flex items-center gap-2 text-sm">
                             <Calendar className="h-4 w-4" />
-                            {getFormattedDate(post.date)}
+                            <span>{getFormattedDate(post.date)}</span>
-                        </time>
+                        </div>
-                        {post.tags && (
+                        {translatedPost.tags && translatedPost.tags.length > 0 && (
-                            <div className="flex items-center gap-2 text-sm text-zinc-400">
+                            <div className="flex items-center gap-2 text-sm">
                                 <Tag className="h-4 w-4" />
                                 <span>
-                  {post.tags.length} {blog.ui.tags}
+                                    {blog.ui.tagsCount 
+                                        ? blog.ui.tagsCount.replace('{{count}}', translatedPost.tags.length.toString())
+                                        : `${translatedPost.tags.length} Tags`}
                                 </span>
                             </div>
                         )}
                     </div>
 
-                    {/* Title */}
+                    {/* Title & Description */}
                     <h3 className="text-xl font-semibold text-white mb-3
-                         group-hover:text-zinc-100 transition-colors
+                                 group-hover:text-zinc-100 transition-colors duration-300">
-                         duration-300 line-clamp-2">
                         {translatedPost.title}
                     </h3>
-
+                    <p className="text-zinc-400 text-sm line-clamp-2 mb-4
-                    {/* Excerpt */}
-                    <p className="text-zinc-400 text-sm line-clamp-3 mb-6
                                 group-hover:text-zinc-300 transition-colors duration-300">
                         {translatedPost.excerpt}
                     </p>
 
-                    {/* Read More */}
+                    {/* Tags */}
-                    <div className="flex items-center text-white group/link">
+                    <div className="flex flex-wrap gap-2">
-                        <span className="text-sm font-medium">{blog.ui.readMore}</span>
+                        {translatedPost.tags && translatedPost.tags.slice(0, 3).map((tag, index) => (
-                        <ArrowRight className="ml-2 h-4 w-4 transition-transform
+                            <span
-                                  group-hover/link:translate-x-1" />
+                                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>
+                        ))}
+                        {translatedPost.tags && translatedPost.tags.length > 3 && (
+                            <span className="text-sm text-zinc-600">
+                                +{translatedPost.tags.length - 3} {blog.ui.more || 'more'}
+                            </span>
+                        )}
+                    </div>
+
+                    {/* Link Icon - same as PortfolioCard */}
+                    <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>
 
-                {/* Hover Effect */}
+                {/* Subtle Hover Border */}
-                <div className="absolute inset-0 bg-white/5 opacity-0
+                <div className="absolute inset-0 rounded-xl pointer-events-none
-                        group-hover:opacity-100 pointer-events-none
+                              ring-1 ring-zinc-600/0 group-hover:ring-zinc-600/30
-                        transition-opacity duration-300" />
+                              transition-all duration-500" />
-            </Link>
             </motion.div>
+        </Link>
     );
 };
 

src/pages/home/components/Hero.tsx

@@ -85,7 +85,7 @@ const Hero = () => {
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.5, delay: 0.2 }}
-                    className="text-white text-base sm:text-lg tracking-wider mb-3"
+                    className="text-white text-sm sm:text-base tracking-wider mb-2"
                 >
                     {t('pages.home.hero.title')}
                 </motion.p>
@@ -93,7 +93,7 @@ const Hero = () => {
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.5, delay: 0.3 }}
-                    className="text-5xl sm:text-6xl font-bold mb-10 flex items-center"
+                    className="text-4xl sm:text-5xl font-bold mb-8 flex items-center"
                 >
                     {t('pages.home.hero.name')}<span className="animate-pulse ml-1">|</span>
                 </motion.h1>

src/pages/portfolio/ProjectPage.tsx

@@ -9,6 +9,18 @@ import deAiDataReader from '../../i18n/locales/de/portfolio/projects/ai-data-rea
 import enAiDataReader from '../../i18n/locales/en/portfolio/projects/ai-data-reader';
 import srAiDataReader from '../../i18n/locales/sr/portfolio/projects/ai-data-reader';
 
+import deKamenpro from '../../i18n/locales/de/portfolio/projects/kamenpro';
+import enKamenpro from '../../i18n/locales/en/portfolio/projects/kamenpro';
+import srKamenpro from '../../i18n/locales/sr/portfolio/projects/kamenpro';
+
+import deSmartWarehouse from '../../i18n/locales/de/portfolio/projects/smart-warehouse';
+import enSmartWarehouse from '../../i18n/locales/en/portfolio/projects/smart-warehouse';
+import srSmartWarehouse from '../../i18n/locales/sr/portfolio/projects/smart-warehouse';
+
+import dePowerPlatform from '../../i18n/locales/de/portfolio/projects/power-platform-governance';
+import enPowerPlatform from '../../i18n/locales/en/portfolio/projects/power-platform-governance';
+import srPowerPlatform from '../../i18n/locales/sr/portfolio/projects/power-platform-governance';
+
 // Interfaces für den Projektinhalt
 interface ProjectMeta {
     date?: string;
@@ -70,6 +82,21 @@ const projectTranslations: ProjectTranslations = {
         en: enAiDataReader,
         sr: srAiDataReader,
     },
+    'kamenpro': {
+        de: deKamenpro,
+        en: enKamenpro,
+        sr: srKamenpro,
+    },
+    'smart-warehouse': {
+        de: deSmartWarehouse,
+        en: enSmartWarehouse,
+        sr: srSmartWarehouse,
+    },
+    'power-platform-governance': {
+        de: dePowerPlatform,
+        en: enPowerPlatform,
+        sr: srPowerPlatform,
+    },
 };
 
 const TranslatedProjectPage = () => {
@@ -208,7 +235,7 @@ const TranslatedProjectPage = () => {
                 >
                     <div className="relative aspect-video rounded-lg overflow-hidden bg-zinc-800">
                         <img
-                            src="/images/projects/ai-data-reader/cover.jpg"
+                            src={`/images/projects/${slug}/cover.jpg`}
                             alt={project.meta.title}
                             className="w-full h-full object-cover"
                             loading="lazy"

src/pages/portfolio/components/PortfolioCard.tsx

@@ -42,37 +42,41 @@ const PortfolioCard: React.FC<PortfolioCardProps> = ({ project }) => {
         <Link
             to={`/portfolio/${project.slug}`}
             onClick={handleClick}
-            className="group relative block overflow-hidden bg-zinc-800/30 border border-zinc-800
+            className="group relative block bg-zinc-900/50 backdrop-blur-sm
-                     rounded-lg hover:bg-zinc-800/50 hover:border-zinc-700
+                     rounded-xl shadow-lg hover:shadow-2xl
-                     transition-all duration-300 focus:outline-none focus:ring-2
+                     ring-1 ring-zinc-800 hover:ring-zinc-700
-                     focus:ring-zinc-700 focus:ring-offset-2 focus:ring-offset-zinc-900"
+                     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"
         >
             <motion.div
                 variants={itemVariants}
                 transition={{ duration: 0.5 }}
-                className="relative"
+                className="relative overflow-hidden rounded-xl"
                 style={{
                     transform: 'translateZ(0)',
                     willChange: 'opacity, transform'
                 }}
             >
                 {/* Image Container */}
-                <div className="aspect-[16/9] w-full relative overflow-hidden">
+                <div className="aspect-[16/9] w-full relative overflow-hidden bg-zinc-900">
                     <img
                         src={imagePath}
                         alt={project.title}
-                        className="w-full h-full object-cover transition-transform duration-500
+                        className="absolute inset-0 w-full h-full object-cover transition-transform duration-700
-                                 group-hover:scale-105"
+                                 group-hover:scale-110"
                         loading="lazy"
+                        style={{ transformOrigin: 'center center' }}
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-zinc-900 via-zinc-900/50 to-transparent
+                    {/* Gradient overlay that extends beyond the image */}
-                                  opacity-80 group-hover:opacity-70 transition-opacity duration-300" />
+                    <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 */}
+                {/* Content - with relative positioning to overlap the gradient */}
-                <div className="relative p-6">
+                <div className="relative -mt-2 p-6 bg-zinc-900 z-10">
                     {/* Project Info */}
-                    <div className="flex items-center gap-4 mb-4 text-zinc-400">
+                    <div className="flex items-center gap-4 mb-4 text-zinc-500">
                         {project.date && (
                             <div className="flex items-center gap-2 text-sm">
                                 <Calendar className="h-4 w-4" />
@@ -93,7 +97,7 @@ const PortfolioCard: React.FC<PortfolioCardProps> = ({ project }) => {
                     </div>
 
                     {/* Title & Description */}
-                    <h3 className="text-xl font-semibold text-white mb-2
+                    <h3 className="text-xl font-semibold text-white mb-3
                                  group-hover:text-zinc-100 transition-colors duration-300">
                         {project.title}
                     </h3>
@@ -107,16 +111,17 @@ const PortfolioCard: React.FC<PortfolioCardProps> = ({ project }) => {
                         {displayTags.slice(0, 3).map((tag, index) => (
                             <span
                                 key={index}
-                                className="px-3 py-1 bg-zinc-800/50 border border-zinc-800
+                                className="px-3 py-1 bg-zinc-800/50
-                                         text-sm text-zinc-300 rounded-full
+                                         text-sm text-zinc-400 rounded-full
-                                         group-hover:border-zinc-700 group-hover:bg-zinc-800
+                                         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>
                         ))}
                         {displayTags.length > 3 && (
-                            <span className="text-sm text-zinc-500">
+                            <span className="text-sm text-zinc-600">
                                 {t('portfolio.ui.moreTechnologies', {
                                     count: displayTags.length - 3,
                                     defaultValue: '+{{count}} more'
@@ -126,19 +131,19 @@ const PortfolioCard: React.FC<PortfolioCardProps> = ({ project }) => {
                     </div>
 
                     {/* Link Icon */}
-                    <div className="absolute top-6 right-6 p-2 rounded-full
+                    <div className="absolute top-6 right-6 p-2.5 rounded-full
-                                  bg-zinc-800/80 backdrop-blur-sm
+                                  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-300" />
+                        <ExternalLink className="h-4 w-4 text-zinc-400" />
                     </div>
                 </div>
 
-                {/* Hover Effect */}
+                {/* Subtle Hover Border */}
-                <div className="absolute inset-0 border border-zinc-700 opacity-0
+                <div className="absolute inset-0 rounded-xl pointer-events-none
-                              group-hover:opacity-100 rounded-lg pointer-events-none
+                              ring-1 ring-zinc-600/0 group-hover:ring-zinc-600/30
-                              transition-opacity duration-300" />
+                              transition-all duration-500" />
             </motion.div>
         </Link>
     );

src/pages/portfolio/index.tsx

@@ -11,9 +11,6 @@ const PortfolioPage = () => {
         visible: { opacity: 1, y: 0 }
     };
 
-    // Get categories from translations
-    const categories = Object.entries(t('portfolio.filters.categories', { returnObjects: true }));
-    const sortOptions = Object.entries(t('portfolio.sort', { returnObjects: true }));
 
     return (
         <>
@@ -46,52 +43,6 @@ const PortfolioPage = () => {
                             </p>
                         </motion.div>
 
-                        {/* Filter and Sort Section */}
-                        <motion.div
-                            initial={{ opacity: 0, y: 20 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            transition={{ duration: 0.5, delay: 0.2 }}
-                            className="mb-12"
-                        >
-                            <div className="flex flex-wrap justify-center gap-12">
-                                {/* Categories */}
-                                <div className="flex flex-col items-center space-y-4">
-                                    <h2 className="text-sm font-medium text-zinc-400">
-                                        {t('portfolio.sections.filterTitle')}
-                                    </h2>
-                                    <div className="flex flex-wrap justify-center gap-2">
-                                        <button className="px-4 py-2 text-sm text-zinc-400 hover:text-white bg-zinc-800/50 hover:bg-zinc-800 rounded-full transition-colors">
-                                            {t('portfolio.filters.all')}
-                                        </button>
-                                        {categories.map(([key, value]) => (
-                                            <button
-                                                key={key}
-                                                className="px-4 py-2 text-sm text-zinc-400 hover:text-white bg-zinc-800/50 hover:bg-zinc-800 rounded-full transition-colors"
-                                            >
-                                                {value}
-                                            </button>
-                                        ))}
-                                    </div>
-                                </div>
-
-                                {/* Sort Options */}
-                                <div className="flex flex-col items-center space-y-4">
-                                    <h2 className="text-sm font-medium text-zinc-400">
-                                        {t('portfolio.sections.sortTitle')}
-                                    </h2>
-                                    <div className="flex justify-center gap-2">
-                                        {sortOptions.map(([key, value]) => (
-                                            <button
-                                                key={key}
-                                                className="px-4 py-2 text-sm text-zinc-400 hover:text-white bg-zinc-800/50 hover:bg-zinc-800 rounded-full transition-colors"
-                                            >
-                                                {value}
-                                            </button>
-                                        ))}
-                                    </div>
-                                </div>
-                            </div>
-                        </motion.div>
 
                         {/* Portfolio Grid */}
                         <motion.div

src/pages/portfolio/projects/kamenpro.mdx

@@ -0,0 +1,229 @@
+---
+slug: "kamenpro"
+title: "KamenPro: Digitale Transformation für dekorative Steinverkleidungen"
+description: "Entwicklung einer modernen Multi-Location PWA für einen Hersteller dekorativer Steinverkleidungen aus Bijeljina mit React 18.3 und Supabase"
+excerpt: "Von Stein zu Pixel: Wie ein traditioneller Handwerksbetrieb durch moderne Webtechnologie 300% mehr Anfragen generiert."
+date: "2024-11-15"
+category: "Web Development"
+coverImage: "/images/projects/kamenpro/cover.jpg"
+client: "KamenPro - Željko"
+duration: "3 Monate"
+url: "https://kamenpro.net"
+repository: ""
+documentation: ""
+published: true
+featured: true
+technologies: ["React 18.3", "TypeScript", "Vite", "Supabase", "Framer Motion", "TailwindCSS", "PWA", "Schema.org"]
+tags: ["Multi-Location SEO", "E-Commerce", "PWA", "Local Business", "Performance"]
+---
+
+<div style={{ margin: "20px 0", padding: "20px", backgroundColor: "#3d3d3d", borderRadius: "8px" }}>
+  <p style={{ fontSize: "1.1rem", lineHeight: "1.6" }}>
+    KamenPro, ein etablierter Hersteller dekorativer Steinverkleidungen aus Bijeljina, stand vor der Herausforderung, sein traditionelles Handwerk in die digitale Welt zu übertragen. Diese Case Study zeigt, wie moderne Webtechnologie einem lokalen Handwerksbetrieb zu überregionalem Erfolg verhalf.
+  </p>
+</div>
+
+<hr style={{ margin: "40px 0", border: "none", height: "1px", backgroundColor: "#ddd" }} />
+
+<h2 style={{ marginBottom: "20px" }}>Die Herausforderung</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Als Hersteller hochwertiger Steinverkleidungen aus Weißzement fehlte KamenPro die digitale Präsenz:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Keine digitale Präsenz trotz hoher Online-Nachfrage</li>
+    <li>Kunden suchten online nach 'dekorativni kamen' ohne KamenPro zu finden</li>
+    <li>Fehlende Produktpräsentation für 3 verschiedene Steinstrukturen</li>
+    <li>Keine lokale SEO-Präsenz in Bijeljina, Brčko und Tuzla</li>
+    <li>Verlust potenzieller Kunden an digital präsente Konkurrenz</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Der Lösungsansatz</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Eine moderne PWA mit Multi-Location SEO-Strategie für maximale lokale Sichtbarkeit:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Multi-Location SEO für Bijeljina, Brčko und Tuzla</li>
+    <li>Produktkatalog mit HD-Bildern der Steinstrukturen</li>
+    <li>PWA für Offline-Verfügbarkeit auf Baustellen</li>
+    <li>Supabase-Backend für Produktverwaltung und Anfragen</li>
+    <li>Schema.org LocalBusiness für optimale Google-Präsenz</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Technische Implementierung</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Multi-Location SEO mit Schema.org</h3>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-typescript" style={{ color: "#f8f8f2" }}>
+{`// Standort-spezifische Landing Pages
+const LocationPage: React.FC<{city: string}> = ({ city }) => {
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "LocalBusiness",
+    "name": \`KamenPro \${city}\`,
+    "description": \`Dekorativni kamen i fasadne obloge u \${city}\`,
+    "telephone": "+387 65 678 634",
+    "address": {
+      "@type": "PostalAddress",
+      "addressLocality": city,
+      "addressCountry": "BA"
+    }
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Dekorativni kamen {city} | KamenPro</title>
+        <script type="application/ld+json">
+          {JSON.stringify(structuredData)}
+        </script>
+      </Helmet>
+      <LocationHero city={city} />
+      <ProductShowcase />
+    </>
+  );
+};`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Produktverwaltung mit Supabase</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-typescript" style={{ color: "#f8f8f2" }}>
+{`interface StoneProduct {
+  id: string;
+  name: string;
+  type: 'decorative_stone' | 'rustic_brick';
+  dimensions: {
+    length: 44,  // cm
+    width: 8.5,  // cm
+    thickness: 15  // mm
+  };
+  price_per_m2: number;  // 33-40 BAM
+  weight_per_m2: 32;  // kg
+  textures: string[];  // 3 verschiedene
+  available_colors: string[];
+}
+
+// Produkt-Service für Katalog
+class ProductService {
+  async getProducts(filters?: {
+    type?: string;
+    priceRange?: [number, number];
+    texture?: string;
+  }) {
+    let query = supabase
+      .from('products')
+      .select('*, product_images (*)')
+      .eq('is_active', true);
+
+    if (filters?.type) {
+      query = query.eq('type', filters.type);
+    }
+
+    const { data, error } = await query;
+    return this.transformProducts(data);
+  }
+}`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>PWA für Offline-Verfügbarkeit</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-javascript" style={{ color: "#f8f8f2" }}>
+{`// Service Worker für Offline-Katalog
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open('kamenpro-v1').then(cache => {
+      return cache.addAll([
+        '/',
+        '/offline.html',
+        '/katalog',
+        // Kritische Produktbilder
+        '/images/products/dekorativni-kamen-preview.webp',
+        '/images/products/rustik-cigla-preview.webp'
+      ]);
+    })
+  );
+});
+
+// Network-first für Produktdaten
+self.addEventListener('fetch', event => {
+  if (event.request.url.includes('/api/products')) {
+    event.respondWith(
+      fetch(event.request)
+        .then(response => {
+          // Cache aktualisieren
+          const responseClone = response.clone();
+          caches.open('kamenpro-api').then(cache => {
+            cache.put(event.request, responseClone);
+          });
+          return response;
+        })
+        .catch(() => caches.match(event.request))
+    );
+  }
+});`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Lokale SEO-Erfolge</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Durch gezielte Multi-Location-Optimierung erreichten wir Top-Rankings:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Rank #1 für 'dekorativni kamen bijeljina'</li>
+    <li>Rank #2 für 'fasadne obloge brčko'</li>
+    <li>Rank #1 für 'rustik cigla tuzla'</li>
+    <li>Google My Business Integration für alle Standorte</li>
+    <li>Lokale Backlinks von Bauunternehmen</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Messbare Geschäftsergebnisse</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Die digitale Transformation brachte beeindruckende Ergebnisse:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>300% mehr Anfragen in den ersten 3 Monaten</li>
+    <li>Von 0 auf Platz 1-3 bei lokalen Suchanfragen</li>
+    <li>45 Anfragen/Monat statt vorher ~12</li>
+    <li>25-30 Projekte/Quartal statt 8-10</li>
+    <li>ROI von 275% in 6 Monaten</li>
+    <li>Expansion in neue Märkte durch Online-Präsenz</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Produktspezifikationen</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    KamenPro's Produktpalette umfasst:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li><strong>Dekorativer Stein:</strong> 44cm x 8.5cm, 15-20mm dick</li>
+    <li><strong>Rustikale Ziegel:</strong> 5mm dick, wetterbeständig</li>
+    <li><strong>Gewicht:</strong> 30-35 kg/m²</li>
+    <li><strong>Material:</strong> Weißzement-Basis mit Additiven</li>
+    <li><strong>Preise:</strong> 33-40 BAM (Stein), 25-30 BAM (Ziegel)</li>
+    <li><strong>Varianten:</strong> 3 verschiedene Texturen, Farben nach Wunsch</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Fazit</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Die digitale Transformation von KamenPro zeigt eindrucksvoll, wie ein traditioneller Handwerksbetrieb durch moderne Webtechnologie neue Märkte erschließen kann. 
+    Die Kombination aus Multi-Location SEO, optimierter Produktpräsentation und technischer Exzellenz führte zu einer Verdreifachung der Kundenanfragen. 
+    Besonders bemerkenswert: Ein lokaler Steinverkleidungs-Hersteller aus Bijeljina erreicht nun Kunden in der gesamten Region - 
+    ein Beweis dafür, dass durchdachte Digitalisierung auch im traditionellen Handwerk messbare Erfolge bringt.
+  </p>
+</div>

src/pages/portfolio/projects/power-platform-governance.mdx

@@ -0,0 +1,320 @@
+---
+slug: "power-platform-governance"
+title: "Power Platform Governance & Automation Suite"
+description: "Enterprise-Governance-Plattform für Microsoft Power Platform und SharePoint Online"
+excerpt: "Zentrale Verwaltung, Überwachung und Automatisierung der gesamten M365-Umgebung - von Tenant-Provisionierung bis Compliance-Monitoring."
+date: "2024-09-15"
+category: "Enterprise Software"
+coverImage: "/images/projects/power-platform-governance/cover.jpg"
+client: "Enterprise CoE Teams"
+duration: "6 Monate"
+url: "https://governance-demo.azurewebsites.net"
+repository: ""
+documentation: "/docs/power-platform-governance"
+published: true
+featured: true
+technologies: ["React", "TypeScript", "Node.js", "Microsoft Graph", "PowerShell", "Azure Functions", "GraphQL", "Fluent UI"]
+tags: ["Microsoft 365", "Power Platform", "SharePoint", "Governance", "Automation", "Enterprise"]
+---
+
+<div style={{ margin: "20px 0", padding: "20px", backgroundColor: "#3d3d3d", borderRadius: "8px" }}>
+  <p style={{ fontSize: "1.1rem", lineHeight: "1.6" }}>
+    Eine umfassende Enterprise-Governance-Plattform, die IT-Administratoren und Power Platform CoE Teams ermöglicht, ihre gesamte M365-Umgebung zentral zu verwalten. Von automatisierter Provisionierung über Compliance-Monitoring bis zur intelligenten Ressourcenverwaltung - alles in einer einzigen, leistungsstarken Lösung.
+  </p>
+</div>
+
+<hr style={{ margin: "40px 0", border: "none", height: "1px", backgroundColor: "#ddd" }} />
+
+<h2 style={{ marginBottom: "20px" }}>Die Herausforderung</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Unkontrolliertes Wachstum von Power Apps, Flows und SharePoint-Sites führte zu kritischen Problemen:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Shadow IT durch ungovernte Citizen Development</li>
+    <li>Compliance-Risiken und Datenschutzverletzungen</li>
+    <li>Explodierende Lizenzkosten durch ungenutzte Ressourcen</li>
+    <li>Fehlende Übersicht über die Power Platform Landschaft</li>
+    <li>Manuelle, fehleranfällige Provisionierungsprozesse</li>
+    <li>Inkonsistente Governance-Policies über Teams hinweg</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Die Lösung</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Eine zentrale Governance-Plattform mit folgenden Kernbausteinen:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Automated Provisioning Hub für Sites, Teams und Environments</li>
+    <li>Real-Time Monitoring Dashboard mit Live Activity Streams</li>
+    <li>Power Platform Governance Center mit DLP Policy Enforcement</li>
+    <li>Compliance & Security Suite mit Permission Analyzer</li>
+    <li>PowerShell Automation Framework für Custom Operations</li>
+    <li>Intelligent Resource Optimization mit ML-based Predictions</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Technische Architektur</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code style={{ color: "#f8f8f2" }}>
+{`┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
+│   Web Portal    │────▶│  GraphQL API     │────▶│  Auth Service   │
+└─────────────────┘     └──────────────────┘     └─────────────────┘
+                                 │
+                    ┌────────────┴────────────┐
+                    ▼                         ▼
+          ┌─────────────────┐       ┌─────────────────┐
+          │ Provisioning    │       │ Monitoring      │
+          │ Service         │       │ Service         │
+          └─────────────────┘       └─────────────────┘
+                   │                         │
+                   └────────────┬────────────┘
+                               ▼
+                   ┌─────────────────┐
+                   │ Message Queue   │
+                   │ (Service Bus)   │
+                   └─────────────────┘
+                            │
+        ┌───────────────────┼───────────────────┐
+        ▼                   ▼                   ▼
+┌───────────────┐  ┌───────────────┐  ┌───────────────┐
+│ PowerShell    │  │ Graph API     │  │ Analytics     │
+│ Executor      │  │ Gateway       │  │ Engine        │
+└───────────────┘  └───────────────┘  └───────────────┘`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Automated Provisioning Hub</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Site Provisioning Engine</h3>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-typescript" style={{ color: "#f8f8f2" }}>
+{`class SiteProvisioningEngine {
+  async provisionSite(template: SiteTemplate, params: ProvisioningParams) {
+    // Validate naming conventions
+    const siteName = this.validateNaming(params.name);
+    
+    // Create site from template
+    const site = await this.graph.sites.create({
+      displayName: siteName,
+      template: template.id,
+      owner: params.owner,
+      classification: params.classification
+    });
+    
+    // Apply custom configurations
+    await this.applyCustomizations(site, template.customizations);
+    
+    // Setup permissions
+    await this.configurePermissions(site, params.permissions);
+    
+    // Execute post-provisioning workflows
+    await this.runPostProvisioningWorkflows(site, template.workflows);
+    
+    return site;
+  }
+}`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Real-Time Monitoring</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-typescript" style={{ color: "#f8f8f2" }}>
+{`const ActivityMonitor: React.FC = () => {
+  const { data: activities } = useSubscription(ACTIVITY_SUBSCRIPTION);
+  
+  return (
+    <Stack tokens={{ childrenGap: 10 }}>
+      <Text variant="xLarge">Platform Activity</Text>
+      <DetailsList
+        items={activities}
+        columns={[
+          { key: 'timestamp', name: 'Time', minWidth: 100 },
+          { key: 'user', name: 'User', minWidth: 150 },
+          { key: 'action', name: 'Action', minWidth: 200 },
+          { key: 'resource', name: 'Resource', minWidth: 200 },
+          { key: 'status', name: 'Status', minWidth: 80 }
+        ]}
+        onRenderItemColumn={renderActivityColumn}
+      />
+    </Stack>
+  );
+};`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>PowerShell Automation Framework</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-powershell" style={{ color: "#f8f8f2" }}>
+{`function New-GovernanceReport {
+    [CmdletBinding()]
+    param (
+        [Parameter(Mandatory)]
+        [string]$TenantId,
+        
+        [ValidateSet('Sites','Apps','Flows','All')]
+        [string]$Scope = 'All',
+        
+        [DateTime]$StartDate = (Get-Date).AddDays(-30)
+    )
+    
+    # Complex governance analysis logic
+    $results = @{
+        ComplianceScore = Get-ComplianceScore -TenantId $TenantId
+        UnusedResources = Find-UnusedResources -Scope $Scope
+        SecurityRisks = Analyze-SecurityPosture -StartDate $StartDate
+        CostOptimization = Calculate-OptimizationPotential
+    }
+    
+    Export-GovernanceReport -Results $results
+}`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Compliance & Security Suite</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Permission Analyzer</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Cross-tenant Permission Reports mit visueller Darstellung</li>
+    <li>Overprivileged Users Detection durch ML-Algorithmen</li>
+    <li>External Sharing Audit mit Risikobewertung</li>
+    <li>Inheritance Breaking Analysis für SharePoint Sites</li>
+    <li>Automated Access Reviews mit Approval Workflows</li>
+  </ul>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Data Loss Prevention</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Custom DLP Policy Builder mit Drag-and-Drop Interface</li>
+    <li>Sensitive Data Discovery durch Pattern Matching</li>
+    <li>Real-time Policy Violation Alerts</li>
+    <li>Automated Remediation Actions</li>
+    <li>Compliance Dashboards mit Trend Analysis</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Policy as Code</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-yaml" style={{ color: "#f8f8f2" }}>
+{`# Governance Policy Definition
+apiVersion: governance/v1
+kind: SitePolicy
+metadata:
+  name: external-sharing-policy
+spec:
+  rules:
+    - effect: Deny
+      resource: "sites/*"
+      action: "share.external"
+      condition:
+        classification: "Confidential"
+    - effect: Audit
+      resource: "sites/*"
+      action: "permissions.break"
+  enforcement:
+    mode: "preventive"
+    notifications:
+      - channel: "teams"
+        webhook: "${TEAMS_WEBHOOK_URL}"`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Intelligent Resource Optimization</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-typescript" style={{ color: "#f8f8f2" }}>
+{`class ResourceOptimizer {
+  async analyzeUsage() {
+    const resources = await this.getAllResources();
+    
+    for (const resource of resources) {
+      const usage = await this.mlEngine.predictUsage(resource);
+      
+      if (usage.probability < 0.1) {
+        await this.scheduleForCleanup(resource, {
+          reason: 'Low usage probability',
+          confidence: usage.confidence,
+          suggestedAction: 'archive',
+          scheduledDate: this.calculateCleanupDate(usage)
+        });
+      }
+    }
+    
+    return this.generateOptimizationReport();
+  }
+}`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Projekt-Metriken & Ergebnisse</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Quantitative Ergebnisse</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li><strong>95% schneller:</strong> Provisioning Zeit von 5 Min auf 15 Sek reduziert</li>
+    <li><strong>94% Compliance:</strong> Rate von 67% gesteigert</li>
+    <li><strong>40% Kostenreduktion:</strong> Durch Bereinigung ungenutzter Ressourcen</li>
+    <li><strong>3x Produktivität:</strong> Admin-Effizienz verdreifacht</li>
+    <li><strong>80% schneller:</strong> Incident Response Time verbessert</li>
+  </ul>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Technische Achievements</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>35.000+ Lines of Code</li>
+    <li>45+ React Components mit Fluent UI</li>
+    <li>120+ Custom PowerShell Cmdlets</li>
+    <li>80+ GraphQL Endpoints</li>
+    <li>92% Test Coverage</li>
+    <li>25+ aktive Enterprise-Tenants</li>
+    <li>50.000+ verwaltete Ressourcen</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>UI/UX Features</h2>
+<div style={{ marginBottom: "30px" }}>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Customizable Dashboards mit Drag-and-Drop Widgets</li>
+    <li>Dark Mode mit vollem Theme Support</li>
+    <li>Command Palette für Quick Actions (Ctrl+K)</li>
+    <li>Bulk Operations mit Multi-Select</li>
+    <li>Export nach Excel, PDF und Power BI</li>
+    <li>Mobile Responsive für Tablet-Nutzung</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Zukunftsperspektiven</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Roadmap 2025</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>AI-Powered Insights mit Anomalie-Erkennung</li>
+    <li>Copilot Integration für Natural Language Governance</li>
+    <li>Microsoft Fabric Analytics Integration</li>
+    <li>Container Apps für serverlose PowerShell-Execution</li>
+    <li>Zero Trust Security Model Implementation</li>
+  </ul>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Vision 2026</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Autonomous Governance mit selbstheilender Umgebung</li>
+    <li>Cross-Cloud Support für AWS/GCP</li>
+    <li>Blockchain-basierte Audit Logs</li>
+    <li>Quantum-Safe Encryption</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Fazit</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Diese Plattform setzt neue Standards für Power Platform Governance und demonstriert, wie moderne Cloud-Technologien mit Microsoft 365 kombiniert werden können, um Enterprise-Grade Automatisierung und Compliance zu erreichen. 
+    Die Lösung ermöglicht es Unternehmen, die Balance zwischen Innovation und Kontrolle zu finden, während sie gleichzeitig Kosten senkt und die Sicherheit erhöht.
+  </p>
+</div>

src/pages/portfolio/projects/smart-warehouse.mdx

@@ -0,0 +1,270 @@
+---
+slug: "smart-warehouse"
+title: "Intelligente Lagerverwaltung mit Computer Vision"
+description: "KI-gestütztes System zur Echtzeit-Bestandsführung und Optimierung von Lagerprozessen"
+excerpt: "Entwicklung eines autonomen Lagerverwaltungssystems mit Computer Vision, IoT-Sensorik und Machine Learning für präzise Bestandsführung."
+date: "2024-06-15"
+category: "AI & Automation"
+coverImage: "/images/projects/smart-warehouse/cover.jpg"
+client: "LogiTech Solutions GmbH"
+duration: "4 Monate"
+url: "https://warehouse-demo.example.com"
+repository: ""
+documentation: "/case-studies/smart-warehouse"
+published: true
+featured: true
+technologies: ["YOLOv8", "Python", "FastAPI", "React", "PostgreSQL", "Docker", "Kubernetes", "IoT", "MQTT"]
+tags: ["Computer Vision", "Machine Learning", "IoT", "Edge Computing", "Automation"]
+---
+
+<div style={{ margin: "20px 0", padding: "20px", backgroundColor: "#3d3d3d", borderRadius: "8px" }}>
+  <p style={{ fontSize: "1.1rem", lineHeight: "1.6" }}>
+    Ein mittelständischer Logistikdienstleister transformierte seine manuelle Lagerverwaltung durch ein vollautomatisiertes System, das Computer Vision, IoT-Sensorik und Machine Learning kombiniert. Diese Case Study zeigt, wie KI-gestützte Bilderkennung zu 98,7% Genauigkeit bei der Bestandserfassung führte.
+  </p>
+</div>
+
+<hr style={{ margin: "40px 0", border: "none", height: "1px", backgroundColor: "#ddd" }} />
+
+<h2 style={{ marginBottom: "20px" }}>Die Herausforderung</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Die manuelle Bestandsführung führte zu erheblichen operativen Problemen:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Diskrepanzen zwischen tatsächlichem und gebuchtem Bestand von bis zu 15%</li>
+    <li>Zeitintensive manuelle Inventuren (3-4 Tage pro Quartal)</li>
+    <li>Fehlende Echtzeit-Transparenz über Lagerbestände</li>
+    <li>Ineffiziente Lagerplatznutzung durch fehlende Optimierung</li>
+    <li>Hohe Personalkosten durch manuelle Prozesse</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Die Lösung</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Entwicklung eines vollautomatisierten Lagerverwaltungssystems mit folgenden Kernkomponenten:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>KI-gestützte Objekterkennung mittels hochauflösender Kameras</li>
+    <li>IoT-Gewichtssensoren zur Validierung</li>
+    <li>Predictive Analytics für Bestandsoptimierung</li>
+    <li>Echtzeit-Dashboard mit mobilem Zugriff</li>
+    <li>Automatische Nachbestellungstrigger</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Systemarchitektur</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code style={{ color: "#f8f8f2" }}>
+{`┌─────────────┐     ┌──────────────┐     ┌────────────┐
+│   Kameras   │────▶│ Edge Server  │────▶│  ML Cloud  │
+└─────────────┘     └──────────────┘     └────────────┘
+       │                    │                    │
+       ▼                    ▼                    ▼
+┌─────────────┐     ┌──────────────┐     ┌────────────┐
+│ IoT Sensoren│────▶│ MQTT Broker  │────▶│   API GW   │
+└─────────────┘     └──────────────┘     └────────────┘
+                            │                    │
+                            ▼                    ▼
+                    ┌──────────────┐     ┌────────────┐
+                    │  PostgreSQL  │◀────│ Dashboard  │
+                    └──────────────┘     └────────────┘`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Computer Vision Pipeline</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-python" style={{ color: "#f8f8f2" }}>
+{`# Objekterkennung mit YOLOv8
+model = YOLO('yolov8x-custom.pt')
+results = model.predict(
+    source=camera_feed,
+    conf=0.85,
+    save=False,
+    stream=True
+)
+
+# Bestandszählung und Klassifizierung
+inventory_count = process_detections(results)
+validate_with_sensors(inventory_count, weight_data)
+
+# Echtzeit-Update der Datenbank
+async def update_inventory(items: List[DetectedItem]):
+    async with db.transaction():
+        for item in items:
+            await db.execute(
+                """UPDATE inventory 
+                   SET quantity = $1, 
+                       last_seen = $2,
+                       confidence = $3
+                   WHERE sku = $4""",
+                item.quantity, 
+                datetime.now(),
+                item.confidence,
+                item.sku
+            )`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>IoT-Integration</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-python" style={{ color: "#f8f8f2" }}>
+{`class IoTSensorManager:
+    def __init__(self):
+        self.mqtt_client = mqtt.Client()
+        self.sensors = {}
+        
+    async def process_weight_data(self, sensor_id: str, weight: float):
+        """Validiert CV-Ergebnisse mit Gewichtsdaten"""
+        location = self.sensors[sensor_id].location
+        expected_items = await self.get_cv_prediction(location)
+        
+        # Gewichtsvalidierung
+        expected_weight = sum(item.weight for item in expected_items)
+        variance = abs(weight - expected_weight) / expected_weight
+        
+        if variance > 0.1:  # 10% Toleranz
+            await self.trigger_recount(location)
+            
+        return {
+            'sensor_id': sensor_id,
+            'measured_weight': weight,
+            'expected_weight': expected_weight,
+            'variance': variance,
+            'status': 'valid' if variance <= 0.1 else 'recount_needed'
+        }`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Implementierungsphasen</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Phase 1: Proof of Concept (4 Wochen)</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Entwicklung eines Prototyps für einen Lagerbereich</li>
+    <li>Training des ML-Modells mit 10.000+ annotierten Bildern</li>
+    <li>Integration von 5 Testkameras und 20 IoT-Sensoren</li>
+    <li>Validierung der Erkennungsgenauigkeit</li>
+  </ul>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Phase 2: Skalierung (8 Wochen)</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Rollout auf gesamtes Lager (5.000m²)</li>
+    <li>Installation von 45 Kameras und 200+ Sensoren</li>
+    <li>Entwicklung des Echtzeit-Dashboards</li>
+    <li>Integration in bestehendes ERP-System</li>
+  </ul>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Phase 3: Optimierung (4 Wochen)</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Fine-Tuning der ML-Modelle</li>
+    <li>Implementierung von Predictive Analytics</li>
+    <li>Mobile App Entwicklung</li>
+    <li>Schulung der Mitarbeiter</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Herausforderungen & Lösungen</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Variierende Lichtverhältnisse</h3>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    <strong>Problem:</strong> Schatten und Reflexionen beeinträchtigten die Erkennung<br/>
+    <strong>Lösung:</strong> HDR-Kameras + adaptive Bildvorverarbeitung + Augmentierung der Trainingsdaten
+  </p>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Echtzeitverarbeitung großer Datenmengen</h3>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    <strong>Problem:</strong> 45 Kameras generierten 2TB Daten/Tag<br/>
+    <strong>Lösung:</strong> Edge Computing für Vorverarbeitung + Stream Processing mit Apache Kafka
+  </p>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Integration in Legacy-Systeme</h3>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    <strong>Problem:</strong> 20 Jahre altes ERP ohne moderne APIs<br/>
+    <strong>Lösung:</strong> Entwicklung eines Adapter-Layers mit bidirektionaler Synchronisation
+  </p>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Performance Metriken</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-yaml" style={{ color: "#f8f8f2" }}>
+{`Performance:
+  - Bildverarbeitung: <50ms pro Frame
+  - API Response Time: p95 < 100ms
+  - System Uptime: 99.95%
+  - Datenverarbeitung: 500 Events/Sekunde
+
+Skalierung:
+  - Kameras: 45 aktiv, bis 200 möglich
+  - IoT Sensoren: 200+
+  - Concurrent Users: 50+
+  - Datenspeicher: 50TB (3 Jahre Historie)
+
+ML Performance:
+  - mAP@50: 0.92
+  - Inference Time: 23ms
+  - False Positive Rate: <2%
+  - Model Size: 138MB`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Ergebnisse und Auswirkungen</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Quantitative Ergebnisse</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>98,7% Genauigkeit bei der Bestandserfassung</li>
+    <li>85% Reduktion der Inventurzeit</li>
+    <li>60% weniger Fehlbestände</li>
+    <li>ROI nach 14 Monaten erreicht</li>
+    <li>35% Steigerung der Lagerplatznutzung</li>
+  </ul>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Qualitative Verbesserungen</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Echtzeit-Transparenz über alle Lagerbestände</li>
+    <li>Proaktive Nachbestellung verhindert Lieferengpässe</li>
+    <li>Mitarbeiter fokussieren sich auf wertschöpfende Tätigkeiten</li>
+    <li>Deutlich reduzierte Fehlerquote</li>
+    <li>Verbesserte Kundenzufriedenheit durch höhere Liefertreue</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Lessons Learned</h2>
+<div style={{ marginBottom: "30px" }}>
+  <ol style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li><strong>Edge Computing ist essentiell:</strong> Die Vorverarbeitung direkt an der Kamera reduzierte die Netzwerklast um 70%</li>
+    <li><strong>Datenqualität vor Quantität:</strong> 1.000 hochqualitative Annotationen waren wertvoller als 10.000 automatisch generierte</li>
+    <li><strong>Iterative Entwicklung:</strong> Frühe Pilotierung in einem Bereich ermöglichte schnelle Anpassungen</li>
+    <li><strong>Change Management:</strong> Frühzeitige Einbindung der Mitarbeiter war entscheidend für die Akzeptanz</li>
+  </ol>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Zukunftsperspektiven</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    <strong>Nächste Entwicklungsstufen:</strong>
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Integration von Robotik für automatisierte Kommissionierung</li>
+    <li>Erweiterung auf Außenlager und mobile Einheiten</li>
+    <li>KI-basierte Vorhersage von Wartungsbedarf</li>
+    <li>Blockchain-Integration für Supply Chain Transparenz</li>
+    <li>AR-Brillen für Lagermitarbeiter mit visuellen Hinweisen</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Fazit</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Dieses Projekt demonstriert die erfolgreiche Transformation traditioneller Lagerprozesse durch modernste Computer Vision und IoT-Technologien. 
+    Die Kombination aus technischer Innovation und praxisorientierter Umsetzung schafft messbaren Mehrwert und ebnet den Weg für die Logistik 4.0.
+    Das System wurde als White-Label-Lösung konzipiert und kann mit minimalen Anpassungen in anderen Lagern eingesetzt werden.
+  </p>
+</div>