Files
Portfolio/index.html
T
damjan_savicandClaude Opus 4.5 4b9e457f4a Performance: Mobile-Optimierungen für besseren PageSpeed
- Portrait-Bild von 1.2MB auf ~20KB optimiert (300px/600px + WebP)
- Hero-Animation entfernt für schnelleren LCP
- WebP srcset für alle Projekt-Bilder (6 Größen: 200-1200px)
- Korrekte sizes-Attribute für Mobile (350px statt 1200px)
- Supabase lazy laden via dynamischen Import
- Admin-Check verzögert mit requestIdleCallback
- Hauptbundle von 461KB auf 358KB reduziert

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-05 22:02:57 +01:00

138 lines
6.1 KiB
HTML

<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Tag Manager wird nach Cookie-Zustimmung geladen -->
<!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/logo.png" />
<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="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" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<!-- Google Search Console Verification -->
<meta name="google-site-verification" content="YOUR_VERIFICATION_CODE" />
<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json" />
<!-- Additional SEO Meta Tags -->
<meta name="image" content="https://damjan-savic.com/logo.png" />
<meta itemprop="name" content="Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant Köln" />
<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ć | Fullstack-, IoT- & KI-Entwickler</title>
<!-- Performance Optimizations -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://www.googletagmanager.com">
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Damjan Savić | Fullstack-, IoT- & KI-Entwickler" />
<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" />
<meta property="og:image:width" content="1000" />
<meta property="og:image:height" content="1000" />
<meta property="og:image:alt" content="Damjan Savić Logo - Senior Fullstack Entwickler & Digital Solutions Consultant" />
<meta property="og:site_name" content="Damjan Savić Developer Portfolio" />
<meta property="og:locale" content="de_DE" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="sr_RS" />
<meta property="og:updated_time" content="2025-01-15T12:00:00+01:00" />
<meta property="article:author" content="Damjan Savić" />
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Damjan Savić | Fullstack-, IoT- & KI-Entwickler" />
<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 -->
<style>
/* Sofortiges Setzen der dunklen Farben */
:root {
color-scheme: dark;
}
html,
body {
background-color: transparent;
}
html {
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar {
display: none;
}
body {
margin-right: 0 !important;
overflow-x: hidden;
position: relative;
}
#root {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #18181B;
}
/* Verhindert weißes Aufblitzen */
@media (prefers-color-scheme: dark) {
html, body, #root {
background-color: #18181B;
}
}
/* Font-Loading Optimierung */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-var.woff2') format('woff2-variations');
}
body {
font-family: Inter, system-ui, sans-serif;
}
</style>
<!-- Preload Font -->
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
<!-- Preload wichtiger Assets -->
<link rel="preload" href="/portrait-300.webp" as="image" type="image/webp" fetchpriority="high" media="(max-width: 640px)" />
<link rel="preload" href="/portrait-600.webp" as="image" type="image/webp" fetchpriority="high" media="(min-width: 641px)" />
<link rel="preload" href="/header-logo.svg" as="image" />
<link rel="preload" href="/favicon.svg" as="image" />
</head>
<body>
<!-- Google Tag Manager (noscript) wird nach Cookie-Zustimmung eingefügt -->
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>