Spaces:

adamqab
/

https-huggingface-co-spaces-adamqab-myweb

Running

App Files Files Community

adamqab commited on May 9, 2025

Commit

8b5ccab

verified ·

1 Parent(s): d354a0f

Update index.html

Browse files

Files changed (1) hide show

index.html +545 -65

index.html CHANGED Viewed

@@ -1,72 +1,552 @@
-import os
-from flask import Flask, render_template_string, request
-import openai
-from werkzeug.utils import secure_filename
-# Initialize Flask app
-app = Flask(__name__)
-# OpenAI API Key and image generation model
-openai.api_key = 'your-openai-api-key'
-# File upload configuration
-app.config['UPLOAD_FOLDER'] = 'uploads'
-app.config['ALLOWED_EXTENSIONS'] = {'jpg', 'jpeg', 'png'}
-app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # Max 16MB
-# Check if file extension is allowed
-def allowed_file(filename):
-    return '.' in filename and filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
-# Route to upload image and generate LinkedIn-style headshot
-@app.route('/', methods=['GET', 'POST'])
-def index():
-    headshot_url = None
-    if request.method == 'POST':
-        file = request.files['image']
-        if file and allowed_file(file.filename):
-            filename = secure_filename(file.filename)
-            filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-            file.save(filepath)
-            # Call OpenAI to generate headshot
-            with open(filepath, "rb") as img_file:
-                response = openai.Image.create(
-                    prompt="Create a professional LinkedIn-style headshot based on the uploaded image",
-                    n=1,
-                    size="512x512",
-                    image=img_file
-                )
-            headshot_url = response['data'][0]['url']
-    # Render HTML directly using render_template_string
-    return render_template_string('''
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LinkedIn Headshot Generator</title>
 </head>
 <body>
-    <h1>Upload Your Photo for a Professional LinkedIn Headshot</h1>
-    <!-- Form to upload image -->
-    <form method="POST" enctype="multipart/form-data">
-        <input type="file" name="image" required>
-        <button type="submit">Upload</button>
-    </form>
-    <!-- If headshot_url exists, display the image -->
-    {% if headshot_url %}
-        <h2>Generated LinkedIn Headshot</h2>
-        <img src="{{ headshot_url }}" alt="Generated Headshot" style="max-width: 300px;">
-    {% endif %}
-</body>
-</html>
-    ''', headshot_url=headshot_url)
-if __name__ == '__main__':
-    app.run(debug=True)

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Adham Qab | Tech Innovator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Montserrat:wght@300;400;500;600&display=swap');
+        :root {
+            --primary-red: #e63946;
+            --primary-gold: #ffd700;
+            --primary-black: #0a0a0a;
+            --space-blue: #1a1a2e;
+        }
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: var(--primary-black);
+            color: white;
+            scroll-behavior: smooth;
+        }
+        h1, h2, h3, .tech-font {
+            font-family: 'Orbitron', sans-serif;
+        }
+        .hero-section {
+            height: 100vh;
+            background: linear-gradient(rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.9)),
+                        url('https://i.postimg.cc/hjBVvCM8/4uoIBUi.jpg') no-repeat center center/cover;
+        }
+        .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);
+        }
+    </style>
 </head>
 <body>
+    <!-- Hero Section -->
+    <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 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>
+            <div class="typewriter">
+                <h2 class="text-2xl md:text-3xl gold-accent tech-font">TECH INNOVATOR & AI ENTHUSIAST</h2>
+            </div>
+            <p class="text-lg md:text-xl mt-8 mb-10">
+                "Shaping the future with AI and emerging technologies"
+            </p>
+            <div class="flex justify-center space-x-6">
+                <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">
+                    <i class="fab fa-instagram text-2xl"></i>
+                </a>
+                <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">
+                    <i class="fab fa-linkedin-in text-2xl"></i>
+                </a>
+            </div>
+        </div>
+        <div class="scroll-indicator">
+            <a href="#about" class="text-white text-4xl">
+                <i class="fas fa-chevron-down"></i>
+            </a>
+        </div>
+    </section>
+    <!-- Navigation -->
+    <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">
+        <div class="max-w-6xl mx-auto flex justify-between items-center">
+            <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 class="hidden md:flex space-x-8">
+                <a href="#about" class="nav-link text-white hover:text-gold-500">About</a>
+                <a href="#projects" class="nav-link text-white hover:text-gold-500">Projects</a>
+                <a href="#achievements" class="nav-link text-white hover:text-gold-500">Achievements</a>
+                <a href="#contact" class="nav-link text-white hover:text-gold-500">Contact</a>
+            </div>
+            <button class="md:hidden text-white text-2xl">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- About Section -->
+    <section id="about" 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> ABOUT <span class="red-accent">ME</span>
+            </h2>
+            <div class="flex flex-col lg:flex-row items-center gap-12">
+                <div class="lg:w-1/2">
+                    <div class="relative">
+                        <div class="w-64 h-64 bg-red-500 rounded-full mx-auto floating"></div>
+                        <div class="absolute -inset-4 border-2 border-gold-500 rounded-full opacity-20"></div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <h3 class="text-3xl font-bold mb-6 tech-font">
+                        I'M <span class="red-accent">ADHAM QAB</span>
+                    </h3>
+                    <p class="text-lg mb-6 leading-relaxed">
+                        A tech enthusiast passionate about AI, digital innovation, and building tools that help others. Originally from Yemen and based in the U.S., I'm on a mission to use AI and emerging technologies to shape the future.
+                    </p>
+                    <div class="grid grid-cols-2 gap-4 mb-8">
+                        <div class="flex items-center">
+                            <i class="fas fa-map-marker-alt mr-3 gold-accent"></i>
+                            <span>United States</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-code mr-3 gold-accent"></i>
+                            <span>Full Stack Developer</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-brain mr-3 gold-accent"></i>
+                            <span>AI Specialist</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-rocket mr-3 gold-accent"></i>
+                            <span>Tech Innovator</span>
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap gap-3">
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-sm flex items-center">
+                            <i class="fab fa-python mr-2 tech-icon"></i> Python
+                        </span>
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-sm flex items-center">
+                            <i class="fas fa-robot mr-2 tech-icon"></i> AI/ML
+                        </span>
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-sm flex items-center">
+                            <i class="fab fa-js mr-2 tech-icon"></i> JavaScript
+                        </span>
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-sm flex items-center">
+                            <i class="fab fa-react mr-2 tech-icon"></i> React
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <div class="section-divider"></div>
+    <!-- Projects Section -->
+    <section id="projects" 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> MY <span class="red-accent">PROJECTS</span>
+            </h2>
+            <div class="grid md:grid-cols-2 gap-8">
+                <!-- Project 1 -->
+                <div class="project-card rounded-xl p-8 relative overflow-hidden">
+                    <div class="absolute -right-10 -top-10 w-32 h-32 bg-red-500 rounded-full opacity-10"></div>
+                    <div class="absolute -left-10 -bottom-10 w-32 h-32 bg-gold-500 rounded-full opacity-10"></div>
+                    <div class="flex items-center mb-6">
+                        <div class="w-16 h-16 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mr-4">
+                            <i class="fas fa-robot text-3xl red-accent"></i>
+                        </div>
+                        <h3 class="text-2xl font-bold tech-font">AI Chatbot</h3>
+                    </div>
+                    <p class="mb-6 text-gray-300">
+                        A sophisticated conversational AI built with Flask and OpenAI API, demonstrating cutting-edge natural language processing capabilities.
+                    </p>
+                    <div class="flex flex-wrap gap-2 mb-6">
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-xs">Python</span>
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-xs">Flask</span>
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-xs">OpenAI API</span>
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-xs">NLP</span>
+                    </div>
+                    <a href="#" class="inline-flex items-center text-gold-500 hover:text-gold-300 transition">
+                        View Project <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+                <!-- Project 2 -->
+                <div class="project-card rounded-xl p-8 relative overflow-hidden">
+                    <div class="absolute -right-10 -top-10 w-32 h-32 bg-gold-500 rounded-full opacity-10"></div>
+                    <div class="absolute -left-10 -bottom-10 w-32 h-32 bg-red-500 rounded-full opacity-10"></div>
+                    <div class="flex items-center mb-6">
+                        <div class="w-16 h-16 bg-gold-500 bg-opacity-20 rounded-lg flex items-center justify-center mr-4">
+                            <i class="fas fa-laptop-code text-3xl gold-accent"></i>
+                        </div>
+                        <h3 class="text-2xl font-bold tech-font">Personal Portfolio</h3>
+                    </div>
+                    <p class="mb-6 text-gray-300">
+                        A dynamic portfolio showcasing my tech skills, certifications, and professional accomplishments with an interactive, modern interface.
+                    </p>
+                    <div class="flex flex-wrap gap-2 mb-6">
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-xs">React</span>
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-xs">Tailwind CSS</span>
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-xs">JavaScript</span>
+                        <span class="px-3 py-1 bg-black bg-opacity-40 rounded-full text-xs">Responsive Design</span>
+                    </div>
+                    <a href="#" class="inline-flex items-center text-gold-500 hover:text-gold-300 transition">
+                        View Project <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="#" class="inline-block px-8 py-3 border border-gold-500 text-gold-500 rounded-lg hover:bg-gold-500 hover:text-black transition font-bold tech-font">
+                    VIEW ALL PROJECTS
+                </a>
+            </div>
+        </div>
+    </section>
+    <div class="section-divider"></div>
+    <!-- Achievements Section -->
+    <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
+            </h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Achievement 1 -->
+                <div class="bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800 hover:border-gold-500 transition">
+                    <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-trophy text-2xl gold-accent"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 tech-font">AI Innovation Award</h3>
+                    <p class="text-gray-300">
+                        Recognized for developing an innovative AI solution that improves accessibility in education.
+                    </p>
+                </div>
+                <!-- Achievement 2 -->
+                <div class="bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800 hover:border-gold-500 transition">
+                    <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-certificate text-2xl gold-accent"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 tech-font">AWS Certified</h3>
+                    <p class="text-gray-300">
+                        Earned AWS Certified Solutions Architect certification, demonstrating cloud expertise.
+                    </p>
+                </div>
+                <!-- Achievement 3 -->
+                <div class="bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800 hover:border-gold-500 transition">
+                    <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-microphone text-2xl gold-accent"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 tech-font">Tech Conference Speaker</h3>
+                    <p class="text-gray-300">
+                        Invited speaker at multiple tech conferences on AI and emerging technologies.
+                    </p>
+                </div>
+            </div>
+            <!-- Future Blog Section -->
+            <div class="mt-20 bg-black bg-opacity-40 rounded-xl p-8 border border-gray-800">
+                <h3 class="text-2xl font-bold mb-6 tech-font text-center">
+                    <span class="gold-accent">//</span> FUTURE <span class="red-accent">BLOG</span>
+                </h3>
+                <p class="text-center max-w-2xl mx-auto text-gray-300 mb-8">
+                    Coming soon: Insights on AI, technology trends, and my journey in the tech world.
+                </p>
+                <div class="text-center">
+                    <a href="#" class="inline-block px-6 py-2 border border-gold-500 text-gold-500 rounded-lg hover:bg-gold-500 hover:text-black transition font-bold tech-font">
+                        NOTIFY ME
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <div class="section-divider"></div>
+    <!-- Contact Section -->
+    <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">
+                                <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">
+                                <i class="fab fa-linkedin-in"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-blue-400 transition">
+                                <i class="fab fa-twitter"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-gray-600 transition">
+                                <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" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500">
+                        </div>
+                        <div>
+                            <label for="email" class="block mb-2 text-sm font-medium">Your Email</label>
+                            <input type="email" id="email" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500">
+                        </div>
+                        <div>
+                            <label for="subject" class="block mb-2 text-sm font-medium">Subject</label>
+                            <input type="text" id="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" rows="5" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500"></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>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <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">
+                © 2023 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">
+                    <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">
+                    <i class="fab fa-linkedin-in"></i>
+                </a>
+                <a href="#" class="text-gray-500 hover:text-blue-400 transition">
+                    <i class="fab fa-twitter"></i>
+                </a>
+                <a href="#" class="text-gray-500 hover:text-white transition">
+                    <i class="fab fa-github"></i>
+                </a>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+                // Close mobile menu if open
+                document.querySelector('.mobile-menu').classList.remove('block');
+                document.querySelector('.mobile-menu').classList.add('hidden');
+            });
+        });
+        // Mobile menu toggle
+        document.querySelector('.mobile-menu-button').addEventListener('click', function() {
+            const menu = document.querySelector('.mobile-menu');
+            menu.classList.toggle('hidden');
+            menu.classList.toggle('block');
+        });
+        // Animate elements when they come into view
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-fadeIn');
+                }
+            });
+        }, { threshold: 0.1 });
+        document.querySelectorAll('.project-card, .achievement-card').forEach(card => {
+            observer.observe(card);
+        });
+        // Typewriter effect
+        const typewriter = document.querySelector('.typewriter');
+        setTimeout(() => {
+            typewriter.style.borderRight = 'none';
+        }, 3500);
+    </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>