Compare commits
28
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 itziarZG
|
88b7742291 | ||
|
itziarZG
|
335edbf316 | ||
|
itziarZG
|
4793bf76a9 | ||
|
itziarZG
|
e87f90006c | ||
|
itziarZG
|
e9cf9a160a | ||
|
itziarZG
|
1c1da7df73 | ||
|
itziarZG
|
92b21eab3c | ||
|
itziarZG
|
b4ff3a0aca | ||
 ItziarZG
|
b6a2b049bb | ||
|
Itziar ZGandGitHub
|
7597ecc83e | ||
|
Itziar Zameza García
|
0313f9dbd5 | ||
|
Itziar ZGandGitHub
|
f0cc636536 | ||
|
Itziar ZGandGitHub
|
09686f9a15 | ||
|
Itziar Zameza García
|
dd5515c040 | ||
|
Itziar ZGandGitHub
|
cdc160ec9e | ||
|
Itziar ZGandGitHub
|
ed53a37ea5 | ||
|
Itziar ZGandGitHub
|
54a0c584e6 | ||
|
copilot-swe-agent[bot]anditziarZG
|
41f0549be7 | ||
|
copilot-swe-agent[bot]
|
f548d8d324 | ||
|
copilot-swe-agent[bot]anditziarZG
|
1f49d33fbf | ||
|
copilot-swe-agent[bot]anditziarZG
|
cf8b3a9efd | ||
|
copilot-swe-agent[bot]
|
d5d6c904f5 | ||
|
copilot-swe-agent[bot]
|
f4808f5518 | ||
|
copilot-swe-agent[bot]anditziarZG
|
5d4756657c | ||
|
copilot-swe-agent[bot]
|
ac0c6b983a | ||
|
Itziar ZGandGitHub
|
425028511d | ||
|
Itziar ZGandGitHub
|
3ca89de80e | ||
|
Itziar ZGandGitHub
|
3b94a9ca8a |
@@ -1,3 +1,98 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
Self-Hosted Fonts & Icons
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* Space Grotesk */
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
font-family: 'Space Grotesk';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
src: url('../fonts/space/space-grotesk-v22-latin-300.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
font-family: 'Space Grotesk';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url('../fonts/space/space-grotesk-v22-latin-regular.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
font-family: 'Space Grotesk';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: url('../fonts/space/space-grotesk-v22-latin-500.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
font-family: 'Space Grotesk';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
src: url('../fonts/space/space-grotesk-v22-latin-600.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
font-family: 'Space Grotesk';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
src: url('../fonts/space/space-grotesk-v22-latin-700.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Instrument Serif */
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
font-family: 'Instrument Serif';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300 400;
|
||||||
|
src: url('../fonts/instrument/instrument-serif-v5-latin-regular.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
font-family: 'Instrument Serif';
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 300 400;
|
||||||
|
src: url('../fonts/instrument/instrument-serif-v5-latin-italic.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Material Symbols Outlined */
|
||||||
|
@font-face {
|
||||||
|
font-display: block;
|
||||||
|
font-family: 'Material Symbols Outlined';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 100 700;
|
||||||
|
src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-family: 'Material Symbols Outlined';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-transform: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
word-wrap: normal;
|
||||||
|
direction: ltr;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
-webkit-font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
|
|
||||||
/* Glass Morphism Effect */
|
/* Glass Morphism Effect */
|
||||||
.glass {
|
.glass {
|
||||||
background: rgba(255, 255, 255, 0.4);
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+349
@@ -0,0 +1,349 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>Huella Digital y Decisiones Técnicas | Itziar ZG</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: "#8c2bee",
|
||||||
|
"background-light": "#f7f6f8",
|
||||||
|
"background-dark": "#191022",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
display: ["Space Grotesk", "sans-serif"],
|
||||||
|
serif: ["Instrument Serif", "serif"],
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
DEFAULT: "0.5rem",
|
||||||
|
lg: "1rem",
|
||||||
|
xl: "1.5rem",
|
||||||
|
full: "9999px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
<link rel="stylesheet" href="css/styles.css?v=1.1" />
|
||||||
|
<script
|
||||||
|
defer
|
||||||
|
src="https://stats.itziarzameza.dev/script.js"
|
||||||
|
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
|
||||||
|
data-domains="www.itziarzameza.dev"
|
||||||
|
></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"
|
||||||
|
>
|
||||||
|
<div class="relative min-h-screen overflow-hidden iridescent-bg flex flex-col justify-between">
|
||||||
|
<!-- Floating Fluid Shapes -->
|
||||||
|
<div
|
||||||
|
class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50 pointer-events-none"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40 pointer-events-none"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div class="layout-container flex h-full grow flex-col relative z-10">
|
||||||
|
<!-- Navigation -->
|
||||||
|
<header
|
||||||
|
class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between"
|
||||||
|
>
|
||||||
|
<a href="index.html" class="flex items-center gap-2 group cursor-pointer">
|
||||||
|
<div
|
||||||
|
class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined text-2xl">
|
||||||
|
auto_awesome
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h2
|
||||||
|
class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Itziar ZG
|
||||||
|
</h2>
|
||||||
|
</a>
|
||||||
|
<nav
|
||||||
|
class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||||
|
href="index.html"
|
||||||
|
>Inicio</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||||
|
href="index.html#manifiesto"
|
||||||
|
>Manifiesto</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||||
|
href="index.html#laboratorio"
|
||||||
|
>Laboratorio</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="text-sm font-medium text-primary hover:text-primary transition-colors"
|
||||||
|
href="huella.html"
|
||||||
|
>Huella</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
||||||
|
href="#contact"
|
||||||
|
>Contacto</a
|
||||||
|
>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<!-- Language Switcher -->
|
||||||
|
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold">
|
||||||
|
<span class="text-primary">ES</span>
|
||||||
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
||||||
|
<a href="index-ca.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Català">CA</a>
|
||||||
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
||||||
|
<a href="index-en.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="English">EN</a>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors"
|
||||||
|
id="theme-toggle"
|
||||||
|
onclick="toggleTheme()"
|
||||||
|
aria-label="Toggle theme"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined text-xl dark:hidden">
|
||||||
|
dark_mode
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
|
||||||
|
>
|
||||||
|
light_mode
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25 flex items-center justify-center"
|
||||||
|
href="index.html#contact"
|
||||||
|
>
|
||||||
|
Hablemos
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
|
||||||
|
|
||||||
|
<!-- Back Link -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<a
|
||||||
|
href="index.html"
|
||||||
|
class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined text-sm">arrow_back</span>
|
||||||
|
Volver al inicio
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Page Title -->
|
||||||
|
<div class="mb-16">
|
||||||
|
<h1 class="text-4xl md:text-6xl font-serif italic mb-6 text-slate-900 dark:text-white leading-tight">
|
||||||
|
Huella ecológica &<br />
|
||||||
|
<span class="text-primary not-italic font-display font-black tracking-tighter">Decisiones</span> técnicas
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
|
||||||
|
Medición del impacto ambiental de este sitio web y desglose de los compromisos pragmáticos adoptados durante su desarrollo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Impact Metrics Grid -->
|
||||||
|
<div class="grid md:grid-cols-3 gap-6 mb-16">
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">weight</span>
|
||||||
|
<h3 class="font-bold mb-2 dark:text-white">Peso de la página</h3>
|
||||||
|
<p class="text-3xl font-bold text-primary mb-2">~245 KB</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||||
|
Total de datos transferidos en la primera carga completa del sitio. La media web mundial actual supera los 2.5 MB.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">co2</span>
|
||||||
|
<h3 class="font-bold mb-2 dark:text-white">Emisiones estimadas</h3>
|
||||||
|
<p class="text-3xl font-bold text-primary mb-2">0.05 g</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||||
|
CO2 generado por visita, medido con la fórmula estandarizada de Sustainable Web Design. El promedio web es de 0.5g.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">nest_eco_leaf</span>
|
||||||
|
<h3 class="font-bold mb-2 dark:text-white">Servidor ecológico</h3>
|
||||||
|
<p class="text-3xl font-bold text-emerald-500 mb-2">100%</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||||
|
La web está alojada en Hetzner (Helsinki), un centro de datos alimentado por energía libre de carbono (eólica e hidráulica).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Anti-Purismo / Compromisos Imperfectos -->
|
||||||
|
<section class="space-y-8 mb-20">
|
||||||
|
<div class="border-l-4 border-primary pl-6">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">El recordatorio anti-purismo</h2>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">El pragmatismo frente a la teoría absoluta</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
En el desarrollo de software responsable, es fácil caer en el purismo de querer reducir la transferencia a cero absoluto o rechazar cualquier recurso externo. Sin embargo, para que el código sea sostenible también debe ser mantenible y útil. Aquí documento las decisiones imperfectas pero justificadas tomadas en esta web:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Compromiso 1: Tailwind CSS por CDN -->
|
||||||
|
<div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
|
||||||
|
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-amber-500">warning</span>
|
||||||
|
Tailwind CSS mediante CDN de desarrollo
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
||||||
|
<strong>El problema:</strong> El script de Tailwind en línea pesa en torno a los 100 KB transferidos y compila las clases en el navegador del usuario en tiempo real. Compilar y empaquetar CSS en producción reduciría este peso a unos 10-15 KB.
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<strong>El compromiso:</strong> Elegimos mantener este sitio sin pasos de construcción (no-build setup) para garantizar que cualquiera pueda descargar el código, hacer doble clic en <code>index.html</code> y ver el sitio funcionando al instante sin instalar dependencias de Node.js. Esto prolonga la vida útil del código (impide la obsolescencia de dependencias de build) a cambio de un ligero impacto de descarga.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Compromiso 2: Tipografías e Iconos Autoalojados (Self-Hosted) -->
|
||||||
|
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
|
||||||
|
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-emerald-500">verified</span>
|
||||||
|
Tipografías e Iconos 100% Autoalojados (Zero Third-Party Requests)
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
||||||
|
<strong>La optimización:</strong> Hemos migrado tanto las fuentes (<em>Space Grotesk</em> e <em>Instrument Serif</em>) como la iconografía (<em>Material Symbols Outlined</em>) a nuestra propia infraestructura (`/fonts`).
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<strong>El impacto:</strong> Eliminamos por completo el rastreo y las llamadas DNS externas a Google Fonts, garantizando soberanía de datos, estricto cumplimiento del RGPD y menor latencia en el renderizado inicial.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Certificación Green Software Foundation -->
|
||||||
|
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">
|
||||||
|
<span class="material-symbols-outlined text-sm">workspace_premium</span>
|
||||||
|
Acreditación Oficial Green Software Foundation
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-lg dark:text-white mb-1">
|
||||||
|
Green Software Practitioner
|
||||||
|
</h3>
|
||||||
|
<p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
|
Credential ID: <code>b80fdaac-96a2-48e1-9170-7a84c0297295</code> — Certificación en patrones de diseño sostenible y reducción de emisiones de software.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="https://badges.greensoftware.foundation/awards/b80fdaac-96a2-48e1-9170-7a84c0297295"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded-xl text-xs font-bold hover:bg-emerald-700 transition-colors shrink-0 shadow-md shadow-emerald-600/20"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined text-sm">verified</span>
|
||||||
|
Verificar Credencial
|
||||||
|
<span class="material-symbols-outlined text-xs">open_in_new</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="pb-12" id="contact">
|
||||||
|
<div class="mx-auto max-w-6xl px-6">
|
||||||
|
<div
|
||||||
|
class="glass rounded-[3rem] p-12 md:p-24 text-center relative overflow-hidden"
|
||||||
|
>
|
||||||
|
<div class="absolute top-0 right-0 p-8 pointer-events-none">
|
||||||
|
<span
|
||||||
|
class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
|
||||||
|
>alternate_email</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<h2
|
||||||
|
class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white"
|
||||||
|
>
|
||||||
|
¿Hablamos?
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10"
|
||||||
|
>
|
||||||
|
Si buscas tecnología ligera, accesible y con los pies en la tierra — o simplemente quieres hablar de soberanía digital — escríbeme.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="bg-slate-900 dark:bg-slate-800 text-white px-10 py-5 rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 dark:hover:bg-slate-700 transition-colors shadow-2xl"
|
||||||
|
href="mailto:itziar.zameza.garcia@gmail.com"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined">mail</span>
|
||||||
|
Enviar un Email
|
||||||
|
</a>
|
||||||
|
<div class="flex gap-4 justify-center">
|
||||||
|
<a
|
||||||
|
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
||||||
|
href="https://www.linkedin.com/in/itziarzamezagarcia"
|
||||||
|
title="LinkedIn"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined text-2xl">link</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
||||||
|
href="https://github.com/itziarZG"
|
||||||
|
title="GitHub"
|
||||||
|
>
|
||||||
|
<span class="material-symbols-outlined text-2xl"
|
||||||
|
>share</span
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm"
|
||||||
|
>
|
||||||
|
<p>© 2026 Itziar ZG.</p>
|
||||||
|
<div class="flex gap-8">
|
||||||
|
<a
|
||||||
|
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
|
||||||
|
href="https://www.linkedin.com/in/itziarzamezagarcia"
|
||||||
|
>LinkedIn</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
|
||||||
|
href="https://github.com/itziarZG"
|
||||||
|
>GitHub</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
|
||||||
|
href="privacidad.html"
|
||||||
|
>Privacidad</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+1524
File diff suppressed because it is too large
Load Diff
+1500
File diff suppressed because it is too large
Load Diff
+931
-351
File diff suppressed because it is too large
Load Diff
+64
-3
@@ -58,20 +58,37 @@ function scrollToContact() {
|
|||||||
// Modal Management
|
// Modal Management
|
||||||
// ============================================
|
// ============================================
|
||||||
|
|
||||||
|
/** Element that had focus before a modal was opened */
|
||||||
|
let _modalPreviousFocus = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Open modal by project ID
|
* Open modal by project ID.
|
||||||
|
* Saves the currently focused element and moves focus into the modal.
|
||||||
* @param {string} projectId - The project identifier
|
* @param {string} projectId - The project identifier
|
||||||
*/
|
*/
|
||||||
function openModal(projectId) {
|
function openModal(projectId) {
|
||||||
const modal = document.getElementById(projectId + "-modal");
|
const modal = document.getElementById(projectId + "-modal");
|
||||||
if (modal) {
|
if (modal) {
|
||||||
|
_modalPreviousFocus = document.activeElement;
|
||||||
modal.classList.remove("hidden");
|
modal.classList.remove("hidden");
|
||||||
document.body.style.overflow = "hidden";
|
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"])'
|
||||||
|
);
|
||||||
|
if (focusable.length > 0) {
|
||||||
|
focusable[0].focus();
|
||||||
|
} else {
|
||||||
|
modal.setAttribute("tabindex", "-1");
|
||||||
|
modal.focus();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Close modal by project ID
|
* Close modal by project ID.
|
||||||
|
* Restores focus to the element that was focused before the modal opened.
|
||||||
* @param {string} projectId - The project identifier
|
* @param {string} projectId - The project identifier
|
||||||
*/
|
*/
|
||||||
function closeModal(projectId) {
|
function closeModal(projectId) {
|
||||||
@@ -79,9 +96,52 @@ function closeModal(projectId) {
|
|||||||
if (modal) {
|
if (modal) {
|
||||||
modal.classList.add("hidden");
|
modal.classList.add("hidden");
|
||||||
document.body.style.overflow = "auto";
|
document.body.style.overflow = "auto";
|
||||||
|
|
||||||
|
// Return focus to the element that triggered the modal
|
||||||
|
if (_modalPreviousFocus) {
|
||||||
|
_modalPreviousFocus.focus();
|
||||||
|
_modalPreviousFocus = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Laboratorio Tabs Management
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize tabs behavior for the Laboratorio section
|
||||||
|
*/
|
||||||
|
function initTabs() {
|
||||||
|
const tabButtons = document.querySelectorAll(".tab-btn");
|
||||||
|
const tabPanes = document.querySelectorAll(".tab-pane");
|
||||||
|
|
||||||
|
tabButtons.forEach((btn) => {
|
||||||
|
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");
|
||||||
|
});
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
// Event Listeners
|
// Event Listeners
|
||||||
// ============================================
|
// ============================================
|
||||||
@@ -102,6 +162,7 @@ document.addEventListener("keydown", function (event) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initialize theme as early as possible
|
* Initialize theme and tabs
|
||||||
*/
|
*/
|
||||||
initTheme();
|
initTheme();
|
||||||
|
initTabs();
|
||||||
|
|||||||
@@ -0,0 +1,229 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ca">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>Política de Privacitat | Itziar ZG</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: "#8c2bee",
|
||||||
|
"background-light": "#f7f6f8",
|
||||||
|
"background-dark": "#191022",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
display: ["Space Grotesk", "sans-serif"],
|
||||||
|
serif: ["Instrument Serif", "serif"],
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
DEFAULT: "0.5rem",
|
||||||
|
lg: "1rem",
|
||||||
|
xl: "1.5rem",
|
||||||
|
full: "9999px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<link rel="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="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" />
|
||||||
|
<script
|
||||||
|
defer
|
||||||
|
src="https://stats.itziarzameza.dev/script.js"
|
||||||
|
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
|
||||||
|
data-domains="www.itziarzameza.dev"
|
||||||
|
></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">
|
||||||
|
<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 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>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white">Itziar ZG</h2>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full">
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-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>
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="huella.html">Emprenta</a>
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="#contact">Contacte</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold">
|
||||||
|
<a href="privacidad.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Castellano">ES</a>
|
||||||
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
||||||
|
<span class="text-primary">CA</span>
|
||||||
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
||||||
|
<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>
|
||||||
|
</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
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main 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>
|
||||||
|
Tornar a l'inici
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-16">
|
||||||
|
<h1 class="text-4xl md:text-6xl font-serif italic mb-6 text-slate-900 dark:text-white leading-tight">
|
||||||
|
Política de<br />
|
||||||
|
<span class="text-primary not-italic font-display font-black tracking-tighter">Privacitat</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
|
||||||
|
Com es recullen, emmagatzemen i utilitzen les dades en aquest lloc web, en compliment del Reglament General de Protecció de Dades (RGPD).
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-500 mt-4 italic">
|
||||||
|
Última actualització: 21 de Juliol, 2026
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="space-y-8 mb-16">
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">1. Responsable del tractament</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 space-y-2 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p><strong>Identitat:</strong> Itziar Zameza García</p>
|
||||||
|
<p><strong>Correu de contacte:</strong> <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a></p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">2. Quines dades tractem?</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Aquest lloc utilitza <strong>Umami</strong>, una eina d'analítica web de codi obert allotjada al meu propi servidor. Les dades que es recullen són:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-4">
|
||||||
|
<li>Pàgines visitades i temps de permanència</li>
|
||||||
|
<li>Adreça IP (anonimitzada i truncada per Umami)</li>
|
||||||
|
<li>Tipus de navegador i sistema operatiu (User-Agent)</li>
|
||||||
|
<li>Lloc web de procedència (referrer)</li>
|
||||||
|
<li>País d'origen (derivat de la IP, no a nivell de ciutat)</li>
|
||||||
|
</ul>
|
||||||
|
<p class="pt-2"><strong>No es recullen:</strong> dades identificatives personals (nom, correu, telèfon), ni es realitza fingerprinting, ni s'utilitzen cookies.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">3. Finalitat</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Les dades s'utilitzen exclusivament per analitzar de forma agregada l'ús del lloc web i orientar millores de contingut i rendiment. <strong>No s'elaboren perfils comercials</strong> i les dades no es cedeixen ni es venen a tercers.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">4. Base jurídica</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>El tractament es basa en l'<strong>interès legítim</strong> de la responsable (article 6.1.f del RGPD): conèixer l'ús real del lloc per millorar-lo. En no utilitzar cookies ni identificadors persistents, no es requereix consentiment previ segons la normativa espanyola (LSSI-CE).</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">5. Destinataris i transferències</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Les dades <strong>no es comuniquen a tercers</strong>. Tot el processament passa al servidor privat (VPS) de la responsable, ubicat a la Unió Europea. No es realitzen transferències internacionals.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">6. Conservació</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Les dades agregades es conserven durant un màxim de <strong>12 mesos</strong> i s'eliminen automàticament. No s'elaboren perfils d'usuari.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">7. Els teus drets</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Pots exercir en qualsevol moment els drets RGPD:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-4">
|
||||||
|
<li><strong>Accés</strong> — saber quines dades tinc teves</li>
|
||||||
|
<li><strong>Rectificació</strong> — corregir dades inexactes</li>
|
||||||
|
<li><strong>Supressió</strong> — sol·licitar l'eliminació</li>
|
||||||
|
<li><strong>Oposició</strong> — oposar-te al tractament</li>
|
||||||
|
<li><strong>Limitació</strong> — restringir el processament</li>
|
||||||
|
<li><strong>Portabilitat</strong> — rebre les teves dades en format estàndard</li>
|
||||||
|
</ul>
|
||||||
|
<p>Per exercir-los, escriu a <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a>.</p>
|
||||||
|
<p class="pt-2">També pots presentar una reclamació davant l'autoritat de control:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-4">
|
||||||
|
<li>Espanya — <a href="https://www.aepd.es" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Agència Espanyola de Protecció de Dades (AEPD)</a></li>
|
||||||
|
<li>Catalunya — <a href="https://apdcat.gencat.cat" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Autoritat Catalana de Protecció de Dades (APDCAT)</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-emerald-500 pl-6 mb-4">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">9. Canvis en aquesta política</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Aquesta política pot actualitzar-se per reflectir canvis legals o tècnics. La data de l'última actualització s'indica a l'inici del document.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="pb-12" id="contact">
|
||||||
|
<div class="mx-auto max-w-6xl px-6">
|
||||||
|
<div class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm">
|
||||||
|
<p>© 2026 Itziar ZG.</p>
|
||||||
|
<div class="flex gap-8">
|
||||||
|
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://www.linkedin.com/in/itziarzamezagarcia">LinkedIn</a>
|
||||||
|
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://github.com/itziarZG">GitHub</a>
|
||||||
|
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="privacidad-ca.html">Privacitat</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,229 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>Privacy Policy | Itziar ZG</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: "#8c2bee",
|
||||||
|
"background-light": "#f7f6f8",
|
||||||
|
"background-dark": "#191022",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
display: ["Space Grotesk", "sans-serif"],
|
||||||
|
serif: ["Instrument Serif", "serif"],
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
DEFAULT: "0.5rem",
|
||||||
|
lg: "1rem",
|
||||||
|
xl: "1.5rem",
|
||||||
|
full: "9999px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<link rel="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="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" />
|
||||||
|
<script
|
||||||
|
defer
|
||||||
|
src="https://stats.itziarzameza.dev/script.js"
|
||||||
|
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
|
||||||
|
data-domains="www.itziarzameza.dev"
|
||||||
|
></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">
|
||||||
|
<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 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>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white">Itziar ZG</h2>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full">
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-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>
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="huella.html">Footprint</a>
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="#contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold">
|
||||||
|
<a href="privacidad.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Español">ES</a>
|
||||||
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
||||||
|
<a href="privacidad-ca.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Català">CA</a>
|
||||||
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
||||||
|
<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>
|
||||||
|
</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
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main 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>
|
||||||
|
Back to home
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-16">
|
||||||
|
<h1 class="text-4xl md:text-6xl font-serif italic mb-6 text-slate-900 dark:text-white leading-tight">
|
||||||
|
Privacy<br />
|
||||||
|
<span class="text-primary not-italic font-display font-black tracking-tighter">Policy</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
|
||||||
|
How data is collected, stored and used on this website, in compliance with the General Data Protection Regulation (GDPR).
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-500 mt-4 italic">
|
||||||
|
Last updated: July 21, 2026
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="space-y-8 mb-16">
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">1. Data Controller</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 space-y-2 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p><strong>Identity:</strong> Itziar Zameza García</p>
|
||||||
|
<p><strong>Contact email:</strong> <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a></p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">2. What data do we process?</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>This site uses <strong>Umami</strong>, an open-source web analytics tool self-hosted on my own server. Data collected includes:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-4">
|
||||||
|
<li>Pages visited and time spent</li>
|
||||||
|
<li>IP address (anonymized and truncated by Umami)</li>
|
||||||
|
<li>Browser type and operating system (User-Agent)</li>
|
||||||
|
<li>Referring website (referrer)</li>
|
||||||
|
<li>Country of origin (derived from IP, not at city level)</li>
|
||||||
|
</ul>
|
||||||
|
<p class="pt-2"><strong>Not collected:</strong> personally identifying data (name, email, phone), no fingerprinting, no cookies of any kind.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">3. Purpose</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Data is used exclusively to analyze aggregate website usage and guide content and performance improvements. <strong>No commercial profiles are built</strong> and data is not shared with or sold to third parties.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">4. Legal basis</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Processing is based on the <strong>legitimate interest</strong> of the data controller (Article 6.1.f GDPR): understanding actual site usage to improve it. Since no cookies or persistent identifiers are used, prior consent is not required under Spanish law (LSSI-CE).</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">5. Recipients and transfers</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Data is <strong>not shared with third parties</strong>. All processing occurs on the controller's private server (VPS), located in the European Union. No international transfers are performed.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">6. Retention</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Aggregated data is retained for a maximum of <strong>12 months</strong> and then automatically deleted. No user profiles are built.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">7. Your rights</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>You can exercise your GDPR rights at any time:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-4">
|
||||||
|
<li><strong>Access</strong> — know what data I have about you</li>
|
||||||
|
<li><strong>Rectification</strong> — correct inaccurate data</li>
|
||||||
|
<li><strong>Erasure</strong> — request deletion</li>
|
||||||
|
<li><strong>Objection</strong> — object to processing</li>
|
||||||
|
<li><strong>Restriction</strong> — restrict processing</li>
|
||||||
|
<li><strong>Portability</strong> — receive your data in a standard format</li>
|
||||||
|
</ul>
|
||||||
|
<p>To exercise them, write to <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a>.</p>
|
||||||
|
<p class="pt-2">You may also lodge a complaint with the supervisory authority:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-4">
|
||||||
|
<li>Spain — <a href="https://www.aepd.es" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Spanish Data Protection Agency (AEPD)</a></li>
|
||||||
|
<li>Catalonia — <a href="https://apdcat.gencat.cat" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Catalan Data Protection Authority (APDCAT)</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-emerald-500 pl-6 mb-4">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">9. Changes to this policy</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>This policy may be updated to reflect legal or technical changes. The date of the last update is shown at the top of the document.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="pb-12" id="contact">
|
||||||
|
<div class="mx-auto max-w-6xl px-6">
|
||||||
|
<div class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm">
|
||||||
|
<p>© 2026 Itziar ZG.</p>
|
||||||
|
<div class="flex gap-8">
|
||||||
|
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://www.linkedin.com/in/itziarzamezagarcia">LinkedIn</a>
|
||||||
|
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://github.com/itziarZG">GitHub</a>
|
||||||
|
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="privacidad-en.html">Privacy</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+229
@@ -0,0 +1,229 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>Política de Privacidad | Itziar ZG</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: "#8c2bee",
|
||||||
|
"background-light": "#f7f6f8",
|
||||||
|
"background-dark": "#191022",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
display: ["Space Grotesk", "sans-serif"],
|
||||||
|
serif: ["Instrument Serif", "serif"],
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
DEFAULT: "0.5rem",
|
||||||
|
lg: "1rem",
|
||||||
|
xl: "1.5rem",
|
||||||
|
full: "9999px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<link rel="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="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" />
|
||||||
|
<script
|
||||||
|
defer
|
||||||
|
src="https://stats.itziarzameza.dev/script.js"
|
||||||
|
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
|
||||||
|
data-domains="www.itziarzameza.dev"
|
||||||
|
></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">
|
||||||
|
<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 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>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white">Itziar ZG</h2>
|
||||||
|
</a>
|
||||||
|
<nav class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full">
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index.html">Inicio</a>
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index.html#manifiesto">Manifiesto</a>
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index.html#laboratorio">Laboratorio</a>
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="huella.html">Huella</a>
|
||||||
|
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="#contact">Contacto</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold">
|
||||||
|
<span class="text-primary">ES</span>
|
||||||
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
||||||
|
<a href="privacidad-ca.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Català">CA</a>
|
||||||
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
||||||
|
<a href="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>
|
||||||
|
</button>
|
||||||
|
<a class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25 flex items-center justify-center" href="index.html#contact">
|
||||||
|
Hablemos
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main 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>
|
||||||
|
Volver al inicio
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-16">
|
||||||
|
<h1 class="text-4xl md:text-6xl font-serif italic mb-6 text-slate-900 dark:text-white leading-tight">
|
||||||
|
Política de<br />
|
||||||
|
<span class="text-primary not-italic font-display font-black tracking-tighter">Privacidad</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
|
||||||
|
Cómo se recogen, almacenan y utilizan los datos en este sitio web, en cumplimiento del Reglamento General de Protección de Datos (RGPD).
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-500 mt-4 italic">
|
||||||
|
Última actualización: 21 de Julio, 2026
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="space-y-8 mb-16">
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">1. Responsable del tratamiento</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 space-y-2 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p><strong>Identidad:</strong> Itziar Zameza García</p>
|
||||||
|
<p><strong>Correo de contacto:</strong> <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a></p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">2. ¿Qué datos tratamos?</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Este sitio utiliza <strong>Umami</strong>, una herramienta de analítica web de código abierto autoalojada en mi propio servidor. Los datos que se recogen son:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-4">
|
||||||
|
<li>Páginas visitadas y tiempo de permanencia</li>
|
||||||
|
<li>Dirección IP (anonimizada y truncada por Umami)</li>
|
||||||
|
<li>Tipo de navegador y sistema operativo (User-Agent)</li>
|
||||||
|
<li>Sitio web de procedencia (referrer)</li>
|
||||||
|
<li>País de origen (derivado de la IP, no a nivel de ciudad)</li>
|
||||||
|
</ul>
|
||||||
|
<p class="pt-2"><strong>No se recogen:</strong> datos identificativos personales (nombre, email, teléfono), ni se realiza fingerprinting, ni se utilizan cookies.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">3. Finalidad</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Los datos se utilizan exclusivamente para analizar de forma agregada el uso del sitio web y orientar mejoras de contenido y rendimiento. <strong>No se elaboran perfiles comerciales</strong> y los datos no se ceden ni venden a terceros.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">4. Base jurídica</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>El tratamiento se basa en el <strong>interés legítimo</strong> del responsable (artículo 6.1.f del RGPD): conocer el uso real del sitio para mejorarlo. Al no utilizar cookies ni identificadores persistentes, no se requiere consentimiento previo según la normativa española (LSSI-CE).</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">5. Destinatarios y transferencias</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Los datos <strong>no se comunican a terceros</strong>. Todo el procesamiento ocurre en el servidor privado (VPS) de la responsable, ubicado en la Unión Europea. No se realizan transferencias internacionales.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">6. Conservación</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Los datos agregados se conservan durante un máximo de <strong>12 meses</strong> y se eliminan automáticamente. No se elaboran perfiles de usuario.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">7. Tus derechos</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Puedes ejercer en cualquier momento los derechos RGPD:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-4">
|
||||||
|
<li><strong>Acceso</strong> — saber qué datos tengo tuyos</li>
|
||||||
|
<li><strong>Rectificación</strong> — corregir datos inexactos</li>
|
||||||
|
<li><strong>Supresión</strong> — solicitar eliminación</li>
|
||||||
|
<li><strong>Oposición</strong> — oponerte al tratamiento</li>
|
||||||
|
<li><strong>Limitación</strong> — restringir el procesamiento</li>
|
||||||
|
<li><strong>Portabilidad</strong> — recibir tus datos en formato estándar</li>
|
||||||
|
</ul>
|
||||||
|
<p>Para ejercerlos, escribe a <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a>.</p>
|
||||||
|
<p class="pt-2">También puedes presentar una reclamación ante la autoridad de control:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-4">
|
||||||
|
<li>España — <a href="https://www.aepd.es" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Agencia Española de Protección de Datos (AEPD)</a></li>
|
||||||
|
<li>Cataluña — <a href="https://apdcat.gencat.cat" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Autoritat Catalana de Protecció de Dades (APDCAT)</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-emerald-500 pl-6 mb-4">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="border-l-4 border-primary pl-6 mb-4">
|
||||||
|
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">9. Cambios en esta política</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
<p>Esta política puede actualizarse para reflejar cambios legales o técnicos. La fecha de la última actualización se indica al inicio del documento.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="pb-12" id="contact">
|
||||||
|
<div class="mx-auto max-w-6xl px-6">
|
||||||
|
<div class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm">
|
||||||
|
<p>© 2026 Itziar ZG.</p>
|
||||||
|
<div class="flex gap-8">
|
||||||
|
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://www.linkedin.com/in/itziarzamezagarcia">LinkedIn</a>
|
||||||
|
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://github.com/itziarZG">GitHub</a>
|
||||||
|
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="privacidad.html">Privacidad</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
-674
@@ -1,674 +0,0 @@
|
|||||||
/* Reset and Base Styles */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CSS Custom Properties for Theming */
|
|
||||||
:root {
|
|
||||||
--primary: #3b82f6;
|
|
||||||
--primary-light: #60a5fa;
|
|
||||||
--background: #0a0a0a;
|
|
||||||
--surface: #171717;
|
|
||||||
--text-primary: #ffffff;
|
|
||||||
--text-secondary: #94a3b8;
|
|
||||||
--border: rgba(255, 255, 255, 0.1);
|
|
||||||
--accent: #8b5cf6;
|
|
||||||
--glass-bg: rgba(255, 255, 255, 0.03);
|
|
||||||
--glass-border: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark mode - when html has class="dark" */
|
|
||||||
html.dark {
|
|
||||||
--background: #ffffff;
|
|
||||||
--surface: #f8fafc;
|
|
||||||
--text-primary: #0a0a0a;
|
|
||||||
--text-secondary: #64748b;
|
|
||||||
--border: rgba(0, 0, 0, 0.1);
|
|
||||||
--glass-bg: rgba(0, 0, 0, 0.03);
|
|
||||||
--glass-border: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Typography */
|
|
||||||
body {
|
|
||||||
font-family:
|
|
||||||
"Inter",
|
|
||||||
-apple-system,
|
|
||||||
BlinkMacSystemFont,
|
|
||||||
"Segoe UI",
|
|
||||||
Roboto,
|
|
||||||
sans-serif;
|
|
||||||
line-height: 1.6;
|
|
||||||
background-color: var(--background);
|
|
||||||
color: var(--text-primary);
|
|
||||||
transition:
|
|
||||||
background-color 0.3s ease,
|
|
||||||
color 0.3s ease;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Layout Classes */
|
|
||||||
.container {
|
|
||||||
max-width: 72rem;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigation */
|
|
||||||
.nav {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 50;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
background-color: var(--background);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-content {
|
|
||||||
max-width: 72rem;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
height: 4rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links {
|
|
||||||
display: none;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a:hover {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-contact {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 9999px;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--text-primary);
|
|
||||||
transition: all 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-contact:hover {
|
|
||||||
background-color: var(--text-primary);
|
|
||||||
color: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hero Section */
|
|
||||||
.hero {
|
|
||||||
position: relative;
|
|
||||||
padding-top: 8rem;
|
|
||||||
padding-bottom: 5rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-bg {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-glow-1 {
|
|
||||||
position: absolute;
|
|
||||||
top: -10%;
|
|
||||||
left: -10%;
|
|
||||||
width: 40%;
|
|
||||||
height: 40%;
|
|
||||||
background-color: rgba(59, 130, 246, 0.2);
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(120px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-glow-2 {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10%;
|
|
||||||
right: -10%;
|
|
||||||
width: 30%;
|
|
||||||
height: 30%;
|
|
||||||
background-color: rgba(139, 92, 246, 0.2);
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(120px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
max-width: 72rem;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
font-size: 3.75rem;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
background: linear-gradient(to right, #ffffff, #94a3b8, #ffffff);
|
|
||||||
background-size: 200% 200%;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
animation: subtle-gradient 8s ease infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-subtitle {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--primary);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-description {
|
|
||||||
max-width: 42rem;
|
|
||||||
margin: 0 auto 3rem;
|
|
||||||
font-size: 1.125rem;
|
|
||||||
line-height: 1.625;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: var(--background);
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
text-decoration: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
transition: all 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
background-color: var(--surface);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
text-decoration: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
border-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-tertiary {
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-tertiary:hover {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Section Styles */
|
|
||||||
.section {
|
|
||||||
padding: 6rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-dark {
|
|
||||||
background-color: var(--surface);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.875rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-subtitle {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* About Section */
|
|
||||||
.about-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 4rem;
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-content h2 {
|
|
||||||
font-size: 1.875rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-content p {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 1.125rem;
|
|
||||||
line-height: 1.625;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-quote {
|
|
||||||
padding: 1.5rem;
|
|
||||||
background: var(--glass-bg);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
border-radius: 1rem;
|
|
||||||
border-left: 4px solid var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-quote p {
|
|
||||||
font-style: italic;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.capabilities-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.capability-card {
|
|
||||||
padding: 1rem;
|
|
||||||
background: var(--glass-bg);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.capability-icon {
|
|
||||||
width: 2.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
background-color: rgba(59, 130, 246, 0.1);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.capability-icon.purple {
|
|
||||||
background-color: rgba(139, 92, 246, 0.1);
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.capability-card h3 {
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.capability-card p {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Projects Section */
|
|
||||||
.projects-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card {
|
|
||||||
position: relative;
|
|
||||||
background-color: var(--surface);
|
|
||||||
border-radius: 1rem;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card:hover {
|
|
||||||
border-color: rgba(59, 130, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-image {
|
|
||||||
height: 12rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-image-1 {
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom right,
|
|
||||||
rgba(37, 99, 235, 0.2),
|
|
||||||
rgba(147, 51, 234, 0.2)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-image-2 {
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom right,
|
|
||||||
rgba(16, 185, 129, 0.2),
|
|
||||||
rgba(37, 99, 235, 0.2)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-image-3 {
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom right,
|
|
||||||
rgba(147, 51, 234, 0.2),
|
|
||||||
rgba(219, 39, 119, 0.2)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-content {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-tags {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-tag {
|
|
||||||
font-size: 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
background-color: rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
transition: color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card:hover h3 {
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card p {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
line-height: 1.625;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-link {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
color: var(--primary);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-link svg {
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tech Stack Section */
|
|
||||||
.tech-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-item {
|
|
||||||
padding: 1.5rem;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-item:hover {
|
|
||||||
border-color: rgba(59, 130, 246, 0.5);
|
|
||||||
background-color: rgba(59, 130, 246, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-icon {
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
background-color: rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-icon.emerald {
|
|
||||||
color: #10b981;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-name {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
.footer {
|
|
||||||
padding: 6rem 0;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-content {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer h2 {
|
|
||||||
font-size: 2.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer p {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 1.125rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
max-width: 36rem;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-link {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-link:hover {
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-divider {
|
|
||||||
display: none;
|
|
||||||
width: 1px;
|
|
||||||
height: 1.5rem;
|
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-copyright {
|
|
||||||
margin-top: 6rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Animations */
|
|
||||||
@keyframes subtle-gradient {
|
|
||||||
0% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 100% 50%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom scrollbar */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--primary);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--primary-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Media Queries */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.hero {
|
|
||||||
padding-top: 12rem;
|
|
||||||
padding-bottom: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
font-size: 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-subtitle {
|
|
||||||
font-size: 1.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-actions {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-grid {
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.capabilities-grid {
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.projects-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-divider {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.projects-grid {
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-grid {
|
|
||||||
grid-template-columns: repeat(6, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Theme Toggle Button */
|
|
||||||
.theme-toggle {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 2rem;
|
|
||||||
right: 2rem;
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
background-color: var(--surface);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.15s ease;
|
|
||||||
z-index: 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle:hover {
|
|
||||||
background-color: var(--primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user