Hugging Face's logo

Spaces:
Alibrown
/
Portfolio
Running

App Files Community
Alibrown commited on
Commit
5384409
·
verified ·
1 Parent(s): cfb0ea2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +167 -194
index.html CHANGED
@@ -1,5 +1,5 @@
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">
@@ -61,10 +61,6 @@
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
  }
@@ -111,9 +107,9 @@
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>
@@ -136,9 +132,9 @@
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>
@@ -150,18 +146,18 @@
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>
@@ -176,94 +172,88 @@
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
 
@@ -272,25 +262,25 @@
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>
@@ -302,34 +292,34 @@
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>
@@ -340,11 +330,11 @@
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
 
@@ -352,30 +342,30 @@
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">
@@ -384,7 +374,7 @@
384
  </div>
385
  <div>
386
  <h4 class="text-gray-300 font-medium mb-1">Email</h4>
387
- <a href="mailto:kontakt@ali-brown.dev" class="text-gray-400 hover:text-hf-purple">kontakt@ali-brown.dev</a>
388
  </div>
389
  </div>
390
 
@@ -393,7 +383,7 @@
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>
@@ -403,14 +393,14 @@
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>
@@ -433,124 +423,107 @@
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>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
61
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
62
  }
63
 
 
 
 
 
64
  .social-icon {
65
  transition: all 0.3s ease;
66
  }
 
107
  <div class="hidden md:block">
108
  <div class="ml-10 flex items-baseline space-x-4">
109
  <a href="#home" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
110
+ <a href="#projects" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
111
+ <a href="#about" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
112
+ <a href="#contact" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
113
  </div>
114
  </div>
115
  </div>
 
132
  <div class="hidden md:hidden" id="mobile-menu">
133
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
134
  <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>
135
+ <a href="#projects" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
136
+ <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">About</a>
137
+ <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">Contact</a>
138
  <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">
139
  <i class="fas fa-robot mr-2"></i> Visit Hugging Face
140
  </a>
 
146
  <div class="flex flex-col md:flex-row items-center justify-between">
147
  <div class="md:w-1/2 mb-10 md:mb-0">
148
  <h1 class="text-4xl md:text-6xl font-bold mb-6">
149
+ <span class="text-hf-purple">Hello, I'm Ali Brown</span>
150
+ <span class="text-white block mt-2">Full-Stack Developer & Security Nerd</span>
151
  </h1>
152
  <p class="text-lg text-gray-300 mb-8">
153
+ A developer and security enthusiast based in Berlin. I love building solid web applications, hardening servers, and bringing ideas to life with a touch of AI.
154
  </p>
155
  <div class="flex space-x-4">
156
+ <a href="#projects" class="bg-hf-purple hover:bg-yellow-500 text-hf-dark px-6 py-3 rounded-md font-medium">
157
+ Explore My Projects
158
  </a>
159
  <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">
160
+ Contact Me
161
  </a>
162
  </div>
163
  </div>
 
172
  </div>
173
  </section>
174
 
175
+ <section id="projects" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
176
  <div class="text-center mb-16">
177
  <h2 class="text-3xl md:text-4xl font-bold mb-4">
178
+ <span class="text-hf-purple">My</span>
179
+ <span class="text-white">Projects</span>
180
  </h2>
181
  <p class="text-gray-400 max-w-2xl mx-auto">
182
+ Here's a selection of my work, from AI-powered tools to secure server architectures.
183
  </p>
184
  </div>
185
 
186
  <div class="relative">
 
 
 
 
 
 
 
187
  <div class="overflow-hidden">
188
+ <div id="carousel" class="flex transition-transform duration-500 ease-in-out -ml-4">
189
+ <div class="carousel-item w-full md:w-1/2 lg:w-1/3 p-4 flex-shrink-0">
190
+ <div class="app-card rounded-xl p-6 h-full card-hover flex flex-col">
191
  <div class="flex items-center mb-4">
192
  <div class="bg-hf-purple/20 p-3 rounded-lg">
193
+ <i class="fas fa-brain text-hf-purple text-2xl"></i>
194
  </div>
195
+ <h3 class="text-xl font-semibold ml-4">AI-Powered Portal</h3>
196
  </div>
197
+ <p class="text-gray-400 mb-6 flex-grow">
198
+ An informational portal for Germany's youth services, enhanced with an AI component to make complex data easily accessible.
199
  </p>
200
+ <div class="flex justify-between items-center mt-auto">
201
+ <span class="text-sm text-hf-purple">AI • Full-Stack • Data</span>
202
  <a href="https://jugendamt-deutschland.de" target="_blank" rel="noopener noreferrer" class="text-hf-purple hover:text-yellow-500 font-medium flex items-center">
203
+ Visit <i class="fas fa-external-link-alt ml-2"></i>
204
  </a>
205
  </div>
206
  </div>
207
  </div>
208
 
209
+ <div class="carousel-item w-full md:w-1/2 lg:w-1/3 p-4 flex-shrink-0">
210
+ <div class="app-card rounded-xl p-6 h-full card-hover flex flex-col">
211
  <div class="flex items-center mb-4">
212
  <div class="bg-hf-purple/20 p-3 rounded-lg">
213
+ <i class="fas fa-shield-halved text-hf-purple text-2xl"></i>
214
  </div>
215
+ <h3 class="text-xl font-semibold ml-4">Secure Architectures</h3>
216
  </div>
217
+ <p class="text-gray-400 mb-6 flex-grow">
218
+ My passion project: experimenting with and hardening server configurations to build secure and resilient infrastructure from the ground up.
219
  </p>
220
+ <div class="flex justify-between items-center mt-auto">
221
+ <span class="text-sm text-hf-purple">Security • Servers • DevOps</span>
222
+ <a href="https://github.com/volkansah" target="_blank" rel="noopener noreferrer" class="text-hf-purple hover:text-yellow-500 font-medium flex items-center">
223
+ Explore <i class="fas fa-external-link-alt ml-2"></i>
224
  </a>
225
  </div>
226
  </div>
227
  </div>
228
 
229
+ <div class="carousel-item w-full md:w-1/2 lg:w-1/3 p-4 flex-shrink-0">
230
+ <div class="app-card rounded-xl p-6 h-full card-hover flex flex-col">
231
  <div class="flex items-center mb-4">
232
  <div class="bg-hf-purple/20 p-3 rounded-lg">
233
+ <i class="fas fa-globe-europe text-hf-purple text-2xl"></i>
234
  </div>
235
+ <h3 class="text-xl font-semibold ml-4">Custom Web Solutions</h3>
236
  </div>
237
+ <p class="text-gray-400 mb-6 flex-grow">
238
+ Various websites I've built for fun and for clients, focusing on clean code, performance, and great user experience.
239
  </p>
240
+ <div class="flex justify-between items-center mt-auto">
241
+ <span class="text-sm text-hf-purple">Web Dev • UI/UX</span>
242
+ <a href="https://volkansah.github.io/" target="_blank" rel="noopener noreferrer" class="text-hf-purple hover:text-yellow-500 font-medium flex items-center">
243
+ See More <i class="fas fa-external-link-alt ml-2"></i>
244
  </a>
245
  </div>
246
  </div>
247
  </div>
248
  </div>
249
  </div>
250
+
251
+ <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 hidden sm:block">
252
+ <i class="fas fa-chevron-left"></i>
253
+ </button>
254
+ <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 hidden sm:block">
255
+ <i class="fas fa-chevron-right"></i>
256
+ </button>
257
  </div>
258
  </section>
259
 
 
262
  <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
263
  <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-8">
264
  <h2 class="text-3xl font-bold mb-6">
265
+ <span class="text-hf-purple">About</span>
266
+ <span class="text-white">Me</span>
267
  </h2>
268
  <p class="text-gray-400 mb-6">
269
+ As a developer with a deep interest in cybersecurity, I focus on building applications that are not just functional, but also secure and robust. My journey began with web development and quickly grew into a passion for securing the entire stack.
270
  </p>
271
  <p class="text-gray-400 mb-6">
272
+ I'm driven by curiosity, whether it's exploring new ways to harden a Linux server or integrating AI models from Hugging Face into my work to solve real-world problems.
273
  </p>
274
  <div class="flex flex-wrap gap-4 mb-6">
275
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">Full-Stack Dev</span>
276
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">Cybersecurity</span>
277
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">Server Hardening</span>
278
  <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">JavaScript</span>
279
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">Linux</span>
280
+ <span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">AI Integration</span>
 
 
 
281
  </div>
282
+ <a href="https://github.com/volkansah" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-hf-purple hover:text-yellow-500 font-medium">
283
+ <i class="fab fa-github mr-2"></i> Visit my GitHub
284
  </a>
285
  </div>
286
  </div>
 
292
  </div>
293
  <h3 class="text-xl font-semibold mb-2">Open Source</h3>
294
  <p class="text-gray-400">
295
+ I actively contribute to and maintain projects on my GitHub profile.
296
  </p>
297
  </div>
298
  <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover">
299
  <div class="text-hf-purple text-4xl mb-4">
300
+ <i class="fas fa-server"></i>
301
  </div>
302
+ <h3 class="text-xl font-semibold mb-2">Infrastructure</h3>
303
  <p class="text-gray-400">
304
+ Hands-on experience with server setup, maintenance, and security protocols.
305
  </p>
306
  </div>
307
  <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover">
308
  <div class="text-hf-purple text-4xl mb-4">
309
+ <i class="fas fa-user-secret"></i>
310
  </div>
311
+ <h3 class="text-xl font-semibold mb-2">Security Nerd</h3>
312
  <p class="text-gray-400">
313
+ Passionate about hardening systems and building secure digital environments.
314
  </p>
315
  </div>
316
  <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover">
317
  <div class="text-hf-purple text-4xl mb-4">
318
  <i class="fas fa-rocket"></i>
319
  </div>
320
+ <h3 class="text-xl font-semibold mb-2">Web Platforms</h3>
321
  <p class="text-gray-400">
322
+ Built and launched several web projects, including an AI-powered portal.
323
  </p>
324
  </div>
325
  </div>
 
330
  <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
331
  <div class="text-center mb-16">
332
  <h2 class="text-3xl md:text-4xl font-bold mb-4">
333
+ <span class="text-hf-purple">Get</span>
334
+ <span class="text-white">In Touch</span>
335
  </h2>
336
  <p class="text-gray-400 max-w-2xl mx-auto">
337
+ Have a project in mind or want to collaborate? Feel free to reach out!
338
  </p>
339
  </div>
340
 
 
342
  <div class="lg:w-1/2">
343
  <form action="#" method="POST" class="bg-hf-dark/50 border border-gray-800 rounded-xl p-8">
344
  <div class="mb-6">
345
+ <label for="name" class="block text-gray-300 mb-2">Your Name</label>
346
  <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">
347
  </div>
348
  <div class="mb-6">
349
+ <label for="email" class="block text-gray-300 mb-2">Email Address</label>
350
  <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">
351
  </div>
352
  <div class="mb-6">
353
+ <label for="subject" class="block text-gray-300 mb-2">Subject</label>
354
  <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">
355
  </div>
356
  <div class="mb-6">
357
+ <label for="message" class="block text-gray-300 mb-2">Message</label>
358
  <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>
359
  </div>
360
  <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">
361
+ Send Message
362
  </button>
363
  </form>
364
  </div>
365
 
366
  <div class="lg:w-1/2">
367
  <div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-8 h-full">
368
+ <h3 class="text-2xl font-semibold mb-6">Contact Information</h3>
369
 
370
  <div class="space-y-6">
371
  <div class="flex items-start">
 
374
  </div>
375
  <div>
376
  <h4 class="text-gray-300 font-medium mb-1">Email</h4>
377
+ <a href="mailto:contact@ali-brown.dev" class="text-gray-400 hover:text-hf-purple">contact@ali-brown.dev</a>
378
  </div>
379
  </div>
380
 
 
383
  <i class="fas fa-robot"></i>
384
  </div>
385
  <div>
386
+ <h4 class="text-gray-300 font-medium mb-1">Hugging Face Profile</h4>
387
  <a href="https://huggingface.co/AliBrown" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-hf-purple">huggingface.co/AliBrown</a>
388
  </div>
389
  </div>
 
393
  <i class="fas fa-map-marker-alt"></i>
394
  </div>
395
  <div>
396
+ <h4 class="text-gray-300 font-medium mb-1">Location</h4>
397
+ <p class="text-gray-400">Berlin, Germany</p>
398
  </div>
399
  </div>
400
  </div>
401
 
402
  <div class="mt-10">
403
+ <h4 class="text-gray-300 font-medium mb-4">Follow Me</h4>
404
  <div class="flex space-x-6">
405
  <a href="https://github.com/volkansah" target="_blank" rel="noopener noreferrer" class="social-icon text-gray-400 hover:text-hf-purple text-2xl">
406
  <i class="fab fa-github"></i>
 
423
  <div class="flex flex-col md:flex-row justify-between items-center">
424
  <div class="mb-6 md:mb-0">
425
  <span class="text-hf-purple font-bold text-xl">Ali Brown Portfolio</span>
426
+ <p class="text-gray-400 mt-2">Building the future, securely.</p>
427
  </div>
428
  <div class="flex flex-wrap justify-center gap-6">
429
  <a href="#home" class="text-gray-400 hover:text-hf-purple">Home</a>
430
+ <a href="#projects" class="text-gray-400 hover:text-hf-purple">Projects</a>
431
+ <a href="#about" class="text-gray-400 hover:text-hf-purple">About</a>
432
+ <a href="#contact" class="text-gray-400 hover:text-hf-purple">Contact</a>
433
  </div>
434
  </div>
435
  <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
436
+ <p>&copy; 2025 Ali Brown Portfolio. All rights reserved.</p>
437
  </div>
438
  </div>
439
  </footer>
440
 
441
  <script>
442
+ document.addEventListener('DOMContentLoaded', function () {
443
+ // Mobile menu toggle
444
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
445
+ const mobileMenu = document.getElementById('mobile-menu');
446
+ if (mobileMenuButton) {
447
+ mobileMenuButton.addEventListener('click', () => {
448
+ mobileMenu.classList.toggle('hidden');
449
+ });
450
+ }
451
+
452
+ // Smooth scrolling for navigation links
453
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
454
+ anchor.addEventListener('click', function (e) {
455
+ e.preventDefault();
456
+ const targetId = this.getAttribute('href');
457
+ const targetElement = document.querySelector(targetId);
 
 
 
 
458
 
459
+ if (targetElement) {
460
+ window.scrollTo({
461
+ top: targetElement.offsetTop - 64, // Adjust for fixed nav height
462
+ behavior: 'smooth'
463
+ });
464
+
465
+ if (!mobileMenu.classList.contains('hidden')) {
466
+ mobileMenu.classList.add('hidden');
467
+ }
468
  }
469
+ });
470
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
471
 
472
+ // Carousel functionality
473
+ const carousel = document.getElementById('carousel');
474
+ const prevBtn = document.getElementById('prevBtn');
475
+ const nextBtn = document.getElementById('nextBtn');
476
 
477
+ if (carousel) {
478
+ const items = carousel.querySelectorAll('.carousel-item');
479
+ const itemCount = items.length;
480
+ let currentIndex = 0;
481
+
482
+ function getVisibleItems() {
483
+ if (window.innerWidth >= 1024) return 3; // lg
484
+ if (window.innerWidth >= 768) return 2; // md
485
+ return 1; // sm
 
 
 
 
486
  }
 
487
 
488
+ function updateCarousel() {
489
+ const itemWidth = items[0].getBoundingClientRect().width;
490
+ const containerGap = parseInt(getComputedStyle(items[0]).paddingRight) * 2;
491
+ const totalWidth = itemWidth + containerGap;
492
+
493
+ carousel.style.transform = `translateX(-${currentIndex * totalWidth}px)`;
494
 
495
+ // Button visibility
496
+ const visibleItems = getVisibleItems();
497
+ prevBtn.disabled = currentIndex === 0;
498
+ nextBtn.disabled = currentIndex >= itemCount - visibleItems;
499
 
500
+ prevBtn.style.opacity = prevBtn.disabled ? '0.4' : '1';
501
+ nextBtn.style.opacity = nextBtn.disabled ? '0.4' : '1';
502
+ }
 
503
 
504
+ prevBtn.addEventListener('click', () => {
505
+ if (currentIndex > 0) {
506
+ currentIndex--;
507
+ updateCarousel();
508
+ }
509
+ });
 
 
 
510
 
511
+ nextBtn.addEventListener('click', () => {
512
+ if (currentIndex < itemCount - getVisibleItems()) {
513
+ currentIndex++;
514
+ updateCarousel();
515
+ }
516
+ });
517
+
518
+ window.addEventListener('resize', () => {
519
+ // Reset to avoid issues on resize
520
+ currentIndex = 0;
521
+ updateCarousel();
522
+ });
523
+
524
+ updateCarousel(); // Initial call
525
+ }
526
+ });
527
  </script>
528
  </body>
529
  </html>