From fc4d4f3cc3737633d52eed82dcb365bc845e7ed8 Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Mon, 5 Jan 2026 23:30:46 +0100
Subject: [PATCH] Fix: GitHub/LinkedIn Icons im Hero-Bereich sichtbar machen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Inline SVG Icons statt lucide-react Import
- Icons werden sofort gerendert ohne Lazy-Loading-Verzögerung

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/pages/home/components/Hero.tsx | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/components/Hero.tsx b/src/pages/home/components/Hero.tsx
index 1776857..dded885 100644
--- a/src/pages/home/components/Hero.tsx
+++ b/src/pages/home/components/Hero.tsx
@@ -1,5 +1,27 @@
 import { useTranslation } from 'react-i18next';
-import { Github, Linkedin, Mail } from 'lucide-react';
+
+// Inline SVG icons to avoid lazy-loading issues
+const LinkedinIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
+        <rect width="4" height="12" x="2" y="9"/>
+        <circle cx="4" cy="4" r="2"/>
+    </svg>
+);
+
+const GithubIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/>
+        <path d="M9 18c-4.51 2-5-2-7-2"/>
+    </svg>
+);
+
+const MailIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect width="20" height="16" x="2" y="4" rx="2"/>
+        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
+    </svg>
+);
 
 const Hero = () => {
     const { t } = useTranslation();
@@ -39,7 +61,7 @@ const Hero = () => {
                         className="inline-flex items-center justify-center w-9 h-9 text-white hover:text-zinc-300 transition-colors"
                         aria-label={t('pages.home.hero.social.linkedin.title')}
                     >
-                        <Linkedin className="h-5 w-5 pointer-events-none" />
+                        <LinkedinIcon />
                     </a>
                     <a
                         href="https://github.com/damjan1996"
@@ -48,7 +70,7 @@ const Hero = () => {
                         className="inline-flex items-center justify-center w-9 h-9 text-white hover:text-zinc-300 transition-colors"
                         aria-label={t('pages.home.hero.social.github.title')}
                     >
-                        <Github className="h-5 w-5 pointer-events-none" />
+                        <GithubIcon />
                     </a>
                 </div>
                 <a
@@ -145,7 +167,7 @@ const Hero = () => {
                     className="inline-flex items-center justify-center w-10 h-10 text-white hover:text-zinc-300 transition-colors"
                     aria-label={t('pages.home.hero.social.getInTouch')}
                 >
-                    <Mail className="h-6 w-6 pointer-events-none" />
+                    <MailIcon />
                 </a>
             </div>
         </section>