317 lines
16 KiB
HTML
317 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>Huella Digital y Decisiones Técnicas | Itziar ZG</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: "#8c2bee",
|
|
"background-light": "#f7f6f8",
|
|
"background-dark": "#191022",
|
|
},
|
|
fontFamily: {
|
|
display: ["Space Grotesk", "sans-serif"],
|
|
serif: ["Instrument Serif", "serif"],
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: "0.5rem",
|
|
lg: "1rem",
|
|
xl: "1.5rem",
|
|
full: "9999px",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
</head>
|
|
<body
|
|
class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300"
|
|
>
|
|
<div class="relative min-h-screen overflow-hidden iridescent-bg flex flex-col justify-between">
|
|
<!-- Floating Fluid Shapes -->
|
|
<div
|
|
class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50 pointer-events-none"
|
|
></div>
|
|
<div
|
|
class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40 pointer-events-none"
|
|
></div>
|
|
|
|
<div class="layout-container flex h-full grow flex-col relative z-10">
|
|
<!-- Navigation -->
|
|
<header
|
|
class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between"
|
|
>
|
|
<a href="index.html" class="flex items-center gap-2 group cursor-pointer">
|
|
<div
|
|
class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20"
|
|
>
|
|
<span class="material-symbols-outlined text-2xl">
|
|
auto_awesome
|
|
</span>
|
|
</div>
|
|
<h2
|
|
class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
Itziar ZG
|
|
</h2>
|
|
</a>
|
|
<nav
|
|
class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full"
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="index.html"
|
|
>Inicio</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="index.html#manifiesto"
|
|
>Manifiesto</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="index.html#laboratorio"
|
|
>Laboratorio</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium text-primary hover:text-primary transition-colors"
|
|
href="huella.html"
|
|
>Huella</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#contact"
|
|
>Contacto</a
|
|
>
|
|
</nav>
|
|
<div class="flex items-center gap-4">
|
|
<button
|
|
class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors"
|
|
id="theme-toggle"
|
|
onclick="toggleTheme()"
|
|
aria-label="Toggle theme"
|
|
>
|
|
<span class="material-symbols-outlined text-xl dark:hidden">
|
|
dark_mode
|
|
</span>
|
|
<span
|
|
class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
|
|
>
|
|
light_mode
|
|
</span>
|
|
</button>
|
|
<a
|
|
class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25 flex items-center justify-center"
|
|
href="index.html#contact"
|
|
>
|
|
Hablemos
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
|
|
|
|
<!-- Back Link -->
|
|
<div class="mb-8">
|
|
<a
|
|
href="index.html"
|
|
class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors"
|
|
>
|
|
<span class="material-symbols-outlined text-sm">arrow_back</span>
|
|
Volver al inicio
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Page Title -->
|
|
<div class="mb-16">
|
|
<h1 class="text-4xl md:text-6xl font-serif italic mb-6 text-slate-900 dark:text-white leading-tight">
|
|
Huella ecológica &<br />
|
|
<span class="text-primary not-italic font-display font-black tracking-tighter">Decisiones</span> técnicas
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
|
|
Medición del impacto ambiental de este sitio web y desglose de los compromisos pragmáticos adoptados durante su desarrollo.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Impact Metrics Grid -->
|
|
<div class="grid md:grid-cols-3 gap-6 mb-16">
|
|
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
|
|
<div>
|
|
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">weight</span>
|
|
<h3 class="font-bold mb-2 dark:text-white">Peso de la página</h3>
|
|
<p class="text-3xl font-bold text-primary mb-2">~245 KB</p>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
|
Total de datos transferidos en la primera carga completa del sitio. La media web mundial actual supera los 2.5 MB.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
|
|
<div>
|
|
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">co2</span>
|
|
<h3 class="font-bold mb-2 dark:text-white">Emisiones estimadas</h3>
|
|
<p class="text-3xl font-bold text-primary mb-2">0.05 g</p>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
|
CO2 generado por visita, medido con la fórmula estandarizada de Sustainable Web Design. El promedio web es de 0.5g.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
|
|
<div>
|
|
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">nest_eco_leaf</span>
|
|
<h3 class="font-bold mb-2 dark:text-white">Servidor ecológico</h3>
|
|
<p class="text-3xl font-bold text-emerald-500 mb-2">100%</p>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
|
La web está alojada en Hetzner (Helsinki), un centro de datos alimentado por energía libre de carbono (eólica e hidráulica).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Anti-Purismo / Compromisos Imperfectos -->
|
|
<section class="space-y-8 mb-20">
|
|
<div class="border-l-4 border-primary pl-6">
|
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">El recordatorio anti-purismo</h2>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">El pragmatismo frente a la teoría absoluta</p>
|
|
</div>
|
|
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
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:
|
|
</p>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Compromiso 1: Tailwind CSS por CDN -->
|
|
<div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
|
|
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-amber-500">warning</span>
|
|
Tailwind CSS mediante CDN de desarrollo
|
|
</h3>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
|
<strong>El problema:</strong> 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.
|
|
</p>
|
|
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
<strong>El compromiso:</strong> 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 <code>index.html</code> 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.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Compromiso 2: Tipografías de Google Fonts -->
|
|
<div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
|
|
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-amber-500">warning</span>
|
|
Google Fonts externas vs. Fuentes del Sistema
|
|
</h3>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
|
<strong>El problema:</strong> Importamos <em>Space Grotesk</em> y <em>Instrument Serif</em> externamente. Esto requiere establecer una conexión con los servidores de Google y descargar los archivos tipográficos.
|
|
</p>
|
|
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
<strong>El compromiso:</strong> Las fuentes del sistema son la opción más limpia energéticamente. Sin embargo, para un portfolio personal, la tipografía es un pilar estético de la identidad visual. Optamos por descargar solo los pesos indispensables y compensamos el consumo eliminando por completo cualquier animación pesada de JavaScript o imágenes sin optimizar.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Compromiso 3: Material Symbols (Iconos) -->
|
|
<div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
|
|
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-amber-500">warning</span>
|
|
Librería de Iconos en la Nube
|
|
</h3>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
|
<strong>El problema:</strong> Cargamos los iconos Material Symbols a través del CDN de Google en lugar de incrustar manualmente solo los SVGs que utilizamos.
|
|
</p>
|
|
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
<strong>El compromiso:</strong> Incrustar SVGs en línea es más óptimo, pero dificulta la legibilidad del código HTML y hace que el mantenimiento del portfolio sea más complejo para cambios rápidos. Usar el CDN proporciona una API simple y limpia para el mantenimiento cotidiano.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="pb-12" id="contact">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div
|
|
class="glass rounded-[3rem] p-12 md:p-24 text-center relative overflow-hidden"
|
|
>
|
|
<div class="absolute top-0 right-0 p-8 pointer-events-none">
|
|
<span
|
|
class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
|
|
>alternate_email</span
|
|
>
|
|
</div>
|
|
<h2
|
|
class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white"
|
|
>
|
|
¿Hablamos?
|
|
</h2>
|
|
<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.
|
|
</p>
|
|
<div
|
|
class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
|
|
>
|
|
<a
|
|
class="bg-slate-900 dark:bg-slate-800 text-white px-10 py-5 rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 dark:hover:bg-slate-700 transition-colors shadow-2xl"
|
|
href="mailto:itziar.zameza.garcia@gmail.com"
|
|
>
|
|
<span class="material-symbols-outlined">mail</span>
|
|
Enviar un Email
|
|
</a>
|
|
<div class="flex gap-4 justify-center">
|
|
<a
|
|
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
|
href="https://www.linkedin.com/in/itziarzamezagarcia"
|
|
title="LinkedIn"
|
|
>
|
|
<span class="material-symbols-outlined text-2xl">link</span>
|
|
</a>
|
|
<a
|
|
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
|
href="https://github.com/itziarZG"
|
|
title="GitHub"
|
|
>
|
|
<span class="material-symbols-outlined text-2xl"
|
|
>share</span
|
|
>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm"
|
|
>
|
|
<p>© 2026 Itziar ZG.</p>
|
|
<div class="flex gap-8">
|
|
<a
|
|
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
|
|
href="https://www.linkedin.com/in/itziarzamezagarcia"
|
|
>LinkedIn</a
|
|
>
|
|
<a
|
|
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
|
|
href="https://github.com/itziarZG"
|
|
>GitHub</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|