damjan_savicandClaude Opus 4.5
8f500bdc6b
- Portrait-Bild wird sofort in HTML gerendert (kein JS-Warten) - Skeleton wird ausgeblendet wenn React mounted - Unnötige preconnects entfernt 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
146 lines
7.2 KiB
HTML
146 lines
7.2 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 - nur notwendige preconnects -->
|
|
<link rel="dns-prefetch" 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 - Subset für Latin + German */
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url('/fonts/inter-subset.woff2') format('woff2-variations');
|
|
unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
|
|
}
|
|
|
|
body {
|
|
font-family: Inter, system-ui, sans-serif;
|
|
}
|
|
</style>
|
|
|
|
<!-- Preload Font (60KB subset statt 344KB vollständig) -->
|
|
<link rel="preload" href="/fonts/inter-subset.woff2" as="font" type="font/woff2" crossorigin>
|
|
|
|
<!-- Preload wichtiger Assets -->
|
|
<link rel="preload" href="/portrait-224.webp" as="image" type="image/webp" fetchpriority="high" media="(max-width: 640px)" />
|
|
<link rel="preload" href="/portrait-288.webp" as="image" type="image/webp" fetchpriority="high" media="(min-width: 641px)" />
|
|
<link rel="preload" href="/header-logo.svg" as="image" />
|
|
</head>
|
|
<body>
|
|
<!-- Google Tag Manager (noscript) wird nach Cookie-Zustimmung eingefügt -->
|
|
<div id="root">
|
|
<!-- Critical Hero Skeleton für sofortige LCP -->
|
|
<div id="hero-skeleton" style="min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5rem;background:#18181B;color:white;">
|
|
<picture>
|
|
<source srcset="/portrait-224.webp 224w, /portrait-448.webp 448w" sizes="(max-width:640px) 224px, 288px" type="image/webp" media="(max-width:640px)">
|
|
<source srcset="/portrait-288.webp 288w, /portrait-576.webp 576w" sizes="288px" type="image/webp">
|
|
<img src="/portrait-288.webp" alt="Damjan Savić" width="288" height="288" fetchpriority="high" decoding="sync" style="width:14rem;height:14rem;border-radius:9999px;border:2px solid #27272a;object-fit:cover;">
|
|
</picture>
|
|
<p style="color:#a1a1aa;font-size:0.875rem;letter-spacing:0.1em;margin-top:2rem;">SENIOR FULLSTACK ENTWICKLER</p>
|
|
<h1 style="font-size:2.25rem;font-weight:bold;margin-top:0.5rem;">Damjan Savić<span style="animation:pulse 2s infinite;margin-left:4px;">|</span></h1>
|
|
</div>
|
|
<style>#hero-skeleton{transition:opacity 0.2s}body.app-mounted #hero-skeleton{display:none!important}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0}}</style>
|
|
</div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html> |