| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>John Doe | Applied ML</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=Space+Grotesk:wght@300;400;500;600;700&display=swap'); |
| |
| :root { |
| --primary: #6e45e2; |
| --secondary: #88d3ce; |
| --accent: #ff7e5f; |
| --dark: #1a1a2e; |
| --light: #f8f9fa; |
| } |
| |
| body { |
| font-family: 'Space Grotesk', sans-serif; |
| background-color: var(--dark); |
| color: var(--light); |
| overflow-x: hidden; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .neon-card { |
| background: rgba(26, 26, 46, 0.7); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(110, 69, 226, 0.3); |
| box-shadow: 0 0 20px rgba(110, 69, 226, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .neon-card:hover { |
| border-color: rgba(110, 69, 226, 0.6); |
| box-shadow: 0 0 30px rgba(110, 69, 226, 0.3); |
| transform: translateY(-5px); |
| } |
| |
| .glow-effect { |
| position: relative; |
| } |
| |
| .glow-effect::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: radial-gradient(circle at center, rgba(110, 69, 226, 0.2) 0%, transparent 70%); |
| z-index: -1; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
| |
| .glow-effect:hover::after { |
| opacity: 1; |
| } |
| |
| .floating { |
| animation: floating 6s ease-in-out infinite; |
| } |
| |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| 100% { opacity: 1; } |
| } |
| |
| .matrix-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -2; |
| opacity: 0.05; |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="1" height="1" fill="%2388d3ce"/></svg>'); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="matrix-bg"></div> |
| |
| |
| <div class="fixed top-1/4 left-10 w-8 h-8 rounded-full bg-purple-500 opacity-20 floating" style="animation-delay: 0s;"></div> |
| <div class="fixed top-1/3 right-20 w-12 h-12 rounded-full bg-teal-300 opacity-20 floating" style="animation-delay: 1s;"></div> |
| <div class="fixed bottom-1/4 left-1/4 w-6 h-6 rounded-full bg-orange-400 opacity-20 floating" style="animation-delay: 2s;"></div> |
| |
| <div class="min-h-screen flex flex-col"> |
| |
| <header class="py-8 px-6 md:px-12 lg:px-24"> |
| <div class="flex justify-between items-center"> |
| <div class="text-2xl md:text-3xl font-bold gradient-text"> |
| Bernt Åge Hansen |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#about" class="text-gray-300 hover:text-white transition duration-300">About</a> |
| <a href="#project" class="text-gray-300 hover:text-white transition duration-300">Project</a> |
| <a href="#process" class="text-gray-300 hover:text-white transition duration-300">Process</a> |
| <a href="#results" class="text-gray-300 hover:text-white transition duration-300">Results</a> |
| </nav> |
| <button class="md:hidden text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </header> |
| |
| |
| <section class="flex-grow flex items-center px-6 md:px-12 lg:px-24 py-12"> |
| <div class="w-full max-w-6xl mx-auto"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
| <div class="relative"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> |
| <span class="gradient-text">Applied</span><br> |
| <span class="gradient-text">Machine</span><br> |
| <span class="gradient-text">Learning</span> |
| </h1> |
| <p class="text-lg md:text-xl text-gray-300 mb-8"> |
| Exploring the boundaries of AI through innovative applications and unconventional thinking. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#project" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full font-medium hover:opacity-90 transition duration-300"> |
| View Project |
| </a> |
| <a href="#contact" class="px-6 py-3 border border-purple-500 rounded-full font-medium hover:bg-purple-500/10 transition duration-300"> |
| Contact |
| </a> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="neon-card rounded-3xl p-1 glow-effect"> |
| <div class="bg-gray-900 rounded-3xl p-6 h-full"> |
| <div class="aspect-w-16 aspect-h-9 rounded-2xl overflow-hidden"> |
| <div class="w-full h-64 md:h-80 bg-gradient-to-br from-purple-900/30 via-blue-900/30 to-teal-900/30 flex items-center justify-center"> |
| <i class="fas fa-brain text-6xl text-purple-400"></i> |
| </div> |
| </div> |
| <div class="mt-6 flex justify-between items-center"> |
| <div class="text-sm text-gray-400">Interactive Demo</div> |
| <div class="flex space-x-2"> |
| <div class="w-3 h-3 rounded-full bg-purple-500"></div> |
| <div class="w-3 h-3 rounded-full bg-teal-400"></div> |
| <div class="w-3 h-3 rounded-full bg-orange-400"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="about" class="py-20 px-6 md:px-12 lg:px-24"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 gradient-text text-center">About The Project</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="neon-card rounded-2xl p-6 glow-effect"> |
| <div class="text-purple-400 text-3xl mb-4"> |
| <i class="fas fa-lightbulb"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Concept</h3> |
| <p class="text-gray-300"> |
| Building machine learning models from data from the atb in Trondheim, to predict transportation needs and to optimize the buses and routes. |
| </p> |
| </div> |
| <div class="neon-card rounded-2xl p-6 glow-effect"> |
| <div class="text-teal-400 text-3xl mb-4"> |
| <i class="fas fa-cogs"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Technology</h3> |
| <p class="text-gray-300"> |
| Combining cutting-edge ML frameworks with traditional architectures. |
| </p> |
| </div> |
| <div class="neon-card rounded-2xl p-6 glow-effect"> |
| <div class="text-orange-400 text-3xl mb-4"> |
| <i class="fas fa-chart-line"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Impact</h3> |
| <p class="text-gray-300"> |
| Demonstrating how unconventional thinking can lead to breakthroughs in applied machine learning scenarios. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="project" class="py-20 px-6 md:px-12 lg:px-24 bg-gradient-to-b from-gray-900/50 to-transparent"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 gradient-text text-center">Project Deep Dive</h2> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20"> |
| <div class="order-2 lg:order-1"> |
| <div class="text-purple-400 text-xl mb-2">01</div> |
| <h3 class="text-2xl font-bold mb-4">Problem Space</h3> |
| <p class="text-gray-300 mb-6"> |
| Traditional machine learning approaches often follow predictable patterns. This project challenges those norms by exploring how unconventional data representations and model architectures can lead to unexpected performance improvements. |
| </p> |
| <ul class="space-y-3 text-gray-300"> |
| <li class="flex items-start"> |
| <span class="text-teal-400 mr-2">✓</span> |
| <span>Non-standard data preprocessing pipelines</span> |
| </li> |
| <li class="flex items-start"> |
| <span class="text-teal-400 mr-2">✓</span> |
| <span>Creative feature engineering techniques</span> |
| </li> |
| <li class="flex items-start"> |
| <span class="text-teal-400 mr-2">✓</span> |
| <span>Experimental model architectures</span> |
| </li> |
| </ul> |
| </div> |
| <div class="order-1 lg:order-2"> |
| <div class="neon-card rounded-2xl p-1 glow-effect"> |
| <div class="bg-gray-900 rounded-2xl p-4"> |
| <div class="aspect-w-16 aspect-h-9 rounded-xl overflow-hidden"> |
| <div class="w-full h-64 bg-gradient-to-br from-purple-900/30 via-blue-900/30 to-teal-900/30 flex items-center justify-center"> |
| <i class="fas fa-project-diagram text-6xl text-blue-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20"> |
| <div class="order-1"> |
| <div class="neon-card rounded-2xl p-1 glow-effect"> |
| <div class="bg-gray-900 rounded-2xl p-4"> |
| <div class="aspect-w-16 aspect-h-9 rounded-xl overflow-hidden"> |
| <div class="w-full h-64 bg-gradient-to-br from-purple-900/30 via-blue-900/30 to-teal-900/30 flex items-center justify-center"> |
| <i class="fas fa-code-branch text-6xl text-teal-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="order-2"> |
| <div class="text-teal-400 text-xl mb-2">02</div> |
| <h3 class="text-2xl font-bold mb-4">Technical Approach</h3> |
| <p class="text-gray-300 mb-6"> |
| The project implements a hybrid architecture that combines traditional supervised learning with novel unsupervised techniques, creating a system that learns both from labeled data and from patterns it discovers on its own. |
| </p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-purple-900/50 text-purple-300 rounded-full text-sm">TensorFlow</span> |
| <span class="px-3 py-1 bg-blue-900/50 text-blue-300 rounded-full text-sm">PyTorch</span> |
| <span class="px-3 py-1 bg-teal-900/50 text-teal-300 rounded-full text-sm">Scikit-learn</span> |
| <span class="px-3 py-1 bg-orange-900/50 text-orange-300 rounded-full text-sm">Numpy</span> |
| <span class="px-3 py-1 bg-pink-900/50 text-pink-300 rounded-full text-sm">Pandas</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="process" class="py-20 px-6 md:px-12 lg:px-24"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 gradient-text text-center">Development Process</h2> |
| |
| <div class="relative"> |
| |
| <div class="hidden md:block absolute left-1/2 h-full w-1 bg-gradient-to-b from-purple-500 to-teal-500 -ml-0.5"></div> |
| |
| |
| <div class="space-y-12"> |
| |
| <div class="relative flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-12 mb-6 md:mb-0 md:text-right"> |
| <div class="inline-block neon-card rounded-xl px-6 py-4"> |
| <h3 class="text-xl font-bold mb-2">Ideation Phase</h3> |
| <p class="text-gray-300"> |
| Brainstorming unconventional approaches to standard ML problems, identifying potential areas for creative solutions. |
| </p> |
| </div> |
| </div> |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-purple-500 text-white font-bold text-lg z-10"> |
| 1 |
| </div> |
| <div class="md:w-1/2 md:pl-12"> |
| <div class="text-gray-400 text-sm md:mt-2"> |
| Week 1-2 |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="relative flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-12 mb-6 md:mb-0 md:text-right"> |
| <div class="text-gray-400 text-sm md:mt-2 md:text-right"> |
| Week 3-4 |
| </div> |
| </div> |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white font-bold text-lg z-10"> |
| 2 |
| </div> |
| <div class="md:w-1/2 md:pl-12"> |
| <div class="inline-block neon-card rounded-xl px-6 py-4"> |
| <h3 class="text-xl font-bold mb-2">Prototyping</h3> |
| <p class="text-gray-300"> |
| Building initial models with unconventional architectures, testing viability of creative approaches. |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="relative flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-12 mb-6 md:mb-0 md:text-right"> |
| <div class="inline-block neon-card rounded-xl px-6 py-4"> |
| <h3 class="text-xl font-bold mb-2">Data Exploration</h3> |
| <p class="text-gray-300"> |
| Applying non-standard preprocessing techniques and discovering hidden patterns in the data. |
| </p> |
| </div> |
| </div> |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-teal-500 text-white font-bold text-lg z-10"> |
| 3 |
| </div> |
| <div class="md:w-1/2 md:pl-12"> |
| <div class="text-gray-400 text-sm md:mt-2"> |
| Week 5-6 |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="relative flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-12 mb-6 md:mb-0 md:text-right"> |
| <div class="text-gray-400 text-sm md:mt-2 md:text-right"> |
| Week 7-8 |
| </div> |
| </div> |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-orange-500 text-white font-bold text-lg z-10"> |
| 4 |
| </div> |
| <div class="md:w-1/2 md:pl-12"> |
| <div class="inline-block neon-card rounded-xl px-6 py-4"> |
| <h3 class="text-xl font-bold mb-2">Model Refinement</h3> |
| <p class="text-gray-300"> |
| Iterating on the most promising approaches, optimizing performance while maintaining creative elements. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="results" class="py-20 px-6 md:px-12 lg:px-24 bg-gradient-to-t from-gray-900/50 to-transparent"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 gradient-text text-center">Results & Insights</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16"> |
| <div class="neon-card rounded-2xl p-6 glow-effect"> |
| <h3 class="text-xl font-bold mb-4 gradient-text">Performance Metrics</h3> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-gray-300">Accuracy</span> |
| <span class="text-purple-400">92.4%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 92.4%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-gray-300">Precision</span> |
| <span class="text-blue-400">89.7%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 89.7%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-gray-300">Recall</span> |
| <span class="text-teal-400">94.2%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2"> |
| <div class="bg-teal-500 h-2 rounded-full" style="width: 94.2%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="neon-card rounded-2xl p-6 glow-effect"> |
| <h3 class="text-xl font-bold mb-4 gradient-text">Key Findings</h3> |
| <ul class="space-y-4 text-gray-300"> |
| <li class="flex items-start"> |
| <span class="text-purple-400 mr-3 mt-1">•</span> |
| <span>Unconventional feature engineering improved model robustness by 18% compared to standard approaches</span> |
| </li> |
| <li class="flex items-start"> |
| <span class="text-blue-400 mr-3 mt-1">•</span> |
| <span>Hybrid architectures showed better generalization on unseen data distributions</span> |
| </li> |
| <li class="flex items-start"> |
| <span class="text-teal-400 mr-3 mt-1">•</span> |
| <span>Creative preprocessing reduced training time by 32% while maintaining accuracy</span> |
| </li> |
| <li class="flex items-start"> |
| <span class="text-orange-400 mr-3 mt-1">•</span> |
| <span>Non-standard evaluation metrics revealed insights missed by traditional measures</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="neon-card rounded-2xl p-6 glow-effect"> |
| <h3 class="text-xl font-bold mb-6 gradient-text">Visual Results</h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="bg-gray-900/50 rounded-xl p-4 flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-400 mb-3"> |
| <i class="fas fa-chart-bar text-2xl"></i> |
| </div> |
| <h4 class="font-bold mb-2">Training Curves</h4> |
| <p class="text-gray-400 text-sm text-center">Showing faster convergence with creative approaches</p> |
| </div> |
| <div class="bg-gray-900/50 rounded-xl p-4 flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mb-3"> |
| <i class="fas fa-project-diagram text-2xl"></i> |
| </div> |
| <h4 class="font-bold mb-2">Model Architecture</h4> |
| <p class="text-gray-400 text-sm text-center">Hybrid design combining multiple approaches</p> |
| </div> |
| <div class="bg-gray-900/50 rounded-xl p-4 flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full bg-teal-500/20 flex items-center justify-center text-teal-400 mb-3"> |
| <i class="fas fa-brain text-2xl"></i> |
| </div> |
| <h4 class="font-bold mb-2">Feature Importance</h4> |
| <p class="text-gray-400 text-sm text-center">Unconventional features showing high predictive power</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="contact" class="py-20 px-6 md:px-12 lg:px-24"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 gradient-text text-center">Get In Touch</h2> |
| |
| <div class="neon-card rounded-2xl p-6 glow-effect"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Contact Information</h3> |
| <div class="space-y-4 text-gray-300"> |
| <div class="flex items-start"> |
| <div class="text-purple-400 mr-4 mt-1"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <div class="font-medium">Email</div> |
| <div>berntaage@example.com</div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="text-blue-400 mr-4 mt-1"> |
| <i class="fas fa-globe"></i> |
| </div> |
| <div> |
| <div class="font-medium">Website</div> |
| <div>berntis.dev</div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="text-teal-400 mr-4 mt-1"> |
| <i class="fab fa-github"></i> |
| </div> |
| <div> |
| <div class="font-medium">GitHub</div> |
| <div>github.com/bernt</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Send a Message</h3> |
| <form class="space-y-4"> |
| <div> |
| <input type="text" placeholder="Your Name" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"> |
| </div> |
| <div> |
| <input type="email" placeholder="Your Email" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"> |
| </div> |
| <div> |
| <textarea placeholder="Your Message" rows="4" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"></textarea> |
| </div> |
| <button type="submit" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-medium hover:opacity-90 transition duration-300 w-full"> |
| Send Message |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="py-12 px-6 md:px-12 lg:px-24 border-t border-gray-800"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="text-xl font-bold gradient-text mb-6 md:mb-0"> |
| Bernt Åge Hansen |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition duration-300"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"> |
| <i class="fab fa-linkedin text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-orange-400 transition duration-300"> |
| <i class="fab fa-medium text-xl"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-8 text-center text-gray-500 text-sm"> |
| © 2025 Bernt Åge Hansen - Applied Machine Learning Exam Project. All rights reserved. |
| </div> |
| </div> |
| </footer> |
| </div> |
| |
| <script> |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| |
| |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); |
| const mobileMenu = document.querySelector('nav'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| mobileMenu.classList.toggle('flex'); |
| mobileMenu.classList.toggle('flex-col'); |
| mobileMenu.classList.toggle('absolute'); |
| mobileMenu.classList.toggle('top-20'); |
| mobileMenu.classList.toggle('right-6'); |
| mobileMenu.classList.toggle('bg-gray-900'); |
| mobileMenu.classList.toggle('p-4'); |
| mobileMenu.classList.toggle('rounded-xl'); |
| mobileMenu.classList.toggle('border'); |
| mobileMenu.classList.toggle('border-gray-800'); |
| mobileMenu.classList.toggle('space-y-4'); |
| mobileMenu.classList.toggle('space-x-0'); |
| }); |
| |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-fadeIn'); |
| } |
| }); |
| }, { |
| threshold: 0.1 |
| }); |
| |
| document.querySelectorAll('.neon-card').forEach(card => { |
| observer.observe(card); |
| }); |
| </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=oyvsar/bernt-ge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
