I want each section to be a tab, and when you click it, we scroll down to the specific section. I don't like the neon and I don't like the 80s vibe. Make it dark theme with liquid theme

index.html

@@ -9,296 +9,320 @@
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Ubuntu+Mono:wght@400;700&display=swap');
-        .glitch {
-            text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
-            animation: glitch 725ms infinite;
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
+            color: #e0e0e0;
         }
-        @keyframes glitch {
-            0% { text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00; }
-            15% { text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00; }
-            16% { text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00; }
-            49% { text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00; }
-            50% { text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00; }
-            99% { text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00; }
-            100% { text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff, -0.04em -0.025em 0 #fffc00; }
-        }
-        .scanlines {
-            position: fixed;
+        
+        .navbar {
+            position: sticky;
             top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(
-                to bottom,
-                rgba(0, 0, 0, 0) 0%,
-                rgba(0, 255, 255, 0.03) 1%
-            );
-            background-size: 100% 0.3rem;
-            pointer-events: none;
-            z-index: 9999;
+            background: rgba(15, 15, 26, 0.9);
+            backdrop-filter: blur(10px);
+            z-index: 1000;
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .nav-tabs {
+            display: flex;
+            justify-content: center;
+            gap: 1.5rem;
         }
-        .pixel-grid {
-            background-image: 
-                linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
-            background-size: 20px 20px;
+        
+        .nav-tab {
+            padding: 0.5rem 1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border-bottom: 2px solid transparent;
+            font-weight: 500;
         }
-        .neon-border {
-            box-shadow: 0 0 10px #00fffc, 0 0 20px #00fffc, inset 0 0 10px #00fffc;
-            border: 1px solid #00fffc;
+        
+        .nav-tab:hover, .nav-tab.active {
+            color: #4fc3f7;
+            border-bottom-color: #4fc3f7;
         }
-        .neon-text {
-            color: #00fffc;
-            text-shadow: 0 0 5px #00fffc, 0 0 10px #00fffc;
+        
+        .section {
+            padding: 4rem 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         }
-        .typewriter {
-            border-right: 3px solid #00fffc;
-            animation: blink-caret 0.75s step-end infinite;
+        
+        .section-title {
+            color: #ffffff;
+            font-size: 1.75rem;
+            margin-bottom: 2rem;
+            position: relative;
+            display: inline-block;
+        }
+        
+        .section-title:after {
+            content: '';
+            position: absolute;
+            bottom: -8px;
+            left: 0;
+            width: 50px;
+            height: 3px;
+            background: linear-gradient(90deg, #4fc3f7, #2962ff);
+            border-radius: 3px;
         }
-        @keyframes blink-caret {
-            from, to { border-color: transparent }
-            50% { border-color: #00fffc; }
+        
+        .card {
+            background: rgba(30, 30, 46, 0.6);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 2rem;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+        
+        .skill-chip {
+            background: rgba(79, 195, 247, 0.1);
+            color: #4fc3f7;
+            border-radius: 20px;
+            padding: 0.25rem 0.75rem;
+            font-size: 0.8rem;
+            display: inline-block;
+            margin: 0.25rem;
+        }
+        
+        .liquid-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.15;
+            background: url('https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets/fluid-design/fluid-design.svg') no-repeat center center;
+            background-size: cover;
         }
     </style>
 </head>
-<body class="bg-black text-green-400 font-mono min-h-screen overflow-x-hidden pixel-grid">
-    <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
-    <div class="scanlines"></div>
+<body class="min-h-screen overflow-x-hidden">
+    <div class="liquid-bg"></div>
+    
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="container mx-auto px-4">
+            <div class="nav-tabs">
+                <div class="nav-tab" onclick="scrollToSection('summary')">Summary</div>
+                <div class="nav-tab" onclick="scrollToSection('experience')">Experience</div>
+                <div class="nav-tab" onclick="scrollToSection('projects')">Projects</div>
+                <div class="nav-tab" onclick="scrollToSection('education')">Education</div>
+                <div class="nav-tab" onclick="scrollToSection('skills')">Skills</div>
+                <div class="nav-tab" onclick="scrollToSection('contact')">Contact</div>
+            </div>
+        </div>
+    </nav>
 
     <!-- Main Container -->
-    <div class="container mx-auto px-4 py-12 max-w-6xl relative">
+    <div class="container mx-auto px-4 py-12 max-w-6xl">
         <!-- Header -->
-        <header class="mb-12 text-center relative">
-            <h1 class="glitch text-5xl md:text-7xl font-bold mb-2 font-['Press_Start_2P']">DANIEL LINDH</h1>
-            <div class="flex justify-center items-center">
-                <div class="neon-border px-6 py-2 rounded-full inline-block">
-                    <h2 class="text-xl md:text-2xl font-bold tracking-widest">SENIOR DATA SCIENTIST & AI ENGINEER</h2>
-                </div>
-            </div>
-            <div class="mt-6 flex justify-center space-x-4">
-                <a href="#" class="neon-text hover:text-white transition-all duration-300 flex items-center">
-                    <i data-feather="mail" class="mr-2"></i> [your email here]
+        <header class="mb-16 text-center">
+            <h1 class="text-5xl md:text-6xl font-bold mb-4 text-white">Daniel Lindh</h1>
+            <h2 class="text-xl md:text-2xl font-semibold text-gray-300 mb-8">Senior Data Scientist & AI Engineer</h2>
+            <div class="flex justify-center space-x-6">
+                <a href="#" class="flex items-center text-gray-300 hover:text-white transition-colors">
+                    <i data-feather="mail" class="mr-2"></i> Email
+                </a>
+                <a href="#" class="flex items-center text-gray-300 hover:text-white transition-colors">
+                    <i data-feather="linkedin" class="mr-2"></i> LinkedIn
                 </a>
-                <a href="#" class="neon-text hover:text-white transition-all duration-300 flex items-center">
-                    <i data-feather="linkedin" class="mr-2"></i> [LinkedIn/GitHub]
+                <a href="#" class="flex items-center text-gray-300 hover:text-white transition-colors">
+                    <i data-feather="github" class="mr-2"></i> GitHub
                 </a>
             </div>
         </header>
-
-        <!-- Main Content Grid -->
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <!-- Left Column -->
-            <div class="lg:col-span-2 space-y-8">
-                <!-- Professional Summary -->
-                <section class="neon-border p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm">
-                    <h3 class="text-2xl font-bold mb-4 neon-text">PROFESSIONAL SUMMARY</h3>
-                    <p class="leading-relaxed">
-                        Senior Data Scientist and AI Engineer with a PhD in Cognitive Neuroscience and a strong foundation in machine learning, large language models, and data-driven health research. Experienced in building AI products from prototype to production using AWS, Python, and cloud-native technologies. Combines deep expertise in cognitive science and neuroscience with modern AI to develop user-centered, evidence-based systems.
-                    </p>
-                </section>
-
-                <!-- Professional Experience -->
-                <section class="neon-border p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm">
-                    <h3 class="text-2xl font-bold mb-4 neon-text">PROFESSIONAL EXPERIENCE</h3>
-                    
-                    <!-- NOWATCH -->
-                    <div class="mb-6">
-                        <div class="flex justify-between items-start">
-                            <h4 class="text-xl font-bold neon-text">NOWATCH – Amsterdam, Netherlands</h4>
-                            <span class="bg-purple-600 text-xs px-2 py-1 rounded">2024–Present</span>
-                        </div>
-                        <p class="font-bold mb-2">Senior Data Scientist & AI Engineer</p>
-                        <ul class="list-disc pl-5 space-y-2">
-                            <li>Lead development of AI-driven health insights integrating stress, recovery, sleep, and activity data.</li>
-                            <li>Built and deployed modular AWS Lambda + Step Function pipelines for AI-generated user reports.</li>
-                            <li>Designed stress classification algorithms and "dominant state" logic using physiological data.</li>
-                        </ul>
-                        <div class="mt-3 flex flex-wrap gap-2">
-                            <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Python</span>
-                            <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">AWS Lambda</span>
-                            <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Step Functions</span>
-                            <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Bedrock/Anthropic</span>
-                        </div>
+        <!-- Professional Summary -->
+        <section id="summary" class="section">
+            <div class="card">
+                <h3 class="section-title">Professional Summary</h3>
+                <p class="text-gray-300 leading-relaxed">
+                    Senior Data Scientist and AI Engineer with a PhD in Cognitive Neuroscience and a strong foundation in machine learning, large language models, and data-driven health research. Experienced in building AI products from prototype to production using AWS, Python, and cloud-native technologies. Combines deep expertise in cognitive science and neuroscience with modern AI to develop user-centered, evidence-based systems.
+                </p>
+            </div>
+        </section>
+        <!-- Professional Experience -->
+        <section id="experience" class="section">
+            <div class="card">
+                <h3 class="section-title">Professional Experience</h3>
+                
+                <!-- NOWATCH -->
+                <div class="mb-8">
+                    <div class="flex justify-between items-start">
+                        <h4 class="text-xl font-bold text-white">NOWATCH – Amsterdam, Netherlands</h4>
+                        <span class="text-blue-400 text-sm">2024–Present</span>
                     </div>
-                    
-                    <!-- Learnwise -->
-                    <div class="mb-6">
-                        <div class="flex justify-between items-start">
-                            <h4 class="text-xl font-bold neon-text">Learnwise – Remote</h4>
-                            <span class="bg-purple-600 text-xs px-2 py-1 rounded">2023–2024</span>
-                        </div>
-                        <p class="font-bold mb-2">AI Engineer & Data Scientist</p>
-                        <ul class="list-disc pl-5 space-y-2">
-                            <li>Built LLM testing and evaluation platforms for universities.</li>
-                            <li>Created semantic clustering pipeline using embeddings and UMAP.</li>
-                            <li>Integrated LLM analytics directly into GitHub repositories for educational use.</li>
-                        </ul>
-                        <div class="mt-3 flex flex-wrap gap-2">
-                            <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Python</span>
-                            <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">OpenAI API</span>
-                            <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Hugging Face</span>
-                            <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">FastAPI</span>
-                        </div>
+                    <p class="font-semibold mb-3 text-gray-300">Senior Data Scientist & AI Engineer</p>
+                    <ul class="list-disc pl-5 space-y-2 text-gray-300">
+                        <li>Lead development of AI-driven health insights integrating stress, recovery, sleep, and activity data.</li>
+                        <li>Built and deployed modular AWS Lambda + Step Function pipelines for AI-generated user reports.</li>
+                        <li>Designed stress classification algorithms and "dominant state" logic using physiological data.</li>
+                    </ul>
+                    <div class="mt-4 flex flex-wrap gap-2">
+                        <span class="skill-chip">Python</span>
+                        <span class="skill-chip">AWS Lambda</span>
+                        <span class="skill-chip">Step Functions</span>
+                        <span class="skill-chip">Bedrock/Anthropic</span>
                     </div>
-                    
-                    <!-- Additional experiences would go here -->
-                </section>
-
-                <!-- Selected Research Projects -->
-                <section class="neon-border p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm">
-                    <h3 class="text-2xl font-bold mb-4 neon-text">SELECTED RESEARCH PROJECTS</h3>
-                    <ul class="space-y-4">
-                        <li class="flex items-start">
-                            <span class="text-purple-400 mr-2">▹</span>
-                            <span><strong>Attentional Blink Study:</strong> Designed immediate response paradigm and applied drift diffusion modeling.</span>
-                        </li>
-                        <li class="flex items-start">
-                            <span class="text-purple-400 mr-2">▹</span>
-                            <span><strong>Visual Object Recognition:</strong> Used CNNs as computational models of human visual recognition.</span>
-                        </li>
-                        <li class="flex items-start">
-                            <span class="text-purple-400 mr-2">▹</span>
-                            <span><strong>Affective Physiology Study:</strong> Predicted attraction during blind dates using heart rate and pupil dilation data.</span>
-                        </li>
+                </div>
+                
+                <!-- Learnwise -->
+                <div class="mb-8">
+                    <div class="flex justify-between items-start">
+                        <h4 class="text-xl font-bold text-white">Learnwise – Remote</h4>
+                        <span class="text-blue-400 text-sm">2023–2024</span>
+                    </div>
+                    <p class="font-semibold mb-3 text-gray-300">AI Engineer & Data Scientist</p>
+                    <ul class="list-disc pl-5 space-y-2 text-gray-300">
+                        <li>Built LLM testing and evaluation platforms for universities.</li>
+                        <li>Created semantic clustering pipeline using embeddings and UMAP.</li>
+                        <li>Integrated LLM analytics directly into GitHub repositories for educational use.</li>
                     </ul>
-                </section>
+                    <div class="mt-4 flex flex-wrap gap-2">
+                        <span class="skill-chip">Python</span>
+                        <span class="skill-chip">OpenAI API</span>
+                        <span class="skill-chip">Hugging Face</span>
+                        <span class="skill-chip">FastAPI</span>
+                    </div>
+                </div>
             </div>
+        </section>
+        <!-- Selected Research Projects -->
+        <section id="projects" class="section">
+            <div class="card">
+                <h3 class="section-title">Selected Research Projects</h3>
+                <ul class="space-y-4 text-gray-300">
+                    <li class="flex items-start">
+                        <span class="text-blue-400 mr-3">▹</span>
+                        <span><strong class="text-white">Attentional Blink Study:</strong> Designed immediate response paradigm and applied drift diffusion modeling.</span>
+                    </li>
+                    <li class="flex items-start">
+                        <span class="text-blue-400 mr-3">▹</span>
+                        <span><strong class="text-white">Visual Object Recognition:</strong> Used CNNs as computational models of human visual recognition.</span>
+                    </li>
+                    <li class="flex items-start">
+                        <span class="text-blue-400 mr-3">▹</span>
+                        <span><strong class="text-white">Affective Physiology Study:</strong> Predicted attraction during blind dates using heart rate and pupil dilation data.</span>
+                    </li>
+                </ul>
+            </div>
+        </section>
 
-            <!-- Right Column -->
-            <div class="space-y-8">
-                <!-- Education -->
-                <section class="neon-border p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm">
-                    <h3 class="text-2xl font-bold mb-4 neon-text">EDUCATION</h3>
-                    <div class="space-y-4">
-                        <div>
-                            <h4 class="font-bold">PhD in Cognitive Neuroscience</h4>
-                            <p class="text-sm">University of Amsterdam & University of Birmingham</p>
-                        </div>
-                        <div>
-                            <h4 class="font-bold">Research Master in Cognitive Neuroscience</h4>
-                            <p class="text-sm">University of Amsterdam</p>
-                        </div>
-                        <div>
-                            <h4 class="font-bold">Bachelor in Cognitive Science</h4>
-                            <p class="text-sm">University of Skövde, Sweden</p>
-                        </div>
+        <!-- Education -->
+        <section id="education" class="section">
+            <div class="card">
+                <h3 class="section-title">Education</h3>
+                <div class="space-y-4 text-gray-300">
+                    <div>
+                        <h4 class="font-semibold text-white">PhD in Cognitive Neuroscience</h4>
+                        <p>University of Amsterdam & University of Birmingham</p>
                     </div>
-                </section>
-
-                <!-- Technical Skills -->
-                <section class="neon-border p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm">
-                    <h3 class="text-2xl font-bold mb-4 neon-text">TECHNICAL SKILLS</h3>
-                    <div class="space-y-3">
-                        <div>
-                            <h4 class="font-bold mb-1">Languages</h4>
-                            <div class="flex flex-wrap gap-2">
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Python</span>
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">MATLAB</span>
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">R</span>
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">SQL</span>
-                            </div>
-                        </div>
-                        <div>
-                            <h4 class="font-bold mb-1">Machine Learning</h4>
-                            <div class="flex flex-wrap gap-2">
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">CNNs</span>
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">LLMs</span>
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Bayesian</span>
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Forecasting</span>
-                            </div>
-                        </div>
-                        <div>
-                            <h4 class="font-bold mb-1">Tools</h4>
-                            <div class="flex flex-wrap gap-2">
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">AWS</span>
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Docker</span>
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">FastAPI</span>
-                                <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Streamlit</span>
-                            </div>
-                        </div>
+                    <div>
+                        <h4 class="font-semibold text-white">Research Master in Cognitive Neuroscience</h4>
+                        <p>University of Amsterdam</p>
                     </div>
-                </section>
+                    <div>
+                        <h4 class="font-semibold text-white">Bachelor in Cognitive Science</h4>
+                        <p>University of Skövde, Sweden</p>
+                    </div>
+                </div>
+            </div>
+        </section>
 
-                <!-- Languages -->
-                <section class="neon-border p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm">
-                    <h3 class="text-2xl font-bold mb-4 neon-text">LANGUAGES</h3>
-                    <div class="space-y-2">
-                        <div class="flex justify-between items-center">
-                            <span>English</span>
-                            <span class="text-purple-400">Fluent</span>
+        <!-- Technical Skills -->
+        <section id="skills" class="section">
+            <div class="card">
+                <h3 class="section-title">Technical Skills</h3>
+                <div class="space-y-6">
+                    <div>
+                        <h4 class="font-semibold text-white mb-3">Languages</h4>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="skill-chip">Python</span>
+                            <span class="skill-chip">MATLAB</span>
+                            <span class="skill-chip">R</span>
+                            <span class="skill-chip">SQL</span>
                         </div>
-                        <div class="flex justify-between items-center">
-                            <span>Swedish</span>
-                            <span class="text-purple-400">Native</span>
+                    </div>
+                    <div>
+                        <h4 class="font-semibold text-white mb-3">Machine Learning</h4>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="skill-chip">CNNs</span>
+                            <span class="skill-chip">LLMs</span>
+                            <span class="skill-chip">Bayesian</span>
+                            <span class="skill-chip">Forecasting</span>
                         </div>
-                        <div class="flex justify-between items-center">
-                            <span>Dutch</span>
-                            <span class="text-purple-400">Basic</span>
+                    </div>
+                    <div>
+                        <h4 class="font-semibold text-white mb-3">Tools</h4>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="skill-chip">AWS</span>
+                            <span class="skill-chip">Docker</span>
+                            <span class="skill-chip">FastAPI</span>
+                            <span class="skill-chip">Streamlit</span>
                         </div>
                     </div>
-                </section>
+                </div>
+            </div>
+        </section>
 
-                <!-- Personal Interests -->
-                <section class="neon-border p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm">
-                    <h3 class="text-2xl font-bold mb-4 neon-text">PERSONAL INTERESTS</h3>
-                    <div class="flex flex-wrap gap-2">
-                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Padel</span>
-                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Tennis</span>
-                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Gym</span>
-                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Music</span>
-                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Clubbing</span>
-                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">AI News</span>
-                        <span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Traveling</span>
+        <!-- Contact -->
+        <section id="contact" class="section">
+            <div class="card">
+                <h3 class="section-title">Contact</h3>
+                <div class="space-y-4 text-gray-300">
+                    <div class="flex items-center">
+                        <i data-feather="mail" class="mr-3 text-blue-400"></i>
+                        <span>your.email@example.com</span>
                     </div>
-                </section>
+                    <div class="flex items-center">
+                        <i data-feather="linkedin" class="mr-3 text-blue-400"></i>
+                        <span>linkedin.com/in/yourprofile</span>
+                    </div>
+                    <div class="flex items-center">
+                        <i data-feather="github" class="mr-3 text-blue-400"></i>
+                        <span>github.com/yourusername</span>
+                    </div>
+                </div>
             </div>
-        </div>
+        </section>
 
         <!-- Footer -->
-        <footer class="mt-12 text-center text-sm neon-text">
-            <p>© 2024 DANIEL LINDH | DESIGNED WITH 80S RETRO VIBES</p>
+        <footer class="mt-16 text-center text-sm text-gray-400">
+            <p>© 2024 Daniel Lindh</p>
         </footer>
-    </div>
-
+</div>
     <script>
-        // Initialize Vanta.js background
-        VANTA.NET({
-            el: "#vanta-bg",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0x0fffc,
-            backgroundColor: 0x0,
-            points: 12.00,
-            maxDistance: 22.00,
-            spacing: 18.00
-        });
-
-        // Typewriter effect
         document.addEventListener('DOMContentLoaded', () => {
             feather.replace();
             
-            // Glitch effect on hover
-            const glitchElements = document.querySelectorAll('.glitch');
-            glitchElements.forEach(el => {
-                el.addEventListener('mouseenter', () => {
-                    el.style.animation = 'glitch 325ms infinite';
+            // Smooth scroll to sections
+            window.scrollToSection = function(id) {
+                document.getElementById(id).scrollIntoView({
+                    behavior: 'smooth'
                 });
-                el.addEventListener('mouseleave', () => {
-                    el.style.animation = 'glitch 725ms infinite';
+                
+                // Update active tab
+                document.querySelectorAll('.nav-tab').forEach(tab => {
+                    tab.classList.remove('active');
                 });
-            });
-
-            // Animate elements on scroll
+                document.querySelector(`.nav-tab[onclick="scrollToSection('${id}')"]`).classList.add('active');
+            };
+            
+            // Initial animation
             anime({
-                targets: '.neon-border',
+                targets: '.card',
                 opacity: [0, 1],
-                translateY: [20, 0],
+                translateY: [30, 0],
                 delay: anime.stagger(100),
                 easing: 'easeOutExpo',
                 duration: 800