itziarZG/MyWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
MyWebsite/huella.html
T

461 lines
36 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Huella ecológica web y decisiones técnicas | Itziar ZG</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta
name="description"
content="Consulta la huella ecológica de la web de Itziar ZG y las decisiones técnicas adoptadas para reducir su impacto ambiental."
/>
<meta name="robots" content="index, follow, max-image-preview:large" />
<link rel="canonical" href="https://www.itziarzameza.dev/huella.html" />
<meta name="theme-color" content="#f7f6f8" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="es_ES" />
<meta property="og:title" content="Huella ecológica web y decisiones técnicas | Itziar ZG" />
<meta property="og:description" content="Medición del impacto ambiental de este sitio web y compromisos técnicos para reducirlo." />
<meta property="og:url" content="https://www.itziarzameza.dev/huella.html" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Huella ecológica web y decisiones técnicas | Itziar ZG" />
<meta name="twitter:description" content="Medición del impacto ambiental de este sitio web y compromisos técnicos para reducirlo." />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Huella ecológica web y decisiones técnicas",
"description": "Medición del impacto ambiental de este sitio web y compromisos técnicos para reducirlo.",
"author": {
"@type": "Person",
"name": "Itziar Zameza García",
"url": "https://www.itziarzameza.dev/"
},
"publisher": {
"@type": "Person",
"name": "Itziar Zameza García"
},
"mainEntityOfPage": "https://www.itziarzameza.dev/huella.html"
}
</script>
<link rel="preload" href="css/styles.css" as="style" />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-700.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/instrument/instrument-serif-v5-latin-italic.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/instrument/instrument-serif-v5-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css" />
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
<script>
window.addEventListener("load", function () {
var load = function () {
var s = document.createElement("script");
s.defer = true;
s.src = "https://stats.itziarzameza.dev/script.js";
s.setAttribute("data-website-id", "8d8d648f-4a0c-4315-b287-5983ffedc8c4");
s.setAttribute("data-domains", "www.itziarzameza.dev");
document.body.appendChild(s);
};
if ("requestIdleCallback" in window) {
requestIdleCallback(load, { timeout: 2000 });
} else {
setTimeout(load, 1500);
}
});
</script>
</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"
>
<a class="skip-link" href="#main-content">Saltar al contenido principal</a>
<div class="relative min-h-screen overflow-hidden iridescent-bg flex flex-col justify-between">
<!-- Floating Fluid Shapes -->
<div
aria-hidden="true" class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50 pointer-events-none"
></div>
<div
aria-hidden="true" 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"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M760 600 710 710 600 760 710 810 760 920 810 810 920 760 810 710ZM760 40 710 150 600 200 710 250 760 360 810 250 920 200 810 150ZM360 160 260 380 40 480 260 580 360 800 460 580 680 480 460 380ZM360 354 400 440 486 480 400 520 360 606 320 520 234 480 320 440ZM360 480Z"/></svg>
</div>
<h2
class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white"
>
Itziar ZG
</h2>
</a>
<nav
aria-label="Navegación principal"
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"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl dark:hidden" aria-hidden="true"><path d="M480 120Q330 120 225.0 225.0Q120 330 120 480Q120 630 225.0 735.0Q330 840 480 840Q494 840 507.5 839.0Q521 838 534 836Q493 807 468.5 760.5Q444 714 444 660Q444 570 507.0 507.0Q570 444 660 444Q715 444 761.0 468.5Q807 493 836 534Q838 521 839.0 507.5Q840 494 840 480Q840 330 735.0 225.0Q630 120 480 120ZM480 200Q568 200 638.0 248.5Q708 297 740 375Q720 370 700.0 367.0Q680 364 660 364Q537 364 450.5 450.5Q364 537 364 660Q364 680 367.0 700.0Q370 720 375 740Q297 708 248.5 638.0Q200 568 200 480Q200 364 282.0 282.0Q364 200 480 200ZM470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl hidden dark:block text-yellow-200" aria-hidden="true"><path d="M480.0 360.0Q530 360 565.0 395.0Q600 430 600.0 480.0Q600 530 565.0 565.0Q530 600 480.0 600.0Q430 600 395.0 565.0Q360 530 360.0 480.0Q360 430 395.0 395.0Q430 360 480.0 360.0ZM480.0 280.0Q397 280 338.5 338.5Q280 397 280.0 480.0Q280 563 338.5 621.5Q397 680 480.0 680.0Q563 680 621.5 621.5Q680 563 680.0 480.0Q680 397 621.5 338.5Q563 280 480.0 280.0ZM200 440H40V520H200ZM920 440H760V520H920ZM440 760V920H520V760ZM440 40V200H520V40ZM256 650 155 747 212 806 308 706ZM748 154 651 255 704 310 805 213ZM650 704 747 805 806 748 706 652ZM154 212 255 309 310 256 213 155ZM480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Z"/></svg>
</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 id="main-content" 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"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-sm" aria-hidden="true"><path d="M313 440 537 216 480 160 160 480 480 800 537 744 313 520H800V440Z"/></svg>
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 &amp;<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>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M240 200H720Q720 200 720.0 200.0Q720 200 720 200L663 600Q663 600 663.0 600.0Q663 600 663 600H297Q297 600 297.0 600.0Q297 600 297 600L240 200Q240 200 240.0 200.0Q240 200 240 200ZM480 680Q497 680 508.5 691.5Q520 703 520 720Q520 737 508.5 748.5Q497 760 480 760Q463 760 451.5 748.5Q440 737 440 720Q440 703 451.5 691.5Q463 680 480 680ZM593 680H663Q693 680 715.0 660.0Q737 640 742 611L799 211Q804 175 780.5 147.5Q757 120 720 120H240Q203 120 179.5 147.5Q156 175 161 211L218 611Q223 640 245.0 660.0Q267 680 297 680H367Q364 690 362.0 699.5Q360 709 360 720Q360 770 395.0 805.0Q430 840 480.0 840.0Q530 840 565.0 805.0Q600 770 600 720Q600 709 598.0 699.5Q596 690 593 680ZM240 200Q240 200 240.0 200.0Q240 200 240 200Q240 200 240.0 200.0Q240 200 240 200H720Q720 200 720.0 200.0Q720 200 720 200Q720 200 720.0 200.0Q720 200 720 200Z"/></svg>
<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">~91 KB</p>
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
Total de datos transferidos en la primera visita. Medido con Digital Beacon. 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>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M440 360Q423 360 411.5 371.5Q400 383 400 400V560Q400 577 411.5 588.5Q423 600 440 600H560Q577 600 588.5 588.5Q600 577 600 560V400Q600 383 588.5 371.5Q577 360 560 360ZM460 420H540V540H460ZM160 360Q143 360 131.5 371.5Q120 383 120 400V560Q120 577 131.5 588.5Q143 600 160 600H280Q297 600 308.5 588.5Q320 577 320 560V520H260V540H180V420H260V440H320V400Q320 383 308.5 371.5Q297 360 280 360ZM680 240V340Q680 357 691.5 368.5Q703 380 720 380H800V420H680V480H820Q837 480 848.5 468.5Q860 457 860 440V380Q860 363 848.5 351.5Q837 340 820 340H740V300H860V240Z"/></svg>
<h3 class="font-bold mb-2 dark:text-white">Emisiones estimadas</h3>
<p class="text-3xl font-bold text-primary mb-2">0.028 g</p>
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
CO₂ por visita medido con Digital Beacon. Ecograder estima 0.006 g (metodología distinta). 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>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M480 160Q424 160 374.5 177.5Q325 195 284 227L228 172Q217 161 200.0 161.0Q183 161 172 172Q161 183 161.0 200.0Q161 217 172 228L227 283Q195 324 177.5 374.0Q160 424 160 480Q160 614 253.0 707.0Q346 800 480 800H800V480Q800 346 707.0 253.0Q614 160 480 160ZM480 240Q580 240 650.0 310.0Q720 380 720 480V720H480Q380 720 310.0 650.0Q240 580 240 480Q240 441 252.0 405.5Q264 370 285 341L492 548Q503 559 520.0 559.0Q537 559 548 548Q560 536 560.0 519.5Q560 503 548 491L341 284Q370 263 405.5 251.5Q441 240 480 240ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z"/></svg>
<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 compilado en lugar de CDN -->
<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">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-emerald-500" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
Tailwind CSS compilado (Build Step Asumido)
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
<strong>La optimización:</strong> Migramos de Tailwind CDN (~100 KB que compilaba las clases en el navegador del usuario en cada visita) a un build con Tailwind CLI. El CSS final minificado (`css/styles.css`) pesa en torno a 24 KB e incluye solo las clases realmente utilizadas.
</p>
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
<strong>El compromiso:</strong> Asumimos un paso de construcción (`npm run build`) y un commit que contiene tanto el CSS compilado como el legible (`css/source.css`) para que el sitio funcione directamente sin Node.js instalado. Esto sacrifica un poco de la pureza "cero build" a cambio de ahorrar ~76 KB en cada primera visita y eliminar la compilación JIT en el navegador.
</p>
</div>
<!-- Compromiso 2: Web Fonts Autoalojadas Subsetteadas + Iconos 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">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-emerald-500" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
Web Fonts Autoalojadas Subsetteadas + Iconos Self-Hosted
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
<strong>La optimización:</strong> Migramos los iconos Material Symbols a SVG inline (38 paths extraídos a icon-paths.json, ahorrando ~4 MB de font externa) y self-hosteamos las web fonts (Space Grotesk + Instrument Serif Italic) tras un subsetting agresivo que las dejó en solo ~32 KB totales para los 108 caracteres únicos que usa el sitio.
</p>
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
<strong>El impacto:</strong> Cero peticiones a Google Fonts (RGPD + soberanía), cero descarga de Material Symbols woff2 (4 MB eliminados), tipografías con kerning/ligaduras correctas en italic. Trade-off frente a system fonts: +33 KB pero conservamos la identidad visual con las cursivas dramáticas de Instrument Serif.
</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">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-sm" aria-hidden="true"><path d="M387 412 422 526 330 600H444L480 712L516 600H630L537 526L572 412L480 483ZM240 40V349Q202 391 181.0 445.0Q160 499 160 560Q160 694 253.0 787.0Q346 880 480.0 880.0Q614 880 707.0 787.0Q800 694 800 560Q800 499 779.0 445.0Q758 391 720 349V40L480 120ZM480.0 320.0Q580 320 650.0 390.0Q720 460 720.0 560.0Q720 660 650.0 730.0Q580 800 480.0 800.0Q380 800 310.0 730.0Q240 660 240.0 560.0Q240 460 310.0 390.0Q380 320 480.0 320.0ZM320 159 480 200 640 159V283Q605 263 564.5 251.5Q524 240 480.0 240.0Q436 240 395.5 251.5Q355 263 320 283ZM480 221Q480 221 480.0 221.0Q480 221 480.0 221.0Q480 221 480.0 221.0Q480 221 480 221Z"/></svg>
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"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-sm" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
Verificar Credencial
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs" aria-hidden="true"><path d="M200 120Q167 120 143.5 143.5Q120 167 120 200V760Q120 793 143.5 816.5Q167 840 200 840H480V760H200Q200 760 200.0 760.0Q200 760 200 760V200Q200 200 200.0 200.0Q200 200 200 200H760Q760 200 760.0 200.0Q760 200 760 200V480H840V200Q840 167 816.5 143.5Q793 120 760 120ZM388 332 332 388 704 760H560V840H840V560H760V704Z"/></svg>
</a>
</div>
</div>
</section>
<!-- Auditorías de Terceros -->
<section class="space-y-8 mb-20">
<div class="border-l-4 border-emerald-500 pl-6">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">Auditorías de terceros</h2>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">No nos conformamos con nuestra propia estimación: medimos con herramientas externas</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- Ecograder -->
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
<div class="flex items-start justify-between mb-3">
<div>
<div class="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">Ecograder</div>
<h3 class="font-bold text-lg dark:text-white">Score: 99/100</h3>
</div>
<span class="px-3 py-1 bg-emerald-500 text-white rounded-full text-xs font-bold">A+</span>
</div>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-slate-500 dark:text-slate-400">Page weight</span>
<span class="font-bold text-slate-900 dark:text-white">59.9 KB</span>
</div>
<div class="flex justify-between">
<span class="text-slate-500 dark:text-slate-400">Performance</span>
<span class="font-bold text-slate-900 dark:text-white">98/100</span>
</div>
<div class="flex justify-between">
<span class="text-slate-500 dark:text-slate-400">CO₂ per visit</span>
<span class="font-bold text-slate-900 dark:text-white">0.006 g</span>
</div>
<div class="flex justify-between">
<span class="text-slate-500 dark:text-slate-400">Green hosting</span>
<span class="font-bold text-emerald-500">100%</span>
</div>
</div>
<a href="https://ecograder.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 mt-4 text-xs text-emerald-600 dark:text-emerald-400 hover:underline font-bold">
Ver reporte completo
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs" aria-hidden="true"><path d="M200 120Q167 120 143.5 143.5Q120 167 120 200V760Q120 793 143.5 816.5Q167 840 200 840H480V760H200Q200 760 200.0 760.0Q200 760 200 760V200Q200 200 200.0 200.0Q200 200 200 200H760Q760 200 760.0 200.0Q760 200 760 200V480H840V200Q840 167 816.5 143.5Q793 120 760 120ZM388 332 332 388 704 760H560V840H840V560H760V704Z"/></svg>
</a>
</div>
<!-- Digital Beacon -->
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
<div class="flex items-start justify-between mb-3">
<div>
<div class="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">Digital Beacon</div>
<h3 class="font-bold text-lg dark:text-white">Score: A+</h3>
</div>
<span class="px-3 py-1 bg-emerald-500 text-white rounded-full text-xs font-bold">A+</span>
</div>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-slate-500 dark:text-slate-400">First visit CO₂</span>
<span class="font-bold text-slate-900 dark:text-white">0.028 g</span>
</div>
<div class="flex justify-between">
<span class="text-slate-500 dark:text-slate-400">First visit size</span>
<span class="font-bold text-slate-900 dark:text-white">91.18 KB</span>
</div>
<div class="flex justify-between">
<span class="text-slate-500 dark:text-slate-400">Return visit CO₂</span>
<span class="font-bold text-slate-900 dark:text-white">0.027 g</span>
</div>
<div class="flex justify-between">
<span class="text-slate-500 dark:text-slate-400">Return visit size</span>
<span class="font-bold text-slate-900 dark:text-white">87.83 KB</span>
</div>
</div>
<a href="https://digitalbeacon.co" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 mt-4 text-xs text-emerald-600 dark:text-emerald-400 hover:underline font-bold">
Ver reporte completo
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs" aria-hidden="true"><path d="M200 120Q167 120 143.5 143.5Q120 167 120 200V760Q120 793 143.5 816.5Q167 840 200 840H480V760H200Q200 760 200.0 760.0Q200 760 200 760V200Q200 200 200.0 200.0Q200 200 200 200H760Q760 200 760.0 200.0Q760 200 760 200V480H840V200Q840 167 816.5 143.5Q793 120 760 120ZM388 332 332 388 704 760H560V840H840V560H760V704Z"/></svg>
</a>
</div>
</div>
<!-- Eivissa Environmental Watch -->
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
<div class="flex items-start justify-between mb-3">
<div>
<div class="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">Proyecto relacionado: Eivissa Environmental Watch</div>
<h3 class="font-bold text-lg dark:text-white">Score: 94/100 — A+</h3>
</div>
<a href="https://www.eivissaenvironmentalwatch.es/" target="_blank" rel="noopener noreferrer" class="text-xs text-emerald-600 dark:text-emerald-400 hover:underline font-bold">
Visitar sitio →
</a>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
Mi otro proyecto soberano (clasificador de noticias ambientales con Ollama + IA local) también alcanza <strong>A+ en Ecograder</strong> con 103 KB de peso total y 0.01 g de CO₂ por visita. Mismo principio: Hetzner + sistema ligero + cero third-party tracking.
</p>
</div>
<p class="text-xs text-slate-500 dark:text-slate-400 italic">
Última medición: Julio 2026. Las herramientas usan metodologías diferentes (Sustainable Web Design v3 vs Sustainable Web Design v2 + 1Byte model), por eso los valores absolutos varían pero el grade (A+) coincide.
</p>
</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">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary/20 dark:text-primary/10 text-9xl" aria-hidden="true"><path d="M480 80Q397 80 324.0 111.5Q251 143 197.0 197.0Q143 251 111.5 324.0Q80 397 80.0 480.0Q80 563 111.5 636.0Q143 709 197.0 763.0Q251 817 324.0 848.5Q397 880 480.0 880.0Q563 880 636.0 848.5Q709 817 763.0 763.0Q817 709 848.5 636.0Q880 563 880 480V422Q880 363 839.5 321.5Q799 280 740 280Q705 280 674.0 295.0Q643 310 622 338Q593 309 556.5 294.5Q520 280 480 280Q397 280 338.5 338.5Q280 397 280 480Q280 563 338.5 621.5Q397 680 480.0 680.0Q563 680 621.5 621.5Q680 563 680 480V422Q680 396 697.0 378.0Q714 360 740 360Q766 360 783.0 378.0Q800 396 800 422V480Q800 614 707.0 707.0Q614 800 480.0 800.0Q346 800 253.0 707.0Q160 614 160.0 480.0Q160 346 253.0 253.0Q346 160 480 160H680V80ZM600 480Q600 530 565.0 565.0Q530 600 480.0 600.0Q430 600 395.0 565.0Q360 530 360 480Q360 430 395.0 395.0Q430 360 480.0 360.0Q530 360 565.0 395.0Q600 430 600 480Z"/></svg>
</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"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon " aria-hidden="true"><path d="M160 160Q127 160 103.5 183.5Q80 207 80 240V720Q80 753 103.5 776.5Q127 800 160 800H800Q833 800 856.5 776.5Q880 753 880 720V240Q880 207 856.5 183.5Q833 160 800 160ZM480 440 160 640V240Q160 240 160.0 240.0Q160 240 160 240H800Q800 240 800.0 240.0Q800 240 800 240V640ZM480 520 800 720H160ZM160 640V720V640V240Q160 240 160.0 240.0Q160 240 160 240Q160 240 160.0 240.0Q160 240 160 240Z"/></svg>
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"
aria-label="LinkedIn" title="LinkedIn"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M440 280H280Q197 280 138.5 338.5Q80 397 80.0 480.0Q80 563 138.5 621.5Q197 680 280 680H440V600H280Q230 600 195.0 565.0Q160 530 160.0 480.0Q160 430 195.0 395.0Q230 360 280 360H440ZM320 440V520H640V440ZM520 280V360H680Q730 360 765.0 395.0Q800 430 800.0 480.0Q800 530 765.0 565.0Q730 600 680 600H520V680H680Q763 680 821.5 621.5Q880 563 880.0 480.0Q880 397 821.5 338.5Q763 280 680 280Z"/></svg>
</a>
<a
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
href="https://github.com/itziarZG"
aria-label="GitHub" title="GitHub"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M680 80Q630 80 595.0 115.0Q560 150 560 200Q560 206 563 228L282 392Q266 377 245.0 368.5Q224 360 200 360Q150 360 115.0 395.0Q80 430 80.0 480.0Q80 530 115.0 565.0Q150 600 200 600Q224 600 245.0 591.5Q266 583 282 568L563 732Q561 739 560.5 745.5Q560 752 560 760Q560 810 595.0 845.0Q630 880 680 880Q730 880 765.0 845.0Q800 810 800 760Q800 710 765.0 675.0Q730 640 680 640Q656 640 635.0 648.5Q614 657 598 672L317 508Q319 501 319.5 494.5Q320 488 320 480Q320 472 319.5 465.5Q319 459 317 452L598 288Q614 303 635.0 311.5Q656 320 680 320Q730 320 765.0 285.0Q800 250 800 200Q800 150 765.0 115.0Q730 80 680 80ZM680 160Q697 160 708.5 171.5Q720 183 720 200Q720 217 708.5 228.5Q697 240 680 240Q663 240 651.5 228.5Q640 217 640 200Q640 183 651.5 171.5Q663 160 680 160ZM200 440Q217 440 228.5 451.5Q240 463 240.0 480.0Q240 497 228.5 508.5Q217 520 200 520Q183 520 171.5 508.5Q160 497 160.0 480.0Q160 463 171.5 451.5Q183 440 200 440ZM720 760Q720 777 708.5 788.5Q697 800 680 800Q663 800 651.5 788.5Q640 777 640 760Q640 743 651.5 731.5Q663 720 680.0 720.0Q697 720 708.5 731.5Q720 743 720 760ZM680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200ZM200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480ZM680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680 760Z"/></svg>
</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
>
<a
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
href="privacidad.html"
>Privacidad</a
>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Scripts -->
<script defer src="js/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink