feat: add Green Software Practitioner badge and update self-hosted fonts info
This commit is contained in:
+488
-151
@@ -135,12 +135,18 @@
|
||||
<h1
|
||||
class="text-4xl md:text-6xl font-serif italic leading-[1.2] text-slate-900 dark:text-white mb-6 max-w-4xl font-light"
|
||||
>
|
||||
Cuando necesites utilizar la tecnología para generar impacto social de forma responsable, habla <span class="text-primary not-italic font-display font-black tracking-tighter">conmigo</span>.
|
||||
Cuando necesites utilizar la tecnología para generar impacto social
|
||||
de forma responsable, habla
|
||||
<span
|
||||
class="text-primary not-italic font-display font-black tracking-tighter"
|
||||
>conmigo</span
|
||||
>.
|
||||
</h1>
|
||||
<p
|
||||
class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mb-12 leading-relaxed"
|
||||
>
|
||||
Desarrolladora front-end especializada en tecnología ligera, accesible y soberana. Con base en Ibiza.
|
||||
Desarrolladora front-end especializada en tecnología ligera,
|
||||
accesible y soberana. Con base en Ibiza.
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
@@ -184,96 +190,192 @@
|
||||
</h2>
|
||||
<div class="h-1 w-20 bg-primary mx-auto mb-10 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-12 mb-16">
|
||||
<div class="p-8 glass rounded-3xl border border-white/20">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">target</span>
|
||||
<h3 class="text-2xl font-serif italic font-bold dark:text-white">Propósito</h3>
|
||||
<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.
|
||||
Democratizar y humanizar la tecnología, poniéndola al servicio
|
||||
de las personas y del planeta, y no al revés. Busco crear
|
||||
herramientas que empoderen a las comunidades en lugar de
|
||||
concentrar el poder.
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-8 glass rounded-3xl border border-white/20">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">explore</span>
|
||||
<h3 class="text-2xl font-serif italic font-bold dark:text-white">Misión</h3>
|
||||
<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.
|
||||
Desarrollar soluciones digitales eficientes, accesibles y
|
||||
respetuosas con los derechos digitales, demostrando que otra
|
||||
tecnología es posible desde el compromiso local y el impacto
|
||||
global.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-10">
|
||||
<h3 class="text-2xl font-serif italic text-slate-800 dark:text-slate-200">Principios rectores</h3>
|
||||
<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
|
||||
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full justify-between"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
|
||||
>
|
||||
<span class="material-symbols-outlined">eco</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
||||
Sostenibilidad (Green Software)
|
||||
</h4>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Optimizar el consumo de recursos, minimizando la transferencia
|
||||
de datos y la huella de carbono de las aplicaciones web que
|
||||
desarrollo.
|
||||
</p>
|
||||
</div>
|
||||
<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>
|
||||
<a
|
||||
href="https://badges.greensoftware.foundation/awards/b80fdaac-96a2-48e1-9170-7a84c0297295"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
|
||||
>
|
||||
<span class="material-symbols-outlined text-base">verified</span>
|
||||
<span>Green Software Practitioner</span>
|
||||
<span class="material-symbols-outlined text-xs ml-auto">open_in_new</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Principio 2: Software Libre -->
|
||||
<div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full">
|
||||
<div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
|
||||
<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.
|
||||
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
||||
Software Libre
|
||||
</h4>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
||||
>
|
||||
Apoyar y contribuir al código abierto como bien público
|
||||
digital que fomenta la soberanía tecnológica y el aprendizaje
|
||||
compartido.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Principio 3: Bien Común -->
|
||||
<div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full">
|
||||
<div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
|
||||
<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.
|
||||
<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
|
||||
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.
|
||||
<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">
|
||||
<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.
|
||||
<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">
|
||||
<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.
|
||||
<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>
|
||||
@@ -290,12 +392,15 @@
|
||||
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.
|
||||
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">
|
||||
<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"
|
||||
@@ -324,55 +429,104 @@
|
||||
|
||||
<!-- 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.
|
||||
<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">
|
||||
<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.
|
||||
Mi infraestructura está alojada en el centro de datos de
|
||||
Hetzner en Helsinki, alimentado por energía 100% libre
|
||||
de carbono procedente de fuentes eólicas e hidráulicas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-6 glass rounded-2xl border border-white/10">
|
||||
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">dns</span>
|
||||
<h4 class="font-bold dark:text-white">Hetzner Helsinki</h4>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Servidores dedicados y VPS alimentados por energía verde en Finlandia.</p>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
@@ -381,34 +535,76 @@
|
||||
<!-- 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="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>
|
||||
<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.
|
||||
<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="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>
|
||||
<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.
|
||||
<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="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>
|
||||
<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.
|
||||
<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>
|
||||
@@ -418,111 +614,217 @@
|
||||
<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>
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
<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">
|
||||
<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>
|
||||
<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
|
||||
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.
|
||||
<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>
|
||||
<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
|
||||
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.
|
||||
<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>
|
||||
<button
|
||||
class="text-xs text-primary hover:underline font-bold"
|
||||
onclick="openModal('project-2')"
|
||||
>
|
||||
Ver detalles y stack
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -533,37 +835,66 @@
|
||||
<!-- 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
|
||||
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
|
||||
<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
|
||||
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">
|
||||
<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>
|
||||
<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">
|
||||
<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
|
||||
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>
|
||||
<span class="text-xs text-slate-400 mt-4 block"
|
||||
>Próximamente</span
|
||||
>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -588,7 +919,9 @@
|
||||
<p
|
||||
class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10"
|
||||
>
|
||||
Si buscas tecnología ligera, accesible y con los pies en la tierra — o simplemente quieres hablar de soberanía digital — escríbeme.
|
||||
Si buscas tecnología ligera, accesible y con los pies en la
|
||||
tierra — o simplemente quieres hablar de soberanía digital —
|
||||
escríbeme.
|
||||
</p>
|
||||
<div
|
||||
class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
|
||||
@@ -792,8 +1125,8 @@
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Agente conversacional inteligente en Telegram que actúa como
|
||||
asistente culinario personal. Consulta tu inventario en Supabase,
|
||||
accede a un RAG especializado con recetas para evitar
|
||||
asistente culinario personal. Consulta tu inventario en
|
||||
Supabase, accede a un RAG especializado con recetas para evitar
|
||||
alucinaciones, y sugiere platos personalizados basados en lo que
|
||||
tienes disponible.
|
||||
</p>
|
||||
@@ -808,8 +1141,12 @@
|
||||
>
|
||||
<li>Integración bidireccional con Supabase</li>
|
||||
<li>Consulta automática de inventario en base de datos</li>
|
||||
<li>RAG (Retrieval-Augmented Generation) con recetas verificadas</li>
|
||||
<li>Prevención de alucinaciones mediante fine-tuning de prompts</li>
|
||||
<li>
|
||||
RAG (Retrieval-Augmented Generation) con recetas verificadas
|
||||
</li>
|
||||
<li>
|
||||
Prevención de alucinaciones mediante fine-tuning de prompts
|
||||
</li>
|
||||
<li>Generación de recetas personalizadas sin alucinar</li>
|
||||
<li>Actualización automática del inventario</li>
|
||||
<li>Conversación natural y contextual</li>
|
||||
|
||||
Reference in New Issue
Block a user