Update index.html

index.html

@@ -368,7 +368,7 @@
         <a href="#" class="px-4 py-2 bg-gold-500 text-black rounded-md hover:bg-gold-300 transition-colors duration-300">Learn More</a>
     </div>
 </div>
-</div>                                  
+</div>                                   
             </div>
             
             <div class="text-center mt-12">
@@ -380,7 +380,7 @@
     </section>
     
     <div class="section-divider"></div>
-  <section id="achievements" class="py-20 bg-space-blue">
+ <section id="achievements" class="py-20 bg-space-blue">
     <div class="max-w-6xl mx-auto px-6">
         <h2 class="text-4xl font-bold mb-16 tech-font text-center">
             <span class="gold-accent">//</span> ACHIEVEMENTS <span class="red-accent">&</span> MILESTONES
@@ -474,179 +474,21 @@
                 </p>
                 <a href="https://coursera.org/share/9dfd0fb1ea4ceec86e38d830e8d6a50c" target="_blank" class="text-blue-500 hover:underline">View Certificate</a>
             </div>
-        </div>
-    </div>
-</section>
-    
-    <div class="section-divider"></div>
-    
-    <section id="contact" class="py-20 bg-black">
-        <div class="max-w-6xl mx-auto px-6">
-            <h2 class="text-4xl font-bold mb-16 tech-font text-center">
-                <span class="gold-accent">//</span> GET IN <span class="red-accent">TOUCH</span>
-            </h2>
             
-            <div class="grid md:grid-cols-2 gap-12">
-                <div>
-                    <h3 class="text-2xl font-bold mb-6 tech-font">
-                        LET'S <span class="red-accent">CONNECT</span>
-                    </h3>
-                    <p class="mb-8 text-gray-300">
-                        Interested in collaborating or have questions about my work? Feel free to reach out through this form or connect with me on social media.
-                    </p>
-                    
-                    <div class="space-y-4">
-                        <div class="flex items-center">
-                            <div class="w-12 h-12 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mr-4">
-                                <i class="fas fa-envelope gold-accent"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold">Email</h4>
-                                <p class="text-gray-400">adamqab.18@gmail.com</p>
-                            </div>
-                        </div>
-                        
-                        <div class="flex items-center">
-                            <div class="w-12 h-12 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mr-4">
-                                <i class="fas fa-map-marker-alt gold-accent"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold">Location</h4>
-                                <p class="text-gray-400">United States</p>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="mt-8">
-                        <h4 class="font-bold mb-4">Follow Me</h4>
-                        <div class="flex space-x-4">
-                            <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">
-                                <i class="fab fa-instagram"></i>
-                            </a>
-                            <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">
-                                <i class="fab fa-linkedin-in"></i>
-                            </a>
-                            </a>
-<a href="https://github.com/adhamqabban37" target="_blank" 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">                                 <i class="fab fa-github"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                
-                <div>
-                    <form class="space-y-6">
-                        <div>
-                            <label for="name" class="block mb-2 text-sm font-medium">Your Name</label>
-                            <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>
-                        </div>
-                        
-                        <div>
-                            <label for="email" class="block mb-2 text-sm font-medium">Your Email</label>
-                            <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>
-                        </div>
-                        
-                        <div>
-                            <label for="subject" class="block mb-2 text-sm font-medium">Subject</label>
-                            <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">
-                        </div>
-                        
-                        <div>
-                            <label for="message" class="block mb-2 text-sm font-medium">Message</label>
-                            <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>
-                        </div>
-                        
-                        <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">
-                            SEND MESSAGE <i class="fas fa-paper-plane ml-2"></i>
-                        </button>
-                    </form>
+            <div class="bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800 hover:border-gold-500 transition achievement-card">
+                <div class="w-16 h-16 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
+                    <i class="fas fa-robot text-2xl gold-accent"></i>
                 </div>
+                <h3 class="text-xl font-bold mb-3 tech-font">Machine Learning Crash Course: Linear Regression</h3>
+                <p class="text-gray-300">
+                    Completed the Linear Regression module of Google's Machine Learning Crash Course, gaining a solid understanding of this fundamental supervised learning algorithm for prediction tasks.
+                </p>
+                <a href="https://developers.google.com/profile/badges/playlists/machine-learning-crash-course/linear-regression" target="_blank" class="text-blue-500 hover:underline">View Badge</a>
             </div>
         </div>
-    </section>
+    </div>
+</section>
     
-    <footer class="bg-black border-t border-gray-800 py-8">
-        <div class="max-w-6xl mx-auto px-6 text-center">
-            <div class="flex justify-center mb-6">
-                <a href="#" class="text-2xl font-bold tech-font">
-                    <span class="red-accent">A</span>DHAM <span class="gold-accent">Q</span>AB
-                </a>
-            </div>
-            <p class="text-gray-500 mb-6">
-                &copy; <span id="currentYear">2023</span> Adham Qab. All rights reserved.
-            </p>
-            <div class="flex justify-center space-x-6">
-                <a href="https://www.instagram.com/adhamqab" target="_blank" class="text-gray-500 hover:text-red-500 transition" aria-label="Instagram profile">
-                    <i class="fab fa-instagram"></i>
-                </a>
-                <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">
-                    <i class="fab fa-linkedin-in"></i>
-                </a>
-<a href="https://github.com/adhamqabban37" target="_blank" class="text-gray-500 hover:text-white transition" aria-label="GitHub profile">        
-</a>    
-<a href="https://github.com/adhamqabban37" target="_blank" class="text-gray-500 hover:text-white transition" aria-label="GitHub profile">        <i class="fab fa-github"></i>
-                </a>
-            </div>
-        </div>
-    </footer>
+    <div class="section-divider"></div>
     
-    <script>
-        // Smooth scrolling for anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                const targetElement = document.querySelector(this.getAttribute('href'));
-                if (targetElement) {
-                    targetElement.scrollIntoView({
-                        behavior: 'smooth'
-                    });
-                }
-                
-                // Close mobile menu if open and it exists
-                const mobileMenu = document.getElementById('mobile-menu');
-                if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
-                    mobileMenu.classList.add('hidden');
-                }
-            });
-        });
-        
-        // Mobile menu toggle
-        const mobileMenuButton = document.querySelector('.mobile-menu-button');
-        const mobileMenu = document.getElementById('mobile-menu');
-
-        if (mobileMenuButton && mobileMenu) {
-            mobileMenuButton.addEventListener('click', function() {
-                mobileMenu.classList.toggle('hidden');
-            });
-        }
-        
-        // Animate elements when they come into view
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('animate-fadeIn');
-                    observer.unobserve(entry.target); // Optional: unobserve after animation
-                }
-            });
-        }, { threshold: 0.1 });
-        
-        document.querySelectorAll('.project-card, .achievement-card').forEach(card => {
-            observer.observe(card);
-        });
-        
-        // Typewriter effect - ensure border is removed
-        const typewriterElement = document.querySelector('.typewriter');
-        if (typewriterElement) {
-            // Ensure animation completes before removing border if animation-duration is known
-            // For this example, using a timeout matching CSS animation
-            setTimeout(() => {
-                typewriterElement.style.borderRight = 'none';
-            }, 3500); // Match the 'typing' animation duration in CSS
-        }
-
-        // Update copyright year dynamically
-        document.getElementById('currentYear').textContent = new Date().getFullYear();
-
-    </script>
-<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>
-</html>
+    <section id