diff --git a/index.html b/index.html
index c4b5354..151a230 100644
--- a/index.html
+++ b/index.html
@@ -1,159 +1,212 @@
-<!DOCTYPE html>
-<html lang="en" class="light">
-<head>
-    <meta charset="UTF-8">
-    <meta name="description" content="Itziar ZG - Vanguard Designer Portfolio">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="description"
+      content="Itziar ZG - Vanguard Designer Portfolio"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Itziar ZG - Vanguard CV</title>
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="stylesheet" href="/styles/main.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap" rel="stylesheet">
-</head>
-<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 min-h-screen pb-24">
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎨</text></svg>"
+    />
+    <link rel="stylesheet" href="styles/main.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
     <!-- Top Navigation -->
-    <nav class="sticky top-0 z-50 flex items-center justify-between p-4 glass-dark">
-        <div class="flex items-center gap-2">
-            <span class="material-symbols-outlined text-primary text-3xl">deployed_code</span>
-            <h1 class="text-xl font-bold tracking-tight">Itziar ZG</h1>
-        </div>
-        <div class="flex items-center gap-2">
-            <button 
-                id="language-toggle"
-                class="p-2 rounded-full hover:bg-primary/10 transition-colors"
-                aria-label="Toggle language"
-            >
-                <span class="material-symbols-outlined text-primary">translate</span>
-            </button>
-            <button 
-                id="theme-toggle"
-                class="p-2 rounded-full hover:bg-primary/10 transition-colors"
-                aria-label="Toggle theme"
-            >
-                <span class="material-symbols-outlined text-primary">dark_mode</span>
-            </button>
-        </div>
+    <nav>
+      <div>
+        <h1>Under construction Itziar ZG</h1>
+      </div>
+      <!-- <div>
+        <button
+          id="language-toggle"
+          aria-label="Toggle language"
+        >
+          <span class="material-symbols-outlined">translate</span>
+        </button>
+        <button
+          id="theme-toggle"
+          aria-label="Toggle theme"
+        >
+          <span class="material-symbols-outlined">dark_mode</span>
+        </button>
+      </div> -->
     </nav>
 
     <!-- Hero Section -->
-    <header class="relative px-6 pt-10 pb-16 overflow-hidden">
-        <div class="absolute top-0 right-0 -z-10 w-64 h-64 bg-primary/20 rounded-full blur-[100px]"></div>
-        <div class="absolute bottom-0 left-0 -z-10 w-48 h-48 bg-purple-600/10 rounded-full blur-[80px]"></div>
-        
-        <div class="flex flex-col items-center text-center gap-6">
-            <div class="relative p-1 rounded-full bg-gradient-to-tr from-primary to-purple-400">
-                <div 
-                    class="w-32 h-32 rounded-full bg-cover bg-center border-4 border-background-dark" 
-                    alt="Professional portrait of a female digital designer" 
-                    style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD6WeB0nJf-ZCuFJ6oa6vOkhHSa7HvieIuXVDVhw_U7ITO-kq3Gi8J9JWbH0WOiEd2zxiItpdWLWJY89C09LQncuy8iD4pjprH8H7aiGUya87L_ap88RqW2GuhhUJHNt74NW_m7y4KGn43RzotxT69wM9i-ri2HEEMQtBZRWPUtWgjSqSguENLtttWkpQrUrXBoy8TXkmvdya-d9S9QKMbaDSVa_6eVpI7uR_BAB1wRlMdbAFlVZVmzUG3HafS5P4jOA1I0nkvNChY')"
-                ></div>
-            </div>
-            
-            <div class="space-y-2">
-                <h2 class="text-4xl font-bold tracking-tighter" data-i18n="hero.title">Vanguard Designer</h2>
-                <p class="text-primary font-medium tracking-widest uppercase text-sm" data-i18n="hero.subtitle">Crafting Digital Excellence</p>
-                <div class="flex gap-2 justify-center mt-4">
-                    <span class="px-3 py-1 rounded-full text-xs font-semibold glass border border-primary/20">UI/UX</span>
-                    <span class="px-3 py-1 rounded-full text-xs font-semibold glass border border-primary/20">Motion</span>
-                    <span class="px-3 py-1 rounded-full text-xs font-semibold glass border border-primary/20">Strategy</span>
-                </div>
-            </div>
+    <!-- <header>
+      <div></div>
+      <div></div>
+
+      <div>
+        <div>
+          <div
+            alt="Professional portrait of a female digital designer"
+            style="
+              background-image: url(&quot;https://lh3.googleusercontent.com/aida-public/AB6AXuD6WeB0nJf-ZCuFJ6oa6vOkhHSa7HvieIuXVDVhw_U7ITO-kq3Gi8J9JWbH0WOiEd2zxiItpdWLWJY89C09LQncuy8iD4pjprH8H7aiGUya87L_ap88RqW2GuhhUJHNt74NW_m7y4KGn43RzotxT69wM9i-ri2HEEMQtBZRWPUtWgjSqSguENLtttWkpQrUrXBoy8TXkmvdya-d9S9QKMbaDSVa_6eVpI7uR_BAB1wRlMdbAFlVZVmzUG3HafS5P4jOA1I0nkvNChY&quot;);
+            "
+          ></div>
         </div>
-    </header>
+
+        <div>
+          <h2
+            data-i18n="hero.title"
+          >
+            Vanguard Designer
+          </h2>
+          <p
+            data-i18n="hero.subtitle"
+          >
+            Crafting Digital Excellence
+          </p>
+          <div>
+            <span
+              >UI/UX</span
+            >
+            <span
+              >Motion</span
+            >
+            <span
+              >Strategy</span
+            >
+          </div>
+        </div>
+      </div>
+    </header> -->
 
     <!-- About Section -->
-    <section class="px-6 mb-12">
-        <div class="glass-dark rounded-xl p-6 space-y-4">
-            <div class="flex items-center gap-2 text-primary">
-                <span class="material-symbols-outlined">person</span>
-                <h3 class="font-bold text-lg" data-i18n="about.title">About Me</h3>
-            </div>
-            <p class="text-slate-400 leading-relaxed" data-i18n="about.description">
-                A sophisticated designer specializing in high-end digital experiences with a focus on dark aesthetics, glassmorphism, and modern typography. Transforming complex problems into elegant, intuitive interfaces.
-            </p>
-            <div class="flex gap-4 pt-2">
-                <button class="flex-1 bg-primary text-white py-3 rounded-lg font-bold shadow-lg shadow-primary/20" data-i18n="about.downloadCV">Download CV</button>
-                <button class="flex-1 border border-primary/30 text-primary py-3 rounded-lg font-bold glass" data-i18n="about.contact">Contact</button>
-            </div>
+    <!-- <section>
+      <div>
+        <div>
+          <span class="material-symbols-outlined">person</span>
+          <h3 data-i18n="about.title">About Me</h3>
         </div>
-    </section>
+        <p data-i18n="about.description">
+          A sophisticated designer specializing in high-end digital experiences
+          with a focus on dark aesthetics, glassmorphism, and modern typography.
+          Transforming complex problems into elegant, intuitive interfaces.
+        </p>
+        <div>
+          <button
+            data-i18n="about.downloadCV"
+          >
+            Download CV
+          </button>
+          <button
+            data-i18n="about.contact"
+          >
+            Contact
+          </button>
+        </div>
+      </div>
+    </section> -->
 
     <!-- Skills Section -->
-    <section class="px-6 mb-12">
-        <h3 class="text-2xl font-bold mb-6 px-1" data-i18n="skills.title">Core Expertise</h3>
-        <div class="grid grid-cols-1 gap-4">
-            <div class="glass-dark p-5 rounded-xl border-l-4 border-primary">
-                <div class="flex justify-between items-center mb-3">
-                    <span class="font-bold">Visual Design</span>
-                    <span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded">Expert</span>
-                </div>
-                <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
-                    <div class="bg-primary h-full w-[95%]"></div>
-                </div>
-            </div>
-            <div class="glass-dark p-5 rounded-xl border-l-4 border-primary">
-                <div class="flex justify-between items-center mb-3">
-                    <span class="font-bold">Prototyping</span>
-                    <span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded">Advanced</span>
-                </div>
-                <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
-                    <div class="bg-primary h-full w-[88%]"></div>
-                </div>
-            </div>
-            <div class="glass-dark p-5 rounded-xl border-l-4 border-primary">
-                <div class="flex justify-between items-center mb-3">
-                    <span class="font-bold">Interaction Design</span>
-                    <span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded">Advanced</span>
-                </div>
-                <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
-                    <div class="bg-primary h-full w-[82%]"></div>
-                </div>
-            </div>
+    <!-- <section>
+      <h3 data-i18n="skills.title">
+        Core Expertise
+      </h3>
+      <div>
+        <div>
+          <div>
+            <span>Visual Design</span>
+            <span
+              >Expert</span
+            >
+          </div>
+          <div>
+            <div>
+          </div>
         </div>
-    </section>
+        <div>
+          <div>
+            <span>Prototyping</span>
+            <span>
+              >Advanced</span
+            >
+          </div>
+          <div>
+            <div>
+          </div>
+        </div>
+        <div>
+          <div>
+            <span>Interaction Design</span>
+            <span>
+              >Advanced</span
+            >
+          </div>
+          <div>
+            <div>
+          </div>
+        </div>
+      </div>
+    </section> -->
 
     <!-- Projects Section -->
-    <section class="px-6 mb-12">
-        <div class="flex justify-between items-end mb-6 px-1">
-            <h3 class="text-2xl font-bold" data-i18n="projects.title">Latest Work</h3>
-            <a class="text-primary text-sm font-semibold" href="#" data-i18n="projects.viewAll">View All</a>
-        </div>
-        <div class="flex flex-col gap-6" id="projects-container">
-            <!-- Projects will be inserted here by JavaScript -->
-        </div>
-    </section>
+    <!-- <section>
+      <div>
+        <h3 data-i18n="projects.title">
+          Latest Work
+        </h3>
+        <a
+          href="#"
+          data-i18n="projects.viewAll"
+          >View All</a
+        >
+      </div>
+      <div id="projects-container">
+        <!-- Projects will be inserted here by JavaScript -->
+    <!-- </div>
+    </section> -->
 
     <!-- Experience Timeline -->
-    <section class="px-6 mb-12">
-        <h3 class="text-2xl font-bold mb-6 px-1" data-i18n="experience.title">Experience</h3>
-        <div class="space-y-8 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-primary/20" id="experience-container">
-            <!-- Experience will be inserted here by JavaScript -->
-        </div>
-    </section>
+    <!-- <section>
+            <h3 data-i18n="experience.title">
+                Experience
+            </h3>
+            <div
+                id="experience-container"
+            >
+                <!-- Experience will be inserted here by JavaScript -->
+    <!-- </div>
+            </section> -->
 
     <!-- Bottom Navigation Bar -->
-    <div class="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-md z-50">
-        <div class="glass-dark rounded-full px-6 py-3 flex items-center justify-between border border-primary/30 shadow-2xl shadow-primary/20">
-            <a class="flex flex-col items-center gap-1 text-primary" href="#">
-                <span class="material-symbols-outlined fill-1">home</span>
-            </a>
-            <a class="flex flex-col items-center gap-1 text-slate-500" href="#">
-                <span class="material-symbols-outlined">work</span>
-            </a>
-            <a class="flex flex-col items-center gap-1 text-slate-500" href="#">
-                <span class="material-symbols-outlined">grid_view</span>
-            </a>
-            <a class="flex flex-col items-center gap-1 text-slate-500" href="#">
-                <span class="material-symbols-outlined">mail</span>
-            </a>
-            <a class="flex flex-col items-center gap-1 text-slate-500" href="#">
-                <span class="material-symbols-outlined">person</span>
-            </a>
-        </div>
-    </div>
+    <!-- <div>
+      <div>
+        <a href="#">
+          <span class="material-symbols-outlined fill-1">home</span>
+        </a>
+        <a href="#">
+          <span class="material-symbols-outlined">work</span>
+        </a>
+        <a href="#">
+          <span class="material-symbols-outlined">grid_view</span>
+        </a>
+        <a href="#">
+          <span class="material-symbols-outlined">mail</span>
+        </a>
+        <a href="#">
+          <span class="material-symbols-outlined">person</span>
+        </a>
+      </div>
+    </div> -->
 
-    <script src="/js/main.js"></script>
-</body>
+    <script src="js/main.js"></script>
+  </body>
 </html>
diff --git a/public/scripts/language-toggle.js b/js/language-toggle.js
similarity index 100%
rename from public/scripts/language-toggle.js
rename to js/language-toggle.js
diff --git a/public/scripts/theme-toggle.js b/js/theme-toggle.js
similarity index 100%
rename from public/scripts/theme-toggle.js
rename to js/theme-toggle.js
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 7f48a94..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index f157bd1..0000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>
diff --git a/src/pages/portfolio.astro b/src/pages/portfolio.astro
deleted file mode 100644
index dc3b9db..0000000
--- a/src/pages/portfolio.astro
+++ /dev/null
@@ -1,217 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import '../styles/global.css';
-import { translations, type Language } from '../i18n/ui';
-
-const lang: Language = 'en';
-const t = translations[lang];
-
-const projects = [
-  {
-    id: 1,
-    title: 'Luminary App',
-    description: 'A fintech dashboard redesign for high-net-worth individuals.',
-    url: 'luminary-project.co',
-    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDuiRGNBP07ZrmaH7F-Q5XCG8XcmSnVisQQn-Tq4zMmt4oxFQYhnVmEZ16pqAEXpXmPJ29Xc42MlLHJHMla4Q1dMWqm2apfbWMmKQW4gH3fD35Piy_YM1xG2DEHO_es1DqVWQ1GzgmjaRrLehiCzLynVjvtlIg7p5NL8kDBwKBkPqk_nYfYK7jv1lDBrVN4AZ1Hz_j_sRfkerkDWmP2oaTSQh0gN2DLNyN-r34Nda4Dp3GWFWRjZSlivobGKj0mj0eg7QK_Fqcp5GU',
-  },
-  {
-    id: 2,
-    title: 'Ether OS',
-    description: 'A minimalist operating system concept based on spatial UI.',
-    url: 'ether-spatial.io',
-    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDvWd-Z_6rj37HlgWlrmx1VJHroq2bg6Pv0atKO0GnAF5_74-yfWaASnLWaWh5J6NiThTvt1W3avgzNI3bOpEG0GoVeYjwZxqMwZZRIiaaODFunpArG-H2otP37dkbfuWzOP_QoEWn6INmZ8YFm50k3YDvoCyZNrnv1dETjWlyg2cok9MP4IIqJLDVxp5Yi32R9BUDgxGlVWLUceUR71hTQRKQqKI9jsQPH7E0Y1OLKeCOZ1Wo-RKabzipc2Vtvmo6RtGvT2X0VoSE',
-  },
-];
-
-const skills = [
-  { name: 'Visual Design', level: 95, category: 'Expert' },
-  { name: 'Prototyping', level: 88, category: 'Advanced' },
-  { name: 'Interaction Design', level: 82, category: 'Advanced' },
-];
-
-const experience = [
-  {
-    period: '2022 - Present',
-    title: 'Senior UX Designer',
-    company: 'Studio Vanta • Remote',
-    description: 'Leading the design language for next-gen SaaS products and immersive web experiences.',
-    isActive: true,
-  },
-  {
-    period: '2020 - 2022',
-    title: 'Product Designer',
-    company: 'Flow Digital • Madrid',
-    description: 'Conceptualized and launched 4 mobile applications with over 1M combined downloads.',
-    isActive: false,
-  },
-];
----
-
-<Layout title="Itziar ZG - Vanguard CV">
-  <!-- Top Navigation -->
-  <nav class="sticky top-0 z-50 flex items-center justify-between p-4 glass-dark">
-    <div class="flex items-center gap-2">
-      <span class="material-symbols-outlined text-primary text-3xl">deployed_code</span>
-      <h1 class="text-xl font-bold tracking-tight">Itziar ZG</h1>
-    </div>
-    <div class="flex items-center gap-2">
-      <button 
-        onclick="toggleLanguage()"
-        class="p-2 rounded-full hover:bg-primary/10 transition-colors"
-      >
-        <span class="material-symbols-outlined text-primary">translate</span>
-      </button>
-      <button 
-        onclick="toggleTheme()"
-        class="p-2 rounded-full hover:bg-primary/10 transition-colors"
-      >
-        <span class="material-symbols-outlined text-primary">dark_mode</span>
-      </button>
-    </div>
-  </nav>
-
-  <!-- Hero Section -->
-  <header class="relative px-6 pt-10 pb-16 overflow-hidden">
-    <div class="absolute top-0 right-0 -z-10 w-64 h-64 bg-primary/20 rounded-full blur-[100px]"></div>
-    <div class="absolute bottom-0 left-0 -z-10 w-48 h-48 bg-purple-600/10 rounded-full blur-[80px]"></div>
-    
-    <div class="flex flex-col items-center text-center gap-6">
-      <div class="relative p-1 rounded-full bg-gradient-to-tr from-primary to-purple-400">
-        <div 
-          class="w-32 h-32 rounded-full bg-cover bg-center border-4 border-background-dark" 
-          data-alt="Professional portrait of a female digital designer" 
-          style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD6WeB0nJf-ZCuFJ6oa6vOkhHSa7HvieIuXVDVhw_U7ITO-kq3Gi8J9JWbH0WOiEd2zxiItpdWLWJY89C09LQncuy8iD4pjprH8H7aiGUya87L_ap88RqW2GuhhUJHNt74NW_m7y4KGn43RzotxT69wM9i-ri2HEEMQtBZRWPUtWgjSqSguENLtttWkpQrUrXBoy8TXkmvdya-d9S9QKMbaDSVa_6eVpI7uR_BAB1wRlMdbAFlVZVmzUG3HafS5P4jOA1I0nkvNChY')"
-        ></div>
-      </div>
-      
-      <div class="space-y-2">
-        <h2 class="text-4xl font-bold tracking-tighter">Vanguard Designer</h2>
-        <p class="text-primary font-medium tracking-widest uppercase text-sm">Crafting Digital Excellence</p>
-        <div class="flex gap-2 justify-center mt-4">
-          <span class="px-3 py-1 rounded-full text-xs font-semibold glass border border-primary/20">UI/UX</span>
-          <span class="px-3 py-1 rounded-full text-xs font-semibold glass border border-primary/20">Motion</span>
-          <span class="px-3 py-1 rounded-full text-xs font-semibold glass border border-primary/20">Strategy</span>
-        </div>
-      </div>
-    </div>
-  </header>
-
-  <!-- About Section -->
-  <section class="px-6 mb-12">
-    <div class="glass-dark rounded-xl p-6 space-y-4">
-      <div class="flex items-center gap-2 text-primary">
-        <span class="material-symbols-outlined">person</span>
-        <h3 class="font-bold text-lg">About Me</h3>
-      </div>
-      <p class="text-slate-400 leading-relaxed">
-        A sophisticated designer specializing in high-end digital experiences with a focus on dark aesthetics, glassmorphism, and modern typography. Transforming complex problems into elegant, intuitive interfaces.
-      </p>
-      <div class="flex gap-4 pt-2">
-        <button class="flex-1 bg-primary text-white py-3 rounded-lg font-bold shadow-lg shadow-primary/20">Download CV</button>
-        <button class="flex-1 border border-primary/30 text-primary py-3 rounded-lg font-bold glass">Contact</button>
-      </div>
-    </div>
-  </section>
-
-  <!-- Skills Section -->
-  <section class="px-6 mb-12">
-    <h3 class="text-2xl font-bold mb-6 px-1">Core Expertise</h3>
-    <div class="grid grid-cols-1 gap-4">
-      <div class="glass-dark p-5 rounded-xl border-l-4 border-primary">
-        <div class="flex justify-between items-center mb-3">
-          <span class="font-bold">Visual Design</span>
-          <span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded">Expert</span>
-        </div>
-        <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
-          <div class="bg-primary h-full w-[95%]"></div>
-        </div>
-      </div>
-      <div class="glass-dark p-5 rounded-xl border-l-4 border-primary">
-        <div class="flex justify-between items-center mb-3">
-          <span class="font-bold">Prototyping</span>
-          <span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded">Advanced</span>
-        </div>
-        <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
-          <div class="bg-primary h-full w-[88%]"></div>
-        </div>
-      </div>
-      <div class="glass-dark p-5 rounded-xl border-l-4 border-primary">
-        <div class="flex justify-between items-center mb-3">
-          <span class="font-bold">Interaction Design</span>
-          <span class="text-xs text-primary bg-primary/10 px-2 py-1 rounded">Advanced</span>
-        </div>
-        <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
-          <div class="bg-primary h-full w-[82%]"></div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Projects Section -->
-  <section class="px-6 mb-12">
-    <div class="flex justify-between items-end mb-6 px-1">
-      <h3 class="text-2xl font-bold">Latest Work</h3>
-      <a class="text-primary text-sm font-semibold" href="#">View All</a>
-    </div>
-    <div class="flex flex-col gap-6">
-      {projects.map((project) => (
-        <div class="group relative rounded-xl overflow-hidden glass-dark">
-          <div 
-            class="h-48 bg-cover bg-center" 
-            data-alt="Abstract purple 3D geometric shapes background" 
-            style={`background-image: url('${project.image}')`}
-          ></div>
-          <div class="p-5">
-            <h4 class="text-xl font-bold mb-1">{project.title}</h4>
-            <p class="text-slate-400 text-sm mb-4">{project.description}</p>
-            <div class="flex items-center gap-2">
-              <span class="material-symbols-outlined text-primary text-sm">link</span>
-              <span class="text-xs font-mono uppercase tracking-widest">{project.url}</span>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  </section>
-
-  <!-- Experience Timeline -->
-  <section class="px-6 mb-12">
-    <h3 class="text-2xl font-bold mb-6 px-1">Experience</h3>
-    <div class="space-y-8 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-primary/20">
-      {experience.map((job) => (
-        <div class="relative pl-8">
-          <div class="absolute left-0 top-1.5 w-[24px] h-[24px] rounded-full bg-background-dark border-2 flex items-center justify-center" class:border-primary={job.isActive} class:border-primary/30={!job.isActive}>
-            <div class="w-2 h-2 rounded-full bg-primary" class:bg-primary/30={!job.isActive}></div>
-          </div>
-          <span class="text-xs font-bold text-primary mb-1 block uppercase tracking-tighter" class:text-slate-500={!job.isActive}>{job.period}</span>
-          <h4 class="text-lg font-bold">{job.title}</h4>
-          <p class="text-slate-400 text-sm">{job.company}</p>
-          <p class="mt-2 text-sm leading-relaxed text-slate-500">{job.description}</p>
-        </div>
-      ))}
-    </div>
-  </section>
-
-  <!-- Bottom Navigation Bar -->
-  <div class="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-md z-50">
-    <div class="glass-dark rounded-full px-6 py-3 flex items-center justify-between border border-primary/30 shadow-2xl shadow-primary/20">
-      <a class="flex flex-col items-center gap-1 text-primary" href="#">
-        <span class="material-symbols-outlined fill-1">home</span>
-      </a>
-      <a class="flex flex-col items-center gap-1 text-slate-500" href="#">
-        <span class="material-symbols-outlined">work</span>
-      </a>
-      <a class="flex flex-col items-center gap-1 text-slate-500" href="#">
-        <span class="material-symbols-outlined">grid_view</span>
-      </a>
-      <a class="flex flex-col items-center gap-1 text-slate-500" href="#">
-        <span class="material-symbols-outlined">mail</span>
-      </a>
-      <a class="flex flex-col items-center gap-1 text-slate-500" href="#">
-        <span class="material-symbols-outlined">person</span>
-      </a>
-    </div>
-  </div>
-
-  <script src="/scripts/language-toggle.js" is:inline />
-</Layout>
