chore(merge): integrate main perf optimizations into develop
Resolves merge conflicts when bringing origin/main into develop: - css/styles.css: keep built/minified Tailwind output, append develop's layout-stability CSS (scrollbar-gutter + body.modal-open) - js/main.js: keep main's aria-hidden + aria-selected a11y hardening, restore develop's tabsContainer.scrollIntoView and body.modal-open modal pattern (with preventScroll + getScrollbarWidth fallback for non-gutter browsers) - index*.html / huella.html: take main's meta+analytics+defer heavy work as base, restore develop's inline SVG icons (replaces Material Symbols spans) and add favicon link - privacidad*.html: take main's rewritten multi-language versions, add favicon - keep develop's tab DOM fixes (each tab-pane shows its own content; Trabajo Anterior details nested inside tab-proyectos) - keep develop's deletion of fonts/material-symbols-outlined.woff2
This commit is contained in:
+147
@@ -0,0 +1,147 @@
|
||||
/* ==========================================================================
|
||||
Self-Hosted Fonts & Icons
|
||||
========================================================================== */
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Space Grotesk */
|
||||
@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: 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 {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.dark .glass {
|
||||
background: rgba(30, 20, 40, 0.55);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Iridescent Background Gradient */
|
||||
.iridescent-bg {
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 0% 0%,
|
||||
rgba(140, 43, 238, 0.15) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 100% 100%,
|
||||
rgba(255, 182, 255, 0.2) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 50% 50%,
|
||||
rgba(140, 43, 238, 0.05) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Fluid Blob Shapes */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
+4
-113
File diff suppressed because one or more lines are too long
+62
-38
@@ -3,52 +3,75 @@
|
||||
<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>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<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",
|
||||
},
|
||||
},
|
||||
<meta
|
||||
name="description"
|
||||
content="Consulta la huella ecológica de la web de Itziar ZG y las decisiones técnicas adoptadas para reducir su impacto ambiental."
|
||||
/>
|
||||
<meta name="robots" content="index, follow, max-image-preview:large" />
|
||||
<link rel="canonical" href="https://www.itziarzameza.dev/huella.html" />
|
||||
<meta name="theme-color" content="#f7f6f8" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:locale" content="es_ES" />
|
||||
<meta property="og:title" content="Huella ecológica web y decisiones técnicas | Itziar ZG" />
|
||||
<meta property="og:description" content="Medición del impacto ambiental de este sitio web y compromisos técnicos para reducirlo." />
|
||||
<meta property="og:url" content="https://www.itziarzameza.dev/huella.html" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="Huella ecológica web y decisiones técnicas | Itziar ZG" />
|
||||
<meta name="twitter:description" content="Medición del impacto ambiental de este sitio web y compromisos técnicos para reducirlo." />
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Article",
|
||||
"headline": "Huella ecológica web y decisiones técnicas",
|
||||
"description": "Medición del impacto ambiental de este sitio web y compromisos técnicos para reducirlo.",
|
||||
"author": {
|
||||
"@type": "Person",
|
||||
"name": "Itziar Zameza García",
|
||||
"url": "https://www.itziarzameza.dev/"
|
||||
},
|
||||
};
|
||||
"publisher": {
|
||||
"@type": "Person",
|
||||
"name": "Itziar Zameza García"
|
||||
},
|
||||
"mainEntityOfPage": "https://www.itziarzameza.dev/huella.html"
|
||||
}
|
||||
</script>
|
||||
<link rel="preload" href="css/styles.css" as="style" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
|
||||
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
|
||||
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
|
||||
<script>
|
||||
window.addEventListener("load", function () {
|
||||
var load = function () {
|
||||
var s = document.createElement("script");
|
||||
s.defer = true;
|
||||
s.src = "https://stats.itziarzameza.dev/script.js";
|
||||
s.setAttribute("data-website-id", "8d8d648f-4a0c-4315-b287-5983ffedc8c4");
|
||||
s.setAttribute("data-domains", "www.itziarzameza.dev");
|
||||
document.body.appendChild(s);
|
||||
};
|
||||
if ("requestIdleCallback" in window) {
|
||||
requestIdleCallback(load, { timeout: 2000 });
|
||||
} else {
|
||||
setTimeout(load, 1500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<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"
|
||||
>
|
||||
<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">
|
||||
@@ -69,6 +92,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
|
||||
@@ -125,7 +149,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">
|
||||
@@ -288,14 +312,14 @@
|
||||
<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"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M440 280H280Q197 280 138.5 338.5Q80 397 80.0 480.0Q80 563 138.5 621.5Q197 680 280 680H440V600H280Q230 600 195.0 565.0Q160 530 160.0 480.0Q160 430 195.0 395.0Q230 360 280 360H440ZM320 440V520H640V440ZM520 280V360H680Q730 360 765.0 395.0Q800 430 800.0 480.0Q800 530 765.0 565.0Q730 600 680 600H520V680H680Q763 680 821.5 621.5Q880 563 880.0 480.0Q880 397 821.5 338.5Q763 280 680 280Z"/></svg>
|
||||
</a>
|
||||
<a
|
||||
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
||||
href="https://github.com/itziarZG"
|
||||
title="GitHub"
|
||||
aria-label="GitHub" title="GitHub"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M680 80Q630 80 595.0 115.0Q560 150 560 200Q560 206 563 228L282 392Q266 377 245.0 368.5Q224 360 200 360Q150 360 115.0 395.0Q80 430 80.0 480.0Q80 530 115.0 565.0Q150 600 200 600Q224 600 245.0 591.5Q266 583 282 568L563 732Q561 739 560.5 745.5Q560 752 560 760Q560 810 595.0 845.0Q630 880 680 880Q730 880 765.0 845.0Q800 810 800 760Q800 710 765.0 675.0Q730 640 680 640Q656 640 635.0 648.5Q614 657 598 672L317 508Q319 501 319.5 494.5Q320 488 320 480Q320 472 319.5 465.5Q319 459 317 452L598 288Q614 303 635.0 311.5Q656 320 680 320Q730 320 765.0 285.0Q800 250 800 200Q800 150 765.0 115.0Q730 80 680 80ZM680 160Q697 160 708.5 171.5Q720 183 720 200Q720 217 708.5 228.5Q697 240 680 240Q663 240 651.5 228.5Q640 217 640 200Q640 183 651.5 171.5Q663 160 680 160ZM200 440Q217 440 228.5 451.5Q240 463 240.0 480.0Q240 497 228.5 508.5Q217 520 200 520Q183 520 171.5 508.5Q160 497 160.0 480.0Q160 463 171.5 451.5Q183 440 200 440ZM720 760Q720 777 708.5 788.5Q697 800 680 800Q663 800 651.5 788.5Q640 777 640 760Q640 743 651.5 731.5Q663 720 680.0 720.0Q697 720 708.5 731.5Q720 743 720 760ZM680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200ZM200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480ZM680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680 760Z"/></svg>
|
||||
</a>
|
||||
@@ -331,6 +355,6 @@
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/main.js"></script>
|
||||
<script defer src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
+224
-250
@@ -3,33 +3,39 @@
|
||||
<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>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<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",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
<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>
|
||||
<link rel="preload" href="css/styles.css" as="style" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link
|
||||
rel="alternate"
|
||||
hreflang="es"
|
||||
@@ -44,31 +50,41 @@
|
||||
rel="alternate"
|
||||
hreflang="en"
|
||||
href="https://www.itziarzameza.dev/index-en.html"
|
||||
/> <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>
|
||||
<link
|
||||
rel="alternate"
|
||||
hreflang="x-default"
|
||||
href="https://www.itziarzameza.dev/index.html"
|
||||
/>
|
||||
<script>
|
||||
window.addEventListener("load", function () {
|
||||
var load = function () {
|
||||
var s = document.createElement("script");
|
||||
s.defer = true;
|
||||
s.src = "https://stats.itziarzameza.dev/script.js";
|
||||
s.setAttribute("data-website-id", "8d8d648f-4a0c-4315-b287-5983ffedc8c4");
|
||||
s.setAttribute("data-domains", "www.itziarzameza.dev");
|
||||
document.body.appendChild(s);
|
||||
};
|
||||
if ("requestIdleCallback" in window) {
|
||||
requestIdleCallback(load, { timeout: 2000 });
|
||||
} else {
|
||||
setTimeout(load, 1500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body
|
||||
class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300"
|
||||
>
|
||||
<a class="skip-link" href="#main-content">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 -->
|
||||
@@ -88,11 +104,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
|
||||
@@ -157,6 +174,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
|
||||
@@ -200,15 +218,17 @@
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<img
|
||||
src="images/hero-gradient.webp"
|
||||
alt=""
|
||||
width="1200"
|
||||
height="514"
|
||||
decoding="async"
|
||||
fetchpriority="high"
|
||||
class="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center"
|
||||
data-alt="Abstract soft purple and pink liquid gradients flowing"
|
||||
style="
|
||||
background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD7jcnN_wxvIYoIUzW4qcK4CoDUZZZNjygy4of13sQuWzPdhmFyLBcD-uo94oXDghcnd1bXI9F8yApHPlBJmTsrsoHrDT7H4NcX0Qv3QSCb8qwZgJV6iPJuI1LjVxfxuJBeaAy9X3nHgeacqLeAJkbb0DQg9-LxVDUdgZUABcx65AW1k59FXjFiuf2K2BAop_ki74vQZC0gsddWQbM6TmU--QLahcLkY54YobaPZeL_Fgh0veydf7Wh7pKAT4s6RFcMDKH0w4Ova98");
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-background-light/80 dark:from-background-dark/80 to-transparent"
|
||||
class="absolute inset-0 bg-gradient-to-t from-background-light/80 dark:from-background-dark/80 to-transparent pointer-events-none"
|
||||
></div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -424,31 +444,31 @@
|
||||
|
||||
<!-- Tab Buttons Container -->
|
||||
<div
|
||||
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8" role="tablist" aria-label="Secciones del laboratorio"
|
||||
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"
|
||||
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" role="tab" aria-selected="false" type="button" id="tab-proyectos-button" aria-controls="tab-proyectos"
|
||||
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" role="tab" aria-selected="false" type="button" id="tab-writing-button" aria-controls="tab-writing"
|
||||
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>
|
||||
@@ -550,13 +570,11 @@
|
||||
node.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
|
||||
<!--
|
||||
<!-- Tab 2: Experiments -->
|
||||
<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
|
||||
@@ -624,9 +642,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Tab 3: Projectes -->
|
||||
<!-- Tab 3: Projectes -->
|
||||
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
|
||||
<!-- Eines Reals -->
|
||||
<div class="mb-12">
|
||||
@@ -634,7 +651,7 @@
|
||||
Eines reals, no demos
|
||||
</h3>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Eivissa Environmental Watch -->
|
||||
<!-- Navidrome -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
@@ -652,35 +669,105 @@
|
||||
/>
|
||||
</svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Eivissa Environmental Watch
|
||||
Servidor Navidrome
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>Al roadmap</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Docker • Hetzner</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flux n8n + Ollama -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M105 399 40 446 240 766 360 626 520 886 640 706 775 920 840 873 642 559 523 738 371 491 250 632ZM580 240Q622 240 651.0 269.0Q680 298 680 340Q680 382 651.0 411.0Q622 440 580 440Q538 440 509.0 411.0Q480 382 480 340Q480 298 509.0 269.0Q538 240 580 240ZM784 80 676 188Q655 174 630.5 167.0Q606 160 580 160Q505 160 452.5 212.5Q400 265 400 340Q400 415 452.5 467.5Q505 520 580 520Q655 520 707.5 467.5Q760 415 760 340Q760 314 753.0 289.5Q746 265 732 244L840 136Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Flux n8n + Ollama
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Lector automatitzat de notícies i del BOIB amb
|
||||
classificació local mitjançant Ollama. Detecta i filtra
|
||||
contingut relacionat amb medi ambient a Eivissa.
|
||||
Pipeline autònom en local que intercepta notes de veu,
|
||||
les transcriu i les processa utilitzant Ollama amb
|
||||
models d'IA de codi obert sense enviar dades a OpenAI.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operatiu</span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>Al roadmap</span
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-slate-400"
|
||||
>Ollama • Navidrome</span
|
||||
>
|
||||
<button
|
||||
class="text-xs text-primary hover:underline font-bold"
|
||||
onclick="openModal('project-3')"
|
||||
>
|
||||
Veure detalls
|
||||
</button>
|
||||
<span class="text-xs text-slate-400"
|
||||
>n8n • Ollama • Whisper</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contribució Codi Obert -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M400 440Q423 440 442.5 434.5Q462 429 480 418V840H720V680H560V280Q560 214 513.0 167.0Q466 120 400.0 120.0Q334 120 287.0 167.0Q240 214 240.0 280.0Q240 346 287.0 393.0Q334 440 400 440Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Contribució Codi Obert
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Cases Tancades -->
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
|
||||
>Sense iniciar</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Forgejo • GitHub</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visualització Dades Balears -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M200 280V607Q165 620 142.5 650.5Q120 681 120 720Q120 770 155.0 805.0Q190 840 240 840Q290 840 325.0 805.0Q360 770 360 720Q360 681 337.5 650.5Q315 620 280 607V280Q280 247 303.5 223.5Q327 200 360 200Q393 200 416.5 223.5Q440 247 440 280V680Q440 746 487.0 793.0Q534 840 600 840Q666 840 713.0 793.0Q760 746 760 680V353Q795 340 817.5 309.5Q840 279 840 240Q840 190 805.0 155.0Q770 120 720 120Q670 120 635.0 155.0Q600 190 600 240Q600 279 622.5 310.0Q645 341 680 353V680Q680 713 656.5 736.5Q633 760 600.0 760.0Q567 760 543.5 736.5Q520 713 520 680V280Q520 214 473.0 167.0Q426 120 360.0 120.0Q294 120 247.0 167.0Q200 214 200 280ZM240 680Q257 680 268.5 691.5Q280 703 280 720Q280 737 268.5 748.5Q257 760 240 760Q223 760 211.5 748.5Q200 737 200 720Q200 703 211.5 691.5Q223 680 240 680ZM720 200Q737 200 748.5 211.5Q760 223 760 240Q760 257 748.5 268.5Q737 280 720 280Q703 280 691.5 268.5Q680 257 680 240Q680 223 691.5 211.5Q703 200 720 200ZM240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720ZM720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Visualització Dades Balears
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Tauler interactiu i visualització ecològica sobre el
|
||||
consum d'aigua i recursos a l'arxipèlag balear,
|
||||
dissenyat amb tecnologies web lleugeres.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>Migració pendent (actualment a Vercel)</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>HTML5 • JS • D3.js</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cases Tancades -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
@@ -710,134 +797,8 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Navidrome -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M400 440Q423 440 442.5 434.5Q462 429 480 418V840H720V680H560V280Q560 214 513.0 167.0Q466 120 400.0 120.0Q334 120 287.0 167.0Q240 214 240.0 280.0Q240 346 287.0 393.0Q334 440 400 440Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Servidor Navidrome
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operatiu</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Docker • Hetzner</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flux n8n + Ollama -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M200 280V607Q165 620 142.5 650.5Q120 681 120 720Q120 770 155.0 805.0Q190 840 240 840Q290 840 325.0 805.0Q360 770 360 720Q360 681 337.5 650.5Q315 620 280 607V280Q280 247 303.5 223.5Q327 200 360 200Q393 200 416.5 223.5Q440 247 440 280V680Q440 746 487.0 793.0Q534 840 600 840Q666 840 713.0 793.0Q760 746 760 680V353Q795 340 817.5 309.5Q840 279 840 240Q840 190 805.0 155.0Q770 120 720 120Q670 120 635.0 155.0Q600 190 600 240Q600 279 622.5 310.0Q645 341 680 353V680Q680 713 656.5 736.5Q633 760 600.0 760.0Q567 760 543.5 736.5Q520 713 520 680V280Q520 214 473.0 167.0Q426 120 360.0 120.0Q294 120 247.0 167.0Q200 214 200 280ZM240 680Q257 680 268.5 691.5Q280 703 280 720Q280 737 268.5 748.5Q257 760 240 760Q223 760 211.5 748.5Q200 737 200 720Q200 703 211.5 691.5Q223 680 240 680ZM720 200Q737 200 748.5 211.5Q760 223 760 240Q760 257 748.5 268.5Q737 280 720 280Q703 280 691.5 268.5Q680 257 680 240Q680 223 691.5 211.5Q703 200 720 200ZM240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720ZM720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Flux n8n + Ollama
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Pipeline autònom en local que intercepta notes de veu,
|
||||
les transcriu i les processa utilitzant Ollama amb
|
||||
models d'IA de codi obert sense enviar dades a OpenAI.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operatiu</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>n8n • Ollama • Whisper</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visualització Dades Balears -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M105 399 40 446 240 766 360 626 520 886 640 706 775 920 840 873 642 559 523 738 371 491 250 632ZM580 240Q622 240 651.0 269.0Q680 298 680 340Q680 382 651.0 411.0Q622 440 580 440Q538 440 509.0 411.0Q480 382 480 340Q480 298 509.0 269.0Q538 240 580 240ZM784 80 676 188Q655 174 630.5 167.0Q606 160 580 160Q505 160 452.5 212.5Q400 265 400 340Q400 415 452.5 467.5Q505 520 580 520Q655 520 707.5 467.5Q760 415 760 340Q760 314 753.0 289.5Q746 265 732 244L840 136Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Visualització Dades Balears
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Tauler interactiu i visualització ecològica sobre el
|
||||
consum d'aigua i recursos a l'arxipèlag balear,
|
||||
dissenyat amb tecnologies web lleugeres.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>Migració pendent (actualment a Vercel)</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>HTML5 • JS • D3.js</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contribució Codi Obert -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M640 440 474 602Q443 632 421.5 668.5Q400 705 400 748Q400 803 438.5 841.5Q477 880 532 880Q564 880 592.0 866.5Q620 853 640 830Q660 853 688.0 866.5Q716 880 748 880Q803 880 841.5 841.5Q880 803 880 748Q880 705 859.0 668.5Q838 632 807 602ZM640 552 749 659Q768 678 784.0 699.5Q800 721 800 748Q800 770 785.0 785.0Q770 800 748 800Q734 800 721.5 794.5Q709 789 700 778L640 706L580 778Q571 789 558.5 794.5Q546 800 532 800Q510 800 495.0 785.0Q480 770 480 748Q480 721 496.0 699.5Q512 678 531 659ZM280 220 558 144 796 218Q791 227 781.5 233.5Q772 240 760 240H558Q531 240 515.0 242.0Q499 244 482 250L389 281L411 359L492 332Q509 327 532.0 324.0Q555 321 600 320Q600 320 600.0 320.0Q600 320 600 320Q600 331 593.5 341.0Q587 351 578 354L344 440Q344 440 344.0 440.0Q344 440 344 440H280ZM40 80V520H344Q351 520 358.0 518.5Q365 517 371 515L606 428Q639 416 659.5 386.0Q680 356 680 320H760Q810 320 845.0 287.0Q880 254 880 200V160L560 60L280 138V80ZM120 160H200V440H120ZM640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Contribució Codi Obert
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
|
||||
>Sense iniciar</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Forgejo • GitHub</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Treball Anterior -->
|
||||
<div
|
||||
@@ -915,7 +876,8 @@
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab 4: Writing -->
|
||||
|
||||
<!-- Tab 4: Writing -->
|
||||
<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
|
||||
@@ -1130,14 +1092,14 @@
|
||||
<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"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M440 280H280Q197 280 138.5 338.5Q80 397 80.0 480.0Q80 563 138.5 621.5Q197 680 280 680H440V600H280Q230 600 195.0 565.0Q160 530 160.0 480.0Q160 430 195.0 395.0Q230 360 280 360H440ZM320 440V520H640V440ZM520 280V360H680Q730 360 765.0 395.0Q800 430 800.0 480.0Q800 530 765.0 565.0Q730 600 680 600H520V680H680Q763 680 821.5 621.5Q880 563 880.0 480.0Q880 397 821.5 338.5Q763 280 680 280Z"/></svg>
|
||||
</a>
|
||||
<!-- <a
|
||||
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
||||
href="https://github.com/itziarZG"
|
||||
title="GitHub"
|
||||
aria-label="GitHub" title="GitHub"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M680 80Q630 80 595.0 115.0Q560 150 560 200Q560 206 563 228L282 392Q266 377 245.0 368.5Q224 360 200 360Q150 360 115.0 395.0Q80 430 80.0 480.0Q80 530 115.0 565.0Q150 600 200 600Q224 600 245.0 591.5Q266 583 282 568L563 732Q561 739 560.5 745.5Q560 752 560 760Q560 810 595.0 845.0Q630 880 680 880Q730 880 765.0 845.0Q800 810 800 760Q800 710 765.0 675.0Q730 640 680 640Q656 640 635.0 648.5Q614 657 598 672L317 508Q319 501 319.5 494.5Q320 488 320 480Q320 472 319.5 465.5Q319 459 317 452L598 288Q614 303 635.0 311.5Q656 320 680 320Q730 320 765.0 285.0Q800 250 800 200Q800 150 765.0 115.0Q730 80 680 80ZM680 160Q697 160 708.5 171.5Q720 183 720 200Q720 217 708.5 228.5Q697 240 680 240Q663 240 651.5 228.5Q640 217 640 200Q640 183 651.5 171.5Q663 160 680 160ZM200 440Q217 440 228.5 451.5Q240 463 240.0 480.0Q240 497 228.5 508.5Q217 520 200 520Q183 520 171.5 508.5Q160 497 160.0 480.0Q160 463 171.5 451.5Q183 440 200 440ZM720 760Q720 777 708.5 788.5Q697 800 680 800Q663 800 651.5 788.5Q640 777 640 760Q640 743 651.5 731.5Q663 720 680.0 720.0Q697 720 708.5 731.5Q720 743 720 760ZM680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200ZM200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480ZM680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680 760Z"/></svg>
|
||||
</a> -->
|
||||
@@ -1173,6 +1135,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')"
|
||||
>
|
||||
@@ -1200,6 +1163,8 @@
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw"
|
||||
alt="AI Knowledge Pipeline"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
@@ -1284,6 +1249,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')"
|
||||
>
|
||||
@@ -1311,6 +1277,8 @@
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfqsuP4x2xr1tNEyjnxJ4D517oj2e5uvU9_41GuMiygljVgzuSLFs-teeZfNDCD7jP8ShaU_Vgc_L0qzjAtd5I-8-oVtoxi8ih81LLt3l5IM6-RvPCVAuoIx9jK7q9SvAcvet8d5Fg9YQCndNdiKbWHXgyEkD9ARj0x7EAdyzsGThzWbcVHof2YHZjw3aXpVV7sq0YrQqsQ07WON23OSALCIHo6W80FBSEUydUs6yvDyEoT-XJlLHO_xKX4xS8J4x38c1nhEDIuiw"
|
||||
alt="ChefGPT"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
@@ -1401,12 +1369,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal 3: Eivissa Environmental Watch -->
|
||||
<div
|
||||
<!-- Modal 3: Content Processing Automation -->
|
||||
<!-- <div
|
||||
id="project-3-modal"
|
||||
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')"
|
||||
>
|
||||
@@ -1420,7 +1389,7 @@
|
||||
id="project-3-modal-title"
|
||||
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
||||
>
|
||||
Eivissa Environmental Watch
|
||||
Content Processing Automation
|
||||
</h2>
|
||||
<button
|
||||
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
@@ -1432,63 +1401,71 @@
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/eivissa-environmental-watch.webp"
|
||||
alt="Eivissa Environmental Watch"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
|
||||
alt="Content Processing Automation"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Descripció
|
||||
Descripción
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Lector automatitzat de notícies locals i del BOIB (Butlletí
|
||||
Oficial de les Illes Balears) amb classificació local
|
||||
mitjançant Ollama. Detecta i filtra el contingut relacionat amb
|
||||
medi ambient a Eivissa, mostrant només el que és rellevant i
|
||||
enllaçant a la font original (notícia o BOIB).
|
||||
Pipeline integral de procesamiento de contenido multimedia que
|
||||
automatiza desde la ingesta hasta la distribución. Transforma
|
||||
múltiples formatos (audio, vídeo, PDFs, texto) en contenido
|
||||
estructurado y lista para publicación en redes sociales.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Funcionalitats
|
||||
Funcionalidades
|
||||
</h3>
|
||||
<ul
|
||||
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<li>Scraping periòdic de fonts de notícies locals i BOIB</li>
|
||||
<li>Classificació local amb models d'IA de codi obert (Ollama)</li>
|
||||
<li>Filtratge automàtic per temàtica mediambiental</li>
|
||||
<li>Interfície lleugera per consultar les classificacions</li>
|
||||
<li>Enllaços directes al BOIB i a les notícies originals</li>
|
||||
<li>Zero enviament de dades a APIs comercials: privacitat total</li>
|
||||
<li>Procesamiento de múltiples formatos multimedia</li>
|
||||
<li>Transcripción y análisis automático</li>
|
||||
<li>Generación de títulos, descripciones y hashtags con IA</li>
|
||||
<li>Redimensionamiento y optimización de imágenes</li>
|
||||
<li>Publicación automática en redes sociales</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Stack Tecnològic
|
||||
Stack Tecnológico
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Ollama (LLM local)</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Navidrome (servidor)</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Hetzner (infraestructura verda)</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Docker</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">HTML estàtic lleuger</span>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>Workflow Automation</span
|
||||
>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>FFmpeg (vídeo)</span
|
||||
>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>OpenAI API</span
|
||||
>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>Social Media APIs</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Resultat
|
||||
Resultado
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300">
|
||||
Lloc actiu en producció, publicant diàriament contingut
|
||||
ambiental curat per una IA local. L'arquitectura totalment
|
||||
autoallotjada garanteix sobirania sobre les dades i zero
|
||||
dependència de serveis al núvol externs.
|
||||
Automatización completa de la cadena de producción de contenido,
|
||||
reduciendo tiempo manual en un 90% y garantizando consistencia
|
||||
en la calidad y el formato de publicaciones.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1497,16 +1474,13 @@
|
||||
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
||||
onclick="closeModal('project-3')"
|
||||
>
|
||||
Tancar
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/main.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+222
-249
@@ -3,33 +3,39 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>Itziar ZG | Sovereign & Sustainable Web Development</title>
|
||||
<title>Itziar ZG | Accessible & Sustainable Web Development</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<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",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
<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 & 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 & 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>
|
||||
<link rel="preload" href="css/styles.css" as="style" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link
|
||||
rel="alternate"
|
||||
hreflang="es"
|
||||
@@ -44,31 +50,41 @@
|
||||
rel="alternate"
|
||||
hreflang="en"
|
||||
href="https://www.itziarzameza.dev/index-en.html"
|
||||
/> <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>
|
||||
<link
|
||||
rel="alternate"
|
||||
hreflang="x-default"
|
||||
href="https://www.itziarzameza.dev/index.html"
|
||||
/>
|
||||
<script>
|
||||
window.addEventListener("load", function () {
|
||||
var load = function () {
|
||||
var s = document.createElement("script");
|
||||
s.defer = true;
|
||||
s.src = "https://stats.itziarzameza.dev/script.js";
|
||||
s.setAttribute("data-website-id", "8d8d648f-4a0c-4315-b287-5983ffedc8c4");
|
||||
s.setAttribute("data-domains", "www.itziarzameza.dev");
|
||||
document.body.appendChild(s);
|
||||
};
|
||||
if ("requestIdleCallback" in window) {
|
||||
requestIdleCallback(load, { timeout: 2000 });
|
||||
} else {
|
||||
setTimeout(load, 1500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body
|
||||
class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300"
|
||||
>
|
||||
<a class="skip-link" href="#main-content">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 -->
|
||||
@@ -88,11 +104,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
|
||||
@@ -157,6 +174,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
|
||||
@@ -200,15 +218,17 @@
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<img
|
||||
src="images/hero-gradient.webp"
|
||||
alt=""
|
||||
width="1200"
|
||||
height="514"
|
||||
decoding="async"
|
||||
fetchpriority="high"
|
||||
class="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center"
|
||||
data-alt="Abstract soft purple and pink liquid gradients flowing"
|
||||
style="
|
||||
background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD7jcnN_wxvIYoIUzW4qcK4CoDUZZZNjygy4of13sQuWzPdhmFyLBcD-uo94oXDghcnd1bXI9F8yApHPlBJmTsrsoHrDT7H4NcX0Qv3QSCb8qwZgJV6iPJuI1LjVxfxuJBeaAy9X3nHgeacqLeAJkbb0DQg9-LxVDUdgZUABcx65AW1k59FXjFiuf2K2BAop_ki74vQZC0gsddWQbM6TmU--QLahcLkY54YobaPZeL_Fgh0veydf7Wh7pKAT4s6RFcMDKH0w4Ova98");
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-background-light/80 dark:from-background-dark/80 to-transparent"
|
||||
class="absolute inset-0 bg-gradient-to-t from-background-light/80 dark:from-background-dark/80 to-transparent pointer-events-none"
|
||||
></div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -421,31 +441,31 @@
|
||||
|
||||
<!-- Tab Buttons Container -->
|
||||
<div
|
||||
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8" role="tablist" aria-label="Secciones del laboratorio"
|
||||
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"
|
||||
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" role="tab" aria-selected="false" type="button" id="tab-proyectos-button" aria-controls="tab-proyectos"
|
||||
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" role="tab" aria-selected="false" type="button" id="tab-writing-button" aria-controls="tab-writing"
|
||||
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>
|
||||
@@ -534,13 +554,11 @@
|
||||
Ethical, privacy-respecting, cookieless web analytics.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
|
||||
<!--
|
||||
<!-- Tab 2: Experiments -->
|
||||
<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
|
||||
@@ -608,9 +626,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Tab 3: Projects -->
|
||||
<!-- Tab 3: Projects -->
|
||||
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
|
||||
<!-- Herramientas Reales -->
|
||||
<div class="mb-12">
|
||||
@@ -618,7 +635,7 @@
|
||||
Real tools, not demos
|
||||
</h3>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Eivissa Environmental Watch -->
|
||||
<!-- Navidrome -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
@@ -626,35 +643,105 @@
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M724 222Q632 222 569.5 281.0Q507 340 502 416L444 416Q438 340 376.0 281.0Q314 222 222 222Q152 222 102 264Q79 222 79 174Q79 96 137.5 41.5Q196 -13 274 -13Q343 -13 396.0 31.0Q449 75 466 140Q483 75 536.0 31.0Q589 -13 658 -13Q736 -13 794.5 41.5Q853 96 853 174Q853 222 830 264Q780 222 724 222ZM502 496L502 510Q502 612 437.5 689.0Q373 766 274 780L274 940L354 940L354 780Q255 766 190.5 689.0Q126 612 126 510L126 496Q126 481 137.0 470.0Q148 459 163 459L465 459Q480 459 491.0 470.0Q502 481 502 496ZM502 822Q502 808 513.0 797.0Q524 786 538 786L554 786L554 612L626 612Q682 612 723.0 653.0Q764 694 764 750L764 838L848 838Q863 838 874.0 849.0Q885 860 885 875L885 891Q885 906 874.0 917.0Q863 928 848 928L764 928L764 940L706 940L706 928L538 928L538 786Q538 786 538.0 786.0Q538 786 538 786Q538 822 538.0 822.0Q538 822 538 822L502 822Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Eivissa Environmental Watch
|
||||
Navidrome Server
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>On the roadmap</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Docker • Hetzner</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- n8n + Ollama Pipeline -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M105 399 40 446 240 766 360 626 520 886 640 706 775 920 840 873 642 559 523 738 371 491 250 632ZM580 240Q622 240 651.0 269.0Q680 298 680 340Q680 382 651.0 411.0Q622 440 580 440Q538 440 509.0 411.0Q480 382 480 340Q480 298 509.0 269.0Q538 240 580 240ZM784 80 676 188Q655 174 630.5 167.0Q606 160 580 160Q505 160 452.5 212.5Q400 265 400 340Q400 415 452.5 467.5Q505 520 580 520Q655 520 707.5 467.5Q760 415 760 340Q760 314 753.0 289.5Q746 265 732 244L840 136Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
n8n + Ollama Pipeline
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Automated reader of news and BOIB with local
|
||||
classification via Ollama. Detects and filters
|
||||
environment-related content from Eivissa sources.
|
||||
Autonomous local pipeline that captures voice notes,
|
||||
transcribes them, and processes them using Ollama with
|
||||
open-source AI models without sending data to OpenAI.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operational</span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>On the roadmap</span
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-slate-400"
|
||||
>Ollama • Navidrome</span
|
||||
>
|
||||
<button
|
||||
class="text-xs text-primary hover:underline font-bold"
|
||||
onclick="openModal('project-3')"
|
||||
>
|
||||
View details
|
||||
</button>
|
||||
<span class="text-xs text-slate-400"
|
||||
>n8n • Ollama • Whisper</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Open Source Contribution -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M400 440Q423 440 442.5 434.5Q462 429 480 418V840H720V680H560V280Q560 214 513.0 167.0Q466 120 400.0 120.0Q334 120 287.0 167.0Q240 214 240.0 280.0Q240 346 287.0 393.0Q334 440 400 440Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Open Source Contribution
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Cases Tancades -->
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
|
||||
>Not started</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Forgejo • GitHub</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Balearic Data Visualization -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M200 280V607Q165 620 142.5 650.5Q120 681 120 720Q120 770 155.0 805.0Q190 840 240 840Q290 840 325.0 805.0Q360 770 360 720Q360 681 337.5 650.5Q315 620 280 607V280Q280 247 303.5 223.5Q327 200 360 200Q393 200 416.5 223.5Q440 247 440 280V680Q440 746 487.0 793.0Q534 840 600 840Q666 840 713.0 793.0Q760 746 760 680V353Q795 340 817.5 309.5Q840 279 840 240Q840 190 805.0 155.0Q770 120 720 120Q670 120 635.0 155.0Q600 190 600 240Q600 279 622.5 310.0Q645 341 680 353V680Q680 713 656.5 736.5Q633 760 600.0 760.0Q567 760 543.5 736.5Q520 713 520 680V280Q520 214 473.0 167.0Q426 120 360.0 120.0Q294 120 247.0 167.0Q200 214 200 280ZM240 680Q257 680 268.5 691.5Q280 703 280 720Q280 737 268.5 748.5Q257 760 240 760Q223 760 211.5 748.5Q200 737 200 720Q200 703 211.5 691.5Q223 680 240 680ZM720 200Q737 200 748.5 211.5Q760 223 760 240Q760 257 748.5 268.5Q737 280 720 280Q703 280 691.5 268.5Q680 257 680 240Q680 223 691.5 211.5Q703 200 720 200ZM240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720ZM720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Balearic Data Visualization
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Interactive dashboard and ecological visualization of
|
||||
water and resource consumption in the Balearic
|
||||
archipelago, built with lightweight web technologies.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>Migration pending (currently on Vercel)</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>HTML5 • JS • D3.js</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cases Tancades -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
@@ -684,133 +771,8 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Navidrome -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M400 440Q423 440 442.5 434.5Q462 429 480 418V840H720V680H560V280Q560 214 513.0 167.0Q466 120 400.0 120.0Q334 120 287.0 167.0Q240 214 240.0 280.0Q240 346 287.0 393.0Q334 440 400 440Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Navidrome Server
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operational</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Docker • Hetzner</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- n8n + Ollama Pipeline -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M200 280V607Q165 620 142.5 650.5Q120 681 120 720Q120 770 155.0 805.0Q190 840 240 840Q290 840 325.0 805.0Q360 770 360 720Q360 681 337.5 650.5Q315 620 280 607V280Q280 247 303.5 223.5Q327 200 360 200Q393 200 416.5 223.5Q440 247 440 280V680Q440 746 487.0 793.0Q534 840 600 840Q666 840 713.0 793.0Q760 746 760 680V353Q795 340 817.5 309.5Q840 279 840 240Q840 190 805.0 155.0Q770 120 720 120Q670 120 635.0 155.0Q600 190 600 240Q600 279 622.5 310.0Q645 341 680 353V680Q680 713 656.5 736.5Q633 760 600.0 760.0Q567 760 543.5 736.5Q520 713 520 680V280Q520 214 473.0 167.0Q426 120 360.0 120.0Q294 120 247.0 167.0Q200 214 200 280ZM240 680Q257 680 268.5 691.5Q280 703 280 720Q280 737 268.5 748.5Q257 760 240 760Q223 760 211.5 748.5Q200 737 200 720Q200 703 211.5 691.5Q223 680 240 680ZM720 200Q737 200 748.5 211.5Q760 223 760 240Q760 257 748.5 268.5Q737 280 720 280Q703 280 691.5 268.5Q680 257 680 240Q680 223 691.5 211.5Q703 200 720 200ZM240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720ZM720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
n8n + Ollama Pipeline
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Autonomous local pipeline that captures voice notes,
|
||||
transcribes them, and processes them using Ollama with
|
||||
open-source AI models without sending data to OpenAI.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operational</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>n8n • Ollama • Whisper</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Balearic Data Visualization -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M105 399 40 446 240 766 360 626 520 886 640 706 775 920 840 873 642 559 523 738 371 491 250 632ZM580 240Q622 240 651.0 269.0Q680 298 680 340Q680 382 651.0 411.0Q622 440 580 440Q538 440 509.0 411.0Q480 382 480 340Q480 298 509.0 269.0Q538 240 580 240ZM784 80 676 188Q655 174 630.5 167.0Q606 160 580 160Q505 160 452.5 212.5Q400 265 400 340Q400 415 452.5 467.5Q505 520 580 520Q655 520 707.5 467.5Q760 415 760 340Q760 314 753.0 289.5Q746 265 732 244L840 136Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Balearic Data Visualization
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Interactive dashboard and ecological visualization of
|
||||
water and resource consumption in the Balearic
|
||||
archipelago, built with lightweight web technologies.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>Migration pending (currently on Vercel)</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>HTML5 • JS • D3.js</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Open Source Contribution -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M640 440 474 602Q443 632 421.5 668.5Q400 705 400 748Q400 803 438.5 841.5Q477 880 532 880Q564 880 592.0 866.5Q620 853 640 830Q660 853 688.0 866.5Q716 880 748 880Q803 880 841.5 841.5Q880 803 880 748Q880 705 859.0 668.5Q838 632 807 602ZM640 552 749 659Q768 678 784.0 699.5Q800 721 800 748Q800 770 785.0 785.0Q770 800 748 800Q734 800 721.5 794.5Q709 789 700 778L640 706L580 778Q571 789 558.5 794.5Q546 800 532 800Q510 800 495.0 785.0Q480 770 480 748Q480 721 496.0 699.5Q512 678 531 659ZM280 220 558 144 796 218Q791 227 781.5 233.5Q772 240 760 240H558Q531 240 515.0 242.0Q499 244 482 250L389 281L411 359L492 332Q509 327 532.0 324.0Q555 321 600 320Q600 320 600.0 320.0Q600 320 600 320Q600 331 593.5 341.0Q587 351 578 354L344 440Q344 440 344.0 440.0Q344 440 344 440H280ZM40 80V520H344Q351 520 358.0 518.5Q365 517 371 515L606 428Q639 416 659.5 386.0Q680 356 680 320H760Q810 320 845.0 287.0Q880 254 880 200V160L560 60L280 138V80ZM120 160H200V440H120ZM640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Open Source Contribution
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
|
||||
>Not started</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Forgejo • GitHub</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Trabajo Anterior (Proyectos de IA previos) -->
|
||||
<div
|
||||
@@ -887,7 +849,6 @@
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 4: Writing -->
|
||||
<div id="tab-writing" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-writing-button" aria-hidden="true">
|
||||
@@ -1104,14 +1065,14 @@
|
||||
<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"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M440 280H280Q197 280 138.5 338.5Q80 397 80.0 480.0Q80 563 138.5 621.5Q197 680 280 680H440V600H280Q230 600 195.0 565.0Q160 530 160.0 480.0Q160 430 195.0 395.0Q230 360 280 360H440ZM320 440V520H640V440ZM520 280V360H680Q730 360 765.0 395.0Q800 430 800.0 480.0Q800 530 765.0 565.0Q730 600 680 600H520V680H680Q763 680 821.5 621.5Q880 563 880.0 480.0Q880 397 821.5 338.5Q763 280 680 280Z"/></svg>
|
||||
</a>
|
||||
<!-- <a
|
||||
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
||||
href="https://github.com/itziarZG"
|
||||
title="GitHub"
|
||||
aria-label="GitHub" title="GitHub"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M680 80Q630 80 595.0 115.0Q560 150 560 200Q560 206 563 228L282 392Q266 377 245.0 368.5Q224 360 200 360Q150 360 115.0 395.0Q80 430 80.0 480.0Q80 530 115.0 565.0Q150 600 200 600Q224 600 245.0 591.5Q266 583 282 568L563 732Q561 739 560.5 745.5Q560 752 560 760Q560 810 595.0 845.0Q630 880 680 880Q730 880 765.0 845.0Q800 810 800 760Q800 710 765.0 675.0Q730 640 680 640Q656 640 635.0 648.5Q614 657 598 672L317 508Q319 501 319.5 494.5Q320 488 320 480Q320 472 319.5 465.5Q319 459 317 452L598 288Q614 303 635.0 311.5Q656 320 680 320Q730 320 765.0 285.0Q800 250 800 200Q800 150 765.0 115.0Q730 80 680 80ZM680 160Q697 160 708.5 171.5Q720 183 720 200Q720 217 708.5 228.5Q697 240 680 240Q663 240 651.5 228.5Q640 217 640 200Q640 183 651.5 171.5Q663 160 680 160ZM200 440Q217 440 228.5 451.5Q240 463 240.0 480.0Q240 497 228.5 508.5Q217 520 200 520Q183 520 171.5 508.5Q160 497 160.0 480.0Q160 463 171.5 451.5Q183 440 200 440ZM720 760Q720 777 708.5 788.5Q697 800 680 800Q663 800 651.5 788.5Q640 777 640 760Q640 743 651.5 731.5Q663 720 680.0 720.0Q697 720 708.5 731.5Q720 743 720 760ZM680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200ZM200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480ZM680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680 760Z"/></svg>
|
||||
</a> -->
|
||||
@@ -1147,6 +1108,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')"
|
||||
>
|
||||
@@ -1174,6 +1136,8 @@
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw"
|
||||
alt="AI Knowledge Pipeline"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
@@ -1257,6 +1221,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')"
|
||||
>
|
||||
@@ -1284,6 +1249,8 @@
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfqsuP4x2xr1tNEyjnxJ4D517oj2e5uvU9_41GuMiygljVgzuSLFs-teeZfNDCD7jP8ShaU_Vgc_L0qzjAtd5I-8-oVtoxi8ih81LLt3l5IM6-RvPCVAuoIx9jK7q9SvAcvet8d5Fg9YQCndNdiKbWHXgyEkD9ARj0x7EAdyzsGThzWbcVHof2YHZjw3aXpVV7sq0YrQqsQ07WON23OSALCIHo6W80FBSEUydUs6yvDyEoT-XJlLHO_xKX4xS8J4x38c1nhEDIuiw"
|
||||
alt="ChefGPT"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
@@ -1371,12 +1338,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal 3: Eivissa Environmental Watch -->
|
||||
<div
|
||||
<!-- Modal 3: Content Processing Automation -->
|
||||
<!-- <div
|
||||
id="project-3-modal"
|
||||
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')"
|
||||
>
|
||||
@@ -1390,7 +1358,7 @@
|
||||
id="project-3-modal-title"
|
||||
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
||||
>
|
||||
Eivissa Environmental Watch
|
||||
Content Processing Automation
|
||||
</h2>
|
||||
<button
|
||||
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
@@ -1402,63 +1370,71 @@
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/eivissa-environmental-watch.webp"
|
||||
alt="Eivissa Environmental Watch"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
|
||||
alt="Content Processing Automation"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Description
|
||||
Descripción
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Automated reader of local news and BOIB (Official Gazette of
|
||||
the Balearic Islands) with local classification via Ollama. It
|
||||
detects and filters environment-related content from Eivissa
|
||||
sources, surfacing only what's relevant and linking back to the
|
||||
original article or gazette entry.
|
||||
Pipeline integral de procesamiento de contenido multimedia que
|
||||
automatiza desde la ingesta hasta la distribución. Transforma
|
||||
múltiples formatos (audio, vídeo, PDFs, texto) en contenido
|
||||
estructurado y lista para publicación en redes sociales.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Features
|
||||
Funcionalidades
|
||||
</h3>
|
||||
<ul
|
||||
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<li>Periodic scraping of local news sources and BOIB</li>
|
||||
<li>Local classification using open-source AI models (Ollama)</li>
|
||||
<li>Automatic filtering by environmental topic</li>
|
||||
<li>Lightweight UI to browse classifications</li>
|
||||
<li>Direct links to BOIB entries and original news articles</li>
|
||||
<li>Zero data sent to commercial APIs: full privacy</li>
|
||||
<li>Procesamiento de múltiples formatos multimedia</li>
|
||||
<li>Transcripción y análisis automático</li>
|
||||
<li>Generación de títulos, descripciones y hashtags con IA</li>
|
||||
<li>Redimensionamiento y optimización de imágenes</li>
|
||||
<li>Publicación automática en redes sociales</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Tech Stack
|
||||
Stack Tecnológico
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Ollama (local LLM)</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Navidrome (server)</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Hetzner (green infrastructure)</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Docker</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Static lightweight HTML</span>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>Workflow Automation</span
|
||||
>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>FFmpeg (vídeo)</span
|
||||
>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>OpenAI API</span
|
||||
>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>Social Media APIs</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Outcome
|
||||
Resultado
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300">
|
||||
Live production site, publishing daily environment-related
|
||||
content curated by a local AI. The fully self-hosted
|
||||
architecture guarantees data sovereignty and zero dependency on
|
||||
external cloud services.
|
||||
Automatización completa de la cadena de producción de contenido,
|
||||
reduciendo tiempo manual en un 90% y garantizando consistencia
|
||||
en la calidad y el formato de publicaciones.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1467,16 +1443,13 @@
|
||||
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
||||
onclick="closeModal('project-3')"
|
||||
>
|
||||
Close
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/main.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+214
-256
@@ -3,72 +3,73 @@
|
||||
<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>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<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",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
<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>
|
||||
<link
|
||||
rel="alternate"
|
||||
hreflang="es"
|
||||
hreflang="x-default"
|
||||
href="https://www.itziarzameza.dev/index.html"
|
||||
/>
|
||||
<link
|
||||
rel="alternate"
|
||||
hreflang="ca"
|
||||
href="https://www.itziarzameza.dev/index-ca.html"
|
||||
/>
|
||||
<link
|
||||
rel="alternate"
|
||||
hreflang="en"
|
||||
href="https://www.itziarzameza.dev/index-en.html"
|
||||
/> <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>
|
||||
<link rel="preload" href="css/styles.css" as="style" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<script>
|
||||
window.addEventListener("load", function () {
|
||||
var load = function () {
|
||||
var s = document.createElement("script");
|
||||
s.defer = true;
|
||||
s.src = "https://stats.itziarzameza.dev/script.js";
|
||||
s.setAttribute("data-website-id", "8d8d648f-4a0c-4315-b287-5983ffedc8c4");
|
||||
s.setAttribute("data-domains", "www.itziarzameza.dev");
|
||||
document.body.appendChild(s);
|
||||
};
|
||||
if ("requestIdleCallback" in window) {
|
||||
requestIdleCallback(load, { timeout: 2000 });
|
||||
} else {
|
||||
setTimeout(load, 1500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body
|
||||
class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300"
|
||||
>
|
||||
<a class="skip-link" href="#main-content">Saltar al contenido principal</a>
|
||||
<div class="relative min-h-screen overflow-hidden iridescent-bg">
|
||||
<!-- 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 -->
|
||||
@@ -88,11 +89,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
|
||||
@@ -157,6 +159,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
|
||||
@@ -206,15 +209,17 @@
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<img
|
||||
src="images/hero-gradient.webp"
|
||||
alt=""
|
||||
width="1200"
|
||||
height="514"
|
||||
decoding="async"
|
||||
fetchpriority="high"
|
||||
class="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center"
|
||||
data-alt="Abstract soft purple and pink liquid gradients flowing"
|
||||
style="
|
||||
background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD7jcnN_wxvIYoIUzW4qcK4CoDUZZZNjygy4of13sQuWzPdhmFyLBcD-uo94oXDghcnd1bXI9F8yApHPlBJmTsrsoHrDT7H4NcX0Qv3QSCb8qwZgJV6iPJuI1LjVxfxuJBeaAy9X3nHgeacqLeAJkbb0DQg9-LxVDUdgZUABcx65AW1k59FXjFiuf2K2BAop_ki74vQZC0gsddWQbM6TmU--QLahcLkY54YobaPZeL_Fgh0veydf7Wh7pKAT4s6RFcMDKH0w4Ova98");
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-background-light/80 dark:from-background-dark/80 to-transparent"
|
||||
class="absolute inset-0 bg-gradient-to-t from-background-light/80 dark:from-background-dark/80 to-transparent pointer-events-none"
|
||||
></div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -433,31 +438,31 @@
|
||||
|
||||
<!-- Tab Buttons Container -->
|
||||
<div
|
||||
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8" role="tablist" aria-label="Secciones del laboratorio"
|
||||
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"
|
||||
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" role="tab" aria-selected="false" type="button" id="tab-proyectos-button" aria-controls="tab-proyectos"
|
||||
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" role="tab" aria-selected="false" type="button" id="tab-writing-button" aria-controls="tab-writing"
|
||||
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>
|
||||
@@ -549,13 +554,11 @@
|
||||
cookieless.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
|
||||
<!--
|
||||
<!-- Tab 2: Experimentos -->
|
||||
<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
|
||||
@@ -623,9 +626,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Tab 3: Proyectos -->
|
||||
<!-- Tab 3: Proyectos -->
|
||||
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
|
||||
<!-- Herramientas Reales -->
|
||||
<div class="mb-12">
|
||||
@@ -633,7 +635,7 @@
|
||||
Herramientas reales, no demos
|
||||
</h3>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Eivissa Environmental Watch -->
|
||||
<!-- Navidrome -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
@@ -641,35 +643,105 @@
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M724 222Q632 222 569.5 281.0Q507 340 502 416L444 416Q438 340 376.0 281.0Q314 222 222 222Q152 222 102 264Q79 222 79 174Q79 96 137.5 41.5Q196 -13 274 -13Q343 -13 396.0 31.0Q449 75 466 140Q483 75 536.0 31.0Q589 -13 658 -13Q736 -13 794.5 41.5Q853 96 853 174Q853 222 830 264Q780 222 724 222ZM502 496L502 510Q502 612 437.5 689.0Q373 766 274 780L274 940L354 940L354 780Q255 766 190.5 689.0Q126 612 126 510L126 496Q126 481 137.0 470.0Q148 459 163 459L465 459Q480 459 491.0 470.0Q502 481 502 496ZM502 822Q502 808 513.0 797.0Q524 786 538 786L554 786L554 612L626 612Q682 612 723.0 653.0Q764 694 764 750L764 838L848 838Q863 838 874.0 849.0Q885 860 885 875L885 891Q885 906 874.0 917.0Q863 928 848 928L764 928L764 940L706 940L706 928L538 928L538 786Q538 786 538.0 786.0Q538 786 538 786Q538 822 538.0 822.0Q538 822 538 822L502 822Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Eivissa Environmental Watch
|
||||
Servidor Navidrome
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>En el roadmap</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Docker • Hetzner</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flujo n8n + Ollama -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M105 399 40 446 240 766 360 626 520 886 640 706 775 920 840 873 642 559 523 738 371 491 250 632ZM580 240Q622 240 651.0 269.0Q680 298 680 340Q680 382 651.0 411.0Q622 440 580 440Q538 440 509.0 411.0Q480 382 480 340Q480 298 509.0 269.0Q538 240 580 240ZM784 80 676 188Q655 174 630.5 167.0Q606 160 580 160Q505 160 452.5 212.5Q400 265 400 340Q400 415 452.5 467.5Q505 520 580 520Q655 520 707.5 467.5Q760 415 760 340Q760 314 753.0 289.5Q746 265 732 244L840 136Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Flujo n8n + Ollama
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Lector automatizado de noticias y del BOIB con
|
||||
clasificación local mediante Ollama. Detecta y filtra
|
||||
contenido relacionado con medio ambiente en Eivissa.
|
||||
Pipeline autónomo en local que intercepta notas de
|
||||
voz, las transcribe y las procesa usando Ollama con
|
||||
modelos de IA open-source sin enviar datos a OpenAI.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operativo</span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>En el roadmap</span
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-slate-400"
|
||||
>Ollama • Navidrome</span
|
||||
>
|
||||
<button
|
||||
class="text-xs text-primary hover:underline font-bold"
|
||||
onclick="openModal('project-3')"
|
||||
>
|
||||
Ver detalles
|
||||
</button>
|
||||
<span class="text-xs text-slate-400"
|
||||
>n8n • Ollama • Whisper</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contribución Open Source -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M400 440Q423 440 442.5 434.5Q462 429 480 418V840H720V680H560V280Q560 214 513.0 167.0Q466 120 400.0 120.0Q334 120 287.0 167.0Q240 214 240.0 280.0Q240 346 287.0 393.0Q334 440 400 440Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Contribución Open Source
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Cases Tancades -->
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
|
||||
>Sin iniciar</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Forgejo • GitHub</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visualización Datos Baleares -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M200 280V607Q165 620 142.5 650.5Q120 681 120 720Q120 770 155.0 805.0Q190 840 240 840Q290 840 325.0 805.0Q360 770 360 720Q360 681 337.5 650.5Q315 620 280 607V280Q280 247 303.5 223.5Q327 200 360 200Q393 200 416.5 223.5Q440 247 440 280V680Q440 746 487.0 793.0Q534 840 600 840Q666 840 713.0 793.0Q760 746 760 680V353Q795 340 817.5 309.5Q840 279 840 240Q840 190 805.0 155.0Q770 120 720 120Q670 120 635.0 155.0Q600 190 600 240Q600 279 622.5 310.0Q645 341 680 353V680Q680 713 656.5 736.5Q633 760 600.0 760.0Q567 760 543.5 736.5Q520 713 520 680V280Q520 214 473.0 167.0Q426 120 360.0 120.0Q294 120 247.0 167.0Q200 214 200 280ZM240 680Q257 680 268.5 691.5Q280 703 280 720Q280 737 268.5 748.5Q257 760 240 760Q223 760 211.5 748.5Q200 737 200 720Q200 703 211.5 691.5Q223 680 240 680ZM720 200Q737 200 748.5 211.5Q760 223 760 240Q760 257 748.5 268.5Q737 280 720 280Q703 280 691.5 268.5Q680 257 680 240Q680 223 691.5 211.5Q703 200 720 200ZM240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720ZM720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Visualización Datos Baleares
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Panel interactivo y visualización ecológica sobre el
|
||||
consumo de agua y recursos en el archipiélago balear,
|
||||
diseñado con tecnologías web ligeras.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>Migración pendiente (actualmente en Vercel)</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>HTML5 • JS • D3.js</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cases Tancades -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
@@ -699,133 +771,8 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Navidrome -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M400 440Q423 440 442.5 434.5Q462 429 480 418V840H720V680H560V280Q560 214 513.0 167.0Q466 120 400.0 120.0Q334 120 287.0 167.0Q240 214 240.0 280.0Q240 346 287.0 393.0Q334 440 400 440Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Servidor Navidrome
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operativo</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Docker • Hetzner</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flujo n8n + Ollama -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M200 280V607Q165 620 142.5 650.5Q120 681 120 720Q120 770 155.0 805.0Q190 840 240 840Q290 840 325.0 805.0Q360 770 360 720Q360 681 337.5 650.5Q315 620 280 607V280Q280 247 303.5 223.5Q327 200 360 200Q393 200 416.5 223.5Q440 247 440 280V680Q440 746 487.0 793.0Q534 840 600 840Q666 840 713.0 793.0Q760 746 760 680V353Q795 340 817.5 309.5Q840 279 840 240Q840 190 805.0 155.0Q770 120 720 120Q670 120 635.0 155.0Q600 190 600 240Q600 279 622.5 310.0Q645 341 680 353V680Q680 713 656.5 736.5Q633 760 600.0 760.0Q567 760 543.5 736.5Q520 713 520 680V280Q520 214 473.0 167.0Q426 120 360.0 120.0Q294 120 247.0 167.0Q200 214 200 280ZM240 680Q257 680 268.5 691.5Q280 703 280 720Q280 737 268.5 748.5Q257 760 240 760Q223 760 211.5 748.5Q200 737 200 720Q200 703 211.5 691.5Q223 680 240 680ZM720 200Q737 200 748.5 211.5Q760 223 760 240Q760 257 748.5 268.5Q737 280 720 280Q703 280 691.5 268.5Q680 257 680 240Q680 223 691.5 211.5Q703 200 720 200ZM240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720Q240 720 240.0 720.0Q240 720 240 720ZM720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Q720 240 720.0 240.0Q720 240 720 240Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Flujo n8n + Ollama
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Pipeline autónomo en local que intercepta notas de
|
||||
voz, las transcribe y las procesa usando Ollama con
|
||||
modelos de IA open-source sin enviar datos a OpenAI.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operativo</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>n8n • Ollama • Whisper</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visualización Datos Baleares -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M105 399 40 446 240 766 360 626 520 886 640 706 775 920 840 873 642 559 523 738 371 491 250 632ZM580 240Q622 240 651.0 269.0Q680 298 680 340Q680 382 651.0 411.0Q622 440 580 440Q538 440 509.0 411.0Q480 382 480 340Q480 298 509.0 269.0Q538 240 580 240ZM784 80 676 188Q655 174 630.5 167.0Q606 160 580 160Q505 160 452.5 212.5Q400 265 400 340Q400 415 452.5 467.5Q505 520 580 520Q655 520 707.5 467.5Q760 415 760 340Q760 314 753.0 289.5Q746 265 732 244L840 136Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Visualización Datos Baleares
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
||||
>
|
||||
Panel interactivo y visualización ecológica sobre el
|
||||
consumo de agua y recursos en el archipiélago balear,
|
||||
diseñado con tecnologías web ligeras.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
||||
>Migración pendiente (actualmente en Vercel)</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>HTML5 • JS • D3.js</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contribución Open Source -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M640 440 474 602Q443 632 421.5 668.5Q400 705 400 748Q400 803 438.5 841.5Q477 880 532 880Q564 880 592.0 866.5Q620 853 640 830Q660 853 688.0 866.5Q716 880 748 880Q803 880 841.5 841.5Q880 803 880 748Q880 705 859.0 668.5Q838 632 807 602ZM640 552 749 659Q768 678 784.0 699.5Q800 721 800 748Q800 770 785.0 785.0Q770 800 748 800Q734 800 721.5 794.5Q709 789 700 778L640 706L580 778Q571 789 558.5 794.5Q546 800 532 800Q510 800 495.0 785.0Q480 770 480 748Q480 721 496.0 699.5Q512 678 531 659ZM280 220 558 144 796 218Q791 227 781.5 233.5Q772 240 760 240H558Q531 240 515.0 242.0Q499 244 482 250L389 281L411 359L492 332Q509 327 532.0 324.0Q555 321 600 320Q600 320 600.0 320.0Q600 320 600 320Q600 331 593.5 341.0Q587 351 578 354L344 440Q344 440 344.0 440.0Q344 440 344 440H280ZM40 80V520H344Q351 520 358.0 518.5Q365 517 371 515L606 428Q639 416 659.5 386.0Q680 356 680 320H760Q810 320 845.0 287.0Q880 254 880 200V160L560 60L280 138V80ZM120 160H200V440H120ZM640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Contribución Open Source
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
|
||||
>Sin iniciar</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Forgejo • GitHub</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Trabajo Anterior (Proyectos de IA previos) -->
|
||||
<div
|
||||
@@ -903,7 +850,6 @@
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 4: Writing -->
|
||||
<div id="tab-writing" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-writing-button" aria-hidden="true">
|
||||
@@ -1117,14 +1063,14 @@
|
||||
<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"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M440 280H280Q197 280 138.5 338.5Q80 397 80.0 480.0Q80 563 138.5 621.5Q197 680 280 680H440V600H280Q230 600 195.0 565.0Q160 530 160.0 480.0Q160 430 195.0 395.0Q230 360 280 360H440ZM320 440V520H640V440ZM520 280V360H680Q730 360 765.0 395.0Q800 430 800.0 480.0Q800 530 765.0 565.0Q730 600 680 600H520V680H680Q763 680 821.5 621.5Q880 563 880.0 480.0Q880 397 821.5 338.5Q763 280 680 280Z"/></svg>
|
||||
</a>
|
||||
<!-- <a
|
||||
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
||||
href="https://github.com/itziarZG"
|
||||
title="GitHub"
|
||||
aria-label="GitHub" title="GitHub"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M680 80Q630 80 595.0 115.0Q560 150 560 200Q560 206 563 228L282 392Q266 377 245.0 368.5Q224 360 200 360Q150 360 115.0 395.0Q80 430 80.0 480.0Q80 530 115.0 565.0Q150 600 200 600Q224 600 245.0 591.5Q266 583 282 568L563 732Q561 739 560.5 745.5Q560 752 560 760Q560 810 595.0 845.0Q630 880 680 880Q730 880 765.0 845.0Q800 810 800 760Q800 710 765.0 675.0Q730 640 680 640Q656 640 635.0 648.5Q614 657 598 672L317 508Q319 501 319.5 494.5Q320 488 320 480Q320 472 319.5 465.5Q319 459 317 452L598 288Q614 303 635.0 311.5Q656 320 680 320Q730 320 765.0 285.0Q800 250 800 200Q800 150 765.0 115.0Q730 80 680 80ZM680 160Q697 160 708.5 171.5Q720 183 720 200Q720 217 708.5 228.5Q697 240 680 240Q663 240 651.5 228.5Q640 217 640 200Q640 183 651.5 171.5Q663 160 680 160ZM200 440Q217 440 228.5 451.5Q240 463 240.0 480.0Q240 497 228.5 508.5Q217 520 200 520Q183 520 171.5 508.5Q160 497 160.0 480.0Q160 463 171.5 451.5Q183 440 200 440ZM720 760Q720 777 708.5 788.5Q697 800 680 800Q663 800 651.5 788.5Q640 777 640 760Q640 743 651.5 731.5Q663 720 680.0 720.0Q697 720 708.5 731.5Q720 743 720 760ZM680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200ZM200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480ZM680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680 760Z"/></svg>
|
||||
</a> -->
|
||||
@@ -1160,6 +1106,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')"
|
||||
>
|
||||
@@ -1187,6 +1134,8 @@
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw"
|
||||
alt="AI Knowledge Pipeline"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
@@ -1271,6 +1220,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')"
|
||||
>
|
||||
@@ -1298,6 +1248,8 @@
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfqsuP4x2xr1tNEyjnxJ4D517oj2e5uvU9_41GuMiygljVgzuSLFs-teeZfNDCD7jP8ShaU_Vgc_L0qzjAtd5I-8-oVtoxi8ih81LLt3l5IM6-RvPCVAuoIx9jK7q9SvAcvet8d5Fg9YQCndNdiKbWHXgyEkD9ARj0x7EAdyzsGThzWbcVHof2YHZjw3aXpVV7sq0YrQqsQ07WON23OSALCIHo6W80FBSEUydUs6yvDyEoT-XJlLHO_xKX4xS8J4x38c1nhEDIuiw"
|
||||
alt="ChefGPT"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
@@ -1388,12 +1340,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal 3: Eivissa Environmental Watch -->
|
||||
<div
|
||||
<!-- Modal 3: Content Processing Automation -->
|
||||
<!-- <div
|
||||
id="project-3-modal"
|
||||
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')"
|
||||
>
|
||||
@@ -1407,7 +1360,7 @@
|
||||
id="project-3-modal-title"
|
||||
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
||||
>
|
||||
Eivissa Environmental Watch
|
||||
Content Processing Automation
|
||||
</h2>
|
||||
<button
|
||||
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
@@ -1419,8 +1372,8 @@
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/eivissa-environmental-watch.webp"
|
||||
alt="Eivissa Environmental Watch"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
|
||||
alt="Content Processing Automation"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
@@ -1430,11 +1383,10 @@
|
||||
Descripción
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Lector automatizado de noticias locales y del BOIB (Butlletí
|
||||
Oficial de les Illes Balears) con clasificación local mediante
|
||||
Ollama. Detecta y filtra el contenido relacionado con medio
|
||||
ambiente en Eivissa, mostrando solo lo relevante y enlazando a
|
||||
la fuente original (noticia o BOIB).
|
||||
Pipeline integral de procesamiento de contenido multimedia que
|
||||
automatiza desde la ingesta hasta la distribución. Transforma
|
||||
múltiples formatos (audio, vídeo, PDFs, texto) en contenido
|
||||
estructurado y lista para publicación en redes sociales.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1445,12 +1397,11 @@
|
||||
<ul
|
||||
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<li>Scraping periódico de fuentes de noticias locales y BOIB</li>
|
||||
<li>Clasificación local con modelos de IA open-source (Ollama)</li>
|
||||
<li>Filtrado automático por temática medioambiental</li>
|
||||
<li>Interfaz ligera para consultar las clasificaciones</li>
|
||||
<li>Enlaces directos al BOIB y a las noticias originales</li>
|
||||
<li>Cero envío de datos a APIs comerciales: privacidad total</li>
|
||||
<li>Procesamiento de múltiples formatos multimedia</li>
|
||||
<li>Transcripción y análisis automático</li>
|
||||
<li>Generación de títulos, descripciones y hashtags con IA</li>
|
||||
<li>Redimensionamiento y optimización de imágenes</li>
|
||||
<li>Publicación automática en redes sociales</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1459,11 +1410,22 @@
|
||||
Stack Tecnológico
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Ollama (LLM local)</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Navidrome (servidor)</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Hetzner (infraestructura verde)</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Docker</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">HTML estático ligero</span>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>Workflow Automation</span
|
||||
>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>FFmpeg (vídeo)</span
|
||||
>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>OpenAI API</span
|
||||
>
|
||||
<span
|
||||
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
||||
>Social Media APIs</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1472,10 +1434,9 @@
|
||||
Resultado
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300">
|
||||
Sitio activo en producción, publicando diariamente contenido
|
||||
ambiental curado por IA local. La arquitectura totalmente
|
||||
self-hosted garantiza soberanía sobre los datos y cero
|
||||
dependencia de servicios cloud externos.
|
||||
Automatización completa de la cadena de producción de contenido,
|
||||
reduciendo tiempo manual en un 90% y garantizando consistencia
|
||||
en la calidad y el formato de publicaciones.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1488,12 +1449,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/main.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script defer src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+77
-26
@@ -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);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
@@ -95,6 +104,7 @@ function openModal(projectId) {
|
||||
if (modal) {
|
||||
_modalPreviousFocus = document.activeElement;
|
||||
modal.classList.remove("hidden");
|
||||
modal.setAttribute("aria-hidden", "false");
|
||||
document.body.classList.add("modal-open");
|
||||
// Defensive fallback for browsers without scrollbar-gutter support
|
||||
document.body.style.paddingRight = getScrollbarWidth() + "px";
|
||||
@@ -123,6 +133,7 @@ function closeModal(projectId) {
|
||||
const modal = document.getElementById(projectId + "-modal");
|
||||
if (modal) {
|
||||
modal.classList.add("hidden");
|
||||
modal.setAttribute("aria-hidden", "true");
|
||||
document.body.classList.remove("modal-open");
|
||||
document.body.style.paddingRight = "";
|
||||
|
||||
@@ -156,28 +167,50 @@ function initTabs() {
|
||||
btn.addEventListener("click", () => {
|
||||
const targetTab = btn.getAttribute("data-tab");
|
||||
|
||||
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");
|
||||
|
||||
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));
|
||||
});
|
||||
|
||||
// Scroll the tabs container into view after switching panes so the
|
||||
// user stays anchored to the controls even when the new pane is much
|
||||
// shorter than the previous one (prevents a "jump down" feeling).
|
||||
const tabsContainer = btn.parentElement;
|
||||
if (tabsContainer && tabsContainer.parentElement) {
|
||||
tabsContainer.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -189,12 +222,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);
|
||||
});
|
||||
}
|
||||
|
||||
Generated
+1028
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "mywebsite",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "Personal portfolio of Itziar ZG",
|
||||
"scripts": {
|
||||
"build:css": "tailwindcss -i ./css/source.css -o ./css/styles.css --minify",
|
||||
"watch:css": "tailwindcss -i ./css/source.css -o ./css/styles.css --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.4.17"
|
||||
}
|
||||
}
|
||||
+39
-39
@@ -3,49 +3,49 @@
|
||||
<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>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<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>
|
||||
<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" />
|
||||
<link rel="preload" href="css/styles.css" as="style" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<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/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>
|
||||
<link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
|
||||
<script>
|
||||
window.addEventListener("load", function () {
|
||||
var load = function () {
|
||||
var s = document.createElement("script");
|
||||
s.defer = true;
|
||||
s.src = "https://stats.itziarzameza.dev/script.js";
|
||||
s.setAttribute("data-website-id", "8d8d648f-4a0c-4315-b287-5983ffedc8c4");
|
||||
s.setAttribute("data-domains", "www.itziarzameza.dev");
|
||||
document.body.appendChild(s);
|
||||
};
|
||||
if ("requestIdleCallback" in window) {
|
||||
requestIdleCallback(load, { timeout: 2000 });
|
||||
} else {
|
||||
setTimeout(load, 1500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300">
|
||||
<a class="skip-link" href="#main-content">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">
|
||||
@@ -55,7 +55,7 @@
|
||||
</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>
|
||||
@@ -80,7 +80,7 @@
|
||||
</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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-sm" aria-hidden="true"><path d="M313 440 537 216 480 160 160 480 480 800 537 744 313 520H800V440Z"/></svg>
|
||||
@@ -224,6 +224,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script defer src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+39
-39
@@ -3,49 +3,49 @@
|
||||
<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>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<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>
|
||||
<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" />
|
||||
<link rel="preload" href="css/styles.css" as="style" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<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/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>
|
||||
<link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
|
||||
<script>
|
||||
window.addEventListener("load", function () {
|
||||
var load = function () {
|
||||
var s = document.createElement("script");
|
||||
s.defer = true;
|
||||
s.src = "https://stats.itziarzameza.dev/script.js";
|
||||
s.setAttribute("data-website-id", "8d8d648f-4a0c-4315-b287-5983ffedc8c4");
|
||||
s.setAttribute("data-domains", "www.itziarzameza.dev");
|
||||
document.body.appendChild(s);
|
||||
};
|
||||
if ("requestIdleCallback" in window) {
|
||||
requestIdleCallback(load, { timeout: 2000 });
|
||||
} else {
|
||||
setTimeout(load, 1500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300">
|
||||
<a class="skip-link" href="#main-content">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">
|
||||
@@ -55,7 +55,7 @@
|
||||
</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>
|
||||
@@ -80,7 +80,7 @@
|
||||
</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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-sm" aria-hidden="true"><path d="M313 440 537 216 480 160 160 480 480 800 537 744 313 520H800V440Z"/></svg>
|
||||
@@ -224,6 +224,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script defer src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+39
-39
@@ -3,49 +3,49 @@
|
||||
<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>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<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>
|
||||
<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" />
|
||||
<link rel="preload" href="css/styles.css" as="style" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<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/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>
|
||||
<link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
|
||||
<script>
|
||||
window.addEventListener("load", function () {
|
||||
var load = function () {
|
||||
var s = document.createElement("script");
|
||||
s.defer = true;
|
||||
s.src = "https://stats.itziarzameza.dev/script.js";
|
||||
s.setAttribute("data-website-id", "8d8d648f-4a0c-4315-b287-5983ffedc8c4");
|
||||
s.setAttribute("data-domains", "www.itziarzameza.dev");
|
||||
document.body.appendChild(s);
|
||||
};
|
||||
if ("requestIdleCallback" in window) {
|
||||
requestIdleCallback(load, { timeout: 2000 });
|
||||
} else {
|
||||
setTimeout(load, 1500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300">
|
||||
<a class="skip-link" href="#main-content">Saltar al contenido principal</a>
|
||||
<div class="relative min-h-screen overflow-hidden iridescent-bg flex flex-col justify-between">
|
||||
<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">
|
||||
@@ -55,7 +55,7 @@
|
||||
</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>
|
||||
@@ -80,7 +80,7 @@
|
||||
</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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-sm" aria-hidden="true"><path d="M313 440 537 216 480 160 160 480 480 800 537 744 313 520H800V440Z"/></svg>
|
||||
@@ -224,6 +224,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script defer src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://www.itziarzameza.dev/sitemap.xml
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
<url>
|
||||
<loc>https://www.itziarzameza.dev/index.html</loc>
|
||||
<lastmod>2026-07-26</lastmod>
|
||||
<priority>1.0</priority>
|
||||
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
|
||||
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
|
||||
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/index.html" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.itziarzameza.dev/index-ca.html</loc>
|
||||
<lastmod>2026-07-26</lastmod>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
|
||||
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
|
||||
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/index.html" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.itziarzameza.dev/index-en.html</loc>
|
||||
<lastmod>2026-07-26</lastmod>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
|
||||
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
|
||||
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/index.html" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.itziarzameza.dev/huella.html</loc>
|
||||
<lastmod>2026-07-26</lastmod>
|
||||
<priority>0.8</priority>
|
||||
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" />
|
||||
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.itziarzameza.dev/privacidad.html</loc>
|
||||
<lastmod>2026-07-26</lastmod>
|
||||
<priority>0.4</priority>
|
||||
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
|
||||
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
|
||||
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.itziarzameza.dev/privacidad-ca.html</loc>
|
||||
<lastmod>2026-07-26</lastmod>
|
||||
<priority>0.4</priority>
|
||||
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
|
||||
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
|
||||
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.itziarzameza.dev/privacidad-en.html</loc>
|
||||
<lastmod>2026-07-26</lastmod>
|
||||
<priority>0.4</priority>
|
||||
<xhtml:link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
|
||||
<xhtml:link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
|
||||
<xhtml:link rel="alternate" hreflang="x-default" href="https://www.itziarzameza.dev/privacidad.html" />
|
||||
</url>
|
||||
</urlset>
|
||||
@@ -0,0 +1,33 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
content: [
|
||||
"./index.html",
|
||||
"./index-ca.html",
|
||||
"./index-en.html",
|
||||
"./huella.html",
|
||||
"./privacidad.html",
|
||||
"./privacidad-ca.html",
|
||||
"./privacidad-en.html",
|
||||
],
|
||||
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",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Reference in New Issue
Block a user