diff --git a/huella.html b/huella.html new file mode 100644 index 0000000..4b4d013 --- /dev/null +++ b/huella.html @@ -0,0 +1,325 @@ + + + + + + Huella Digital y Decisiones Técnicas | Itziar ZG + + + + + + + +
+ +
+
+ +
+ +
+ +
+ + auto_awesome + +
+

+ Itziar ZG +

+ + +
+ + + Hablemos + +
+
+ + +
+ + +
+ + arrow_back + Volver al inicio + +
+ + +
+

+ Huella ecológica &
+ Decisiones técnicas +

+

+ Medición del impacto ambiental de este sitio web y desglose de los compromisos pragmáticos adoptados durante su desarrollo. +

+
+ + +
+
+
+ weight +

Peso de la página

+

~245 KB

+

+ Total de datos transferidos en la primera carga completa del sitio. La media web mundial actual supera los 2.5 MB. +

+
+
+ +
+
+ co2 +

Emisiones estimadas

+

0.05 g

+

+ CO2 generado por visita, medido con la fórmula estandarizada de Sustainable Web Design. El promedio web es de 0.5g. +

+
+
+ +
+
+ nest_eco_leaf +

Servidor ecológico

+

100%

+

+ La web está alojada en Hetzner (Helsinki), un centro de datos alimentado por energía libre de carbono (eólica e hidráulica). +

+
+
+
+ + +
+
+

El recordatorio anti-purismo

+

El pragmatismo frente a la teoría absoluta

+
+ +

+ En el desarrollo de software responsable, es fácil caer en el purismo de querer reducir la transferencia a cero absoluto o rechazar cualquier recurso externo. Sin embargo, para que el código sea sostenible también debe ser mantenible y útil. Aquí documento las decisiones imperfectas pero justificadas tomadas en esta web: +

+ +
+ +
+

+ warning + Tailwind CSS mediante CDN de desarrollo +

+

+ El problema: El script de Tailwind en línea pesa en torno a los 100 KB transferidos y compila las clases en el navegador del usuario en tiempo real. Compilar y empaquetar CSS en producción reduciría este peso a unos 10-15 KB. +

+

+ El compromiso: Elegimos mantener este sitio sin pasos de construcción (no-build setup) para garantizar que cualquiera pueda descargar el código, hacer doble clic en index.html y ver el sitio funcionando al instante sin instalar dependencias de Node.js. Esto prolonga la vida útil del código (impide la obsolescencia de dependencias de build) a cambio de un ligero impacto de descarga. +

+
+ + +
+

+ warning + Google Fonts externas vs. Fuentes del Sistema +

+

+ El problema: Importamos Space Grotesk y Instrument Serif externamente. Esto requiere establecer una conexión con los servidores de Google y descargar los archivos tipográficos. +

+

+ El compromiso: 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. +

+
+ + +
+

+ warning + Librería de Iconos en la Nube +

+

+ El problema: Cargamos los iconos Material Symbols a través del CDN de Google en lugar de incrustar manualmente solo los SVGs que utilizamos. +

+

+ El compromiso: 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. +

+
+
+
+ +
+ + + + +
+
+ + + + + diff --git a/index.html b/index.html index 3c47361..a17b64c 100644 --- a/index.html +++ b/index.html @@ -74,18 +74,23 @@ > Sobre míInicio ProyectosManifiesto Tech StackLaboratorio + Huella

- Arquitecta de - IA - & Automatización + Cuando necesitas utilizar la tecnología para generar impacto social de forma responsable, habla con Itziar.

- Construyo automatizaciones y agentes de IA que conectan - herramientas, procesan información y transforman flujos de trabajo - en sistemas inteligentes. + Desarrolladora front-end especializada en tecnología ligera, accesible y soberana. Con base en Ibiza.

- - + Explorar Laboratorio +
- -
+ +
-
+

- Sobre mí + Manifiesto

-

- Ingeniera de telecomunicaciones y desarrolladora especializada - en automatización de procesos, integración de APIs y creación de - agentes basados en inteligencia artificial. Construyo sistemas - que conectan herramientas, procesan información y crean flujos - automatizados que reducen trabajo manual. -

-
-
- router -

Automatización

-

- Optimización de procesos complejos con workflows - inteligentes. -

-
-
- psychology -

Agentes IA

-

- LLMs y flujos generativos autónomos. -

-
-
- hub -

- Integración APIs -

-

- Conexión fluida entre servicios SaaS. -

-
-
- terminal -

Web Moderna

-

- Desarrollo Frontend con Next.js y React. -

-
-
+
-
-
- - -
-
-
-
-

- Selected Works -

-

- Proyectos destacados en automatización inteligente. + +

+
+
+ target +

Propósito

+
+

+ 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.

- -
- -
-
- Visualization of an AI neural network and data pipeline -
-
-
-

- AI Knowledge Pipeline -

-

- Sistema automatizado capaz de recibir audio, PDFs, vídeos o - texto. Transcribe el contenido, lo resume mediante IA y lo - almacena estructuradamente para su reutilización. -

-
- n8n - Supabase - APIs IA -
- + +
+

Principios rectores

+
+ +
+ +
+
+ eco
+

Sostenibilidad (Green Software)

+

+ Optimizar el consumo de recursos, minimizando la transferencia de datos y la huella de carbono de las aplicaciones web que desarrollo. +

- -
-
- High-end modern kitchen with minimalist design -
-
-
-

- ChefGPT -

-

- Agente conversacional que sugiere recetas en función de los - ingredientes disponibles. Integra Telegram, Google Sheets y - n8n para automatizar consultas de inventario. -

-
- Telegram - Google Sheets - n8n -
- + +
+
+ folder_open
+

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. +

- - +
+
+ groups
-
-

- Content Processing Automation -

-

- Pipeline automatizado para procesar contenido multimedia - (audio, PDFs, vídeos, texto) que genera transcripciones, - resúmenes y conocimiento estructurado. -

-
- Workflow - APIs - LLMs -
- +

Bien Común

+

+ Priorizar proyectos y herramientas que generen un impacto social positivo, medible y orientado a resolver necesidades reales de la sociedad. +

+
+ + +
+
+ accessibility_new
-
--> +

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. +

+
+ + +
+
+ shield +
+

Privacidad

+

+ Respetar la soberanía de los datos personales, usando analíticas éticas y cookieless, protegiendo a los usuarios del rastreo corporativo. +

+
+ + +
+
+ psychology +
+

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. +

+
- -
-
-
-

- Tech Curated Stack -

-
-
-
- hub + +
+
+
+

+ Mi laboratorio +

+

+ Un espacio de experimentación técnica, herramientas reales e infraestructura digital soberana. +

+
+ + +
+ + + + +
+ + +
+ + +
+
+
+

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. +

+
+
+ bolt + Compromiso Verde +
+

+ 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. +

+
+
+
+
+ dns +

Hetzner Helsinki

+

Servidores dedicados y VPS alimentados por energía verde en Finlandia.

+
+
+ deployed_code +

Coolify

+

Alternativa self-hosted y de código abierto a Vercel/Heroku.

+
+
+ git_gesture +

Forgejo

+

Servicio Git ligero autohospedado para control soberano de código.

+
+
+ hub +

n8n

+

Automatización de flujos de trabajo self-hosted libre de ataduras de SaaS.

+
+
+ monitoring +

Umami

+

Analítica web ética, respetuosa con la privacidad y cookieless.

+
+
+ screen_record +

Cap

+

Herramienta de grabación de pantalla de código libre en nuestro nodo.

+
+
- n8n
-
-
- terminal + + + -
-
- code + + + -
-
- model_training + + +
+
+ + + chevron_right + Trabajo Anterior (Proyectos e IA comercial) + + +
+ +
+
+

AI Knowledge Pipeline

+

+ 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. +

+
+
+ +
+
+ + +
+
+

ChefGPT

+

+ Bot conversacional de Telegram conectado con Google Sheets que sugiere recetas basándose en ingredientes disponibles en tiempo real. +

+
+
+ +
+
+
+
- LLMs
-
-
- database + + + -
-
- api -
- APIs -
-
-
- palette -
- Tailwind CSS -
-
-
- chat -
- TypeScript
+
diff --git a/js/main.js b/js/main.js index 8dba210..e247c1e 100644 --- a/js/main.js +++ b/js/main.js @@ -105,6 +105,43 @@ function closeModal(projectId) { } } +// ============================================ +// Laboratorio Tabs Management +// ============================================ + +/** + * Initialize tabs behavior for the Laboratorio section + */ +function initTabs() { + const tabButtons = document.querySelectorAll(".tab-btn"); + const tabPanes = document.querySelectorAll(".tab-pane"); + + tabButtons.forEach((btn) => { + btn.addEventListener("click", () => { + const targetTab = btn.getAttribute("data-tab"); + + // Update button styles to reflect active/inactive state + tabButtons.forEach((b) => { + b.classList.remove("bg-primary", "text-white", "shadow-md", "shadow-primary/25"); + b.classList.add("text-slate-600", "dark:text-slate-400", "hover:bg-slate-100", "dark:hover:bg-white/5"); + }); + btn.classList.add("bg-primary", "text-white", "shadow-md", "shadow-primary/25"); + btn.classList.remove("text-slate-600", "dark:text-slate-400", "hover:bg-slate-100", "dark:hover:bg-white/5"); + + // Show the selected tab content and hide the others + tabPanes.forEach((pane) => { + if (pane.id === `tab-${targetTab}`) { + pane.classList.remove("hidden"); + pane.classList.add("block"); + } else { + pane.classList.remove("block"); + pane.classList.add("hidden"); + } + }); + }); + }); +} + // ============================================ // Event Listeners // ============================================ @@ -125,6 +162,7 @@ document.addEventListener("keydown", function (event) { }); /** - * Initialize theme as early as possible + * Initialize theme and tabs */ initTheme(); +initTabs();