diff --git a/src/pages/portfolio.astro b/src/pages/portfolio.astro
new file mode 100644
index 0000000..dc3b9db
--- /dev/null
+++ b/src/pages/portfolio.astro
@@ -0,0 +1,217 @@
+---
+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>