itziarZG
29d215495d
- Remove fonts/material-symbols-outlined.woff2 (4MB external font eliminated) - Inline 38 Material Symbols as SVG paths (extracted to icon-paths.json) - Convert 5 Google-hosted images to self-hosted WebP - Add favicon.svg (adaptive auto_awesome icon, light + dark) - Add scrollbar-gutter: stable + body.modal-open to prevent modal jumps - Clean up preload links to fonts no longer used Net reduction: ~3.9MB external dependencies, zero CLS on icon swap
1577 lines
69 KiB
HTML
1577 lines
69 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>Itziar ZG | Desarrollo web soberano y sostenible</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<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="alternate"
|
|
hreflang="es"
|
|
href="https://www.itziarzameza.dev/index.html"
|
|
/>
|
|
<link
|
|
rel="alternate"
|
|
hreflang="ca"
|
|
href="https://www.itziarzameza.dev/index-ca.html"
|
|
/>
|
|
<link
|
|
rel="alternate"
|
|
hreflang="en"
|
|
href="https://www.itziarzameza.dev/index-en.html"
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
href="fonts/material-symbols-outlined.woff2"
|
|
as="font"
|
|
type="font/woff2"
|
|
crossorigin
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
href="fonts/space/space-grotesk-v22-latin-regular.woff2"
|
|
as="font"
|
|
type="font/woff2"
|
|
crossorigin
|
|
/>
|
|
<link rel="stylesheet" href="css/styles.css?v=1.1" />
|
|
<script
|
|
defer
|
|
src="https://stats.itziarzameza.dev/script.js"
|
|
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
|
|
data-domains="www.itziarzameza.dev"
|
|
></script>
|
|
</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="#"
|
|
>Inicio</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#manifiesto"
|
|
>Manifiesto</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#laboratorio"
|
|
>Laboratorio</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="huella.html"
|
|
>Huella</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-3">
|
|
<!-- Language Switcher -->
|
|
<div
|
|
class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold"
|
|
>
|
|
<span class="text-primary">ES</span>
|
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
|
<a
|
|
href="index-ca.html"
|
|
class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors"
|
|
title="Català"
|
|
>CA</a
|
|
>
|
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
|
<a
|
|
href="index-en.html"
|
|
class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors"
|
|
title="English"
|
|
>EN</a
|
|
>
|
|
</div>
|
|
<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-4xl md:text-6xl font-serif italic leading-[1.2] text-slate-900 dark:text-white mb-6 max-w-4xl font-light"
|
|
>
|
|
Cuando necesites utilizar la tecnología para generar impacto social
|
|
de forma responsable, habla
|
|
<span
|
|
class="text-primary not-italic font-display font-black tracking-tighter"
|
|
>conmigo</span
|
|
>.
|
|
</h1>
|
|
<p
|
|
class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mb-12 leading-relaxed"
|
|
>
|
|
Desarrolladora front-end especializada en tecnología ligera,
|
|
accesible y soberana. Con base en Ibiza.
|
|
</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<a
|
|
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 flex items-center justify-center"
|
|
href="#manifiesto"
|
|
>
|
|
Ver Manifiesto
|
|
</a>
|
|
<a
|
|
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 flex items-center justify-center"
|
|
href="#laboratorio"
|
|
>
|
|
Explorar Laboratorio
|
|
</a>
|
|
</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>
|
|
|
|
<!-- Manifiesto Section -->
|
|
<section class="py-24 bg-white/30 dark:bg-white/5" id="manifiesto">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2
|
|
class="text-4xl md:text-5xl font-serif italic mb-6 text-slate-900 dark:text-white"
|
|
>
|
|
Manifiesto
|
|
</h2>
|
|
<div class="h-1 w-20 bg-primary mx-auto mb-10 rounded-full"></div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 mb-16">
|
|
<div class="p-8 glass rounded-3xl border border-white/20">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="material-symbols-outlined text-primary text-3xl"
|
|
>target</span
|
|
>
|
|
<h3
|
|
class="text-2xl font-serif italic font-bold dark:text-white"
|
|
>
|
|
Propósito
|
|
</h3>
|
|
</div>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Democratizar y humanizar la tecnología, poniéndola al servicio
|
|
de las personas y del planeta, y no al revés. Busco crear
|
|
herramientas que empoderen a las comunidades en lugar de
|
|
concentrar el poder.
|
|
</p>
|
|
</div>
|
|
<div class="p-8 glass rounded-3xl border border-white/20">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="material-symbols-outlined text-primary text-3xl"
|
|
>explore</span
|
|
>
|
|
<h3
|
|
class="text-2xl font-serif italic font-bold dark:text-white"
|
|
>
|
|
Misión
|
|
</h3>
|
|
</div>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Desarrollar soluciones digitales eficientes, accesibles y
|
|
respetuosas con los derechos digitales, demostrando que otra
|
|
tecnología es posible desde el compromiso local y el impacto
|
|
global.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mb-10">
|
|
<h3
|
|
class="text-2xl font-serif italic text-slate-800 dark:text-slate-200"
|
|
>
|
|
Principios rectores
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<!-- Principio 1: Sostenibilidad -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full justify-between"
|
|
>
|
|
<div>
|
|
<div
|
|
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
|
|
>
|
|
<span class="material-symbols-outlined">eco</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Sostenibilidad (Green Software)
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Optimizar el consumo de recursos, minimizando la
|
|
transferencia de datos y la huella de carbono de las
|
|
aplicaciones web que desarrollo.
|
|
</p>
|
|
</div>
|
|
<a
|
|
href="https://badges.greensoftware.foundation/awards/b80fdaac-96a2-48e1-9170-7a84c0297295"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
|
|
>
|
|
<span class="material-symbols-outlined text-base"
|
|
>verified</span
|
|
>
|
|
<span>Green Software Practitioner</span>
|
|
<span class="material-symbols-outlined text-xs ml-auto"
|
|
>open_in_new</span
|
|
>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Principio 2: Software Libre -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<span class="material-symbols-outlined">folder_open</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Software Libre
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Apoyar y contribuir al código abierto como bien público
|
|
digital que fomenta la soberanía tecnológica y el aprendizaje
|
|
compartido.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principio 3: Bien Común -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<span class="material-symbols-outlined">groups</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Bien Común
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Priorizar proyectos y herramientas que generen un impacto
|
|
social positivo, medible y orientado a resolver necesidades
|
|
reales de la sociedad.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principio 4: Accesibilidad -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<span class="material-symbols-outlined"
|
|
>accessibility_new</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Accesibilidad (a11y)
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Diseñar interfaces web inclusivas para que todo el mundo pueda
|
|
acceder a la información sin barreras físicas, cognitivas o
|
|
tecnológicas.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principio 5: Privacidad -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<span class="material-symbols-outlined">shield</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Privacidad
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Respetar la soberanía de los datos personales, usando
|
|
analíticas éticas y cookieless, protegiendo a los usuarios del
|
|
rastreo corporativo.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principio 6: IA Responsable -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<span class="material-symbols-outlined">psychology</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
IA Responsable
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Utilizar modelos de IA de forma ética y transparente,
|
|
priorizando la ejecución local y velando porque sirvan de
|
|
apoyo a la agencia humana.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Laboratorio Section -->
|
|
<section class="py-24" id="laboratorio">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div class="mb-12">
|
|
<h2
|
|
class="text-5xl font-serif italic mb-4 text-slate-900 dark:text-white"
|
|
>
|
|
Mi laboratorio
|
|
</h2>
|
|
<p class="text-slate-500 dark:text-slate-400">
|
|
Un espacio de experimentación técnica, herramientas reales e
|
|
infraestructura digital soberana.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tab Buttons Container -->
|
|
<div
|
|
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
|
|
>
|
|
<button
|
|
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
|
|
data-tab="infraestructura"
|
|
>
|
|
Infraestructura
|
|
</button>
|
|
<!-- Experimentos tab: en standby, código del panel preservado más abajo en comentarios -->
|
|
|
|
<!--
|
|
|
|
<button
|
|
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
|
|
data-tab="experimentos"
|
|
>
|
|
Experimentos
|
|
</button>
|
|
|
|
-->
|
|
<button
|
|
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
|
|
data-tab="proyectos"
|
|
>
|
|
Proyectos
|
|
</button>
|
|
<button
|
|
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
|
|
data-tab="writing"
|
|
>
|
|
Notes
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Contents -->
|
|
<div id="tab-contents">
|
|
<!-- Tab 1: Infraestructura -->
|
|
<div id="tab-infraestructura" class="tab-pane block">
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<div class="space-y-6">
|
|
<h3 class="text-2xl font-serif italic dark:text-white">
|
|
Qué uso y por qué
|
|
</h3>
|
|
<p
|
|
class="text-slate-700 dark:text-slate-300 leading-relaxed"
|
|
>
|
|
La soberanía tecnológica empieza en los cimientos. He
|
|
decidido gestionar mi propia infraestructura para asegurar
|
|
el control de mis datos, la privacidad de mis proyectos y
|
|
reducir la dependencia de los gigantes de la nube.
|
|
</p>
|
|
<div
|
|
class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl"
|
|
>
|
|
<div
|
|
class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2"
|
|
>
|
|
<span class="material-symbols-outlined">bolt</span>
|
|
<span>Compromiso Verde</span>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
Mi infraestructura está alojada en el centro de datos de
|
|
Hetzner en Helsinki, alimentado por energía 100% libre
|
|
de carbono procedente de fuentes eólicas e hidráulicas.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>dns</span
|
|
>
|
|
<h4 class="font-bold dark:text-white">
|
|
Hetzner Helsinki
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Servidores dedicados y VPS alimentados por energía verde
|
|
en Finlandia.
|
|
</p>
|
|
</div>
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>deployed_code</span
|
|
>
|
|
<h4 class="font-bold dark:text-white">Coolify</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Alternativa self-hosted y de código abierto a
|
|
Vercel/Heroku.
|
|
</p>
|
|
</div>
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>git_gesture</span
|
|
>
|
|
<h4 class="font-bold dark:text-white">Forgejo</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Servicio Git ligero autohospedado para control soberano
|
|
de código.
|
|
</p>
|
|
</div>
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>hub</span
|
|
>
|
|
<h4 class="font-bold dark:text-white">n8n</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Automatización de flujos de trabajo self-hosted libre de
|
|
ataduras de SaaS.
|
|
</p>
|
|
</div>
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>monitoring</span
|
|
>
|
|
<h4 class="font-bold dark:text-white">Umami</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Analítica web ética, respetuosa con la privacidad y
|
|
cookieless.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
|
|
<!--
|
|
<div id="tab-experimentos" class="tab-pane hidden">
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl"
|
|
>nest_eco_leaf</span
|
|
>
|
|
<span
|
|
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
|
|
>Activo</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Medición de Green Software
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Comparación empírica del consumo de CPU y red entre
|
|
arquitecturas SSR (Astro/Next.js) y páginas HTML estáticas
|
|
optimizadas.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl"
|
|
>memory</span
|
|
>
|
|
<span
|
|
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
|
|
>Activo</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
IA Local en Raspberry Pi
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Ejecución de modelos pequeños como Llama 3.2 1B y Phi-3
|
|
con Ollama en local para tareas de clasificación y
|
|
etiquetado con cero coste de API y privacidad garantizada.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl"
|
|
>visibility</span
|
|
>
|
|
<span
|
|
class="px-2.5 py-0.5 bg-amber-500/10 text-amber-500 text-xs font-bold rounded-full"
|
|
>Pendiente</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Estrés de Lectores de Pantalla
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Auditoría manual de interfaces complejas con lectores NVDA
|
|
y VoiceOver para validar flujos interactivos dinámicos y
|
|
estados de ARIA en vivo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<!-- Tab 3: Proyectos -->
|
|
<div id="tab-proyectos" class="tab-pane hidden">
|
|
<!-- Herramientas Reales -->
|
|
<div class="mb-12">
|
|
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
|
|
Herramientas reales, no demos
|
|
</h3>
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<!-- Eivissa Environmental Watch -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M724 222Q632 222 569.5 281.0Q507 340 502 416L444 416Q438 340 376.0 281.0Q314 222 222 222Q152 222 102 264Q79 222 79 174Q79 96 137.5 41.5Q196 -13 274 -13Q343 -13 396.0 31.0Q449 75 466 140Q483 75 536.0 31.0Q589 -13 658 -13Q736 -13 794.5 41.5Q853 96 853 174Q853 222 830 264Q780 222 724 222ZM502 496L502 510Q502 612 437.5 689.0Q373 766 274 780L274 940L354 940L354 780Q255 766 190.5 689.0Q126 612 126 510L126 496Q126 481 137.0 470.0Q148 459 163 459L465 459Q480 459 491.0 470.0Q502 481 502 496ZM502 822Q502 808 513.0 797.0Q524 786 538 786L554 786L554 612L626 612Q682 612 723.0 653.0Q764 694 764 750L764 838L848 838Q863 838 874.0 849.0Q885 860 885 875L885 891Q885 906 874.0 917.0Q863 928 848 928L764 928L764 940L706 940L706 928L538 928L538 786Q538 786 538.0 786.0Q538 786 538 786Q538 822 538.0 822.0Q538 822 538 822L502 822Z"/></svg>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Eivissa Environmental Watch
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Lector automatizado de noticias y del BOIB con
|
|
clasificación local mediante Ollama. Detecta y filtra
|
|
contenido relacionado con medio ambiente en Eivissa.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operativo</span
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-slate-400"
|
|
>Ollama • Navidrome</span
|
|
>
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-3')"
|
|
>
|
|
Ver detalles
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div><!-- Cases Tancades -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>query_stats</span
|
|
>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Cases Tancades
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Diagnóstico abierto de la vivienda en Balears: cruza
|
|
datos oficiales del INE, Airbnb y registros HUT del
|
|
Govern para mostrar cuántos pisos están vacíos frente
|
|
a la presión del alquiler turístico.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operativo</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Next.js · Datos abiertos INE/Govern Balear</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Navidrome -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>music_note</span
|
|
>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Servidor Navidrome
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operativo</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Docker • Hetzner</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flujo n8n + Ollama -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>route</span
|
|
>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Flujo n8n + Ollama
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Pipeline autónomo en local que intercepta notas de
|
|
voz, las transcribe y las procesa usando Ollama con
|
|
modelos de IA open-source sin enviar datos a OpenAI.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operativo</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>n8n • Ollama • Whisper</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Visualización Datos Baleares -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>query_stats</span
|
|
>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Visualización Datos Baleares
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Panel interactivo y visualización ecológica sobre el
|
|
consumo de agua y recursos en el archipiélago balear,
|
|
diseñado con tecnologías web ligeras.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
|
>Migración pendiente (actualmente en Vercel)</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>HTML5 • JS • D3.js</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contribución Open Source -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>volunteer_activism</span
|
|
>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Contribución Open Source
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
|
|
>Sin iniciar</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Forgejo • GitHub</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Trabajo Anterior (Proyectos de IA previos) -->
|
|
<div
|
|
class="border-t border-slate-200 dark:border-slate-800 pt-8"
|
|
>
|
|
<details class="group cursor-pointer">
|
|
<summary
|
|
class="flex justify-between items-center text-lg font-serif italic text-slate-700 dark:text-slate-300 select-none list-none"
|
|
>
|
|
<span
|
|
class="flex items-center gap-2 hover:text-primary transition-colors"
|
|
>
|
|
<span
|
|
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
|
|
>chevron_right</span
|
|
>
|
|
Trabajo Anterior (Proyectos e IA comercial)
|
|
</span>
|
|
</summary>
|
|
<div class="grid md:grid-cols-2 gap-8 mt-6">
|
|
<!-- Project 1: AI Knowledge Pipeline -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
AI Knowledge Pipeline
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Sistema de procesamiento inteligente multimedia.
|
|
Recibe audios y PDFs, los transcribe y los
|
|
estructura mediante APIs de IA comerciales para su
|
|
posterior consulta semántica.
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-1')"
|
|
>
|
|
Ver detalles y stack
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 2: ChefGPT -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
ChefGPT
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Bot conversacional de Telegram conectado con Google
|
|
Sheets que sugiere recetas basándose en ingredientes
|
|
disponibles en tiempo real.
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-2')"
|
|
>
|
|
Ver detalles y stack
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 4: Writing -->
|
|
<div id="tab-writing" class="tab-pane hidden">
|
|
<div class="max-w-2xl mx-auto space-y-8">
|
|
<p
|
|
class="text-slate-600 dark:text-slate-400 italic text-center text-sm"
|
|
>
|
|
Reflexiones, aprendizajes técnicos y notas sobre soberanía
|
|
digital sin pretensiones de sentar cátedra.
|
|
</p>
|
|
|
|
<!-- Nota 1: Green Software Practitioner -->
|
|
<article
|
|
class="p-6 glass rounded-2xl border border-white/10 space-y-4"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<span
|
|
class="text-xs text-slate-400 dark:text-slate-500 font-mono"
|
|
>20 de Julio, 2026</span
|
|
>
|
|
<span
|
|
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full flex items-center gap-1"
|
|
>
|
|
<span class="material-symbols-outlined text-xs"
|
|
>verified</span
|
|
>
|
|
Green Software
|
|
</span>
|
|
</div>
|
|
|
|
<h4 class="font-bold dark:text-white text-xl text-primary">
|
|
Green Software Practitioner — 5 ideas que me llevo
|
|
</h4>
|
|
|
|
<div
|
|
class="space-y-4 text-sm text-slate-700 dark:text-slate-300 leading-relaxed"
|
|
>
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-1"
|
|
>
|
|
¿Por qué hice esta certificación?
|
|
</h5>
|
|
<p>
|
|
Porque quiero construir tecnología que tenga en cuenta
|
|
su impacto ambiental y social.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
Cinco ideas que me llevo:
|
|
</h5>
|
|
<ol class="list-decimal list-inside space-y-2.5 pl-1">
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>La mejor energía es la que no se consume.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Optimizar no es solo hacer la web más rápida.
|
|
También significa consumir menos recursos.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>La eficiencia empieza en el diseño.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Elegir una arquitectura sencilla suele ser mejor
|
|
que optimizar después.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Medir antes de mejorar.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
No podemos reducir aquello que no medimos.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>El software también tiene huella de
|
|
carbono.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Cada transferencia de datos, proceso o
|
|
almacenamiento tiene un coste.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Green Software no consiste solo en consumir
|
|
menos.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
También implica diseñar productos que ayuden a
|
|
reducir el impacto ambiental de las personas y las
|
|
organizaciones.
|
|
</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-1"
|
|
>
|
|
¿Y ahora qué?
|
|
</h5>
|
|
<p>
|
|
Estoy leyendo <em>Soberanía Tecnológica</em> porque
|
|
creo que la sostenibilidad no depende solo del consumo
|
|
energético, sino también de quién controla la
|
|
infraestructura y el software que utilizamos.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Frase fija al final de la nota -->
|
|
<div
|
|
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400"
|
|
>
|
|
Estas son notas de aprendizaje, no guías definitivas. Si
|
|
ves algo que se pueda mejorar, me encantará escucharte.
|
|
</div>
|
|
</article>
|
|
|
|
<article class="p-6 glass rounded-2xl border border-white/10">
|
|
<span
|
|
class="text-xs text-slate-400 dark:text-slate-500 font-mono"
|
|
>19 de Julio, 2026</span
|
|
>
|
|
<h4
|
|
class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer"
|
|
>
|
|
La imperfección como aliada: por qué no uso purismos al
|
|
medir el carbono web
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
A veces obsesionarse con la máxima optimización técnica
|
|
bloquea la publicación de herramientas útiles. En este
|
|
post explico mis decisiones de infraestructura y los
|
|
límites pragmáticos que asumo...
|
|
</p>
|
|
<a
|
|
href="huella.html"
|
|
class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
|
|
>
|
|
Leer artículo completo en la sección Huella
|
|
<span class="material-symbols-outlined text-xs"
|
|
>arrow_right_alt</span
|
|
>
|
|
</a>
|
|
<div
|
|
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400 mt-4"
|
|
>
|
|
Estas son notas de aprendizaje, no guías definitivas. Si
|
|
ves algo que se pueda mejorar, me encantará escucharte.
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
</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"
|
|
>
|
|
¿Hablamos?
|
|
</h2>
|
|
<p
|
|
class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10"
|
|
>
|
|
Si buscas tecnología ligera, accesible y con los pies en la
|
|
tierra — o simplemente quieres hablar de soberanía digital —
|
|
escríbeme.
|
|
</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.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="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>© 2026 Itziar ZG.</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="privacidad.html"
|
|
>Privacidad</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: Eivissa Environmental Watch -->
|
|
<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"
|
|
>
|
|
Eivissa Environmental Watch
|
|
</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="images/eivissa-environmental-watch.webp"
|
|
alt="Eivissa Environmental Watch"
|
|
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">
|
|
Lector automatizado de noticias locales y del BOIB (Butlletí
|
|
Oficial de les Illes Balears) con clasificación local mediante
|
|
Ollama. Detecta y filtra el contenido relacionado con medio
|
|
ambiente en Eivissa, mostrando solo lo relevante y enlazando a
|
|
la fuente original (noticia o BOIB).
|
|
</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>Scraping periódico de fuentes de noticias locales y BOIB</li>
|
|
<li>Clasificación local con modelos de IA open-source (Ollama)</li>
|
|
<li>Filtrado automático por temática medioambiental</li>
|
|
<li>Interfaz ligera para consultar las clasificaciones</li>
|
|
<li>Enlaces directos al BOIB y a las noticias originales</li>
|
|
<li>Cero envío de datos a APIs comerciales: privacidad total</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">Ollama (LLM local)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Navidrome (servidor)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Hetzner (infraestructura verde)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Docker</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">HTML estático ligero</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">
|
|
Sitio activo en producción, publicando diariamente contenido
|
|
ambiental curado por IA local. La arquitectura totalmente
|
|
self-hosted garantiza soberanía sobre los datos y cero
|
|
dependencia de servicios cloud externos.
|
|
</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>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|