Alibrown commited on
Commit
cfb0ea2
·
verified ·
1 Parent(s): caa4e9a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +556 -19
index.html CHANGED
@@ -1,19 +1,556 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ali Brown | Hugging Face Portfolio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'hf-purple': '#FFD700',
15
+ 'hf-dark': '#0F172A',
16
+ 'hf-light': '#F8FAFC',
17
+ 'hf-accent': '#7C3AED',
18
+ },
19
+ fontFamily: {
20
+ sans: ['Inter', 'sans-serif'],
21
+ },
22
+ animation: {
23
+ 'float': 'float 6s ease-in-out infinite',
24
+ 'gradient': 'gradient 8s ease infinite',
25
+ },
26
+ keyframes: {
27
+ float: {
28
+ '0%, 100%': { transform: 'translateY(0)' },
29
+ '50%': { transform: 'translateY(-10px)' },
30
+ },
31
+ gradient: {
32
+ '0%, 100%': { 'background-position': '0% 50%' },
33
+ '50%': { 'background-position': '100% 50%' },
34
+ }
35
+ }
36
+ }
37
+ }
38
+ }
39
+ </script>
40
+ <style>
41
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
42
+
43
+ body {
44
+ font-family: 'Inter', sans-serif;
45
+ background-color: #0F172A;
46
+ color: #F8FAFC;
47
+ }
48
+
49
+ .gradient-bg {
50
+ background: linear-gradient(-45deg, #0F172A, #1E293B, #334155, #475569);
51
+ background-size: 400% 400%;
52
+ animation: gradient 15s ease infinite;
53
+ }
54
+
55
+ .card-hover {
56
+ transition: all 0.3s ease;
57
+ }
58
+
59
+ .card-hover:hover {
60
+ transform: translateY(-5px);
61
+ box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
62
+ }
63
+
64
+ .carousel-item {
65
+ transition: transform 0.5s ease;
66
+ }
67
+
68
+ .social-icon {
69
+ transition: all 0.3s ease;
70
+ }
71
+
72
+ .social-icon:hover {
73
+ transform: scale(1.2);
74
+ color: #FFD700;
75
+ }
76
+
77
+ .nav-link {
78
+ position: relative;
79
+ }
80
+
81
+ .nav-link::after {
82
+ content: '';
83
+ position: absolute;
84
+ width: 0;
85
+ height: 2px;
86
+ bottom: -2px;
87
+ left: 0;
88
+ background-color: #FFD700;
89
+ transition: width 0.3s ease;
90
+ }
91
+
92
+ .nav-link:hover::after {
93
+ width: 100%;
94
+ }
95
+
96
+ .app-card {
97
+ background: rgba(30, 41, 59, 0.7);
98
+ backdrop-filter: blur(10px);
99
+ border: 1px solid rgba(255, 255, 255, 0.1);
100
+ }
101
+ </style>
102
+ </head>
103
+ <body class="min-h-screen gradient-bg">
104
+ <nav class="bg-hf-dark/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50">
105
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
106
+ <div class="flex items-center justify-between h-16">
107
+ <div class="flex items-center">
108
+ <div class="flex-shrink-0">
109
+ <span class="text-hf-purple font-bold text-xl">Ali Brown</span>
110
+ </div>
111
+ <div class="hidden md:block">
112
+ <div class="ml-10 flex items-baseline space-x-4">
113
+ <a href="#home" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
114
+ <a href="#apps" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projekte</a>
115
+ <a href="#about" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Über Mich</a>
116
+ <a href="#contact" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Kontakt</a>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ <div class="hidden md:block">
121
+ <div class="ml-4 flex items-center md:ml-6">
122
+ <a href="https://huggingface.co/AliBrown" target="_blank" class="bg-hf-purple hover:bg-yellow-500 text-hf-dark px-4 py-2 rounded-md text-sm font-medium flex items-center">
123
+ <i class="fas fa-robot mr-2"></i> Visit Hugging Face
124
+ </a>
125
+ </div>
126
+ </div>
127
+ <div class="-mr-2 flex md:hidden">
128
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
129
+ <span class="sr-only">Open main menu</span>
130
+ <i class="fas fa-bars"></i>
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="hidden md:hidden" id="mobile-menu">
137
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
138
+ <a href="#home" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
139
+ <a href="#apps" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projekte</a>
140
+ <a href="#about" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Über Mich</a>
141
+ <a href="#contact" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Kontakt</a>
142
+ <a href="https://huggingface.co/AliBrown" target="_blank" class="bg-hf-purple hover:bg-yellow-500 text-hf-dark block px-3 py-2 rounded-md text-base font-medium flex items-center justify-center">
143
+ <i class="fas fa-robot mr-2"></i> Visit Hugging Face
144
+ </a>
145
+ </div>
146
+ </div>
147
+ </nav>
148
+
149
+ <section id="home" class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
150
+ <div class="flex flex-col md:flex-row items-center justify-between">
151
+ <div class="md:w-1/2 mb-10 md:mb-0">
152
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
153
+ <span class="text-hf-purple">Hallo, ich bin</span>
154
+ <span class="text-white">Ali Brown</span>
155
+ </h1>
156
+ <p class="text-lg text-gray-300 mb-8">
157
+ Ich bin ein Full-Stack-Entwickler und IT-Dozent aus Berlin. Ich verwandle Ideen in praktische digitale Lösungen und habe eine Leidenschaft für Open-Source und die Verbindung von Web-Technologie mit KI.
158
+ </p>
159
+ <div class="flex space-x-4">
160
+ <a href="#apps" class="bg-hf-purple hover:bg-yellow-500 text-hf-dark px-6 py-3 rounded-md font-medium">
161
+ Meine Projekte
162
+ </a>
163
+ <a href="#contact" class="border border-hf-purple text-hf-purple hover:bg-hf-purple hover:text-hf-dark px-6 py-3 rounded-md font-medium">
164
+ Kontakt
165
+ </a>
166
+ </div>
167
+ </div>
168
+ <div class="md:w-1/2 flex justify-center">
169
+ <div class="relative w-64 h-64 md:w-80 md:h-80">
170
+ <div class="absolute inset-0 bg-hf-purple/20 rounded-full blur-xl animate-pulse"></div>
171
+ <div class="relative w-full h-full flex items-center justify-center">
172
+ <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo" class="w-full h-full object-contain animate-float">
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <section id="apps" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
180
+ <div class="text-center mb-16">
181
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
182
+ <span class="text-hf-purple">Meine</span>
183
+ <span class="text-white">Projekte</span>
184
+ </h2>
185
+ <p class="text-gray-400 max-w-2xl mx-auto">
186
+ Hier ist eine Auswahl meiner Arbeiten, die von Informationsportalen bis hin zu lokalen Web-Anwendungen reichen.
187
+ </p>
188
+ </div>
189
+
190
+ <div class="relative">
191
+ <button id="prevBtn" class="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-hf-dark/80 hover:bg-hf-accent text-white p-3 rounded-full ml-2">
192
+ <i class="fas fa-chevron-left"></i>
193
+ </button>
194
+ <button id="nextBtn" class="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-hf-dark/80 hover:bg-hf-accent text-white p-3 rounded-full mr-2">
195
+ <i class="fas fa-chevron-right"></i>
196
+ </button>
197
+
198
+ <div class="overflow-hidden">
199
+ <div id="carousel" class="flex transition-transform duration-500 ease-in-out">
200
+ <div class="carousel-item min-w-full md:min-w-1/2 lg:min-w-1/3 px-4">
201
+ <div class="app-card rounded-xl p-6 h-full card-hover">
202
+ <div class="flex items-center mb-4">
203
+ <div class="bg-hf-purple/20 p-3 rounded-lg">
204
+ <i class="fas fa-sitemap text-hf-purple text-2xl"></i>
205
+ </div>
206
+ <h3 class="text-xl font-semibold ml-4">Jugendamt Deutschland</h3>
207
+ </div>
208
+ <p class="text-gray-400 mb-6">
209
+ Ein umfassendes Informationsportal, das deutschlandweit Daten zu Jugendämtern bündelt und für Bürger zugänglich macht.
210
+ </p>
211
+ <div class="flex justify-between items-center">
212
+ <span class="text-sm text-hf-purple">PHP • Daten-Aggregation</span>
213
+ <a href="https://jugendamt-deutschland.de" target="_blank" rel="noopener noreferrer" class="text-hf-purple hover:text-yellow-500 font-medium flex items-center">
214
+ Besuchen <i class="fas fa-external-link-alt ml-2"></i>
215
+ </a>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="carousel-item min-w-full md:min-w-1/2 lg:min-w-1/3 px-4">
221
+ <div class="app-card rounded-xl p-6 h-full card-hover">
222
+ <div class="flex items-center mb-4">
223
+ <div class="bg-hf-purple/20 p-3 rounded-lg">
224
+ <i class="fas fa-pizza-slice text-hf-purple text-2xl"></i>
225
+ </div>
226
+ <h3 class="text-xl font-semibold ml-4">Pizza.Berlin</h3>
227
+ </div>
228
+ <p class="text-gray-400 mb-6">
229
+ Eine lokale Plattform für Pizza-Liebhaber in Berlin. Ein nutzerzentriertes Projekt mit Geo-Funktionen und lokalem Fokus.
230
+ </p>
231
+ <div class="flex justify-between items-center">
232
+ <span class="text-sm text-hf-purple">Full-Stack • Entrepreneurship</span>
233
+ <a href="https://pizza.berlin" target="_blank" rel="noopener noreferrer" class="text-hf-purple hover:text-yellow-500 font-medium flex items-center">
234
+ Besuchen <i class="fas fa-external-link-alt ml-2"></i>
235
+ </a>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="carousel-item min-w-full md:min-w-1/2 lg:min-w-1/3 px-4">
241
+ <div class="app-card rounded-xl p-6 h-full card-hover">
242
+ <div class="flex items-center mb-4">
243
+ <div class="bg-hf-purple/20 p-3 rounded-lg">
244
+ <i class="fab fa-github-alt text-hf-purple text-2xl"></i>
245
+ </div>
246
+ <h3 class="text-xl font-semibold ml-4">Code & Wissens-Hub</h3>
247
+ </div>
248
+ <p class="text-gray-400 mb-6">
249
+ Meine persönliche Webseite und GitHub-Profil, wo ich Projekte teile und Wissen als IT-Dozent vermittle.
250
+ </p>
251
+ <div class="flex justify-between items-center">
252
+ <span class="text-sm text-hf-purple">GitHub • Open Source • Lehre</span>
253
+ <a href="https://github.com/volkansah" target="_blank" rel="noopener noreferrer" class="text-hf-purple hover:text-yellow-500 font-medium flex items-center">
254
+ Besuchen <i class="fas fa-external-link-alt ml-2"></i>
255
+ </a>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="flex justify-center mt-8 space-x-2">
263
+ <button class="carousel-indicator w-3 h-3 rounded-full bg-gray-600 hover:bg-hf-purple" data-index="0"></button>
264
+ <button class="carousel-indicator w-3 h-3 rounded-full bg-gray-600 hover:bg-hf-purple" data-index="1"></button>
265
+ <button class="carousel-indicator w-3 h-3 rounded-full bg-gray-600 hover:bg-hf-purple" data-index="2"></button>
266
+ </div>
267
+ </div>
268
+ </section>
269
+
270
+ <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
271
+ <div class="flex flex-col lg:flex-row items-center">
272
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
273
+ <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-8">
274
+ <h2 class="text-3xl font-bold mb-6">
275
+ <span class="text-hf-purple">Über</span>
276
+ <span class="text-white">Mich</span>
277
+ </h2>
278
+ <p class="text-gray-400 mb-6">
279
+ Als erfahrener Full-Stack-Entwickler und IT-Dozent aus Berlin verbinde ich die Welt der professionellen Webentwicklung mit der Wissensvermittlung. Mein Fokus liegt auf der Konzeption und Umsetzung robuster und benutzerfreundlicher Anwendungen.
280
+ </p>
281
+ <p class="text-gray-400 mb-6">
282
+ Meine Neugier für maschinelles Lernen treibt mich an, meine Web-Expertise mit den Möglichkeiten von Plattformen wie Hugging Face zu erweitern, um intelligente Features in meine Projekte zu integrieren.
283
+ </p>
284
+ <div class="flex flex-wrap gap-4 mb-6">
285
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">JavaScript</span>
286
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">React</span>
287
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">Node.js</span>
288
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">PHP</span>
289
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">Full-Stack</span>
290
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">IT-Dozent</span>
291
+ </div>
292
+ <a href="https://volkansah.github.io/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-hf-purple hover:text-yellow-500 font-medium">
293
+ <i class="fas fa-globe mr-2"></i> Besuche meine Webseite
294
+ </a>
295
+ </div>
296
+ </div>
297
+ <div class="lg:w-1/2 lg:pl-10">
298
+ <div class="grid grid-cols-2 gap-4">
299
+ <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover">
300
+ <div class="text-hf-purple text-4xl mb-4">
301
+ <i class="fas fa-code"></i>
302
+ </div>
303
+ <h3 class="text-xl font-semibold mb-2">Open Source</h3>
304
+ <p class="text-gray-400">
305
+ Aktive Beiträge und eigene Projekte, die auf meinem GitHub-Profil zu finden sind.
306
+ </p>
307
+ </div>
308
+ <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover">
309
+ <div class="text-hf-purple text-4xl mb-4">
310
+ <i class="fas fa-project-diagram"></i>
311
+ </div>
312
+ <h3 class="text-xl font-semibold mb-2">Web-Projekte</h3>
313
+ <p class="text-gray-400">
314
+ Entwicklung diverser Plattformen von der Idee bis zum Launch, z.B. pizza.berlin.
315
+ </p>
316
+ </div>
317
+ <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover">
318
+ <div class="text-hf-purple text-4xl mb-4">
319
+ <i class="fas fa-chalkboard-teacher"></i>
320
+ </div>
321
+ <h3 class="text-xl font-semibold mb-2">IT-Dozent</h3>
322
+ <p class="text-gray-400">
323
+ Praxisnahe Vermittlung von Web-Technologien und Programmierkonzepten.
324
+ </p>
325
+ </div>
326
+ <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover">
327
+ <div class="text-hf-purple text-4xl mb-4">
328
+ <i class="fas fa-rocket"></i>
329
+ </div>
330
+ <h3 class="text-xl font-semibold mb-2">Digitaler Gründer</h3>
331
+ <p class="text-gray-400">
332
+ Gründung und Betrieb eigener, nützlicher Web-Anwendungen und Portale.
333
+ </p>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </section>
339
+
340
+ <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
341
+ <div class="text-center mb-16">
342
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
343
+ <span class="text-hf-purple">Schreib</span>
344
+ <span class="text-white">mir</span>
345
+ </h2>
346
+ <p class="text-gray-400 max-w-2xl mx-auto">
347
+ Du hast ein Projekt im Kopf oder möchtest zusammenarbeiten? Ich freue mich auf deine Nachricht!
348
+ </p>
349
+ </div>
350
+
351
+ <div class="flex flex-col lg:flex-row gap-10">
352
+ <div class="lg:w-1/2">
353
+ <form action="#" method="POST" class="bg-hf-dark/50 border border-gray-800 rounded-xl p-8">
354
+ <div class="mb-6">
355
+ <label for="name" class="block text-gray-300 mb-2">Dein Name</label>
356
+ <input type="text" id="name" name="name" class="w-full bg-hf-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-hf-purple">
357
+ </div>
358
+ <div class="mb-6">
359
+ <label for="email" class="block text-gray-300 mb-2">E-Mail Adresse</label>
360
+ <input type="email" id="email" name="email" class="w-full bg-hf-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-hf-purple">
361
+ </div>
362
+ <div class="mb-6">
363
+ <label for="subject" class="block text-gray-300 mb-2">Betreff</label>
364
+ <input type="text" id="subject" name="subject" class="w-full bg-hf-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-hf-purple">
365
+ </div>
366
+ <div class="mb-6">
367
+ <label for="message" class="block text-gray-300 mb-2">Nachricht</label>
368
+ <textarea id="message" name="message" rows="5" class="w-full bg-hf-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-hf-purple"></textarea>
369
+ </div>
370
+ <button type="submit" class="w-full bg-hf-purple hover:bg-yellow-500 text-hf-dark font-medium py-3 px-6 rounded-lg transition duration-300">
371
+ Nachricht Senden
372
+ </button>
373
+ </form>
374
+ </div>
375
+
376
+ <div class="lg:w-1/2">
377
+ <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-8 h-full">
378
+ <h3 class="text-2xl font-semibold mb-6">Kontaktinformationen</h3>
379
+
380
+ <div class="space-y-6">
381
+ <div class="flex items-start">
382
+ <div class="text-hf-purple text-xl mr-4 mt-1">
383
+ <i class="fas fa-envelope"></i>
384
+ </div>
385
+ <div>
386
+ <h4 class="text-gray-300 font-medium mb-1">Email</h4>
387
+ <a href="mailto:[email protected]" class="text-gray-400 hover:text-hf-purple">[email protected]</a>
388
+ </div>
389
+ </div>
390
+
391
+ <div class="flex items-start">
392
+ <div class="text-hf-purple text-xl mr-4 mt-1">
393
+ <i class="fas fa-robot"></i>
394
+ </div>
395
+ <div>
396
+ <h4 class="text-gray-300 font-medium mb-1">Hugging Face Profil</h4>
397
+ <a href="https://huggingface.co/AliBrown" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-hf-purple">huggingface.co/AliBrown</a>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="flex items-start">
402
+ <div class="text-hf-purple text-xl mr-4 mt-1">
403
+ <i class="fas fa-map-marker-alt"></i>
404
+ </div>
405
+ <div>
406
+ <h4 class="text-gray-300 font-medium mb-1">Standort</h4>
407
+ <p class="text-gray-400">Berlin, Deutschland</p>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="mt-10">
413
+ <h4 class="text-gray-300 font-medium mb-4">Folge mir</h4>
414
+ <div class="flex space-x-6">
415
+ <a href="https://github.com/volkansah" target="_blank" rel="noopener noreferrer" class="social-icon text-gray-400 hover:text-hf-purple text-2xl">
416
+ <i class="fab fa-github"></i>
417
+ </a>
418
+ <a href="https://volkansah.github.io/" target="_blank" rel="noopener noreferrer" class="social-icon text-gray-400 hover:text-hf-purple text-2xl">
419
+ <i class="fas fa-globe"></i>
420
+ </a>
421
+ <a href="https://huggingface.co/AliBrown" target="_blank" rel="noopener noreferrer" class="social-icon text-gray-400 hover:text-hf-purple text-2xl">
422
+ <i class="fas fa-robot"></i>
423
+ </a>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ <footer class="bg-hf-dark/50 border-t border-gray-800 py-10">
432
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
433
+ <div class="flex flex-col md:flex-row justify-between items-center">
434
+ <div class="mb-6 md:mb-0">
435
+ <span class="text-hf-purple font-bold text-xl">Ali Brown Portfolio</span>
436
+ <p class="text-gray-400 mt-2">Die Zukunft mit Code gestalten</p>
437
+ </div>
438
+ <div class="flex flex-wrap justify-center gap-6">
439
+ <a href="#home" class="text-gray-400 hover:text-hf-purple">Home</a>
440
+ <a href="#apps" class="text-gray-400 hover:text-hf-purple">Projekte</a>
441
+ <a href="#about" class="text-gray-400 hover:text-hf-purple">Über Mich</a>
442
+ <a href="#contact" class="text-gray-400 hover:text-hf-purple">Kontakt</a>
443
+ </div>
444
+ </div>
445
+ <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
446
+ <p>&copy; 2025 Ali Brown Portfolio. Alle Rechte vorbehalten.</p>
447
+ </div>
448
+ </div>
449
+ </footer>
450
+
451
+ <script>
452
+ // Mobile menu toggle
453
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
454
+ const mobileMenu = document.getElementById('mobile-menu');
455
+
456
+ mobileMenuButton.addEventListener('click', () => {
457
+ mobileMenu.classList.toggle('hidden');
458
+ });
459
+
460
+ // Smooth scrolling for navigation links
461
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
462
+ anchor.addEventListener('click', function (e) {
463
+ e.preventDefault();
464
+ const targetId = this.getAttribute('href');
465
+ const targetElement = document.querySelector(targetId);
466
+
467
+ if (targetElement) {
468
+ window.scrollTo({
469
+ top: targetElement.offsetTop - 64, // Adjusted for fixed nav height
470
+ behavior: 'smooth'
471
+ });
472
+
473
+ // Close mobile menu if open
474
+ if (!mobileMenu.classList.contains('hidden')) {
475
+ mobileMenu.classList.add('hidden');
476
+ }
477
+ }
478
+ });
479
+ });
480
+
481
+ // Carousel functionality
482
+ const carousel = document.getElementById('carousel');
483
+ const prevBtn = document.getElementById('prevBtn');
484
+ const nextBtn = document.getElementById('nextBtn');
485
+ const indicators = document.querySelectorAll('.carousel-indicator');
486
+
487
+ let currentIndex = 0;
488
+ const items = document.querySelectorAll('.carousel-item');
489
+ const itemCount = items.length;
490
+
491
+ function updateCarousel() {
492
+ // Calculate how many items are visible
493
+ let visibleItems = 1;
494
+ if (window.innerWidth >= 1024) { // lg
495
+ visibleItems = 3;
496
+ } else if (window.innerWidth >= 768) { // md
497
+ visibleItems = 2;
498
+ }
499
+
500
+ const maxIndex = Math.max(0, itemCount - visibleItems);
501
+ if (currentIndex > maxIndex) {
502
+ currentIndex = maxIndex;
503
+ }
504
+ if (currentIndex < 0) {
505
+ currentIndex = 0;
506
+ }
507
+
508
+ const itemWidth = items[0].offsetWidth + parseInt(getComputedStyle(items[0]).marginRight) * 2;
509
+ const offset = -currentIndex * itemWidth;
510
+ carousel.style.transform = `translateX(${offset}px)`;
511
+
512
+ // Update active indicator
513
+ indicators.forEach((indicator, index) => {
514
+ if (index >= maxIndex+1) {
515
+ indicator.style.display = 'none';
516
+ } else {
517
+ indicator.style.display = 'inline-block';
518
+ }
519
+ if (index === currentIndex) {
520
+ indicator.classList.add('bg-hf-purple');
521
+ indicator.classList.remove('bg-gray-600');
522
+ } else {
523
+ indicator.classList.remove('bg-hf-purple');
524
+ indicator.classList.add('bg-gray-600');
525
+ }
526
+ });
527
+
528
+ prevBtn.disabled = currentIndex === 0;
529
+ nextBtn.disabled = currentIndex === maxIndex;
530
+ prevBtn.style.opacity = currentIndex === 0 ? '0.5' : '1';
531
+ nextBtn.style.opacity = currentIndex === maxIndex ? '0.5' : '1';
532
+ }
533
+
534
+ prevBtn.addEventListener('click', () => {
535
+ currentIndex--;
536
+ updateCarousel();
537
+ });
538
+
539
+ nextBtn.addEventListener('click', () => {
540
+ currentIndex++;
541
+ updateCarousel();
542
+ });
543
+
544
+ indicators.forEach(indicator => {
545
+ indicator.addEventListener('click', () => {
546
+ currentIndex = parseInt(indicator.dataset.index);
547
+ updateCarousel();
548
+ });
549
+ });
550
+
551
+ window.addEventListener('resize', updateCarousel);
552
+ document.addEventListener('DOMContentLoaded', updateCarousel);
553
+
554
+ </script>
555
+ </body>
556
+ </html>