damjan_savic/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: GitHub/LinkedIn Icons im Hero-Bereich sichtbar machen

Browse Source 
- 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>
This commit is contained in:
damjan_savic
2026-01-05 23:30:46 +01:00
co-authored by Claude Opus 4.5
parent 3f32ad6081
commit fc4d4f3cc3
1 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/home/components/Hero.tsx
+26 -4
View File
@@ -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>