refactor: redesign portfolio with Tailwind CSS and modern layout

- Migrate from vanilla CSS to Tailwind CSS CDN
- Implement Stitch design with glassmorphism and fluid gradients
- Remove profile photo for cleaner, more professional aesthetic
- Restructure About section: remove grid layout, expand content cards
- Add 3 real projects with proper descriptions and tech tags
- Implement smooth scrolling and contact CTA
- Update tech stack section with 8 key technologies
- Modernize README to reflect new design and stack
- Mobile-first responsive design using Tailwind breakpoints

.gitignore

@@ -22,3 +22,7 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+.gga
+diseño/
+.vscode/
+

README.md

@@ -1,85 +1,52 @@
-# Personal Portfolio
+# Personal Portfolio - Itziar ZG
 
-A framework-free, static portfolio website built with vanilla HTML, CSS, and JavaScript.
+A modern, static portfolio website for AI & Automation Developer. Built with HTML, Tailwind CSS, and minimal JavaScript.
 
 ## Features
 
-- **Zero Runtime Dependencies**: No JavaScript framework required
+- **Modern Design**: Glassmorphism, gradients, fluid animations
-- **Multi-language Support**: English and Spanish with instant switching
+- **Responsive**: Mobile-first design with Tailwind CSS
-- **Dark/Light Mode**: Theme persistence with localStorage
+- **Fast Loading**: No build step, CDN-powered Tailwind
-- **Glassmorphism Design**: Modern UI with blur effects and transparency
-- **Fully Responsive**: Works on all devices
 - **SEO Optimized**: Semantic HTML5 markup
-- **Fast Loading**: Minimal bundle size
+- **Smooth Navigation**: Scroll-to-section anchors
+- **Professional Layout**: Hero, About, Projects, Tech Stack, Contact sections
 
 ## Tech Stack
 
 - **HTML5**: Semantic markup
-- **CSS3**: Custom properties, flexbox, grid, animations
+- **Tailwind CSS**: Utility-first styling via CDN
-- **Vanilla JavaScript**: ES6+ modules, classes, localStorage
+- **Vanilla JavaScript**: Smooth scrolling, minimal interactions
-- **Google Fonts**: Space Grotesk typography
+- **Google Fonts**: Space Grotesk & Instrument Serif
 - **Material Symbols**: Icon system
 
-## Development
 
-### Prerequisites
+## Getting Started
 
-- Node.js (for dev server only)
+Simply open `index.html` in your browser. No build step required.
-- Any modern web browser
-
-### Setup
 
 ```bash
-# Install dev dependencies (optional)
+# Or use a local server
-npm install
+python -m http.server 8000
-
+# Then visit http://localhost:8000
-# Start development server
-npm run dev
-
-# Or simply open index.html in your browser
 ```
 
-### Project Structure
+## Project Structure
 
 ```
-├── index.html          # Main HTML file
+├── index.html          # Main portfolio page
-├── styles/
+├── diseño/             # Original design files from Stitch
-│   └── main.css        # Complete stylesheet
+├── js/                 # Legacy JS files (not currently used)
-├── js/
+├── styles/             # Legacy CSS files (not currently used)
-│   └── main.js         # JavaScript functionality
+└── README.md           # This file
-├── public/             # Static assets
-└── package.json        # Dev dependencies only
 ```
 
-## Features Implementation
+## Sections
 
-### Language Switching
+- **Hero**: Attention-grabbing intro with CTA buttons
-
+- **About**: Professional background and capabilities
-- Translations stored in JavaScript objects
+- **Selected Works**: 3 featured projects with tech tags
-- No page reload required
+- **Tech Stack**: Technologies and tools used
-- Preference saved in localStorage
+- **Contact**: Call-to-action footer with email and social links
-- Dynamic content rendering
-
-### Theme Toggle
-
-- CSS custom properties for theming
-- System preference detection
-- Smooth transitions
-- Icon updates based on current theme
-
-### Performance
-
-- No build step required
-- Minimal HTTP requests
-- Optimized CSS with custom properties
-- Efficient DOM manipulation
-
-## Browser Support
-
-- Chrome 60+
-- Firefox 55+
-- Safari 12+
-- Edge 79+
 
 ## License
 

index.html

@@ -1,212 +1,576 @@
 <!doctype html>
-<html lang="en">
+<html class="light" lang="es">
   <head>
-    <meta charset="UTF-8" />
+    <meta charset="utf-8" />
-    <meta
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-      name="description"
+    <title>Itziar ZG | AI &amp; Automation Developer</title>
-      content="Itziar ZG - Vanguard Designer Portfolio"
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-    />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Itziar ZG - Vanguard CV</title>
     <link
-      rel="icon"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Instrument+Serif:ital@0;1&amp;display=swap"
-      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"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
       rel="stylesheet"
     />
+    <script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            colors: {
+              primary: "#8c2bee",
+              "background-light": "#f7f6f8",
+              "background-dark": "#191022",
+            },
+            fontFamily: {
+              display: ["Space Grotesk", "sans-serif"],
+              serif: ["Instrument Serif", "serif"],
+            },
+            borderRadius: {
+              DEFAULT: "0.5rem",
+              lg: "1rem",
+              xl: "1.5rem",
+              full: "9999px",
+            },
+          },
+        },
+      };
+    </script>
+    <style>
+      .glass {
+        background: rgba(255, 255, 255, 0.4);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border: 1px solid rgba(255, 255, 255, 0.3);
+      }
+      .iridescent-bg {
+        background:
+          radial-gradient(
+            circle at 0% 0%,
+            rgba(140, 43, 238, 0.15) 0%,
+            transparent 50%
+          ),
+          radial-gradient(
+            circle at 100% 100%,
+            rgba(255, 182, 255, 0.2) 0%,
+            transparent 50%
+          ),
+          radial-gradient(
+            circle at 50% 50%,
+            rgba(140, 43, 238, 0.05) 0%,
+            transparent 100%
+          );
+      }
+      .fluid-shape {
+        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+      }
+    </style>
   </head>
-  <body>
+  <body
-    <!-- Top Navigation -->
+    class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30"
-    <nav>
+  >
-      <div>
+    <div class="relative min-h-screen overflow-hidden iridescent-bg">
-        <h1>Under construction Itziar ZG</h1>
+      <!-- Floating Fluid Shapes -->
-      </div>
+      <div
-      <!-- <div>
+        class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
-        <button
+      ></div>
-          id="language-toggle"
+      <div
-          aria-label="Toggle language"
+        class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40"
+      ></div>
+      <div class="layout-container flex h-full grow flex-col relative z-10">
+        <!-- Navigation -->
+        <header
+          class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between"
         >
-          <span class="material-symbols-outlined">translate</span>
+          <div class="flex items-center gap-2 group cursor-pointer">
-        </button>
-        <button
-          id="theme-toggle"
-          aria-label="Toggle theme"
-        >
-          <span class="material-symbols-outlined">dark_mode</span>
-        </button>
-      </div> -->
-    </nav>
-
-    <!-- Hero Section -->
-    <!-- <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>
-
-        <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>
-      <div>
-        <div>
-          <span class="material-symbols-outlined">person</span>
-          <h3 data-i18n="about.title">About Me</h3>
-        </div>
-        <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>
-      <h3 data-i18n="skills.title">
-        Core Expertise
-      </h3>
-      <div>
-        <div>
-          <div>
-            <span>Visual Design</span>
-            <span
-              >Expert</span
-            >
-          </div>
-          <div>
-            <div>
-          </div>
-        </div>
-        <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>
-      <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>
-            <h3 data-i18n="experience.title">
-                Experience
-            </h3>
             <div
-                id="experience-container"
+              class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20"
             >
-                <!-- Experience will be inserted here by JavaScript -->
+              <span class="material-symbols-outlined text-2xl"
-    <!-- </div>
+                >auto_awesome</span
-            </section> -->
+              >
+            </div>
+            <h2 class="text-xl font-bold tracking-tight font-serif italic">
+              Itziar ZG
+            </h2>
+          </div>
+          <nav
+            class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full"
+          >
+            <a
+              class="text-sm font-medium hover:text-primary transition-colors"
+              href="#about"
+              >Sobre mí</a
+            >
+            <a
+              class="text-sm font-medium hover:text-primary transition-colors"
+              href="#projects"
+              >Proyectos</a
+            >
+            <a
+              class="text-sm font-medium hover:text-primary transition-colors"
+              href="#stack"
+              >Tech Stack</a
+            >
+            <a
+              class="text-sm font-medium hover:text-primary transition-colors"
+              href="#contact"
+              >Contacto</a
+            >
+          </nav>
+          <button
+            class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25"
+          >
+            Hablemos
+          </button>
+        </header>
 
-    <!-- Bottom Navigation Bar -->
+        <!-- Hero Section -->
-    <!-- <div>
+        <main
-      <div>
+          class="mx-auto max-w-6xl px-6 pt-16 pb-24 md:pt-24 flex flex-col items-center text-center"
-        <a href="#">
+        >
-          <span class="material-symbols-outlined fill-1">home</span>
+          <div
-        </a>
+            class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-8"
-        <a href="#">
+          >
-          <span class="material-symbols-outlined">work</span>
+            <span class="relative flex h-2 w-2">
-        </a>
+              <span
-        <a href="#">
+                class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"
-          <span class="material-symbols-outlined">grid_view</span>
+              ></span>
-        </a>
+              <span
-        <a href="#">
+                class="relative inline-flex rounded-full h-2 w-2 bg-primary"
-          <span class="material-symbols-outlined">mail</span>
+              ></span>
-        </a>
+            </span>
-        <a href="#">
+            Disponible para nuevos proyectos
-          <span class="material-symbols-outlined">person</span>
+          </div>
-        </a>
+          <h1
+            class="text-6xl md:text-8xl font-serif italic leading-[1.1] text-slate-900 mb-6 max-w-4xl"
+          >
+            Arquitecta de
+            <span
+              class="text-primary not-italic font-display font-black tracking-tighter"
+              >IA</span
+            >
+            &amp; Automatización
+          </h1>
+          <p
+            class="text-lg md:text-xl text-slate-600 max-w-2xl mb-12 leading-relaxed"
+          >
+            Construyo automatizaciones y agentes de IA que conectan
+            herramientas, procesan información y transforman flujos de trabajo
+            en sistemas inteligentes.
+          </p>
+          <div class="flex flex-wrap justify-center gap-4">
+            <button
+              class="bg-primary text-white px-8 py-4 rounded-xl font-bold text-lg hover:translate-y-[-2px] transition-transform shadow-xl shadow-primary/30"
+            >
+              Explorar Proyectos
+            </button>
+            <button
+              class="glass px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/60 transition-colors"
+            >
+              Descargar CV
+            </button>
+          </div>
+          <!-- Abstract Decorative Hero Image -->
+          <div
+            class="mt-20 w-full max-w-5xl aspect-[21/9] rounded-3xl overflow-hidden glass border-4 border-white/50 relative"
+          >
+            <div
+              class="absolute inset-0 bg-cover bg-center"
+              data-alt="Abstract soft purple and pink liquid gradients flowing"
+              style="
+                background-image: url(&quot;https://lh3.googleusercontent.com/aida-public/AB6AXuD7jcnN_wxvIYoIUzW4qcK4CoDUZZZNjygy4of13sQuWzPdhmFyLBcD-uo94oXDghcnd1bXI9F8yApHPlBJmTsrsoHrDT7H4NcX0Qv3QSCb8qwZgJV6iPJuI1LjVxfxuJBeaAy9X3nHgeacqLeAJkbb0DQg9-LxVDUdgZUABcx65AW1k59FXjFiuf2K2BAop_ki74vQZC0gsddWQbM6TmU--QLahcLkY54YobaPZeL_Fgh0veydf7Wh7pKAT4s6RFcMDKH0w4Ova98&quot;);
+              "
+            ></div>
+            <div
+              class="absolute inset-0 bg-gradient-to-t from-background-light/80 to-transparent"
+            ></div>
+          </div>
+        </main>
+
+        <!-- About Section -->
+        <section class="py-24 bg-white/30" id="about">
+          <div class="mx-auto max-w-6xl px-6">
+            <div class="max-w-3xl">
+              <h2 class="text-4xl font-serif italic mb-6">Sobre mí</h2>
+              <p class="text-lg text-slate-700 leading-relaxed mb-8">
+                Ingeniera de telecomunicaciones y desarrolladora especializada
+                en automatización de procesos, integración de APIs y creación
+                de agentes basados en inteligencia artificial. Construyo
+                sistemas que conectan herramientas, procesan información
+                (texto, audio, vídeo) y crean flujos automatizados que reducen
+                trabajo manual.
+              </p>
+              <div class="grid md:grid-cols-2 gap-4 mt-12">
+                <div class="p-6 glass rounded-2xl">
+                  <span
+                    class="material-symbols-outlined text-primary text-3xl mb-3 block"
+                    >router</span
+                  >
+                  <h3 class="font-bold mb-2">Automatización</h3>
+                  <p class="text-sm text-slate-600">
+                    Optimización de procesos complejos con workflows inteligentes.
+                  </p>
+                </div>
+                <div class="p-6 glass rounded-2xl">
+                  <span
+                    class="material-symbols-outlined text-primary text-3xl mb-3 block"
+                    >psychology</span
+                  >
+                  <h3 class="font-bold mb-2">Agentes IA</h3>
+                  <p class="text-sm text-slate-600">
+                    LLMs y flujos generativos autónomos.
+                  </p>
+                </div>
+                <div class="p-6 glass rounded-2xl">
+                  <span
+                    class="material-symbols-outlined text-primary text-3xl mb-3 block"
+                    >hub</span
+                  >
+                  <h3 class="font-bold mb-2">Integración APIs</h3>
+                  <p class="text-sm text-slate-600">
+                    Conexión fluida entre servicios SaaS.
+                  </p>
+                </div>
+                <div class="p-6 glass rounded-2xl">
+                  <span
+                    class="material-symbols-outlined text-primary text-3xl mb-3 block"
+                    >terminal</span
+                  >
+                  <h3 class="font-bold mb-2">Web Moderna</h3>
+                  <p class="text-sm text-slate-600">
+                    Desarrollo Frontend con Next.js y React.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Selected Works Section -->
+        <section class="py-24" id="projects">
+          <div class="mx-auto max-w-6xl px-6">
+            <div class="flex justify-between items-end mb-16">
+              <div>
+                <h2 class="text-5xl font-serif italic mb-4">Selected Works</h2>
+                <p class="text-slate-500">
+                  Proyectos destacados en automatización inteligente.
+                </p>
+              </div>
+              <div class="hidden md:block">
+                <span class="material-symbols-outlined text-slate-300 text-6xl"
+                  >arrow_right_alt</span
+                >
+              </div>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+              <!-- Project 1: AI Knowledge Pipeline -->
+              <div
+                class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
+              >
+                <div class="aspect-video relative overflow-hidden">
+                  <img
+                    class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
+                    data-alt="Visualization of an AI neural network and data pipeline"
+                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw"
+                  />
+                  <div
+                    class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity"
+                  ></div>
+                </div>
+                <div class="p-8">
+                  <h3 class="text-xl font-bold mb-2">AI Knowledge Pipeline</h3>
+                  <p class="text-slate-600 text-sm mb-6 leading-relaxed">
+                    Sistema automatizado capaz de recibir audio, PDFs, vídeos o
+                    texto. Transcribe el contenido, lo resume mediante IA y lo
+                    almacena estructuradamente para su reutilización.
+                  </p>
+                  <div class="flex gap-2 flex-wrap">
+                    <span
+                      class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
+                      >n8n</span
+                    >
+                    <span
+                      class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
+                      >Supabase</span
+                    >
+                    <span
+                      class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
+                      >APIs IA</span
+                    >
+                  </div>
+                </div>
+              </div>
+
+              <!-- Project 2: ChefGPT -->
+              <div
+                class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
+              >
+                <div class="aspect-video relative overflow-hidden">
+                  <img
+                    class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
+                    data-alt="High-end modern kitchen with minimalist design"
+                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfqsuP4x2xr1tNEyjnxJ4D517oj2e5uvU9_41GuMiygljVgzuSLFs-teeZfNDCD7jP8ShaU_Vgc_L0qzjAtd5I-8-oVtoxi8ih81LLt3l5IM6-RvPCVAuoIx9jK7q9SvAcvet8d5Fg9YQCndNdiKbWHXgyEkD9ARj0x7EAdyzsGThzWbcVHof2YHZjw3aXpVV7sq0YrQqsQ07WON23OSALCIHo6W80FBSEUydUs6yvDyEoT-XJlLHO_xKX4xS8J4x38c1nhEDIuiw"
+                  />
+                  <div
+                    class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity"
+                  ></div>
+                </div>
+                <div class="p-8">
+                  <h3 class="text-xl font-bold mb-2">ChefGPT</h3>
+                  <p class="text-slate-600 text-sm mb-6 leading-relaxed">
+                    Agente conversacional que sugiere recetas en función de los
+                    ingredientes disponibles. Integra Telegram, Google Sheets y
+                    n8n para automatizar consultas de inventario.
+                  </p>
+                  <div class="flex gap-2 flex-wrap">
+                    <span
+                      class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
+                      >Telegram</span
+                    >
+                    <span
+                      class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
+                      >Google Sheets</span
+                    >
+                    <span
+                      class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
+                      >n8n</span
+                    >
+                  </div>
+                </div>
+              </div>
+
+              <!-- Project 3: Content Processing Automation -->
+              <div
+                class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
+              >
+                <div class="aspect-video relative overflow-hidden">
+                  <img
+                    class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
+                    data-alt="Dashboard showing content performance metrics"
+                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
+                  />
+                  <div
+                    class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity"
+                  ></div>
+                </div>
+                <div class="p-8">
+                  <h3 class="text-xl font-bold mb-2">
+                    Content Processing Automation
+                  </h3>
+                  <p class="text-slate-600 text-sm mb-6 leading-relaxed">
+                    Pipeline automatizado para procesar contenido multimedia
+                    (audio, PDFs, vídeos, texto) que genera transcripciones,
+                    resúmenes y conocimiento estructurado.
+                  </p>
+                  <div class="flex gap-2 flex-wrap">
+                    <span
+                      class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
+                      >Workflow</span
+                    >
+                    <span
+                      class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
+                      >APIs</span
+                    >
+                    <span
+                      class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
+                      >LLMs</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Tech Stack Section -->
+        <section class="py-24 relative" id="stack">
+          <div class="absolute inset-0 bg-primary/[0.03] skew-y-3 -z-10"></div>
+          <div class="mx-auto max-w-4xl px-6 text-center">
+            <h2 class="text-4xl font-serif italic mb-16">Tech Curated Stack</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+              <div class="flex flex-col items-center gap-4 group">
+                <div
+                  class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
+                >
+                  <span class="material-symbols-outlined text-3xl">hub</span>
+                </div>
+                <span class="font-medium text-slate-700">n8n</span>
+              </div>
+              <div class="flex flex-col items-center gap-4 group">
+                <div
+                  class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
+                >
+                  <span class="material-symbols-outlined text-3xl"
+                    >terminal</span
+                  >
+                </div>
+                <span class="font-medium text-slate-700">Next.js</span>
+              </div>
+              <div class="flex flex-col items-center gap-4 group">
+                <div
+                  class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
+                >
+                  <span class="material-symbols-outlined text-3xl">code</span>
+                </div>
+                <span class="font-medium text-slate-700">JavaScript</span>
+              </div>
+              <div class="flex flex-col items-center gap-4 group">
+                <div
+                  class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
+                >
+                  <span class="material-symbols-outlined text-3xl"
+                    >model_training</span
+                  >
+                </div>
+                <span class="font-medium text-slate-700">LLMs</span>
+              </div>
+              <div class="flex flex-col items-center gap-4 group">
+                <div
+                  class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
+                >
+                  <span class="material-symbols-outlined text-3xl"
+                    >database</span
+                  >
+                </div>
+                <span class="font-medium text-slate-700">Supabase</span>
+              </div>
+              <div class="flex flex-col items-center gap-4 group">
+                <div
+                  class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
+                >
+                  <span class="material-symbols-outlined text-3xl">api</span>
+                </div>
+                <span class="font-medium text-slate-700">APIs</span>
+              </div>
+              <div class="flex flex-col items-center gap-4 group">
+                <div
+                  class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
+                >
+                  <span class="material-symbols-outlined text-3xl"
+                    >palette</span
+                  >
+                </div>
+                <span class="font-medium text-slate-700">Tailwind CSS</span>
+              </div>
+              <div class="flex flex-col items-center gap-4 group">
+                <div
+                  class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner"
+                >
+                  <span class="material-symbols-outlined text-3xl">chat</span>
+                </div>
+                <span class="font-medium text-slate-700">TypeScript</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Footer / Contact -->
+        <footer class="mt-24 pb-12" id="contact">
+          <div class="mx-auto max-w-6xl px-6">
+            <div
+              class="glass rounded-[3rem] p-12 md:p-24 text-center relative overflow-hidden"
+            >
+              <div class="absolute top-0 right-0 p-8">
+                <span class="material-symbols-outlined text-primary/20 text-9xl"
+                  >alternate_email</span
+                >
+              </div>
+              <h2
+                class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10"
+              >
+                ¿Creamos algo<br />extraordinario?
+              </h2>
+              <p
+                class="text-xl text-slate-600 mb-12 max-w-xl mx-auto relative z-10"
+              >
+                Estoy siempre abierta a colaborar en proyectos que desafíen los
+                límites de lo posible con IA y automatización.
+              </p>
+              <div
+                class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
+              >
+                <a
+                  class="bg-slate-900 text-white px-10 py-5 rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 transition-colors shadow-2xl"
+                  href="mailto:itziar.zameza.dev@gmail.com"
+                >
+                  <span class="material-symbols-outlined">mail</span>
+                  Enviar un Email
+                </a>
+                <div class="flex gap-4 justify-center">
+                  <a
+                    class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
+                    href="#"
+                    title="LinkedIn"
+                  >
+                    <span class="material-symbols-outlined text-2xl">link</span>
+                  </a>
+                  <a
+                    class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
+                    href="#"
+                    title="GitHub"
+                  >
+                    <span class="material-symbols-outlined text-2xl"
+                      >share</span
+                    >
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div
+              class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 text-sm"
+            >
+              <p>© 2025 Itziar ZG. Hecho con IA y mucho café.</p>
+              <div class="flex gap-8">
+                <a
+                  class="hover:text-primary transition-colors"
+                  href="https://www.linkedin.com/in/itziarzamezagarcia"
+                  >LinkedIn</a
+                >
+                <a
+                  class="hover:text-primary transition-colors"
+                  href="https://github.com/itziarZG"
+                  >GitHub</a
+                >
+              </div>
+            </div>
+          </div>
+        </footer>
       </div>
-    </div> -->
+    </div>
 
-    <script src="js/main.js"></script>
+    <!-- Scripts -->
+    <script>
+      // Smooth scrolling
+      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+        anchor.addEventListener("click", function (e) {
+          e.preventDefault();
+          const target = document.querySelector(this.getAttribute("href"));
+          if (target) {
+            target.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+      });
+
+      // Contact button functionality
+      document
+        .querySelector(".bg-primary")
+        .addEventListener("click", function () {
+          const contactSection = document.getElementById("contact");
+          if (contactSection) {
+            contactSection.scrollIntoView({ behavior: "smooth" });
+          }
+        });
+
+      // Load saved theme
+      const savedTheme = localStorage.getItem("theme");
+      const systemPrefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)",
+      ).matches;
+      if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
+        document.documentElement.classList.add("dark");
+      }
+    </script>
   </body>
 </html>