Portfolio Update: Recrobot hinzugefügt, Blog-Beitrag entfernt, UI verbessert

- Neues Portfolio-Projekt: Recrobot (KI-gestütztes Recruiting Tool)
- Portfolio-Projekt: Website mit KI hinzugefügt
- Blog-Beitrag "Automatisierte Ad Creatives" entfernt
- Gradient-Overlay von Portfolio-Karten entfernt
- Projekt-Ordner für Cover-Bilder erstellt
- Übersetzungen für alle drei Sprachen (DE, EN, SR)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

index.html

@@ -12,7 +12,7 @@
   <link rel="icon" type="image/png" sizes="16x16" href="/logo.png" />
   <link rel="apple-touch-icon" href="/logo.png" />
   <link rel="mask-icon" href="/favicon.svg" color="#18181B" />
-  <meta name="description" content="Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant in Köln | Spezialist für Python, React, TypeScript & KI-Integration. Damjan Savić entwickelt maßgeschneiderte Software-Lösungen: Enterprise-Anwendungen, E-Commerce-Systeme, Prozessautomatisierung & moderne Web-Apps. Kontaktieren Sie Damjan Savić für Ihr nächstes Projekt." />
+  <meta name="description" content="Als Fullstack-Entwickler aus Köln spezialisiert sich Damjan Savić auf die Entwicklung skalierbarer Softwarelösungen mit IoT- und KI-Integration." />
   <meta name="keywords" content="Damjan Savić, Damjan Savic, Senior Fullstack Entwickler Köln, Digital Solutions Consultant, Python Experte Köln, React Spezialist, TypeScript Developer, Software Architekt Köln, KI Integration OLLAMA, Machine Learning Entwickler, ERP System Integration, SAP Schnittstellen, E-Commerce Entwicklung, Shopify Integration, WooCommerce Entwickler, Prozessautomatisierung, Workflow Automation, Cloud Native Entwicklung, AWS Developer, Docker Kubernetes, Microservices Architektur, API Development, FastAPI Python, Next.js Entwicklung, Electron Desktop Apps, Progressive Web Apps, Agile Software Development, DevOps Engineer Köln, CI/CD Pipeline, Software Consulting, IT Beratung Köln, Digitale Transformation, B2B Enterprise Solutions, SaaS Entwicklung, Full Stack Engineer Germany" />
   <meta name="author" content="Damjan Savić" />
   <meta name="theme-color" content="#18181B" />
@@ -31,7 +31,7 @@
   <meta itemprop="description" content="Damjan Savić entwickelt Enterprise Software, Cloud-native Lösungen und KI-gestützte Systeme. Python, React, TypeScript Experte in Köln." />
   <meta itemprop="image" content="https://damjan-savic.com/logo.png" />
   
-  <title>Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant Köln | Python, React & KI-Experte</title>
+  <title>Damjan Savić | Fullstack-, IoT- & KI-Entwickler</title>
   
   <!-- Performance Optimizations -->
   <link rel="dns-prefetch" href="https://fonts.googleapis.com">
@@ -42,8 +42,8 @@
   
   <!-- Open Graph Meta Tags -->
   <meta property="og:type" content="website" />
-  <meta property="og:title" content="Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant Köln" />
+  <meta property="og:title" content="Damjan Savić | Fullstack-, IoT- & KI-Entwickler" />
-  <meta property="og:description" content="Damjan Savić ist Senior Fullstack Entwickler und Digital Solutions Consultant in Köln. Spezialisiert auf Enterprise Software Development, Cloud Architecture, KI-Integration mit OLLAMA und moderne Web-Technologien. Kontaktieren Sie Damjan Savić für Ihr nächstes Projekt." />
+  <meta property="og:description" content="Als Fullstack-Entwickler aus Köln spezialisiert sich Damjan Savić auf die Entwicklung skalierbarer Softwarelösungen mit IoT- und KI-Integration." />
   <meta property="og:url" content="https://damjan-savic.com" />
   <meta property="og:image" content="https://damjan-savic.com/logo.png" />
   <meta property="og:image:type" content="image/png" />
@@ -59,8 +59,8 @@
   
   <!-- Twitter Card Meta Tags -->
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant Köln" />
+  <meta name="twitter:title" content="Damjan Savić | Fullstack-, IoT- & KI-Entwickler" />
-  <meta name="twitter:description" content="Damjan Savić: Senior Developer & IT Consultant. Enterprise Software, Cloud Architecture, KI-Integration. Python, React, TypeScript Expert. Kontaktieren Sie Damjan Savić." />
+  <meta name="twitter:description" content="Als Fullstack-Entwickler aus Köln spezialisiert sich Damjan Savić auf die Entwicklung skalierbarer Softwarelösungen mit IoT- und KI-Integration." />
   <meta name="twitter:image" content="https://damjan-savic.com/logo.png" />
 
   <!-- Critical Styles -->

public/robots.txt

@@ -1,6 +1,7 @@
 # Allow all crawlers
 User-agent: *
 Allow: /
+Crawl-delay: 1
 
 # Disallow admin or sensitive paths if any
 Disallow: /admin

public/sitemap.xml

@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Sitemap for damjan-savic.com - IDE warning about unregistered URI can be ignored -->
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
         xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
     <loc>https://damjan-savic.com/</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/"/>
@@ -13,7 +12,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/"/>
@@ -22,7 +21,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/"/>
@@ -31,7 +30,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/about</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/about"/>
@@ -40,7 +39,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/about</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/about"/>
@@ -49,7 +48,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/about</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/about"/>
@@ -58,7 +57,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/portfolio</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/portfolio"/>
@@ -67,7 +66,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/portfolio</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio"/>
@@ -76,7 +75,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/portfolio</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio"/>
@@ -85,7 +84,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/blog</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/blog"/>
@@ -94,7 +93,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/blog</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/blog"/>
@@ -103,7 +102,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/blog</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/blog"/>
@@ -112,7 +111,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/contact</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/contact"/>
@@ -121,7 +120,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/contact</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/contact"/>
@@ -130,7 +129,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/contact</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/contact"/>
@@ -139,7 +138,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/privacy</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/privacy"/>
@@ -148,7 +147,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/privacy</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/privacy"/>
@@ -157,7 +156,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/privacy</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/privacy"/>
@@ -166,7 +165,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/terms</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/terms"/>
@@ -175,7 +174,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/terms</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/terms"/>
@@ -184,7 +183,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/terms</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/terms"/>
@@ -193,7 +192,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/blog/erp-integration-breuninger</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/blog/erp-integration-breuninger"/>
@@ -202,7 +201,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/blog/erp-integration-breuninger</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/blog/erp-integration-breuninger"/>
@@ -211,7 +210,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/blog/erp-integration-breuninger</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/blog/erp-integration-breuninger"/>
@@ -220,7 +219,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/blog/fullstack-development-timetracking</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/blog/fullstack-development-timetracking"/>
@@ -229,7 +228,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/blog/fullstack-development-timetracking</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/blog/fullstack-development-timetracking"/>
@@ -238,7 +237,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/blog/fullstack-development-timetracking</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/blog/fullstack-development-timetracking"/>
@@ -247,7 +246,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/blog/rfid-automation</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/blog/rfid-automation"/>
@@ -256,7 +255,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/blog/rfid-automation</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/blog/rfid-automation"/>
@@ -265,7 +264,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/blog/rfid-automation</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/blog/rfid-automation"/>
@@ -274,7 +273,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/portfolio/ai-data-reader</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/portfolio/ai-data-reader"/>
@@ -283,7 +282,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/portfolio/ai-data-reader</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/ai-data-reader"/>
@@ -292,7 +291,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/portfolio/ai-data-reader</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/ai-data-reader"/>
@@ -301,7 +300,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/portfolio/bi-vision</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/portfolio/bi-vision"/>
@@ -310,7 +309,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/portfolio/bi-vision</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/bi-vision"/>
@@ -319,7 +318,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/portfolio/bi-vision</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/bi-vision"/>
@@ -328,7 +327,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/portfolio/business-intelligence-ai</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/portfolio/business-intelligence-ai"/>
@@ -337,7 +336,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/portfolio/business-intelligence-ai</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/business-intelligence-ai"/>
@@ -346,7 +345,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/portfolio/business-intelligence-ai</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/business-intelligence-ai"/>
@@ -355,7 +354,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/portfolio/claude-personal-assistant</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/portfolio/claude-personal-assistant"/>
@@ -364,7 +363,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/portfolio/claude-personal-assistant</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/claude-personal-assistant"/>
@@ -373,7 +372,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/portfolio/claude-personal-assistant</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/claude-personal-assistant"/>
@@ -382,7 +381,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/portfolio/e-commerce-integration</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/portfolio/e-commerce-integration"/>
@@ -391,7 +390,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/portfolio/e-commerce-integration</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/e-commerce-integration"/>
@@ -400,7 +399,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/portfolio/e-commerce-integration</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/e-commerce-integration"/>
@@ -409,7 +408,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/portfolio/local-llm-training</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/portfolio/local-llm-training"/>
@@ -418,7 +417,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/portfolio/local-llm-training</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/local-llm-training"/>
@@ -427,7 +426,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/portfolio/local-llm-training</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/local-llm-training"/>
@@ -436,7 +435,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/portfolio/rfid-automation</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/portfolio/rfid-automation"/>
@@ -445,7 +444,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/portfolio/rfid-automation</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/rfid-automation"/>
@@ -454,7 +453,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/portfolio/rfid-automation</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/rfid-automation"/>
@@ -463,7 +462,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/portfolio/timetracking-software</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://damjan-savic.com/en/portfolio/timetracking-software"/>
@@ -472,7 +471,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/en/portfolio/timetracking-software</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/timetracking-software"/>
@@ -481,7 +480,7 @@
   </url>
   <url>
     <loc>https://damjan-savic.com/sr/portfolio/timetracking-software</loc>
-    <lastmod>2025-01-15</lastmod>
+    <lastmod>2025-12-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="de" href="https://damjan-savic.com/portfolio/timetracking-software"/>

src/components/schemas/LocalizedSchemas.tsx

@@ -12,15 +12,15 @@ export function LocalizedPersonSchema() {
     "name": currentLanguage === 'sr' ? "Дамјан Савић" : "Damjan Savić",
     "alternateName": currentLanguage === 'sr' ? ["Damjan Savić", "Damjan Savic"] : "Damjan Savic",
     "jobTitle": currentLanguage === 'de' ?
-      ["Senior Fullstack Entwickler", "Digital Solutions Consultant", "Software Architekt", "KI/AI Spezialist"] :
+      ["AI & Automation Specialist", "Process Automation Specialist", "Fullstack Entwickler"] :
       currentLanguage === 'sr' ?
-      ["Старији програмер пуног стека", "Консултант за дигитална решења", "Софтверски архитекта", "Специјалиста за вештачку интелигенцију"] :
+      ["AI & Automation Specialist", "Specijalist za automatizaciju procesa", "Fullstack Developer"] :
-      ["Senior Fullstack Developer", "Digital Solutions Consultant", "Software Architect", "AI Specialist"],
+      ["AI & Automation Specialist", "Process Automation Specialist", "Fullstack Developer"],
     "description": currentLanguage === 'de' ?
-      "Damjan Savić ist ein Senior Fullstack Entwickler und Digital Solutions Consultant aus Köln. Damjan Savić ist spezialisiert auf Python, JavaScript, React, Next.js, TypeScript und KI-Integration. Mit über 10 Jahren Erfahrung entwickelt Damjan Savić maßgeschneiderte Enterprise-Lösungen, moderne Web-Applikationen und innovative KI-gestützte Systeme für Unternehmen jeder Größe." :
+      "Damjan Savić ist AI & Automation Specialist. Spezialisiert auf KI-Agenten, Voice AI mit Vapi, Prozessautomatisierung mit n8n und Zapier. Entwickelt produktive Automatisierungslösungen und Voice-AI-Plattformen." :
       currentLanguage === 'sr' ?
-      "Дамјан Савић је старији програмер пуног стека и консултант за дигитална решења из Келна. Дамјан Савић је специјализован за Python, JavaScript, React, Next.js, TypeScript и интеграцију вештачке интелигенције. Са преко 10 година искуства, Дамјан Савић развија прилагођена решења за предузећа, модерне веб апликације и иновативне системе подржане вештачком интелигенцијом." :
+      "Дамјан Савић је AI & Automation Specialist. Специјализован за AI агенте, Voice AI са Vapi, аутоматизацију процеса са n8n и Zapier. Развија продуктивна решења за аутоматизацију и Voice AI платформе." :
-      "Damjan Savić is a Senior Fullstack Developer and Digital Solutions Consultant based in Cologne, Germany. Damjan Savić specializes in Python, JavaScript, React, Next.js, TypeScript, and AI integration. With over 10 years of experience, Damjan Savić delivers custom enterprise solutions, modern web applications, and innovative AI-powered systems.",
+      "Damjan Savić is an AI & Automation Specialist. Specialized in AI agents, Voice AI with Vapi, process automation with n8n and Zapier. Building production automation solutions and Voice AI platforms.",
     "url": "https://damjan-savic.com",
     "image": [
       {
@@ -59,89 +59,53 @@ export function LocalizedPersonSchema() {
       "https://stackoverflow.com/users/damjansavic"
     ],
     "knowsAbout": currentLanguage === 'de' ? [
+      "KI-Agenten Entwicklung",
+      "Voice AI (Vapi)",
+      "Prozessautomatisierung (n8n, Zapier)",
+      "GPT-4 & Claude API Integration",
       "Python Entwicklung",
-      "JavaScript Entwicklung",
+      "TypeScript & React",
-      "React.js",
       "Next.js",
-      "TypeScript",
+      "Web Scraping",
-      "Electron Desktop Anwendungen",
+      "WebSocket & Echtzeit-Anwendungen",
-      "Künstliche Intelligenz (KI/AI)",
+      "Supabase & PostgreSQL",
-      "OLLAMA AI/ML Integration",
-      "Machine Learning",
-      "Large Language Models (LLM)",
-      "ERP Systeme Integration",
-      "SAP Integration",
-      "E-Commerce Entwicklung",
-      "Shopify Entwicklung",
-      "WooCommerce Integration",
-      "Prozessautomatisierung",
-      "Workflow-Optimierung",
       "Backend Entwicklung",
       "Frontend Entwicklung",
       "Full Stack Entwicklung",
-      "Cloud Architektur",
+      "Docker",
-      "AWS Services",
+      "Vercel Deployment"
-      "Docker & Kubernetes",
-      "Microservices Architektur",
-      "DevOps & CI/CD",
-      "Agile Entwicklung",
-      "Software Architektur"
     ] : currentLanguage === 'sr' ? [
+      "Развој AI агената",
+      "Voice AI (Vapi)",
+      "Аутоматизација процеса (n8n, Zapier)",
+      "GPT-4 & Claude API интеграција",
       "Python развој",
-      "JavaScript развој",
+      "TypeScript & React",
-      "React.js",
       "Next.js",
-      "TypeScript",
+      "Web Scraping",
-      "Electron десктоп апликације",
+      "WebSocket & real-time апликације",
-      "Вештачка интелигенција (AI)",
+      "Supabase & PostgreSQL",
-      "OLLAMA AI/ML интеграција",
-      "Машинско учење",
-      "Велики језички модели (LLM)",
-      "ERP системи интеграција",
-      "SAP интеграција",
-      "E-Commerce развој",
-      "Shopify развој",
-      "WooCommerce интеграција",
-      "Аутоматизација процеса",
-      "Оптимизација радног тока",
       "Backend развој",
       "Frontend развој",
       "Full Stack развој",
-      "Облак архитектура",
+      "Docker",
-      "AWS сервиси",
+      "Vercel Deployment"
-      "Docker & Kubernetes",
-      "Microservices архитектура",
-      "DevOps & CI/CD",
-      "Агилни развој",
-      "Софтверска архитектура"
     ] : [
+      "AI Agents Development",
+      "Voice AI (Vapi)",
+      "Process Automation (n8n, Zapier)",
+      "GPT-4 & Claude API Integration",
       "Python Development",
-      "JavaScript Development",
+      "TypeScript & React",
-      "React.js",
       "Next.js",
-      "TypeScript",
+      "Web Scraping",
-      "Electron Desktop Applications",
+      "WebSocket & Real-time Applications",
-      "Artificial Intelligence (AI)",
+      "Supabase & PostgreSQL",
-      "OLLAMA AI/ML Integration",
-      "Machine Learning",
-      "Large Language Models (LLM)",
-      "ERP Systems Integration",
-      "SAP Integration",
-      "E-Commerce Development",
-      "Shopify Development",
-      "WooCommerce Integration",
-      "Process Automation",
-      "Workflow Optimization",
       "Backend Development",
       "Frontend Development",
       "Full Stack Development",
-      "Cloud Architecture",
+      "Docker",
-      "AWS Services",
+      "Vercel Deployment"
-      "Docker & Kubernetes",
-      "Microservices Architecture",
-      "DevOps & CI/CD",
-      "Agile Development",
-      "Software Architecture"
     ],
     "address": {
       "@type": "PostalAddress",
@@ -151,20 +115,13 @@ export function LocalizedPersonSchema() {
     },
     "worksFor": {
       "@type": "Organization",
-      "name": "CoderConda",
+      "name": "Everlast Consulting GmbH",
       "description": currentLanguage === 'de' ?
-        "Moderne Softwareentwicklung, KI-Integration und Prozessautomatisierung von Damjan Savić" :
+        "Prozessautomatisierung und KI-Lösungen" :
         currentLanguage === 'sr' ?
-        "Модерни развој софтвера, интеграција вештачке интелигенције и аутоматизација процеса од Дамјана Савића" :
+        "Аутоматизација процеса и AI решења" :
-        "Modern software development, AI integration, and process automation by Damjan Savić",
+        "Process Automation and AI Solutions",
-      "url": "https://damjan-savic.com",
+      "url": "https://everlast-consulting.de"
-      "founder": currentLanguage === 'sr' ? "Дамјан Савић" : "Damjan Savić",
-      "foundingDate": "2020",
-      "slogan": currentLanguage === 'de' ? 
-        "Innovative Lösungen für digitale Herausforderungen" :
-        currentLanguage === 'sr' ?
-        "Иновативна решења за дигиталне изазове" :
-        "Innovative solutions for digital challenges"
     },
     "alumniOf": [
       {
@@ -238,16 +195,16 @@ export function LocalizedWebsiteSchema() {
     "@id": "https://damjan-savic.com/#website",
     "url": "https://damjan-savic.com",
     "name": currentLanguage === 'de' ?
-      "Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant" :
+      "Damjan Savić - AI & Automation Specialist" :
       currentLanguage === 'sr' ?
-      "Дамјан Савић - Старији програмер пуног стека и консултант за дигитална решења" :
+      "Дамјан Савић - AI & Automation Specialist" :
-      "Damjan Savić - Senior Fullstack Developer & Digital Solutions Consultant",
+      "Damjan Savić - AI & Automation Specialist",
-    "alternateName": ["Damjan Savic Portfolio", "CoderConda"],
+    "alternateName": ["Damjan Savic Portfolio"],
     "description": currentLanguage === 'de' ?
-      "Offizielle Website von Damjan Savić - Senior Fullstack Entwickler und Digital Solutions Consultant aus Köln. Spezialisiert auf Enterprise Software Development, KI-Integration, Cloud Architecture und moderne Web-Technologien. Entdecken Sie innovative Lösungen von Damjan Savić." :
+      "Offizielle Website von Damjan Savić - AI & Automation Specialist. Spezialisiert auf KI-Agenten, Voice AI, Prozessautomatisierung mit n8n und Fullstack Development." :
       currentLanguage === 'sr' ?
-      "Званична веб страница Дамјана Савића - старији програмер пуног стека и консултант за дигитална решења из Келна. Специјализован за развој софтвера за предузећа, интеграцију вештачке интелигенције, облак архитектуру и модерне веб технологије." :
+      "Званична веб страница Дамјана Савића - AI & Automation Specialist. Специјализован за AI агенте, Voice AI, аутоматизацију процеса са n8n и Fullstack развој." :
-      "Official website of Damjan Savić - Senior Fullstack Developer and Digital Solutions Consultant based in Cologne, Germany. Specializing in Enterprise Software Development, AI Integration, Cloud Architecture, and modern web technologies. Discover innovative solutions by Damjan Savić.",
+      "Official website of Damjan Savić - AI & Automation Specialist. Specialized in AI agents, Voice AI, process automation with n8n, and Fullstack Development.",
     "publisher": {
       "@id": "https://damjan-savic.com/#person"
     },
@@ -264,10 +221,10 @@ export function LocalizedWebsiteSchema() {
         "Contact Damjan Savić"
     },
     "keywords": currentLanguage === 'de' ?
-      "Damjan Savić, Senior Fullstack Developer, Digital Solutions Consultant, Software Architekt Köln, Python Experte, React Spezialist, KI Integration" :
+      "Damjan Savić, AI Automation Specialist, KI-Agenten, Voice AI, n8n, Prozessautomatisierung, TypeScript, Python, Next.js" :
       currentLanguage === 'sr' ?
-      "Дамјан Савић, Старији програмер пуног стека, Консултант за дигитална решења, Софтверски архитекта, Python експерт, React специјалиста, интеграција вештачке интелигенције" :
+      "Дамјан Савић, AI Automation Specialist, AI агенти, Voice AI, n8n, аутоматизација процеса, TypeScript, Python, Next.js" :
-      "Damjan Savić, Senior Fullstack Developer, Digital Solutions Consultant, Software Architect Cologne, Python Expert, React Specialist, AI Integration",
+      "Damjan Savić, AI Automation Specialist, AI Agents, Voice AI, n8n, Process Automation, TypeScript, Python, Next.js",
     "dateCreated": "2020-01-01",
     "dateModified": "2025-01-15",
     "creator": {

src/i18n/locales/de/meta.ts

@@ -1,9 +1,9 @@
 export const meta = {
     site: {
         name: 'Damjan Savić',
-        title: 'Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant Köln',
+        title: 'Damjan Savić | Fullstack-, IoT- & KI-Entwickler',
-        subtitle: 'Enterprise Software Development, KI-Integration & Cloud Architecture von Damjan Savić',
+        subtitle: 'Skalierbare Softwarelösungen mit IoT- und KI-Integration',
-        description: 'Damjan Savić ist Senior Fullstack Entwickler und Digital Solutions Consultant in Köln. Spezialisiert auf Enterprise Software mit Python, React, TypeScript, Cloud-native Lösungen und KI-Integration. Damjan Savić bietet maßgeschneiderte IT-Lösungen für digitale Transformation, E-Commerce, ERP-Integration und Business Process Automation.',
+        description: 'Als Fullstack-Entwickler aus Köln spezialisiert sich Damjan Savić auf die Entwicklung skalierbarer Softwarelösungen mit IoT- und KI-Integration.',
         keywords: [
             'Damjan Savić',
             'Damjan Savic',

src/i18n/locales/de/pages/home/about.ts

@@ -1,7 +1,9 @@
 // src/i18n/locales/de/pages/home/about.ts
 export const about = {
     title: 'Über Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant',
-    content: 'Damjan Savić ist ein Senior Fullstack Entwickler und Digital Solutions Consultant mit über 10 Jahren Erfahrung in der Enterprise Software Development. Als Software Architect in Köln spezialisiert sich Damjan Savić auf die Entwicklung skalierbarer Cloud-native Lösungen, KI-Integration mit OLLAMA und Large Language Models sowie digitale Transformation. Damjan Savić kombiniert tiefgreifende Expertise in Python, React, TypeScript und Microservices Architecture mit einem ganzheitlichen Beratungsansatz. Von der strategischen IT-Beratung über die Implementierung von SAP/ERP-Integrationen bis zur Entwicklung maßgeschneiderter E-Commerce-Plattformen - Damjan Savić liefert innovative Lösungen für komplexe Geschäftsanforderungen. Als DevOps Engineer implementiert Damjan Savić moderne CI/CD-Pipelines und Container-Orchestrierung mit Docker und Kubernetes, um höchste Qualität und Effizienz zu gewährleisten.',
+    content: 'Damjan Savić ist AI & Automation Specialist mit Fokus auf Voice AI, autonome Agenten und Prozessautomatisierung. Mit einem M.A. in Software Development und über 7 Jahren Erfahrung in der Entwicklung digitaler Lösungen verbindet er technische Expertise mit strategischem Geschäftsverständnis.\n' +
+        'Aktuell entwickelt er bei Everlast Consulting GmbH KI-Agenten mit n8n und Voice-AI-Lösungen. Sein Flagship-Projekt RecroBot (recrobot.site) ist eine produktive Voice-AI-Plattform für automatisierte HR-Interviews – gebaut mit TypeScript/Next.js 14 und Vapi Voice AI.\n' +
+        'Seine Spezialisierung umfasst die Integration von GPT-4 und Claude API in Produktions-Workflows, Middleware-Entwicklung für ERP-Systeme wie Apparel Magic und JTL, sowie RFID/IoT-Automatisierung mit Zebra-Hardware. Von der Systemintegration über API-Entwicklung bis zur Fullstack-Implementierung mit Python, TypeScript und React/Next.js liefert er pragmatische Lösungen für komplexe Geschäftsanforderungen.',
     image: {
         alt: 'Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant Köln | Software Architect | Cloud Expert | KI-Spezialist'
     }

src/i18n/locales/de/pages/home/experience.ts

@@ -7,14 +7,24 @@ export const experience = {
     },
     positions: [
         {
-            role: 'Consultant Digital Solutions & Developer',
+            role: 'Process Automation Specialist',
-            company: 'RITTER Gesellschaft für digitale Geschäftsprozesse mbH',
+            company: 'Everlast Consulting GmbH',
-            period: '08/2023 - HEUTE',
+            period: '12/2024 - HEUTE',
             highlights: [
-                'JTL WaWi, WMS und POS Beratung & Implementierung',
+                'Entwicklung von KI-Agenten mit n8n und Zapier',
-                'Python-basierte Automationslösungen',
+                'Aufbau von Web-Scraping-Lösungen',
-                'RFID-Systeme und GUI-Entwicklung',
+                'RecroBot Voice-Interview-Plattform',
-                'KI & Business Intelligence'
+                'Migration von Power Automate zu n8n'
+            ]
+        },
+        {
+            role: 'Consultant Digital Solutions',
+            company: 'Ritter Digital GmbH',
+            period: '08/2023 - 11/2024',
+            highlights: [
+                'Backend-Services auf dedizierten Servern',
+                'KI-Integration via Power Automate',
+                'RFID/IoT-Lösungen mit Zebra-Hardware'
             ]
         },
         {

src/i18n/locales/de/pages/home/hero.ts

@@ -1,11 +1,13 @@
 // src/i18n/locales/de/pages/home/hero.ts
 export const hero = {
-    title: 'SENIOR FULLSTACK ENTWICKLER & DIGITAL SOLUTIONS CONSULTANT KÖLN',
+    title: 'AI & AUTOMATION SPECIALIST',
     name: 'DAMJAN SAVIĆ',
-    subtitle: 'ENTERPRISE SOFTWARE | KI-INTEGRATION | CLOUD ARCHITECTURE',
+    subtitle: 'KI-AGENTEN | VOICE AI | PROZESSAUTOMATISIERUNG',
-    cta: 'MIT DAMJAN SAVIĆ ZUSAMMENARBEITEN',
+    description: 'Entwicklung von KI-Agenten und Automatisierungslösungen. Von Voice-AI-Plattformen bis zu autonomen Web-Agenten.',
+    currentRole: 'Aktuell @ Everlast Consulting GmbH',
+    cta: 'KONTAKT AUFNEHMEN',
     image: {
-        alt: 'Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant Köln | Enterprise Software, KI & Cloud Expert'
+        alt: 'Damjan Savić - AI & Automation Specialist | KI-Agenten, Voice AI & Prozessautomatisierung'
     },
     social: {
         getInTouch: 'Kontaktieren Sie Damjan Savić',

src/i18n/locales/de/pages/home/skills.ts

@@ -3,34 +3,34 @@ export const skills = {
     title: 'Fähigkeiten',
     skills: [
         {
-            name: 'ERP',
+            name: 'AI & LLMs',
             level: 90,
-            description: 'Enterprise Resource Planning'
+            description: 'GPT-4, Claude API, Vapi Voice AI'
+        },
+        {
+            name: 'Automation',
+            level: 85,
+            description: 'n8n, Zapier, Power Automate'
+        },
+        {
+            name: 'Python',
+            level: 90,
+            description: 'Backend, APIs, Automation'
+        },
+        {
+            name: 'TypeScript',
+            level: 85,
+            description: 'React, Next.js, Node.js'
         },
         {
             name: 'Datenbank',
             level: 85,
-            description: 'Datenbankentwicklung und -administration'
+            description: 'PostgreSQL, Supabase, MariaDB'
         },
         {
-            name: 'E-Commerce',
+            name: 'DevOps',
-            level: 95,
-            description: 'Online-Handel und Plattformen'
-        },
-        {
-            name: 'Python',
-            level: 80,
-            description: 'Programmiersprache Python'
-        },
-        {
-            name: 'React',
             level: 75,
-            description: 'Frontend-Entwicklung mit React'
+            description: 'Docker, Vercel, Dedicated Servers'
-        },
-        {
-            name: 'Server',
-            level: 70,
-            description: 'Server-Administration'
         }
     ],
     aria: {

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

@@ -24,6 +24,12 @@ export const portfolio = {
     },
     // Projekt-Details
     project: {
+        loading: 'Projekt wird geladen...',
+        backToPortfolio: 'Zurück zum Portfolio',
+        notFound: {
+            title: 'Projekt nicht gefunden',
+            description: 'Das angeforderte Projekt konnte nicht gefunden werden.'
+        },
         navigation: {
             back: 'Zurück zum Portfolio',
             projectDetails: 'PROJEKT DETAILS'

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

@@ -3,6 +3,8 @@ 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';
+import websiteMitKi from './projects/website-mit-ki';
+import recrobot from './projects/recrobot';
 export const portfolio = {
     // Meta-Informationen für die Portfolio-Seite
     seo: {
@@ -58,5 +60,7 @@ export const portfolio = {
         'kamenpro': kamenpro,
         'smart-warehouse': smartWarehouse,
         'power-platform-governance': powerPlatformGovernance,
+        'website-mit-ki': websiteMitKi,
+        'recrobot': recrobot,
     }
 };

src/i18n/locales/de/portfolio/projects/automated-ad-creatives.ts

@@ -0,0 +1,95 @@
+// src/i18n/locales/de/portfolio/projects/automated-ad-creatives.ts
+export const automatedAdCreatives = {
+    meta: {
+        slug: 'automated-ad-creatives',
+        title: 'Automatisierte Ad Creatives: KI-gestützte Werbemittel-Erstellung',
+        description: 'Entwicklung eines Workflows zur automatisierten Erstellung von Facebook Ad Creatives mit Claude Opus 4.5 - ohne Designsoftware, komplett im Chat',
+        excerpt: 'Von der Designvorlage zum fertigen Werbemittel: Wie KI die Ad-Creative-Erstellung revolutioniert.',
+        date: '2024-12',
+        category: 'KI & Automatisierung',
+        client: 'Eigenprojekt',
+        duration: '1 Tag',
+        url: '',
+        repository: '',
+        documentation: '',
+        published: true,
+        featured: true,
+        technologies: ['Claude Opus 4.5', 'HTML/CSS', 'PNG Export', 'Prompt Engineering'],
+        tags: ['KI', 'Automatisierung', 'Facebook Ads', 'Marketing', 'No-Code'],
+        videoUrl: 'https://www.tella.tv/video/automatisierte-ad-creatives-1kyw'
+    },
+    content: {
+        intro: 'Programme wie Illustrator, InDesign, Figma oder Canva können kompliziert sein. Dieses Projekt zeigt, wie sich Facebook Ad Creatives vollständig im KI-Chat erstellen lassen - ohne Designsoftware, ohne Programmierkenntnisse.',
+
+        challenge: {
+            title: 'Die Herausforderung',
+            description: 'Die Erstellung von Werbemitteln für Facebook-Kampagnen erfordert traditionell:',
+            points: [
+                'Kenntnisse in Designsoftware (Illustrator, Figma, Canva)',
+                'Zeit für Einarbeitung und Umsetzung',
+                'Verständnis für Formatvorgaben und Best Practices',
+                'Iterationen zwischen Design und Marketing',
+                'Budget für Designer oder Design-Tools'
+            ]
+        },
+
+        solution: {
+            title: 'Der Lösungsansatz',
+            description: 'Ein KI-gestützter Workflow, der den gesamten Prozess im Chat-Fenster abbildet:',
+            content: 'Der komplette Workflow findet im Chat mit Claude Opus 4.5 statt. Alternativ funktionieren auch Gemini oder ChatGPT.',
+            points: [
+                'Designvorlage als visuelle Referenz für die KI',
+                'HTML-Generierung durch natürlichsprachliche Prompts',
+                'Automatische Konvertierung zu PNG-Bilddateien',
+                'Integration zusätzlicher Bilder per Drag & Drop',
+                'Iterationen durch einfache Chat-Anweisungen'
+            ]
+        },
+
+        technical: {
+            title: 'Technische Umsetzung',
+            description: 'Der Workflow im Detail:',
+            points: [
+                'Schritt 1: Designvorlage von Envato Elements als Referenz',
+                'Schritt 2: Prompt mit Bild an Claude senden - HTML wird generiert',
+                'Schritt 3: HTML zu PNG exportieren lassen',
+                'Schritt 4: Zusätzliche Bilder per Drag & Drop integrieren'
+            ]
+        },
+
+        tools: {
+            title: 'Verwendete Tools',
+            items: [
+                { name: 'Claude Opus 4.5', purpose: 'KI für HTML-Generierung und Bildexport' },
+                { name: 'Envato Elements', purpose: 'Designvorlagen als Referenz' },
+                { name: 'Unsplash', purpose: 'Kostenlose Bilder für die Creatives' }
+            ]
+        },
+
+        results: {
+            title: 'Vorteile des Ansatzes',
+            description: 'Der KI-gestützte Workflow bietet mehrere Vorteile:',
+            points: [
+                'Keine Design-Skills nötig: Die KI übernimmt die technische Umsetzung',
+                'Schnelle Iterationen: Änderungen in Sekunden durch Chat-Anweisungen',
+                'Skalierbar: Beliebig viele Varianten für A/B-Tests',
+                'Kosteneffizient: Keine teuren Design-Tools erforderlich',
+                'Flexibel: Funktioniert auch mit Gemini oder ChatGPT'
+            ]
+        },
+
+        useCases: {
+            title: 'Einsatzszenarien',
+            points: [
+                'Performance-Marketing: Schnelle Creative-Tests ohne Wartezeit',
+                'E-Commerce: Produktwerbung in großem Umfang',
+                'Startups: Professionelle Ads ohne Design-Team',
+                'Agenturen: Effiziente Kundenarbeit bei Ad-Erstellung'
+            ]
+        },
+
+        conclusion: 'Der Workflow demonstriert, wie KI die Erstellung von Ad Creatives vereinfacht. Das Ergebnis ist vielleicht noch nicht auf dem Niveau eines professionellen Grafikdesigners - aber für schnelle Tests, erste Entwürfe oder Teams ohne Designressourcen ist dieser Ansatz eine echte Alternative. Die Technologie entwickelt sich rasant weiter.'
+    }
+};
+
+export default automatedAdCreatives;

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

@@ -0,0 +1,116 @@
+// src/i18n/locales/de/portfolio/projects/recrobot.ts
+export const recrobot = {
+    meta: {
+        slug: 'recrobot',
+        title: "Recrobot - KI-gestütztes Recruiting Tool für automatisierte Screening-Interviews",
+        description: "Entwicklung eines modernen Voice AI Recruiting Tools für automatisierte Bewerbungsgespräche mit Echtzeit-Transkription und DSGVO-Konformität.",
+        excerpt: "KI-basiertes Recruiting Tool mit Voice AI Technologie für automatisierte Screening-Interviews. 24/7 verfügbar, DSGVO-konform, sofortige Auswertung.",
+        date: "2024-12",
+        category: "AI & Automation",
+        client: "Everlast Consulting",
+        duration: "1 Monat",
+        url: "https://recrobot.de",
+        videoUrl: "https://www.tella.tv/video/recrobot-automatisierte-bewerbungsgesprache-8kub",
+        repository: "",
+        documentation: "",
+        published: true,
+        featured: true,
+        technologies: ["Next.js", "React", "TypeScript", "Tailwind CSS", "shadcn/ui", "Lucide", "Zustand", "VAPI", "Claude AI", "Deepgram"],
+        tags: ["Voice AI", "Recruiting", "HR Tech", "Automatisierung", "Transkription"]
+    },
+    content: {
+        intro: "Recrobot ist ein modernes, KI-gestütztes Recruiting Tool, das erste Screening-Interviews mit Bewerbern automatisiert. Die Anwendung nutzt Voice AI Technologie, um natürliche gesprochene Interviews durchzuführen und Transkripte für das HR-Team zu erstellen.",
+
+        challenge: {
+            title: "Die Herausforderung",
+            description: "Unternehmen stehen vor großen Herausforderungen bei der Durchführung von Erstgesprächen mit Bewerbern.",
+            points: [
+                "Zeitaufwendige Terminkoordination für Screening-Interviews",
+                "HR-Abteilungen sind mit Routinegesprächen überlastet",
+                "Lange Wartezeiten für Bewerber bis zur ersten Rückmeldung",
+                "Inkonsistente Interviewqualität durch verschiedene Interviewer",
+                "Hoher administrativer Aufwand für Dokumentation"
+            ]
+        },
+
+        solution: {
+            title: "Die Lösung",
+            description: "Ein KI-basiertes Voice-Interview-System mit intelligenter Gesprächsführung",
+            content: "Recrobot ermöglicht Bewerbern, jederzeit und überall ein Screening-Interview durchzuführen - ohne Terminkoordination. Das System führt natürliche Gespräche, stellt relevante Fragen und erstellt automatisch strukturierte Transkripte für das HR-Team.",
+            points: [
+                "24/7 Verfügbarkeit für Bewerber weltweit",
+                "Intelligente Gesprächsführung mit natürlicher Spracherkennung",
+                "Sofortige Auswertung in Minuten statt Wochen",
+                "Höchste Datenschutzstandards und DSGVO-Konformität",
+                "Live-Transkription mit Sprechersegmentierung"
+            ]
+        },
+
+        technical: {
+            title: "Technische Umsetzung",
+            description: "Die Lösung basiert auf einem modernen Tech-Stack mit Voice AI Integration:",
+            points: [
+                "Next.js und React für das Frontend",
+                "TypeScript für typsichere Entwicklung",
+                "Tailwind CSS und shadcn/ui für modernes UI-Design",
+                "Zustand für State Management",
+                "VAPI für Voice AI Integration",
+                "Claude Sonnet 4.5 als KI-Modell für Gesprächsführung",
+                "Deepgram für Echtzeit-Transkription"
+            ],
+            code: `// Voice AI Konfiguration
+const assistant = {
+    name: "Recrobot",
+    model: "claude-sonnet-4.5",
+    firstMessage: "Hallo, ich bin Recrobot von Everlast Consulting...",
+    maxTokens: 300,
+    temperature: 0.5,
+    voice: {
+        provider: "sonic-3",
+        voice: "catia",
+        language: "German Conversational Woman"
+    },
+    transcription: {
+        provider: "deepgram"
+    },
+    speakingPlan: {
+        waitSeconds: 1.2,
+        onPunctuationSeconds: 0.1,
+        onNoPunctuationSeconds: 1.5,
+        onNumberSeconds: 0.5
+    }
+};`
+        },
+
+        implementation: {
+            title: "Benutzerflow",
+            description: "Der Bewerbungsprozess wurde für maximale Benutzerfreundlichkeit optimiert:",
+            points: [
+                "Bewerber kommt auf die Landingpage",
+                "Ausfüllen des Formulars mit persönlichen Daten",
+                "Client-seitige Validierung der Eingaben",
+                "Erstellung der Bewerberdaten und Store-Aktualisierung",
+                "Start des Voice-Interviews mit Mikrofonberechtigung",
+                "Echtzeit-Gespräch mit Live-Transkription",
+                "Download des strukturierten Transkripts"
+            ]
+        },
+
+        results: {
+            title: "Ergebnisse und Vorteile",
+            description: "Recrobot bietet signifikante Verbesserungen im Recruiting-Prozess:",
+            points: [
+                "Drastische Zeitersparnis für HR-Abteilungen",
+                "Sofortige Verfügbarkeit ohne Terminkoordination",
+                "Konsistente Interviewqualität durch standardisierte Fragen",
+                "Strukturierte Transkripte mit Sprechersegmentierung",
+                "DSGVO-konforme Datenverarbeitung",
+                "Skalierbare Lösung für beliebig viele Bewerber"
+            ]
+        },
+
+        conclusion: "Recrobot revolutioniert den Recruiting-Prozess durch die Kombination von Voice AI und intelligenter Gesprächsführung. Die Lösung ermöglicht es Unternehmen, ihre HR-Abteilungen zu entlasten und Bewerbern einen modernen, flexiblen Bewerbungsprozess zu bieten. Mit Echtzeit-Transkription und DSGVO-Konformität setzt Recrobot neue Maßstäbe im Bereich HR-Tech."
+    }
+};
+
+export default recrobot;

src/i18n/locales/de/portfolio/projects/website-mit-ki.ts

@@ -0,0 +1,80 @@
+// src/i18n/locales/de/portfolio/projects/website-mit-ki.ts
+export const websiteMitKi = {
+    meta: {
+        slug: 'website-mit-ki',
+        title: 'Eigene Website mit KI bauen: Von Null zur fertigen Seite',
+        description: 'Schritt-für-Schritt Anleitung zum Aufbau einer professionellen Website mit Claude Code - DSGVO-konform, mehrsprachig, mit Portfolio und Blog',
+        excerpt: 'Wie du in unter einer Stunde eine komplette Website erstellst - ohne eine einzige Zeile Code selbst zu schreiben.',
+        date: '2024-12',
+        category: 'KI & Automatisierung',
+        client: 'Eigenprojekt',
+        duration: '30 Minuten',
+        url: '',
+        repository: '',
+        documentation: '',
+        published: true,
+        featured: true,
+        technologies: ['Claude Code', 'React', 'TypeScript', 'Vercel', 'GitHub', 'Vite'],
+        tags: ['KI', 'Website', 'No-Code', 'Tutorial', 'Claude Code', 'Vercel'],
+        videoUrl: 'https://www.tella.tv/video/baue-deine-website-noch-heute-mit-ki-8f7v'
+    },
+    content: {
+        intro: 'Eine professionelle Website ohne Programmierkenntnisse? Mit KI ist das heute möglich. Dieses Tutorial zeigt den kompletten Prozess - von der leeren Projektmappe zur fertigen, gehosteten Website.',
+
+        challenge: {
+            title: 'Die Herausforderung',
+            description: 'Der traditionelle Weg zur eigenen Website ist oft kompliziert und teuer:',
+            points: [
+                'Baukastensysteme wie Wix, WordPress oder Webflow verursachen monatliche Kosten',
+                'Eigene Entwicklung erfordert Programmierkenntnisse',
+                'Designer und Entwickler sind teuer',
+                'DSGVO-Konformität und SEO-Optimierung sind komplex',
+                'Mehrsprachigkeit und responsive Design erfordern zusätzlichen Aufwand'
+            ]
+        },
+
+        solution: {
+            title: 'Der Lösungsansatz',
+            description: 'Mit KI lässt sich eine komplette Website in unter einer Stunde aufbauen:',
+            content: 'Der komplette Workflow nutzt Claude Code für die autonome Entwicklung, GitHub für die Versionierung und Vercel für kostenloses Hosting.',
+            points: [
+                'DSGVO-konforme Implementierung mit Cookie-Banner',
+                'Mehrsprachigkeit (Deutsch, Englisch, weitere möglich)',
+                'Portfolio-Seite mit interaktiven Projekten',
+                'Blog-Funktionalität für Blogposts',
+                'SEO-Optimierung für bessere Google-Rankings',
+                'Kontaktformular für potenzielle Kunden'
+            ]
+        },
+
+        technical: {
+            title: 'Der Workflow',
+            description: 'So funktioniert der Prozess Schritt für Schritt:',
+            points: [
+                'Schritt 1: GitHub-Account erstellen und Repository anlegen',
+                'Schritt 2: Vercel-Account für kostenloses Hosting einrichten',
+                'Schritt 3: Lokalen Projektordner mit relevanten Dokumenten vorbereiten',
+                'Schritt 4: Claude Code öffnen und Prompt mit gewünschten Features eingeben',
+                'Schritt 5: KI arbeitet autonom und erstellt die komplette Website',
+                'Schritt 6: Projekt auf GitHub pushen und in Vercel importieren'
+            ]
+        },
+
+        results: {
+            title: 'Vorteile dieser Lösung',
+            description: 'Die KI-gestützte Website-Entwicklung bietet mehrere Vorteile:',
+            points: [
+                'Keine Programmierkenntnisse erforderlich',
+                'Minimale Kosten: Nur KI-Abo und optional Domain',
+                'Bessere Sichtbarkeit durch SEO-Optimierung',
+                'Volle Kontrolle: Code liegt auf GitHub, Hosting ist kostenlos',
+                'Schnelle Änderungen per Chat-Anweisung möglich',
+                'Mobile-optimiertes, responsives Design inklusive'
+            ]
+        },
+
+        conclusion: 'Eine komplette, professionelle Website lässt sich heute in unter einer Stunde aufbauen - ohne eine einzige Zeile Code selbst zu schreiben. Die Kombination aus KI-Entwicklung, kostenlosem Hosting und Versionierung macht diese Lösung nicht nur für Entwickler interessant, sondern für alle, die eine professionelle Webpräsenz benötigen.'
+    }
+};
+
+export default websiteMitKi;

src/i18n/locales/de/seo-content.ts

@@ -1,8 +1,8 @@
 export const seoContent = {
   hero: {
-    title: "Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant Köln",
+    title: "Damjan Savić | Fullstack-, IoT- & KI-Entwickler",
-    subtitle: "Enterprise Software Development & KI-Integration von Damjan Savić",
+    subtitle: "Skalierbare Softwarelösungen mit IoT- und KI-Integration",
-    description: "Damjan Savić ist Senior Fullstack Entwickler und Digital Solutions Consultant in Köln. Mit über 10 Jahren Erfahrung entwickelt Damjan Savić Enterprise Software, Cloud-native Lösungen und KI-gestützte Systeme. Spezialist für Python, React, TypeScript, OLLAMA, Microservices und digitale Transformation.",
+    description: "Als Fullstack-Entwickler aus Köln spezialisiert sich Damjan Savić auf die Entwicklung skalierbarer Softwarelösungen mit IoT- und KI-Integration.",
     cta: {
       primary: "Projekte ansehen",
       secondary: "Kontakt aufnehmen"

src/i18n/locales/en/meta.ts

@@ -1,9 +1,9 @@
 export const meta = {
     site: {
         name: 'Damjan Savić',
-        title: 'Damjan Savić - Senior Fullstack Developer & Digital Solutions Consultant | Cologne, Germany',
+        title: 'Damjan Savić | Fullstack, IoT & AI Developer',
-        subtitle: 'Enterprise Software Development, AI Integration & Cloud Architecture by Damjan Savić',
+        subtitle: 'Scalable Software Solutions with IoT and AI Integration',
-        description: 'Damjan Savić is a Senior Fullstack Developer and Digital Solutions Consultant based in Cologne, Germany. Specializing in Enterprise Software Development, Cloud-native solutions, and AI integration. Damjan Savić delivers custom solutions using Python, React, TypeScript, OLLAMA, and modern web technologies for digital transformation.',
+        description: 'As a fullstack developer from Cologne, Damjan Savić specializes in building scalable software solutions with IoT and AI integration.',
         keywords: [
             'Damjan Savić',
             'Damjan Savic',

src/i18n/locales/en/pages/home/experience.ts

@@ -7,14 +7,24 @@ export const experience = {
     },
     positions: [
         {
-            role: 'Consultant Digital Solutions & Developer',
+            role: 'Process Automation Specialist',
-            company: 'RITTER Gesellschaft für digitale Geschäftsprozesse mbH',
+            company: 'Everlast Consulting GmbH',
-            period: '08/2023 - PRESENT',
+            period: '12/2024 - PRESENT',
             highlights: [
-                'JTL WaWi, WMS and POS consulting & implementation',
+                'Developing AI agents with n8n and Zapier',
-                'Python-based automation solutions',
+                'Building web scraping solutions',
-                'RFID systems and GUI development',
+                'RecroBot voice interview platform',
-                'AI & Business Intelligence'
+                'Migration from Power Automate to n8n'
+            ]
+        },
+        {
+            role: 'Consultant Digital Solutions',
+            company: 'Ritter Digital GmbH',
+            period: '08/2023 - 11/2024',
+            highlights: [
+                'Backend services on dedicated servers',
+                'AI integration via Power Automate',
+                'RFID/IoT solutions with Zebra hardware'
             ]
         },
         {

src/i18n/locales/en/pages/home/hero.ts

@@ -1,11 +1,13 @@
 // src/i18n/locales/en/pages/home/hero.ts
 export const hero = {
-    title: 'SENIOR FULLSTACK DEVELOPER & DIGITAL SOLUTIONS CONSULTANT',
+    title: 'AI & AUTOMATION SPECIALIST',
     name: 'DAMJAN SAVIĆ',
-    subtitle: 'ENTERPRISE SOFTWARE | AI INTEGRATION | CLOUD ARCHITECTURE',
+    subtitle: 'AI AGENTS | VOICE AI | PROCESS AUTOMATION',
-    cta: 'WORK WITH DAMJAN SAVIĆ',
+    description: 'Building AI agents and automation solutions. From voice AI platforms to autonomous web agents.',
+    currentRole: 'Currently @ Everlast Consulting GmbH',
+    cta: 'GET IN TOUCH',
     image: {
-        alt: 'Damjan Savić - Senior Fullstack Developer & Digital Solutions Consultant | Enterprise Software Expert'
+        alt: 'Damjan Savić - AI & Automation Specialist | AI Agents, Voice AI & Process Automation'
     },
     social: {
         getInTouch: 'Get in touch',

src/i18n/locales/en/pages/home/skills.ts

@@ -3,34 +3,34 @@ export const skills = {
     title: 'Skills',
     skills: [
         {
-            name: 'ERP',
+            name: 'AI & LLMs',
             level: 90,
-            description: 'Enterprise Resource Planning'
+            description: 'GPT-4, Claude API, Vapi Voice AI'
+        },
+        {
+            name: 'Automation',
+            level: 85,
+            description: 'n8n, Zapier, Power Automate'
+        },
+        {
+            name: 'Python',
+            level: 90,
+            description: 'Backend, APIs, Automation'
+        },
+        {
+            name: 'TypeScript',
+            level: 85,
+            description: 'React, Next.js, Node.js'
         },
         {
             name: 'Database',
             level: 85,
-            description: 'Database development and administration'
+            description: 'PostgreSQL, Supabase, MariaDB'
         },
         {
-            name: 'E-Commerce',
+            name: 'DevOps',
-            level: 95,
-            description: 'Online commerce and platforms'
-        },
-        {
-            name: 'Python',
-            level: 80,
-            description: 'Python programming language'
-        },
-        {
-            name: 'React',
             level: 75,
-            description: 'Frontend development with React'
+            description: 'Docker, Vercel, Dedicated Servers'
-        },
-        {
-            name: 'Server',
-            level: 70,
-            description: 'Server administration'
         }
     ],
     aria: {

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

@@ -24,6 +24,12 @@ export const portfolio = {
     },
     // Project details
     project: {
+        loading: 'Loading project...',
+        backToPortfolio: 'Back to Portfolio',
+        notFound: {
+            title: 'Project not found',
+            description: 'The requested project could not be found.'
+        },
         navigation: {
             back: 'Back to Portfolio',
             projectDetails: 'PROJECT DETAILS'

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

@@ -3,6 +3,8 @@ 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';
+import websiteMitKi from './projects/website-mit-ki';
+import recrobot from './projects/recrobot';
 export const portfolio = {
     // Meta information for the portfolio page
     seo: {
@@ -58,5 +60,7 @@ export const portfolio = {
         'kamenpro': kamenpro,
         'smart-warehouse': smartWarehouse,
         'power-platform-governance': powerPlatformGovernance,
+        'website-mit-ki': websiteMitKi,
+        'recrobot': recrobot,
     }
 };

src/i18n/locales/en/portfolio/projects/automated-ad-creatives.ts

@@ -0,0 +1,95 @@
+// src/i18n/locales/en/portfolio/projects/automated-ad-creatives.ts
+export const automatedAdCreatives = {
+    meta: {
+        slug: 'automated-ad-creatives',
+        title: 'Automated Ad Creatives: AI-Powered Ad Creation',
+        description: 'Development of a workflow for automated creation of Facebook Ad Creatives with Claude Opus 4.5 - without design software, entirely in chat',
+        excerpt: 'From design template to finished ad: How AI revolutionizes ad creative creation.',
+        date: '2024-12',
+        category: 'AI & Automation',
+        client: 'Personal Project',
+        duration: '1 Day',
+        url: '',
+        repository: '',
+        documentation: '',
+        published: true,
+        featured: true,
+        technologies: ['Claude Opus 4.5', 'HTML/CSS', 'PNG Export', 'Prompt Engineering'],
+        tags: ['AI', 'Automation', 'Facebook Ads', 'Marketing', 'No-Code'],
+        videoUrl: 'https://www.tella.tv/video/automatisierte-ad-creatives-1kyw'
+    },
+    content: {
+        intro: 'Programs like Illustrator, InDesign, Figma, or Canva can be complicated. This project shows how Facebook Ad Creatives can be created entirely in an AI chat - without design software, without programming knowledge.',
+
+        challenge: {
+            title: 'The Challenge',
+            description: 'Creating ad assets for Facebook campaigns traditionally requires:',
+            points: [
+                'Knowledge of design software (Illustrator, Figma, Canva)',
+                'Time for learning and implementation',
+                'Understanding of format requirements and best practices',
+                'Iterations between design and marketing',
+                'Budget for designers or design tools'
+            ]
+        },
+
+        solution: {
+            title: 'The Solution',
+            description: 'An AI-powered workflow that handles the entire process in a chat window:',
+            content: 'The complete workflow takes place in chat with Claude Opus 4.5. Alternatively, Gemini or ChatGPT also work.',
+            points: [
+                'Design template as visual reference for the AI',
+                'HTML generation through natural language prompts',
+                'Automatic conversion to PNG image files',
+                'Integration of additional images via drag & drop',
+                'Iterations through simple chat instructions'
+            ]
+        },
+
+        technical: {
+            title: 'Technical Implementation',
+            description: 'The workflow in detail:',
+            points: [
+                'Step 1: Design template from Envato Elements as reference',
+                'Step 2: Send prompt with image to Claude - HTML is generated',
+                'Step 3: Export HTML to PNG',
+                'Step 4: Integrate additional images via drag & drop'
+            ]
+        },
+
+        tools: {
+            title: 'Tools Used',
+            items: [
+                { name: 'Claude Opus 4.5', purpose: 'AI for HTML generation and image export' },
+                { name: 'Envato Elements', purpose: 'Design templates as reference' },
+                { name: 'Unsplash', purpose: 'Free images for creatives' }
+            ]
+        },
+
+        results: {
+            title: 'Benefits of This Approach',
+            description: 'The AI-powered workflow offers several advantages:',
+            points: [
+                'No design skills needed: AI handles the technical implementation',
+                'Fast iterations: Changes in seconds through chat instructions',
+                'Scalable: Any number of variants for A/B testing',
+                'Cost-effective: No expensive design tools required',
+                'Flexible: Also works with Gemini or ChatGPT'
+            ]
+        },
+
+        useCases: {
+            title: 'Use Cases',
+            points: [
+                'Performance Marketing: Quick creative tests without waiting',
+                'E-Commerce: Product advertising at scale',
+                'Startups: Professional ads without a design team',
+                'Agencies: Efficient client work for ad creation'
+            ]
+        },
+
+        conclusion: 'The workflow demonstrates how AI simplifies the creation of ad creatives. The result may not yet be at the level of a professional graphic designer - but for quick tests, initial drafts, or teams without design resources, this approach is a real alternative. The technology is evolving rapidly.'
+    }
+};
+
+export default automatedAdCreatives;

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

@@ -0,0 +1,116 @@
+// src/i18n/locales/en/portfolio/projects/recrobot.ts
+export const recrobot = {
+    meta: {
+        slug: 'recrobot',
+        title: "Recrobot - AI-Powered Recruiting Tool for Automated Screening Interviews",
+        description: "Development of a modern Voice AI recruiting tool for automated job interviews with real-time transcription and GDPR compliance.",
+        excerpt: "AI-based recruiting tool with Voice AI technology for automated screening interviews. Available 24/7, GDPR compliant, instant evaluation.",
+        date: "2024-12",
+        category: "AI & Automation",
+        client: "Everlast Consulting",
+        duration: "1 month",
+        url: "https://recrobot.de",
+        videoUrl: "https://www.tella.tv/video/recrobot-automatisierte-bewerbungsgesprache-8kub",
+        repository: "",
+        documentation: "",
+        published: true,
+        featured: true,
+        technologies: ["Next.js", "React", "TypeScript", "Tailwind CSS", "shadcn/ui", "Lucide", "Zustand", "VAPI", "Claude AI", "Deepgram"],
+        tags: ["Voice AI", "Recruiting", "HR Tech", "Automation", "Transcription"]
+    },
+    content: {
+        intro: "Recrobot is a modern, AI-powered recruiting tool that automates initial screening interviews with applicants. The application uses Voice AI technology to conduct natural spoken interviews and create transcripts for the HR team.",
+
+        challenge: {
+            title: "The Challenge",
+            description: "Companies face significant challenges when conducting initial interviews with applicants.",
+            points: [
+                "Time-consuming scheduling coordination for screening interviews",
+                "HR departments overwhelmed with routine conversations",
+                "Long waiting times for applicants until first feedback",
+                "Inconsistent interview quality due to different interviewers",
+                "High administrative effort for documentation"
+            ]
+        },
+
+        solution: {
+            title: "The Solution",
+            description: "An AI-based voice interview system with intelligent conversation management",
+            content: "Recrobot enables applicants to conduct a screening interview anytime, anywhere - without scheduling coordination. The system conducts natural conversations, asks relevant questions, and automatically creates structured transcripts for the HR team.",
+            points: [
+                "24/7 availability for applicants worldwide",
+                "Intelligent conversation management with natural speech recognition",
+                "Instant evaluation in minutes instead of weeks",
+                "Highest data protection standards and GDPR compliance",
+                "Live transcription with speaker segmentation"
+            ]
+        },
+
+        technical: {
+            title: "Technical Implementation",
+            description: "The solution is based on a modern tech stack with Voice AI integration:",
+            points: [
+                "Next.js and React for the frontend",
+                "TypeScript for type-safe development",
+                "Tailwind CSS and shadcn/ui for modern UI design",
+                "Zustand for state management",
+                "VAPI for Voice AI integration",
+                "Claude Sonnet 4.5 as AI model for conversation management",
+                "Deepgram for real-time transcription"
+            ],
+            code: `// Voice AI Configuration
+const assistant = {
+    name: "Recrobot",
+    model: "claude-sonnet-4.5",
+    firstMessage: "Hello, I am Recrobot from Everlast Consulting...",
+    maxTokens: 300,
+    temperature: 0.5,
+    voice: {
+        provider: "sonic-3",
+        voice: "catia",
+        language: "German Conversational Woman"
+    },
+    transcription: {
+        provider: "deepgram"
+    },
+    speakingPlan: {
+        waitSeconds: 1.2,
+        onPunctuationSeconds: 0.1,
+        onNoPunctuationSeconds: 1.5,
+        onNumberSeconds: 0.5
+    }
+};`
+        },
+
+        implementation: {
+            title: "User Flow",
+            description: "The application process was optimized for maximum user-friendliness:",
+            points: [
+                "Applicant arrives at the landing page",
+                "Fills out the form with personal data",
+                "Client-side validation of inputs",
+                "Creation of applicant data and store update",
+                "Start of voice interview with microphone permission",
+                "Real-time conversation with live transcription",
+                "Download of structured transcript"
+            ]
+        },
+
+        results: {
+            title: "Results and Benefits",
+            description: "Recrobot offers significant improvements in the recruiting process:",
+            points: [
+                "Dramatic time savings for HR departments",
+                "Instant availability without scheduling coordination",
+                "Consistent interview quality through standardized questions",
+                "Structured transcripts with speaker segmentation",
+                "GDPR-compliant data processing",
+                "Scalable solution for any number of applicants"
+            ]
+        },
+
+        conclusion: "Recrobot revolutionizes the recruiting process by combining Voice AI with intelligent conversation management. The solution enables companies to relieve their HR departments and offer applicants a modern, flexible application process. With real-time transcription and GDPR compliance, Recrobot sets new standards in HR tech."
+    }
+};
+
+export default recrobot;

src/i18n/locales/en/portfolio/projects/website-mit-ki.ts

@@ -0,0 +1,80 @@
+// src/i18n/locales/en/portfolio/projects/website-mit-ki.ts
+export const websiteMitKi = {
+    meta: {
+        slug: 'website-mit-ki',
+        title: 'Build Your Own Website with AI: From Zero to Finished Site',
+        description: 'Step-by-step guide to building a professional website with Claude Code - GDPR compliant, multilingual, with portfolio and blog',
+        excerpt: 'How to create a complete website in under an hour - without writing a single line of code yourself.',
+        date: '2024-12',
+        category: 'AI & Automation',
+        client: 'Personal Project',
+        duration: '30 Minutes',
+        url: '',
+        repository: '',
+        documentation: '',
+        published: true,
+        featured: true,
+        technologies: ['Claude Code', 'React', 'TypeScript', 'Vercel', 'GitHub', 'Vite'],
+        tags: ['AI', 'Website', 'No-Code', 'Tutorial', 'Claude Code', 'Vercel'],
+        videoUrl: 'https://www.tella.tv/video/baue-deine-website-noch-heute-mit-ki-8f7v'
+    },
+    content: {
+        intro: 'A professional website without programming knowledge? With AI, this is possible today. This tutorial shows the complete process - from an empty project folder to a finished, hosted website.',
+
+        challenge: {
+            title: 'The Challenge',
+            description: 'The traditional path to your own website is often complicated and expensive:',
+            points: [
+                'Website builders like Wix, WordPress or Webflow incur monthly costs',
+                'Custom development requires programming skills',
+                'Designers and developers are expensive',
+                'GDPR compliance and SEO optimization are complex',
+                'Multilingual support and responsive design require additional effort'
+            ]
+        },
+
+        solution: {
+            title: 'The Solution',
+            description: 'With AI, a complete website can be built in under an hour:',
+            content: 'The complete workflow uses Claude Code for autonomous development, GitHub for versioning, and Vercel for free hosting.',
+            points: [
+                'GDPR-compliant implementation with cookie banner',
+                'Multilingual support (German, English, more possible)',
+                'Portfolio page with interactive projects',
+                'Blog functionality for blog posts',
+                'SEO optimization for better Google rankings',
+                'Contact form for potential clients'
+            ]
+        },
+
+        technical: {
+            title: 'The Workflow',
+            description: 'This is how the process works step by step:',
+            points: [
+                'Step 1: Create GitHub account and repository',
+                'Step 2: Set up Vercel account for free hosting',
+                'Step 3: Prepare local project folder with relevant documents',
+                'Step 4: Open Claude Code and enter prompt with desired features',
+                'Step 5: AI works autonomously and creates the complete website',
+                'Step 6: Push project to GitHub and import in Vercel'
+            ]
+        },
+
+        results: {
+            title: 'Benefits of This Solution',
+            description: 'AI-powered website development offers several advantages:',
+            points: [
+                'No programming skills required',
+                'Minimal costs: Only AI subscription and optionally domain',
+                'Better visibility through SEO optimization',
+                'Full control: Code is on GitHub, hosting is free',
+                'Quick changes possible via chat instructions',
+                'Mobile-optimized, responsive design included'
+            ]
+        },
+
+        conclusion: 'A complete, professional website can be built today in under an hour - without writing a single line of code yourself. The combination of AI development, free hosting, and versioning makes this solution interesting not only for developers, but for anyone who needs a professional web presence.'
+    }
+};
+
+export default websiteMitKi;

src/i18n/locales/en/seo-content.ts

@@ -1,8 +1,8 @@
 export const seoContent = {
   hero: {
-    title: "Damjan Savić - Senior Fullstack Developer & Digital Solutions Consultant",
+    title: "Damjan Savić | Fullstack, IoT & AI Developer",
-    subtitle: "Enterprise Software Development & AI Integration by Damjan Savić",
+    subtitle: "Scalable Software Solutions with IoT and AI Integration",
-    description: "Damjan Savić is a Senior Fullstack Developer and Digital Solutions Consultant based in Cologne, Germany. With 10+ years of experience, Damjan Savić delivers enterprise software, cloud-native solutions, and AI-powered systems using Python, React, TypeScript, OLLAMA, and modern technologies.",
+    description: "As a fullstack developer from Cologne, Damjan Savić specializes in building scalable software solutions with IoT and AI integration.",
     cta: {
       primary: "View Projects",
       secondary: "Work with Damjan Savić"

src/i18n/locales/sr/meta.ts

@@ -1,9 +1,9 @@
 export const meta = {
     site: {
         name: 'Damjan Savić | Дамјан Савић',
-        title: 'Damjan Savić - Старији програмер пуног стека | Консултант за дигитална решења',
+        title: 'Damjan Savić | Fullstack, IoT и AI програмер',
-        subtitle: 'Експерт за софтвер за предузећа и облак архитектуру у Немачкој',
+        subtitle: 'Скалабилна софтверска решења са IoT и AI интеграцијом',
-        description: 'Дамјан Савић - искусни старији програмер пуног стека и консултант за дигитална решења из Келна, Немачка. Специјализован за софтвер за предузећа, облак архитектуру и интеграцију вештачке интелигенције за компаније у Европи.',
+        description: 'Као fullstack програмер из Келна, Дамјан Савић се специјализује за развој скалабилних софтверских решења са IoT и AI интеграцијом.',
         keywords: [
             'Damjan Savić',
             'Дамјан Савић',

src/i18n/locales/sr/pages/home/experience.ts

@@ -7,14 +7,24 @@ export const experience = {
     },
     positions: [
         {
-            role: 'Consultant Digital Solutions & Developer',
+            role: 'Specijalist za automatizaciju procesa',
-            company: 'RITTER Gesellschaft für digitale Geschäftsprozesse mbH',
+            company: 'Everlast Consulting GmbH',
-            period: '08/2023 - DANAS',
+            period: '12/2024 - DANAS',
             highlights: [
-                'JTL WaWi, WMS i POS konsalting i implementacija',
+                'Razvoj AI agenata sa n8n i Zapier',
-                'Python-bazirana automatizaciona rešenja',
+                'Izrada web scraping rešenja',
-                'RFID sistemi i GUI razvoj',
+                'RecroBot voice interview platforma',
-                'AI i poslovna inteligencija'
+                'Migracija sa Power Automate na n8n'
+            ]
+        },
+        {
+            role: 'Consultant Digital Solutions',
+            company: 'Ritter Digital GmbH',
+            period: '08/2023 - 11/2024',
+            highlights: [
+                'Backend servisi na dedikovanim serverima',
+                'AI integracija preko Power Automate',
+                'RFID/IoT rešenja sa Zebra hardverom'
             ]
         },
         {

src/i18n/locales/sr/pages/home/hero.ts

@@ -1,10 +1,13 @@
 // src/i18n/locales/sr/pages/home/hero.ts
 export const hero = {
-    title: 'SENIOR FULLSTACK DEVELOPER',
+    title: 'AI & AUTOMATION SPECIALIST',
     name: 'DAMJAN SAVIĆ',
+    subtitle: 'AI AGENTI | VOICE AI | AUTOMATIZACIJA PROCESA',
+    description: 'Razvoj AI agenata i rešenja za automatizaciju. Od voice AI platformi do autonomnih web agenata.',
+    currentRole: 'Trenutno @ Everlast Consulting GmbH',
     cta: 'KONTAKTIRAJTE ME',
     image: {
-        alt: 'Damjan Savić (Дамјан Савић) - Старији програмер пуног стека и консултант за дигитална решења'
+        alt: 'Damjan Savić (Дамјан Савић) - AI & Automation Specialist | AI Agenti, Voice AI & Automatizacija'
     },
     social: {
         getInTouch: 'Kontaktirajte me',

src/i18n/locales/sr/pages/home/skills.ts

@@ -3,34 +3,34 @@ export const skills = {
     title: 'Veštine',
     skills: [
         {
-            name: 'ERP',
+            name: 'AI & LLMs',
             level: 90,
-            description: 'Enterprise Resource Planning'
+            description: 'GPT-4, Claude API, Vapi Voice AI'
+        },
+        {
+            name: 'Automatizacija',
+            level: 85,
+            description: 'n8n, Zapier, Power Automate'
+        },
+        {
+            name: 'Python',
+            level: 90,
+            description: 'Backend, API-ji, Automatizacija'
+        },
+        {
+            name: 'TypeScript',
+            level: 85,
+            description: 'React, Next.js, Node.js'
         },
         {
             name: 'Baze podataka',
             level: 85,
-            description: 'Razvoj i administracija baza podataka'
+            description: 'PostgreSQL, Supabase, MariaDB'
         },
         {
-            name: 'E-Commerce',
+            name: 'DevOps',
-            level: 95,
-            description: 'Online trgovina i platforme'
-        },
-        {
-            name: 'Python',
-            level: 80,
-            description: 'Programski jezik Python'
-        },
-        {
-            name: 'React',
             level: 75,
-            description: 'Frontend razvoj sa React-om'
+            description: 'Docker, Vercel, Dedicated Servers'
-        },
-        {
-            name: 'Server',
-            level: 70,
-            description: 'Server administracija'
         }
     ],
     aria: {

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

@@ -24,6 +24,12 @@ export const portfolio = {
     },
     // Detalji projekta
     project: {
+        loading: 'Učitavanje projekta...',
+        backToPortfolio: 'Nazad na portfolio',
+        notFound: {
+            title: 'Projekat nije pronađen',
+            description: 'Traženi projekat nije pronađen.'
+        },
         navigation: {
             back: 'Nazad na portfolio',
             projectDetails: 'DETALJI PROJEKTA'

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

@@ -3,6 +3,8 @@ 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';
+import websiteMitKi from './projects/website-mit-ki';
+import recrobot from './projects/recrobot';
 export const portfolio = {
     // Meta informacije za portfolio stranicu
     seo: {
@@ -58,5 +60,7 @@ export const portfolio = {
         'kamenpro': kamenpro,
         'smart-warehouse': smartWarehouse,
         'power-platform-governance': powerPlatformGovernance,
+        'website-mit-ki': websiteMitKi,
+        'recrobot': recrobot,
     }
 };

src/i18n/locales/sr/portfolio/projects/automated-ad-creatives.ts

@@ -0,0 +1,95 @@
+// src/i18n/locales/sr/portfolio/projects/automated-ad-creatives.ts
+export const automatedAdCreatives = {
+    meta: {
+        slug: 'automated-ad-creatives',
+        title: 'Automatizovani Ad Kreativci: Kreiranje reklama uz pomoć VI',
+        description: 'Razvoj radnog toka za automatizovano kreiranje Facebook Ad kreativaca sa Claude Opus 4.5 - bez dizajn softvera, u potpunosti u chatu',
+        excerpt: 'Od dizajn šablona do gotove reklame: Kako VI revolucioniše kreiranje reklamnih kreativaca.',
+        date: '2024-12',
+        category: 'VI & Automatizacija',
+        client: 'Lični projekat',
+        duration: '1 Dan',
+        url: '',
+        repository: '',
+        documentation: '',
+        published: true,
+        featured: true,
+        technologies: ['Claude Opus 4.5', 'HTML/CSS', 'PNG Export', 'Prompt Engineering'],
+        tags: ['VI', 'Automatizacija', 'Facebook Ads', 'Marketing', 'No-Code'],
+        videoUrl: 'https://www.tella.tv/video/automatisierte-ad-creatives-1kyw'
+    },
+    content: {
+        intro: 'Programi kao što su Illustrator, InDesign, Figma ili Canva mogu biti komplikovani. Ovaj projekat pokazuje kako se Facebook Ad kreativci mogu kreirati u potpunosti u VI chatu - bez dizajn softvera, bez znanja programiranja.',
+
+        challenge: {
+            title: 'Izazov',
+            description: 'Kreiranje reklamnih materijala za Facebook kampanje tradicionalno zahteva:',
+            points: [
+                'Poznavanje dizajn softvera (Illustrator, Figma, Canva)',
+                'Vreme za učenje i implementaciju',
+                'Razumevanje zahteva formata i najboljih praksi',
+                'Iteracije između dizajna i marketinga',
+                'Budžet za dizajnere ili dizajn alate'
+            ]
+        },
+
+        solution: {
+            title: 'Rešenje',
+            description: 'VI-vođen radni tok koji obrađuje ceo proces u chat prozoru:',
+            content: 'Kompletan radni tok se odvija u chatu sa Claude Opus 4.5. Alternativno, Gemini ili ChatGPT takođe rade.',
+            points: [
+                'Dizajn šablon kao vizuelna referenca za VI',
+                'HTML generisanje kroz promptove na prirodnom jeziku',
+                'Automatska konverzija u PNG slike',
+                'Integracija dodatnih slika putem drag & drop',
+                'Iteracije kroz jednostavne chat instrukcije'
+            ]
+        },
+
+        technical: {
+            title: 'Tehnička implementacija',
+            description: 'Radni tok u detaljima:',
+            points: [
+                'Korak 1: Dizajn šablon sa Envato Elements kao referenca',
+                'Korak 2: Pošalji prompt sa slikom Claude-u - HTML se generiše',
+                'Korak 3: Eksportuj HTML u PNG',
+                'Korak 4: Integriši dodatne slike putem drag & drop'
+            ]
+        },
+
+        tools: {
+            title: 'Korišćeni alati',
+            items: [
+                { name: 'Claude Opus 4.5', purpose: 'VI za HTML generisanje i eksport slika' },
+                { name: 'Envato Elements', purpose: 'Dizajn šabloni kao referenca' },
+                { name: 'Unsplash', purpose: 'Besplatne slike za kreativce' }
+            ]
+        },
+
+        results: {
+            title: 'Prednosti ovog pristupa',
+            description: 'VI-vođen radni tok nudi nekoliko prednosti:',
+            points: [
+                'Nisu potrebne dizajnerske veštine: VI preuzima tehničku implementaciju',
+                'Brze iteracije: Promene u sekundama kroz chat instrukcije',
+                'Skalabilno: Neograničen broj varijanti za A/B testiranje',
+                'Isplativo: Nisu potrebni skupi dizajn alati',
+                'Fleksibilno: Radi i sa Gemini ili ChatGPT'
+            ]
+        },
+
+        useCases: {
+            title: 'Slučajevi upotrebe',
+            points: [
+                'Performance Marketing: Brzi testovi kreativaca bez čekanja',
+                'E-Commerce: Reklamiranje proizvoda na skali',
+                'Startapi: Profesionalni oglasi bez dizajn tima',
+                'Agencije: Efikasan rad sa klijentima za kreiranje reklama'
+            ]
+        },
+
+        conclusion: 'Radni tok demonstrira kako VI pojednostavljuje kreiranje reklamnih kreativaca. Rezultat možda još nije na nivou profesionalnog grafičkog dizajnera - ali za brze testove, početne nacrte ili timove bez dizajn resursa, ovaj pristup je prava alternativa. Tehnologija se brzo razvija.'
+    }
+};
+
+export default automatedAdCreatives;

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

@@ -0,0 +1,116 @@
+// src/i18n/locales/sr/portfolio/projects/recrobot.ts
+export const recrobot = {
+    meta: {
+        slug: 'recrobot',
+        title: "Recrobot - AI alat za regrutovanje sa automatizovanim screening intervjuima",
+        description: "Razvoj modernog Voice AI alata za regrutovanje za automatizovane razgovore za posao sa transkripcijom u realnom vremenu i GDPR usklađenošću.",
+        excerpt: "AI alat za regrutovanje sa Voice AI tehnologijom za automatizovane screening intervjue. Dostupan 24/7, GDPR usklađen, trenutna evaluacija.",
+        date: "2024-12",
+        category: "AI & Automation",
+        client: "Everlast Consulting",
+        duration: "1 mesec",
+        url: "https://recrobot.de",
+        videoUrl: "https://www.tella.tv/video/recrobot-automatisierte-bewerbungsgesprache-8kub",
+        repository: "",
+        documentation: "",
+        published: true,
+        featured: true,
+        technologies: ["Next.js", "React", "TypeScript", "Tailwind CSS", "shadcn/ui", "Lucide", "Zustand", "VAPI", "Claude AI", "Deepgram"],
+        tags: ["Voice AI", "Regrutovanje", "HR Tech", "Automatizacija", "Transkripcija"]
+    },
+    content: {
+        intro: "Recrobot je moderan, AI alat za regrutovanje koji automatizuje početne screening intervjue sa kandidatima. Aplikacija koristi Voice AI tehnologiju za vođenje prirodnih govornih intervjua i kreiranje transkripata za HR tim.",
+
+        challenge: {
+            title: "Izazov",
+            description: "Kompanije se suočavaju sa značajnim izazovima prilikom vođenja početnih intervjua sa kandidatima.",
+            points: [
+                "Vremenski zahtevna koordinacija termina za screening intervjue",
+                "HR odeljenja preopterećena rutinskim razgovorima",
+                "Dugo čekanje kandidata do prvog odgovora",
+                "Nekonzistentan kvalitet intervjua zbog različitih intervjuera",
+                "Visok administrativni napor za dokumentaciju"
+            ]
+        },
+
+        solution: {
+            title: "Rešenje",
+            description: "AI sistem za glasovne intervjue sa inteligentnim vođenjem razgovora",
+            content: "Recrobot omogućava kandidatima da obave screening intervju bilo kada i bilo gde - bez koordinacije termina. Sistem vodi prirodne razgovore, postavlja relevantna pitanja i automatski kreira strukturirane transkripte za HR tim.",
+            points: [
+                "Dostupnost 24/7 za kandidate širom sveta",
+                "Inteligentno vođenje razgovora sa prirodnim prepoznavanjem govora",
+                "Trenutna evaluacija za nekoliko minuta umesto nedelja",
+                "Najviši standardi zaštite podataka i GDPR usklađenost",
+                "Transkripcija uživo sa segmentacijom govornika"
+            ]
+        },
+
+        technical: {
+            title: "Tehnička implementacija",
+            description: "Rešenje je zasnovano na modernom tech stacku sa Voice AI integracijom:",
+            points: [
+                "Next.js i React za frontend",
+                "TypeScript za type-safe razvoj",
+                "Tailwind CSS i shadcn/ui za moderan UI dizajn",
+                "Zustand za state management",
+                "VAPI za Voice AI integraciju",
+                "Claude Sonnet 4.5 kao AI model za vođenje razgovora",
+                "Deepgram za transkripciju u realnom vremenu"
+            ],
+            code: `// Voice AI konfiguracija
+const assistant = {
+    name: "Recrobot",
+    model: "claude-sonnet-4.5",
+    firstMessage: "Zdravo, ja sam Recrobot iz Everlast Consulting-a...",
+    maxTokens: 300,
+    temperature: 0.5,
+    voice: {
+        provider: "sonic-3",
+        voice: "catia",
+        language: "German Conversational Woman"
+    },
+    transcription: {
+        provider: "deepgram"
+    },
+    speakingPlan: {
+        waitSeconds: 1.2,
+        onPunctuationSeconds: 0.1,
+        onNoPunctuationSeconds: 1.5,
+        onNumberSeconds: 0.5
+    }
+};`
+        },
+
+        implementation: {
+            title: "Tok korisnika",
+            description: "Proces prijave je optimizovan za maksimalnu jednostavnost korišćenja:",
+            points: [
+                "Kandidat dolazi na landing stranicu",
+                "Popunjava formular sa ličnim podacima",
+                "Validacija unosa na klijentskoj strani",
+                "Kreiranje podataka kandidata i ažuriranje store-a",
+                "Početak glasovnog intervjua sa dozvolom za mikrofon",
+                "Razgovor u realnom vremenu sa live transkripcijom",
+                "Preuzimanje strukturiranog transkripta"
+            ]
+        },
+
+        results: {
+            title: "Rezultati i prednosti",
+            description: "Recrobot nudi značajna poboljšanja u procesu regrutovanja:",
+            points: [
+                "Dramatična ušteda vremena za HR odeljenja",
+                "Trenutna dostupnost bez koordinacije termina",
+                "Konzistentan kvalitet intervjua kroz standardizovana pitanja",
+                "Strukturirani transkripti sa segmentacijom govornika",
+                "GDPR usklađena obrada podataka",
+                "Skalabilno rešenje za neograničen broj kandidata"
+            ]
+        },
+
+        conclusion: "Recrobot revolucionira proces regrutovanja kombinovanjem Voice AI sa inteligentnim vođenjem razgovora. Rešenje omogućava kompanijama da rasterete svoje HR odeljenja i ponude kandidatima moderan, fleksibilan proces prijave. Sa transkripcijom u realnom vremenu i GDPR usklađenošću, Recrobot postavlja nove standarde u HR tech industriji."
+    }
+};
+
+export default recrobot;

src/i18n/locales/sr/portfolio/projects/website-mit-ki.ts

@@ -0,0 +1,80 @@
+// src/i18n/locales/sr/portfolio/projects/website-mit-ki.ts
+export const websiteMitKi = {
+    meta: {
+        slug: 'website-mit-ki',
+        title: 'Napravi svoj sajt uz pomoć VI: Od nule do gotove stranice',
+        description: 'Korak-po-korak vodič za izgradnju profesionalnog sajta sa Claude Code - usklađen sa GDPR-om, višejezičan, sa portfoliom i blogom',
+        excerpt: 'Kako da napraviš kompletan sajt za manje od sat vremena - bez pisanja ijedne linije koda.',
+        date: '2024-12',
+        category: 'VI & Automatizacija',
+        client: 'Lični projekat',
+        duration: '30 Minuta',
+        url: '',
+        repository: '',
+        documentation: '',
+        published: true,
+        featured: true,
+        technologies: ['Claude Code', 'React', 'TypeScript', 'Vercel', 'GitHub', 'Vite'],
+        tags: ['VI', 'Website', 'No-Code', 'Tutorial', 'Claude Code', 'Vercel'],
+        videoUrl: 'https://www.tella.tv/video/baue-deine-website-noch-heute-mit-ki-8f7v'
+    },
+    content: {
+        intro: 'Profesionalni sajt bez znanja programiranja? Sa VI, to je danas moguće. Ovaj tutorijal pokazuje kompletan proces - od praznog projektnog foldera do gotovog, hostovanog sajta.',
+
+        challenge: {
+            title: 'Izazov',
+            description: 'Tradicionalni put do sopstvenog sajta je često komplikovan i skup:',
+            points: [
+                'Web bilderi kao Wix, WordPress ili Webflow imaju mesečne troškove',
+                'Sopstveni razvoj zahteva znanje programiranja',
+                'Dizajneri i programeri su skupi',
+                'GDPR usklađenost i SEO optimizacija su kompleksni',
+                'Višejezična podrška i responsivan dizajn zahtevaju dodatni napor'
+            ]
+        },
+
+        solution: {
+            title: 'Rešenje',
+            description: 'Sa VI, kompletan sajt se može napraviti za manje od sat vremena:',
+            content: 'Kompletan radni tok koristi Claude Code za autonomni razvoj, GitHub za verzioniranje i Vercel za besplatan hosting.',
+            points: [
+                'GDPR-usklađena implementacija sa banerom za kolačiće',
+                'Višejezična podrška (nemački, engleski, moguće i više)',
+                'Portfolio stranica sa interaktivnim projektima',
+                'Blog funkcionalnost za blog postove',
+                'SEO optimizacija za bolje Google rangiranje',
+                'Kontakt forma za potencijalne klijente'
+            ]
+        },
+
+        technical: {
+            title: 'Radni tok',
+            description: 'Ovako proces funkcioniše korak po korak:',
+            points: [
+                'Korak 1: Kreiraj GitHub nalog i repozitorijum',
+                'Korak 2: Podesi Vercel nalog za besplatan hosting',
+                'Korak 3: Pripremi lokalni projektni folder sa relevantnim dokumentima',
+                'Korak 4: Otvori Claude Code i unesi prompt sa željenim funkcijama',
+                'Korak 5: VI autonomno radi i kreira kompletan sajt',
+                'Korak 6: Pushuj projekat na GitHub i importuj u Vercel'
+            ]
+        },
+
+        results: {
+            title: 'Prednosti ovog rešenja',
+            description: 'VI-vođen razvoj sajta nudi nekoliko prednosti:',
+            points: [
+                'Nisu potrebne veštine programiranja',
+                'Minimalni troškovi: Samo VI pretplata i opciono domen',
+                'Bolja vidljivost kroz SEO optimizaciju',
+                'Potpuna kontrola: Kod je na GitHub-u, hosting je besplatan',
+                'Brze izmene moguće kroz chat instrukcije',
+                'Mobilno-optimiziran, responsivan dizajn uključen'
+            ]
+        },
+
+        conclusion: 'Kompletan, profesionalni sajt može se napraviti danas za manje od sat vremena - bez pisanja ijedne linije koda. Kombinacija VI razvoja, besplatnog hostinga i verzioniranja čini ovo rešenje interesantnim ne samo za programere, već za sve kojima je potrebna profesionalna web prezentacija.'
+    }
+};
+
+export default websiteMitKi;

src/i18n/locales/sr/seo-content.ts

@@ -1,13 +1,22 @@
 // src/i18n/locales/sr/seo-content.ts
 export const seoContent = {
+    hero: {
+        title: 'Damjan Savić | Fullstack, IoT и AI програмер',
+        subtitle: 'Скалабилна софтверска решења са IoT и AI интеграцијом',
+        description: 'Као fullstack програмер из Келна, Дамјан Савић се специјализује за развој скалабилних софтверских решења са IoT и AI интеграцијом.',
+        cta: {
+            primary: 'Погледајте пројекте',
+            secondary: 'Контактирајте ме'
+        }
+    },
     home: {
-        h1: 'Дамјан Савић - Старији програмер пуног стека и консултант за дигитална решења',
+        h1: 'Damjan Savić | Fullstack, IoT и AI програмер',
         h2: [
-            'Експерт за софтвер за предузећа и облак архитектуру',
+            'Скалабилна софтверска решења са IoT интеграцијом',
-            'Интеграција вештачке интелигенције за модерне компаније',
+            'AI интеграција за модерне компаније',
-            'JTL интеграција и дигитална трансформација у Немачкој'
+            'Fullstack развој и дигитална трансформација'
         ],
-        description: 'Damjan Savić (Дамјан Савић) је искусни старији програмер пуног стека и консултант за дигитална решења из Келна, Немачка. Специјализован за софтвер за предузећа, облак архитектуру и интеграцију вештачке интелигенције за европске компаније.',
+        description: 'Као fullstack програмер из Келна, Дамјан Савић се специјализује за развој скалабилних софтверских решења са IoT и AI интеграцијом.',
         structuredData: {
             personName: 'Damjan Savić',
             personNameCyrillic: 'Дамјан Савић',

src/pages/blog/components/BlogPost.tsx

@@ -314,60 +314,181 @@ const BlogPost: React.FC = () => {
                              prose-blockquote:border-l-zinc-700 prose-blockquote:text-zinc-400"
                         >
                             {/* Intro Section */}
-                            <section>
+                            {post.content.intro && (
-                                <h2>{post.content.intro.title}</h2>
+                                <section>
-                                <p>{post.content.intro.description}</p>
+                                    <h2>{post.content.intro.title}</h2>
-                            </section>
+                                    <p>{post.content.intro.description}</p>
+                                </section>
+                            )}
 
-                            {/* Background Section */}
+                            {/* Video Embed (for posts with videoUrl) */}
-                            <section>
+                            {(post as unknown as { videoUrl?: string }).videoUrl && (
-                                <h2>{post.content.background.title}</h2>
+                                <section className="my-8">
-                                <div className="mb-6">
+                                    <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden', borderRadius: '12px' }}>
-                                    <h3>Systems</h3>
+                                        <iframe
-                                    <ul>
+                                            src={`${(post as unknown as { videoUrl: string }).videoUrl}/embed?b=0&title=1&a=1&loop=0&autoPlay=false&t=0&muted=0&wt=0`}
-                                        {Object.values(post.content.background.systems).map((system, index) => (
+                                            style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }}
-                                            <li key={index}>{system}</li>
+                                            allowFullScreen
-                                        ))}
+                                            loading="lazy"
-                                    </ul>
+                                        />
-                                </div>
+                                    </div>
-                                <div>
+                                </section>
-                                    <h3>Challenges</h3>
+                            )}
-                                    <ul>
-                                        {Object.values(post.content.background.challenges).map((challenge, index) => (
-                                            <li key={index}>{challenge}</li>
-                                        ))}
-                                    </ul>
-                                </div>
-                            </section>
 
-                            {/* Technical Architecture */}
+                            {/* Background Section (optional) */}
-                            <section>
+                            {post.content.background && (
-                                <h2>{post.content.tech.title}</h2>
+                                <section>
-                                <h3>{post.content.tech.components.title}</h3>
+                                    <h2>{post.content.background.title}</h2>
-                                <pre>
+                                    {post.content.background.systems && (
-                                    <code>{post.content.tech.components.code}</code>
+                                        <div className="mb-6">
-                                </pre>
+                                            <h3>Systems</h3>
-                            </section>
+                                            <ul>
+                                                {Object.values(post.content.background.systems).map((system, index) => (
+                                                    <li key={index}>{system}</li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    )}
+                                    {post.content.background.challenges && (
+                                        <div>
+                                            <h3>Challenges</h3>
+                                            <ul>
+                                                {Object.values(post.content.background.challenges).map((challenge, index) => (
+                                                    <li key={index}>{challenge}</li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    )}
+                                </section>
+                            )}
 
-                            {/* API Section */}
+                            {/* Technical Architecture (optional) */}
-                            <section>
+                            {post.content.tech && (
-                                <h2>{post.content.api.title}</h2>
+                                <section>
-                                <div className="mb-6">
+                                    <h2>{post.content.tech.title}</h2>
-                                    <h3>{post.content.api.apparel_magic.title}</h3>
+                                    {post.content.tech.components && (
-                                    <p>{post.content.api.apparel_magic.description}</p>
+                                        <>
-                                </div>
+                                            <h3>{post.content.tech.components.title}</h3>
-                            </section>
+                                            {post.content.tech.components.code && (
+                                                <pre>
+                                                    <code>{post.content.tech.components.code}</code>
+                                                </pre>
+                                            )}
+                                        </>
+                                    )}
+                                </section>
+                            )}
+
+                            {/* API Section (optional) */}
+                            {post.content.api && (
+                                <section>
+                                    <h2>{post.content.api.title}</h2>
+                                    {post.content.api.apparel_magic && (
+                                        <div className="mb-6">
+                                            <h3>{post.content.api.apparel_magic.title}</h3>
+                                            <p>{post.content.api.apparel_magic.description}</p>
+                                        </div>
+                                    )}
+                                </section>
+                            )}
+
+                            {/* Workflow Section (for ad-creatives style posts) */}
+                            {(post.content as unknown as { workflow?: { title: string; steps: Record<string, { title: string; description: string; points?: string[]; advantages?: string[]; steps?: string[] }> } }).workflow && (
+                                <section>
+                                    <h2>{(post.content as unknown as { workflow: { title: string } }).workflow.title}</h2>
+                                    {Object.values((post.content as unknown as { workflow: { steps: Record<string, { title: string; description: string; points?: string[]; advantages?: string[]; steps?: string[] }> } }).workflow.steps).map((step, index) => (
+                                        <div key={index} className="mb-6">
+                                            <h3>{step.title}</h3>
+                                            <p>{step.description}</p>
+                                            {step.points && (
+                                                <ul>
+                                                    {step.points.map((point, i) => (
+                                                        <li key={i}>{point}</li>
+                                                    ))}
+                                                </ul>
+                                            )}
+                                            {step.advantages && (
+                                                <ul>
+                                                    {step.advantages.map((adv, i) => (
+                                                        <li key={i}>{adv}</li>
+                                                    ))}
+                                                </ul>
+                                            )}
+                                            {step.steps && (
+                                                <ul>
+                                                    {step.steps.map((s, i) => (
+                                                        <li key={i}>{s}</li>
+                                                    ))}
+                                                </ul>
+                                            )}
+                                        </div>
+                                    ))}
+                                </section>
+                            )}
+
+                            {/* Advantages Section (for ad-creatives style posts) */}
+                            {(post.content as unknown as { advantages?: { title: string; efficiency?: { title: string; points: string[] }; scalability?: { title: string; points: string[] }; consistency?: { title: string; points: string[] } } }).advantages && (
+                                <section>
+                                    <h2>{(post.content as unknown as { advantages: { title: string } }).advantages.title}</h2>
+                                    {(post.content as unknown as { advantages: { efficiency?: { title: string; points: string[] } } }).advantages.efficiency && (
+                                        <div className="mb-4">
+                                            <h3>{(post.content as unknown as { advantages: { efficiency: { title: string } } }).advantages.efficiency.title}</h3>
+                                            <ul>
+                                                {(post.content as unknown as { advantages: { efficiency: { points: string[] } } }).advantages.efficiency.points.map((point, i) => (
+                                                    <li key={i}>{point}</li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    )}
+                                    {(post.content as unknown as { advantages: { scalability?: { title: string; points: string[] } } }).advantages.scalability && (
+                                        <div className="mb-4">
+                                            <h3>{(post.content as unknown as { advantages: { scalability: { title: string } } }).advantages.scalability.title}</h3>
+                                            <ul>
+                                                {(post.content as unknown as { advantages: { scalability: { points: string[] } } }).advantages.scalability.points.map((point, i) => (
+                                                    <li key={i}>{point}</li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    )}
+                                    {(post.content as unknown as { advantages: { consistency?: { title: string; points: string[] } } }).advantages.consistency && (
+                                        <div className="mb-4">
+                                            <h3>{(post.content as unknown as { advantages: { consistency: { title: string } } }).advantages.consistency.title}</h3>
+                                            <ul>
+                                                {(post.content as unknown as { advantages: { consistency: { points: string[] } } }).advantages.consistency.points.map((point, i) => (
+                                                    <li key={i}>{point}</li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    )}
+                                </section>
+                            )}
 
                             {/* Conclusion */}
-                            <section>
+                            {post.content.conclusion && (
-                                <h2>{post.content.conclusion.title}</h2>
+                                <section>
-                                <ul>
+                                    <h2>{post.content.conclusion.title}</h2>
-                                    {Object.values(post.content.conclusion.requirements).map((req, index) => (
+                                    {post.content.conclusion.requirements && (
-                                        <li key={index}>{req}</li>
+                                        <ul>
-                                    ))}
+                                            {Object.values(post.content.conclusion.requirements).map((req, index) => (
-                                </ul>
+                                                <li key={index}>{req}</li>
-                                <p>{post.content.conclusion.results}</p>
+                                            ))}
-                            </section>
+                                        </ul>
+                                    )}
+                                    {post.content.conclusion.results && (
+                                        <p>{post.content.conclusion.results}</p>
+                                    )}
+                                    {(post.content.conclusion as unknown as { description?: string }).description && (
+                                        <p>{(post.content.conclusion as unknown as { description: string }).description}</p>
+                                    )}
+                                    {(post.content.conclusion as unknown as { keyPoints?: string[] }).keyPoints && (
+                                        <ul>
+                                            {(post.content.conclusion as unknown as { keyPoints: string[] }).keyPoints.map((point, i) => (
+                                                <li key={i}>{point}</li>
+                                            ))}
+                                        </ul>
+                                    )}
+                                </section>
+                            )}
                         </motion.div>
 
                         {/* Tags */}

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-sm sm:text-base tracking-wider mb-2"
+                    className="text-zinc-400 text-sm sm:text-base tracking-wider mb-2"
                 >
                     {t('pages.home.hero.title')}
                 </motion.p>
@@ -93,10 +93,26 @@ const Hero = () => {
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.5, delay: 0.3 }}
-                    className="text-4xl sm:text-5xl font-bold mb-8 flex items-center"
+                    className="text-4xl sm:text-5xl font-bold mb-3 flex items-center"
                 >
                     {t('pages.home.hero.name')}<span className="animate-pulse ml-1">|</span>
                 </motion.h1>
+                <motion.p
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: 0.35 }}
+                    className="text-zinc-300 text-sm sm:text-base max-w-xl text-center mb-2 px-4"
+                >
+                    {t('pages.home.hero.description')}
+                </motion.p>
+                <motion.p
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: 0.38 }}
+                    className="text-zinc-500 text-xs sm:text-sm mb-8"
+                >
+                    {t('pages.home.hero.currentRole')}
+                </motion.p>
 
                 {/* Navigation */}
                 <motion.div

src/pages/home/components/Skills.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Database, Server, Store, Code2, CodepenIcon, Box } from 'lucide-react';
+import { Database, Server, Code2, Bot, Workflow, FileCode2 } from 'lucide-react';
 
 interface Skill {
     name: string;
@@ -10,14 +10,15 @@ interface Skill {
 }
 
 const iconMap: { [key: string]: React.ReactNode } = {
-    'ERP': <Box className="w-8 h-8" />,
+    'AI & LLMs': <Bot className="w-8 h-8" />,
+    'Automation': <Workflow className="w-8 h-8" />,
+    'Automatizacija': <Workflow className="w-8 h-8" />,
+    'Python': <Code2 className="w-8 h-8" />,
+    'TypeScript': <FileCode2 className="w-8 h-8" />,
     'Datenbank': <Database className="w-8 h-8" />,
     'Database': <Database className="w-8 h-8" />,
     'Baze podataka': <Database className="w-8 h-8" />,
-    'E-Commerce': <Store className="w-8 h-8" />,
+    'DevOps': <Server className="w-8 h-8" />
-    'Python': <Code2 className="w-8 h-8" />,
-    'React': <CodepenIcon className="w-8 h-8" />,
-    'Server': <Server className="w-8 h-8" />
 };
 
 const Skills = () => {

src/pages/home/index.tsx

@@ -14,15 +14,15 @@ const HomePage = () => {
         '@context': 'https://schema.org',
         '@type': 'ProfilePage',
         '@id': 'https://damjan-savic.com/#profilepage',
-        name: 'Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant',
+        name: 'Damjan Savić - AI & Automation Specialist',
         description:
-            'Damjan Savić ist Senior Fullstack Entwickler und Digital Solutions Consultant in Köln. Spezialisiert auf Enterprise Software Development, KI-Integration, Cloud Architecture und digitale Transformation.',
+            'Damjan Savić ist AI & Automation Specialist. Spezialisiert auf KI-Agenten, Voice AI, Prozessautomatisierung mit n8n, und Fullstack Development.',
         mainEntity: {
             '@type': 'Person',
             name: 'Damjan Savić',
-            jobTitle: ['Senior Fullstack Developer', 'Digital Solutions Consultant', 'Software Architect'],
+            jobTitle: ['AI & Automation Specialist', 'Process Automation Specialist', 'Fullstack Developer'],
             description:
-                'Damjan Savić ist Senior Fullstack Entwickler und Digital Solutions Consultant mit über 10 Jahren Erfahrung in Enterprise Software Development, Cloud-native Lösungen und KI-Integration.',
+                'Damjan Savić entwickelt KI-Agenten und Automatisierungslösungen. Von Voice-AI-Plattformen bis zu autonomen Web-Agenten.',
             knowsLanguage: [
                 'English',
                 'German',
@@ -33,34 +33,29 @@ const HomePage = () => {
             ],
             hasOccupation: {
                 '@type': 'Occupation',
-                name: 'Senior Fullstack Developer & Digital Solutions Consultant',
+                name: 'AI & Automation Specialist',
                 skills: [
-                    'Enterprise Software Development',
+                    'AI Agents Development',
-                    'Cloud Architecture (AWS, Azure)',
+                    'Voice AI (Vapi)',
+                    'Process Automation (n8n, Zapier)',
                     'Python Development',
-                    'React & TypeScript',
+                    'TypeScript & React',
-                    'KI/ML Integration (OLLAMA, LLMs)',
+                    'Next.js',
-                    'Microservices Architecture',
+                    'GPT-4 & Claude API Integration',
-                    'SAP & ERP Integration',
+                    'Web Scraping',
-                    'E-commerce Solutions',
+                    'Supabase & PostgreSQL',
-                    'DevOps & CI/CD',
+                    'WebSocket & Real-time Applications'
-                    'Digital Transformation Consulting'
                 ]
             },
-            alumniOf: {
-                '@type': 'CollegeOrUniversity',
-                name: 'Technische Universität'
-            },
             worksFor: {
                 '@type': 'Organization',
-                name: 'CoderConda',
+                name: 'Everlast Consulting GmbH',
-                description: 'IT-Beratung und Software Development von Damjan Savić',
+                description: 'Process Automation & AI Solutions',
-                founder: 'Damjan Savić',
+                location: 'Remote'
-                location: 'Köln, Deutschland'
             },
             address: {
                 '@type': 'PostalAddress',
-                addressLocality: 'Köln',
+                addressLocality: 'Bergisch Gladbach',
                 addressRegion: 'Nordrhein-Westfalen',
                 addressCountry: 'Deutschland'
             }
@@ -68,14 +63,13 @@ const HomePage = () => {
     };
 
     const metaDescription =
-        'Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant in Köln. Spezialisiert auf Enterprise Software Development, ' +
+        'Damjan Savić - AI & Automation Specialist. Entwicklung von KI-Agenten und Automatisierungslösungen mit n8n, Vapi Voice AI, ' +
-        'Cloud Architecture, KI-Integration mit OLLAMA, Microservices und digitale Transformation. Damjan Savić entwickelt maßgeschneiderte ' +
+        'GPT-4 und Claude API. Von Voice-AI-Plattformen bis zu autonomen Web-Agenten. TypeScript, Python, Next.js.';
-        'Lösungen mit Python, React, TypeScript für E-Commerce, ERP-Integration und Business Process Automation. Kontaktieren Sie Damjan Savić.';
 
     return (
         <>
             <SEO
-                title="Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant Köln | Enterprise Software & KI-Experte"
+                title="Damjan Savić - AI & Automation Specialist | KI-Agenten, Voice AI & Prozessautomatisierung"
                 description={metaDescription}
                 schema={schema}
             />

src/pages/portfolio/ProjectPage.tsx

@@ -21,6 +21,18 @@ import dePowerPlatform from '../../i18n/locales/de/portfolio/projects/power-plat
 import enPowerPlatform from '../../i18n/locales/en/portfolio/projects/power-platform-governance';
 import srPowerPlatform from '../../i18n/locales/sr/portfolio/projects/power-platform-governance';
 
+import deAutomatedAdCreatives from '../../i18n/locales/de/portfolio/projects/automated-ad-creatives';
+import enAutomatedAdCreatives from '../../i18n/locales/en/portfolio/projects/automated-ad-creatives';
+import srAutomatedAdCreatives from '../../i18n/locales/sr/portfolio/projects/automated-ad-creatives';
+
+import deWebsiteMitKi from '../../i18n/locales/de/portfolio/projects/website-mit-ki';
+import enWebsiteMitKi from '../../i18n/locales/en/portfolio/projects/website-mit-ki';
+import srWebsiteMitKi from '../../i18n/locales/sr/portfolio/projects/website-mit-ki';
+
+import deRecrobot from '../../i18n/locales/de/portfolio/projects/recrobot';
+import enRecrobot from '../../i18n/locales/en/portfolio/projects/recrobot';
+import srRecrobot from '../../i18n/locales/sr/portfolio/projects/recrobot';
+
 // Interfaces für den Projektinhalt
 interface ProjectMeta {
     date?: string;
@@ -29,6 +41,7 @@ interface ProjectMeta {
     title: string;
     description: string;
     technologies?: string[];
+    videoUrl?: string;
 }
 
 interface ProjectContent {
@@ -97,6 +110,21 @@ const projectTranslations: ProjectTranslations = {
         en: enPowerPlatform,
         sr: srPowerPlatform,
     },
+    'automated-ad-creatives': {
+        de: deAutomatedAdCreatives,
+        en: enAutomatedAdCreatives,
+        sr: srAutomatedAdCreatives,
+    },
+    'website-mit-ki': {
+        de: deWebsiteMitKi,
+        en: enWebsiteMitKi,
+        sr: srWebsiteMitKi,
+    },
+    'recrobot': {
+        de: deRecrobot,
+        en: enRecrobot,
+        sr: srRecrobot,
+    },
 };
 
 const TranslatedProjectPage = () => {
@@ -226,25 +254,36 @@ const TranslatedProjectPage = () => {
                     </p>
                 </div>
 
-                {/* Cover Image */}
+                {/* Cover Video or Image */}
                 <motion.div
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ duration: 0.5 }}
                     className="mb-12"
                 >
-                    <div className="relative aspect-video rounded-lg overflow-hidden bg-zinc-800">
+                    {project.meta.videoUrl ? (
-                        <img
+                        <div className="relative aspect-video rounded-lg overflow-hidden bg-zinc-800">
-                            src={`/images/projects/${slug}/cover.jpg`}
+                            <iframe
-                            alt={project.meta.title}
+                                src={`${project.meta.videoUrl}/embed?b=0&title=1&a=1&loop=0&autoPlay=false&t=0&muted=0&wt=0`}
-                            className="w-full h-full object-cover"
+                                className="absolute top-0 left-0 w-full h-full border-none"
-                            loading="lazy"
+                                allowFullScreen
-                            onError={(e) => {
+                                loading="lazy"
-                                console.error('Image failed to load:', e.currentTarget.src);
+                            />
-                            }}
+                        </div>
-                        />
+                    ) : (
-                        <div className="absolute inset-0 bg-gradient-to-t from-zinc-900/50 to-transparent opacity-50" />
+                        <div className="relative aspect-video rounded-lg overflow-hidden bg-zinc-800">
-                    </div>
+                            <img
+                                src={`/images/projects/${slug}/cover.jpg`}
+                                alt={project.meta.title}
+                                className="w-full h-full object-cover"
+                                loading="lazy"
+                                onError={(e) => {
+                                    console.error('Image failed to load:', e.currentTarget.src);
+                                }}
+                            />
+                            <div className="absolute inset-0 bg-gradient-to-t from-zinc-900/50 to-transparent opacity-50" />
+                        </div>
+                    )}
                 </motion.div>
 
                 {/* Project Content */}

src/pages/portfolio/components/PortfolioCard.tsx

@@ -68,9 +68,6 @@ const PortfolioCard: React.FC<PortfolioCardProps> = ({ project }) => {
                         loading="lazy"
                         style={{ transformOrigin: 'center center' }}
                     />
-                    {/* Gradient overlay that extends beyond the image */}
-                    <div className="absolute inset-x-0 -bottom-20 top-0 bg-gradient-to-t from-zinc-900 via-zinc-900/70 to-transparent
-                                  opacity-95" />
                 </div>
 
                 {/* Content - with relative positioning to overlap the gradient */}

src/pages/portfolio/projects/automated-ad-creatives.mdx

@@ -0,0 +1,146 @@
+---
+slug: "automated-ad-creatives"
+title: "Automatisierte Ad Creatives: KI-gestützte Werbemittel-Erstellung"
+description: "Entwicklung eines Workflows zur automatisierten Erstellung von Facebook Ad Creatives mit Claude Opus 4.5 - ohne Designsoftware, komplett im Chat"
+excerpt: "Von der Designvorlage zum fertigen Werbemittel: Wie KI die Ad-Creative-Erstellung revolutioniert."
+date: "2024-12-12"
+category: "KI & Automatisierung"
+coverImage: "/images/projects/automated-ad-creatives/cover.jpg"
+client: "Eigenprojekt"
+duration: "1 Tag"
+url: ""
+repository: ""
+documentation: ""
+published: true
+featured: true
+technologies: ["Claude Opus 4.5", "HTML/CSS", "PNG Export", "Prompt Engineering"]
+tags: ["KI", "Automatisierung", "Facebook Ads", "Marketing", "No-Code"]
+videoUrl: "https://www.tella.tv/video/automatisierte-ad-creatives-1kyw"
+---
+
+<div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden', marginBottom: '2rem', borderRadius: '12px' }}>
+  <iframe
+    src="https://www.tella.tv/video/automatisierte-ad-creatives-1kyw/embed?b=0&title=1&a=1&loop=0&autoPlay=false&t=0&muted=0&wt=0"
+    style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }}
+    allowFullScreen
+    loading="lazy"
+  />
+</div>
+
+<div style={{ margin: "20px 0", padding: "20px", backgroundColor: "#3d3d3d", borderRadius: "8px" }}>
+  <p style={{ fontSize: "1.1rem", lineHeight: "1.6" }}>
+    Programme wie Illustrator, InDesign, Figma oder Canva können kompliziert sein. Dieses Projekt zeigt, wie sich Facebook Ad Creatives vollständig im KI-Chat erstellen lassen - ohne Designsoftware, ohne Programmierkenntnisse.
+  </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 Erstellung von Werbemitteln für Facebook-Kampagnen erfordert traditionell:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Kenntnisse in Designsoftware (Illustrator, Figma, Canva)</li>
+    <li>Zeit für Einarbeitung und Umsetzung</li>
+    <li>Verständnis für Formatvorgaben und Best Practices</li>
+    <li>Iterationen zwischen Design und Marketing</li>
+    <li>Budget für Designer oder Design-Tools</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Der Lösungsansatz</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Ein KI-gestützter Workflow, der den gesamten Prozess im Chat-Fenster abbildet:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Designvorlage als visuelle Referenz für die KI</li>
+    <li>HTML-Generierung durch natürlichsprachliche Prompts</li>
+    <li>Automatische Konvertierung zu PNG-Bilddateien</li>
+    <li>Integration zusätzlicher Bilder per Drag & Drop</li>
+    <li>Iterationen durch einfache Chat-Anweisungen</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Technische Umsetzung</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Der Workflow im Detail</h3>
+
+  <h4 style={{ marginTop: "15px", marginBottom: "10px" }}>Schritt 1: Designgrundlage</h4>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Auf Envato Elements nach "Facebook Ads Kampagne" suchen und ein passendes Template als Designreferenz herunterladen. Dieses Bild definiert Stil, Farbgebung und Layout.
+  </p>
+
+  <h4 style={{ marginTop: "15px", marginBottom: "10px" }}>Schritt 2: Erster Prompt</h4>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Das Referenzbild zusammen mit einem beschreibenden Prompt an Claude Opus 4.5 senden. Die KI analysiert das Bild und generiert eine HTML-Datei, die das Design nachbildet.
+  </p>
+
+  <h4 style={{ marginTop: "15px", marginBottom: "10px" }}>Schritt 3: HTML zu PNG</h4>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Im zweiten Prompt die KI bitten, die HTML-Datei als PNG zu exportieren. Das Ergebnis ist eine fertige Bilddatei für Facebook Ads.
+  </p>
+
+  <h4 style={{ marginTop: "15px", marginBottom: "10px" }}>Schritt 4: Bilder hinzufügen</h4>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Zusätzliche Bilder (z.B. von Unsplash) per Drag & Drop in den Chat ziehen. Die KI integriert sie in das bestehende Creative.
+  </p>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Verwendete Tools</h2>
+<div style={{ marginBottom: "30px" }}>
+  <table style={{ width: "100%", borderCollapse: "collapse" }}>
+    <thead>
+      <tr style={{ borderBottom: "2px solid #ddd" }}>
+        <th style={{ textAlign: "left", padding: "10px" }}>Tool</th>
+        <th style={{ textAlign: "left", padding: "10px" }}>Zweck</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: "1px solid #ddd" }}>
+        <td style={{ padding: "10px" }}><strong>Claude Opus 4.5</strong></td>
+        <td style={{ padding: "10px" }}>KI für HTML-Generierung und Bildexport</td>
+      </tr>
+      <tr style={{ borderBottom: "1px solid #ddd" }}>
+        <td style={{ padding: "10px" }}><strong>Envato Elements</strong></td>
+        <td style={{ padding: "10px" }}>Designvorlagen als Referenz</td>
+      </tr>
+      <tr style={{ borderBottom: "1px solid #ddd" }}>
+        <td style={{ padding: "10px" }}><strong>Unsplash</strong></td>
+        <td style={{ padding: "10px" }}>Kostenlose Bilder für die Creatives</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Vorteile des Ansatzes</h2>
+<div style={{ marginBottom: "30px" }}>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li><strong>Keine Design-Skills nötig:</strong> Die KI übernimmt die technische Umsetzung</li>
+    <li><strong>Schnelle Iterationen:</strong> Änderungen in Sekunden durch Chat-Anweisungen</li>
+    <li><strong>Skalierbar:</strong> Beliebig viele Varianten für A/B-Tests</li>
+    <li><strong>Kosteneffizient:</strong> Keine teuren Design-Tools erforderlich</li>
+    <li><strong>Flexibel:</strong> Funktioniert auch mit Gemini oder ChatGPT</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Einsatzszenarien</h2>
+<div style={{ marginBottom: "30px" }}>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li><strong>Performance-Marketing:</strong> Schnelle Creative-Tests ohne Wartezeit</li>
+    <li><strong>E-Commerce:</strong> Produktwerbung in großem Umfang</li>
+    <li><strong>Startups:</strong> Professionelle Ads ohne Design-Team</li>
+    <li><strong>Agenturen:</strong> Effiziente Kundenarbeit bei Ad-Erstellung</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Fazit</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Der Workflow demonstriert, wie KI die Erstellung von Ad Creatives vereinfacht. Das Ergebnis ist vielleicht noch nicht auf dem Niveau eines professionellen Grafikdesigners - aber für schnelle Tests, erste Entwürfe oder Teams ohne Designressourcen ist dieser Ansatz eine echte Alternative.
+  </p>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6", marginTop: "15px" }}>
+    Die Technologie entwickelt sich rasant weiter. Was heute noch "nicht perfekt integriert" ist, wird in wenigen Monaten deutlich besser funktionieren.
+  </p>
+</div>

src/pages/portfolio/projects/recrobot.mdx

@@ -0,0 +1,157 @@
+---
+slug: "recrobot"
+title: "RecroBot - AI Voice Interview Platform"
+description: "KI Voice Interview-Plattform für automatisierte HR-Interviews mit Echtzeit-Sprachtranskription"
+excerpt: "Produktive Voice-AI-Plattform für automatisierte HR-Interviews mit TypeScript/Next.js 14 und Vapi Voice AI."
+date: "2024-12-01"
+category: "AI & Automation"
+coverImage: "/images/projects/recrobot/cover.jpg"
+client: "Everlast Consulting GmbH"
+duration: "Laufend"
+url: "https://recrobot.site"
+repository: ""
+documentation: ""
+published: true
+featured: true
+technologies: ["TypeScript", "Next.js 14", "Vapi Voice AI", "WebSocket", "Supabase", "Tailwind CSS"]
+tags: ["Voice AI", "AI Agents", "HR Tech", "Real-time", "WebSocket"]
+---
+
+<div style={{ margin: "20px 0", padding: "20px", backgroundColor: "#3d3d3d", borderRadius: "8px" }}>
+  <p style={{ fontSize: "1.1rem", lineHeight: "1.6" }}>
+    RecroBot ist eine produktive Voice-AI-Plattform für automatisierte HR-Interviews. Was als technische Testaufgabe begann, ist jetzt ein vollständiges HR-Produkt im Einsatz.
+  </p>
+</div>
+
+<hr style={{ margin: "40px 0", border: "none", height: "1px", backgroundColor: "#ddd" }} />
+
+<h2 style={{ marginBottom: "20px" }}>Live Demo</h2>
+<div style={{ marginBottom: "30px", padding: "15px", backgroundColor: "#2a2a2a", borderRadius: "8px", border: "1px solid #444" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6", marginBottom: "10px" }}>
+    <strong>Teste die Demo:</strong> Besuche <a href="https://recrobot.site" target="_blank" rel="noopener noreferrer" style={{ color: "#60a5fa" }}>recrobot.site</a> und gib <strong>"AI-Manager"</strong> als Position an.
+  </p>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Features</h2>
+<div style={{ marginBottom: "30px" }}>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.8" }}>
+    <li><strong>Echtzeit-Sprachtranskription</strong> – Live-Transkription während des Interviews</li>
+    <li><strong>WebSocket Event-Handling</strong> – Nahtlose Kommunikation zwischen Client und Server</li>
+    <li><strong>Gesprächszustandsverwaltung</strong> – Intelligente Steuerung des Interview-Flows</li>
+    <li><strong>Responsive UI</strong> – Optimiert für Desktop und Mobile</li>
+    <li><strong>Voice AI Integration</strong> – Natürliche Sprachinteraktion mit Kandidaten</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Systemarchitektur</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Die Lösung basiert auf einer modernen Next.js 14 Architektur:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Next.js 14 App Router mit Server Components</li>
+    <li>Vapi Voice AI für Sprachverarbeitung</li>
+    <li>WebSocket für Echtzeit-Kommunikation</li>
+    <li>Supabase für Datenpersistenz</li>
+    <li>Tailwind CSS für responsives Design</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Tech Stack</h2>
+<div style={{ marginBottom: "30px" }}>
+  <table style={{ width: "100%", borderCollapse: "collapse" }}>
+    <thead>
+      <tr style={{ borderBottom: "1px solid #444" }}>
+        <th style={{ padding: "12px", textAlign: "left", color: "#ccc" }}>Kategorie</th>
+        <th style={{ padding: "12px", textAlign: "left", color: "#ccc" }}>Technologie</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: "1px solid #333" }}>
+        <td style={{ padding: "12px" }}>Frontend</td>
+        <td style={{ padding: "12px" }}>Next.js 14, TypeScript, Tailwind CSS</td>
+      </tr>
+      <tr style={{ borderBottom: "1px solid #333" }}>
+        <td style={{ padding: "12px" }}>Voice AI</td>
+        <td style={{ padding: "12px" }}>Vapi Voice AI</td>
+      </tr>
+      <tr style={{ borderBottom: "1px solid #333" }}>
+        <td style={{ padding: "12px" }}>Realtime</td>
+        <td style={{ padding: "12px" }}>WebSocket</td>
+      </tr>
+      <tr style={{ borderBottom: "1px solid #333" }}>
+        <td style={{ padding: "12px" }}>Database</td>
+        <td style={{ padding: "12px" }}>Supabase (PostgreSQL)</td>
+      </tr>
+      <tr>
+        <td style={{ padding: "12px" }}>Deployment</td>
+        <td style={{ padding: "12px" }}>Vercel</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Voice AI Integration</h2>
+<div style={{ marginBottom: "30px" }}>
+  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
+    <code className="language-typescript" style={{ color: "#f8f8f2" }}>
+{`// Vapi Voice AI Event Handling
+const handleVapiEvents = (event: VapiEvent) => {
+  switch (event.type) {
+    case 'speech-start':
+      setIsListening(true);
+      break;
+    case 'transcript':
+      updateTranscript(event.transcript);
+      break;
+    case 'call-end':
+      finalizeInterview();
+      break;
+  }
+};`}
+    </code>
+  </pre>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>WebSocket Kommunikation</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Echtzeit-Event-Handling für nahtlose Benutzererfahrung:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Bidirektionale Kommunikation</li>
+    <li>Automatische Reconnection-Logik</li>
+    <li>Event-basierte Zustandsänderungen</li>
+    <li>Optimierte Latenz für Voice-Anwendungen</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Interview Flow</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Intelligente Gesprächssteuerung:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Dynamische Fragenanpassung basierend auf Antworten</li>
+    <li>Kontextbewusstes Follow-up</li>
+    <li>Natürlicher Gesprächsfluss</li>
+    <li>Automatische Zusammenfassung</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Entstehung</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Das Projekt entstand ursprünglich als technische Testaufgabe für eine Bewerbung bei Everlast Consulting. Nach positivem Feedback wurde es zu einem vollständigen Produkt weiterentwickelt, das jetzt aktiv für HR-Interviews eingesetzt wird.
+  </p>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Ergebnisse</h2>
+<div style={{ marginBottom: "30px" }}>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Produktive Plattform im aktiven Einsatz</li>
+    <li>Automatisierung von Screening-Interviews</li>
+    <li>Konsistente Interview-Qualität</li>
+    <li>Skalierbare HR-Prozesse</li>
+  </ul>
+</div>

src/pages/portfolio/projects/website-mit-ki.mdx

@@ -0,0 +1,168 @@
+---
+slug: "website-mit-ki"
+title: "Eigene Website mit KI bauen: Von Null zur fertigen Seite"
+description: "Schritt-für-Schritt Anleitung zum Aufbau einer professionellen Website mit Claude Code - DSGVO-konform, mehrsprachig, mit Portfolio und Blog"
+excerpt: "Wie du in unter einer Stunde eine komplette Website erstellst - ohne eine einzige Zeile Code selbst zu schreiben."
+date: "2024-12-13"
+category: "KI & Automatisierung"
+coverImage: "/images/projects/website-mit-ki/cover.jpg"
+client: "Eigenprojekt"
+duration: "30 Minuten"
+url: ""
+repository: ""
+documentation: ""
+published: true
+featured: true
+technologies: ["Claude Code", "React", "TypeScript", "Vercel", "GitHub", "Vite"]
+tags: ["KI", "Website", "No-Code", "Tutorial", "Claude Code", "Vercel"]
+videoUrl: "https://www.tella.tv/video/baue-deine-website-noch-heute-mit-ki-8f7v"
+---
+
+<div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden', marginBottom: '2rem', borderRadius: '12px' }}>
+  <iframe
+    src="https://www.tella.tv/video/baue-deine-website-noch-heute-mit-ki-8f7v/embed?b=0&title=1&a=1&loop=0&autoPlay=false&t=0&muted=0&wt=0"
+    style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }}
+    allowFullScreen
+    loading="lazy"
+  />
+</div>
+
+<div style={{ margin: "20px 0", padding: "20px", backgroundColor: "#3d3d3d", borderRadius: "8px" }}>
+  <p style={{ fontSize: "1.1rem", lineHeight: "1.6" }}>
+    Eine professionelle Website ohne Programmierkenntnisse? Mit KI ist das heute möglich. Dieses Tutorial zeigt den kompletten Prozess - von der leeren Projektmappe zur fertigen, gehosteten Website.
+  </p>
+</div>
+
+<hr style={{ margin: "40px 0", border: "none", height: "1px", backgroundColor: "#ddd" }} />
+
+<h2 style={{ marginBottom: "20px" }}>Was wird gebaut?</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Die fertige Website enthält alle wichtigen Features einer modernen Webpräsenz:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>DSGVO-konforme Implementierung mit Cookie-Banner</li>
+    <li>Mehrsprachigkeit (Deutsch, Englisch, weitere möglich)</li>
+    <li>Über-mich-Seite für persönliche Informationen</li>
+    <li>Portfolio-Seite mit interaktiven Projekten</li>
+    <li>Blog-Funktionalität für Blogposts</li>
+    <li>SEO-Optimierung für bessere Google-Rankings</li>
+    <li>Kontaktformular für potenzielle Kunden</li>
+    <li>Mobile-optimiertes, responsives Design</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Die Vorteile</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Bessere Sichtbarkeit</h3>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Durch SEO-Optimierung erscheint die Website direkt unter den ersten Google-Treffern für relevante Suchbegriffe - etwa bei der Suche nach dem eigenen Namen.
+  </p>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Minimale Kosten</h3>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Im Gegensatz zu Baukastensystemen wie Wix, WordPress oder Webflow fallen keine monatlichen Gebühren an. Die einzigen Kosten: Ein KI-Abonnement und optional eine eigene Domain.
+  </p>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Volle Kontrolle</h3>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Das Projekt liegt versioniert auf GitHub und wird über Vercel kostenlos gehostet. Keine Abhängigkeit von Plattformen, die ihre Preise ändern oder Features einschränken können.
+  </p>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Die Werkzeuge</h2>
+<div style={{ marginBottom: "30px" }}>
+  <table style={{ width: "100%", borderCollapse: "collapse" }}>
+    <thead>
+      <tr style={{ borderBottom: "2px solid #ddd" }}>
+        <th style={{ textAlign: "left", padding: "10px" }}>Tool</th>
+        <th style={{ textAlign: "left", padding: "10px" }}>Zweck</th>
+        <th style={{ textAlign: "left", padding: "10px" }}>Kosten</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: "1px solid #ddd" }}>
+        <td style={{ padding: "10px" }}><strong>Claude Code</strong></td>
+        <td style={{ padding: "10px" }}>KI für die komplette Entwicklung</td>
+        <td style={{ padding: "10px" }}>Pro-Plan empfohlen</td>
+      </tr>
+      <tr style={{ borderBottom: "1px solid #ddd" }}>
+        <td style={{ padding: "10px" }}><strong>GitHub</strong></td>
+        <td style={{ padding: "10px" }}>Versionierung des Codes</td>
+        <td style={{ padding: "10px" }}>Kostenlos</td>
+      </tr>
+      <tr style={{ borderBottom: "1px solid #ddd" }}>
+        <td style={{ padding: "10px" }}><strong>Vercel</strong></td>
+        <td style={{ padding: "10px" }}>Hosting und Deployment</td>
+        <td style={{ padding: "10px" }}>Kostenlos</td>
+      </tr>
+      <tr style={{ borderBottom: "1px solid #ddd" }}>
+        <td style={{ padding: "10px" }}><strong>Domain</strong></td>
+        <td style={{ padding: "10px" }}>Eigene URL</td>
+        <td style={{ padding: "10px" }}>Optional (~10-15EUR/Jahr)</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Der Workflow</h2>
+<div style={{ marginBottom: "30px" }}>
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>1. Vorbereitung</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>GitHub-Account erstellen und neue Repository anlegen</li>
+    <li>Vercel-Account erstellen für späteres Hosting</li>
+    <li>Lokalen Projektordner auf dem Rechner anlegen</li>
+    <li>Relevante Dokumente bereitstellen (Lebenslauf, Anschreiben, etc.)</li>
+  </ul>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>2. Entwicklung mit Claude Code</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Claude Code öffnen und Projektordner auswählen</li>
+    <li>Prompt mit gewünschten Features eingeben</li>
+    <li>KI arbeitet autonom durch alle Dateien und erstellt die Website</li>
+    <li>Berechtigungen bei Nachfrage erteilen</li>
+  </ul>
+
+  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>3. Deployment</h3>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Projekt auf GitHub pushen</li>
+    <li>In Vercel das GitHub-Repository importieren</li>
+    <li>Website wird automatisch gebaut und deployed</li>
+    <li>Bei Build-Fehlern: Logs kopieren und Claude zur Fehlerbehebung nutzen</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Design-Inspiration</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Für individuelle Designs gibt es mehrere Ansätze:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li><strong>Awwwards:</strong> Preisgekrönte Websites als Inspiration</li>
+    <li><strong>Envato Elements:</strong> Website-Templates als Designvorlage - Screenshot anfertigen und Claude zeigen</li>
+    <li><strong>Individuelle Anpassungen:</strong> Farben, Bilder und Elemente per Chat-Anweisung ändern</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Änderungen vornehmen</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Nach dem initialen Setup können jederzeit Änderungen vorgenommen werden:
+  </p>
+  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
+    <li>Bilder austauschen durch Anhängen in Claude Code</li>
+    <li>Texte und Inhalte per Chat-Anweisung ändern</li>
+    <li>Neue Seiten oder Funktionen hinzufügen</li>
+    <li>Nach jeder Änderung: Push zu GitHub, automatisches Redeployment auf Vercel</li>
+  </ul>
+</div>
+
+<h2 style={{ marginBottom: "20px" }}>Fazit</h2>
+<div style={{ marginBottom: "30px" }}>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
+    Eine komplette, professionelle Website lässt sich heute in unter einer Stunde aufbauen - ohne eine einzige Zeile Code selbst zu schreiben. Die Kombination aus KI-Entwicklung, kostenlosem Hosting und Versionierung macht diese Lösung nicht nur für Entwickler interessant, sondern für alle, die eine professionelle Webpräsenz benötigen: Selbstständige, Unternehmen oder Projekte.
+  </p>
+  <p style={{ fontSize: "1rem", lineHeight: "1.6", marginTop: "15px" }}>
+    Der Kostenfaktor ist minimal, die Kontrolle maximal - und das Ergebnis kann sich mit jeder professionell entwickelten Website messen.
+  </p>
+</div>

src/utils/constants.ts

@@ -0,0 +1,28 @@
+// src/utils/constants.ts
+// Zentrale Konstanten für die gesamte Website
+
+export const CONTACT = {
+    email: "info@damjan-savic.com",
+    phone: "+49 175 695 0979",
+    website: "https://damjan-savic.com",
+    linkedin: "https://www.linkedin.com/in/damjan-savi%C4%87-720288127/",
+    github: "https://github.com/damjan1996",
+    location: {
+        city: "Bergisch Gladbach",
+        country: "Germany",
+        region: "Nordrhein-Westfalen"
+    }
+} as const;
+
+export const CURRENT_ROLE = {
+    company: "Everlast Consulting GmbH",
+    position: "Process Automation Specialist",
+    since: "2024-12"
+} as const;
+
+export const PROFILE = {
+    name: "Damjan Savić",
+    title: "AI & Automation Specialist",
+    subtitle: "Building AI agents and automation solutions",
+    languages: ["German", "English", "Serbian", "French", "Spanish", "Russian"]
+} as const;