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

feat: improve SEO and accessibility

Browse Source
This commit is contained in:
itziarZG
2026-07-26 21:04:53 +02:00
parent d83ef3394b
commit 3b6352bdca
11 changed files with 563 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+37
View File
@@ -130,3 +130,40 @@
.fluid-shape {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.skip-link {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
transform: translateY(-200%);
padding: 0.75rem 1rem;
border-radius: 0.5rem;
background: #191022;
color: #ffffff;
font-weight: 700;
}
.skip-link:focus {
transform: translateY(0);
}
:focus-visible {
outline: 3px solid #8c2bee;
outline-offset: 3px;
}
:target {
scroll-margin-top: 2rem;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
huella.html
+57 -22
View File
@@ -3,7 +3,40 @@
<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>
<title>Huella ecológica web y decisiones técnicas | Itziar ZG</title>
<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>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
@@ -42,13 +75,14 @@
<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
class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50 pointer-events-none"
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
class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40 pointer-events-none"
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">
@@ -60,7 +94,7 @@
<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">
<span aria-hidden="true" class="material-symbols-outlined text-2xl">
auto_awesome
</span>
</div>
@@ -71,6 +105,7 @@
</h2>
</a>
<nav
aria-label="Navegación principal"
class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full"
>
<a
@@ -114,11 +149,11 @@
onclick="toggleTheme()"
aria-label="Toggle theme"
>
<span class="material-symbols-outlined text-xl dark:hidden">
<span aria-hidden="true" class="material-symbols-outlined text-xl dark:hidden">
dark_mode
</span>
<span
class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
aria-hidden="true" class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
>
light_mode
</span>
@@ -133,7 +168,7 @@
</header>
<!-- Main Content -->
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<main id="main-content" class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<!-- Back Link -->
<div class="mb-8">
@@ -141,7 +176,7 @@
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>
<span aria-hidden="true" class="material-symbols-outlined text-sm">arrow_back</span>
Volver al inicio
</a>
</div>
@@ -161,7 +196,7 @@
<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>
<span aria-hidden="true" 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">
@@ -172,7 +207,7 @@
<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>
<span aria-hidden="true" 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">
@@ -183,7 +218,7 @@
<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>
<span aria-hidden="true" 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">
@@ -208,7 +243,7 @@
<!-- 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>
<span aria-hidden="true" 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">
@@ -222,7 +257,7 @@
<!-- 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>
<span aria-hidden="true" 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">
@@ -237,7 +272,7 @@
<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>
<span aria-hidden="true" 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">
@@ -253,9 +288,9 @@
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>
<span aria-hidden="true" class="material-symbols-outlined text-sm">verified</span>
Verificar Credencial
<span class="material-symbols-outlined text-xs">open_in_new</span>
<span aria-hidden="true" class="material-symbols-outlined text-xs">open_in_new</span>
</a>
</div>
</div>
@@ -271,7 +306,7 @@
>
<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"
aria-hidden="true" class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
>alternate_email</span
>
</div>
@@ -292,23 +327,23 @@
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>
<span aria-hidden="true" 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"
aria-label="LinkedIn" title="LinkedIn"
>
<span class="material-symbols-outlined text-2xl">link</span>
<span aria-hidden="true" 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"
aria-label="GitHub" title="GitHub"
>
<span class="material-symbols-outlined text-2xl"
<span aria-hidden="true" class="material-symbols-outlined text-2xl"
>share</span
>
</a>
index-ca.html
+94 -52
View File
@@ -3,7 +3,36 @@
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Itziar ZG | Desenvolupament web sobirà i sostenible</title>
<title>Itziar ZG | Desenvolupament web accessible i sostenible</title>
<meta
name="description"
content="Itziar ZG desenvolupa webs front-end lleugeres, accessibles i sostenibles per a projectes amb impacte social des d'Eivissa."
/>
<meta name="robots" content="index, follow, max-image-preview:large" />
<link rel="canonical" href="https://www.itziarzameza.dev/index-ca.html" />
<meta name="theme-color" content="#f7f6f8" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="ca_ES" />
<meta property="og:title" content="Itziar ZG | Desenvolupament web accessible i sostenible" />
<meta property="og:description" content="Desenvolupament front-end lleuger, accessible i sobirà per a projectes amb impacte social." />
<meta property="og:url" content="https://www.itziarzameza.dev/index-ca.html" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Itziar ZG | Desenvolupament web accessible i sostenible" />
<meta name="twitter:description" content="Desenvolupament front-end lleuger, accessible i sobirà per a projectes amb impacte social." />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Itziar Zameza García",
"url": "https://www.itziarzameza.dev/",
"jobTitle": "Desenvolupadora front-end",
"description": "Desenvolupadora front-end especialitzada en tecnologia lleugera, accessible i sobirana.",
"email": "mailto:itziar.zameza.dev@gmail.com",
"sameAs": [
"https://www.linkedin.com/in/itziarzamezagarcia"
]
}
</script>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
@@ -44,6 +73,11 @@
hreflang="en"
href="https://www.itziarzameza.dev/index-en.html"
/>
<link
rel="alternate"
hreflang="x-default"
href="https://www.itziarzameza.dev/index.html"
/>
<link
rel="preload"
href="fonts/material-symbols-outlined.woff2"
@@ -69,13 +103,14 @@
<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">Salta al contingut principal</a>
<div class="relative min-h-screen overflow-hidden iridescent-bg">
<!-- Floating Fluid Shapes -->
<div
class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
aria-hidden="true" class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
></div>
<div
class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40"
aria-hidden="true" class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40"
></div>
<div class="layout-container flex h-full grow flex-col relative z-10">
<!-- Navigation -->
@@ -95,11 +130,12 @@
</h2>
</div>
<nav
aria-label="Navegació 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="#"
href="#main-content"
>Inici</a
>
<a
@@ -150,11 +186,11 @@
onclick="toggleTheme()"
aria-label="Toggle theme"
>
<span class="material-symbols-outlined text-xl dark:hidden">
<span aria-hidden="true" class="material-symbols-outlined text-xl dark:hidden">
dark_mode
</span>
<span
class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
aria-hidden="true" class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
>
light_mode
</span>
@@ -170,6 +206,7 @@
<!-- Hero Section -->
<main
id="main-content"
class="mx-auto max-w-6xl px-6 pt-16 pb-24 md:pt-24 flex flex-col items-center text-center"
>
<div
@@ -214,7 +251,7 @@
class="mt-20 w-full max-w-5xl aspect-[21/9] rounded-3xl overflow-hidden glass border-4 border-white/50 dark:border-white/20 relative"
>
<div
class="absolute inset-0 bg-cover bg-center"
aria-hidden="true" class="absolute inset-0 bg-cover bg-center"
data-alt="Abstract soft purple and pink liquid gradients flowing"
style="
background-image: url(&quot;https://lh3.googleusercontent.com/aida-public/AB6AXuD7jcnN_wxvIYoIUzW4qcK4CoDUZZZNjygy4of13sQuWzPdhmFyLBcD-uo94oXDghcnd1bXI9F8yApHPlBJmTsrsoHrDT7H4NcX0Qv3QSCb8qwZgJV6iPJuI1LjVxfxuJBeaAy9X3nHgeacqLeAJkbb0DQg9-LxVDUdgZUABcx65AW1k59FXjFiuf2K2BAop_ki74vQZC0gsddWQbM6TmU--QLahcLkY54YobaPZeL_Fgh0veydf7Wh7pKAT4s6RFcMDKH0w4Ova98&quot;);
@@ -240,7 +277,7 @@
<div class="grid md:grid-cols-2 gap-12 mb-16">
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
<span aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>target</span
>
<h3
@@ -258,7 +295,7 @@
</div>
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
<span aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>explore</span
>
<h3
@@ -293,7 +330,7 @@
<div
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
>
<span class="material-symbols-outlined">eco</span>
<span aria-hidden="true" class="material-symbols-outlined">eco</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Sostenibilitat (Green Software)
@@ -312,11 +349,11 @@
rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
>
<span class="material-symbols-outlined text-base"
<span aria-hidden="true" class="material-symbols-outlined text-base"
>verified</span
>
<span>Green Software Practitioner</span>
<span class="material-symbols-outlined text-xs ml-auto"
<span aria-hidden="true" class="material-symbols-outlined text-xs ml-auto"
>open_in_new</span
>
</a>
@@ -329,7 +366,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">folder_open</span>
<span aria-hidden="true" class="material-symbols-outlined">folder_open</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Programari Lliure
@@ -350,7 +387,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">groups</span>
<span aria-hidden="true" class="material-symbols-outlined">groups</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">Bé Comú</h4>
<p
@@ -369,7 +406,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined"
<span aria-hidden="true" class="material-symbols-outlined"
>accessibility_new</span
>
</div>
@@ -392,7 +429,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">shield</span>
<span aria-hidden="true" class="material-symbols-outlined">shield</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Privacitat
@@ -413,7 +450,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">psychology</span>
<span aria-hidden="true" class="material-symbols-outlined">psychology</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
IA Responsable
@@ -447,29 +484,31 @@
<!-- Tab Buttons Container -->
<div
role="tablist"
aria-label="Seccions del laboratori"
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
role="tab" aria-selected="true" type="button" id="tab-infraestructura-button" aria-controls="tab-infraestructura" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
data-tab="infraestructura"
>
Infraestructura
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="experimentos"
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
id="tab-experimentos-button" aria-controls="tab-experimentos" data-tab="experimentos"
>
Experiments
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="proyectos"
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
id="tab-proyectos-button" aria-controls="tab-proyectos" data-tab="proyectos"
>
Projectes
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="writing"
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
id="tab-writing-button" aria-controls="tab-writing" data-tab="writing"
>
Notes
</button>
@@ -478,7 +517,7 @@
<!-- Tab Contents -->
<div id="tab-contents">
<!-- Tab 1: Infraestructura -->
<div id="tab-infraestructura" class="tab-pane block">
<div id="tab-infraestructura" class="tab-pane block" role="tabpanel" aria-labelledby="tab-infraestructura-button" aria-hidden="false">
<div class="grid md:grid-cols-2 gap-8">
<div class="space-y-6">
<h3 class="text-2xl font-serif italic dark:text-white">
@@ -498,7 +537,7 @@
<div
class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2"
>
<span class="material-symbols-outlined">bolt</span>
<span aria-hidden="true" class="material-symbols-outlined">bolt</span>
<span>Compromís Verd</span>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">
@@ -512,7 +551,7 @@
<div class="grid grid-cols-2 gap-4">
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>dns</span
>
<h4 class="font-bold dark:text-white">
@@ -527,7 +566,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>deployed_code</span
>
<h4 class="font-bold dark:text-white">Coolify</h4>
@@ -539,7 +578,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>git_gesture</span
>
<h4 class="font-bold dark:text-white">Forgejo</h4>
@@ -552,7 +591,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>hub</span
>
<h4 class="font-bold dark:text-white">n8n</h4>
@@ -565,7 +604,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>monitoring</span
>
<h4 class="font-bold dark:text-white">Umami</h4>
@@ -578,7 +617,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>screen_record</span
>
<h4 class="font-bold dark:text-white">Cap</h4>
@@ -594,14 +633,14 @@
</div>
<!-- Tab 2: Experiments -->
<div id="tab-experimentos" class="tab-pane hidden">
<div id="tab-experimentos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-experimentos-button" aria-hidden="true">
<div class="grid md:grid-cols-3 gap-6">
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>nest_eco_leaf</span
>
<span
@@ -625,7 +664,7 @@
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>memory</span
>
<span
@@ -649,7 +688,7 @@
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>visibility</span
>
<span
@@ -672,7 +711,7 @@
</div>
<!-- Tab 3: Projectes -->
<div id="tab-proyectos" class="tab-pane hidden">
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
<!-- Eines Reals -->
<div class="mb-12">
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
@@ -686,7 +725,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>music_note</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -712,7 +751,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>route</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -745,7 +784,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>volunteer_activism</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -771,7 +810,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -804,7 +843,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -845,7 +884,7 @@
class="flex items-center gap-2 hover:text-primary transition-colors"
>
<span
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
aria-hidden="true" class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
>chevron_right</span
>
Treball Anterior (Projectes d'IA comercial)
@@ -914,7 +953,7 @@
</div>
<!-- Tab 4: Writing -->
<div id="tab-writing" class="tab-pane hidden">
<div id="tab-writing" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-writing-button" aria-hidden="true">
<div class="max-w-2xl mx-auto space-y-8">
<p
class="text-slate-600 dark:text-slate-400 italic text-center text-sm"
@@ -935,7 +974,7 @@
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full flex items-center gap-1"
>
<span class="material-symbols-outlined text-xs"
<span aria-hidden="true" class="material-symbols-outlined text-xs"
>verified</span
>
Green Software
@@ -1078,7 +1117,7 @@
class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
>
Llegir article complet a la secció Emprenta
<span class="material-symbols-outlined text-xs"
<span aria-hidden="true" class="material-symbols-outlined text-xs"
>arrow_right_alt</span
>
</a>
@@ -1105,7 +1144,7 @@
>
<div class="absolute top-0 right-0 p-8">
<span
class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
aria-hidden="true" class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
>alternate_email</span
>
</div>
@@ -1128,23 +1167,23 @@
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.dev@gmail.com"
>
<span class="material-symbols-outlined">mail</span>
<span aria-hidden="true" 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"
aria-label="LinkedIn" title="LinkedIn"
>
<span class="material-symbols-outlined text-2xl">link</span>
<span aria-hidden="true" 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"
aria-label="GitHub" title="GitHub"
>
<span class="material-symbols-outlined text-2xl"
<span aria-hidden="true" class="material-symbols-outlined text-2xl"
>share</span
>
</a> -->
@@ -1180,6 +1219,7 @@
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-labelledby="project-1-modal-title"
onclick="closeModal('project-1')"
>
@@ -1291,6 +1331,7 @@
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-labelledby="project-2-modal-title"
onclick="closeModal('project-2')"
>
@@ -1414,6 +1455,7 @@
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-labelledby="project-3-modal-title"
onclick="closeModal('project-3')"
>
index-en.html
+93 -51
View File
@@ -3,7 +3,36 @@
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Itziar ZG | Sovereign &amp; Sustainable Web Development</title>
<title>Itziar ZG | Accessible &amp; Sustainable Web Development</title>
<meta
name="description"
content="Itziar ZG builds lightweight, accessible and sustainable front-end websites for socially impactful projects from Ibiza."
/>
<meta name="robots" content="index, follow, max-image-preview:large" />
<link rel="canonical" href="https://www.itziarzameza.dev/index-en.html" />
<meta name="theme-color" content="#f7f6f8" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_GB" />
<meta property="og:title" content="Itziar ZG | Accessible &amp; Sustainable Web Development" />
<meta property="og:description" content="Lightweight, accessible and sovereign front-end development for socially impactful projects." />
<meta property="og:url" content="https://www.itziarzameza.dev/index-en.html" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Itziar ZG | Accessible &amp; Sustainable Web Development" />
<meta name="twitter:description" content="Lightweight, accessible and sovereign front-end development for socially impactful projects." />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Itziar Zameza García",
"url": "https://www.itziarzameza.dev/",
"jobTitle": "Front-end developer",
"description": "Front-end developer specialized in lightweight, accessible and sovereign technology.",
"email": "mailto:itziar.zameza.dev@gmail.com",
"sameAs": [
"https://www.linkedin.com/in/itziarzamezagarcia"
]
}
</script>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
@@ -44,6 +73,11 @@
hreflang="en"
href="https://www.itziarzameza.dev/index-en.html"
/>
<link
rel="alternate"
hreflang="x-default"
href="https://www.itziarzameza.dev/index.html"
/>
<link
rel="preload"
href="fonts/material-symbols-outlined.woff2"
@@ -69,13 +103,14 @@
<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">Skip to main content</a>
<div class="relative min-h-screen overflow-hidden iridescent-bg">
<!-- Floating Fluid Shapes -->
<div
class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
aria-hidden="true" class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
></div>
<div
class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40"
aria-hidden="true" class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40"
></div>
<div class="layout-container flex h-full grow flex-col relative z-10">
<!-- Navigation -->
@@ -95,11 +130,12 @@
</h2>
</div>
<nav
aria-label="Main navigation"
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="#"
href="#main-content"
>Home</a
>
<a
@@ -150,11 +186,11 @@
onclick="toggleTheme()"
aria-label="Toggle theme"
>
<span class="material-symbols-outlined text-xl dark:hidden">
<span aria-hidden="true" class="material-symbols-outlined text-xl dark:hidden">
dark_mode
</span>
<span
class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
aria-hidden="true" class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
>
light_mode
</span>
@@ -170,6 +206,7 @@
<!-- Hero Section -->
<main
id="main-content"
class="mx-auto max-w-6xl px-6 pt-16 pb-24 md:pt-24 flex flex-col items-center text-center"
>
<div
@@ -214,7 +251,7 @@
class="mt-20 w-full max-w-5xl aspect-[21/9] rounded-3xl overflow-hidden glass border-4 border-white/50 dark:border-white/20 relative"
>
<div
class="absolute inset-0 bg-cover bg-center"
aria-hidden="true" class="absolute inset-0 bg-cover bg-center"
data-alt="Abstract soft purple and pink liquid gradients flowing"
style="
background-image: url(&quot;https://lh3.googleusercontent.com/aida-public/AB6AXuD7jcnN_wxvIYoIUzW4qcK4CoDUZZZNjygy4of13sQuWzPdhmFyLBcD-uo94oXDghcnd1bXI9F8yApHPlBJmTsrsoHrDT7H4NcX0Qv3QSCb8qwZgJV6iPJuI1LjVxfxuJBeaAy9X3nHgeacqLeAJkbb0DQg9-LxVDUdgZUABcx65AW1k59FXjFiuf2K2BAop_ki74vQZC0gsddWQbM6TmU--QLahcLkY54YobaPZeL_Fgh0veydf7Wh7pKAT4s6RFcMDKH0w4Ova98&quot;);
@@ -241,7 +278,7 @@
<div class="grid md:grid-cols-2 gap-12 mb-16">
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
<span aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>target</span
>
<h3
@@ -259,7 +296,7 @@
</div>
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
<span aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>explore</span
>
<h3
@@ -293,7 +330,7 @@
<div
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
>
<span class="material-symbols-outlined">eco</span>
<span aria-hidden="true" class="material-symbols-outlined">eco</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Sustainability (Green Software)
@@ -311,11 +348,11 @@
rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
>
<span class="material-symbols-outlined text-base"
<span aria-hidden="true" class="material-symbols-outlined text-base"
>verified</span
>
<span>Green Software Practitioner</span>
<span class="material-symbols-outlined text-xs ml-auto"
<span aria-hidden="true" class="material-symbols-outlined text-xs ml-auto"
>open_in_new</span
>
</a>
@@ -328,7 +365,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">folder_open</span>
<span aria-hidden="true" class="material-symbols-outlined">folder_open</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Free &amp; Open Source Software
@@ -348,7 +385,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">groups</span>
<span aria-hidden="true" class="material-symbols-outlined">groups</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Common Good
@@ -369,7 +406,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined"
<span aria-hidden="true" class="material-symbols-outlined"
>accessibility_new</span
>
</div>
@@ -392,7 +429,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">shield</span>
<span aria-hidden="true" class="material-symbols-outlined">shield</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">Privacy</h4>
<p
@@ -411,7 +448,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">psychology</span>
<span aria-hidden="true" class="material-symbols-outlined">psychology</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Responsible AI
@@ -444,29 +481,31 @@
<!-- Tab Buttons Container -->
<div
role="tablist"
aria-label="Laboratory sections"
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
role="tab" aria-selected="true" type="button" id="tab-infraestructura-button" aria-controls="tab-infraestructura" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
data-tab="infraestructura"
>
Infrastructure
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="experimentos"
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
id="tab-experimentos-button" aria-controls="tab-experimentos" data-tab="experimentos"
>
Experiments
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="proyectos"
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
id="tab-proyectos-button" aria-controls="tab-proyectos" data-tab="proyectos"
>
Projects
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="writing"
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
id="tab-writing-button" aria-controls="tab-writing" data-tab="writing"
>
Notes
</button>
@@ -475,7 +514,7 @@
<!-- Tab Contents -->
<div id="tab-contents">
<!-- Tab 1: Infrastructure -->
<div id="tab-infraestructura" class="tab-pane block">
<div id="tab-infraestructura" class="tab-pane block" role="tabpanel" aria-labelledby="tab-infraestructura-button" aria-hidden="false">
<div class="grid md:grid-cols-2 gap-8">
<div class="space-y-6">
<h3 class="text-2xl font-serif italic dark:text-white">
@@ -495,7 +534,7 @@
<div
class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2"
>
<span class="material-symbols-outlined">bolt</span>
<span aria-hidden="true" class="material-symbols-outlined">bolt</span>
<span>Green Commitment</span>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">
@@ -508,7 +547,7 @@
<div class="grid grid-cols-2 gap-4">
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>dns</span
>
<h4 class="font-bold dark:text-white">
@@ -523,7 +562,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>deployed_code</span
>
<h4 class="font-bold dark:text-white">Coolify</h4>
@@ -535,7 +574,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>git_gesture</span
>
<h4 class="font-bold dark:text-white">Forgejo</h4>
@@ -548,7 +587,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>hub</span
>
<h4 class="font-bold dark:text-white">n8n</h4>
@@ -560,7 +599,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>monitoring</span
>
<h4 class="font-bold dark:text-white">Umami</h4>
@@ -575,14 +614,14 @@
</div>
<!-- Tab 2: Experiments -->
<div id="tab-experimentos" class="tab-pane hidden">
<div id="tab-experimentos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-experimentos-button" aria-hidden="true">
<div class="grid md:grid-cols-3 gap-6">
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>nest_eco_leaf</span
>
<span
@@ -606,7 +645,7 @@
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>memory</span
>
<span
@@ -630,7 +669,7 @@
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>visibility</span
>
<span
@@ -653,7 +692,7 @@
</div>
<!-- Tab 3: Projects -->
<div id="tab-proyectos" class="tab-pane hidden">
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
<!-- Herramientas Reales -->
<div class="mb-12">
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
@@ -667,7 +706,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>music_note</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -693,7 +732,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>route</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -726,7 +765,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>volunteer_activism</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -752,7 +791,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -785,7 +824,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -826,7 +865,7 @@
class="flex items-center gap-2 hover:text-primary transition-colors"
>
<span
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
aria-hidden="true" class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
>chevron_right</span
>
Previous Work (Commercial &amp; AI Projects)
@@ -894,7 +933,7 @@
</div>
<!-- Tab 4: Writing -->
<div id="tab-writing" class="tab-pane hidden">
<div id="tab-writing" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-writing-button" aria-hidden="true">
<div class="max-w-2xl mx-auto space-y-8">
<p
class="text-slate-600 dark:text-slate-400 italic text-center text-sm"
@@ -915,7 +954,7 @@
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full flex items-center gap-1"
>
<span class="material-symbols-outlined text-xs"
<span aria-hidden="true" class="material-symbols-outlined text-xs"
>verified</span
>
Green Software
@@ -1058,7 +1097,7 @@
class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
>
Read full article in Footprint section
<span class="material-symbols-outlined text-xs"
<span aria-hidden="true" class="material-symbols-outlined text-xs"
>arrow_right_alt</span
>
</a>
@@ -1085,7 +1124,7 @@
>
<div class="absolute top-0 right-0 p-8">
<span
class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
aria-hidden="true" class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
>alternate_email</span
>
</div>
@@ -1108,23 +1147,23 @@
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.dev@gmail.com"
>
<span class="material-symbols-outlined">mail</span>
<span aria-hidden="true" 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"
aria-label="LinkedIn" title="LinkedIn"
>
<span class="material-symbols-outlined text-2xl">link</span>
<span aria-hidden="true" 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"
aria-label="GitHub" title="GitHub"
>
<span class="material-symbols-outlined text-2xl"
<span aria-hidden="true" class="material-symbols-outlined text-2xl"
>share</span
>
</a> -->
@@ -1160,6 +1199,7 @@
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-labelledby="project-1-modal-title"
onclick="closeModal('project-1')"
>
@@ -1270,6 +1310,7 @@
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-labelledby="project-2-modal-title"
onclick="closeModal('project-2')"
>
@@ -1390,6 +1431,7 @@
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-labelledby="project-3-modal-title"
onclick="closeModal('project-3')"
>
index.html
+94 -52
View File
@@ -3,7 +3,36 @@
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Itziar ZG | Desarrollo web soberano y sostenible</title>
<title>Itziar ZG | Desarrollo web accesible y sostenible</title>
<meta
name="description"
content="Itziar ZG desarrolla webs front-end ligeras, accesibles y sostenibles para proyectos con impacto social desde Ibiza."
/>
<meta name="robots" content="index, follow, max-image-preview:large" />
<link rel="canonical" href="https://www.itziarzameza.dev/index.html" />
<meta name="theme-color" content="#f7f6f8" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="es_ES" />
<meta property="og:title" content="Itziar ZG | Desarrollo web accesible y sostenible" />
<meta property="og:description" content="Desarrollo front-end ligero, accesible y soberano para proyectos con impacto social." />
<meta property="og:url" content="https://www.itziarzameza.dev/index.html" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Itziar ZG | Desarrollo web accesible y sostenible" />
<meta name="twitter:description" content="Desarrollo front-end ligero, accesible y soberano para proyectos con impacto social." />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Itziar Zameza García",
"url": "https://www.itziarzameza.dev/",
"jobTitle": "Desarrolladora front-end",
"description": "Desarrolladora front-end especializada en tecnología ligera, accesible y soberana.",
"email": "mailto:itziar.zameza.dev@gmail.com",
"sameAs": [
"https://www.linkedin.com/in/itziarzamezagarcia"
]
}
</script>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
@@ -44,6 +73,11 @@
hreflang="en"
href="https://www.itziarzameza.dev/index-en.html"
/>
<link
rel="alternate"
hreflang="x-default"
href="https://www.itziarzameza.dev/index.html"
/>
<link
rel="preload"
href="fonts/material-symbols-outlined.woff2"
@@ -69,13 +103,14 @@
<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">
<!-- Floating Fluid Shapes -->
<div
class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
aria-hidden="true" class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
></div>
<div
class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40"
aria-hidden="true" class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40"
></div>
<div class="layout-container flex h-full grow flex-col relative z-10">
<!-- Navigation -->
@@ -86,7 +121,7 @@
<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">
<span aria-hidden="true" class="material-symbols-outlined text-2xl">
auto_awesome
</span>
</div>
@@ -97,11 +132,12 @@
</h2>
</div>
<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="#"
href="#main-content"
>Inicio</a
>
<a
@@ -152,11 +188,11 @@
onclick="toggleTheme()"
aria-label="Toggle theme"
>
<span class="material-symbols-outlined text-xl dark:hidden">
<span aria-hidden="true" class="material-symbols-outlined text-xl dark:hidden">
dark_mode
</span>
<span
class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
aria-hidden="true" class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
>
light_mode
</span>
@@ -172,6 +208,7 @@
<!-- Hero Section -->
<main
id="main-content"
class="mx-auto max-w-6xl px-6 pt-16 pb-24 md:pt-24 flex flex-col items-center text-center"
>
<div
@@ -222,7 +259,7 @@
class="mt-20 w-full max-w-5xl aspect-[21/9] rounded-3xl overflow-hidden glass border-4 border-white/50 dark:border-white/20 relative"
>
<div
class="absolute inset-0 bg-cover bg-center"
aria-hidden="true" class="absolute inset-0 bg-cover bg-center"
data-alt="Abstract soft purple and pink liquid gradients flowing"
style="
background-image: url(&quot;https://lh3.googleusercontent.com/aida-public/AB6AXuD7jcnN_wxvIYoIUzW4qcK4CoDUZZZNjygy4of13sQuWzPdhmFyLBcD-uo94oXDghcnd1bXI9F8yApHPlBJmTsrsoHrDT7H4NcX0Qv3QSCb8qwZgJV6iPJuI1LjVxfxuJBeaAy9X3nHgeacqLeAJkbb0DQg9-LxVDUdgZUABcx65AW1k59FXjFiuf2K2BAop_ki74vQZC0gsddWQbM6TmU--QLahcLkY54YobaPZeL_Fgh0veydf7Wh7pKAT4s6RFcMDKH0w4Ova98&quot;);
@@ -249,7 +286,7 @@
<div class="grid md:grid-cols-2 gap-12 mb-16">
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
<span aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>target</span
>
<h3
@@ -267,7 +304,7 @@
</div>
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
<span aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>explore</span
>
<h3
@@ -302,7 +339,7 @@
<div
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
>
<span class="material-symbols-outlined">eco</span>
<span aria-hidden="true" class="material-symbols-outlined">eco</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Sostenibilidad (Green Software)
@@ -321,11 +358,11 @@
rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
>
<span class="material-symbols-outlined text-base"
<span aria-hidden="true" class="material-symbols-outlined text-base"
>verified</span
>
<span>Green Software Practitioner</span>
<span class="material-symbols-outlined text-xs ml-auto"
<span aria-hidden="true" class="material-symbols-outlined text-xs ml-auto"
>open_in_new</span
>
</a>
@@ -338,7 +375,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">folder_open</span>
<span aria-hidden="true" class="material-symbols-outlined">folder_open</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Software Libre
@@ -359,7 +396,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">groups</span>
<span aria-hidden="true" class="material-symbols-outlined">groups</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Bien Común
@@ -380,7 +417,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined"
<span aria-hidden="true" class="material-symbols-outlined"
>accessibility_new</span
>
</div>
@@ -403,7 +440,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">shield</span>
<span aria-hidden="true" class="material-symbols-outlined">shield</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Privacidad
@@ -424,7 +461,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">psychology</span>
<span aria-hidden="true" class="material-symbols-outlined">psychology</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
IA Responsable
@@ -458,29 +495,31 @@
<!-- Tab Buttons Container -->
<div
role="tablist"
aria-label="Secciones del laboratorio"
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
role="tab" aria-selected="true" type="button" id="tab-infraestructura-button" aria-controls="tab-infraestructura" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
data-tab="infraestructura"
>
Infraestructura
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="experimentos"
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
id="tab-experimentos-button" aria-controls="tab-experimentos" data-tab="experimentos"
>
Experimentos
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="proyectos"
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
id="tab-proyectos-button" aria-controls="tab-proyectos" data-tab="proyectos"
>
Proyectos
</button>
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="writing"
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
id="tab-writing-button" aria-controls="tab-writing" data-tab="writing"
>
Notes
</button>
@@ -489,7 +528,7 @@
<!-- Tab Contents -->
<div id="tab-contents">
<!-- Tab 1: Infraestructura -->
<div id="tab-infraestructura" class="tab-pane block">
<div id="tab-infraestructura" class="tab-pane block" role="tabpanel" aria-labelledby="tab-infraestructura-button" aria-hidden="false">
<div class="grid md:grid-cols-2 gap-8">
<div class="space-y-6">
<h3 class="text-2xl font-serif italic dark:text-white">
@@ -509,7 +548,7 @@
<div
class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2"
>
<span class="material-symbols-outlined">bolt</span>
<span aria-hidden="true" class="material-symbols-outlined">bolt</span>
<span>Compromiso Verde</span>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">
@@ -522,7 +561,7 @@
<div class="grid grid-cols-2 gap-4">
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>dns</span
>
<h4 class="font-bold dark:text-white">
@@ -537,7 +576,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>deployed_code</span
>
<h4 class="font-bold dark:text-white">Coolify</h4>
@@ -550,7 +589,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>git_gesture</span
>
<h4 class="font-bold dark:text-white">Forgejo</h4>
@@ -563,7 +602,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>hub</span
>
<h4 class="font-bold dark:text-white">n8n</h4>
@@ -576,7 +615,7 @@
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl mb-3 block"
>monitoring</span
>
<h4 class="font-bold dark:text-white">Umami</h4>
@@ -592,14 +631,14 @@
</div>
<!-- Tab 2: Experimentos -->
<div id="tab-experimentos" class="tab-pane hidden">
<div id="tab-experimentos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-experimentos-button" aria-hidden="true">
<div class="grid md:grid-cols-3 gap-6">
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>nest_eco_leaf</span
>
<span
@@ -623,7 +662,7 @@
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>memory</span
>
<span
@@ -647,7 +686,7 @@
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-3xl"
>visibility</span
>
<span
@@ -670,7 +709,7 @@
</div>
<!-- Tab 3: Proyectos -->
<div id="tab-proyectos" class="tab-pane hidden">
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
<!-- Herramientas Reales -->
<div class="mb-12">
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
@@ -684,7 +723,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>music_note</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -710,7 +749,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>route</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -743,7 +782,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>volunteer_activism</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -769,7 +808,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -802,7 +841,7 @@
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
aria-hidden="true" class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
@@ -843,7 +882,7 @@
class="flex items-center gap-2 hover:text-primary transition-colors"
>
<span
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
aria-hidden="true" class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
>chevron_right</span
>
Trabajo Anterior (Proyectos e IA comercial)
@@ -912,7 +951,7 @@
</div>
<!-- Tab 4: Writing -->
<div id="tab-writing" class="tab-pane hidden">
<div id="tab-writing" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-writing-button" aria-hidden="true">
<div class="max-w-2xl mx-auto space-y-8">
<p
class="text-slate-600 dark:text-slate-400 italic text-center text-sm"
@@ -933,7 +972,7 @@
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full flex items-center gap-1"
>
<span class="material-symbols-outlined text-xs"
<span aria-hidden="true" class="material-symbols-outlined text-xs"
>verified</span
>
Green Software
@@ -1074,7 +1113,7 @@
class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
>
Leer artículo completo en la sección Huella
<span class="material-symbols-outlined text-xs"
<span aria-hidden="true" class="material-symbols-outlined text-xs"
>arrow_right_alt</span
>
</a>
@@ -1100,7 +1139,7 @@
>
<div class="absolute top-0 right-0 p-8">
<span
class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
aria-hidden="true" class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
>alternate_email</span
>
</div>
@@ -1123,23 +1162,23 @@
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.dev@gmail.com"
>
<span class="material-symbols-outlined">mail</span>
<span aria-hidden="true" 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"
aria-label="LinkedIn" title="LinkedIn"
>
<span class="material-symbols-outlined text-2xl">link</span>
<span aria-hidden="true" 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"
aria-label="GitHub" title="GitHub"
>
<span class="material-symbols-outlined text-2xl"
<span aria-hidden="true" class="material-symbols-outlined text-2xl"
>share</span
>
</a> -->
@@ -1175,6 +1214,7 @@
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-labelledby="project-1-modal-title"
onclick="closeModal('project-1')"
>
@@ -1286,6 +1326,7 @@
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-labelledby="project-2-modal-title"
onclick="closeModal('project-2')"
>
@@ -1409,6 +1450,7 @@
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-labelledby="project-3-modal-title"
onclick="closeModal('project-3')"
>
js/main.js
+74 -30
View File
@@ -6,13 +6,25 @@
* Initialize theme on page load
* Checks localStorage for saved preference, falls back to light mode
*/
function updateThemeControl(isDark) {
const themeToggle = document.getElementById("theme-toggle");
if (!themeToggle) return;
const language = document.documentElement.lang;
const labels = {
es: ["Activar modo claro", "Activar modo oscuro"],
ca: ["Activar el mode clar", "Activar el mode fosc"],
en: ["Enable light mode", "Enable dark mode"],
};
const currentLabels = labels[language] || labels.es;
themeToggle.setAttribute("aria-pressed", String(isDark));
themeToggle.setAttribute("aria-label", isDark ? currentLabels[0] : currentLabels[1]);
}
function initTheme() {
const savedTheme = localStorage.getItem("theme") || "light";
if (savedTheme === "dark") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
const isDark = savedTheme === "dark";
document.documentElement.classList.toggle("dark", isDark);
updateThemeControl(isDark);
}
/**
@@ -21,13 +33,10 @@ function initTheme() {
*/
function toggleTheme() {
const html = document.documentElement;
if (html.classList.contains("dark")) {
html.classList.remove("dark");
localStorage.setItem("theme", "light");
} else {
html.classList.add("dark");
localStorage.setItem("theme", "dark");
}
const isDark = !html.classList.contains("dark");
html.classList.toggle("dark", isDark);
localStorage.setItem("theme", isDark ? "dark" : "light");
updateThemeControl(isDark);
}
// ============================================
@@ -71,9 +80,9 @@ function openModal(projectId) {
if (modal) {
_modalPreviousFocus = document.activeElement;
modal.classList.remove("hidden");
modal.setAttribute("aria-hidden", "false");
document.body.style.overflow = "hidden";
// Move focus to the first focusable element inside the modal
const focusable = modal.querySelectorAll(
'button, [href], input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])'
);
@@ -95,9 +104,9 @@ function closeModal(projectId) {
const modal = document.getElementById(projectId + "-modal");
if (modal) {
modal.classList.add("hidden");
modal.setAttribute("aria-hidden", "true");
document.body.style.overflow = "auto";
// Return focus to the element that triggered the modal
if (_modalPreviousFocus) {
_modalPreviousFocus.focus();
_modalPreviousFocus = null;
@@ -120,25 +129,42 @@ function initTabs() {
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");
tabButtons.forEach((tabButton) => {
const selected = tabButton === btn;
tabButton.setAttribute("aria-selected", String(selected));
tabButton.tabIndex = selected ? 0 : -1;
tabButton.classList.toggle("bg-primary", selected);
tabButton.classList.toggle("text-white", selected);
tabButton.classList.toggle("shadow-md", selected);
tabButton.classList.toggle("shadow-primary/25", selected);
tabButton.classList.toggle("text-slate-600", !selected);
tabButton.classList.toggle("dark:text-slate-400", !selected);
tabButton.classList.toggle("hover:bg-slate-100", !selected);
tabButton.classList.toggle("dark:hover:bg-white/5", !selected);
});
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");
}
const selected = pane.id === `tab-${targetTab}`;
pane.classList.toggle("hidden", !selected);
pane.classList.toggle("block", selected);
pane.setAttribute("aria-hidden", String(!selected));
});
});
btn.addEventListener("keydown", (event) => {
if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
event.preventDefault();
const currentIndex = Array.from(tabButtons).indexOf(btn);
const direction = event.key === "ArrowRight" ? 1 : -1;
const nextIndex = (currentIndex + direction + tabButtons.length) % tabButtons.length;
tabButtons[nextIndex].focus();
tabButtons[nextIndex].click();
});
});
const selectedTab = document.querySelector('.tab-btn[aria-selected="true"]');
tabButtons.forEach((btn) => {
btn.tabIndex = btn === selectedTab ? 0 : -1;
});
}
@@ -150,12 +176,30 @@ function initTabs() {
* Close modal when ESC key is pressed
*/
document.addEventListener("keydown", function (event) {
const modal = document.querySelector('[id$="-modal"]:not(.hidden)');
if (modal && event.key === "Tab") {
const focusable = Array.from(modal.querySelectorAll(
'button, [href], input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])'
));
if (focusable.length > 0) {
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first.focus();
}
}
}
if (event.key === "Escape") {
const modals = document.querySelectorAll(
'[id$="-modal"]:not(.hidden)'
);
modals.forEach((modal) => {
const projectId = modal.id.replace("-modal", "");
modals.forEach((openModalElement) => {
const projectId = openModalElement.id.replace("-modal", "");
closeModal(projectId);
});
}
privacidad-ca.html
+24 -10
View File
@@ -3,7 +3,19 @@
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Política de Privacitat | Itziar ZG</title>
<title>Política de privacitat | Itziar ZG</title>
<meta
name="description"
content="Política de privacitat d'Itziar ZG: analítica sense cookies, dades tractades, drets RGPD i mesures de protecció."
/>
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<meta name="theme-color" content="#f7f6f8" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="ca_ES" />
<meta property="og:title" content="Política de privacitat | Itziar ZG" />
<meta property="og:description" content="Informació sobre el tractament de dades i els drets RGPD en aquest lloc web." />
<meta property="og:url" content="https://www.itziarzameza.dev/privacidad-ca.html" />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
@@ -32,6 +44,7 @@
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
<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" />
@@ -43,19 +56,20 @@
></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">Salta al contingut principal</a>
<div class="relative min-h-screen overflow-hidden iridescent-bg flex flex-col justify-between">
<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 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">
<header class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between">
<a href="index-ca.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>
<span aria-hidden="true" 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">
<nav aria-label="Navegació 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-ca.html">Inici</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-ca.html#manifiesto">Manifest</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-ca.html#laboratori">Laboratori</a>
@@ -71,8 +85,8 @@
<a href="privacidad-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>
<span aria-hidden="true" class="material-symbols-outlined text-xl dark:hidden">dark_mode</span>
<span aria-hidden="true" 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-ca.html#contact">
Parlem
@@ -80,10 +94,10 @@
</div>
</header>
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<main id="main-content" class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<div class="mb-8">
<a href="index-ca.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>
<span aria-hidden="true" class="material-symbols-outlined text-sm">arrow_back</span>
Tornar a l'inici
</a>
</div>
@@ -193,7 +207,7 @@
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">8. Cookies</h2>
</div>
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl text-slate-700 dark:text-slate-300 leading-relaxed flex items-start gap-3">
<span class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<span aria-hidden="true" class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<p><strong>Aquest lloc web no utilitza cookies</strong> de cap mena (ni pròpies ni de tercers). El sistema d'analítica (Umami) és cookieless per disseny.</p>
</div>
</article>
privacidad-en.html
+24 -10
View File
@@ -3,7 +3,19 @@
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Privacy Policy | Itziar ZG</title>
<title>Privacy policy | Itziar ZG</title>
<meta
name="description"
content="Itziar ZG privacy policy: cookieless analytics, processed data, GDPR rights and data protection measures."
/>
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.itziarzameza.dev/privacidad-en.html" />
<meta name="theme-color" content="#f7f6f8" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_GB" />
<meta property="og:title" content="Privacy policy | Itziar ZG" />
<meta property="og:description" content="Information about data processing and GDPR rights on this website." />
<meta property="og:url" content="https://www.itziarzameza.dev/privacidad-en.html" />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
@@ -32,6 +44,7 @@
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
<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" />
@@ -43,19 +56,20 @@
></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">Skip to main content</a>
<div class="relative min-h-screen overflow-hidden iridescent-bg flex flex-col justify-between">
<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 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">
<header class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between">
<a href="index-en.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>
<span aria-hidden="true" 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">
<nav aria-label="Main navigation" 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-en.html">Home</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-en.html#manifiesto">Manifesto</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-en.html#laboratorio">Lab</a>
@@ -71,8 +85,8 @@
<span class="text-primary">EN</span>
</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>
<span aria-hidden="true" class="material-symbols-outlined text-xl dark:hidden">dark_mode</span>
<span aria-hidden="true" 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-en.html#contact">
Let's talk
@@ -80,10 +94,10 @@
</div>
</header>
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<main id="main-content" class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<div class="mb-8">
<a href="index-en.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>
<span aria-hidden="true" class="material-symbols-outlined text-sm">arrow_back</span>
Back to home
</a>
</div>
@@ -193,7 +207,7 @@
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">8. Cookies</h2>
</div>
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl text-slate-700 dark:text-slate-300 leading-relaxed flex items-start gap-3">
<span class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<span aria-hidden="true" class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<p><strong>This website does not use any cookies</strong> (neither first-party nor third-party). The analytics system (Umami) is cookieless by design.</p>
</div>
</article>
privacidad.html
+24 -10
View File
@@ -3,7 +3,19 @@
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Política de Privacidad | Itziar ZG</title>
<title>Política de privacidad | Itziar ZG</title>
<meta
name="description"
content="Política de privacidad de Itziar ZG: analítica cookieless, datos tratados, derechos RGPD y medidas de protección."
/>
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.itziarzameza.dev/privacidad.html" />
<meta name="theme-color" content="#f7f6f8" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="es_ES" />
<meta property="og:title" content="Política de privacidad | Itziar ZG" />
<meta property="og:description" content="Información sobre el tratamiento de datos y los derechos RGPD en este sitio web." />
<meta property="og:url" content="https://www.itziarzameza.dev/privacidad.html" />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
@@ -32,6 +44,7 @@
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
<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" />
@@ -43,19 +56,20 @@
></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">
<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 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">
<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>
<span aria-hidden="true" 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">
<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>
@@ -71,8 +85,8 @@
<a href="privacidad-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>
<span aria-hidden="true" class="material-symbols-outlined text-xl dark:hidden">dark_mode</span>
<span aria-hidden="true" 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
@@ -80,10 +94,10 @@
</div>
</header>
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<main id="main-content" class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<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>
<span aria-hidden="true" class="material-symbols-outlined text-sm">arrow_back</span>
Volver al inicio
</a>
</div>
@@ -193,7 +207,7 @@
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">8. Cookies</h2>
</div>
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl text-slate-700 dark:text-slate-300 leading-relaxed flex items-start gap-3">
<span class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<span aria-hidden="true" class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<p><strong>Este sitio web no utiliza cookies</strong> de ningún tipo (ni propias ni de terceros). El sistema de analítica (Umami) es cookieless por diseño.</p>
</div>
</article>
robots.txt
+4
View File
@@ -0,0 +1,4 @@
User-agent: *
Allow: /
Sitemap: https://www.itziarzameza.dev/sitemap.xml
sitemap.xml
+38
View File
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.itziarzameza.dev/index.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.itziarzameza.dev/index-ca.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.itziarzameza.dev/index-en.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.itziarzameza.dev/huella.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.itziarzameza.dev/privacidad.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.4</priority>
</url>
<url>
<loc>https://www.itziarzameza.dev/privacidad-ca.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.4</priority>
</url>
<url>
<loc>https://www.itziarzameza.dev/privacidad-en.html</loc>
<lastmod>2026-07-26</lastmod>
<priority>0.4</priority>
</url>
</urlset>