fix(lab): repair tab DOM structure, restore missing content, stop page jumps

- Fix malformed class attribute on tab buttons container (was breaking
  pb-4 mb-8 dark:border-slate-800 classes; tab buttons sat glued to
  content with no spacing)
- Move 'Trabajo Anterior' details back inside #tab-proyectos where it
  belongs (had been orphaned into #tab-contents after earlier balance
  fixes, causing it to render on every tab)
- Close tab-proyectos correctly so Proyectos and Notes panes show their
  own content instead of inheriting display:none from Infraestructura
- initTabs() now scrolls smoothly to the tab buttons container on switch
  to prevent the 'jump' caused by varying content height
This commit is contained in:
2026-07-28 19:32:28 +02:00
parent 29d215495d
commit 5c3f7a7aa2
9 changed files with 164 additions and 377 deletions
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">
<style>
path { fill: #0f172a; }
@media (prefers-color-scheme: dark) {
path { fill: #f7f6f8; }
}
</style>
<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>

After

Width:  |  Height:  |  Size: 478 B

+1
View File
@@ -4,6 +4,7 @@
<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>
<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 = {
+49 -128
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Itziar ZG | Desenvolupament web sobirà 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 = {
@@ -43,15 +44,7 @@
rel="alternate"
hreflang="en"
href="https://www.itziarzameza.dev/index-en.html"
/>
<link
rel="preload"
href="fonts/material-symbols-outlined.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
/> <link
rel="preload"
href="fonts/space/space-grotesk-v22-latin-regular.woff2"
as="font"
@@ -150,14 +143,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>
<button
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"
@@ -240,9 +227,7 @@
<div class="grid md:grid-cols-2 gap-12 mb-16">
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
>target</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M480.0 80.0Q397 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.0 480.0Q880 397 848.5 324.0Q817 251 763.0 197.0Q709 143 636.0 111.5Q563 80 480.0 80.0ZM480.0 160.0Q614 160 707.0 253.0Q800 346 800.0 480.0Q800 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.0 160.0ZM480.0 240.0Q380 240 310.0 310.0Q240 380 240.0 480.0Q240 580 310.0 650.0Q380 720 480.0 720.0Q580 720 650.0 650.0Q720 580 720.0 480.0Q720 380 650.0 310.0Q580 240 480.0 240.0ZM480.0 320.0Q546 320 593.0 367.0Q640 414 640.0 480.0Q640 546 593.0 593.0Q546 640 480.0 640.0Q414 640 367.0 593.0Q320 546 320.0 480.0Q320 414 367.0 367.0Q414 320 480.0 320.0ZM480.0 400.0Q447 400 423.5 423.5Q400 447 400.0 480.0Q400 513 423.5 536.5Q447 560 480.0 560.0Q513 560 536.5 536.5Q560 513 560.0 480.0Q560 447 536.5 423.5Q513 400 480.0 400.0Z"/></svg>
<h3
class="text-2xl font-serif italic font-bold dark:text-white"
>
@@ -258,9 +243,7 @@
</div>
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
>explore</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M300 300 580 380 660 660 380 580ZM480 420Q455 420 437.5 437.5Q420 455 420.0 480.0Q420 505 437.5 522.5Q455 540 480.0 540.0Q505 540 522.5 522.5Q540 505 540.0 480.0Q540 455 522.5 437.5Q505 420 480 420ZM480 80Q397 80 324.0 111.5Q251 143 197.0 197.0Q143 251 111.5 324.0Q80 397 80 480Q80 563 111.5 636.0Q143 709 197.0 763.0Q251 817 324.0 848.5Q397 880 480 880Q563 880 636.0 848.5Q709 817 763.0 763.0Q817 709 848.5 636.0Q880 563 880 480Q880 397 848.5 324.0Q817 251 763.0 197.0Q709 143 636.0 111.5Q563 80 480 80ZM480 160Q613 160 706.5 253.5Q800 347 800 480Q800 613 706.5 706.5Q613 800 480 800Q347 800 253.5 706.5Q160 613 160 480Q160 347 253.5 253.5Q347 160 480 160ZM480 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="text-2xl font-serif italic font-bold dark:text-white"
>
@@ -293,7 +276,7 @@
<div
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
>
<span class="material-symbols-outlined">eco</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M216 176Q171 221 145.5 280.0Q120 339 120 402Q120 465 144.0 526.5Q168 588 222 642Q257 677 308.5 702.0Q360 727 430.5 741.5Q501 756 591.5 759.0Q682 762 794 752Q802 646 799.0 557.0Q796 468 782.5 396.5Q769 325 744.5 271.5Q720 218 684 182Q631 129 571.5 104.5Q512 80 450 80Q385 80 323.0 105.5Q261 131 216 176ZM328 192Q357 175 387.5 167.5Q418 160 450 160Q496 160 541.0 178.5Q586 197 627 238Q645 256 663.5 288.5Q682 321 695.5 373.5Q709 426 716.0 500.5Q723 575 718 678Q669 680 607.5 679.5Q546 679 485.0 670.0Q424 661 369.0 641.0Q314 621 279 586Q234 541 217.0 497.0Q200 453 200 412Q200 353 222.5 308.5Q245 264 262 246Q304 326 373.0 399.5Q442 473 534 520Q462 457 408.5 377.5Q355 298 328 192ZM328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192ZM328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Sostenibilitat (Green Software)
@@ -312,13 +295,9 @@
rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
>
<span class="material-symbols-outlined text-base"
>verified</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-base" 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>
<span>Green Software Practitioner</span>
<span class="material-symbols-outlined text-xs ml-auto"
>open_in_new</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs ml-auto" 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>
@@ -329,7 +308,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">folder_open</span>
<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 800H400L480 720H800Q833 720 856.5 696.5Q880 673 880 640H447L367 720H160Q160 720 160.0 720.0Q160 720 160 720V240Q160 240 160.0 240.0Q160 240 160 240L256 560H940L837 217Q829 191 807.5 175.5Q786 160 760 160ZM244 240H760L832 480H316ZM244 240 316 480 244 240ZM160 640V720Q160 720 160.0 720.0Q160 720 160 720V640Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Programari Lliure
@@ -350,7 +329,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">groups</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M0 240V303Q0 346 44.0 373.0Q88 400 160 400Q173 400 185.0 399.5Q197 399 208 397Q194 376 187.0 353.0Q180 330 180 305V240ZM240 240V305Q240 337 257.5 363.5Q275 390 307 410Q339 430 383.5 440.0Q428 450 480 450Q533 450 577.5 440.0Q622 430 654 410Q686 390 703.0 363.5Q720 337 720 305V240ZM780 240V305Q780 331 773.5 354.0Q767 377 754 397Q765 399 776.5 399.5Q788 400 800 400Q872 400 916.0 373.5Q960 347 960 303V240ZM325 320H636Q626 340 580.5 355.0Q535 370 480 370Q425 370 379.5 355.0Q334 340 325 320ZM160 440Q127 440 103.5 463.5Q80 487 80 520Q80 554 103.5 577.0Q127 600 160 600Q194 600 217.0 577.0Q240 554 240 520Q240 487 217.0 463.5Q194 440 160 440ZM800 440Q767 440 743.5 463.5Q720 487 720 520Q720 554 743.5 577.0Q767 600 800 600Q834 600 857.0 577.0Q880 554 880 520Q880 487 857.0 463.5Q834 440 800 440ZM480 480Q430 480 395.0 515.0Q360 550 360 600Q360 651 395.0 685.5Q430 720 480 720Q531 720 565.5 685.5Q600 651 600 600Q600 550 565.5 515.0Q531 480 480 480ZM480 560Q497 560 508.5 571.5Q520 583 520 600Q520 617 508.5 628.5Q497 640 480 640Q463 640 451.5 628.5Q440 617 440 600Q440 583 451.5 571.5Q463 560 480 560ZM481 320Q481 320 481.0 320.0Q481 320 481 320Q481 320 481.0 320.0Q481 320 481 320ZM480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">Bé Comú</h4>
<p
@@ -369,9 +348,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined"
>accessibility_new</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M480.0 720.0Q447 720 423.5 743.5Q400 767 400.0 800.0Q400 833 423.5 856.5Q447 880 480.0 880.0Q513 880 536.5 856.5Q560 833 560.0 800.0Q560 767 536.5 743.5Q513 720 480.0 720.0ZM360 80V600Q300 605 238.0 615.0Q176 625 120 640L140 720Q218 699 306.0 689.5Q394 680 480.0 680.0Q566 680 654.0 689.5Q742 699 820 720L840 640Q784 625 722.0 615.0Q660 605 600 600V80H520V320H440V80Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Accessibilitat (a11y)
@@ -392,7 +369,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">shield</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M480 80Q341 115 250.5 239.5Q160 364 160 516V760L480 880L800 760V516Q800 364 709.5 239.5Q619 115 480 80ZM480 164Q584 197 652.0 296.0Q720 395 720 516V705L480 795L240 705V516Q240 395 308.0 296.0Q376 197 480 164ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Privacitat
@@ -413,7 +390,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">psychology</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M240 80V252Q183 304 151.5 373.5Q120 443 120 520Q120 670 225.0 775.0Q330 880 480 880Q605 880 701.5 806.5Q798 733 827 615L879 410Q884 391 872.0 375.5Q860 360 840 360H760V240Q760 207 736.5 183.5Q713 160 680 160H600V80H520V240H680Q680 240 680.0 240.0Q680 240 680 240V440H788L750 595Q727 686 652.0 743.0Q577 800 480 800Q364 800 282.0 719.0Q200 638 200 522Q200 462 224.5 408.0Q249 354 294 312L320 288V80ZM494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440ZM440 360H520L526 410Q534 413 540.5 417.0Q547 421 552 426L598 406L638 474L598 504Q600 512 600.0 520.0Q600 528 598 536L638 566L598 634L552 614Q547 619 540.5 623.0Q534 627 526 630L520 680H440L434 630Q426 627 419.5 623.0Q413 619 408 614L362 634L322 566L362 536Q360 528 360.0 520.0Q360 512 362 504L322 474L362 406L408 426Q413 421 419.5 417.0Q426 413 434 410ZM480.0 460.0Q455 460 437.5 477.5Q420 495 420.0 520.0Q420 545 437.5 562.5Q455 580 480.0 580.0Q505 580 522.5 562.5Q540 545 540.0 520.0Q540 495 522.5 477.5Q505 460 480.0 460.0Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
IA Responsable
@@ -447,34 +424,30 @@
<!-- Tab Buttons Container -->
<div
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
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"
>
<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"
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"
data-tab="infraestructura"
>
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"
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"
>
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"
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"
>
Notes
@@ -484,7 +457,7 @@
<!-- Tab Contents -->
<div id="tab-contents">
<!-- Tab 1: Infraestructura -->
<div id="tab-infraestructura" class="tab-pane block">
<div id="tab-infraestructura" class="tab-pane block" role="tabpanel" aria-labelledby="tab-infraestructura-button" aria-hidden="false">
<div class="grid md:grid-cols-2 gap-8">
<div class="space-y-6">
<h3 class="text-2xl font-serif italic dark:text-white">
@@ -504,7 +477,7 @@
<div
class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2"
>
<span class="material-symbols-outlined">bolt</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M422 232 629 480H469L498 707L313 440H452ZM320 80 360 360H160L520 880H600L560 560H800L400 80ZM471 470Z"/></svg>
<span>Compromís Verd</span>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">
@@ -517,10 +490,7 @@
</div>
<div class="grid grid-cols-2 gap-4">
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>dns</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="M300 720Q275 720 257.5 702.5Q240 685 240 660Q240 635 257.5 617.5Q275 600 300 600Q325 600 342.5 617.5Q360 635 360 660Q360 685 342.5 702.5Q325 720 300 720ZM300 320Q275 320 257.5 302.5Q240 285 240 260Q240 235 257.5 217.5Q275 200 300 200Q325 200 342.5 217.5Q360 235 360 260Q360 285 342.5 302.5Q325 320 300 320ZM160 840H800Q817 840 828.5 828.5Q840 817 840 800V520Q840 503 828.5 491.5Q817 480 800 480H160Q143 480 131.5 491.5Q120 503 120 520V800Q120 817 131.5 828.5Q143 840 160 840ZM200 760V560H760V760ZM160 440H800Q817 440 828.5 428.5Q840 417 840 400V120Q840 103 828.5 91.5Q817 80 800 80H160Q143 80 131.5 91.5Q120 103 120 120V400Q120 417 131.5 428.5Q143 440 160 440ZM200 360V160H760V360ZM200 760V560ZM200 360V160Z"/></svg>
<h4 class="font-bold dark:text-white">
Hetzner Hèlsinki
</h4>
@@ -532,10 +502,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>deployed_code</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 183V457L200 596V322Q200 322 200.0 322.0Q200 322 200 322ZM520 183 760 322Q760 322 760.0 322.0Q760 322 760 322V596L520 457ZM480 526 717 663 480 800Q480 800 480.0 800.0Q480 800 480 800L243 663ZM160 252Q141 263 130.5 281.0Q120 299 120 321V639Q120 661 130.5 679.0Q141 697 160 708L440 869Q459 880 480.0 880.0Q501 880 520 869L800 708Q819 697 829.5 679.0Q840 661 840 639V321Q840 299 829.5 281.0Q819 263 800 252L520 91Q501 80 480.0 80.0Q459 80 440 91ZM480 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>
<h4 class="font-bold dark:text-white">Coolify</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -544,10 +511,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>git_gesture</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="M284 440H80V520H284Q298 589 352.5 634.5Q407 680 480.0 680.0Q553 680 607.5 634.5Q662 589 676 520H880V440H676Q662 371 607.5 325.5Q553 280 480.0 280.0Q407 280 352.5 325.5Q298 371 284 440ZM480 360Q530 360 565.0 395.0Q600 430 600 480Q600 530 565.0 565.0Q530 600 480 600Q430 600 395.0 565.0Q360 530 360 480Q360 430 395.0 395.0Q430 360 480 360Z"/></svg>
<h4 class="font-bold dark:text-white">Forgejo</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -557,10 +521,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>hub</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 280Q254 280 266.0 277.0Q278 274 289 269L346 340Q318 371 307.0 410.0Q296 449 302 488L221 515Q204 490 178.0 475.0Q152 460 120 460Q70 460 35.0 495.0Q0 530 0 580Q0 630 35.0 665.0Q70 700 120 700Q170 700 205.0 665.0Q240 630 240 580Q240 578 240.0 576.0Q240 574 240 572L321 544Q341 580 374.5 605.0Q408 630 450 637V724Q411 735 385.5 766.5Q360 798 360 840Q360 890 395.0 925.0Q430 960 480.0 960.0Q530 960 565.0 925.0Q600 890 600 840Q600 798 574.0 766.5Q548 735 510 724V637Q552 630 585.5 605.0Q619 580 639 544L720 572Q720 574 720.0 576.0Q720 578 720 580Q720 630 755.0 665.0Q790 700 840 700Q890 700 925.0 665.0Q960 630 960.0 580.0Q960 530 925.0 495.0Q890 460 840 460Q808 460 781.5 475.0Q755 490 739 515L658 488Q664 449 653.0 410.5Q642 372 614 340L671 270Q682 275 694.0 277.5Q706 280 720 280Q770 280 805.0 245.0Q840 210 840.0 160.0Q840 110 805.0 75.0Q770 40 720.0 40.0Q670 40 635.0 75.0Q600 110 600 160Q600 180 606.5 198.5Q613 217 624 232L567 303Q526 280 479.5 280.0Q433 280 392 303L336 232Q347 217 353.5 198.5Q360 180 360 160Q360 110 325.0 75.0Q290 40 240.0 40.0Q190 40 155.0 75.0Q120 110 120.0 160.0Q120 210 155.0 245.0Q190 280 240 280ZM120 540Q137 540 148.5 551.5Q160 563 160.0 580.0Q160 597 148.5 608.5Q137 620 120 620Q103 620 91.5 608.5Q80 597 80.0 580.0Q80 563 91.5 551.5Q103 540 120 540ZM240.0 120.0Q257 120 268.5 131.5Q280 143 280.0 160.0Q280 177 268.5 188.5Q257 200 240.0 200.0Q223 200 211.5 188.5Q200 177 200.0 160.0Q200 143 211.5 131.5Q223 120 240.0 120.0ZM480.0 800.0Q497 800 508.5 811.5Q520 823 520.0 840.0Q520 857 508.5 868.5Q497 880 480.0 880.0Q463 880 451.5 868.5Q440 857 440.0 840.0Q440 823 451.5 811.5Q463 800 480.0 800.0ZM480 360Q522 360 551.0 389.0Q580 418 580 460Q580 502 551.0 531.0Q522 560 480 560Q438 560 409.0 531.0Q380 502 380 460Q380 418 409.0 389.0Q438 360 480 360ZM720.0 120.0Q737 120 748.5 131.5Q760 143 760.0 160.0Q760 177 748.5 188.5Q737 200 720.0 200.0Q703 200 691.5 188.5Q680 177 680.0 160.0Q680 143 691.5 131.5Q703 120 720.0 120.0ZM840.0 540.0Q857 540 868.5 551.5Q880 563 880.0 580.0Q880 597 868.5 608.5Q857 620 840.0 620.0Q823 620 811.5 608.5Q800 597 800.0 580.0Q800 563 811.5 551.5Q823 540 840.0 540.0ZM480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0ZM120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0ZM480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460ZM840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0ZM240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0ZM720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Z"/></svg>
<h4 class="font-bold dark:text-white">n8n</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -570,10 +531,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>monitoring</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="M120 120V200L200 280V120ZM280 120V360L360 440V120ZM440 120V440L520 359V120ZM600 120V359L680 439V120ZM760 120V520L840 600V120ZM120 327V440L400 720L560 560L840 840V727L560 447L400 607Z"/></svg>
<h4 class="font-bold dark:text-white">Umami</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -583,10 +541,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>screen_record</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="M158 242Q121 292 100.5 352.5Q80 413 80.0 480.0Q80 547 100.0 607.0Q120 667 157 717L215 660Q189 622 174.5 576.5Q160 531 160.0 480.0Q160 429 174.5 383.0Q189 337 215 299ZM480 80Q413 80 353.0 100.0Q293 120 243 157L300 215Q338 189 383.5 174.5Q429 160 480 160Q531 160 576.5 174.5Q622 189 660 215L717 157Q667 120 607.0 100.0Q547 80 480 80ZM802 242 745 299Q771 337 785.5 383.0Q800 429 800.0 480.0Q800 531 785.5 576.5Q771 622 745 660L803 717Q840 667 860.0 607.0Q880 547 880.0 480.0Q880 413 859.5 352.5Q839 292 802 242ZM299 745 242 802Q292 839 352.5 859.5Q413 880 480 880Q548 880 608.0 859.5Q668 839 718 802L661 745Q623 771 577.0 785.5Q531 800 480 800Q429 800 383.0 785.5Q337 771 299 745ZM480 280Q397 280 338.5 338.5Q280 397 280 480Q280 563 338.5 621.5Q397 680 480 680Q563 680 621.5 621.5Q680 563 680 480Q680 397 621.5 338.5Q563 280 480 280Z"/></svg>
<h4 class="font-bold dark:text-white">Cap</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -596,19 +551,19 @@
</p>
</div>
</div>
</div>
</div>
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
<!--
<div id="tab-experimentos" class="tab-pane hidden">
<div id="tab-experimentos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-experimentos-button" aria-hidden="true">
<div class="grid md:grid-cols-3 gap-6">
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
>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" 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>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
>Actiu</span
@@ -629,10 +584,7 @@
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
>memory</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M360 360V600H600V360ZM440 440H520V520H440ZM360 120V200H280Q247 200 223.5 223.5Q200 247 200 280V360H120V440H200V520H120V600H200V680Q200 713 223.5 736.5Q247 760 280 760H360V840H440V760H520V840H600V760H680Q713 760 736.5 736.5Q760 713 760 680V600H840V520H760V440H840V360H760V280Q760 247 736.5 223.5Q713 200 680 200H600V120H520V200H440V120ZM680 280Q680 280 680.0 280.0Q680 280 680 280V680Q680 680 680.0 680.0Q680 680 680 680H280Q280 680 280.0 680.0Q280 680 280 680V280Q280 280 280.0 280.0Q280 280 280 280ZM480 480Z"/></svg>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
>Actiu</span
@@ -653,10 +605,7 @@
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
>visibility</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M480.0 320.0Q555 320 607.5 372.5Q660 425 660.0 500.0Q660 575 607.5 627.5Q555 680 480.0 680.0Q405 680 352.5 627.5Q300 575 300.0 500.0Q300 425 352.5 372.5Q405 320 480.0 320.0ZM480.0 392.0Q435 392 403.5 423.5Q372 455 372.0 500.0Q372 545 403.5 576.5Q435 608 480.0 608.0Q525 608 556.5 576.5Q588 545 588.0 500.0Q588 455 556.5 423.5Q525 392 480.0 392.0ZM40 500Q94 637 214.0 718.5Q334 800 480.0 800.0Q626 800 746.0 718.5Q866 637 920 500Q866 363 746.0 281.5Q626 200 480.0 200.0Q334 200 214.0 281.5Q94 363 40 500ZM480 500Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480 500Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480 500ZM832 500Q782 601 687.5 660.5Q593 720 480.0 720.0Q367 720 272.5 660.5Q178 601 128 500Q178 399 272.5 339.5Q367 280 480.0 280.0Q593 280 687.5 339.5Q782 399 832 500Z"/></svg>
<span
class="px-2.5 py-0.5 bg-amber-500/10 text-amber-500 text-xs font-bold rounded-full"
>Pendent</span
@@ -678,7 +627,7 @@
-->
<!-- Tab 3: Projectes -->
<div id="tab-proyectos" class="tab-pane hidden">
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
<!-- Eines Reals -->
<div class="mb-12">
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
@@ -737,10 +686,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<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">
Cases Tancades
</h4>
@@ -773,10 +719,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>music_note</span
>
<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>
@@ -799,10 +742,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>route</span
>
<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>
@@ -832,10 +772,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<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>
@@ -865,10 +802,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>volunteer_activism</span
>
<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>
@@ -889,7 +823,7 @@
</div>
</div>
</div>
@@ -916,10 +850,7 @@
<span
class="flex items-center gap-2 hover:text-primary transition-colors"
>
<span
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
>chevron_right</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon transform group-open:rotate-90 transition-transform text-slate-400" aria-hidden="true"><path d="M504 480 320 664 376 720 616 480 376 240 320 296Z"/></svg>
Treball Anterior (Projectes d'IA comercial)
</span>
</summary>
@@ -984,9 +915,8 @@
</details>
</div>
</div>
<!-- Tab 4: Writing -->
<div id="tab-writing" class="tab-pane hidden">
<!-- 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
class="text-slate-600 dark:text-slate-400 italic text-center text-sm"
@@ -1007,9 +937,7 @@
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full flex items-center gap-1"
>
<span class="material-symbols-outlined text-xs"
>verified</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="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>
Green Software
</span>
</div>
@@ -1150,9 +1078,7 @@
class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
>
Llegir article complet a la secció Emprenta
<span class="material-symbols-outlined text-xs"
>arrow_right_alt</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="M560 240 504 298 646 440H160V520H646L504 662L560 720L800 480Z"/></svg>
</a>
<div
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400 mt-4"
@@ -1176,10 +1102,7 @@
class="glass rounded-[3rem] p-12 md:p-24 text-center relative overflow-hidden"
>
<div class="absolute top-0 right-0 p-8">
<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"
@@ -1200,7 +1123,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.dev@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">
@@ -1209,16 +1132,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>
+47 -122
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Itziar ZG | Sovereign &amp; 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 = {
@@ -43,15 +44,7 @@
rel="alternate"
hreflang="en"
href="https://www.itziarzameza.dev/index-en.html"
/>
<link
rel="preload"
href="fonts/material-symbols-outlined.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
/> <link
rel="preload"
href="fonts/space/space-grotesk-v22-latin-regular.woff2"
as="font"
@@ -150,14 +143,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>
<button
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"
@@ -241,9 +228,7 @@
<div class="grid md:grid-cols-2 gap-12 mb-16">
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
>target</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M480.0 80.0Q397 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.0 480.0Q880 397 848.5 324.0Q817 251 763.0 197.0Q709 143 636.0 111.5Q563 80 480.0 80.0ZM480.0 160.0Q614 160 707.0 253.0Q800 346 800.0 480.0Q800 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.0 160.0ZM480.0 240.0Q380 240 310.0 310.0Q240 380 240.0 480.0Q240 580 310.0 650.0Q380 720 480.0 720.0Q580 720 650.0 650.0Q720 580 720.0 480.0Q720 380 650.0 310.0Q580 240 480.0 240.0ZM480.0 320.0Q546 320 593.0 367.0Q640 414 640.0 480.0Q640 546 593.0 593.0Q546 640 480.0 640.0Q414 640 367.0 593.0Q320 546 320.0 480.0Q320 414 367.0 367.0Q414 320 480.0 320.0ZM480.0 400.0Q447 400 423.5 423.5Q400 447 400.0 480.0Q400 513 423.5 536.5Q447 560 480.0 560.0Q513 560 536.5 536.5Q560 513 560.0 480.0Q560 447 536.5 423.5Q513 400 480.0 400.0Z"/></svg>
<h3
class="text-2xl font-serif italic font-bold dark:text-white"
>
@@ -259,9 +244,7 @@
</div>
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
>explore</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M300 300 580 380 660 660 380 580ZM480 420Q455 420 437.5 437.5Q420 455 420.0 480.0Q420 505 437.5 522.5Q455 540 480.0 540.0Q505 540 522.5 522.5Q540 505 540.0 480.0Q540 455 522.5 437.5Q505 420 480 420ZM480 80Q397 80 324.0 111.5Q251 143 197.0 197.0Q143 251 111.5 324.0Q80 397 80 480Q80 563 111.5 636.0Q143 709 197.0 763.0Q251 817 324.0 848.5Q397 880 480 880Q563 880 636.0 848.5Q709 817 763.0 763.0Q817 709 848.5 636.0Q880 563 880 480Q880 397 848.5 324.0Q817 251 763.0 197.0Q709 143 636.0 111.5Q563 80 480 80ZM480 160Q613 160 706.5 253.5Q800 347 800 480Q800 613 706.5 706.5Q613 800 480 800Q347 800 253.5 706.5Q160 613 160 480Q160 347 253.5 253.5Q347 160 480 160ZM480 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="text-2xl font-serif italic font-bold dark:text-white"
>
@@ -293,7 +276,7 @@
<div
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
>
<span class="material-symbols-outlined">eco</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M216 176Q171 221 145.5 280.0Q120 339 120 402Q120 465 144.0 526.5Q168 588 222 642Q257 677 308.5 702.0Q360 727 430.5 741.5Q501 756 591.5 759.0Q682 762 794 752Q802 646 799.0 557.0Q796 468 782.5 396.5Q769 325 744.5 271.5Q720 218 684 182Q631 129 571.5 104.5Q512 80 450 80Q385 80 323.0 105.5Q261 131 216 176ZM328 192Q357 175 387.5 167.5Q418 160 450 160Q496 160 541.0 178.5Q586 197 627 238Q645 256 663.5 288.5Q682 321 695.5 373.5Q709 426 716.0 500.5Q723 575 718 678Q669 680 607.5 679.5Q546 679 485.0 670.0Q424 661 369.0 641.0Q314 621 279 586Q234 541 217.0 497.0Q200 453 200 412Q200 353 222.5 308.5Q245 264 262 246Q304 326 373.0 399.5Q442 473 534 520Q462 457 408.5 377.5Q355 298 328 192ZM328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192ZM328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Sustainability (Green Software)
@@ -311,13 +294,9 @@
rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
>
<span class="material-symbols-outlined text-base"
>verified</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-base" 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>
<span>Green Software Practitioner</span>
<span class="material-symbols-outlined text-xs ml-auto"
>open_in_new</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs ml-auto" 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>
@@ -328,7 +307,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">folder_open</span>
<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 800H400L480 720H800Q833 720 856.5 696.5Q880 673 880 640H447L367 720H160Q160 720 160.0 720.0Q160 720 160 720V240Q160 240 160.0 240.0Q160 240 160 240L256 560H940L837 217Q829 191 807.5 175.5Q786 160 760 160ZM244 240H760L832 480H316ZM244 240 316 480 244 240ZM160 640V720Q160 720 160.0 720.0Q160 720 160 720V640Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Free &amp; Open Source Software
@@ -348,7 +327,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">groups</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M0 240V303Q0 346 44.0 373.0Q88 400 160 400Q173 400 185.0 399.5Q197 399 208 397Q194 376 187.0 353.0Q180 330 180 305V240ZM240 240V305Q240 337 257.5 363.5Q275 390 307 410Q339 430 383.5 440.0Q428 450 480 450Q533 450 577.5 440.0Q622 430 654 410Q686 390 703.0 363.5Q720 337 720 305V240ZM780 240V305Q780 331 773.5 354.0Q767 377 754 397Q765 399 776.5 399.5Q788 400 800 400Q872 400 916.0 373.5Q960 347 960 303V240ZM325 320H636Q626 340 580.5 355.0Q535 370 480 370Q425 370 379.5 355.0Q334 340 325 320ZM160 440Q127 440 103.5 463.5Q80 487 80 520Q80 554 103.5 577.0Q127 600 160 600Q194 600 217.0 577.0Q240 554 240 520Q240 487 217.0 463.5Q194 440 160 440ZM800 440Q767 440 743.5 463.5Q720 487 720 520Q720 554 743.5 577.0Q767 600 800 600Q834 600 857.0 577.0Q880 554 880 520Q880 487 857.0 463.5Q834 440 800 440ZM480 480Q430 480 395.0 515.0Q360 550 360 600Q360 651 395.0 685.5Q430 720 480 720Q531 720 565.5 685.5Q600 651 600 600Q600 550 565.5 515.0Q531 480 480 480ZM480 560Q497 560 508.5 571.5Q520 583 520 600Q520 617 508.5 628.5Q497 640 480 640Q463 640 451.5 628.5Q440 617 440 600Q440 583 451.5 571.5Q463 560 480 560ZM481 320Q481 320 481.0 320.0Q481 320 481 320Q481 320 481.0 320.0Q481 320 481 320ZM480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Common Good
@@ -369,9 +348,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined"
>accessibility_new</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M480.0 720.0Q447 720 423.5 743.5Q400 767 400.0 800.0Q400 833 423.5 856.5Q447 880 480.0 880.0Q513 880 536.5 856.5Q560 833 560.0 800.0Q560 767 536.5 743.5Q513 720 480.0 720.0ZM360 80V600Q300 605 238.0 615.0Q176 625 120 640L140 720Q218 699 306.0 689.5Q394 680 480.0 680.0Q566 680 654.0 689.5Q742 699 820 720L840 640Q784 625 722.0 615.0Q660 605 600 600V80H520V320H440V80Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Accessibility (a11y)
@@ -392,7 +369,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">shield</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M480 80Q341 115 250.5 239.5Q160 364 160 516V760L480 880L800 760V516Q800 364 709.5 239.5Q619 115 480 80ZM480 164Q584 197 652.0 296.0Q720 395 720 516V705L480 795L240 705V516Q240 395 308.0 296.0Q376 197 480 164ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">Privacy</h4>
<p
@@ -411,7 +388,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">psychology</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M240 80V252Q183 304 151.5 373.5Q120 443 120 520Q120 670 225.0 775.0Q330 880 480 880Q605 880 701.5 806.5Q798 733 827 615L879 410Q884 391 872.0 375.5Q860 360 840 360H760V240Q760 207 736.5 183.5Q713 160 680 160H600V80H520V240H680Q680 240 680.0 240.0Q680 240 680 240V440H788L750 595Q727 686 652.0 743.0Q577 800 480 800Q364 800 282.0 719.0Q200 638 200 522Q200 462 224.5 408.0Q249 354 294 312L320 288V80ZM494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440ZM440 360H520L526 410Q534 413 540.5 417.0Q547 421 552 426L598 406L638 474L598 504Q600 512 600.0 520.0Q600 528 598 536L638 566L598 634L552 614Q547 619 540.5 623.0Q534 627 526 630L520 680H440L434 630Q426 627 419.5 623.0Q413 619 408 614L362 634L322 566L362 536Q360 528 360.0 520.0Q360 512 362 504L322 474L362 406L408 426Q413 421 419.5 417.0Q426 413 434 410ZM480.0 460.0Q455 460 437.5 477.5Q420 495 420.0 520.0Q420 545 437.5 562.5Q455 580 480.0 580.0Q505 580 522.5 562.5Q540 545 540.0 520.0Q540 495 522.5 477.5Q505 460 480.0 460.0Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Responsible AI
@@ -444,34 +421,30 @@
<!-- Tab Buttons Container -->
<div
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
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"
>
<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"
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"
data-tab="infraestructura"
>
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"
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"
>
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"
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"
>
Notes
@@ -481,7 +454,7 @@
<!-- Tab Contents -->
<div id="tab-contents">
<!-- Tab 1: Infrastructure -->
<div id="tab-infraestructura" class="tab-pane block">
<div id="tab-infraestructura" class="tab-pane block" role="tabpanel" aria-labelledby="tab-infraestructura-button" aria-hidden="false">
<div class="grid md:grid-cols-2 gap-8">
<div class="space-y-6">
<h3 class="text-2xl font-serif italic dark:text-white">
@@ -501,7 +474,7 @@
<div
class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2"
>
<span class="material-symbols-outlined">bolt</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M422 232 629 480H469L498 707L313 440H452ZM320 80 360 360H160L520 880H600L560 560H800L400 80ZM471 470Z"/></svg>
<span>Green Commitment</span>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">
@@ -513,10 +486,7 @@
</div>
<div class="grid grid-cols-2 gap-4">
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>dns</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="M300 720Q275 720 257.5 702.5Q240 685 240 660Q240 635 257.5 617.5Q275 600 300 600Q325 600 342.5 617.5Q360 635 360 660Q360 685 342.5 702.5Q325 720 300 720ZM300 320Q275 320 257.5 302.5Q240 285 240 260Q240 235 257.5 217.5Q275 200 300 200Q325 200 342.5 217.5Q360 235 360 260Q360 285 342.5 302.5Q325 320 300 320ZM160 840H800Q817 840 828.5 828.5Q840 817 840 800V520Q840 503 828.5 491.5Q817 480 800 480H160Q143 480 131.5 491.5Q120 503 120 520V800Q120 817 131.5 828.5Q143 840 160 840ZM200 760V560H760V760ZM160 440H800Q817 440 828.5 428.5Q840 417 840 400V120Q840 103 828.5 91.5Q817 80 800 80H160Q143 80 131.5 91.5Q120 103 120 120V400Q120 417 131.5 428.5Q143 440 160 440ZM200 360V160H760V360ZM200 760V560ZM200 360V160Z"/></svg>
<h4 class="font-bold dark:text-white">
Hetzner Helsinki
</h4>
@@ -528,10 +498,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>deployed_code</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 183V457L200 596V322Q200 322 200.0 322.0Q200 322 200 322ZM520 183 760 322Q760 322 760.0 322.0Q760 322 760 322V596L520 457ZM480 526 717 663 480 800Q480 800 480.0 800.0Q480 800 480 800L243 663ZM160 252Q141 263 130.5 281.0Q120 299 120 321V639Q120 661 130.5 679.0Q141 697 160 708L440 869Q459 880 480.0 880.0Q501 880 520 869L800 708Q819 697 829.5 679.0Q840 661 840 639V321Q840 299 829.5 281.0Q819 263 800 252L520 91Q501 80 480.0 80.0Q459 80 440 91ZM480 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>
<h4 class="font-bold dark:text-white">Coolify</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -540,10 +507,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>git_gesture</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="M284 440H80V520H284Q298 589 352.5 634.5Q407 680 480.0 680.0Q553 680 607.5 634.5Q662 589 676 520H880V440H676Q662 371 607.5 325.5Q553 280 480.0 280.0Q407 280 352.5 325.5Q298 371 284 440ZM480 360Q530 360 565.0 395.0Q600 430 600 480Q600 530 565.0 565.0Q530 600 480 600Q430 600 395.0 565.0Q360 530 360 480Q360 430 395.0 395.0Q430 360 480 360Z"/></svg>
<h4 class="font-bold dark:text-white">Forgejo</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -553,10 +517,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>hub</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 280Q254 280 266.0 277.0Q278 274 289 269L346 340Q318 371 307.0 410.0Q296 449 302 488L221 515Q204 490 178.0 475.0Q152 460 120 460Q70 460 35.0 495.0Q0 530 0 580Q0 630 35.0 665.0Q70 700 120 700Q170 700 205.0 665.0Q240 630 240 580Q240 578 240.0 576.0Q240 574 240 572L321 544Q341 580 374.5 605.0Q408 630 450 637V724Q411 735 385.5 766.5Q360 798 360 840Q360 890 395.0 925.0Q430 960 480.0 960.0Q530 960 565.0 925.0Q600 890 600 840Q600 798 574.0 766.5Q548 735 510 724V637Q552 630 585.5 605.0Q619 580 639 544L720 572Q720 574 720.0 576.0Q720 578 720 580Q720 630 755.0 665.0Q790 700 840 700Q890 700 925.0 665.0Q960 630 960.0 580.0Q960 530 925.0 495.0Q890 460 840 460Q808 460 781.5 475.0Q755 490 739 515L658 488Q664 449 653.0 410.5Q642 372 614 340L671 270Q682 275 694.0 277.5Q706 280 720 280Q770 280 805.0 245.0Q840 210 840.0 160.0Q840 110 805.0 75.0Q770 40 720.0 40.0Q670 40 635.0 75.0Q600 110 600 160Q600 180 606.5 198.5Q613 217 624 232L567 303Q526 280 479.5 280.0Q433 280 392 303L336 232Q347 217 353.5 198.5Q360 180 360 160Q360 110 325.0 75.0Q290 40 240.0 40.0Q190 40 155.0 75.0Q120 110 120.0 160.0Q120 210 155.0 245.0Q190 280 240 280ZM120 540Q137 540 148.5 551.5Q160 563 160.0 580.0Q160 597 148.5 608.5Q137 620 120 620Q103 620 91.5 608.5Q80 597 80.0 580.0Q80 563 91.5 551.5Q103 540 120 540ZM240.0 120.0Q257 120 268.5 131.5Q280 143 280.0 160.0Q280 177 268.5 188.5Q257 200 240.0 200.0Q223 200 211.5 188.5Q200 177 200.0 160.0Q200 143 211.5 131.5Q223 120 240.0 120.0ZM480.0 800.0Q497 800 508.5 811.5Q520 823 520.0 840.0Q520 857 508.5 868.5Q497 880 480.0 880.0Q463 880 451.5 868.5Q440 857 440.0 840.0Q440 823 451.5 811.5Q463 800 480.0 800.0ZM480 360Q522 360 551.0 389.0Q580 418 580 460Q580 502 551.0 531.0Q522 560 480 560Q438 560 409.0 531.0Q380 502 380 460Q380 418 409.0 389.0Q438 360 480 360ZM720.0 120.0Q737 120 748.5 131.5Q760 143 760.0 160.0Q760 177 748.5 188.5Q737 200 720.0 200.0Q703 200 691.5 188.5Q680 177 680.0 160.0Q680 143 691.5 131.5Q703 120 720.0 120.0ZM840.0 540.0Q857 540 868.5 551.5Q880 563 880.0 580.0Q880 597 868.5 608.5Q857 620 840.0 620.0Q823 620 811.5 608.5Q800 597 800.0 580.0Q800 563 811.5 551.5Q823 540 840.0 540.0ZM480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0ZM120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0ZM480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460ZM840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0ZM240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0ZM720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Z"/></svg>
<h4 class="font-bold dark:text-white">n8n</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -565,10 +526,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>monitoring</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="M120 120V200L200 280V120ZM280 120V360L360 440V120ZM440 120V440L520 359V120ZM600 120V359L680 439V120ZM760 120V520L840 600V120ZM120 327V440L400 720L560 560L840 840V727L560 447L400 607Z"/></svg>
<h4 class="font-bold dark:text-white">Umami</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -577,19 +535,19 @@
</p>
</div>
</div>
</div>
</div>
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
<!--
<div id="tab-experimentos" class="tab-pane hidden">
<div id="tab-experimentos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-experimentos-button" aria-hidden="true">
<div class="grid md:grid-cols-3 gap-6">
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
>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" 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>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
>Active</span
@@ -610,10 +568,7 @@
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
>memory</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M360 360V600H600V360ZM440 440H520V520H440ZM360 120V200H280Q247 200 223.5 223.5Q200 247 200 280V360H120V440H200V520H120V600H200V680Q200 713 223.5 736.5Q247 760 280 760H360V840H440V760H520V840H600V760H680Q713 760 736.5 736.5Q760 713 760 680V600H840V520H760V440H840V360H760V280Q760 247 736.5 223.5Q713 200 680 200H600V120H520V200H440V120ZM680 280Q680 280 680.0 280.0Q680 280 680 280V680Q680 680 680.0 680.0Q680 680 680 680H280Q280 680 280.0 680.0Q280 680 280 680V280Q280 280 280.0 280.0Q280 280 280 280ZM480 480Z"/></svg>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
>Active</span
@@ -634,10 +589,7 @@
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
>visibility</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M480.0 320.0Q555 320 607.5 372.5Q660 425 660.0 500.0Q660 575 607.5 627.5Q555 680 480.0 680.0Q405 680 352.5 627.5Q300 575 300.0 500.0Q300 425 352.5 372.5Q405 320 480.0 320.0ZM480.0 392.0Q435 392 403.5 423.5Q372 455 372.0 500.0Q372 545 403.5 576.5Q435 608 480.0 608.0Q525 608 556.5 576.5Q588 545 588.0 500.0Q588 455 556.5 423.5Q525 392 480.0 392.0ZM40 500Q94 637 214.0 718.5Q334 800 480.0 800.0Q626 800 746.0 718.5Q866 637 920 500Q866 363 746.0 281.5Q626 200 480.0 200.0Q334 200 214.0 281.5Q94 363 40 500ZM480 500Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480 500Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480 500ZM832 500Q782 601 687.5 660.5Q593 720 480.0 720.0Q367 720 272.5 660.5Q178 601 128 500Q178 399 272.5 339.5Q367 280 480.0 280.0Q593 280 687.5 339.5Q782 399 832 500Z"/></svg>
<span
class="px-2.5 py-0.5 bg-amber-500/10 text-amber-500 text-xs font-bold rounded-full"
>Pending</span
@@ -659,7 +611,7 @@
-->
<!-- Tab 3: Projects -->
<div id="tab-proyectos" class="tab-pane hidden">
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
<!-- Herramientas Reales -->
<div class="mb-12">
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
@@ -708,10 +660,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<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">
Cases Tancades
</h4>
@@ -744,10 +693,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>music_note</span
>
<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>
@@ -770,10 +716,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>route</span
>
<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>
@@ -803,10 +746,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<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>
@@ -836,10 +776,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>volunteer_activism</span
>
<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>
@@ -860,7 +797,6 @@
</div>
</div>
</div>
@@ -887,10 +823,7 @@
<span
class="flex items-center gap-2 hover:text-primary transition-colors"
>
<span
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
>chevron_right</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon transform group-open:rotate-90 transition-transform text-slate-400" aria-hidden="true"><path d="M504 480 320 664 376 720 616 480 376 240 320 296Z"/></svg>
Previous Work (Commercial &amp; AI Projects)
</span>
</summary>
@@ -954,9 +887,10 @@
</details>
</div>
</div>
</div>
<!-- Tab 4: Writing -->
<div id="tab-writing" class="tab-pane hidden">
<div id="tab-writing" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-writing-button" aria-hidden="true">
<div class="max-w-2xl mx-auto space-y-8">
<p
class="text-slate-600 dark:text-slate-400 italic text-center text-sm"
@@ -977,9 +911,7 @@
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full flex items-center gap-1"
>
<span class="material-symbols-outlined text-xs"
>verified</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="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>
Green Software
</span>
</div>
@@ -1120,9 +1052,7 @@
class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
>
Read full article in Footprint section
<span class="material-symbols-outlined text-xs"
>arrow_right_alt</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="M560 240 504 298 646 440H160V520H646L504 662L560 720L800 480Z"/></svg>
</a>
<div
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400 mt-4"
@@ -1146,10 +1076,7 @@
class="glass rounded-[3rem] p-12 md:p-24 text-center relative overflow-hidden"
>
<div class="absolute top-0 right-0 p-8">
<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"
@@ -1170,7 +1097,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.dev@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">
@@ -1179,16 +1106,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>
+48 -125
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Itziar ZG | Desarrollo web soberano 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 = {
@@ -43,15 +44,7 @@
rel="alternate"
hreflang="en"
href="https://www.itziarzameza.dev/index-en.html"
/>
<link
rel="preload"
href="fonts/material-symbols-outlined.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
/> <link
rel="preload"
href="fonts/space/space-grotesk-v22-latin-regular.woff2"
as="font"
@@ -86,9 +79,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"
@@ -152,14 +143,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>
<button
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"
@@ -249,9 +234,7 @@
<div class="grid md:grid-cols-2 gap-12 mb-16">
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
>target</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M480.0 80.0Q397 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.0 480.0Q880 397 848.5 324.0Q817 251 763.0 197.0Q709 143 636.0 111.5Q563 80 480.0 80.0ZM480.0 160.0Q614 160 707.0 253.0Q800 346 800.0 480.0Q800 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.0 160.0ZM480.0 240.0Q380 240 310.0 310.0Q240 380 240.0 480.0Q240 580 310.0 650.0Q380 720 480.0 720.0Q580 720 650.0 650.0Q720 580 720.0 480.0Q720 380 650.0 310.0Q580 240 480.0 240.0ZM480.0 320.0Q546 320 593.0 367.0Q640 414 640.0 480.0Q640 546 593.0 593.0Q546 640 480.0 640.0Q414 640 367.0 593.0Q320 546 320.0 480.0Q320 414 367.0 367.0Q414 320 480.0 320.0ZM480.0 400.0Q447 400 423.5 423.5Q400 447 400.0 480.0Q400 513 423.5 536.5Q447 560 480.0 560.0Q513 560 536.5 536.5Q560 513 560.0 480.0Q560 447 536.5 423.5Q513 400 480.0 400.0Z"/></svg>
<h3
class="text-2xl font-serif italic font-bold dark:text-white"
>
@@ -267,9 +250,7 @@
</div>
<div class="p-8 glass rounded-3xl border border-white/20">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary text-3xl"
>explore</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M300 300 580 380 660 660 380 580ZM480 420Q455 420 437.5 437.5Q420 455 420.0 480.0Q420 505 437.5 522.5Q455 540 480.0 540.0Q505 540 522.5 522.5Q540 505 540.0 480.0Q540 455 522.5 437.5Q505 420 480 420ZM480 80Q397 80 324.0 111.5Q251 143 197.0 197.0Q143 251 111.5 324.0Q80 397 80 480Q80 563 111.5 636.0Q143 709 197.0 763.0Q251 817 324.0 848.5Q397 880 480 880Q563 880 636.0 848.5Q709 817 763.0 763.0Q817 709 848.5 636.0Q880 563 880 480Q880 397 848.5 324.0Q817 251 763.0 197.0Q709 143 636.0 111.5Q563 80 480 80ZM480 160Q613 160 706.5 253.5Q800 347 800 480Q800 613 706.5 706.5Q613 800 480 800Q347 800 253.5 706.5Q160 613 160 480Q160 347 253.5 253.5Q347 160 480 160ZM480 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="text-2xl font-serif italic font-bold dark:text-white"
>
@@ -302,7 +283,7 @@
<div
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
>
<span class="material-symbols-outlined">eco</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M216 176Q171 221 145.5 280.0Q120 339 120 402Q120 465 144.0 526.5Q168 588 222 642Q257 677 308.5 702.0Q360 727 430.5 741.5Q501 756 591.5 759.0Q682 762 794 752Q802 646 799.0 557.0Q796 468 782.5 396.5Q769 325 744.5 271.5Q720 218 684 182Q631 129 571.5 104.5Q512 80 450 80Q385 80 323.0 105.5Q261 131 216 176ZM328 192Q357 175 387.5 167.5Q418 160 450 160Q496 160 541.0 178.5Q586 197 627 238Q645 256 663.5 288.5Q682 321 695.5 373.5Q709 426 716.0 500.5Q723 575 718 678Q669 680 607.5 679.5Q546 679 485.0 670.0Q424 661 369.0 641.0Q314 621 279 586Q234 541 217.0 497.0Q200 453 200 412Q200 353 222.5 308.5Q245 264 262 246Q304 326 373.0 399.5Q442 473 534 520Q462 457 408.5 377.5Q355 298 328 192ZM328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192ZM328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Sostenibilidad (Green Software)
@@ -321,13 +302,9 @@
rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
>
<span class="material-symbols-outlined text-base"
>verified</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-base" 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>
<span>Green Software Practitioner</span>
<span class="material-symbols-outlined text-xs ml-auto"
>open_in_new</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs ml-auto" 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>
@@ -338,7 +315,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">folder_open</span>
<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 800H400L480 720H800Q833 720 856.5 696.5Q880 673 880 640H447L367 720H160Q160 720 160.0 720.0Q160 720 160 720V240Q160 240 160.0 240.0Q160 240 160 240L256 560H940L837 217Q829 191 807.5 175.5Q786 160 760 160ZM244 240H760L832 480H316ZM244 240 316 480 244 240ZM160 640V720Q160 720 160.0 720.0Q160 720 160 720V640Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Software Libre
@@ -359,7 +336,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">groups</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M0 240V303Q0 346 44.0 373.0Q88 400 160 400Q173 400 185.0 399.5Q197 399 208 397Q194 376 187.0 353.0Q180 330 180 305V240ZM240 240V305Q240 337 257.5 363.5Q275 390 307 410Q339 430 383.5 440.0Q428 450 480 450Q533 450 577.5 440.0Q622 430 654 410Q686 390 703.0 363.5Q720 337 720 305V240ZM780 240V305Q780 331 773.5 354.0Q767 377 754 397Q765 399 776.5 399.5Q788 400 800 400Q872 400 916.0 373.5Q960 347 960 303V240ZM325 320H636Q626 340 580.5 355.0Q535 370 480 370Q425 370 379.5 355.0Q334 340 325 320ZM160 440Q127 440 103.5 463.5Q80 487 80 520Q80 554 103.5 577.0Q127 600 160 600Q194 600 217.0 577.0Q240 554 240 520Q240 487 217.0 463.5Q194 440 160 440ZM800 440Q767 440 743.5 463.5Q720 487 720 520Q720 554 743.5 577.0Q767 600 800 600Q834 600 857.0 577.0Q880 554 880 520Q880 487 857.0 463.5Q834 440 800 440ZM480 480Q430 480 395.0 515.0Q360 550 360 600Q360 651 395.0 685.5Q430 720 480 720Q531 720 565.5 685.5Q600 651 600 600Q600 550 565.5 515.0Q531 480 480 480ZM480 560Q497 560 508.5 571.5Q520 583 520 600Q520 617 508.5 628.5Q497 640 480 640Q463 640 451.5 628.5Q440 617 440 600Q440 583 451.5 571.5Q463 560 480 560ZM481 320Q481 320 481.0 320.0Q481 320 481 320Q481 320 481.0 320.0Q481 320 481 320ZM480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Bien Común
@@ -380,9 +357,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined"
>accessibility_new</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M480.0 720.0Q447 720 423.5 743.5Q400 767 400.0 800.0Q400 833 423.5 856.5Q447 880 480.0 880.0Q513 880 536.5 856.5Q560 833 560.0 800.0Q560 767 536.5 743.5Q513 720 480.0 720.0ZM360 80V600Q300 605 238.0 615.0Q176 625 120 640L140 720Q218 699 306.0 689.5Q394 680 480.0 680.0Q566 680 654.0 689.5Q742 699 820 720L840 640Q784 625 722.0 615.0Q660 605 600 600V80H520V320H440V80Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Accesibilidad (a11y)
@@ -403,7 +378,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">shield</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M480 80Q341 115 250.5 239.5Q160 364 160 516V760L480 880L800 760V516Q800 364 709.5 239.5Q619 115 480 80ZM480 164Q584 197 652.0 296.0Q720 395 720 516V705L480 795L240 705V516Q240 395 308.0 296.0Q376 197 480 164ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Privacidad
@@ -424,7 +399,7 @@
<div
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
>
<span class="material-symbols-outlined">psychology</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M240 80V252Q183 304 151.5 373.5Q120 443 120 520Q120 670 225.0 775.0Q330 880 480 880Q605 880 701.5 806.5Q798 733 827 615L879 410Q884 391 872.0 375.5Q860 360 840 360H760V240Q760 207 736.5 183.5Q713 160 680 160H600V80H520V240H680Q680 240 680.0 240.0Q680 240 680 240V440H788L750 595Q727 686 652.0 743.0Q577 800 480 800Q364 800 282.0 719.0Q200 638 200 522Q200 462 224.5 408.0Q249 354 294 312L320 288V80ZM494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440ZM440 360H520L526 410Q534 413 540.5 417.0Q547 421 552 426L598 406L638 474L598 504Q600 512 600.0 520.0Q600 528 598 536L638 566L598 634L552 614Q547 619 540.5 623.0Q534 627 526 630L520 680H440L434 630Q426 627 419.5 623.0Q413 619 408 614L362 634L322 566L362 536Q360 528 360.0 520.0Q360 512 362 504L322 474L362 406L408 426Q413 421 419.5 417.0Q426 413 434 410ZM480.0 460.0Q455 460 437.5 477.5Q420 495 420.0 520.0Q420 545 437.5 562.5Q455 580 480.0 580.0Q505 580 522.5 562.5Q540 545 540.0 520.0Q540 495 522.5 477.5Q505 460 480.0 460.0Z"/></svg>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
IA Responsable
@@ -458,34 +433,30 @@
<!-- Tab Buttons Container -->
<div
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
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"
>
<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"
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"
data-tab="infraestructura"
>
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"
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"
>
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"
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"
>
Notes
@@ -495,7 +466,7 @@
<!-- Tab Contents -->
<div id="tab-contents">
<!-- Tab 1: Infraestructura -->
<div id="tab-infraestructura" class="tab-pane block">
<div id="tab-infraestructura" class="tab-pane block" role="tabpanel" aria-labelledby="tab-infraestructura-button" aria-hidden="false">
<div class="grid md:grid-cols-2 gap-8">
<div class="space-y-6">
<h3 class="text-2xl font-serif italic dark:text-white">
@@ -515,7 +486,7 @@
<div
class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2"
>
<span class="material-symbols-outlined">bolt</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M422 232 629 480H469L498 707L313 440H452ZM320 80 360 360H160L520 880H600L560 560H800L400 80ZM471 470Z"/></svg>
<span>Compromiso Verde</span>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">
@@ -527,10 +498,7 @@
</div>
<div class="grid grid-cols-2 gap-4">
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>dns</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="M300 720Q275 720 257.5 702.5Q240 685 240 660Q240 635 257.5 617.5Q275 600 300 600Q325 600 342.5 617.5Q360 635 360 660Q360 685 342.5 702.5Q325 720 300 720ZM300 320Q275 320 257.5 302.5Q240 285 240 260Q240 235 257.5 217.5Q275 200 300 200Q325 200 342.5 217.5Q360 235 360 260Q360 285 342.5 302.5Q325 320 300 320ZM160 840H800Q817 840 828.5 828.5Q840 817 840 800V520Q840 503 828.5 491.5Q817 480 800 480H160Q143 480 131.5 491.5Q120 503 120 520V800Q120 817 131.5 828.5Q143 840 160 840ZM200 760V560H760V760ZM160 440H800Q817 440 828.5 428.5Q840 417 840 400V120Q840 103 828.5 91.5Q817 80 800 80H160Q143 80 131.5 91.5Q120 103 120 120V400Q120 417 131.5 428.5Q143 440 160 440ZM200 360V160H760V360ZM200 760V560ZM200 360V160Z"/></svg>
<h4 class="font-bold dark:text-white">
Hetzner Helsinki
</h4>
@@ -542,10 +510,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>deployed_code</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 183V457L200 596V322Q200 322 200.0 322.0Q200 322 200 322ZM520 183 760 322Q760 322 760.0 322.0Q760 322 760 322V596L520 457ZM480 526 717 663 480 800Q480 800 480.0 800.0Q480 800 480 800L243 663ZM160 252Q141 263 130.5 281.0Q120 299 120 321V639Q120 661 130.5 679.0Q141 697 160 708L440 869Q459 880 480.0 880.0Q501 880 520 869L800 708Q819 697 829.5 679.0Q840 661 840 639V321Q840 299 829.5 281.0Q819 263 800 252L520 91Q501 80 480.0 80.0Q459 80 440 91ZM480 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>
<h4 class="font-bold dark:text-white">Coolify</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -555,10 +520,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>git_gesture</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="M284 440H80V520H284Q298 589 352.5 634.5Q407 680 480.0 680.0Q553 680 607.5 634.5Q662 589 676 520H880V440H676Q662 371 607.5 325.5Q553 280 480.0 280.0Q407 280 352.5 325.5Q298 371 284 440ZM480 360Q530 360 565.0 395.0Q600 430 600 480Q600 530 565.0 565.0Q530 600 480 600Q430 600 395.0 565.0Q360 530 360 480Q360 430 395.0 395.0Q430 360 480 360Z"/></svg>
<h4 class="font-bold dark:text-white">Forgejo</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -568,10 +530,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>hub</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 280Q254 280 266.0 277.0Q278 274 289 269L346 340Q318 371 307.0 410.0Q296 449 302 488L221 515Q204 490 178.0 475.0Q152 460 120 460Q70 460 35.0 495.0Q0 530 0 580Q0 630 35.0 665.0Q70 700 120 700Q170 700 205.0 665.0Q240 630 240 580Q240 578 240.0 576.0Q240 574 240 572L321 544Q341 580 374.5 605.0Q408 630 450 637V724Q411 735 385.5 766.5Q360 798 360 840Q360 890 395.0 925.0Q430 960 480.0 960.0Q530 960 565.0 925.0Q600 890 600 840Q600 798 574.0 766.5Q548 735 510 724V637Q552 630 585.5 605.0Q619 580 639 544L720 572Q720 574 720.0 576.0Q720 578 720 580Q720 630 755.0 665.0Q790 700 840 700Q890 700 925.0 665.0Q960 630 960.0 580.0Q960 530 925.0 495.0Q890 460 840 460Q808 460 781.5 475.0Q755 490 739 515L658 488Q664 449 653.0 410.5Q642 372 614 340L671 270Q682 275 694.0 277.5Q706 280 720 280Q770 280 805.0 245.0Q840 210 840.0 160.0Q840 110 805.0 75.0Q770 40 720.0 40.0Q670 40 635.0 75.0Q600 110 600 160Q600 180 606.5 198.5Q613 217 624 232L567 303Q526 280 479.5 280.0Q433 280 392 303L336 232Q347 217 353.5 198.5Q360 180 360 160Q360 110 325.0 75.0Q290 40 240.0 40.0Q190 40 155.0 75.0Q120 110 120.0 160.0Q120 210 155.0 245.0Q190 280 240 280ZM120 540Q137 540 148.5 551.5Q160 563 160.0 580.0Q160 597 148.5 608.5Q137 620 120 620Q103 620 91.5 608.5Q80 597 80.0 580.0Q80 563 91.5 551.5Q103 540 120 540ZM240.0 120.0Q257 120 268.5 131.5Q280 143 280.0 160.0Q280 177 268.5 188.5Q257 200 240.0 200.0Q223 200 211.5 188.5Q200 177 200.0 160.0Q200 143 211.5 131.5Q223 120 240.0 120.0ZM480.0 800.0Q497 800 508.5 811.5Q520 823 520.0 840.0Q520 857 508.5 868.5Q497 880 480.0 880.0Q463 880 451.5 868.5Q440 857 440.0 840.0Q440 823 451.5 811.5Q463 800 480.0 800.0ZM480 360Q522 360 551.0 389.0Q580 418 580 460Q580 502 551.0 531.0Q522 560 480 560Q438 560 409.0 531.0Q380 502 380 460Q380 418 409.0 389.0Q438 360 480 360ZM720.0 120.0Q737 120 748.5 131.5Q760 143 760.0 160.0Q760 177 748.5 188.5Q737 200 720.0 200.0Q703 200 691.5 188.5Q680 177 680.0 160.0Q680 143 691.5 131.5Q703 120 720.0 120.0ZM840.0 540.0Q857 540 868.5 551.5Q880 563 880.0 580.0Q880 597 868.5 608.5Q857 620 840.0 620.0Q823 620 811.5 608.5Q800 597 800.0 580.0Q800 563 811.5 551.5Q823 540 840.0 540.0ZM480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0ZM120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0ZM480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460ZM840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0ZM240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0ZM720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Z"/></svg>
<h4 class="font-bold dark:text-white">n8n</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -581,10 +540,7 @@
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
<span
class="material-symbols-outlined text-primary text-3xl mb-3 block"
>monitoring</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="M120 120V200L200 280V120ZM280 120V360L360 440V120ZM440 120V440L520 359V120ZM600 120V359L680 439V120ZM760 120V520L840 600V120ZM120 327V440L400 720L560 560L840 840V727L560 447L400 607Z"/></svg>
<h4 class="font-bold dark:text-white">Umami</h4>
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
@@ -594,19 +550,19 @@
</p>
</div>
</div>
</div>
</div>
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
<!--
<div id="tab-experimentos" class="tab-pane hidden">
<div id="tab-experimentos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-experimentos-button" aria-hidden="true">
<div class="grid md:grid-cols-3 gap-6">
<div
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
>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" 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>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
>Activo</span
@@ -627,10 +583,7 @@
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
>memory</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M360 360V600H600V360ZM440 440H520V520H440ZM360 120V200H280Q247 200 223.5 223.5Q200 247 200 280V360H120V440H200V520H120V600H200V680Q200 713 223.5 736.5Q247 760 280 760H360V840H440V760H520V840H600V760H680Q713 760 736.5 736.5Q760 713 760 680V600H840V520H760V440H840V360H760V280Q760 247 736.5 223.5Q713 200 680 200H600V120H520V200H440V120ZM680 280Q680 280 680.0 280.0Q680 280 680 280V680Q680 680 680.0 680.0Q680 680 680 680H280Q280 680 280.0 680.0Q280 680 280 680V280Q280 280 280.0 280.0Q280 280 280 280ZM480 480Z"/></svg>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
>Activo</span
@@ -651,10 +604,7 @@
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
>
<div class="flex items-center justify-between mb-4">
<span
class="material-symbols-outlined text-primary text-3xl"
>visibility</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M480.0 320.0Q555 320 607.5 372.5Q660 425 660.0 500.0Q660 575 607.5 627.5Q555 680 480.0 680.0Q405 680 352.5 627.5Q300 575 300.0 500.0Q300 425 352.5 372.5Q405 320 480.0 320.0ZM480.0 392.0Q435 392 403.5 423.5Q372 455 372.0 500.0Q372 545 403.5 576.5Q435 608 480.0 608.0Q525 608 556.5 576.5Q588 545 588.0 500.0Q588 455 556.5 423.5Q525 392 480.0 392.0ZM40 500Q94 637 214.0 718.5Q334 800 480.0 800.0Q626 800 746.0 718.5Q866 637 920 500Q866 363 746.0 281.5Q626 200 480.0 200.0Q334 200 214.0 281.5Q94 363 40 500ZM480 500Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480 500Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480 500ZM832 500Q782 601 687.5 660.5Q593 720 480.0 720.0Q367 720 272.5 660.5Q178 601 128 500Q178 399 272.5 339.5Q367 280 480.0 280.0Q593 280 687.5 339.5Q782 399 832 500Z"/></svg>
<span
class="px-2.5 py-0.5 bg-amber-500/10 text-amber-500 text-xs font-bold rounded-full"
>Pendiente</span
@@ -676,7 +626,7 @@
-->
<!-- Tab 3: Proyectos -->
<div id="tab-proyectos" class="tab-pane hidden">
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
<!-- Herramientas Reales -->
<div class="mb-12">
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
@@ -725,10 +675,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<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">
Cases Tancades
</h4>
@@ -761,10 +708,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>music_note</span
>
<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>
@@ -787,10 +731,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>route</span
>
<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>
@@ -820,10 +761,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<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>
@@ -853,10 +791,7 @@
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>volunteer_activism</span
>
<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>
@@ -877,7 +812,6 @@
</div>
</div>
</div>
@@ -904,10 +838,7 @@
<span
class="flex items-center gap-2 hover:text-primary transition-colors"
>
<span
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
>chevron_right</span
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon transform group-open:rotate-90 transition-transform text-slate-400" aria-hidden="true"><path d="M504 480 320 664 376 720 616 480 376 240 320 296Z"/></svg>
Trabajo Anterior (Proyectos e IA comercial)
</span>
</summary>
@@ -972,9 +903,10 @@
</details>
</div>
</div>
</div>
<!-- Tab 4: Writing -->
<div id="tab-writing" class="tab-pane hidden">
<div id="tab-writing" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-writing-button" aria-hidden="true">
<div class="max-w-2xl mx-auto space-y-8">
<p
class="text-slate-600 dark:text-slate-400 italic text-center text-sm"
@@ -995,9 +927,7 @@
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full flex items-center gap-1"
>
<span class="material-symbols-outlined text-xs"
>verified</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="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>
Green Software
</span>
</div>
@@ -1136,9 +1066,7 @@
class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
>
Leer artículo completo en la sección Huella
<span class="material-symbols-outlined text-xs"
>arrow_right_alt</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="M560 240 504 298 646 440H160V520H646L504 662L560 720L800 480Z"/></svg>
</a>
<div
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400 mt-4"
@@ -1161,10 +1089,7 @@
class="glass rounded-[3rem] p-12 md:p-24 text-center relative overflow-hidden"
>
<div class="absolute top-0 right-0 p-8">
<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"
@@ -1185,7 +1110,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.dev@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">
@@ -1194,16 +1119,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>
+7 -2
View File
@@ -145,6 +145,8 @@ function closeModal(projectId) {
/**
* Initialize tabs behavior for the Laboratorio section
* When switching tabs, the page scrolls smoothly to the tab buttons container
* to prevent the "jump" caused by tab content height changes.
*/
function initTabs() {
const tabButtons = document.querySelectorAll(".tab-btn");
@@ -154,7 +156,6 @@ function initTabs() {
btn.addEventListener("click", () => {
const targetTab = btn.getAttribute("data-tab");
// Update button styles to reflect active/inactive state
tabButtons.forEach((b) => {
b.classList.remove("bg-primary", "text-white", "shadow-md", "shadow-primary/25");
b.classList.add("text-slate-600", "dark:text-slate-400", "hover:bg-slate-100", "dark:hover:bg-white/5");
@@ -162,7 +163,6 @@ function initTabs() {
btn.classList.add("bg-primary", "text-white", "shadow-md", "shadow-primary/25");
btn.classList.remove("text-slate-600", "dark:text-slate-400", "hover:bg-slate-100", "dark:hover:bg-white/5");
// Show the selected tab content and hide the others
tabPanes.forEach((pane) => {
if (pane.id === `tab-${targetTab}`) {
pane.classList.remove("hidden");
@@ -172,6 +172,11 @@ function initTabs() {
pane.classList.add("hidden");
}
});
const tabsContainer = btn.parentElement;
if (tabsContainer && tabsContainer.parentElement) {
tabsContainer.scrollIntoView({ behavior: "smooth", block: "start" });
}
});
});
}
+1
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<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 = {
+1
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<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 = {
+1
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<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 = {