feat: add Green Software Practitioner badge and update self-hosted fonts info
This commit is contained in:
+30
-18
@@ -203,32 +203,44 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Compromiso 2: Tipografías de Google Fonts -->
|
<!-- Compromiso 2: Tipografías e Iconos Autoalojados (Self-Hosted) -->
|
||||||
<div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
|
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
|
||||||
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
<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>
|
<span class="material-symbols-outlined text-emerald-500">verified</span>
|
||||||
Google Fonts externas vs. Fuentes del Sistema
|
Tipografías e Iconos 100% Autoalojados (Zero Third-Party Requests)
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
<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.
|
<strong>La optimización:</strong> Hemos migrado tanto las fuentes (<em>Space Grotesk</em> e <em>Instrument Serif</em>) como la iconografía (<em>Material Symbols Outlined</em>) a nuestra propia infraestructura (`/fonts`).
|
||||||
</p>
|
</p>
|
||||||
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
<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.
|
<strong>El impacto:</strong> Eliminamos por completo el rastreo y las llamadas DNS externas a Google Fonts, garantizando soberanía de datos, estricto cumplimiento del RGPD y menor latencia en el renderizado inicial.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Compromiso 3: Material Symbols (Iconos) -->
|
<!-- Certificación Green Software Foundation -->
|
||||||
<div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
|
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
||||||
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
<div>
|
||||||
<span class="material-symbols-outlined text-amber-500">warning</span>
|
<div class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">
|
||||||
Librería de Iconos en la Nube
|
<span class="material-symbols-outlined text-sm">workspace_premium</span>
|
||||||
</h3>
|
Acreditación Oficial Green Software Foundation
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
</div>
|
||||||
<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.
|
<h3 class="font-bold text-lg dark:text-white mb-1">
|
||||||
</p>
|
Green Software Practitioner
|
||||||
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
</h3>
|
||||||
<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 class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
</p>
|
Credential ID: <code>b80fdaac-96a2-48e1-9170-7a84c0297295</code> — Certificación en patrones de diseño sostenible y reducción de emisiones de software.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="https://badges.greensoftware.foundation/awards/b80fdaac-96a2-48e1-9170-7a84c0297295"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded-xl text-xs font-bold hover:bg-emerald-700 transition-colors shrink-0 shadow-md shadow-emerald-600/20"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined text-sm">verified</span>
|
||||||
|
Verificar Credencial
|
||||||
|
<span class="material-symbols-outlined text-xs">open_in_new</span>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
+485
-148
@@ -135,12 +135,18 @@
|
|||||||
<h1
|
<h1
|
||||||
class="text-4xl md:text-6xl font-serif italic leading-[1.2] text-slate-900 dark:text-white mb-6 max-w-4xl font-light"
|
class="text-4xl md:text-6xl font-serif italic leading-[1.2] text-slate-900 dark:text-white mb-6 max-w-4xl font-light"
|
||||||
>
|
>
|
||||||
Cuando necesites utilizar la tecnología para generar impacto social de forma responsable, habla <span class="text-primary not-italic font-display font-black tracking-tighter">conmigo</span>.
|
Cuando necesites utilizar la tecnología para generar impacto social
|
||||||
|
de forma responsable, habla
|
||||||
|
<span
|
||||||
|
class="text-primary not-italic font-display font-black tracking-tighter"
|
||||||
|
>conmigo</span
|
||||||
|
>.
|
||||||
</h1>
|
</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"
|
||||||
>
|
>
|
||||||
Desarrolladora front-end especializada en tecnología ligera, accesible y soberana. Con base en Ibiza.
|
Desarrolladora front-end especializada en tecnología ligera,
|
||||||
|
accesible y soberana. Con base en Ibiza.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-wrap justify-center gap-4">
|
<div class="flex flex-wrap justify-center gap-4">
|
||||||
<a
|
<a
|
||||||
@@ -188,92 +194,188 @@
|
|||||||
<div class="grid md:grid-cols-2 gap-12 mb-16">
|
<div class="grid md:grid-cols-2 gap-12 mb-16">
|
||||||
<div class="p-8 glass rounded-3xl border border-white/20">
|
<div class="p-8 glass rounded-3xl border border-white/20">
|
||||||
<div class="flex items-center gap-3 mb-4">
|
<div class="flex items-center gap-3 mb-4">
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">target</span>
|
<span class="material-symbols-outlined text-primary text-3xl"
|
||||||
<h3 class="text-2xl font-serif italic font-bold dark:text-white">Propósito</h3>
|
>target</span
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
class="text-2xl font-serif italic font-bold dark:text-white"
|
||||||
|
>
|
||||||
|
Propósito
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
<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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-8 glass rounded-3xl border border-white/20">
|
<div class="p-8 glass rounded-3xl border border-white/20">
|
||||||
<div class="flex items-center gap-3 mb-4">
|
<div class="flex items-center gap-3 mb-4">
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">explore</span>
|
<span class="material-symbols-outlined text-primary text-3xl"
|
||||||
<h3 class="text-2xl font-serif italic font-bold dark:text-white">Misión</h3>
|
>explore</span
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
class="text-2xl font-serif italic font-bold dark:text-white"
|
||||||
|
>
|
||||||
|
Misión
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
<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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center mb-10">
|
<div class="text-center mb-10">
|
||||||
<h3 class="text-2xl font-serif italic text-slate-800 dark:text-slate-200">Principios rectores</h3>
|
<h3
|
||||||
|
class="text-2xl font-serif italic text-slate-800 dark:text-slate-200"
|
||||||
|
>
|
||||||
|
Principios rectores
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-6">
|
<div class="grid md:grid-cols-3 gap-6">
|
||||||
<!-- Principio 1: Sostenibilidad -->
|
<!-- 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
|
||||||
<div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full justify-between"
|
||||||
<span class="material-symbols-outlined">eco</span>
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined">eco</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
||||||
|
Sostenibilidad (Green Software)
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||||
|
>
|
||||||
|
Optimizar el consumo de recursos, minimizando la transferencia
|
||||||
|
de datos y la huella de carbono de las aplicaciones web que
|
||||||
|
desarrollo.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="font-bold text-lg mb-2 dark:text-white">Sostenibilidad (Green Software)</h4>
|
<a
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
href="https://badges.greensoftware.foundation/awards/b80fdaac-96a2-48e1-9170-7a84c0297295"
|
||||||
Optimizar el consumo de recursos, minimizando la transferencia de datos y la huella de carbono de las aplicaciones web que desarrollo.
|
target="_blank"
|
||||||
</p>
|
rel="noopener noreferrer"
|
||||||
|
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined text-base">verified</span>
|
||||||
|
<span>Green Software Practitioner</span>
|
||||||
|
<span class="material-symbols-outlined text-xs ml-auto">open_in_new</span>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Principio 2: Software Libre -->
|
<!-- 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
|
||||||
<div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
|
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>
|
<span class="material-symbols-outlined">folder_open</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="font-bold text-lg mb-2 dark:text-white">Software Libre</h4>
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
Software Libre
|
||||||
Apoyar y contribuir al código abierto como bien público digital que fomenta la soberanía tecnológica y el aprendizaje compartido.
|
</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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Principio 3: Bien Común -->
|
<!-- 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
|
||||||
<div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
|
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>
|
<span class="material-symbols-outlined">groups</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="font-bold text-lg mb-2 dark:text-white">Bien Común</h4>
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
Bien Común
|
||||||
Priorizar proyectos y herramientas que generen un impacto social positivo, medible y orientado a resolver necesidades reales de la sociedad.
|
</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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Principio 4: Accesibilidad -->
|
<!-- 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
|
||||||
<div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
||||||
<span class="material-symbols-outlined">accessibility_new</span>
|
>
|
||||||
|
<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>
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
Accesibilidad (a11y)
|
||||||
Diseñar interfaces web inclusivas para que todo el mundo pueda acceder a la información sin barreras físicas, cognitivas o tecnológicas.
|
</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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Principio 5: Privacidad -->
|
<!-- 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
|
||||||
<div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
|
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>
|
<span class="material-symbols-outlined">shield</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="font-bold text-lg mb-2 dark:text-white">Privacidad</h4>
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
Privacidad
|
||||||
Respetar la soberanía de los datos personales, usando analíticas éticas y cookieless, protegiendo a los usuarios del rastreo corporativo.
|
</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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Principio 6: IA Responsable -->
|
<!-- 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
|
||||||
<div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
|
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>
|
<span class="material-symbols-outlined">psychology</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="font-bold text-lg mb-2 dark:text-white">IA Responsable</h4>
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
IA Responsable
|
||||||
Utilizar modelos de IA de forma ética y transparente, priorizando la ejecución local y velando porque sirvan de apoyo a la agencia humana.
|
</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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -290,12 +392,15 @@
|
|||||||
Mi laboratorio
|
Mi laboratorio
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-slate-500 dark:text-slate-400">
|
<p class="text-slate-500 dark:text-slate-400">
|
||||||
Un espacio de experimentación técnica, herramientas reales e infraestructura digital soberana.
|
Un espacio de experimentación técnica, herramientas reales e
|
||||||
|
infraestructura digital soberana.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tab Buttons Container -->
|
<!-- Tab Buttons Container -->
|
||||||
<div class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8">
|
<div
|
||||||
|
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
|
||||||
|
>
|
||||||
<button
|
<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"
|
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"
|
data-tab="infraestructura"
|
||||||
@@ -324,55 +429,104 @@
|
|||||||
|
|
||||||
<!-- Tab Contents -->
|
<!-- Tab Contents -->
|
||||||
<div id="tab-contents">
|
<div id="tab-contents">
|
||||||
|
|
||||||
<!-- Tab 1: Infraestructura -->
|
<!-- Tab 1: Infraestructura -->
|
||||||
<div id="tab-infraestructura" class="tab-pane block">
|
<div id="tab-infraestructura" class="tab-pane block">
|
||||||
<div class="grid md:grid-cols-2 gap-8">
|
<div class="grid md:grid-cols-2 gap-8">
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<h3 class="text-2xl font-serif italic dark:text-white">Qué uso y por qué</h3>
|
<h3 class="text-2xl font-serif italic dark:text-white">
|
||||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
Qué uso y por qué
|
||||||
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.
|
</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>
|
</p>
|
||||||
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
|
<div
|
||||||
<div class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2">
|
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 class="material-symbols-outlined">bolt</span>
|
||||||
<span>Compromiso Verde</span>
|
<span>Compromiso Verde</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
<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.
|
Mi infraestructura está alojada en el centro de datos de
|
||||||
|
Hetzner en Helsinki, alimentado por energía 100% libre
|
||||||
|
de carbono procedente de fuentes eólicas e hidráulicas.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-2 gap-4">
|
<div class="grid grid-cols-2 gap-4">
|
||||||
<div class="p-6 glass rounded-2xl border border-white/10">
|
<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>
|
<span
|
||||||
<h4 class="font-bold dark:text-white">Hetzner Helsinki</h4>
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||||
<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>
|
>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>
|
||||||
<div class="p-6 glass rounded-2xl border border-white/10">
|
<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>
|
<span
|
||||||
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||||
|
>deployed_code</span
|
||||||
|
>
|
||||||
<h4 class="font-bold dark:text-white">Coolify</h4>
|
<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>
|
<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>
|
||||||
<div class="p-6 glass rounded-2xl border border-white/10">
|
<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>
|
<span
|
||||||
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||||
|
>git_gesture</span
|
||||||
|
>
|
||||||
<h4 class="font-bold dark:text-white">Forgejo</h4>
|
<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>
|
<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>
|
||||||
<div class="p-6 glass rounded-2xl border border-white/10">
|
<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>
|
<span
|
||||||
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||||
|
>hub</span
|
||||||
|
>
|
||||||
<h4 class="font-bold dark:text-white">n8n</h4>
|
<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>
|
<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>
|
||||||
<div class="p-6 glass rounded-2xl border border-white/10">
|
<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>
|
<span
|
||||||
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
||||||
|
>monitoring</span
|
||||||
|
>
|
||||||
<h4 class="font-bold dark:text-white">Umami</h4>
|
<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>
|
<p
|
||||||
</div>
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
||||||
<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>
|
Analítica web ética, respetuosa con la privacidad y
|
||||||
<h4 class="font-bold dark:text-white">Cap</h4>
|
cookieless.
|
||||||
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -381,34 +535,76 @@
|
|||||||
<!-- Tab 2: Experimentos -->
|
<!-- Tab 2: Experimentos -->
|
||||||
<div id="tab-experimentos" class="tab-pane hidden">
|
<div id="tab-experimentos" class="tab-pane hidden">
|
||||||
<div class="grid md:grid-cols-3 gap-6">
|
<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="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
|
||||||
|
>
|
||||||
<div class="flex items-center justify-between mb-4">
|
<div class="flex items-center justify-between mb-4">
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">nest_eco_leaf</span>
|
<span
|
||||||
<span class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full">Activo</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>
|
</div>
|
||||||
<h4 class="font-bold dark:text-white mb-2">Medición de Green Software</h4>
|
<h4 class="font-bold dark:text-white mb-2">
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
Medición de Green Software
|
||||||
Comparación empírica del consumo de CPU y red entre arquitecturas SSR (Astro/Next.js) y páginas HTML estáticas optimizadas.
|
</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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all">
|
<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">
|
<div class="flex items-center justify-between mb-4">
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">memory</span>
|
<span
|
||||||
<span class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full">Activo</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>
|
</div>
|
||||||
<h4 class="font-bold dark:text-white mb-2">IA Local en Raspberry Pi</h4>
|
<h4 class="font-bold dark:text-white mb-2">
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
IA Local en Raspberry Pi
|
||||||
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.
|
</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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all">
|
<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">
|
<div class="flex items-center justify-between mb-4">
|
||||||
<span class="material-symbols-outlined text-primary text-3xl">visibility</span>
|
<span
|
||||||
<span class="px-2.5 py-0.5 bg-amber-500/10 text-amber-500 text-xs font-bold rounded-full">Pendiente</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>
|
</div>
|
||||||
<h4 class="font-bold dark:text-white mb-2">Estrés de Lectores de Pantalla</h4>
|
<h4 class="font-bold dark:text-white mb-2">
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
Estrés de Lectores de Pantalla
|
||||||
Auditoría manual de interfaces complejas con lectores NVDA y VoiceOver para validar flujos interactivos dinámicos y estados de ARIA en vivo.
|
</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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -418,111 +614,217 @@
|
|||||||
<div id="tab-proyectos" class="tab-pane hidden">
|
<div id="tab-proyectos" class="tab-pane hidden">
|
||||||
<!-- Herramientas Reales -->
|
<!-- Herramientas Reales -->
|
||||||
<div class="mb-12">
|
<div class="mb-12">
|
||||||
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">Herramientas reales, no demos</h3>
|
<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">
|
<div class="grid md:grid-cols-2 gap-8">
|
||||||
<!-- Navidrome -->
|
<!-- Navidrome -->
|
||||||
<div class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between">
|
<div
|
||||||
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center gap-3 mb-3">
|
<div class="flex items-center gap-3 mb-3">
|
||||||
<span class="material-symbols-outlined text-primary text-2xl">music_note</span>
|
<span
|
||||||
<h4 class="font-bold text-lg dark:text-white">Servidor Navidrome</h4>
|
class="material-symbols-outlined text-primary text-2xl"
|
||||||
|
>music_note</span
|
||||||
|
>
|
||||||
|
<h4 class="font-bold text-lg dark:text-white">
|
||||||
|
Servidor Navidrome
|
||||||
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
|
<p
|
||||||
Instancia personal autohospedada de música en Hetzner para recuperar la soberanía sobre mis archivos de audio y evitar algoritmos corporativos de streaming.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between mt-4">
|
<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
|
||||||
<span class="text-xs text-slate-400">Docker • Hetzner</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Flujo n8n + Ollama -->
|
<!-- Flujo n8n + Ollama -->
|
||||||
<div class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between">
|
<div
|
||||||
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center gap-3 mb-3">
|
<div class="flex items-center gap-3 mb-3">
|
||||||
<span class="material-symbols-outlined text-primary text-2xl">route</span>
|
<span
|
||||||
<h4 class="font-bold text-lg dark:text-white">Flujo n8n + Ollama</h4>
|
class="material-symbols-outlined text-primary text-2xl"
|
||||||
|
>route</span
|
||||||
|
>
|
||||||
|
<h4 class="font-bold text-lg dark:text-white">
|
||||||
|
Flujo n8n + Ollama
|
||||||
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
|
<p
|
||||||
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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between mt-4">
|
<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
|
||||||
<span class="text-xs text-slate-400">n8n • Ollama • Whisper</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Contribución Open Source -->
|
<!-- Contribución Open Source -->
|
||||||
<div class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between">
|
<div
|
||||||
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center gap-3 mb-3">
|
<div class="flex items-center gap-3 mb-3">
|
||||||
<span class="material-symbols-outlined text-primary text-2xl">volunteer_activism</span>
|
<span
|
||||||
<h4 class="font-bold text-lg dark:text-white">Contribución Open Source</h4>
|
class="material-symbols-outlined text-primary text-2xl"
|
||||||
|
>volunteer_activism</span
|
||||||
|
>
|
||||||
|
<h4 class="font-bold text-lg dark:text-white">
|
||||||
|
Contribución Open Source
|
||||||
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
|
<p
|
||||||
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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between mt-4">
|
<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
|
||||||
<span class="text-xs text-slate-400">Forgejo • GitHub</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Visualización Datos Baleares -->
|
<!-- Visualización Datos Baleares -->
|
||||||
<div class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between">
|
<div
|
||||||
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center gap-3 mb-3">
|
<div class="flex items-center gap-3 mb-3">
|
||||||
<span class="material-symbols-outlined text-primary text-2xl">query_stats</span>
|
<span
|
||||||
<h4 class="font-bold text-lg dark:text-white">Visualización Datos Baleares</h4>
|
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>
|
</div>
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
|
<p
|
||||||
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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between mt-4">
|
<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
|
||||||
<span class="text-xs text-slate-400">HTML5 • JS • D3.js</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Trabajo Anterior (Proyectos de IA previos) -->
|
<!-- Trabajo Anterior (Proyectos de IA previos) -->
|
||||||
<div class="border-t border-slate-200 dark:border-slate-800 pt-8">
|
<div
|
||||||
|
class="border-t border-slate-200 dark:border-slate-800 pt-8"
|
||||||
|
>
|
||||||
<details class="group cursor-pointer">
|
<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">
|
<summary
|
||||||
<span class="flex items-center gap-2 hover:text-primary transition-colors">
|
class="flex justify-between items-center text-lg font-serif italic text-slate-700 dark:text-slate-300 select-none list-none"
|
||||||
<span class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400">chevron_right</span>
|
>
|
||||||
|
<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)
|
Trabajo Anterior (Proyectos e IA comercial)
|
||||||
</span>
|
</span>
|
||||||
</summary>
|
</summary>
|
||||||
<div class="grid md:grid-cols-2 gap-8 mt-6">
|
<div class="grid md:grid-cols-2 gap-8 mt-6">
|
||||||
<!-- Project 1: AI Knowledge Pipeline -->
|
<!-- Project 1: AI Knowledge Pipeline -->
|
||||||
<div class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between">
|
<div
|
||||||
|
class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-bold text-slate-900 dark:text-white mb-2">AI Knowledge Pipeline</h4>
|
<h4
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
||||||
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.
|
>
|
||||||
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-4 items-center">
|
<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>
|
<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 class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between">
|
<div
|
||||||
|
class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-bold text-slate-900 dark:text-white mb-2">ChefGPT</h4>
|
<h4
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
||||||
Bot conversacional de Telegram conectado con Google Sheets que sugiere recetas basándose en ingredientes disponibles en tiempo real.
|
>
|
||||||
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-4 items-center">
|
<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>
|
<button
|
||||||
|
class="text-xs text-primary hover:underline font-bold"
|
||||||
|
onclick="openModal('project-2')"
|
||||||
|
>
|
||||||
|
Ver detalles y stack
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -533,37 +835,66 @@
|
|||||||
<!-- Tab 4: Writing -->
|
<!-- Tab 4: Writing -->
|
||||||
<div id="tab-writing" class="tab-pane hidden">
|
<div id="tab-writing" class="tab-pane hidden">
|
||||||
<div class="max-w-2xl mx-auto space-y-8">
|
<div class="max-w-2xl mx-auto space-y-8">
|
||||||
<p class="text-slate-600 dark:text-slate-400 italic text-center text-sm">
|
<p
|
||||||
Reflexiones, aprendizajes técnicos y notas sobre soberanía digital sin pretensiones de sentar cátedra.
|
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>
|
</p>
|
||||||
|
|
||||||
<article class="p-6 glass rounded-2xl border border-white/10">
|
<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>
|
<span
|
||||||
<h4 class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer">
|
class="text-xs text-slate-400 dark:text-slate-500 font-mono"
|
||||||
La imperfección como aliada: por qué no uso purismos al medir el carbono web
|
>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>
|
</h4>
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
<p
|
||||||
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-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>
|
</p>
|
||||||
<a href="huella.html" class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1">
|
<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
|
Leer artículo completo en la sección Huella
|
||||||
<span class="material-symbols-outlined text-xs">arrow_right_alt</span>
|
<span class="material-symbols-outlined text-xs"
|
||||||
|
>arrow_right_alt</span
|
||||||
|
>
|
||||||
</a>
|
</a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="p-6 glass rounded-2xl border border-white/10">
|
<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
|
||||||
<h4 class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer">
|
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
|
Migrando mi código: De GitHub a Forgejo en mi propio VPS
|
||||||
</h4>
|
</h4>
|
||||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
<p
|
||||||
Primeros pasos configurando Forgejo mediante Docker. Detalle de consumo de memoria RAM (spoiler: consume menos de 100MB en repositorios medianos) y facilidad de uso...
|
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>
|
</p>
|
||||||
<span class="text-xs text-slate-400 mt-4 block">Próximamente</span>
|
<span class="text-xs text-slate-400 mt-4 block"
|
||||||
|
>Próximamente</span
|
||||||
|
>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -588,7 +919,9 @@
|
|||||||
<p
|
<p
|
||||||
class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10"
|
class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10"
|
||||||
>
|
>
|
||||||
Si buscas tecnología ligera, accesible y con los pies en la tierra — o simplemente quieres hablar de soberanía digital — escríbeme.
|
Si buscas tecnología ligera, accesible y con los pies en la
|
||||||
|
tierra — o simplemente quieres hablar de soberanía digital —
|
||||||
|
escríbeme.
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
|
class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
|
||||||
@@ -792,8 +1125,8 @@
|
|||||||
</h3>
|
</h3>
|
||||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
Agente conversacional inteligente en Telegram que actúa como
|
Agente conversacional inteligente en Telegram que actúa como
|
||||||
asistente culinario personal. Consulta tu inventario en Supabase,
|
asistente culinario personal. Consulta tu inventario en
|
||||||
accede a un RAG especializado con recetas para evitar
|
Supabase, accede a un RAG especializado con recetas para evitar
|
||||||
alucinaciones, y sugiere platos personalizados basados en lo que
|
alucinaciones, y sugiere platos personalizados basados en lo que
|
||||||
tienes disponible.
|
tienes disponible.
|
||||||
</p>
|
</p>
|
||||||
@@ -808,8 +1141,12 @@
|
|||||||
>
|
>
|
||||||
<li>Integración bidireccional con Supabase</li>
|
<li>Integración bidireccional con Supabase</li>
|
||||||
<li>Consulta automática de inventario en base de datos</li>
|
<li>Consulta automática de inventario en base de datos</li>
|
||||||
<li>RAG (Retrieval-Augmented Generation) con recetas verificadas</li>
|
<li>
|
||||||
<li>Prevención de alucinaciones mediante fine-tuning de prompts</li>
|
RAG (Retrieval-Augmented Generation) con recetas verificadas
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Prevención de alucinaciones mediante fine-tuning de prompts
|
||||||
|
</li>
|
||||||
<li>Generación de recetas personalizadas sin alucinar</li>
|
<li>Generación de recetas personalizadas sin alucinar</li>
|
||||||
<li>Actualización automática del inventario</li>
|
<li>Actualización automática del inventario</li>
|
||||||
<li>Conversación natural y contextual</li>
|
<li>Conversación natural y contextual</li>
|
||||||
|
|||||||
Reference in New Issue
Block a user