Hugging Face's logo

Spaces:
adamqab
/
https-huggingface-co-spaces-adamqab-myweb
Running

App Files Community
adamqab commited on
Commit
14fa77b
·
verified ·
1 Parent(s): 8b5ccab

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +72 -51
index.html CHANGED
@@ -3,7 +3,9 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
6
  <title>Adham Qab | Tech Innovator</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
  <style>
@@ -145,10 +147,18 @@
145
  border-color: var(--primary-gold);
146
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
147
  }
 
 
 
 
 
 
 
 
 
148
  </style>
149
  </head>
150
  <body>
151
- <!-- Hero Section -->
152
  <section class="hero-section relative flex items-center justify-center text-center overflow-hidden">
153
  <div class="absolute inset-0 bg-black opacity-40"></div>
154
  <div class="relative z-10 px-6 max-w-4xl">
@@ -162,22 +172,21 @@
162
  "Shaping the future with AI and emerging technologies"
163
  </p>
164
  <div class="flex justify-center space-x-6">
165
- <a href="https://www.instagram.com/adhamqab" target="_blank" class="w-12 h-12 rounded-full bg-black bg-opacity-50 flex items-center justify-center text-white hover:bg-opacity-70 hover:text-red-500 transition-all duration-300">
166
  <i class="fab fa-instagram text-2xl"></i>
167
  </a>
168
- <a href="https://www.linkedin.com/in/adam-qab-620856187/" target="_blank" class="w-12 h-12 rounded-full bg-black bg-opacity-50 flex items-center justify-center text-white hover:bg-opacity-70 hover:text-blue-400 transition-all duration-300">
169
  <i class="fab fa-linkedin-in text-2xl"></i>
170
  </a>
171
  </div>
172
  </div>
173
  <div class="scroll-indicator">
174
- <a href="#about" class="text-white text-4xl">
175
  <i class="fas fa-chevron-down"></i>
176
  </a>
177
  </div>
178
  </section>
179
 
180
- <!-- Navigation -->
181
  <nav class="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg py-4 px-6 shadow-lg">
182
  <div class="max-w-6xl mx-auto flex justify-between items-center">
183
  <a href="#" class="text-2xl font-bold tech-font">
@@ -189,13 +198,18 @@
189
  <a href="#achievements" class="nav-link text-white hover:text-gold-500">Achievements</a>
190
  <a href="#contact" class="nav-link text-white hover:text-gold-500">Contact</a>
191
  </div>
192
- <button class="md:hidden text-white text-2xl">
193
  <i class="fas fa-bars"></i>
194
  </button>
195
  </div>
 
 
 
 
 
 
196
  </nav>
197
 
198
- <!-- About Section -->
199
  <section id="about" class="py-20 bg-space-blue">
200
  <div class="max-w-6xl mx-auto px-6">
201
  <h2 class="text-4xl font-bold mb-16 tech-font text-center">
@@ -254,7 +268,6 @@
254
 
255
  <div class="section-divider"></div>
256
 
257
- <!-- Projects Section -->
258
  <section id="projects" class="py-20 bg-black">
259
  <div class="max-w-6xl mx-auto px-6">
260
  <h2 class="text-4xl font-bold mb-16 tech-font text-center">
@@ -262,7 +275,6 @@
262
  </h2>
263
 
264
  <div class="grid md:grid-cols-2 gap-8">
265
- <!-- Project 1 -->
266
  <div class="project-card rounded-xl p-8 relative overflow-hidden">
267
  <div class="absolute -right-10 -top-10 w-32 h-32 bg-red-500 rounded-full opacity-10"></div>
268
  <div class="absolute -left-10 -bottom-10 w-32 h-32 bg-gold-500 rounded-full opacity-10"></div>
@@ -290,7 +302,6 @@
290
  </a>
291
  </div>
292
 
293
- <!-- Project 2 -->
294
  <div class="project-card rounded-xl p-8 relative overflow-hidden">
295
  <div class="absolute -right-10 -top-10 w-32 h-32 bg-gold-500 rounded-full opacity-10"></div>
296
  <div class="absolute -left-10 -bottom-10 w-32 h-32 bg-red-500 rounded-full opacity-10"></div>
@@ -329,7 +340,6 @@
329
 
330
  <div class="section-divider"></div>
331
 
332
- <!-- Achievements Section -->
333
  <section id="achievements" class="py-20 bg-space-blue">
334
  <div class="max-w-6xl mx-auto px-6">
335
  <h2 class="text-4xl font-bold mb-16 tech-font text-center">
@@ -337,8 +347,7 @@
337
  </h2>
338
 
339
  <div class="grid md:grid-cols-3 gap-8">
340
- <!-- Achievement 1 -->
341
- <div class="bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800 hover:border-gold-500 transition">
342
  <div class="w-16 h-16 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
343
  <i class="fas fa-trophy text-2xl gold-accent"></i>
344
  </div>
@@ -348,8 +357,7 @@
348
  </p>
349
  </div>
350
 
351
- <!-- Achievement 2 -->
352
- <div class="bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800 hover:border-gold-500 transition">
353
  <div class="w-16 h-16 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
354
  <i class="fas fa-certificate text-2xl gold-accent"></i>
355
  </div>
@@ -359,8 +367,7 @@
359
  </p>
360
  </div>
361
 
362
- <!-- Achievement 3 -->
363
- <div class="bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800 hover:border-gold-500 transition">
364
  <div class="w-16 h-16 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
365
  <i class="fas fa-microphone text-2xl gold-accent"></i>
366
  </div>
@@ -371,7 +378,6 @@
371
  </div>
372
  </div>
373
 
374
- <!-- Future Blog Section -->
375
  <div class="mt-20 bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800">
376
  <h3 class="text-2xl font-bold mb-6 tech-font text-center">
377
  <span class="gold-accent">//</span> FUTURE <span class="red-accent">BLOG</span>
@@ -390,7 +396,6 @@
390
 
391
  <div class="section-divider"></div>
392
 
393
- <!-- Contact Section -->
394
  <section id="contact" class="py-20 bg-black">
395
  <div class="max-w-6xl mx-auto px-6">
396
  <h2 class="text-4xl font-bold mb-16 tech-font text-center">
@@ -431,16 +436,16 @@
431
  <div class="mt-8">
432
  <h4 class="font-bold mb-4">Follow Me</h4>
433
  <div class="flex space-x-4">
434
- <a href="https://www.instagram.com/adhamqab" target="_blank" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-red-500 transition">
435
  <i class="fab fa-instagram"></i>
436
  </a>
437
- <a href="https://www.linkedin.com/in/adam-qab-620856187/" target="_blank" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-blue-600 transition">
438
  <i class="fab fa-linkedin-in"></i>
439
  </a>
440
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-blue-400 transition">
441
  <i class="fab fa-twitter"></i>
442
  </a>
443
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-gray-600 transition">
444
  <i class="fab fa-github"></i>
445
  </a>
446
  </div>
@@ -451,22 +456,22 @@
451
  <form class="space-y-6">
452
  <div>
453
  <label for="name" class="block mb-2 text-sm font-medium">Your Name</label>
454
- <input type="text" id="name" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500">
455
  </div>
456
 
457
  <div>
458
  <label for="email" class="block mb-2 text-sm font-medium">Your Email</label>
459
- <input type="email" id="email" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500">
460
  </div>
461
 
462
  <div>
463
  <label for="subject" class="block mb-2 text-sm font-medium">Subject</label>
464
- <input type="text" id="subject" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500">
465
  </div>
466
 
467
  <div>
468
  <label for="message" class="block mb-2 text-sm font-medium">Message</label>
469
- <textarea id="message" rows="5" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500"></textarea>
470
  </div>
471
 
472
  <button type="submit" class="w-full py-3 bg-red-500 hover:bg-red-600 text-white font-bold rounded-lg transition flex items-center justify-center">
@@ -478,7 +483,6 @@
478
  </div>
479
  </section>
480
 
481
- <!-- Footer -->
482
  <footer class="bg-black border-t border-gray-800 py-8">
483
  <div class="max-w-6xl mx-auto px-6 text-center">
484
  <div class="flex justify-center mb-6">
@@ -487,19 +491,19 @@
487
  </a>
488
  </div>
489
  <p class="text-gray-500 mb-6">
490
- © 2023 Adham Qab. All rights reserved.
491
  </p>
492
  <div class="flex justify-center space-x-6">
493
- <a href="https://www.instagram.com/adhamqab" target="_blank" class="text-gray-500 hover:text-red-500 transition">
494
  <i class="fab fa-instagram"></i>
495
  </a>
496
- <a href="https://www.linkedin.com/in/adam-qab-620856187/" target="_blank" class="text-gray-500 hover:text-blue-400 transition">
497
  <i class="fab fa-linkedin-in"></i>
498
  </a>
499
- <a href="#" class="text-gray-500 hover:text-blue-400 transition">
500
  <i class="fab fa-twitter"></i>
501
  </a>
502
- <a href="#" class="text-gray-500 hover:text-white transition">
503
  <i class="fab fa-github"></i>
504
  </a>
505
  </div>
@@ -511,29 +515,37 @@
511
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
512
  anchor.addEventListener('click', function (e) {
513
  e.preventDefault();
 
 
 
 
 
 
514
 
515
- document.querySelector(this.getAttribute('href')).scrollIntoView({
516
- behavior: 'smooth'
517
- });
518
-
519
- // Close mobile menu if open
520
- document.querySelector('.mobile-menu').classList.remove('block');
521
- document.querySelector('.mobile-menu').classList.add('hidden');
522
  });
523
  });
524
 
525
  // Mobile menu toggle
526
- document.querySelector('.mobile-menu-button').addEventListener('click', function() {
527
- const menu = document.querySelector('.mobile-menu');
528
- menu.classList.toggle('hidden');
529
- menu.classList.toggle('block');
530
- });
 
 
 
531
 
532
  // Animate elements when they come into view
533
  const observer = new IntersectionObserver((entries) => {
534
  entries.forEach(entry => {
535
  if (entry.isIntersecting) {
536
  entry.target.classList.add('animate-fadeIn');
 
537
  }
538
  });
539
  }, { threshold: 0.1 });
@@ -542,11 +554,20 @@
542
  observer.observe(card);
543
  });
544
 
545
- // Typewriter effect
546
- const typewriter = document.querySelector('.typewriter');
547
- setTimeout(() => {
548
- typewriter.style.borderRight = 'none';
549
- }, 3500);
 
 
 
 
 
 
 
 
550
  </script>
551
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=adamqab/https-huggingface-co-spaces-adamqab-myweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
552
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Portfolio of Adham Qab, Tech Innovator and AI Enthusiast.">
7
  <title>Adham Qab | Tech Innovator</title>
8
+ <link rel="icon" href="favicon.ico">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
  <style>
 
147
  border-color: var(--primary-gold);
148
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
149
  }
150
+ /* Basic animation for elements coming into view */
151
+ .animate-fadeIn {
152
+ animation: fadeIn 1s ease-out;
153
+ }
154
+ @keyframes fadeIn {
155
+ from { opacity: 0; transform: translateY(20px); }
156
+ to { opacity: 1; transform: translateY(0); }
157
+ }
158
+
159
  </style>
160
  </head>
161
  <body>
 
162
  <section class="hero-section relative flex items-center justify-center text-center overflow-hidden">
163
  <div class="absolute inset-0 bg-black opacity-40"></div>
164
  <div class="relative z-10 px-6 max-w-4xl">
 
172
  "Shaping the future with AI and emerging technologies"
173
  </p>
174
  <div class="flex justify-center space-x-6">
175
+ <a href="https://www.instagram.com/adhamqab" target="_blank" class="w-12 h-12 rounded-full bg-black bg-opacity-50 flex items-center justify-center text-white hover:bg-opacity-70 hover:text-red-500 transition-all duration-300" aria-label="Instagram profile">
176
  <i class="fab fa-instagram text-2xl"></i>
177
  </a>
178
+ <a href="https://www.linkedin.com/in/adam-qab-620856187/" target="_blank" class="w-12 h-12 rounded-full bg-black bg-opacity-50 flex items-center justify-center text-white hover:bg-opacity-70 hover:text-blue-400 transition-all duration-300" aria-label="LinkedIn profile">
179
  <i class="fab fa-linkedin-in text-2xl"></i>
180
  </a>
181
  </div>
182
  </div>
183
  <div class="scroll-indicator">
184
+ <a href="#about" class="text-white text-4xl" aria-label="Scroll to about section">
185
  <i class="fas fa-chevron-down"></i>
186
  </a>
187
  </div>
188
  </section>
189
 
 
190
  <nav class="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg py-4 px-6 shadow-lg">
191
  <div class="max-w-6xl mx-auto flex justify-between items-center">
192
  <a href="#" class="text-2xl font-bold tech-font">
 
198
  <a href="#achievements" class="nav-link text-white hover:text-gold-500">Achievements</a>
199
  <a href="#contact" class="nav-link text-white hover:text-gold-500">Contact</a>
200
  </div>
201
+ <button class="md:hidden text-white text-2xl mobile-menu-button" aria-label="Open navigation menu">
202
  <i class="fas fa-bars"></i>
203
  </button>
204
  </div>
205
+ <div id="mobile-menu" class="hidden md:hidden mt-4 space-y-2 px-2 pt-2 pb-3 bg-black bg-opacity-90 rounded-md">
206
+ <a href="#about" class="block nav-link text-white hover:text-gold-500 px-3 py-2 rounded-md text-base font-medium">About</a>
207
+ <a href="#projects" class="block nav-link text-white hover:text-gold-500 px-3 py-2 rounded-md text-base font-medium">Projects</a>
208
+ <a href="#achievements" class="block nav-link text-white hover:text-gold-500 px-3 py-2 rounded-md text-base font-medium">Achievements</a>
209
+ <a href="#contact" class="block nav-link text-white hover:text-gold-500 px-3 py-2 rounded-md text-base font-medium">Contact</a>
210
+ </div>
211
  </nav>
212
 
 
213
  <section id="about" class="py-20 bg-space-blue">
214
  <div class="max-w-6xl mx-auto px-6">
215
  <h2 class="text-4xl font-bold mb-16 tech-font text-center">
 
268
 
269
  <div class="section-divider"></div>
270
 
 
271
  <section id="projects" class="py-20 bg-black">
272
  <div class="max-w-6xl mx-auto px-6">
273
  <h2 class="text-4xl font-bold mb-16 tech-font text-center">
 
275
  </h2>
276
 
277
  <div class="grid md:grid-cols-2 gap-8">
 
278
  <div class="project-card rounded-xl p-8 relative overflow-hidden">
279
  <div class="absolute -right-10 -top-10 w-32 h-32 bg-red-500 rounded-full opacity-10"></div>
280
  <div class="absolute -left-10 -bottom-10 w-32 h-32 bg-gold-500 rounded-full opacity-10"></div>
 
302
  </a>
303
  </div>
304
 
 
305
  <div class="project-card rounded-xl p-8 relative overflow-hidden">
306
  <div class="absolute -right-10 -top-10 w-32 h-32 bg-gold-500 rounded-full opacity-10"></div>
307
  <div class="absolute -left-10 -bottom-10 w-32 h-32 bg-red-500 rounded-full opacity-10"></div>
 
340
 
341
  <div class="section-divider"></div>
342
 
 
343
  <section id="achievements" class="py-20 bg-space-blue">
344
  <div class="max-w-6xl mx-auto px-6">
345
  <h2 class="text-4xl font-bold mb-16 tech-font text-center">
 
347
  </h2>
348
 
349
  <div class="grid md:grid-cols-3 gap-8">
350
+ <div class="bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800 hover:border-gold-500 transition achievement-card">
 
351
  <div class="w-16 h-16 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
352
  <i class="fas fa-trophy text-2xl gold-accent"></i>
353
  </div>
 
357
  </p>
358
  </div>
359
 
360
+ <div class="bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800 hover:border-gold-500 transition achievement-card">
 
361
  <div class="w-16 h-16 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
362
  <i class="fas fa-certificate text-2xl gold-accent"></i>
363
  </div>
 
367
  </p>
368
  </div>
369
 
370
+ <div class="bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800 hover:border-gold-500 transition achievement-card">
 
371
  <div class="w-16 h-16 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
372
  <i class="fas fa-microphone text-2xl gold-accent"></i>
373
  </div>
 
378
  </div>
379
  </div>
380
 
 
381
  <div class="mt-20 bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800">
382
  <h3 class="text-2xl font-bold mb-6 tech-font text-center">
383
  <span class="gold-accent">//</span> FUTURE <span class="red-accent">BLOG</span>
 
396
 
397
  <div class="section-divider"></div>
398
 
 
399
  <section id="contact" class="py-20 bg-black">
400
  <div class="max-w-6xl mx-auto px-6">
401
  <h2 class="text-4xl font-bold mb-16 tech-font text-center">
 
436
  <div class="mt-8">
437
  <h4 class="font-bold mb-4">Follow Me</h4>
438
  <div class="flex space-x-4">
439
+ <a href="https://www.instagram.com/adhamqab" target="_blank" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-red-500 transition" aria-label="Instagram profile">
440
  <i class="fab fa-instagram"></i>
441
  </a>
442
+ <a href="https://www.linkedin.com/in/adam-qab-620856187/" target="_blank" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-blue-600 transition" aria-label="LinkedIn profile">
443
  <i class="fab fa-linkedin-in"></i>
444
  </a>
445
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-blue-400 transition" aria-label="Twitter profile">
446
  <i class="fab fa-twitter"></i>
447
  </a>
448
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-gray-600 transition" aria-label="GitHub profile">
449
  <i class="fab fa-github"></i>
450
  </a>
451
  </div>
 
456
  <form class="space-y-6">
457
  <div>
458
  <label for="name" class="block mb-2 text-sm font-medium">Your Name</label>
459
+ <input type="text" id="name" name="name" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500" required>
460
  </div>
461
 
462
  <div>
463
  <label for="email" class="block mb-2 text-sm font-medium">Your Email</label>
464
+ <input type="email" id="email" name="email" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500" required>
465
  </div>
466
 
467
  <div>
468
  <label for="subject" class="block mb-2 text-sm font-medium">Subject</label>
469
+ <input type="text" id="subject" name="subject" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500">
470
  </div>
471
 
472
  <div>
473
  <label for="message" class="block mb-2 text-sm font-medium">Message</label>
474
+ <textarea id="message" name="message" rows="5" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500" required></textarea>
475
  </div>
476
 
477
  <button type="submit" class="w-full py-3 bg-red-500 hover:bg-red-600 text-white font-bold rounded-lg transition flex items-center justify-center">
 
483
  </div>
484
  </section>
485
 
 
486
  <footer class="bg-black border-t border-gray-800 py-8">
487
  <div class="max-w-6xl mx-auto px-6 text-center">
488
  <div class="flex justify-center mb-6">
 
491
  </a>
492
  </div>
493
  <p class="text-gray-500 mb-6">
494
+ &copy; <span id="currentYear">2023</span> Adham Qab. All rights reserved.
495
  </p>
496
  <div class="flex justify-center space-x-6">
497
+ <a href="https://www.instagram.com/adhamqab" target="_blank" class="text-gray-500 hover:text-red-500 transition" aria-label="Instagram profile">
498
  <i class="fab fa-instagram"></i>
499
  </a>
500
+ <a href="https://www.linkedin.com/in/adam-qab-620856187/" target="_blank" class="text-gray-500 hover:text-blue-400 transition" aria-label="LinkedIn profile">
501
  <i class="fab fa-linkedin-in"></i>
502
  </a>
503
+ <a href="#" class="text-gray-500 hover:text-blue-400 transition" aria-label="Twitter profile">
504
  <i class="fab fa-twitter"></i>
505
  </a>
506
+ <a href="#" class="text-gray-500 hover:text-white transition" aria-label="GitHub profile">
507
  <i class="fab fa-github"></i>
508
  </a>
509
  </div>
 
515
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
516
  anchor.addEventListener('click', function (e) {
517
  e.preventDefault();
518
+ const targetElement = document.querySelector(this.getAttribute('href'));
519
+ if (targetElement) {
520
+ targetElement.scrollIntoView({
521
+ behavior: 'smooth'
522
+ });
523
+ }
524
 
525
+ // Close mobile menu if open and it exists
526
+ const mobileMenu = document.getElementById('mobile-menu');
527
+ if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
528
+ mobileMenu.classList.add('hidden');
529
+ }
 
 
530
  });
531
  });
532
 
533
  // Mobile menu toggle
534
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
535
+ const mobileMenu = document.getElementById('mobile-menu');
536
+
537
+ if (mobileMenuButton && mobileMenu) {
538
+ mobileMenuButton.addEventListener('click', function() {
539
+ mobileMenu.classList.toggle('hidden');
540
+ });
541
+ }
542
 
543
  // Animate elements when they come into view
544
  const observer = new IntersectionObserver((entries) => {
545
  entries.forEach(entry => {
546
  if (entry.isIntersecting) {
547
  entry.target.classList.add('animate-fadeIn');
548
+ observer.unobserve(entry.target); // Optional: unobserve after animation
549
  }
550
  });
551
  }, { threshold: 0.1 });
 
554
  observer.observe(card);
555
  });
556
 
557
+ // Typewriter effect - ensure border is removed
558
+ const typewriterElement = document.querySelector('.typewriter');
559
+ if (typewriterElement) {
560
+ // Ensure animation completes before removing border if animation-duration is known
561
+ // For this example, using a timeout matching CSS animation
562
+ setTimeout(() => {
563
+ typewriterElement.style.borderRight = 'none';
564
+ }, 3500); // Match the 'typing' animation duration in CSS
565
+ }
566
+
567
+ // Update copyright year dynamically
568
+ document.getElementById('currentYear').textContent = new Date().getFullYear();
569
+
570
  </script>
571
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=adamqab/https-huggingface-co-spaces-adamqab-myweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p>
572
+ </body>
573
  </html>