Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Astrid Kraft · AI Engineer</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| .card { | |
| max-width: 1000px; | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 30px; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.3); | |
| overflow: hidden; | |
| } | |
| /* ===== MENÜLEISTE ===== */ | |
| .navbar { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| color: white; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| letter-spacing: 1px; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 0.5rem 1rem; | |
| border-radius: 30px; | |
| transition: all 0.3s; | |
| } | |
| .nav-links a:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| /* ===== INHALT ===== */ | |
| .content { | |
| padding: 3rem 2rem; | |
| } | |
| h1 { | |
| font-size: 2.8rem; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| margin-bottom: 0.5rem; | |
| } | |
| h2 { | |
| color: #4a5568; | |
| font-size: 1.3rem; | |
| font-weight: 400; | |
| margin-bottom: 2rem; | |
| border-bottom: 2px solid #e2e8f0; | |
| padding-bottom: 1rem; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin: 2rem 0; | |
| } | |
| .card-item { | |
| background: white; | |
| padding: 1.8rem; | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1); | |
| border: 1px solid #e2e8f0; | |
| transition: all 0.3s; | |
| } | |
| .card-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2); | |
| border-color: #667eea; | |
| } | |
| .card-item h3 { | |
| color: #4a5568; | |
| margin-bottom: 1rem; | |
| font-size: 1.3rem; | |
| } | |
| .card-item p { | |
| color: #718096; | |
| line-height: 1.6; | |
| } | |
| .tag { | |
| display: inline-block; | |
| background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%); | |
| color: #667eea; | |
| padding: 0.3rem 1rem; | |
| border-radius: 30px; | |
| font-size: 0.9rem; | |
| margin: 0.2rem; | |
| border: 1px solid #667eea40; | |
| } | |
| .button { | |
| display: inline-block; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 0.8rem 2rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: 500; | |
| margin-top: 1rem; | |
| transition: all 0.3s; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); | |
| } | |
| .contact { | |
| background: #f7fafc; | |
| border-radius: 20px; | |
| padding: 2rem; | |
| margin-top: 2rem; | |
| text-align: center; | |
| } | |
| .contact a { | |
| color: #667eea; | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .contact a:hover { | |
| text-decoration: underline; | |
| } | |
| .language-switch { | |
| display: flex; | |
| gap: 0.5rem; | |
| justify-content: flex-end; | |
| margin-bottom: 1rem; | |
| } | |
| .lang-btn { | |
| background: #e2e8f0; | |
| border: none; | |
| padding: 0.3rem 1rem; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| color: #4a5568; | |
| transition: all 0.3s; | |
| } | |
| .lang-btn.active { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .lang-content { | |
| display: none; | |
| } | |
| .lang-content.active { | |
| display: block; | |
| } | |
| @media (max-width: 768px) { | |
| .navbar { | |
| flex-direction: column; | |
| gap: 1rem; | |
| text-align: center; | |
| } | |
| .nav-links { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <!-- ===== MENÜLEISTE ===== --> | |
| <nav class="navbar"> | |
| <div class="logo">✨ Astrid Kraft</div> | |
| <div class="nav-links"> | |
| <a href="#start">Start</a> | |
| <a href="#projekte">Projekte</a> | |
| <a href="#skills">Skills</a> | |
| <a href="#kontakt">Kontakt</a> | |
| </div> | |
| </nav> | |
| <!-- ===== INHALT ===== --> | |
| <div class="content"> | |
| <!-- Sprachumschalter --> | |
| <div class="language-switch"> | |
| <button class="lang-btn active" data-lang="de">🇩🇪 Deutsch</button> | |
| <button class="lang-btn" data-lang="en">🇬🇧 English</button> | |
| </div> | |
| <!-- DEUTSCHE VERSION --> | |
| <div id="content-de" class="lang-content active"> | |
| <h1>Astrid Kraft</h1> | |
| <h2>Diplom-Mathematikerin · AI Engineer · Professional System Specialist</h2> | |
| <div class="grid"> | |
| <div class="card-item"> | |
| <h3>🎨 Bildgenerierung</h3> | |
| <p>Stable Diffusion Pipeline mit ControlNet, SAM2 und 3 Transformations-Modi. Mehrstufige KI-Orchestrierung bis 4096×4096 Pixel.</p> | |
| </div> | |
| <div class="card-item"> | |
| <h3>🤖 Code-Agent</h3> | |
| <p>Autonomer Refactoring-Agent mit semantischem Gedächtnis (Vektordb). Analysiert Code, extrahiert Funktionen und lernt aus Fehlern.</p> | |
| </div> | |
| <div class="card-item"> | |
| <h3>📊 System-Expertise</h3> | |
| <p>Langjährige Erfahrung in Systemüberwachung, Prozessoptimierung und SAP R/3 bei Vodafone, Arcor und o.tel.o.</p> | |
| </div> | |
| </div> | |
| <!-- Skills als Tags --> | |
| <div style="margin: 2rem 0;"> | |
| <span class="tag">Python</span> | |
| <span class="tag">PyTorch</span> | |
| <span class="tag">Stable Diffusion</span> | |
| <span class="tag">ControlNet</span> | |
| <span class="tag">Vektordatenbanken</span> | |
| <span class="tag">SAP R/3</span> | |
| <span class="tag">SQL</span> | |
| <span class="tag">Linux</span> | |
| </div> | |
| <!-- Kontaktbereich --> | |
| <div class="contact"> | |
| <h3 style="color: #4a5568; margin-bottom: 1rem;">📬 Kontakt</h3> | |
| <p>📧 <a href="mailto:astridkraft.business@gmail.com">astridkraft.business@gmail.com</a></p> | |
| <p>📞 +49 172 2433332</p> | |
| <p>📍 Essen, Deutschland</p> | |
| <div style="margin-top: 1rem;"> | |
| <a href="#" class="button" onclick="alert('PDF folgt in Kürze')">📄 Lebenslauf (PDF)</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ENGLISCHE VERSION --> | |
| <div id="content-en" class="lang-content"> | |
| <h1>Astrid Kraft</h1> | |
| <h2>Mathematician · AI Engineer · System Specialist</h2> | |
| <div class="grid"> | |
| <div class="card-item"> | |
| <h3>🎨 Image Generation</h3> | |
| <p>Stable Diffusion pipeline with ControlNet, SAM2 and 3 transformation modes. Multi-stage AI orchestration up to 4096×4096 pixels.</p> | |
| </div> | |
| <div class="card-item"> | |
| <h3>🤖 Code Agent</h3> | |
| <p>Autonomous refactoring agent with semantic memory (vector DB). Analyzes code, extracts functions, learns from mistakes.</p> | |
| </div> | |
| <div class="card-item"> | |
| <h3>📊 System Expertise</h3> | |
| <p>Long-term experience in system monitoring, process optimization and SAP R/3 at Vodafone, Arcor and o.tel.o.</p> | |
| </div> | |
| </div> | |
| <div style="margin: 2rem 0;"> | |
| <span class="tag">Python</span> | |
| <span class="tag">PyTorch</span> | |
| <span class="tag">Stable Diffusion</span> | |
| <span class="tag">ControlNet</span> | |
| <span class="tag">Vector DB</span> | |
| <span class="tag">SAP R/3</span> | |
| </div> | |
| <div class="contact"> | |
| <h3 style="color: #4a5568; margin-bottom: 1rem;">📬 Contact</h3> | |
| <p>📧 <a href="mailto:astridkraft.business@gmail.com">astridkraft.business@gmail.com</a></p> | |
| <p>📍 Essen, Germany</p> | |
| <div style="margin-top: 1rem;"> | |
| <a href="#" class="button" onclick="alert('PDF coming soon')">📄 Download CV</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const langBtns = document.querySelectorAll('.lang-btn'); | |
| const deContent = document.getElementById('content-de'); | |
| const enContent = document.getElementById('content-en'); | |
| langBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| langBtns.forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| if(btn.dataset.lang === 'de') { | |
| deContent.classList.add('active'); | |
| enContent.classList.remove('active'); | |
| } else { | |
| enContent.classList.add('active'); | |
| deContent.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |