Restructuración de portfolio: nuevo hero, manifiesto, laboratorio y página de huella
This commit is contained in:
ItziarZG
+385
-341
@@ -74,18 +74,23 @@
|
||||
>
|
||||
<a
|
||||
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||
href="#about"
|
||||
>Sobre mí</a
|
||||
href="#"
|
||||
>Inicio</a
|
||||
>
|
||||
<a
|
||||
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||
href="#projects"
|
||||
>Proyectos</a
|
||||
href="#manifiesto"
|
||||
>Manifiesto</a
|
||||
>
|
||||
<a
|
||||
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||
href="#stack"
|
||||
>Tech Stack</a
|
||||
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"
|
||||
@@ -136,35 +141,28 @@
|
||||
Disponible para nuevos proyectos
|
||||
</div>
|
||||
<h1
|
||||
class="text-5xl md:text-8xl font-serif italic leading-[1.1] text-slate-900 dark:text-white mb-6 max-w-4xl"
|
||||
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
|
||||
<span
|
||||
class="text-primary not-italic font-display font-black tracking-tighter"
|
||||
>IA</span
|
||||
>
|
||||
& Automatización
|
||||
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>.
|
||||
</h1>
|
||||
<p
|
||||
class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mb-12 leading-relaxed"
|
||||
>
|
||||
Construyo automatizaciones y agentes de IA que conectan
|
||||
herramientas, procesan información y transforman flujos de trabajo
|
||||
en sistemas inteligentes.
|
||||
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">
|
||||
<button
|
||||
class="bg-primary text-white px-8 py-4 rounded-xl font-bold text-lg hover:translate-y-[-2px] transition-transform shadow-xl shadow-primary/30"
|
||||
onclick="scrollToProjects()"
|
||||
<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"
|
||||
>
|
||||
Explorar Proyectos
|
||||
</button>
|
||||
<button
|
||||
disabled
|
||||
class="glass px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/60 dark:hover:bg-white/10 transition-colors text-slate-800 dark:text-slate-200"
|
||||
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"
|
||||
>
|
||||
Descargar CV
|
||||
</button>
|
||||
Explorar Laboratorio
|
||||
</a>
|
||||
</div>
|
||||
<!-- Abstract Decorative Hero Image -->
|
||||
<div
|
||||
@@ -183,351 +181,397 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- About Section -->
|
||||
<section class="py-24 bg-white/30 dark:bg-white/5" id="about">
|
||||
<!-- 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-3xl">
|
||||
<div class="max-w-4xl mx-auto text-center mb-16">
|
||||
<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>
|
||||
<p
|
||||
class="text-lg text-slate-700 dark:text-slate-300 leading-relaxed mb-8"
|
||||
>
|
||||
Ingeniera de telecomunicaciones y desarrolladora especializada
|
||||
en automatización de procesos, integración de APIs y creación de
|
||||
agentes basados en inteligencia artificial. Construyo sistemas
|
||||
que conectan herramientas, procesan información y crean flujos
|
||||
automatizados que reducen trabajo manual.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-2 gap-4 mt-12">
|
||||
<div class="p-6 glass rounded-2xl">
|
||||
<span
|
||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||
>router</span
|
||||
>
|
||||
<h3 class="font-bold mb-2 dark:text-white">Automatización</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
||||
Optimización de procesos complejos con workflows
|
||||
inteligentes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-6 glass rounded-2xl">
|
||||
<span
|
||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||
>psychology</span
|
||||
>
|
||||
<h3 class="font-bold mb-2 dark:text-white">Agentes IA</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
||||
LLMs y flujos generativos autónomos.
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-6 glass rounded-2xl">
|
||||
<span
|
||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||
>hub</span
|
||||
>
|
||||
<h3 class="font-bold mb-2 dark:text-white">
|
||||
Integración APIs
|
||||
</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
||||
Conexión fluida entre servicios SaaS.
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-6 glass rounded-2xl">
|
||||
<span
|
||||
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||
>terminal</span
|
||||
>
|
||||
<h3 class="font-bold mb-2 dark:text-white">Web Moderna</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
||||
Desarrollo Frontend con Next.js y React.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1 w-20 bg-primary mx-auto mb-10 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Selected Works Section -->
|
||||
<section class="py-24" id="projects">
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<div
|
||||
class="flex justify-between items-end mb-16 flex-col md:flex-row gap-4"
|
||||
>
|
||||
<div>
|
||||
<h2
|
||||
class="text-5xl font-serif italic mb-4 text-slate-900 dark:text-white"
|
||||
>
|
||||
Selected Works
|
||||
</h2>
|
||||
<p class="text-slate-500 dark:text-slate-400">
|
||||
Proyectos destacados en automatización inteligente.
|
||||
|
||||
<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="hidden md:block">
|
||||
<span
|
||||
class="material-symbols-outlined text-slate-300 dark:text-slate-700 text-6xl"
|
||||
>arrow_right_alt</span
|
||||
>
|
||||
<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="grid md:grid-cols-3 gap-8">
|
||||
<!-- Project 1: AI Knowledge Pipeline -->
|
||||
<div
|
||||
class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
|
||||
>
|
||||
<div class="aspect-video relative overflow-hidden">
|
||||
<img
|
||||
class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
|
||||
alt="Visualization of an AI neural network and data pipeline"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
></div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3
|
||||
class="text-xl font-bold mb-2 text-slate-900 dark:text-white"
|
||||
>
|
||||
AI Knowledge Pipeline
|
||||
</h3>
|
||||
<p
|
||||
class="text-slate-600 dark:text-slate-400 text-sm mb-6 leading-relaxed"
|
||||
>
|
||||
Sistema automatizado capaz de recibir audio, PDFs, vídeos o
|
||||
texto. Transcribe el contenido, lo resume mediante IA y lo
|
||||
almacena estructuradamente para su reutilización.
|
||||
</p>
|
||||
<div class="flex gap-2 flex-wrap mb-4">
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>n8n</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>Supabase</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>APIs IA</span
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="w-full bg-primary/10 text-primary hover:bg-primary hover:text-white px-4 py-2 rounded-lg font-bold text-sm transition-colors"
|
||||
onclick="openModal('project-1')"
|
||||
>
|
||||
Ver detalles
|
||||
</button>
|
||||
|
||||
<div 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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Project 2: ChefGPT -->
|
||||
<div
|
||||
class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
|
||||
>
|
||||
<div class="aspect-video relative overflow-hidden">
|
||||
<img
|
||||
class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
|
||||
data-alt="High-end modern kitchen with minimalist design"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfqsuP4x2xr1tNEyjnxJ4D517oj2e5uvU9_41GuMiygljVgzuSLFs-teeZfNDCD7jP8ShaU_Vgc_L0qzjAtd5I-8-oVtoxi8ih81LLt3l5IM6-RvPCVAuoIx9jK7q9SvAcvet8d5Fg9YQCndNdiKbWHXgyEkD9ARj0x7EAdyzsGThzWbcVHof2YHZjw3aXpVV7sq0YrQqsQ07WON23OSALCIHo6W80FBSEUydUs6yvDyEoT-XJlLHO_xKX4xS8J4x38c1nhEDIuiw"
|
||||
alt="High-end modern kitchen with minimalist design"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
></div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3
|
||||
class="text-xl font-bold mb-2 text-slate-900 dark:text-white"
|
||||
>
|
||||
ChefGPT
|
||||
</h3>
|
||||
<p
|
||||
class="text-slate-600 dark:text-slate-400 text-sm mb-6 leading-relaxed"
|
||||
>
|
||||
Agente conversacional que sugiere recetas en función de los
|
||||
ingredientes disponibles. Integra Telegram, Google Sheets y
|
||||
n8n para automatizar consultas de inventario.
|
||||
</p>
|
||||
<div class="flex gap-2 flex-wrap mb-4">
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>Telegram</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>Google Sheets</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>n8n</span
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="w-full bg-primary/10 text-primary hover:bg-primary hover:text-white px-4 py-2 rounded-lg font-bold text-sm transition-colors"
|
||||
onclick="openModal('project-2')"
|
||||
>
|
||||
Ver detalles
|
||||
</button>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Project 3: Content Processing Automation -->
|
||||
<!-- <div
|
||||
class="group relative flex flex-col glass rounded-3xl overflow-hidden hover:translate-y-[-8px] transition-all duration-500"
|
||||
>
|
||||
<div class="aspect-video relative overflow-hidden">
|
||||
<img
|
||||
class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
|
||||
data-alt="Dashboard showing content performance metrics"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
></div>
|
||||
<!-- 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>
|
||||
<div class="p-8">
|
||||
<h3
|
||||
class="text-xl font-bold mb-2 text-slate-900 dark:text-white"
|
||||
>
|
||||
Content Processing Automation
|
||||
</h3>
|
||||
<p
|
||||
class="text-slate-600 dark:text-slate-400 text-sm mb-6 leading-relaxed"
|
||||
>
|
||||
Pipeline automatizado para procesar contenido multimedia
|
||||
(audio, PDFs, vídeos, texto) que genera transcripciones,
|
||||
resúmenes y conocimiento estructurado.
|
||||
</p>
|
||||
<div class="flex gap-2 flex-wrap mb-4">
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>Workflow</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>APIs</span
|
||||
>
|
||||
<span
|
||||
class="px-3 py-1 bg-primary/10 rounded-full text-[10px] font-bold text-primary uppercase"
|
||||
>LLMs</span
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="w-full bg-primary/10 text-primary hover:bg-primary hover:text-white px-4 py-2 rounded-lg font-bold text-sm transition-colors"
|
||||
onclick="openModal('project-3')"
|
||||
>
|
||||
Ver detalles
|
||||
</button>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<!-- Tech Stack Section -->
|
||||
<section class="py-24 relative" id="stack">
|
||||
<div
|
||||
class="absolute inset-0 bg-primary/[0.03] dark:bg-primary/[0.02] skew-y-3 -z-10"
|
||||
></div>
|
||||
<div class="mx-auto max-w-4xl px-6 text-center">
|
||||
<h2
|
||||
class="text-4xl font-serif italic mb-16 text-slate-900 dark:text-white"
|
||||
>
|
||||
Tech Curated Stack
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl">hub</span>
|
||||
<!-- 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>
|
||||
<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>
|
||||
<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
|
||||
>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<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
|
||||
>
|
||||
|
||||
<!-- 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>
|
||||
<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
|
||||
>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
</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">2 de Junio, 2026</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>
|
||||
<span class="font-medium text-slate-700 dark:text-slate-300"
|
||||
>Supabase</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl">api</span>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700 dark:text-slate-300"
|
||||
>APIs</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl"
|
||||
>palette</span
|
||||
>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700 dark:text-slate-300"
|
||||
>Tailwind CSS</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 group">
|
||||
<div
|
||||
class="size-16 glass rounded-2xl flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all shadow-inner text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<span class="material-symbols-outlined text-3xl">chat</span>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700 dark:text-slate-300"
|
||||
>TypeScript</span
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user