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

perf(carbon): replace Material Symbols with inline SVGs and self-host WebP images

Browse Source 
- Remove fonts/material-symbols-outlined.woff2 (4MB external font eliminated)
- Inline 38 Material Symbols as SVG paths (extracted to icon-paths.json)
- Convert 5 Google-hosted images to self-hosted WebP
- Add favicon.svg (adaptive auto_awesome icon, light + dark)
- Add scrollbar-gutter: stable + body.modal-open to prevent modal jumps
- Clean up preload links to fonts no longer used

Net reduction: ~3.9MB external dependencies, zero CLS on icon swap
This commit is contained in:
itziarZG
2026-07-28 19:32:15 +02:00
parent 88b7742291
commit 29d215495d
16 changed files with 540 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+27 -28
View File
@@ -1,3 +1,23 @@
/* ==========================================================================
Layout Stability
========================================================================== */
/* Reserve scrollbar gutter to prevent layout shift when body.overflow
toggles between auto and hidden (openModal/closeModal). This stops
the page from "jumping" when the user opens or closes a project modal. */
html {
scrollbar-gutter: stable;
}
/* When a modal is open, prevent background scroll without causing the
scrollbar to disappear (which would shift the layout). */
body.modal-open {
overflow: hidden;
/* Compensate for any scrollbar difference on platforms where
scrollbar-gutter isn't fully respected. */
padding-right: var(--scrollbar-width, 0px);
}
/* ==========================================================================
Self-Hosted Fonts & Icons
========================================================================== */
@@ -60,37 +80,16 @@
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 replaced by inline SVGs (see .icon below) */
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
/* Inline icon (replaces Material Symbols font) */
.icon {
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';
fill: currentColor;
flex-shrink: 0;
vertical-align: middle;
display: inline-block;
}
/* Glass Morphism Effect */
fonts/material-symbols-outlined.woff2
BIN
View File
Binary file not shown.
huella.html
+16 -30
View File
@@ -29,7 +29,6 @@
},
};
</script>
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
@@ -60,9 +59,7 @@
<div
class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20"
>
<span class="material-symbols-outlined text-2xl">
auto_awesome
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M760 600 710 710 600 760 710 810 760 920 810 810 920 760 810 710ZM760 40 710 150 600 200 710 250 760 360 810 250 920 200 810 150ZM360 160 260 380 40 480 260 580 360 800 460 580 680 480 460 380ZM360 354 400 440 486 480 400 520 360 606 320 520 234 480 320 440ZM360 480Z"/></svg>
</div>
<h2
class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white"
@@ -114,14 +111,8 @@
onclick="toggleTheme()"
aria-label="Toggle theme"
>
<span class="material-symbols-outlined text-xl dark:hidden">
dark_mode
</span>
<span
class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
>
light_mode
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl dark:hidden" aria-hidden="true"><path d="M480 120Q330 120 225.0 225.0Q120 330 120 480Q120 630 225.0 735.0Q330 840 480 840Q494 840 507.5 839.0Q521 838 534 836Q493 807 468.5 760.5Q444 714 444 660Q444 570 507.0 507.0Q570 444 660 444Q715 444 761.0 468.5Q807 493 836 534Q838 521 839.0 507.5Q840 494 840 480Q840 330 735.0 225.0Q630 120 480 120ZM480 200Q568 200 638.0 248.5Q708 297 740 375Q720 370 700.0 367.0Q680 364 660 364Q537 364 450.5 450.5Q364 537 364 660Q364 680 367.0 700.0Q370 720 375 740Q297 708 248.5 638.0Q200 568 200 480Q200 364 282.0 282.0Q364 200 480 200ZM470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl hidden dark:block text-yellow-200" aria-hidden="true"><path d="M480.0 360.0Q530 360 565.0 395.0Q600 430 600.0 480.0Q600 530 565.0 565.0Q530 600 480.0 600.0Q430 600 395.0 565.0Q360 530 360.0 480.0Q360 430 395.0 395.0Q430 360 480.0 360.0ZM480.0 280.0Q397 280 338.5 338.5Q280 397 280.0 480.0Q280 563 338.5 621.5Q397 680 480.0 680.0Q563 680 621.5 621.5Q680 563 680.0 480.0Q680 397 621.5 338.5Q563 280 480.0 280.0ZM200 440H40V520H200ZM920 440H760V520H920ZM440 760V920H520V760ZM440 40V200H520V40ZM256 650 155 747 212 806 308 706ZM748 154 651 255 704 310 805 213ZM650 704 747 805 806 748 706 652ZM154 212 255 309 310 256 213 155ZM480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Z"/></svg>
</button>
<a
class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25 flex items-center justify-center"
@@ -141,7 +132,7 @@
href="index.html"
class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors"
>
<span class="material-symbols-outlined text-sm">arrow_back</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-sm" aria-hidden="true"><path d="M313 440 537 216 480 160 160 480 480 800 537 744 313 520H800V440Z"/></svg>
Volver al inicio
</a>
</div>
@@ -161,7 +152,7 @@
<div class="grid md:grid-cols-3 gap-6 mb-16">
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">weight</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M240 200H720Q720 200 720.0 200.0Q720 200 720 200L663 600Q663 600 663.0 600.0Q663 600 663 600H297Q297 600 297.0 600.0Q297 600 297 600L240 200Q240 200 240.0 200.0Q240 200 240 200ZM480 680Q497 680 508.5 691.5Q520 703 520 720Q520 737 508.5 748.5Q497 760 480 760Q463 760 451.5 748.5Q440 737 440 720Q440 703 451.5 691.5Q463 680 480 680ZM593 680H663Q693 680 715.0 660.0Q737 640 742 611L799 211Q804 175 780.5 147.5Q757 120 720 120H240Q203 120 179.5 147.5Q156 175 161 211L218 611Q223 640 245.0 660.0Q267 680 297 680H367Q364 690 362.0 699.5Q360 709 360 720Q360 770 395.0 805.0Q430 840 480.0 840.0Q530 840 565.0 805.0Q600 770 600 720Q600 709 598.0 699.5Q596 690 593 680ZM240 200Q240 200 240.0 200.0Q240 200 240 200Q240 200 240.0 200.0Q240 200 240 200H720Q720 200 720.0 200.0Q720 200 720 200Q720 200 720.0 200.0Q720 200 720 200Z"/></svg>
<h3 class="font-bold mb-2 dark:text-white">Peso de la página</h3>
<p class="text-3xl font-bold text-primary mb-2">~245 KB</p>
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
@@ -172,7 +163,7 @@
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">co2</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M440 360Q423 360 411.5 371.5Q400 383 400 400V560Q400 577 411.5 588.5Q423 600 440 600H560Q577 600 588.5 588.5Q600 577 600 560V400Q600 383 588.5 371.5Q577 360 560 360ZM460 420H540V540H460ZM160 360Q143 360 131.5 371.5Q120 383 120 400V560Q120 577 131.5 588.5Q143 600 160 600H280Q297 600 308.5 588.5Q320 577 320 560V520H260V540H180V420H260V440H320V400Q320 383 308.5 371.5Q297 360 280 360ZM680 240V340Q680 357 691.5 368.5Q703 380 720 380H800V420H680V480H820Q837 480 848.5 468.5Q860 457 860 440V380Q860 363 848.5 351.5Q837 340 820 340H740V300H860V240Z"/></svg>
<h3 class="font-bold mb-2 dark:text-white">Emisiones estimadas</h3>
<p class="text-3xl font-bold text-primary mb-2">0.05 g</p>
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
@@ -183,7 +174,7 @@
<div class="p-6 glass rounded-2xl border border-white/20 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-3xl mb-3 block">nest_eco_leaf</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M480 160Q424 160 374.5 177.5Q325 195 284 227L228 172Q217 161 200.0 161.0Q183 161 172 172Q161 183 161.0 200.0Q161 217 172 228L227 283Q195 324 177.5 374.0Q160 424 160 480Q160 614 253.0 707.0Q346 800 480 800H800V480Q800 346 707.0 253.0Q614 160 480 160ZM480 240Q580 240 650.0 310.0Q720 380 720 480V720H480Q380 720 310.0 650.0Q240 580 240 480Q240 441 252.0 405.5Q264 370 285 341L492 548Q503 559 520.0 559.0Q537 559 548 548Q560 536 560.0 519.5Q560 503 548 491L341 284Q370 263 405.5 251.5Q441 240 480 240ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z"/></svg>
<h3 class="font-bold mb-2 dark:text-white">Servidor ecológico</h3>
<p class="text-3xl font-bold text-emerald-500 mb-2">100%</p>
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
@@ -208,7 +199,7 @@
<!-- Compromiso 1: Tailwind CSS por CDN -->
<div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
<span class="material-symbols-outlined text-amber-500">warning</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-amber-500" aria-hidden="true"><path d="M40 120 480 880 920 120ZM178 200H782L480 720ZM480.0 240.0Q497 240 508.5 251.5Q520 263 520.0 280.0Q520 297 508.5 308.5Q497 320 480.0 320.0Q463 320 451.5 308.5Q440 297 440.0 280.0Q440 263 451.5 251.5Q463 240 480.0 240.0ZM440 360H520V560H440ZM480 460Z"/></svg>
Tailwind CSS mediante CDN de desarrollo
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
@@ -222,7 +213,7 @@
<!-- Compromiso 2: Tipografías e Iconos Autoalojados (Self-Hosted) -->
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
<span class="material-symbols-outlined text-emerald-500">verified</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-emerald-500" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
Tipografías e Iconos 100% Autoalojados (Zero Third-Party Requests)
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
@@ -237,7 +228,7 @@
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
<div>
<div class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">
<span class="material-symbols-outlined text-sm">workspace_premium</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-sm" aria-hidden="true"><path d="M387 412 422 526 330 600H444L480 712L516 600H630L537 526L572 412L480 483ZM240 40V349Q202 391 181.0 445.0Q160 499 160 560Q160 694 253.0 787.0Q346 880 480.0 880.0Q614 880 707.0 787.0Q800 694 800 560Q800 499 779.0 445.0Q758 391 720 349V40L480 120ZM480.0 320.0Q580 320 650.0 390.0Q720 460 720.0 560.0Q720 660 650.0 730.0Q580 800 480.0 800.0Q380 800 310.0 730.0Q240 660 240.0 560.0Q240 460 310.0 390.0Q380 320 480.0 320.0ZM320 159 480 200 640 159V283Q605 263 564.5 251.5Q524 240 480.0 240.0Q436 240 395.5 251.5Q355 263 320 283ZM480 221Q480 221 480.0 221.0Q480 221 480.0 221.0Q480 221 480.0 221.0Q480 221 480 221Z"/></svg>
Acreditación Oficial Green Software Foundation
</div>
<h3 class="font-bold text-lg dark:text-white mb-1">
@@ -253,9 +244,9 @@
rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded-xl text-xs font-bold hover:bg-emerald-700 transition-colors shrink-0 shadow-md shadow-emerald-600/20"
>
<span class="material-symbols-outlined text-sm">verified</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-sm" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
Verificar Credencial
<span class="material-symbols-outlined text-xs">open_in_new</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs" aria-hidden="true"><path d="M200 120Q167 120 143.5 143.5Q120 167 120 200V760Q120 793 143.5 816.5Q167 840 200 840H480V760H200Q200 760 200.0 760.0Q200 760 200 760V200Q200 200 200.0 200.0Q200 200 200 200H760Q760 200 760.0 200.0Q760 200 760 200V480H840V200Q840 167 816.5 143.5Q793 120 760 120ZM388 332 332 388 704 760H560V840H840V560H760V704Z"/></svg>
</a>
</div>
</div>
@@ -270,10 +261,7 @@
class="glass rounded-[3rem] p-12 md:p-24 text-center relative overflow-hidden"
>
<div class="absolute top-0 right-0 p-8 pointer-events-none">
<span
class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
>alternate_email</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary/20 dark:text-primary/10 text-9xl" aria-hidden="true"><path d="M480 80Q397 80 324.0 111.5Q251 143 197.0 197.0Q143 251 111.5 324.0Q80 397 80.0 480.0Q80 563 111.5 636.0Q143 709 197.0 763.0Q251 817 324.0 848.5Q397 880 480.0 880.0Q563 880 636.0 848.5Q709 817 763.0 763.0Q817 709 848.5 636.0Q880 563 880 480V422Q880 363 839.5 321.5Q799 280 740 280Q705 280 674.0 295.0Q643 310 622 338Q593 309 556.5 294.5Q520 280 480 280Q397 280 338.5 338.5Q280 397 280 480Q280 563 338.5 621.5Q397 680 480.0 680.0Q563 680 621.5 621.5Q680 563 680 480V422Q680 396 697.0 378.0Q714 360 740 360Q766 360 783.0 378.0Q800 396 800 422V480Q800 614 707.0 707.0Q614 800 480.0 800.0Q346 800 253.0 707.0Q160 614 160.0 480.0Q160 346 253.0 253.0Q346 160 480 160H680V80ZM600 480Q600 530 565.0 565.0Q530 600 480.0 600.0Q430 600 395.0 565.0Q360 530 360 480Q360 430 395.0 395.0Q430 360 480.0 360.0Q530 360 565.0 395.0Q600 430 600 480Z"/></svg>
</div>
<h2
class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white"
@@ -292,7 +280,7 @@
class="bg-slate-900 dark:bg-slate-800 text-white px-10 py-5 rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 dark:hover:bg-slate-700 transition-colors shadow-2xl"
href="mailto:itziar.zameza.garcia@gmail.com"
>
<span class="material-symbols-outlined">mail</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon " aria-hidden="true"><path d="M160 160Q127 160 103.5 183.5Q80 207 80 240V720Q80 753 103.5 776.5Q127 800 160 800H800Q833 800 856.5 776.5Q880 753 880 720V240Q880 207 856.5 183.5Q833 160 800 160ZM480 440 160 640V240Q160 240 160.0 240.0Q160 240 160 240H800Q800 240 800.0 240.0Q800 240 800 240V640ZM480 520 800 720H160ZM160 640V720V640V240Q160 240 160.0 240.0Q160 240 160 240Q160 240 160.0 240.0Q160 240 160 240Z"/></svg>
Enviar un Email
</a>
<div class="flex gap-4 justify-center">
@@ -301,16 +289,14 @@
href="https://www.linkedin.com/in/itziarzamezagarcia"
title="LinkedIn"
>
<span class="material-symbols-outlined text-2xl">link</span>
<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"
>
<span class="material-symbols-outlined text-2xl"
>share</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M680 80Q630 80 595.0 115.0Q560 150 560 200Q560 206 563 228L282 392Q266 377 245.0 368.5Q224 360 200 360Q150 360 115.0 395.0Q80 430 80.0 480.0Q80 530 115.0 565.0Q150 600 200 600Q224 600 245.0 591.5Q266 583 282 568L563 732Q561 739 560.5 745.5Q560 752 560 760Q560 810 595.0 845.0Q630 880 680 880Q730 880 765.0 845.0Q800 810 800 760Q800 710 765.0 675.0Q730 640 680 640Q656 640 635.0 648.5Q614 657 598 672L317 508Q319 501 319.5 494.5Q320 488 320 480Q320 472 319.5 465.5Q319 459 317 452L598 288Q614 303 635.0 311.5Q656 320 680 320Q730 320 765.0 285.0Q800 250 800 200Q800 150 765.0 115.0Q730 80 680 80ZM680 160Q697 160 708.5 171.5Q720 183 720 200Q720 217 708.5 228.5Q697 240 680 240Q663 240 651.5 228.5Q640 217 640 200Q640 183 651.5 171.5Q663 160 680 160ZM200 440Q217 440 228.5 451.5Q240 463 240.0 480.0Q240 497 228.5 508.5Q217 520 200 520Q183 520 171.5 508.5Q160 497 160.0 480.0Q160 463 171.5 451.5Q183 440 200 440ZM720 760Q720 777 708.5 788.5Q697 800 680 800Q663 800 651.5 788.5Q640 777 640 760Q640 743 651.5 731.5Q663 720 680.0 720.0Q697 720 708.5 731.5Q720 743 720 760ZM680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200ZM200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480ZM680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680 760Z"/></svg>
</a>
</div>
</div>
icon-paths.json
+1
View File
File diff suppressed because one or more lines are too long
images/ai-pipeline.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

images/chefgpt.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

images/content-automation.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

images/eivissa-environmental-watch.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

images/hero.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

index-ca.html
+155 -88
View File
@@ -455,12 +455,18 @@
>
Infraestructura
</button>
<!-- Experiments tab: en standby, código del panel preservado más abajo en comentarios -->
<!--
<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"
>
Experiments
</button>
-->
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="proyectos"
@@ -589,11 +595,10 @@
node.
</p>
</div>
</div>
</div>
</div>
<!-- Tab 2: Experiments -->
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
<!--
<div id="tab-experimentos" class="tab-pane hidden">
<div class="grid md:grid-cols-3 gap-6">
<div
@@ -670,8 +675,9 @@
</div>
</div>
</div>
-->
<!-- Tab 3: Projectes -->
<!-- Tab 3: Projectes -->
<div id="tab-proyectos" class="tab-pane hidden">
<!-- Eines Reals -->
<div class="mb-12">
@@ -679,6 +685,88 @@
Eines reals, no demos
</h3>
<div class="grid md:grid-cols-2 gap-8">
<!-- Eivissa Environmental Watch -->
<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="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
</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.
</p>
</div>
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
<span
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
>Operatiu</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>
</div>
</div>
</div><!-- Cases Tancades -->
<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">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
Cases Tancades
</h4>
</div>
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Diagnòstic obert de l'habitatge a les Balears: creua
dades oficials de l'INE, Airbnb i registres HUT del
Govern per mostrar quants pisos estan buits davant la
pressió del lloguer turístic.
</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"
>Next.js · Dades obertes INE/Govern Balear</span
>
</div>
</div>
<!-- Navidrome -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
@@ -696,8 +784,8 @@
</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
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
@@ -729,8 +817,8 @@
</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
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
@@ -738,32 +826,6 @@
</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">
<span
class="material-symbols-outlined text-primary text-2xl"
>volunteer_activism</span
>
<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>
<!-- Visualització Dades Balears -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
@@ -797,7 +859,7 @@
</div>
</div>
<!-- Cases Tancades -->
<!-- Contribució Codi Obert -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
>
@@ -805,34 +867,44 @@
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>volunteer_activism</span
>
<h4 class="font-bold text-lg dark:text-white">
Cases Tancades
Contribució Codi Obert
</h4>
</div>
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Diagnòstic obert de l'habitatge a les Balears: creua
dades oficials de l'INE, Airbnb i registres HUT del
Govern per mostrar quants pisos estan buits davant la
pressió del lloguer turístic.
</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
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"
>Next.js · Dades obertes INE/Govern Balear</span
>Forgejo • GitHub</span
>
</div>
</div>
</div>
</div>
</div>
<!-- Treball Anterior -->
<div
class="border-t border-slate-200 dark:border-slate-800 pt-8"
@@ -1408,8 +1480,8 @@
</div>
</div>
<!-- Modal 3: Content Processing Automation -->
<!-- <div
<!-- Modal 3: Eivissa Environmental Watch -->
<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"
@@ -1427,7 +1499,7 @@
id="project-3-modal-title"
class="text-3xl font-serif italic text-slate-900 dark:text-white"
>
Content Processing Automation
Eivissa Environmental Watch
</h2>
<button
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
@@ -1439,71 +1511,63 @@
</div>
<img
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
alt="Content Processing Automation"
src="images/eivissa-environmental-watch.webp"
alt="Eivissa Environmental Watch"
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ón
Descripció
</h3>
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
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.
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).
</p>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Funcionalidades
Funcionalitats
</h3>
<ul
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
>
<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>
<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>
</ul>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Stack Tecnológico
Stack Tecnològic
</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"
>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
>
<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>
</div>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Resultado
Resultat
</h3>
<p class="text-slate-700 dark:text-slate-300">
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.
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.
</p>
</div>
</div>
@@ -1512,13 +1576,16 @@
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
onclick="closeModal('project-3')"
>
Cerrar
Tancar
</button>
</div>
</div>
</div> -->
</div>
<!-- Scripts -->
<script src="js/main.js"></script>
</body>
</div>
</body>
</html>
index-en.html
+145 -88
View File
@@ -452,12 +452,18 @@
>
Infrastructure
</button>
<!-- Experiments tab: en standby, código del panel preservado más abajo en comentarios -->
<!--
<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"
>
Experiments
</button>
-->
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="proyectos"
@@ -570,11 +576,10 @@
Ethical, privacy-respecting, cookieless web analytics.
</p>
</div>
</div>
</div>
</div>
<!-- Tab 2: Experiments -->
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
<!--
<div id="tab-experimentos" class="tab-pane hidden">
<div class="grid md:grid-cols-3 gap-6">
<div
@@ -651,8 +656,9 @@
</div>
</div>
</div>
-->
<!-- Tab 3: Projects -->
<!-- Tab 3: Projects -->
<div id="tab-proyectos" class="tab-pane hidden">
<!-- Herramientas Reales -->
<div class="mb-12">
@@ -660,6 +666,78 @@
Real tools, not demos
</h3>
<div class="grid md:grid-cols-2 gap-8">
<!-- Eivissa Environmental Watch -->
<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="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
</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.
</p>
</div>
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
<span
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
>Operational</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>
</div>
</div>
</div><!-- Cases Tancades -->
<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">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
Cases Tancades
</h4>
</div>
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Open diagnostic of housing in the Balearic Islands:
cross-references official data from INE, Airbnb, and
Govern Balear HUT registries to show how many flats
sit empty against the pressure of tourist rentals.
</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"
>Next.js · Open data INE/Govern Balear</span
>
</div>
</div>
<!-- Navidrome -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
@@ -677,8 +755,8 @@
</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
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
@@ -710,8 +788,8 @@
</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
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
@@ -719,32 +797,6 @@
</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">
<span
class="material-symbols-outlined text-primary text-2xl"
>volunteer_activism</span
>
<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>
<!-- Balearic Data Visualization -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
@@ -778,7 +830,7 @@
</div>
</div>
<!-- Cases Tancades -->
<!-- Open Source Contribution -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
>
@@ -786,34 +838,44 @@
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>volunteer_activism</span
>
<h4 class="font-bold text-lg dark:text-white">
Cases Tancades
Open Source Contribution
</h4>
</div>
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Open diagnostic of housing in the Balearic Islands:
cross-references official data from INE, Airbnb, and
Govern Balear HUT registries to show how many flats
sit empty against the pressure of tourist rentals.
</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
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"
>Next.js · Open data INE/Govern Balear</span
>Forgejo • GitHub</span
>
</div>
</div>
</div>
</div>
</div>
<!-- Trabajo Anterior (Proyectos de IA previos) -->
<div
class="border-t border-slate-200 dark:border-slate-800 pt-8"
@@ -1384,8 +1446,8 @@
</div>
</div>
<!-- Modal 3: Content Processing Automation -->
<!-- <div
<!-- Modal 3: Eivissa Environmental Watch -->
<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"
@@ -1403,7 +1465,7 @@
id="project-3-modal-title"
class="text-3xl font-serif italic text-slate-900 dark:text-white"
>
Content Processing Automation
Eivissa Environmental Watch
</h2>
<button
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
@@ -1415,71 +1477,63 @@
</div>
<img
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
alt="Content Processing Automation"
src="images/eivissa-environmental-watch.webp"
alt="Eivissa Environmental Watch"
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ón
Description
</h3>
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
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.
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.
</p>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Funcionalidades
Features
</h3>
<ul
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
>
<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>
<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>
</ul>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
Stack Tecnológico
Tech Stack
</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"
>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
>
<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>
</div>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Resultado
Outcome
</h3>
<p class="text-slate-700 dark:text-slate-300">
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.
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.
</p>
</div>
</div>
@@ -1488,13 +1542,16 @@
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
onclick="closeModal('project-3')"
>
Cerrar
Close
</button>
</div>
</div>
</div> -->
</div>
<!-- Scripts -->
<script src="js/main.js"></script>
</body>
</div>
</body>
</html>
index.html
+140 -83
View File
@@ -466,12 +466,18 @@
>
Infraestructura
</button>
<!-- Experimentos tab: en standby, código del panel preservado más abajo en comentarios -->
<!--
<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"
>
Experimentos
</button>
-->
<button
class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
data-tab="proyectos"
@@ -587,11 +593,10 @@
cookieless.
</p>
</div>
</div>
</div>
</div>
<!-- Tab 2: Experimentos -->
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
<!--
<div id="tab-experimentos" class="tab-pane hidden">
<div class="grid md:grid-cols-3 gap-6">
<div
@@ -668,8 +673,9 @@
</div>
</div>
</div>
-->
<!-- Tab 3: Proyectos -->
<!-- Tab 3: Proyectos -->
<div id="tab-proyectos" class="tab-pane hidden">
<!-- Herramientas Reales -->
<div class="mb-12">
@@ -677,6 +683,78 @@
Herramientas reales, no demos
</h3>
<div class="grid md:grid-cols-2 gap-8">
<!-- Eivissa Environmental Watch -->
<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="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
</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.
</p>
</div>
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
<span
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
>Operativo</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>
</div>
</div>
</div><!-- Cases Tancades -->
<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">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
Cases Tancades
</h4>
</div>
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Diagnóstico abierto de la vivienda en Balears: cruza
datos oficiales del INE, Airbnb y registros HUT del
Govern para mostrar cuántos pisos están vacíos frente
a la presión del alquiler turístico.
</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"
>Next.js · Datos abiertos INE/Govern Balear</span
>
</div>
</div>
<!-- Navidrome -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
@@ -694,8 +772,8 @@
</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
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
@@ -727,8 +805,8 @@
</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
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
@@ -736,32 +814,6 @@
</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">
<span
class="material-symbols-outlined text-primary text-2xl"
>volunteer_activism</span
>
<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>
<!-- Visualización Datos Baleares -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
@@ -795,7 +847,7 @@
</div>
</div>
<!-- Cases Tancades -->
<!-- Contribución Open Source -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
>
@@ -803,34 +855,44 @@
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>volunteer_activism</span
>
<h4 class="font-bold text-lg dark:text-white">
Cases Tancades
Contribución Open Source
</h4>
</div>
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Diagnóstico abierto de la vivienda en Balears: cruza
datos oficiales del INE, Airbnb y registros HUT del
Govern para mostrar cuántos pisos están vacíos frente
a la presión del alquiler turístico.
</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
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"
>Next.js · Datos abiertos INE/Govern Balear</span
>Forgejo • GitHub</span
>
</div>
</div>
</div>
</div>
</div>
<!-- Trabajo Anterior (Proyectos de IA previos) -->
<div
class="border-t border-slate-200 dark:border-slate-800 pt-8"
@@ -1403,8 +1465,8 @@
</div>
</div>
<!-- Modal 3: Content Processing Automation -->
<!-- <div
<!-- Modal 3: Eivissa Environmental Watch -->
<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"
@@ -1422,7 +1484,7 @@
id="project-3-modal-title"
class="text-3xl font-serif italic text-slate-900 dark:text-white"
>
Content Processing Automation
Eivissa Environmental Watch
</h2>
<button
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
@@ -1434,8 +1496,8 @@
</div>
<img
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
alt="Content Processing Automation"
src="images/eivissa-environmental-watch.webp"
alt="Eivissa Environmental Watch"
class="w-full rounded-2xl mb-6 object-cover h-64"
/>
@@ -1445,10 +1507,11 @@
Descripción
</h3>
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
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.
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).
</p>
</div>
@@ -1459,11 +1522,12 @@
<ul
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
>
<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>
<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>
</ul>
</div>
@@ -1472,22 +1536,11 @@
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"
>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
>
<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>
</div>
</div>
@@ -1496,9 +1549,10 @@
Resultado
</h3>
<p class="text-slate-700 dark:text-slate-300">
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.
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.
</p>
</div>
</div>
@@ -1511,9 +1565,12 @@
</button>
</div>
</div>
</div> -->
</div>
<!-- Scripts -->
<script src="js/main.js"></script>
</body>
</div>
</body>
</html>
js/main.js
+41 -7
View File
@@ -61,9 +61,33 @@ function scrollToContact() {
/** Element that had focus before a modal was opened */
let _modalPreviousFocus = null;
/** Scrollbar width in px, measured on first open */
let _scrollbarWidth = null;
/**
* Measure and cache the browser scrollbar width so we can compensate
* for layout shift when body.overflow is toggled.
*/
function getScrollbarWidth() {
if (_scrollbarWidth !== null) return _scrollbarWidth;
const outer = document.createElement("div");
outer.style.cssText =
"visibility:hidden;position:absolute;overflow:scroll;width:100px;height:100px;";
document.body.appendChild(outer);
const inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
const w = outer.offsetWidth - inner.offsetWidth;
outer.remove();
_scrollbarWidth = w;
return w;
}
/**
* Open modal by project ID.
* Saves the currently focused element and moves focus into the modal.
* Uses a CSS class (body.modal-open) so the scrollbar gutter stays reserved
* via html { scrollbar-gutter: stable }, preventing page jumps.
* @param {string} projectId - The project identifier
*/
function openModal(projectId) {
@@ -71,17 +95,21 @@ function openModal(projectId) {
if (modal) {
_modalPreviousFocus = document.activeElement;
modal.classList.remove("hidden");
document.body.style.overflow = "hidden";
document.body.classList.add("modal-open");
// Defensive fallback for browsers without scrollbar-gutter support
document.body.style.paddingRight = getScrollbarWidth() + "px";
// Move focus to the first focusable element inside the modal
// Move focus to the first focusable element inside the modal.
// PreventScroll keeps the page from jumping when the focused
// element would otherwise trigger a scroll-into-view.
const focusable = modal.querySelectorAll(
'button, [href], input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])'
);
if (focusable.length > 0) {
focusable[0].focus();
focusable[0].focus({ preventScroll: true });
} else {
modal.setAttribute("tabindex", "-1");
modal.focus();
modal.focus({ preventScroll: true });
}
}
}
@@ -95,11 +123,17 @@ function closeModal(projectId) {
const modal = document.getElementById(projectId + "-modal");
if (modal) {
modal.classList.add("hidden");
document.body.style.overflow = "auto";
document.body.classList.remove("modal-open");
document.body.style.paddingRight = "";
// Return focus to the element that triggered the modal
// Return focus to the element that triggered the modal.
// preventScroll keeps the page from jumping back to that element.
if (_modalPreviousFocus) {
_modalPreviousFocus.focus();
try {
_modalPreviousFocus.focus({ preventScroll: true });
} catch (e) {
_modalPreviousFocus.focus();
}
_modalPreviousFocus = null;
}
}
privacidad-ca.html
+5 -6
View File
@@ -32,7 +32,6 @@
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
@@ -51,7 +50,7 @@
<header class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between">
<a href="index-ca.html" class="flex items-center gap-2 group cursor-pointer">
<div class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">auto_awesome</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M760 600 710 710 600 760 710 810 760 920 810 810 920 760 810 710ZM760 40 710 150 600 200 710 250 760 360 810 250 920 200 810 150ZM360 160 260 380 40 480 260 580 360 800 460 580 680 480 460 380ZM360 354 400 440 486 480 400 520 360 606 320 520 234 480 320 440ZM360 480Z"/></svg>
</div>
<h2 class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white">Itziar ZG</h2>
</a>
@@ -71,8 +70,8 @@
<a href="privacidad-en.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="English">EN</a>
</div>
<button class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors" id="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
<span class="material-symbols-outlined text-xl dark:hidden">dark_mode</span>
<span class="material-symbols-outlined text-xl hidden dark:block text-yellow-200">light_mode</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl dark:hidden" aria-hidden="true"><path d="M480 120Q330 120 225.0 225.0Q120 330 120 480Q120 630 225.0 735.0Q330 840 480 840Q494 840 507.5 839.0Q521 838 534 836Q493 807 468.5 760.5Q444 714 444 660Q444 570 507.0 507.0Q570 444 660 444Q715 444 761.0 468.5Q807 493 836 534Q838 521 839.0 507.5Q840 494 840 480Q840 330 735.0 225.0Q630 120 480 120ZM480 200Q568 200 638.0 248.5Q708 297 740 375Q720 370 700.0 367.0Q680 364 660 364Q537 364 450.5 450.5Q364 537 364 660Q364 680 367.0 700.0Q370 720 375 740Q297 708 248.5 638.0Q200 568 200 480Q200 364 282.0 282.0Q364 200 480 200ZM470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl hidden dark:block text-yellow-200" aria-hidden="true"><path d="M480.0 360.0Q530 360 565.0 395.0Q600 430 600.0 480.0Q600 530 565.0 565.0Q530 600 480.0 600.0Q430 600 395.0 565.0Q360 530 360.0 480.0Q360 430 395.0 395.0Q430 360 480.0 360.0ZM480.0 280.0Q397 280 338.5 338.5Q280 397 280.0 480.0Q280 563 338.5 621.5Q397 680 480.0 680.0Q563 680 621.5 621.5Q680 563 680.0 480.0Q680 397 621.5 338.5Q563 280 480.0 280.0ZM200 440H40V520H200ZM920 440H760V520H920ZM440 760V920H520V760ZM440 40V200H520V40ZM256 650 155 747 212 806 308 706ZM748 154 651 255 704 310 805 213ZM650 704 747 805 806 748 706 652ZM154 212 255 309 310 256 213 155ZM480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Z"/></svg>
</button>
<a class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25 flex items-center justify-center" href="index-ca.html#contact">
Parlem
@@ -83,7 +82,7 @@
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<div class="mb-8">
<a href="index-ca.html" class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-sm">arrow_back</span>
<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>
Tornar a l'inici
</a>
</div>
@@ -193,7 +192,7 @@
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">8. Cookies</h2>
</div>
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl text-slate-700 dark:text-slate-300 leading-relaxed flex items-start gap-3">
<span class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-emerald-500 mt-1 shrink-0" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
<p><strong>Aquest lloc web no utilitza cookies</strong> de cap mena (ni pròpies ni de tercers). El sistema d'analítica (Umami) és cookieless per disseny.</p>
</div>
</article>
privacidad-en.html
+5 -6
View File
@@ -32,7 +32,6 @@
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
@@ -51,7 +50,7 @@
<header class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between">
<a href="index-en.html" class="flex items-center gap-2 group cursor-pointer">
<div class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">auto_awesome</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M760 600 710 710 600 760 710 810 760 920 810 810 920 760 810 710ZM760 40 710 150 600 200 710 250 760 360 810 250 920 200 810 150ZM360 160 260 380 40 480 260 580 360 800 460 580 680 480 460 380ZM360 354 400 440 486 480 400 520 360 606 320 520 234 480 320 440ZM360 480Z"/></svg>
</div>
<h2 class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white">Itziar ZG</h2>
</a>
@@ -71,8 +70,8 @@
<span class="text-primary">EN</span>
</div>
<button class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors" id="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
<span class="material-symbols-outlined text-xl dark:hidden">dark_mode</span>
<span class="material-symbols-outlined text-xl hidden dark:block text-yellow-200">light_mode</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl dark:hidden" aria-hidden="true"><path d="M480 120Q330 120 225.0 225.0Q120 330 120 480Q120 630 225.0 735.0Q330 840 480 840Q494 840 507.5 839.0Q521 838 534 836Q493 807 468.5 760.5Q444 714 444 660Q444 570 507.0 507.0Q570 444 660 444Q715 444 761.0 468.5Q807 493 836 534Q838 521 839.0 507.5Q840 494 840 480Q840 330 735.0 225.0Q630 120 480 120ZM480 200Q568 200 638.0 248.5Q708 297 740 375Q720 370 700.0 367.0Q680 364 660 364Q537 364 450.5 450.5Q364 537 364 660Q364 680 367.0 700.0Q370 720 375 740Q297 708 248.5 638.0Q200 568 200 480Q200 364 282.0 282.0Q364 200 480 200ZM470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl hidden dark:block text-yellow-200" aria-hidden="true"><path d="M480.0 360.0Q530 360 565.0 395.0Q600 430 600.0 480.0Q600 530 565.0 565.0Q530 600 480.0 600.0Q430 600 395.0 565.0Q360 530 360.0 480.0Q360 430 395.0 395.0Q430 360 480.0 360.0ZM480.0 280.0Q397 280 338.5 338.5Q280 397 280.0 480.0Q280 563 338.5 621.5Q397 680 480.0 680.0Q563 680 621.5 621.5Q680 563 680.0 480.0Q680 397 621.5 338.5Q563 280 480.0 280.0ZM200 440H40V520H200ZM920 440H760V520H920ZM440 760V920H520V760ZM440 40V200H520V40ZM256 650 155 747 212 806 308 706ZM748 154 651 255 704 310 805 213ZM650 704 747 805 806 748 706 652ZM154 212 255 309 310 256 213 155ZM480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Z"/></svg>
</button>
<a class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25 flex items-center justify-center" href="index-en.html#contact">
Let's talk
@@ -83,7 +82,7 @@
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<div class="mb-8">
<a href="index-en.html" class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-sm">arrow_back</span>
<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>
Back to home
</a>
</div>
@@ -193,7 +192,7 @@
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">8. Cookies</h2>
</div>
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl text-slate-700 dark:text-slate-300 leading-relaxed flex items-start gap-3">
<span class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-emerald-500 mt-1 shrink-0" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
<p><strong>This website does not use any cookies</strong> (neither first-party nor third-party). The analytics system (Umami) is cookieless by design.</p>
</div>
</article>
privacidad.html
+5 -6
View File
@@ -32,7 +32,6 @@
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
@@ -51,7 +50,7 @@
<header class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between">
<a href="index.html" class="flex items-center gap-2 group cursor-pointer">
<div class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">auto_awesome</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M760 600 710 710 600 760 710 810 760 920 810 810 920 760 810 710ZM760 40 710 150 600 200 710 250 760 360 810 250 920 200 810 150ZM360 160 260 380 40 480 260 580 360 800 460 580 680 480 460 380ZM360 354 400 440 486 480 400 520 360 606 320 520 234 480 320 440ZM360 480Z"/></svg>
</div>
<h2 class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white">Itziar ZG</h2>
</a>
@@ -71,8 +70,8 @@
<a href="privacidad-en.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="English">EN</a>
</div>
<button class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors" id="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
<span class="material-symbols-outlined text-xl dark:hidden">dark_mode</span>
<span class="material-symbols-outlined text-xl hidden dark:block text-yellow-200">light_mode</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl dark:hidden" aria-hidden="true"><path d="M480 120Q330 120 225.0 225.0Q120 330 120 480Q120 630 225.0 735.0Q330 840 480 840Q494 840 507.5 839.0Q521 838 534 836Q493 807 468.5 760.5Q444 714 444 660Q444 570 507.0 507.0Q570 444 660 444Q715 444 761.0 468.5Q807 493 836 534Q838 521 839.0 507.5Q840 494 840 480Q840 330 735.0 225.0Q630 120 480 120ZM480 200Q568 200 638.0 248.5Q708 297 740 375Q720 370 700.0 367.0Q680 364 660 364Q537 364 450.5 450.5Q364 537 364 660Q364 680 367.0 700.0Q370 720 375 740Q297 708 248.5 638.0Q200 568 200 480Q200 364 282.0 282.0Q364 200 480 200ZM470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl hidden dark:block text-yellow-200" aria-hidden="true"><path d="M480.0 360.0Q530 360 565.0 395.0Q600 430 600.0 480.0Q600 530 565.0 565.0Q530 600 480.0 600.0Q430 600 395.0 565.0Q360 530 360.0 480.0Q360 430 395.0 395.0Q430 360 480.0 360.0ZM480.0 280.0Q397 280 338.5 338.5Q280 397 280.0 480.0Q280 563 338.5 621.5Q397 680 480.0 680.0Q563 680 621.5 621.5Q680 563 680.0 480.0Q680 397 621.5 338.5Q563 280 480.0 280.0ZM200 440H40V520H200ZM920 440H760V520H920ZM440 760V920H520V760ZM440 40V200H520V40ZM256 650 155 747 212 806 308 706ZM748 154 651 255 704 310 805 213ZM650 704 747 805 806 748 706 652ZM154 212 255 309 310 256 213 155ZM480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Z"/></svg>
</button>
<a class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25 flex items-center justify-center" href="index.html#contact">
Hablemos
@@ -83,7 +82,7 @@
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<div class="mb-8">
<a href="index.html" class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-sm">arrow_back</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-sm" aria-hidden="true"><path d="M313 440 537 216 480 160 160 480 480 800 537 744 313 520H800V440Z"/></svg>
Volver al inicio
</a>
</div>
@@ -193,7 +192,7 @@
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">8. Cookies</h2>
</div>
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl text-slate-700 dark:text-slate-300 leading-relaxed flex items-start gap-3">
<span class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-emerald-500 mt-1 shrink-0" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
<p><strong>Este sitio web no utiliza cookies</strong> de ningún tipo (ni propias ni de terceros). El sistema de analítica (Umami) es cookieless por diseño.</p>
</div>
</article>