339 lines
17 KiB
HTML
339 lines
17 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="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
|
|
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
|
|
<link rel="stylesheet" href="css/styles.css?v=1.1" />
|
|
</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-3">
|
|
<!-- Language Switcher -->
|
|
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold">
|
|
<span class="text-primary">ES</span>
|
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
|
<a href="index-ca.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Català">CA</a>
|
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
|
<a href="index-en.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="English">EN</a>
|
|
</div>
|
|
<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 e Iconos Autoalojados (Self-Hosted) -->
|
|
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
|
|
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-emerald-500">verified</span>
|
|
Tipografías e Iconos 100% Autoalojados (Zero Third-Party Requests)
|
|
</h3>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
|
<strong>La optimización:</strong> Hemos migrado tanto las fuentes (<em>Space Grotesk</em> e <em>Instrument Serif</em>) como la iconografía (<em>Material Symbols Outlined</em>) a nuestra propia infraestructura (`/fonts`).
|
|
</p>
|
|
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
<strong>El impacto:</strong> Eliminamos por completo el rastreo y las llamadas DNS externas a Google Fonts, garantizando soberanía de datos, estricto cumplimiento del RGPD y menor latencia en el renderizado inicial.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Certificación Green Software Foundation -->
|
|
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
|
<div>
|
|
<div class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">
|
|
<span class="material-symbols-outlined text-sm">workspace_premium</span>
|
|
Acreditación Oficial Green Software Foundation
|
|
</div>
|
|
<h3 class="font-bold text-lg dark:text-white mb-1">
|
|
Green Software Practitioner
|
|
</h3>
|
|
<p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
|
|
Credential ID: <code>b80fdaac-96a2-48e1-9170-7a84c0297295</code> — Certificación en patrones de diseño sostenible y reducción de emisiones de software.
|
|
</p>
|
|
</div>
|
|
<a
|
|
href="https://badges.greensoftware.foundation/awards/b80fdaac-96a2-48e1-9170-7a84c0297295"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded-xl text-xs font-bold hover:bg-emerald-700 transition-colors shrink-0 shadow-md shadow-emerald-600/20"
|
|
>
|
|
<span class="material-symbols-outlined text-sm">verified</span>
|
|
Verificar Credencial
|
|
<span class="material-symbols-outlined text-xs">open_in_new</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</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>
|