Itziar ZGandGitHub
54a0c584e6
Add dialog accessibility semantics and focus management to project modals
955 lines
42 KiB
HTML
955 lines
42 KiB
HTML
<!doctype html>
|
|
<html class="light" lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>Itziar ZG | AI & Automation Developer</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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>
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
</head>
|
|
<body
|
|
class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300"
|
|
>
|
|
<div class="relative min-h-screen overflow-hidden iridescent-bg">
|
|
<!-- Floating Fluid Shapes -->
|
|
<div
|
|
class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
|
|
></div>
|
|
<div
|
|
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"
|
|
>
|
|
<div class="flex items-center gap-2 group cursor-pointer">
|
|
<div
|
|
class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20"
|
|
>
|
|
<span class="material-symbols-outlined text-2xl">
|
|
auto_awesome
|
|
</span>
|
|
</div>
|
|
<h2
|
|
class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
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 text-slate-700 dark:text-slate-300"
|
|
href="#about"
|
|
>Sobre mí</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#projects"
|
|
>Proyectos</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#stack"
|
|
>Tech Stack</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#contact"
|
|
>Contacto</a
|
|
>
|
|
</nav>
|
|
<div class="flex items-center gap-4">
|
|
<button
|
|
class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors"
|
|
id="theme-toggle"
|
|
onclick="toggleTheme()"
|
|
aria-label="Toggle theme"
|
|
>
|
|
<span class="material-symbols-outlined text-xl dark:hidden">
|
|
dark_mode
|
|
</span>
|
|
<span
|
|
class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
|
|
>
|
|
light_mode
|
|
</span>
|
|
</button>
|
|
<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"
|
|
onclick="scrollToContact()"
|
|
>
|
|
Hablemos
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<main
|
|
class="mx-auto max-w-6xl px-6 pt-16 pb-24 md:pt-24 flex flex-col items-center text-center"
|
|
>
|
|
<div
|
|
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"
|
|
>
|
|
<span class="relative flex h-2 w-2">
|
|
<span
|
|
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"
|
|
></span>
|
|
<span
|
|
class="relative inline-flex rounded-full h-2 w-2 bg-primary"
|
|
></span>
|
|
</span>
|
|
Disponible para nuevos proyectos
|
|
</div>
|
|
<h1
|
|
class="text-5xl md:text-8xl font-serif italic leading-[1.1] text-slate-900 dark:text-white mb-6 max-w-4xl"
|
|
>
|
|
Arquitecta de
|
|
<span
|
|
class="text-primary not-italic font-display font-black tracking-tighter"
|
|
>IA</span
|
|
>
|
|
& Automatización
|
|
</h1>
|
|
<p
|
|
class="text-lg md:text-xl text-slate-600 dark:text-slate-400 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"
|
|
onclick="scrollToProjects()"
|
|
>
|
|
Explorar Proyectos
|
|
</button>
|
|
<button
|
|
disabled
|
|
class="glass px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/60 dark:hover:bg-white/10 transition-colors text-slate-800 dark:text-slate-200"
|
|
>
|
|
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 dark:border-white/20 relative"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-cover bg-center"
|
|
data-alt="Abstract soft purple and pink liquid gradients flowing"
|
|
style="
|
|
background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD7jcnN_wxvIYoIUzW4qcK4CoDUZZZNjygy4of13sQuWzPdhmFyLBcD-uo94oXDghcnd1bXI9F8yApHPlBJmTsrsoHrDT7H4NcX0Qv3QSCb8qwZgJV6iPJuI1LjVxfxuJBeaAy9X3nHgeacqLeAJkbb0DQg9-LxVDUdgZUABcx65AW1k59FXjFiuf2K2BAop_ki74vQZC0gsddWQbM6TmU--QLahcLkY54YobaPZeL_Fgh0veydf7Wh7pKAT4s6RFcMDKH0w4Ova98");
|
|
"
|
|
></div>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-t from-background-light/80 dark:from-background-dark/80 to-transparent"
|
|
></div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- About Section -->
|
|
<section class="py-24 bg-white/30 dark:bg-white/5" 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 text-slate-900 dark:text-white"
|
|
>
|
|
Sobre mí
|
|
</h2>
|
|
<p
|
|
class="text-lg text-slate-700 dark:text-slate-300 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 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 dark:text-white">Automatización</h3>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
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 dark:text-white">Agentes IA</h3>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
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 dark:text-white">
|
|
Integración APIs
|
|
</h3>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
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 dark:text-white">Web Moderna</h3>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
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 flex-col md:flex-row gap-4"
|
|
>
|
|
<div>
|
|
<h2
|
|
class="text-5xl font-serif italic mb-4 text-slate-900 dark:text-white"
|
|
>
|
|
Selected Works
|
|
</h2>
|
|
<p class="text-slate-500 dark:text-slate-400">
|
|
Proyectos destacados en automatización inteligente.
|
|
</p>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<span
|
|
class="material-symbols-outlined text-slate-300 dark:text-slate-700 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"
|
|
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 text-slate-900 dark:text-white"
|
|
>
|
|
AI Knowledge Pipeline
|
|
</h3>
|
|
<p
|
|
class="text-slate-600 dark:text-slate-400 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 mb-4">
|
|
<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>
|
|
<button
|
|
class="w-full bg-primary/10 text-primary hover:bg-primary hover:text-white px-4 py-2 rounded-lg font-bold text-sm transition-colors"
|
|
onclick="openModal('project-1')"
|
|
>
|
|
Ver detalles
|
|
</button>
|
|
</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"
|
|
alt="High-end modern kitchen with minimalist design"
|
|
/>
|
|
<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 text-slate-900 dark:text-white"
|
|
>
|
|
ChefGPT
|
|
</h3>
|
|
<p
|
|
class="text-slate-600 dark:text-slate-400 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 mb-4">
|
|
<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>
|
|
<button
|
|
class="w-full bg-primary/10 text-primary hover:bg-primary hover:text-white px-4 py-2 rounded-lg font-bold text-sm transition-colors"
|
|
onclick="openModal('project-2')"
|
|
>
|
|
Ver detalles
|
|
</button>
|
|
</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 text-slate-900 dark:text-white"
|
|
>
|
|
Content Processing Automation
|
|
</h3>
|
|
<p
|
|
class="text-slate-600 dark:text-slate-400 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 mb-4">
|
|
<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>
|
|
<button
|
|
class="w-full bg-primary/10 text-primary hover:bg-primary hover:text-white px-4 py-2 rounded-lg font-bold text-sm transition-colors"
|
|
onclick="openModal('project-3')"
|
|
>
|
|
Ver detalles
|
|
</button>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tech Stack Section -->
|
|
<section class="py-24 relative" id="stack">
|
|
<div
|
|
class="absolute inset-0 bg-primary/[0.03] dark:bg-primary/[0.02] 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 text-slate-900 dark:text-white"
|
|
>
|
|
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 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<span class="material-symbols-outlined text-3xl">hub</span>
|
|
</div>
|
|
<span class="font-medium text-slate-700 dark:text-slate-300"
|
|
>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 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<span class="material-symbols-outlined text-3xl"
|
|
>terminal</span
|
|
>
|
|
</div>
|
|
<span class="font-medium text-slate-700 dark:text-slate-300"
|
|
>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 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<span class="material-symbols-outlined text-3xl">code</span>
|
|
</div>
|
|
<span class="font-medium text-slate-700 dark:text-slate-300"
|
|
>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 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<span class="material-symbols-outlined text-3xl"
|
|
>model_training</span
|
|
>
|
|
</div>
|
|
<span class="font-medium text-slate-700 dark:text-slate-300"
|
|
>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 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<span class="material-symbols-outlined text-3xl"
|
|
>database</span
|
|
>
|
|
</div>
|
|
<span class="font-medium text-slate-700 dark:text-slate-300"
|
|
>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 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<span class="material-symbols-outlined text-3xl">api</span>
|
|
</div>
|
|
<span class="font-medium text-slate-700 dark:text-slate-300"
|
|
>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 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<span class="material-symbols-outlined text-3xl"
|
|
>palette</span
|
|
>
|
|
</div>
|
|
<span class="font-medium text-slate-700 dark:text-slate-300"
|
|
>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 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<span class="material-symbols-outlined text-3xl">chat</span>
|
|
</div>
|
|
<span class="font-medium text-slate-700 dark:text-slate-300"
|
|
>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 dark:text-primary/10 text-9xl"
|
|
>alternate_email</span
|
|
>
|
|
</div>
|
|
<h2
|
|
class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white"
|
|
>
|
|
¿Creamos algo<br />extraordinario?
|
|
</h2>
|
|
<p
|
|
class="text-xl text-slate-600 dark:text-slate-400 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 dark:bg-slate-800 text-white px-10 py-5 rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 dark:hover:bg-slate-700 transition-colors shadow-2xl"
|
|
href="mailto:itziar.zameza.garcia@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="https://www.linkedin.com/in/itziarzamezagarcia"
|
|
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="https://github.com/itziarZG"
|
|
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 dark:text-slate-500 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 text-slate-600 dark:text-slate-400"
|
|
href="https://www.linkedin.com/in/itziarzamezagarcia"
|
|
>LinkedIn</a
|
|
>
|
|
<a
|
|
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
|
|
href="https://github.com/itziarZG"
|
|
>GitHub</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Modals -->
|
|
<!-- Modal 1: AI Knowledge Pipeline -->
|
|
<div
|
|
id="project-1-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="project-1-modal-title"
|
|
onclick="closeModal('project-1')"
|
|
>
|
|
<div
|
|
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
|
onclick="event.stopPropagation()"
|
|
>
|
|
<div class="p-8 md:p-12">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h2
|
|
id="project-1-modal-title"
|
|
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
AI Knowledge Pipeline
|
|
</h2>
|
|
<button
|
|
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
|
onclick="closeModal('project-1')"
|
|
aria-label="Close dialog"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<img
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw"
|
|
alt="AI Knowledge Pipeline"
|
|
class="w-full rounded-2xl mb-6 object-cover h-64"
|
|
/>
|
|
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Descripción
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Sistema de ingesta y procesamiento inteligente de contenido
|
|
multimedia. Recibe audio, PDFs, vídeos y texto. Utiliza modelos
|
|
de IA para transcribir, resumir y extraer información clave,
|
|
almacenando todo en Supabase de forma estructurada para
|
|
reutilización posterior.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalidades
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Ingestión de múltiples tipos de contenido</li>
|
|
<li>Transcripción automática con IA</li>
|
|
<li>Resumen inteligente y extracción de keywords</li>
|
|
<li>Almacenamiento vectorial para búsqueda semántica</li>
|
|
<li>Pipeline automatizado con n8n</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnológico
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>n8n</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Supabase (PostgreSQL + pgvector)</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>OpenAI API</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Whisper (transcripción)</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultado
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Pipeline completamente automatizado que reduce el tiempo de
|
|
procesamiento de contenido en un 85% y permite reutilizar
|
|
información de forma inteligente mediante búsquedas semánticas.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
|
onclick="closeModal('project-1')"
|
|
>
|
|
Cerrar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 2: ChefGPT -->
|
|
<div
|
|
id="project-2-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="project-2-modal-title"
|
|
onclick="closeModal('project-2')"
|
|
>
|
|
<div
|
|
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
|
onclick="event.stopPropagation()"
|
|
>
|
|
<div class="p-8 md:p-12">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h2
|
|
id="project-2-modal-title"
|
|
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
ChefGPT
|
|
</h2>
|
|
<button
|
|
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
|
onclick="closeModal('project-2')"
|
|
aria-label="Close dialog"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<img
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfqsuP4x2xr1tNEyjnxJ4D517oj2e5uvU9_41GuMiygljVgzuSLFs-teeZfNDCD7jP8ShaU_Vgc_L0qzjAtd5I-8-oVtoxi8ih81LLt3l5IM6-RvPCVAuoIx9jK7q9SvAcvet8d5Fg9YQCndNdiKbWHXgyEkD9ARj0x7EAdyzsGThzWbcVHof2YHZjw3aXpVV7sq0YrQqsQ07WON23OSALCIHo6W80FBSEUydUs6yvDyEoT-XJlLHO_xKX4xS8J4x38c1nhEDIuiw"
|
|
alt="ChefGPT"
|
|
class="w-full rounded-2xl mb-6 object-cover h-64"
|
|
/>
|
|
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Descripción
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Agente conversacional inteligente en Telegram que actúa como
|
|
asistente culinario personal. Consulta tu inventario en Supabase,
|
|
accede a un RAG especializado con recetas para evitar
|
|
alucinaciones, y sugiere platos personalizados basados en lo que
|
|
tienes disponible.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalidades
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Integración bidireccional con Supabase</li>
|
|
<li>Consulta automática de inventario en base de datos</li>
|
|
<li>RAG (Retrieval-Augmented Generation) con recetas verificadas</li>
|
|
<li>Prevención de alucinaciones mediante fine-tuning de prompts</li>
|
|
<li>Generación de recetas personalizadas sin alucinar</li>
|
|
<li>Actualización automática del inventario</li>
|
|
<li>Conversación natural y contextual</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnológico
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Telegram Bot API</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Supabase (PostgreSQL)</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>RAG (Retrieval)</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>OpenAI GPT</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>n8n</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultado
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Asistente culinario robusto que elimina la decisión de "qué
|
|
cocinar" sin generar recetas inexistentes. El RAG garantiza que
|
|
todas las sugerencias provienen de un corpus de recetas
|
|
verificadas, proporcionando fiabilidad y personalización sin
|
|
alucinaciones de la IA.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
|
onclick="closeModal('project-2')"
|
|
>
|
|
Cerrar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 3: Content Processing Automation -->
|
|
<div
|
|
id="project-3-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="project-3-modal-title"
|
|
onclick="closeModal('project-3')"
|
|
>
|
|
<div
|
|
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
|
onclick="event.stopPropagation()"
|
|
>
|
|
<div class="p-8 md:p-12">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h2
|
|
id="project-3-modal-title"
|
|
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
Content Processing Automation
|
|
</h2>
|
|
<button
|
|
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
|
onclick="closeModal('project-3')"
|
|
aria-label="Close dialog"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<img
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
|
|
alt="Content Processing Automation"
|
|
class="w-full rounded-2xl mb-6 object-cover h-64"
|
|
/>
|
|
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Descripción
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Pipeline integral de procesamiento de contenido multimedia que
|
|
automatiza desde la ingesta hasta la distribución. Transforma
|
|
múltiples formatos (audio, vídeo, PDFs, texto) en contenido
|
|
estructurado y lista para publicación en redes sociales.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalidades
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Procesamiento de múltiples formatos multimedia</li>
|
|
<li>Transcripción y análisis automático</li>
|
|
<li>Generación de títulos, descripciones y hashtags con IA</li>
|
|
<li>Redimensionamiento y optimización de imágenes</li>
|
|
<li>Publicación automática en redes sociales</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnológico
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Workflow Automation</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>FFmpeg (vídeo)</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>OpenAI API</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Social Media APIs</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultado
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Automatización completa de la cadena de producción de contenido,
|
|
reduciendo tiempo manual en un 90% y garantizando consistencia
|
|
en la calidad y el formato de publicaciones.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
|
onclick="closeModal('project-3')"
|
|
>
|
|
Cerrar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|