Update index.html

index.html

@@ -35,113 +35,133 @@
                         url('https://i.postimg.cc/hjBVvCM8/4uoIBUi.jpg') no-repeat center center/cover;
         }
         
-        /* Chatbot Styles */
-        .chatbot-container {
-            max-width: 500px;
+        .nav-link {
+            position: relative;
+        }
+        
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background-color: var(--primary-gold);
+            transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover::after {
             width: 100%;
-            margin-bottom: 2rem;
-            background: rgba(26, 26, 46, 0.7);
+        }
+        
+        .project-card {
+            background: rgba(26, 26, 46, 0.5);
             backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 215, 0, 0.2);
-            border-radius: 12px;
-            box-shadow: 0 8px 16px rgba(0,0,0,0.3);
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
+            border: 1px solid rgba(255, 215, 0, 0.1);
+            transition: all 0.3s ease;
         }
-        .chat-window {
-            height: 200px;
-            padding: 1rem;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            gap: 0.75rem;
+        
+        .project-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 20px rgba(230, 57, 70, 0.3);
+            border-color: rgba(255, 215, 0, 0.3);
         }
-        .chat-message {
-            padding: 0.5rem 1rem;
-            border-radius: 10px;
-            max-width: 80%;
-            line-height: 1.4;
-            word-wrap: break-word;
+        
+        .gold-accent {
+            color: var(--primary-gold);
         }
-        .user-message {
-            background-color: var(--primary-red);
-            color: white;
-            align-self: flex-end;
-            border-bottom-right-radius: 2px;
+        
+        .red-accent {
+            color: var(--primary-red);
+        }
+        
+        .section-divider {
+            height: 100px;
+            background: linear-gradient(to bottom, var(--primary-black), var(--space-blue));
+        }
+        
+        .tech-icon {
+            transition: all 0.3s ease;
         }
-        .bot-message {
-            background-color: #333;
-            color: #f1f1f1;
-            align-self: flex-start;
-            border-bottom-left-radius: 2px;
+        
+        .tech-icon:hover {
+            transform: scale(1.2);
+            color: var(--primary-gold);
+        }
+        
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+        
+        .glow {
+            text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
+        }
+        
+        .typewriter {
+            overflow: hidden;
+            border-right: 3px solid var(--primary-gold);
+            white-space: nowrap;
+            margin: 0 auto;
+            letter-spacing: 2px;
+            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+        }
+        
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: var(--primary-gold) }
+        }
+        
+        .scroll-indicator {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            animation: bounce 2s infinite;
         }
-        .chat-input-area {
-            display: flex;
-            border-top: 1px solid rgba(255, 215, 0, 0.2);
+        
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
+            40% { transform: translateY(-20px) translateX(-50%); }
+            60% { transform: translateY(-10px) translateX(-50%); }
         }
-        #chat-input {
-            flex-grow: 1;
-            background: transparent;
-            border: none;
+        
+        .contact-input {
+            background: rgba(26, 26, 46, 0.5);
+            border: 1px solid rgba(255, 215, 0, 0.2);
             color: white;
-            padding: 0.75rem 1rem;
+        }
+        
+        .contact-input:focus {
             outline: none;
+            border-color: var(--primary-gold);
+            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
         }
-        #send-btn {
-            background: var(--primary-red);
-            border: none;
-            color: white;
-            padding: 0.75rem 1.25rem;
-            cursor: pointer;
-            transition: background-color 0.3s;
+        /* Basic animation for elements coming into view */
+        .animate-fadeIn {
+            animation: fadeIn 1s ease-out;
         }
-        #send-btn:hover {
-            background-color: #c42d38;
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
-        /* Existing Styles */
-        .nav-link { position: relative; }
-        .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: var(--primary-gold); transition: width 0.3s ease; }
-        .nav-link:hover::after { width: 100%; }
-        .project-card { background: rgba(26, 26, 46, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255, 215, 0, 0.1); transition: all 0.3s ease; }
-        .project-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(230, 57, 70, 0.3); border-color: rgba(255, 215, 0, 0.3); }
-        .gold-accent { color: var(--primary-gold); }
-        .red-accent { color: var(--primary-red); }
-        .section-divider { height: 100px; background: linear-gradient(to bottom, var(--primary-black), var(--space-blue)); }
-        .tech-icon { transition: all 0.3s ease; }
-        .tech-icon:hover { transform: scale(1.2); color: var(--primary-gold); }
-        .floating { animation: floating 3s ease-in-out infinite; }
-        @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
-        .glow { text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); }
-        .typewriter { overflow: hidden; border-right: 3px solid var(--primary-gold); white-space: nowrap; margin: 0 auto; letter-spacing: 2px; animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; }
-        @keyframes typing { from { width: 0 } to { width: 100% } }
-        @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--primary-gold) } }
-        .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; }
-        @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-20px) translateX(-50%); } 60% { transform: translateY(-10px) translateX(-50%); } }
-        .contact-input { background: rgba(26, 26, 46, 0.5); border: 1px solid rgba(255, 215, 0, 0.2); color: white; }
-        .contact-input:focus { outline: none; border-color: var(--primary-gold); box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
-        .animate-fadeIn { animation: fadeIn 1s ease-out; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-
     </style>
 </head>
 <body>
-    <section class="hero-section relative flex flex-col items-center justify-center text-center overflow-hidden p-4">
+    <section class="hero-section relative flex items-center justify-center text-center overflow-hidden">
         <div class="absolute inset-0 bg-black opacity-40"></div>
-        <div class="relative z-10 flex flex-col items-center justify-center w-full max-w-4xl px-6">
-
-            <div id="chatbot" class="chatbot-container">
-                <div id="chat-window" class="chat-window">
-                     <div class="chat-message bot-message">Hello! Ask me about Adham, or give me a simple math problem.</div>
-                </div>
-                <div class="chat-input-area">
-                    <input type="text" id="chat-input" placeholder="Type your message..." autocomplete="off">
-                    <button id="send-btn" aria-label="Send message">
-                        <i class="fas fa-paper-plane"></i>
-                    </button>
-                </div>
-            </div>
+        <div class="relative z-10 px-6 max-w-4xl">
             <h1 class="text-5xl md:text-7xl font-bold mb-6 glow">
                 ADHAM <span class="red-accent">QAB</span>
             </h1>
@@ -576,8 +596,12 @@
                 e.preventDefault();
                 const targetElement = document.querySelector(this.getAttribute('href'));
                 if (targetElement) {
-                    targetElement.scrollIntoView({ behavior: 'smooth' });
+                    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');
@@ -588,6 +612,7 @@
         // 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');
@@ -599,125 +624,28 @@
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
                     entry.target.classList.add('animate-fadeIn');
-                    observer.unobserve(entry.target);
+                    observer.unobserve(entry.target); // Optional: unobserve after animation
                 }
             });
         }, { threshold: 0.1 });
+        
         document.querySelectorAll('.project-card, .achievement-card').forEach(card => {
             observer.observe(card);
         });
         
-        // Typewriter effect
+        // 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);
+            }, 3500); // Match the 'typing' animation duration in CSS
         }
 
-        // Update copyright year
+        // Update copyright year dynamically
         document.getElementById('currentYear').textContent = new Date().getFullYear();
 
-        // --- NEW CHATBOT JAVASCRIPT (NO API) ---
-        const chatWindow = document.getElementById('chat-window');
-        const chatInput = document.getElementById('chat-input');
-        const sendBtn = document.getElementById('send-btn');
-
-        const addMessage = (message, sender) => {
-            const messageElement = document.createElement('div');
-            messageElement.classList.add('chat-message', `${sender}-message`);
-            messageElement.textContent = message;
-            chatWindow.appendChild(messageElement);
-            chatWindow.scrollTop = chatWindow.scrollHeight;
-        };
-
-        const handleSendMessage = () => {
-            const userMessage = chatInput.value.trim();
-            if (!userMessage) return;
-
-            addMessage(userMessage, 'user');
-            chatInput.value = '';
-
-            // Generate bot response instantly
-            const botResponse = generateBotResponse(userMessage);
-            
-            // Add a small delay for a more natural feel
-            setTimeout(() => {
-                addMessage(botResponse, 'bot');
-            }, 500);
-        };
-        
-        const performSafeCalculation = (expression) => {
-            // This function safely evaluates a mathematical expression.
-            // It only allows numbers, basic operators, parentheses, and spaces.
-            // It prevents execution of harmful code.
-            const sanitizedExpression = expression.replace(/[^-\d/*+().\s]/g, '');
-
-            // Check if the expression contains at least one number and one operator
-             if (!/[\d]/.test(sanitizedExpression) || !/[-+*/]/.test(sanitizedExpression)) {
-                return null;
-            }
-
-            try {
-                // Using the Function constructor is safer than a direct eval().
-                const result = new Function('return ' + sanitizedExpression)();
-                if (typeof result === 'number' && isFinite(result)) {
-                    return result;
-                }
-                return null; // Not a valid number
-            } catch (error) {
-                return null; // Error during evaluation
-            }
-        };
-
-        const generateBotResponse = (userInput) => {
-            const lowerInput = userInput.toLowerCase();
-
-            // --- Calculation Check ---
-            // First, try to see if it's a math problem.
-            const calcResult = performSafeCalculation(lowerInput);
-            if (calcResult !== null) {
-                return `The result is ${calcResult}.`;
-            }
-
-            // --- Keyword-Based Q&A ---
-            if (lowerInput.includes('hello') || lowerInput.includes('hi') || lowerInput.includes('hey')) {
-                return 'Hello there! You can ask me about Adham or give me a simple calculation.';
-            }
-            if (lowerInput.includes('who are you') || lowerInput.includes('your name')) {
-                return 'I am a simple chatbot designed to answer questions about Adham Qab\'s portfolio.';
-            }
-            if (lowerInput.includes('skill') || lowerInput.includes('what can he do')) {
-                return 'Adham is a Tech Innovator and Full Stack Developer, specializing in AI/ML, Python, JavaScript, and React. See the "About Me" section for more!';
-            }
-             if (lowerInput.includes('project')) {
-                return 'Adham has several projects including a Snake Game, Tic-Tac-Toe, an n8n Automation workflow, and a more advanced AI Chatbot. You can play some of them right here on the page!';
-            }
-             if (lowerInput.includes('achievement') || lowerInput.includes('certificate')) {
-                return 'Adham holds certificates in areas like Google AI Essentials, Ethical Hacking, and Computer Networking. Scroll down to the Achievements section to see them all.';
-            }
-            if (lowerInput.includes('contact') || lowerInput.includes('email')) {
-                return 'You can contact Adham at adamqab.18@gmail.com or connect with him on LinkedIn. All links are in the "Get In Touch" section at the bottom.';
-            }
-            if (lowerInput.includes('location') || lowerInput.includes('where is he')) {
-                return 'Adham is based in the United States.';
-            }
-            if (lowerInput.includes('help') || lowerInput.includes('what can you do')) {
-                 return 'I can answer questions about Adham\'s skills, projects, and achievements. I can also solve simple math problems, like "100 / 4" or "(5 + 5) * 2".';
-            }
-            
-            // --- Default Response ---
-            return "I'm not sure how to answer that. Please ask about Adham's skills, projects, achievements, or give me a simple calculation.";
-        };
-
-
-        sendBtn.addEventListener('click', handleSendMessage);
-        chatInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                handleSendMessage();
-            }
-        });
-
     </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>