Hugging Face's logo

Spaces:
Astridkraft
/
Webseite
Running

App Files Community
Astridkraft commited on
Commit
374ea5d
·
verified ·
1 Parent(s): 52f569b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +270 -202
index.html CHANGED
@@ -3,280 +3,348 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Astrid Kraft · KI Engineer</title>
7
  <style>
8
  * {
9
  margin: 0;
10
  padding: 0;
11
  box-sizing: border-box;
12
- font-family: 'Segoe UI', system-ui, sans-serif;
13
  }
 
14
  body {
15
- background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
16
  min-height: 100vh;
17
  display: flex;
18
- flex-direction: column;
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
 
20
  /* ===== MENÜLEISTE ===== */
21
  .navbar {
22
- background: rgba(255,255,255,0.05);
23
- backdrop-filter: blur(12px);
24
- -webkit-backdrop-filter: blur(12px);
25
- border-bottom: 1px solid rgba(139,92,246,0.3);
26
  padding: 1rem 2rem;
27
  display: flex;
28
  justify-content: space-between;
29
  align-items: center;
30
- flex-wrap: wrap;
31
- gap: 1rem;
32
  }
 
33
  .logo {
34
  font-size: 1.5rem;
35
- font-weight: 700;
36
- background: linear-gradient(45deg, #c084fc, #818cf8);
37
- -webkit-background-clip: text;
38
- background-clip: text;
39
- color: transparent;
40
  }
 
41
  .nav-links {
42
  display: flex;
43
- gap: 1.5rem;
44
  }
 
45
  .nav-links a {
46
- color: #f1f5f9;
47
  text-decoration: none;
48
  font-weight: 500;
49
- padding: 0.5rem 0.75rem;
50
- border-radius: 40px;
51
- transition: 0.2s;
52
  }
 
53
  .nav-links a:hover {
54
- background: rgba(139,92,246,0.2);
55
- color: #c084fc;
56
- }
57
- .nav-links .active {
58
- background: linear-gradient(135deg, #8b5cf6, #6366f1);
59
- color: white;
60
- }
61
- .lang-switch {
62
- background: rgba(255,255,255,0.1);
63
- border-radius: 40px;
64
- padding: 0.2rem;
65
- }
66
- .lang-switch button {
67
- background: transparent;
68
- border: none;
69
- color: #94a3b8;
70
- padding: 0.4rem 1rem;
71
- border-radius: 40px;
72
- cursor: pointer;
73
- font-weight: 500;
74
- transition: 0.2s;
75
  }
76
- .lang-switch button.active {
77
- background: #8b5cf6;
78
- color: white;
 
79
  }
80
- /* ===== HAUPTINHALT ===== */
81
- .container {
82
- max-width: 1200px;
83
- margin: 3rem auto;
84
- padding: 0 2rem;
85
- display: flex;
86
- flex-direction: column;
87
- gap: 2rem;
88
- }
89
- /* Willkommens-Karte */
90
- .hero {
91
- background: linear-gradient(135deg, #2d1b4e, #1e1f4b);
92
- border-radius: 48px;
93
- padding: 3rem;
94
- border: 1px solid rgba(139,92,246,0.3);
95
- box-shadow: 0 25px 40px -20px rgba(0,0,0,0.6);
96
- }
97
- .hero h1 {
98
- font-size: 3.5rem;
99
- font-weight: 800;
100
- background: linear-gradient(135deg, #f0abfc, #a78bfa);
101
  -webkit-background-clip: text;
102
  background-clip: text;
103
  color: transparent;
104
- line-height: 1.2;
105
- margin-bottom: 1rem;
106
  }
107
- .hero p {
108
- color: #cbd5e1;
 
109
  font-size: 1.3rem;
110
- max-width: 700px;
 
 
 
111
  }
112
- /* Drei bunte Karten */
113
- .card-grid {
114
  display: grid;
115
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
116
- gap: 1.8rem;
117
- margin-top: 1rem;
118
  }
119
- .card {
120
- background: rgba(30,41,59,0.8);
121
- backdrop-filter: blur(8px);
122
- border-radius: 32px;
123
- padding: 2rem;
124
- border-left: 8px solid;
125
- transition: 0.2s;
126
- box-shadow: 0 10px 20px -8px rgba(0,0,0,0.5);
127
  }
128
- .card:hover {
129
- transform: translateY(-6px);
130
- box-shadow: 0 20px 30px -12px #8b5cf6;
 
 
131
  }
132
- .card:nth-child(1) { border-color: #8b5cf6; }
133
- .card:nth-child(2) { border-color: #10b981; }
134
- .card:nth-child(3) { border-color: #f59e0b; }
135
- .card h3 {
136
- color: white;
137
- font-size: 1.7rem;
138
  margin-bottom: 1rem;
 
139
  }
140
- .card p {
141
- color: #9ca3af;
142
- line-height: 1.5;
 
143
  }
144
- .badge {
 
145
  display: inline-block;
146
- background: #8b5cf6;
147
- color: white;
148
  padding: 0.3rem 1rem;
149
  border-radius: 30px;
150
- font-size: 0.85rem;
 
 
 
 
 
 
 
 
 
 
 
 
151
  margin-top: 1rem;
 
 
 
152
  }
153
- /* Kontakt-Bereich */
154
- .contact {
155
- background: #1e293b;
156
- border-radius: 40px;
157
- padding: 2.5rem;
158
- display: flex;
159
- justify-content: space-between;
160
- flex-wrap: wrap;
161
- gap: 2rem;
162
- border: 1px solid #334155;
163
  }
164
- .contact h2 {
165
- color: #f1f5f9;
166
- font-size: 2rem;
 
 
 
 
167
  }
 
168
  .contact a {
169
- color: #c084fc;
170
  text-decoration: none;
171
- font-size: 1.2rem;
172
- border-bottom: 1px dotted #8b5cf6;
173
  }
 
174
  .contact a:hover {
175
- color: white;
176
  }
177
- .social-icons {
 
178
  display: flex;
179
- gap: 1rem;
 
 
180
  }
181
- .social-icons a {
182
- background: #2d2f5a;
183
- width: 48px;
184
- height: 48px;
185
- border-radius: 50%;
186
- display: flex;
187
- align-items: center;
188
- justify-content: center;
 
 
 
 
 
189
  color: white;
190
- font-weight: 700;
191
- border: 1px solid #8b5cf6;
192
- transition: 0.2s;
193
  }
194
- .social-icons a:hover {
195
- background: #8b5cf6;
196
- transform: scale(1.1);
197
  }
198
- .footer {
199
- text-align: center;
200
- color: #6b7280;
201
- padding: 2rem;
202
- font-size: 0.9rem;
203
  }
204
- @media (max-width: 700px) {
205
- .hero h1 { font-size: 2.4rem; }
206
- .navbar { flex-direction: column; }
 
 
 
 
 
 
 
 
 
 
 
 
 
207
  }
208
  </style>
209
  </head>
210
  <body>
211
- <!-- ===== MENÜLEISTE ===== -->
212
- <div class="navbar">
213
- <div class="logo">✦ ASTRID KRAFT</div>
214
- <div class="nav-links">
215
- <a href="#" class="active">Start</a>
216
- <a href="#">Projekte</a>
217
- <a href="#">Lebenslauf</a>
218
- <a href="#">Kontakt</a>
219
- </div>
220
- <div class="lang-switch">
221
- <button class="active">DE</button>
222
- <button>EN</button>
223
- </div>
224
- </div>
225
-
226
- <!-- ===== HAUPTBEREICH ===== -->
227
- <div class="container">
228
- <!-- Hero / Willkommen -->
229
- <div class="hero">
230
- <h1>KI-Engineerin<br>& System-Spezialistin</h1>
231
- <p>Diplom-Mathematikerin · Bildgenerierung · Autonome Agenten</p>
232
- </div>
233
-
234
- <!-- Drei bunte Karten (wie App) -->
235
- <div class="card-grid">
236
- <div class="card">
237
- <h3>🖼️ Bildgenerierung</h3>
238
- <p>Stable Diffusion · ControlNet · SAM2 · Inpainting · bis 4096px</p>
239
- <span class="badge">Live on HF</span>
240
- </div>
241
- <div class="card">
242
- <h3>🤖 Code‑Agent</h3>
243
- <p>Autonomes Refactoring · Vektordb · semantisches Gedächtnis · Confidence</p>
244
- <span class="badge">in Entwicklung</span>
245
  </div>
246
- <div class="card">
247
- <h3>📊 System-Orchestrierung</h3>
248
- <p>Prozessoptimierung · Monitoring · SAP · 15+ Jahre Erfahrung</p>
249
- <span class="badge">Vodafone · o.tel.o</span>
 
 
 
 
250
  </div>
251
- </div>
252
-
253
- <!-- Kontakt / Soziales -->
254
- <div class="contact">
255
- <div>
256
- <h2>Kontakt</h2>
257
- <p style="color:#9ca3af; margin-top:0.5rem;">astridkraft.business@gmail.com</p>
258
- <p style="color:#9ca3af;">+49 172 2433332</p>
259
- <p style="margin-top:1rem;"><a href="#">➡️ Lebenslauf als PDF</a></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
260
  </div>
261
- <div class="social-icons">
262
- <a href="#">X</a>
263
- <a href="#">in</a>
264
- <a href="#">🤗</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
265
  </div>
266
  </div>
267
  </div>
268
-
269
- <!-- Footer -->
270
- <div class="footer">
271
- © 2025 Astrid Kraft · made with ⚡ on Hugging Face
272
- </div>
273
-
274
- <!-- Ein Mini-Script für den Sprachumschalter (nur Show) -->
275
  <script>
276
- document.querySelectorAll('.lang-switch button').forEach(btn => {
277
- btn.addEventListener('click', function() {
278
- document.querySelectorAll('.lang-switch button').forEach(b => b.classList.remove('active'));
279
- this.classList.add('active');
 
 
 
 
 
 
 
 
 
 
 
 
280
  });
281
  });
282
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Astrid Kraft · AI Engineer</title>
7
  <style>
8
  * {
9
  margin: 0;
10
  padding: 0;
11
  box-sizing: border-box;
12
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
13
  }
14
+
15
  body {
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
  min-height: 100vh;
18
  display: flex;
19
+ justify-content: center;
20
+ align-items: center;
21
+ padding: 20px;
22
+ }
23
+
24
+ .card {
25
+ max-width: 1000px;
26
+ width: 100%;
27
+ background: rgba(255, 255, 255, 0.95);
28
+ backdrop-filter: blur(10px);
29
+ border-radius: 30px;
30
+ box-shadow: 0 20px 60px rgba(0,0,0,0.3);
31
+ overflow: hidden;
32
  }
33
+
34
  /* ===== MENÜLEISTE ===== */
35
  .navbar {
36
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
 
 
37
  padding: 1rem 2rem;
38
  display: flex;
39
  justify-content: space-between;
40
  align-items: center;
41
+ color: white;
 
42
  }
43
+
44
  .logo {
45
  font-size: 1.5rem;
46
+ font-weight: bold;
47
+ letter-spacing: 1px;
 
 
 
48
  }
49
+
50
  .nav-links {
51
  display: flex;
52
+ gap: 2rem;
53
  }
54
+
55
  .nav-links a {
56
+ color: white;
57
  text-decoration: none;
58
  font-weight: 500;
59
+ padding: 0.5rem 1rem;
60
+ border-radius: 30px;
61
+ transition: all 0.3s;
62
  }
63
+
64
  .nav-links a:hover {
65
+ background: rgba(255, 255, 255, 0.2);
66
+ transform: translateY(-2px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  }
68
+
69
+ /* ===== INHALT ===== */
70
+ .content {
71
+ padding: 3rem 2rem;
72
  }
73
+
74
+ h1 {
75
+ font-size: 2.8rem;
76
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  -webkit-background-clip: text;
78
  background-clip: text;
79
  color: transparent;
80
+ margin-bottom: 0.5rem;
 
81
  }
82
+
83
+ h2 {
84
+ color: #4a5568;
85
  font-size: 1.3rem;
86
+ font-weight: 400;
87
+ margin-bottom: 2rem;
88
+ border-bottom: 2px solid #e2e8f0;
89
+ padding-bottom: 1rem;
90
  }
91
+
92
+ .grid {
93
  display: grid;
94
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
95
+ gap: 2rem;
96
+ margin: 2rem 0;
97
  }
98
+
99
+ .card-item {
100
+ background: white;
101
+ padding: 1.8rem;
102
+ border-radius: 20px;
103
+ box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
104
+ border: 1px solid #e2e8f0;
105
+ transition: all 0.3s;
106
  }
107
+
108
+ .card-item:hover {
109
+ transform: translateY(-5px);
110
+ box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
111
+ border-color: #667eea;
112
  }
113
+
114
+ .card-item h3 {
115
+ color: #4a5568;
 
 
 
116
  margin-bottom: 1rem;
117
+ font-size: 1.3rem;
118
  }
119
+
120
+ .card-item p {
121
+ color: #718096;
122
+ line-height: 1.6;
123
  }
124
+
125
+ .tag {
126
  display: inline-block;
127
+ background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
128
+ color: #667eea;
129
  padding: 0.3rem 1rem;
130
  border-radius: 30px;
131
+ font-size: 0.9rem;
132
+ margin: 0.2rem;
133
+ border: 1px solid #667eea40;
134
+ }
135
+
136
+ .button {
137
+ display: inline-block;
138
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
139
+ color: white;
140
+ padding: 0.8rem 2rem;
141
+ border-radius: 30px;
142
+ text-decoration: none;
143
+ font-weight: 500;
144
  margin-top: 1rem;
145
+ transition: all 0.3s;
146
+ border: none;
147
+ cursor: pointer;
148
  }
149
+
150
+ .button:hover {
151
+ transform: translateY(-2px);
152
+ box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
 
 
 
 
 
 
153
  }
154
+
155
+ .contact {
156
+ background: #f7fafc;
157
+ border-radius: 20px;
158
+ padding: 2rem;
159
+ margin-top: 2rem;
160
+ text-align: center;
161
  }
162
+
163
  .contact a {
164
+ color: #667eea;
165
  text-decoration: none;
166
+ font-weight: 500;
 
167
  }
168
+
169
  .contact a:hover {
170
+ text-decoration: underline;
171
  }
172
+
173
+ .language-switch {
174
  display: flex;
175
+ gap: 0.5rem;
176
+ justify-content: flex-end;
177
+ margin-bottom: 1rem;
178
  }
179
+
180
+ .lang-btn {
181
+ background: #e2e8f0;
182
+ border: none;
183
+ padding: 0.3rem 1rem;
184
+ border-radius: 20px;
185
+ cursor: pointer;
186
+ color: #4a5568;
187
+ transition: all 0.3s;
188
+ }
189
+
190
+ .lang-btn.active {
191
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
192
  color: white;
 
 
 
193
  }
194
+
195
+ .lang-content {
196
+ display: none;
197
  }
198
+
199
+ .lang-content.active {
200
+ display: block;
 
 
201
  }
202
+
203
+ @media (max-width: 768px) {
204
+ .navbar {
205
+ flex-direction: column;
206
+ gap: 1rem;
207
+ text-align: center;
208
+ }
209
+
210
+ .nav-links {
211
+ flex-wrap: wrap;
212
+ justify-content: center;
213
+ }
214
+
215
+ h1 {
216
+ font-size: 2rem;
217
+ }
218
  }
219
  </style>
220
  </head>
221
  <body>
222
+ <div class="card">
223
+ <!-- ===== MENÜLEISTE ===== -->
224
+ <nav class="navbar">
225
+ <div class="logo">✨ Astrid Kraft</div>
226
+ <div class="nav-links">
227
+ <a href="#start">Start</a>
228
+ <a href="#projekte">Projekte</a>
229
+ <a href="#skills">Skills</a>
230
+ <a href="#kontakt">Kontakt</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
231
  </div>
232
+ </nav>
233
+
234
+ <!-- ===== INHALT ===== -->
235
+ <div class="content">
236
+ <!-- Sprachumschalter -->
237
+ <div class="language-switch">
238
+ <button class="lang-btn active" data-lang="de">🇩🇪 Deutsch</button>
239
+ <button class="lang-btn" data-lang="en">🇬🇧 English</button>
240
  </div>
241
+
242
+ <!-- DEUTSCHE VERSION -->
243
+ <div id="content-de" class="lang-content active">
244
+ <h1>Astrid Kraft</h1>
245
+ <h2>Diplom-Mathematikerin · AI Engineer · Professional System Specialist</h2>
246
+
247
+ <div class="grid">
248
+ <div class="card-item">
249
+ <h3>🎨 Bildgenerierung</h3>
250
+ <p>Stable Diffusion Pipeline mit ControlNet, SAM2 und 3 Transformations-Modi. Mehrstufige KI-Orchestrierung bis 4096×4096 Pixel.</p>
251
+ </div>
252
+
253
+ <div class="card-item">
254
+ <h3>🤖 Code-Agent</h3>
255
+ <p>Autonomer Refactoring-Agent mit semantischem Gedächtnis (Vektordb). Analysiert Code, extrahiert Funktionen und lernt aus Fehlern.</p>
256
+ </div>
257
+
258
+ <div class="card-item">
259
+ <h3>📊 System-Expertise</h3>
260
+ <p>Langjährige Erfahrung in Systemüberwachung, Prozessoptimierung und SAP R/3 bei Vodafone, Arcor und o.tel.o.</p>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Skills als Tags -->
265
+ <div style="margin: 2rem 0;">
266
+ <span class="tag">Python</span>
267
+ <span class="tag">PyTorch</span>
268
+ <span class="tag">Stable Diffusion</span>
269
+ <span class="tag">ControlNet</span>
270
+ <span class="tag">Vektordatenbanken</span>
271
+ <span class="tag">SAP R/3</span>
272
+ <span class="tag">SQL</span>
273
+ <span class="tag">Linux</span>
274
+ </div>
275
+
276
+ <!-- Kontaktbereich -->
277
+ <div class="contact">
278
+ <h3 style="color: #4a5568; margin-bottom: 1rem;">📬 Kontakt</h3>
279
+ <p>📧 <a href="mailto:astridkraft.business@gmail.com">astridkraft.business@gmail.com</a></p>
280
+ <p>📞 +49 172 2433332</p>
281
+ <p>📍 Essen, Deutschland</p>
282
+ <div style="margin-top: 1rem;">
283
+ <a href="#" class="button" onclick="alert('PDF folgt in Kürze')">📄 Lebenslauf (PDF)</a>
284
+ </div>
285
+ </div>
286
  </div>
287
+
288
+ <!-- ENGLISCHE VERSION -->
289
+ <div id="content-en" class="lang-content">
290
+ <h1>Astrid Kraft</h1>
291
+ <h2>Mathematician · AI Engineer · System Specialist</h2>
292
+
293
+ <div class="grid">
294
+ <div class="card-item">
295
+ <h3>🎨 Image Generation</h3>
296
+ <p>Stable Diffusion pipeline with ControlNet, SAM2 and 3 transformation modes. Multi-stage AI orchestration up to 4096×4096 pixels.</p>
297
+ </div>
298
+
299
+ <div class="card-item">
300
+ <h3>🤖 Code Agent</h3>
301
+ <p>Autonomous refactoring agent with semantic memory (vector DB). Analyzes code, extracts functions, learns from mistakes.</p>
302
+ </div>
303
+
304
+ <div class="card-item">
305
+ <h3>📊 System Expertise</h3>
306
+ <p>Long-term experience in system monitoring, process optimization and SAP R/3 at Vodafone, Arcor and o.tel.o.</p>
307
+ </div>
308
+ </div>
309
+
310
+ <div style="margin: 2rem 0;">
311
+ <span class="tag">Python</span>
312
+ <span class="tag">PyTorch</span>
313
+ <span class="tag">Stable Diffusion</span>
314
+ <span class="tag">ControlNet</span>
315
+ <span class="tag">Vector DB</span>
316
+ <span class="tag">SAP R/3</span>
317
+ </div>
318
+
319
+ <div class="contact">
320
+ <h3 style="color: #4a5568; margin-bottom: 1rem;">📬 Contact</h3>
321
+ <p>📧 <a href="mailto:astridkraft.business@gmail.com">astridkraft.business@gmail.com</a></p>
322
+ <p>📍 Essen, Germany</p>
323
+ <div style="margin-top: 1rem;">
324
+ <a href="#" class="button" onclick="alert('PDF coming soon')">📄 Download CV</a>
325
+ </div>
326
+ </div>
327
  </div>
328
  </div>
329
  </div>
330
+
 
 
 
 
 
 
331
  <script>
332
+ const langBtns = document.querySelectorAll('.lang-btn');
333
+ const deContent = document.getElementById('content-de');
334
+ const enContent = document.getElementById('content-en');
335
+
336
+ langBtns.forEach(btn => {
337
+ btn.addEventListener('click', () => {
338
+ langBtns.forEach(b => b.classList.remove('active'));
339
+ btn.classList.add('active');
340
+
341
+ if(btn.dataset.lang === 'de') {
342
+ deContent.classList.add('active');
343
+ enContent.classList.remove('active');
344
+ } else {
345
+ enContent.classList.add('active');
346
+ deContent.classList.remove('active');
347
+ }
348
  });
349
  });
350
  </script>