itziarZG/MyWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(i18n): complete translations for Catalan and English pages (manifesto, lab, projects & modals)

Browse Source
This commit is contained in:
itziarZG
2026-07-20 19:50:59 +02:00
parent e87f90006c
commit 4793bf76a9
2 changed files with 231 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index-ca.html
+124 -167
View File
@@ -176,16 +176,14 @@
class="absolute inset-0 bg-gradient-to-t from-background-light/80 dark:from-background-dark/80 to-transparent"
></div>
</div>
</main>
<!-- Manifiesto Section -->
</main> <!-- Manifest Section -->
<section class="py-24 bg-white/30 dark:bg-white/5" id="manifiesto">
<div class="mx-auto max-w-6xl px-6">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2
class="text-4xl md:text-5xl font-serif italic mb-6 text-slate-900 dark:text-white"
>
Manifiesto
Manifest per a una tecnologia humana i sobirana
</h2>
<div class="h-1 w-20 bg-primary mx-auto mb-10 rounded-full"></div>
</div>
@@ -199,14 +197,13 @@
<h3
class="text-2xl font-serif italic font-bold dark:text-white"
>
Propósito
Propòsit
</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.
Democratitzar i humanitzar la tecnologia, posant-la al servei
de les persones i del planeta, i no al revés. Busco crear
eines que empoderin les comunitats en lloc de concentrar el poder.
</p>
</div>
<div class="p-8 glass rounded-3xl border border-white/20">
@@ -217,14 +214,13 @@
<h3
class="text-2xl font-serif italic font-bold dark:text-white"
>
Misión
Missió
</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.
Desenvolupar solucions digitals eficients, accessibles i
respectuoses amb els drets digitals, demostrant que una altra
tecnologia és possible des del compromís local i l'impacte global.
</p>
</div>
</div>
@@ -233,12 +229,12 @@
<h3
class="text-2xl font-serif italic text-slate-800 dark:text-slate-200"
>
Principios rectores
Principis rectors
</h3>
</div>
<div class="grid md:grid-cols-3 gap-6">
<!-- Principio 1: Sostenibilidad -->
<!-- Principi 1: Sostenibilitat -->
<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"
>
@@ -249,14 +245,13 @@
<span class="material-symbols-outlined">eco</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Sostenibilidad (Green Software)
Sostenibilitat (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.
Optimitzar el consum de recursos, minimitzant la transferència
de dades i l'empremta de carboni de les aplicacions web que desenvolupo.
</p>
</div>
<a
@@ -271,7 +266,7 @@
</a>
</div>
<!-- Principio 2: Software Libre -->
<!-- Principi 2: Programari Lliure -->
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
>
@@ -281,18 +276,17 @@
<span class="material-symbols-outlined">folder_open</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Software Libre
Programari Lliure
</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.
Recolzar i contribuir al codi obert com a bé públic digital
que fomenta la sobirania tecnològica i l'aprenentatge compartit.
</p>
</div>
<!-- Principio 3: Bien Común -->
<!-- Principi 3: Bé Comú -->
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
>
@@ -302,18 +296,17 @@
<span class="material-symbols-outlined">groups</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Bien Común
Bé Comú
</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.
Prioritzar projectes i eines que generin un impacte social
positiu, mesurable i orientat a resoldre necessitats reals de la societat.
</p>
</div>
<!-- Principio 4: Accesibilidad -->
<!-- Principi 4: Accessibilitat -->
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
>
@@ -325,18 +318,17 @@
>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Accesibilidad (a11y)
Accessibilitat (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.
Dissenyar interfícies web inclusives perquè tothom pugui
accedir a la informació sense barreres físiques, cognitives o tecnològiques.
</p>
</div>
<!-- Principio 5: Privacidad -->
<!-- Principi 5: Privacitat -->
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
>
@@ -346,18 +338,17 @@
<span class="material-symbols-outlined">shield</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Privacidad
Privacitat
</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.
Respectar la sobirania de les dades personals, utilitzant
analítiques ètiques i cookieless, protegint els usuaris del rastreig corporatiu.
</p>
</div>
<!-- Principio 6: IA Responsable -->
<!-- Principi 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"
>
@@ -372,27 +363,25 @@
<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.
Utilitzar models d'IA de forma ètica i transparent,
prioritzant l'execució local i vetllant perquè serveixin de suport a l'agència humana.
</p>
</div>
</div>
</div>
</section>
<!-- Laboratorio Section -->
<!-- Laboratori Section -->
<section class="py-24" id="laboratorio">
<div class="mx-auto max-w-6xl px-6">
<div class="mb-12">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2
class="text-5xl font-serif italic mb-4 text-slate-900 dark:text-white"
>
Mi laboratorio
El meu laboratori
</h2>
<p class="text-slate-500 dark:text-slate-400">
Un espacio de experimentación técnica, herramientas reales e
infraestructura digital soberana.
Un espai d'experimentació tècnica, eines reals i infraestructura digital sobirana.
</p>
</div>
@@ -410,13 +399,13 @@
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="experimentos"
>
Experimentos
Experiments
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="proyectos"
>
Proyectos
Projectes
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
@@ -433,15 +422,12 @@
<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é
Què utilitzo i per 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.
La sobirania tecnològica comença als fonaments. He decidit gestionar la meva pròpia infraestructura per assegurar el control de les meves dades, la privacitat dels meus projectes i reduir la dependència dels gegants del núvol.
</p>
<div
class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl"
@@ -450,12 +436,10 @@
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>
<span>Compromís Verd</span>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">
Mi infraestructura está alojada en el centro de datos de
Hetzner en Helsinki, alimentado por energía 100% libre
de carbono procedente de fuentes eólicas e hidráulicas.
La meva infraestructura està allotjada al centre de dades de Hetzner a Hèlsinki, alimentat per energia 100% lliure de carboni procedent de fonts eòliques i hidràuliques.
</p>
</div>
</div>
@@ -466,13 +450,12 @@
>dns</span
>
<h4 class="font-bold dark:text-white">
Hetzner Helsinki
Hetzner Hèlsinki
</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.
Servidors dedicats i VPS alimentats per energia verda a Finlàndia.
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
@@ -484,8 +467,7 @@
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
>
Alternativa self-hosted y de código abierto a
Vercel/Heroku.
Alternativa self-hosted i de codi obert a Vercel/Heroku.
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
@@ -497,8 +479,7 @@
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
>
Servicio Git ligero autohospedado para control soberano
de código.
Servei Git lleuger autohospedat per al control sobirà de codi.
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
@@ -510,8 +491,7 @@
<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.
Automatització de fluxos de treball self-hosted lliure de lligams de SaaS.
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
@@ -523,15 +503,26 @@
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
>
Analítica web ética, respetuosa con la privacidad y
cookieless.
Analítica web ètica, respectuosa amb la privacitat i 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"
>
Eina de gravació de pantalla de codi lliure al nostre node.
</p>
</div>
</div>
</div>
</div>
<!-- Tab 2: Experimentos -->
<!-- Tab 2: Experiments -->
<div id="tab-experimentos" class="tab-pane hidden">
<div class="grid md:grid-cols-3 gap-6">
<div
@@ -544,18 +535,16 @@
>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
>Activo</span
>Actiu</span
>
</div>
<h4 class="font-bold dark:text-white mb-2">
Medición de Green Software
Mesurament 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.
Comparació empírica del consum de CPU i xarxa entre arquitectures SSR (Astro/Next.js) i pàgines HTML estàtiques optimitzades.
</p>
</div>
<div
@@ -568,7 +557,7 @@
>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
>Activo</span
>Actiu</span
>
</div>
<h4 class="font-bold dark:text-white mb-2">
@@ -577,9 +566,7 @@
<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.
Execució de models petits com Llama 3.2 1B i Phi-3 amb Ollama en local per a tasques de classificació i etiquetatge amb zero cost d'API i privacitat garantida.
</p>
</div>
<div
@@ -592,29 +579,27 @@
>
<span
class="px-2.5 py-0.5 bg-amber-500/10 text-amber-500 text-xs font-bold rounded-full"
>Pendiente</span
>Pendent</span
>
</div>
<h4 class="font-bold dark:text-white mb-2">
Estrés de Lectores de Pantalla
Estrès de Lectors 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.
Auditoria manual d'interfícies complexes amb lectors NVDA i VoiceOver per validar fluxos interactius dinàmics i estats d'ARIA en viu.
</p>
</div>
</div>
</div>
<!-- Tab 3: Proyectos -->
<!-- Tab 3: Projectes -->
<div id="tab-proyectos" class="tab-pane hidden">
<!-- Herramientas Reales -->
<!-- Eines Reals -->
<div class="mb-12">
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
Herramientas reales, no demos
Eines reals, no demos
</h3>
<div class="grid md:grid-cols-2 gap-8">
<!-- Navidrome -->
@@ -634,15 +619,13 @@
<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.
Instància personal autohospedada de música a Hetzner per recuperar la sobirania sobre els meus arxius d'àudio i evitar algorismes corporatius d'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
>Operatiu</span
>
<span class="text-xs text-slate-400"
>Docker • Hetzner</span
@@ -650,7 +633,7 @@
</div>
</div>
<!-- Flujo n8n + Ollama -->
<!-- Flux n8n + Ollama -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
>
@@ -661,21 +644,19 @@
>route</span
>
<h4 class="font-bold text-lg dark:text-white">
Flujo n8n + Ollama
Flux 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.
Pipeline autònom en local que intercepta notes de veu, les transcriu i les processa utilitzant Ollama amb models d'IA de codi obert sense enviar dades 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
>Operatiu</span
>
<span class="text-xs text-slate-400"
>n8n • Ollama • Whisper</span
@@ -683,7 +664,7 @@
</div>
</div>
<!-- Contribución Open Source -->
<!-- Contribució Codi Obert -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
>
@@ -694,21 +675,19 @@
>volunteer_activism</span
>
<h4 class="font-bold text-lg dark:text-white">
Contribución Open Source
Contribució Codi Obert
</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.
Col·laboració activa i correcció d'errors en eines i frameworks de codi obert que utilitzem en el dia a dia.
</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
>Constant</span
>
<span class="text-xs text-slate-400"
>Forgejo • GitHub</span
@@ -716,7 +695,7 @@
</div>
</div>
<!-- Visualización Datos Baleares -->
<!-- Visualització Dades Balears -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
>
@@ -727,21 +706,19 @@
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
Visualización Datos Baleares
Visualització Dades Balears
</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.
Tauler interactiu i visualització ecològica sobre el consum d'aigua i recursos a l'arxipèlag balear, dissenyat amb tecnologies web lleugeres.
</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
>En Desenvolupament</span
>
<span class="text-xs text-slate-400"
>HTML5 • JS • D3.js</span
@@ -751,7 +728,7 @@
</div>
</div>
<!-- Trabajo Anterior (Proyectos de IA previos) -->
<!-- Treball Anterior -->
<div
class="border-t border-slate-200 dark:border-slate-800 pt-8"
>
@@ -766,7 +743,7 @@
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
>chevron_right</span
>
Trabajo Anterior (Proyectos e IA comercial)
Treball Anterior (Projectes d'IA comercial)
</span>
</summary>
<div class="grid md:grid-cols-2 gap-8 mt-6">
@@ -783,10 +760,10 @@
<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.
Sistema de processament intel·ligent multimèdia.
Rep àudios i PDFs, els transcriu i els estructura
mitjançant APIs d'IA comercials per a la seva
posterior consulta semàntica.
</p>
</div>
<div class="flex gap-4 items-center">
@@ -794,7 +771,7 @@
class="text-xs text-primary hover:underline font-bold"
onclick="openModal('project-1')"
>
Ver detalles y stack
Veure detalls i stack
</button>
</div>
</div>
@@ -812,9 +789,7 @@
<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.
Bot conversacional de Telegram connectat amb Supabase i RAG que suggereix receptes basant-se en ingredients disponibles en temps real.
</p>
</div>
<div class="flex gap-4 items-center">
@@ -822,7 +797,7 @@
class="text-xs text-primary hover:underline font-bold"
onclick="openModal('project-2')"
>
Ver detalles y stack
Veure detalls i stack
</button>
</div>
</div>
@@ -1073,35 +1048,31 @@
<div class="space-y-4 mb-8">
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Descripción
Descripció
</h3>
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
Sistema de ingesta y procesamiento inteligente de contenido
multimedia. Recibe audio, PDFs, vídeos y texto. Utiliza modelos
de IA para transcribir, resumir y extraer información clave,
almacenando todo en Supabase de forma estructurada para
reutilización posterior.
Sistema d'ingestió i processament intel·ligent de contingut multimèdia. Rep àudio, PDFs, vídeos i text. Utilitza models d'IA per transcriure, resumir i extreure informació clau, emmagatzemant tot a Supabase de forma estructurada per a la seva posterior reutilització.
</p>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Funcionalidades
Funcionalitats
</h3>
<ul
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
>
<li>Ingestión de múltiples tipos de contenido</li>
<li>Transcripción automática con IA</li>
<li>Resumen inteligente y extracción de keywords</li>
<li>Almacenamiento vectorial para búsqueda semántica</li>
<li>Pipeline automatizado con n8n</li>
<li>Ingestió de múltiples tipus de contingut</li>
<li>Transcripció automàtica amb IA</li>
<li>Resum intel·ligent i extracció de paraules clau</li>
<li>Emmagatzematge vectorial per a cerca semàntica</li>
<li>Pipeline automatitzat amb n8n</li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Stack Tecnológico
Stack Tecnològic
</h3>
<div class="flex flex-wrap gap-2">
<span
@@ -1118,19 +1089,17 @@
>
<span
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
>Whisper (transcripción)</span
>Whisper (transcripció)</span
>
</div>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Resultado
Resultat
</h3>
<p class="text-slate-700 dark:text-slate-300">
Pipeline completamente automatizado que reduce el tiempo de
procesamiento de contenido en un 85% y permite reutilizar
información de forma inteligente mediante búsquedas semánticas.
Pipeline completament automatitzat que redueix el temps de processament de contingut en un 85% i permet reutilitzar informació de forma intel·ligent mitjançant cerques semàntiques.
</p>
</div>
</div>
@@ -1139,7 +1108,7 @@
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
onclick="closeModal('project-1')"
>
Cerrar
Tancar
</button>
</div>
</div>
@@ -1184,41 +1153,33 @@
<div class="space-y-4 mb-8">
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Descripción
Descripció
</h3>
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
Agente conversacional inteligente en Telegram que actúa como
asistente culinario personal. Consulta tu inventario en
Supabase, accede a un RAG especializado con recetas para evitar
alucinaciones, y sugiere platos personalizados basados en lo que
tienes disponible.
Agent conversacional intel·ligent a Telegram que actua com a assistent culinari personal. Consulta el teu inventari a Supabase, accedeix a un RAG especialitzat amb receptes per evitar al·lucinacions, i suggereix plats personalitzats basats en el que tens disponible.
</p>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Funcionalidades
Funcionalitats
</h3>
<ul
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
>
<li>Integración bidireccional con Supabase</li>
<li>Consulta automática de inventario en base de datos</li>
<li>
RAG (Retrieval-Augmented Generation) con recetas verificadas
</li>
<li>
Prevención de alucinaciones mediante fine-tuning de prompts
</li>
<li>Generación de recetas personalizadas sin alucinar</li>
<li>Actualización automática del inventario</li>
<li>Conversación natural y contextual</li>
<li>Integració bidireccional amb Supabase</li>
<li>Consulta automàtica d'inventari a la base de dades</li>
<li>RAG (Retrieval-Augmented Generation) amb receptes verificades</li>
<li>Prevenció d'al·lucinacions mitjançant fine-tuning de prompts</li>
<li>Generació de receptes personalitzades sense al·lucinar</li>
<li>Actualització automàtica de l'inventari</li>
<li>Conversa natural i contextual</li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Stack Tecnológico
Stack Tecnològic
</h3>
<div class="flex flex-wrap gap-2">
<span
@@ -1246,14 +1207,10 @@
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Resultado
Resultat
</h3>
<p class="text-slate-700 dark:text-slate-300">
Asistente culinario robusto que elimina la decisión de "qué
cocinar" sin generar recetas inexistentes. El RAG garantiza que
todas las sugerencias provienen de un corpus de recetas
verificadas, proporcionando fiabilidad y personalización sin
alucinaciones de la IA.
Assistent culinari robust que elimina la decisió de "què cuinar" sense generar receptes inexistents. El RAG garanteix que totes les suggerències provenen d'un corpus de receptes verificades, proporcionant fiabilitat i personalització sense al·lucinacions de la IA.
</p>
</div>
</div>
@@ -1262,7 +1219,7 @@
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
onclick="closeModal('project-2')"
>
Cerrar
Tancar
</button>
</div>
</div>
index-en.html
+107 -163
View File
@@ -178,14 +178,14 @@
</div>
</main>
<!-- Manifiesto Section -->
<!-- Manifesto Section -->
<section class="py-24 bg-white/30 dark:bg-white/5" id="manifiesto">
<div class="mx-auto max-w-6xl px-6">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2
class="text-4xl md:text-5xl font-serif italic mb-6 text-slate-900 dark:text-white"
>
Manifiesto
Manifesto for Human &amp; Sovereign Technology
</h2>
<div class="h-1 w-20 bg-primary mx-auto mb-10 rounded-full"></div>
</div>
@@ -199,14 +199,13 @@
<h3
class="text-2xl font-serif italic font-bold dark:text-white"
>
Propósito
Purpose
</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.
Democratize and humanize technology, putting it at the service
of people and the planet, and not the other way around. I seek to create
tools that empower communities rather than concentrate power.
</p>
</div>
<div class="p-8 glass rounded-3xl border border-white/20">
@@ -217,14 +216,13 @@
<h3
class="text-2xl font-serif italic font-bold dark:text-white"
>
Misión
Mission
</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.
Develop efficient, accessible, and digital-rights-respecting
solutions, demonstrating that another technology is possible
through local commitment and global impact.
</p>
</div>
</div>
@@ -233,12 +231,12 @@
<h3
class="text-2xl font-serif italic text-slate-800 dark:text-slate-200"
>
Principios rectores
Guiding principles
</h3>
</div>
<div class="grid md:grid-cols-3 gap-6">
<!-- Principio 1: Sostenibilidad -->
<!-- Principle 1: Sustainability -->
<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"
>
@@ -249,14 +247,13 @@
<span class="material-symbols-outlined">eco</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Sostenibilidad (Green Software)
Sustainability (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.
Optimize resource consumption, minimizing data transfer
and the carbon footprint of the web applications I develop.
</p>
</div>
<a
@@ -271,7 +268,7 @@
</a>
</div>
<!-- Principio 2: Software Libre -->
<!-- Principle 2: Free Software -->
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
>
@@ -281,18 +278,17 @@
<span class="material-symbols-outlined">folder_open</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Software Libre
Free &amp; Open Source Software
</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.
Support and contribute to open source as a digital public
good that fosters technological sovereignty and shared learning.
</p>
</div>
<!-- Principio 3: Bien Común -->
<!-- Principle 3: Common Good -->
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
>
@@ -302,18 +298,17 @@
<span class="material-symbols-outlined">groups</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Bien Común
Common Good
</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.
Prioritize projects and tools that generate a positive,
measurable social impact oriented toward solving real society needs.
</p>
</div>
<!-- Principio 4: Accesibilidad -->
<!-- Principle 4: Accessibility -->
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
>
@@ -325,18 +320,17 @@
>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Accesibilidad (a11y)
Accessibility (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.
Design inclusive web interfaces so everyone can access
information without physical, cognitive, or technological barriers.
</p>
</div>
<!-- Principio 5: Privacidad -->
<!-- Principle 5: Privacy -->
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
>
@@ -346,18 +340,17 @@
<span class="material-symbols-outlined">shield</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Privacidad
Privacy
</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.
Respect personal data sovereignty, using ethical and
cookieless analytics, protecting users from corporate tracking.
</p>
</div>
<!-- Principio 6: IA Responsable -->
<!-- Principle 6: Responsible AI -->
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
>
@@ -367,14 +360,13 @@
<span class="material-symbols-outlined">psychology</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
IA Responsable
Responsible AI
</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.
Use AI models ethically and transparently, prioritizing local
execution and ensuring they support human agency.
</p>
</div>
</div>
@@ -384,15 +376,14 @@
<!-- Laboratorio Section -->
<section class="py-24" id="laboratorio">
<div class="mx-auto max-w-6xl px-6">
<div class="mb-12">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2
class="text-5xl font-serif italic mb-4 text-slate-900 dark:text-white"
>
Mi laboratorio
My Laboratory
</h2>
<p class="text-slate-500 dark:text-slate-400">
Un espacio de experimentación técnica, herramientas reales e
infraestructura digital soberana.
A space for technical experimentation, real tools, and sovereign digital infrastructure.
</p>
</div>
@@ -404,19 +395,19 @@
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
data-tab="infraestructura"
>
Infraestructura
Infrastructure
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="experimentos"
>
Experimentos
Experiments
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="proyectos"
>
Proyectos
Projects
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
@@ -428,20 +419,17 @@
<!-- Tab Contents -->
<div id="tab-contents">
<!-- Tab 1: Infraestructura -->
<!-- Tab 1: Infrastructure -->
<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é
What I use and why
</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.
Technological sovereignty begins at the foundations. I have chosen to manage my own infrastructure to ensure control over my data, project privacy, and reduce dependency on cloud giants.
</p>
<div
class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl"
@@ -450,12 +438,10 @@
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>
<span>Green Commitment</span>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">
Mi infraestructura está alojada en el centro de datos de
Hetzner en Helsinki, alimentado por energía 100% libre
de carbono procedente de fuentes eólicas e hidráulicas.
My infrastructure is hosted at Hetzner's data center in Helsinki, powered by 100% carbon-free energy from wind and hydro sources.
</p>
</div>
</div>
@@ -471,8 +457,7 @@
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
>
Servidores dedicados y VPS alimentados por energía verde
en Finlandia.
Dedicated servers and VPS powered by green energy in Finland.
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
@@ -484,8 +469,7 @@
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
>
Alternativa self-hosted y de código abierto a
Vercel/Heroku.
Self-hosted, open-source alternative to Vercel/Heroku.
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
@@ -497,8 +481,7 @@
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
>
Servicio Git ligero autohospedado para control soberano
de código.
Lightweight self-hosted Git service for sovereign code control.
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
@@ -510,8 +493,7 @@
<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.
Self-hosted workflow automation free from SaaS lock-in.
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
@@ -523,15 +505,14 @@
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
>
Analítica web ética, respetuosa con la privacidad y
cookieless.
Ethical, privacy-respecting, cookieless web analytics.
</p>
</div>
</div>
</div>
</div>
<!-- Tab 2: Experimentos -->
<!-- Tab 2: Experiments -->
<div id="tab-experimentos" class="tab-pane hidden">
<div class="grid md:grid-cols-3 gap-6">
<div
@@ -544,18 +525,16 @@
>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
>Activo</span
>Active</span
>
</div>
<h4 class="font-bold dark:text-white mb-2">
Medición de Green Software
Green Software Measurement
</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.
Empirical comparison of CPU and network consumption between SSR (Astro/Next.js) architectures and optimized static HTML pages.
</p>
</div>
<div
@@ -568,18 +547,16 @@
>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
>Activo</span
>Active</span
>
</div>
<h4 class="font-bold dark:text-white mb-2">
IA Local en Raspberry Pi
Local AI on 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.
Running small models like Llama 3.2 1B and Phi-3 with Ollama locally for classification and tagging tasks with zero API cost and guaranteed privacy.
</p>
</div>
<div
@@ -592,29 +569,27 @@
>
<span
class="px-2.5 py-0.5 bg-amber-500/10 text-amber-500 text-xs font-bold rounded-full"
>Pendiente</span
>Pending</span
>
</div>
<h4 class="font-bold dark:text-white mb-2">
Estrés de Lectores de Pantalla
Screen Reader Stress Test
</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.
Manual audit of complex interfaces using NVDA and VoiceOver screen readers to validate dynamic interactive flows and live ARIA states.
</p>
</div>
</div>
</div>
<!-- Tab 3: Proyectos -->
<!-- Tab 3: Projects -->
<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
Real tools, not demos
</h3>
<div class="grid md:grid-cols-2 gap-8">
<!-- Navidrome -->
@@ -628,21 +603,19 @@
>music_note</span
>
<h4 class="font-bold text-lg dark:text-white">
Servidor Navidrome
Navidrome Server
</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.
Personal self-hosted music instance on Hetzner to regain sovereignty over my audio files and avoid corporate streaming algorithms.
</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
>Operational</span
>
<span class="text-xs text-slate-400"
>Docker • Hetzner</span
@@ -661,21 +634,19 @@
>route</span
>
<h4 class="font-bold text-lg dark:text-white">
Flujo n8n + Ollama
n8n + Ollama Pipeline
</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.
Autonomous local pipeline that captures voice notes, transcribes them, and processes them using Ollama with open-source AI models without sending data to 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
>Operational</span
>
<span class="text-xs text-slate-400"
>n8n • Ollama • Whisper</span
@@ -694,21 +665,19 @@
>volunteer_activism</span
>
<h4 class="font-bold text-lg dark:text-white">
Contribución Open Source
Open Source Contribution
</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.
Active collaboration and bug fixing in open-source tools and frameworks used daily.
</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
>Ongoing</span
>
<span class="text-xs text-slate-400"
>Forgejo • GitHub</span
@@ -727,21 +696,19 @@
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
Visualización Datos Baleares
Balearic Data Visualization
</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.
Interactive dashboard and ecological visualization of water and resource consumption in the Balearic archipelago, built with lightweight web technologies.
</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
>In Development</span
>
<span class="text-xs text-slate-400"
>HTML5 • JS • D3.js</span
@@ -766,7 +733,7 @@
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
>chevron_right</span
>
Trabajo Anterior (Proyectos e IA comercial)
Previous Work (Commercial &amp; AI Projects)
</span>
</summary>
<div class="grid md:grid-cols-2 gap-8 mt-6">
@@ -783,10 +750,7 @@
<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.
Intelligent multimedia processing system. Receives audio files and PDFs, transcribes, and structures them using commercial AI APIs for semantic querying.
</p>
</div>
<div class="flex gap-4 items-center">
@@ -794,7 +758,7 @@
class="text-xs text-primary hover:underline font-bold"
onclick="openModal('project-1')"
>
Ver detalles y stack
View details &amp; stack
</button>
</div>
</div>
@@ -812,9 +776,7 @@
<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.
Conversational Telegram bot connected to Supabase and RAG that suggests recipes based on available ingredients in real time.
</p>
</div>
<div class="flex gap-4 items-center">
@@ -822,7 +784,7 @@
class="text-xs text-primary hover:underline font-bold"
onclick="openModal('project-2')"
>
Ver detalles y stack
View details &amp; stack
</button>
</div>
</div>
@@ -1067,35 +1029,31 @@
<div class="space-y-4 mb-8">
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Descripción
Description
</h3>
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
Sistema de ingesta y procesamiento inteligente de contenido
multimedia. Recibe audio, PDFs, vídeos y texto. Utiliza modelos
de IA para transcribir, resumir y extraer información clave,
almacenando todo en Supabase de forma estructurada para
reutilización posterior.
Intelligent multimedia content processing and ingestion system. Receives audio files, PDFs, videos, and text. Uses AI models to transcribe, summarize, and extract key information, storing everything structured in Supabase for subsequent retrieval.
</p>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Funcionalidades
Key Features
</h3>
<ul
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
>
<li>Ingestión de múltiples tipos de contenido</li>
<li>Transcripción automática con IA</li>
<li>Resumen inteligente y extracción de keywords</li>
<li>Almacenamiento vectorial para búsqueda semántica</li>
<li>Pipeline automatizado con n8n</li>
<li>Multiple content type ingestion</li>
<li>Automatic AI transcription</li>
<li>Intelligent summarization and keyword extraction</li>
<li>Vector storage for semantic search</li>
<li>Automated workflow with n8n</li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Stack Tecnológico
Tech Stack
</h3>
<div class="flex flex-wrap gap-2">
<span
@@ -1112,19 +1070,17 @@
>
<span
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
>Whisper (transcripción)</span
>Whisper (transcription)</span
>
</div>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Resultado
Result
</h3>
<p class="text-slate-700 dark:text-slate-300">
Pipeline completamente automatizado que reduce el tiempo de
procesamiento de contenido en un 85% y permite reutilizar
información de forma inteligente mediante búsquedas semánticas.
Fully automated pipeline that reduces content processing time by 85% and enables intelligent information reuse through semantic search.
</p>
</div>
</div>
@@ -1133,7 +1089,7 @@
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
onclick="closeModal('project-1')"
>
Cerrar
Close
</button>
</div>
</div>
@@ -1178,41 +1134,33 @@
<div class="space-y-4 mb-8">
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Descripción
Description
</h3>
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
Agente conversacional inteligente en Telegram que actúa como
asistente culinario personal. Consulta tu inventario en
Supabase, accede a un RAG especializado con recetas para evitar
alucinaciones, y sugiere platos personalizados basados en lo que
tienes disponible.
Intelligent conversational agent on Telegram acting as a personal culinary assistant. Queries your Supabase inventory, accesses a specialized recipe RAG to avoid hallucinations, and suggests customized dishes based on available ingredients.
</p>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Funcionalidades
Key Features
</h3>
<ul
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
>
<li>Integración bidireccional con Supabase</li>
<li>Consulta automática de inventario en base de datos</li>
<li>
RAG (Retrieval-Augmented Generation) con recetas verificadas
</li>
<li>
Prevención de alucinaciones mediante fine-tuning de prompts
</li>
<li>Generación de recetas personalizadas sin alucinar</li>
<li>Actualización automática del inventario</li>
<li>Conversación natural y contextual</li>
<li>Bi-directional integration with Supabase</li>
<li>Automatic database inventory querying</li>
<li>RAG (Retrieval-Augmented Generation) with verified recipes</li>
<li>Hallucination prevention via prompt fine-tuning</li>
<li>Customized recipe generation without hallucinations</li>
<li>Automatic inventory updating</li>
<li>Natural and contextual conversation</li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Stack Tecnológico
Tech Stack
</h3>
<div class="flex flex-wrap gap-2">
<span
@@ -1240,14 +1188,10 @@
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Resultado
Result
</h3>
<p class="text-slate-700 dark:text-slate-300">
Asistente culinario robusto que elimina la decisión de "qué
cocinar" sin generar recetas inexistentes. El RAG garantiza que
todas las sugerencias provienen de un corpus de recetas
verificadas, proporcionando fiabilidad y personalización sin
alucinaciones de la IA.
Robust culinary assistant that eliminates the "what to cook" decision without generating non-existent recipes. The RAG ensures all suggestions originate from a corpus of verified recipes, providing reliability and personalization without AI hallucinations.
</p>
</div>
</div>
@@ -1256,7 +1200,7 @@
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
onclick="closeModal('project-2')"
>
Cerrar
Close
</button>
</div>
</div>