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

feat: add Green Software Practitioner badge and update self-hosted fonts info

Browse Source
This commit is contained in:
itziarZG
2026-07-20 18:52:33 +02:00
parent 92b21eab3c
commit 1c1da7df73
2 changed files with 518 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
huella.html
+30 -18
View File
@@ -203,32 +203,44 @@
</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">
<!-- 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-amber-500">warning</span>
Google Fonts externas vs. Fuentes del Sistema
<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>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.
<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 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.
<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>
<!-- 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>
<!-- 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>