Restructuración de portfolio: nuevo hero, manifiesto, laboratorio y página de huella
This commit is contained in:
ItziarZG
+325
@@ -0,0 +1,325 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>Huella Digital y Decisiones Técnicas | Itziar ZG</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
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
<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 flex flex-col justify-between">
|
||||||
|
<!-- Floating Fluid Shapes -->
|
||||||
|
<div
|
||||||
|
class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50 pointer-events-none"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40 pointer-events-none"
|
||||||
|
></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"
|
||||||
|
>
|
||||||
|
<a href="index.html" 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>
|
||||||
|
</a>
|
||||||
|
<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="index.html"
|
||||||
|
>Inicio</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||||
|
href="index.html#manifiesto"
|
||||||
|
>Manifiesto</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||||
|
href="index.html#laboratorio"
|
||||||
|
>Laboratorio</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="text-sm font-medium text-primary hover:text-primary transition-colors"
|
||||||
|
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-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>
|
||||||
|
<a
|
||||||
|
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 flex items-center justify-center"
|
||||||
|
href="index.html#contact"
|
||||||
|
>
|
||||||
|
Hablemos
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
|
||||||
|
|
||||||
|
<!-- Back Link -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<a
|
||||||
|
href="index.html"
|
||||||
|
class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined text-sm">arrow_back</span>
|
||||||
|
Volver al inicio
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Page Title -->
|
||||||
|
<div class="mb-16">
|
||||||
|
<h1 class="text-4xl md:text-6xl font-serif italic mb-6 text-slate-900 dark:text-white leading-tight">
|
||||||
|
Huella ecológica &<br />
|
||||||
|
<span class="text-primary not-italic font-display font-black tracking-tighter">Decisiones</span> técnicas
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
|
||||||
|
Medición del impacto ambiental de este sitio web y desglose de los compromisos pragmáticos adoptados durante su desarrollo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Impact Metrics Grid -->
|
||||||
|
<div class="grid md:grid-cols-3 gap-6 mb-16">
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">weight</span>
|
||||||
|
<h3 class="font-bold mb-2 dark:text-white">Peso de la página</h3>
|
||||||
|
<p class="text-3xl font-bold text-primary mb-2">~245 KB</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||||
|
Total de datos transferidos en la primera carga completa del sitio. La media web mundial actual supera los 2.5 MB.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">co2</span>
|
||||||
|
<h3 class="font-bold mb-2 dark:text-white">Emisiones estimadas</h3>
|
||||||
|
<p class="text-3xl font-bold text-primary mb-2">0.05 g</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||||
|
CO2 generado por visita, medido con la fórmula estandarizada de Sustainable Web Design. El promedio web es de 0.5g.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">nest_eco_leaf</span>
|
||||||
|
<h3 class="font-bold mb-2 dark:text-white">Servidor ecológico</h3>
|
||||||
|
<p class="text-3xl font-bold text-emerald-500 mb-2">100%</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||||
|
La web está alojada en Hetzner (Helsinki), un centro de datos alimentado por energía libre de carbono (eólica e hidráulica).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Anti-Purismo / Compromisos Imperfectos -->
|
||||||
|
<section class="space-y-8 mb-20">
|
||||||
|
<div class="border-l-4 border-primary pl-6">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">El recordatorio anti-purismo</h2>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">El pragmatismo frente a la teoría absoluta</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
En el desarrollo de software responsable, es fácil caer en el purismo de querer reducir la transferencia a cero absoluto o rechazar cualquier recurso externo. Sin embargo, para que el código sea sostenible también debe ser mantenible y útil. Aquí documento las decisiones imperfectas pero justificadas tomadas en esta web:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Compromiso 1: Tailwind CSS por CDN -->
|
||||||
|
<div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
|
||||||
|
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-amber-500">warning</span>
|
||||||
|
Tailwind CSS mediante CDN de desarrollo
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
||||||
|
<strong>El problema:</strong> El script de Tailwind en línea pesa en torno a los 100 KB transferidos y compila las clases en el navegador del usuario en tiempo real. Compilar y empaquetar CSS en producción reduciría este peso a unos 10-15 KB.
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<strong>El compromiso:</strong> Elegimos mantener este sitio sin pasos de construcción (no-build setup) para garantizar que cualquiera pueda descargar el código, hacer doble clic en <code>index.html</code> y ver el sitio funcionando al instante sin instalar dependencias de Node.js. Esto prolonga la vida útil del código (impide la obsolescencia de dependencias de build) a cambio de un ligero impacto de descarga.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Compromiso 2: Tipografías de Google Fonts -->
|
||||||
|
<div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
|
||||||
|
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-amber-500">warning</span>
|
||||||
|
Google Fonts externas vs. Fuentes del Sistema
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
||||||
|
<strong>El problema:</strong> Importamos <em>Space Grotesk</em> y <em>Instrument Serif</em> externamente. Esto requiere establecer una conexión con los servidores de Google y descargar los archivos tipográficos.
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<strong>El compromiso:</strong> Las fuentes del sistema son la opción más limpia energéticamente. Sin embargo, para un portfolio personal, la tipografía es un pilar estético de la identidad visual. Optamos por descargar solo los pesos indispensables y compensamos el consumo eliminando por completo cualquier animación pesada de JavaScript o imágenes sin optimizar.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Compromiso 3: Material Symbols (Iconos) -->
|
||||||
|
<div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
|
||||||
|
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-amber-500">warning</span>
|
||||||
|
Librería de Iconos en la Nube
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
||||||
|
<strong>El problema:</strong> Cargamos los iconos Material Symbols a través del CDN de Google en lugar de incrustar manualmente solo los SVGs que utilizamos.
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<strong>El compromiso:</strong> Incrustar SVGs en línea es más óptimo, pero dificulta la legibilidad del código HTML y hace que el mantenimiento del portfolio sea más complejo para cambios rápidos. Usar el CDN proporciona una API simple y limpia para el mantenimiento cotidiano.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="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 pointer-events-none">
|
||||||
|
<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 soberanía digital y tecnología responsable.
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+374
-330
@@ -74,18 +74,23 @@
|
|||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||||
href="#about"
|
href="#"
|
||||||
>Sobre mí</a
|
>Inicio</a
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||||
href="#projects"
|
href="#manifiesto"
|
||||||
>Proyectos</a
|
>Manifiesto</a
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||||
href="#stack"
|
href="#laboratorio"
|
||||||
>Tech Stack</a
|
>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
|
<a
|
||||||
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||||
@@ -136,35 +141,28 @@
|
|||||||
Disponible para nuevos proyectos
|
Disponible para nuevos proyectos
|
||||||
</div>
|
</div>
|
||||||
<h1
|
<h1
|
||||||
class="text-5xl md:text-8xl font-serif italic leading-[1.1] text-slate-900 dark:text-white mb-6 max-w-4xl"
|
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"
|
||||||
>
|
>
|
||||||
Arquitecta de
|
Cuando necesitas utilizar la tecnología para generar impacto social de forma responsable, habla con <span class="text-primary not-italic font-display font-black tracking-tighter">Itziar</span>.
|
||||||
<span
|
|
||||||
class="text-primary not-italic font-display font-black tracking-tighter"
|
|
||||||
>IA</span
|
|
||||||
>
|
|
||||||
& Automatización
|
|
||||||
</h1>
|
</h1>
|
||||||
<p
|
<p
|
||||||
class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mb-12 leading-relaxed"
|
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
|
Desarrolladora front-end especializada en tecnología ligera, accesible y soberana. Con base en Ibiza.
|
||||||
herramientas, procesan información y transforman flujos de trabajo
|
|
||||||
en sistemas inteligentes.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-wrap justify-center gap-4">
|
<div class="flex flex-wrap justify-center gap-4">
|
||||||
<button
|
<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"
|
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"
|
||||||
onclick="scrollToProjects()"
|
href="#manifiesto"
|
||||||
>
|
>
|
||||||
Explorar Proyectos
|
Ver Manifiesto
|
||||||
</button>
|
</a>
|
||||||
<button
|
<a
|
||||||
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 flex items-center justify-center"
|
||||||
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"
|
href="#laboratorio"
|
||||||
>
|
>
|
||||||
Descargar CV
|
Explorar Laboratorio
|
||||||
</button>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<!-- Abstract Decorative Hero Image -->
|
<!-- Abstract Decorative Hero Image -->
|
||||||
<div
|
<div
|
||||||
@@ -183,351 +181,397 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- About Section -->
|
<!-- Manifiesto Section -->
|
||||||
<section class="py-24 bg-white/30 dark:bg-white/5" id="about">
|
<section class="py-24 bg-white/30 dark:bg-white/5" id="manifiesto">
|
||||||
<div class="mx-auto max-w-6xl px-6">
|
<div class="mx-auto max-w-6xl px-6">
|
||||||
<div class="max-w-3xl">
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
||||||
<h2
|
<h2
|
||||||
class="text-4xl font-serif italic mb-6 text-slate-900 dark:text-white"
|
class="text-4xl md:text-5xl font-serif italic mb-6 text-slate-900 dark:text-white"
|
||||||
>
|
>
|
||||||
Sobre mí
|
Manifiesto
|
||||||
</h2>
|
</h2>
|
||||||
<p
|
<div class="h-1 w-20 bg-primary mx-auto mb-10 rounded-full"></div>
|
||||||
class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-8"
|
</div>
|
||||||
>
|
|
||||||
Ingeniera de telecomunicaciones y desarrolladora especializada
|
<div class="grid md:grid-cols-2 gap-12 mb-16">
|
||||||
en automatización de procesos, integración de APIs y creación de
|
<div class="p-8 glass rounded-3xl border border-white/20">
|
||||||
agentes basados en inteligencia artificial. Construyo sistemas
|
<div class="flex items-center gap-3 mb-4">
|
||||||
que conectan herramientas, procesan información y crean flujos
|
<span class="material-symbols-outlined text-primary text-3xl">target</span>
|
||||||
automatizados que reducen trabajo manual.
|
<h3 class="text-2xl font-serif italic font-bold dark:text-white">Propósito</h3>
|
||||||
</p>
|
</div>
|
||||||
<div class="grid md:grid-cols-2 gap-4 mt-12">
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
<div class="p-6 glass rounded-2xl">
|
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.
|
||||||
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6 glass rounded-2xl">
|
<div class="p-8 glass rounded-3xl border border-white/20">
|
||||||
<span
|
<div class="flex items-center gap-3 mb-4">
|
||||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
<span class="material-symbols-outlined text-primary text-3xl">explore</span>
|
||||||
>psychology</span
|
<h3 class="text-2xl font-serif italic font-bold dark:text-white">Misión</h3>
|
||||||
>
|
</div>
|
||||||
<h3 class="font-bold mb-2 dark:text-white">Agentes IA</h3>
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
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.
|
||||||
LLMs y flujos generativos autónomos.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6 glass rounded-2xl">
|
</div>
|
||||||
<span
|
|
||||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
<div class="text-center mb-10">
|
||||||
>hub</span
|
<h3 class="text-2xl font-serif italic text-slate-800 dark:text-slate-200">Principios rectores</h3>
|
||||||
>
|
</div>
|
||||||
<h3 class="font-bold mb-2 dark:text-white">
|
|
||||||
Integración APIs
|
<div class="grid md:grid-cols-3 gap-6">
|
||||||
</h3>
|
<!-- Principio 1: Sostenibilidad -->
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
<div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full">
|
||||||
Conexión fluida entre servicios SaaS.
|
<div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary 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">
|
||||||
|
Optimizar el consumo de recursos, minimizando la transferencia de datos y la huella de carbono de las aplicaciones web que desarrollo.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6 glass rounded-2xl">
|
|
||||||
<span
|
<!-- Principio 2: Software Libre -->
|
||||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
<div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full">
|
||||||
>terminal</span
|
<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>
|
||||||
<h3 class="font-bold mb-2 dark:text-white">Web Moderna</h3>
|
</div>
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
<h4 class="font-bold text-lg mb-2 dark:text-white">Software Libre</h4>
|
||||||
Desarrollo Frontend con Next.js y React.
|
<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>
|
</p>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Selected Works Section -->
|
<!-- Laboratorio Section -->
|
||||||
<section class="py-24" id="projects">
|
<section class="py-24" id="laboratorio">
|
||||||
<div class="mx-auto max-w-6xl px-6">
|
<div class="mx-auto max-w-6xl px-6">
|
||||||
<div
|
<div class="mb-12">
|
||||||
class="flex justify-between items-end mb-16 flex-col md:flex-row gap-4"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<h2
|
<h2
|
||||||
class="text-5xl font-serif italic mb-4 text-slate-900 dark:text-white"
|
class="text-5xl font-serif italic mb-4 text-slate-900 dark:text-white"
|
||||||
>
|
>
|
||||||
Selected Works
|
Mi laboratorio
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-slate-500 dark:text-slate-400">
|
<p class="text-slate-500 dark:text-slate-400">
|
||||||
Proyectos destacados en automatización inteligente.
|
Un espacio de experimentación técnica, herramientas reales e infraestructura digital soberana.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden md:block">
|
|
||||||
<span
|
<!-- Tab Buttons Container -->
|
||||||
class="material-symbols-outlined text-slate-300 dark:text-slate-700 text-6xl"
|
<div class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8">
|
||||||
>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
|
<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"
|
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
|
||||||
onclick="openModal('project-1')"
|
data-tab="infraestructura"
|
||||||
>
|
>
|
||||||
Ver detalles
|
Infraestructura
|
||||||
</button>
|
</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="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"
|
||||||
|
>
|
||||||
|
Writing
|
||||||
|
</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">
|
||||||
|
Nuestra 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 class="p-6 glass rounded-2xl border border-white/10">
|
||||||
|
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">screen_record</span>
|
||||||
|
<h4 class="font-bold dark:text-white">Cap</h4>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Herramienta de grabación de pantalla de código libre en nuestro nodo.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab 2: Experimentos -->
|
||||||
|
<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">
|
||||||
|
<!-- 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>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
|
||||||
|
Instancia personal autohospedada de música en Hetzner para recuperar la soberanía sobre mis archivos de audio y evitar algoritmos corporativos de streaming.
|
||||||
|
</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">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>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
|
||||||
|
Colaboración activa y corrección de bugs en herramientas y frameworks de código abierto que utilizamos en el día a día.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between mt-4">
|
||||||
|
<span class="text-[10px] uppercase font-bold tracking-wider text-primary bg-primary/10 px-2 py-1 rounded">Constante</span>
|
||||||
|
<span class="text-xs text-slate-400">Forgejo • GitHub</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">En Desarrollo</span>
|
||||||
|
<span class="text-xs text-slate-400">HTML5 • JS • D3.js</span>
|
||||||
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Project 2: ChefGPT -->
|
<!-- Project 2: ChefGPT -->
|
||||||
<div
|
<div class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between">
|
||||||
class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
|
<div>
|
||||||
>
|
<h4 class="font-bold text-slate-900 dark:text-white mb-2">ChefGPT</h4>
|
||||||
<div class="aspect-video relative overflow-hidden">
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
|
||||||
<img
|
Bot conversacional de Telegram conectado con Google Sheets que sugiere recetas basándose en ingredientes disponibles en tiempo real.
|
||||||
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>
|
</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>
|
</div>
|
||||||
<button
|
<div class="flex gap-4 items-center">
|
||||||
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"
|
<button class="text-xs text-primary hover:underline font-bold" onclick="openModal('project-2')">Ver detalles y stack</button>
|
||||||
onclick="openModal('project-2')"
|
</div>
|
||||||
>
|
</div>
|
||||||
Ver detalles
|
</div>
|
||||||
</button>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Project 3: Content Processing Automation -->
|
<!-- Tab 4: Writing -->
|
||||||
<!-- <div
|
<div id="tab-writing" class="tab-pane hidden">
|
||||||
class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
|
<div class="max-w-2xl mx-auto space-y-8">
|
||||||
>
|
<p class="text-slate-600 dark:text-slate-400 italic text-center text-sm">
|
||||||
<div class="aspect-video relative overflow-hidden">
|
Reflexiones, aprendizajes técnicos y notas sobre soberanía digital sin pretensiones de sentar cátedra.
|
||||||
<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>
|
</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 -->
|
<article class="p-6 glass rounded-2xl border border-white/10">
|
||||||
<section class="py-24 relative" id="stack">
|
<span class="text-xs text-slate-400 dark:text-slate-500 font-mono">19 de Julio, 2026</span>
|
||||||
<div
|
<h4 class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer">
|
||||||
class="absolute inset-0 bg-primary/[0.03] dark:bg-primary/[0.02] skew-y-3 -z-10"
|
La imperfección como aliada: por qué no uso purismos al medir el carbono web
|
||||||
></div>
|
</h4>
|
||||||
<div class="mx-auto max-w-4xl px-6 text-center">
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
<h2
|
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...
|
||||||
class="text-4xl font-serif italic mb-16 text-slate-900 dark:text-white"
|
</p>
|
||||||
>
|
<a href="huella.html" class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1">
|
||||||
Tech Curated Stack
|
Leer artículo completo en la sección Huella
|
||||||
</h2>
|
<span class="material-symbols-outlined text-xs">arrow_right_alt</span>
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
</a>
|
||||||
<div class="flex flex-col items-center gap-4 group">
|
</article>
|
||||||
<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"
|
<article class="p-6 glass rounded-2xl border border-white/10">
|
||||||
>
|
<span class="text-xs text-slate-400 dark:text-slate-500 font-mono">2 de Junio, 2026</span>
|
||||||
<span class="material-symbols-outlined text-3xl">hub</span>
|
<h4 class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer">
|
||||||
|
Migrando mi código: De GitHub a Forgejo en mi propio VPS
|
||||||
|
</h4>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
|
Primeros pasos configurando Forgejo mediante Docker. Detalle de consumo de memoria RAM (spoiler: consume menos de 100MB en repositorios medianos) y facilidad de uso...
|
||||||
|
</p>
|
||||||
|
<span class="text-xs text-slate-400 mt-4 block">Próximamente</span>
|
||||||
|
</article>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
+39
-1
@@ -105,6 +105,43 @@ function closeModal(projectId) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Laboratorio Tabs Management
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize tabs behavior for the Laboratorio section
|
||||||
|
*/
|
||||||
|
function initTabs() {
|
||||||
|
const tabButtons = document.querySelectorAll(".tab-btn");
|
||||||
|
const tabPanes = document.querySelectorAll(".tab-pane");
|
||||||
|
|
||||||
|
tabButtons.forEach((btn) => {
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
const targetTab = btn.getAttribute("data-tab");
|
||||||
|
|
||||||
|
// Update button styles to reflect active/inactive state
|
||||||
|
tabButtons.forEach((b) => {
|
||||||
|
b.classList.remove("bg-primary", "text-white", "shadow-md", "shadow-primary/25");
|
||||||
|
b.classList.add("text-slate-600", "dark:text-slate-400", "hover:bg-slate-100", "dark:hover:bg-white/5");
|
||||||
|
});
|
||||||
|
btn.classList.add("bg-primary", "text-white", "shadow-md", "shadow-primary/25");
|
||||||
|
btn.classList.remove("text-slate-600", "dark:text-slate-400", "hover:bg-slate-100", "dark:hover:bg-white/5");
|
||||||
|
|
||||||
|
// Show the selected tab content and hide the others
|
||||||
|
tabPanes.forEach((pane) => {
|
||||||
|
if (pane.id === `tab-${targetTab}`) {
|
||||||
|
pane.classList.remove("hidden");
|
||||||
|
pane.classList.add("block");
|
||||||
|
} else {
|
||||||
|
pane.classList.remove("block");
|
||||||
|
pane.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
// Event Listeners
|
// Event Listeners
|
||||||
// ============================================
|
// ============================================
|
||||||
@@ -125,6 +162,7 @@ document.addEventListener("keydown", function (event) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initialize theme as early as possible
|
* Initialize theme and tabs
|
||||||
*/
|
*/
|
||||||
initTheme();
|
initTheme();
|
||||||
|
initTabs();
|
||||||
|
|||||||
Reference in New Issue
Block a user