Merge pull request 'feat(proyectos): add Posidonia + Cases Tancades projects' (#3) from develop into main
Reviewed-on: #3
This commit was merged in pull request #3.
This commit is contained in:
@@ -125,4 +125,23 @@
|
||||
height: 1em;
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Layout Stability (custom)
|
||||
==========================================================================
|
||||
Reserve scrollbar gutter to prevent layout shift when body.overflow
|
||||
toggles between auto and hidden (openModal/closeModal). This stops
|
||||
the page from "jumping" when the user opens or closes a project modal. */
|
||||
html {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
/* When a modal is open, prevent background scroll without causing the
|
||||
scrollbar to disappear (which would shift the layout). */
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
/* Compensate for any scrollbar difference on platforms where
|
||||
scrollbar-gutter isn't fully respected. */
|
||||
padding-right: var(--scrollbar-width, 0px);
|
||||
}
|
||||
+1
-33
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
+232
-10
@@ -660,6 +660,28 @@
|
||||
Eines reals, no demos
|
||||
</h3>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Posidonia · Eivissa Environmental Watch -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="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 192Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Posidonia · Eivissa Environmental Watch
|
||||
</h4>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">Microsite editorial sobre el 8è aniversari del decret que protegeix la Posidonia oceànica a l'arxipèlag pitiús.</p>
|
||||
</div>
|
||||
<footer class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
||||
<span class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded">Operatiu</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-slate-400">HTML • Tailwind • Dades obertes GEN-GOB</span>
|
||||
<button onclick="openModal('project-4')" class="text-xs text-primary hover:underline font-bold">Veure detalls</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Eivissa Environmental Watch -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
@@ -726,14 +748,22 @@
|
||||
pressió del lloguer turístic.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operatiu</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Next.js · Dades obertes INE/Govern Balear</span
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-slate-400"
|
||||
>Astro • Dades obertes INE</span
|
||||
>
|
||||
<button
|
||||
class="text-xs text-primary hover:underline font-bold"
|
||||
onclick="openModal('project-5')"
|
||||
>
|
||||
Veure detalls
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1463,12 +1493,204 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
||||
onclick="closeModal('project-3')"
|
||||
>
|
||||
Tancar
|
||||
</button>
|
||||
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
||||
<a href="https://www.eivissaenvironmentalwatch.es/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
||||
Visitar lloc
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal 4: Posidonia · Eivissa Environmental Watch -->
|
||||
<div
|
||||
id="project-4-modal"
|
||||
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="project-4-modal-title"
|
||||
onclick="closeModal('project-4')"
|
||||
>
|
||||
<div
|
||||
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
||||
onclick="event.stopPropagation()"
|
||||
>
|
||||
<div class="p-8 md:p-12">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<h2
|
||||
id="project-4-modal-title"
|
||||
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
||||
>
|
||||
Posidonia · Eivissa Environmental Watch
|
||||
</h2>
|
||||
<button
|
||||
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
onclick="closeModal('project-4')"
|
||||
aria-label="Close dialog"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/posidonia-eivissa-environmental-watch.webp"
|
||||
alt="Captura del micrositet Posidonia amb capçalera editorial verda i estadístiques d'estacions"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Descripció
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Microsite editorial periodístic publicat el 26 de juliol de 2026 que documenta l'estat de la Posidonia oceànica vuit anys després del decret que prohibeix el fondeig sobre aquesta espècie. La pàgina confronta dos conjunts de dades oficials: la millora general a les Illes Balears davant la deterioració específica a Eivissa.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Funcionalitats
|
||||
</h3>
|
||||
<ul class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300">
|
||||
<li>Article editorial amb dades oficials del GEN-GOB (2025)</li>
|
||||
<li>Visualització d'estadístiques clau: 17% d'estacions balears en mal estat davant 17/18 estacions d'Eivissa en situació desfavorable</li>
|
||||
<li>Línia temporal narrativa sobre els efectes del decret de 2018</li>
|
||||
<li>Disseny responsive optimitzat per a lectura mòbil i accessibilitat</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Stack Tecnològic
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">HTML</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Tailwind CSS</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Tipografia editorial</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Disseny responsive</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Dades obertes GEN-GOB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Resultat
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Publicació editorial amb dades verificades que evidencia la divergència entre la narrativa oficial del Govern Balear i les dades reals sobre l'estat de la praderia de Posidonia a Eivissa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
||||
<a href="https://posidonia.eivissaenvironmentalwatch.es/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
||||
Visitar lloc
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal 5: Cases Tancades -->
|
||||
<div
|
||||
id="project-5-modal"
|
||||
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="project-5-modal-title"
|
||||
onclick="closeModal('project-5')"
|
||||
>
|
||||
<div
|
||||
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
||||
onclick="event.stopPropagation()"
|
||||
>
|
||||
<div class="p-8 md:p-12">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<h2
|
||||
id="project-5-modal-title"
|
||||
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
||||
>
|
||||
Cases Tancades
|
||||
</h2>
|
||||
<button
|
||||
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
onclick="closeModal('project-5')"
|
||||
aria-label="Close dialog"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/cases-tancades.webp"
|
||||
alt="Captura del micrositet Cases Tancades amb titular "Quants pisos tancats hi ha a les Balears" i botons d'acció"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Descripció
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Diagnòstic obert de l'habitatge a Balears que creua dades
|
||||
oficials de l'INE, registres HUT del Govern i llistats
|
||||
d'Airbnb per evidenciar quants pisos estan tancats o buits
|
||||
davant la pressió del lloguer turístic.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Funcionalitats
|
||||
</h3>
|
||||
<ul
|
||||
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<li>Creuament de dades INE, registres HUT del Govern i llistats geo-localitzats d'Airbnb</li>
|
||||
<li>Mapa interactiu per municipi i per illa (Mallorca, Menorca, Eivissa, Formentera)</li>
|
||||
<li>Dades de consum elèctric per secció censal (Cens 2021) com a proxy d'habitatge buit</li>
|
||||
<li>Metodologia oberta amb codi font disponible a GitHub</li>
|
||||
<li>Visualitzacions comparatives de places turístiques vs. població resident</li>
|
||||
<li>Sense estimacions opaques: cada xifra enllaça a la seva font pública</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Stack Tecnològic
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Astro</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Dades obertes INE</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Registres HUT del Govern</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Mapes interactius</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">CC BY-SA 4.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Resultat
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300">
|
||||
Anàlisi verificable que quantifica el desajust entre habitatge
|
||||
buit (105.632 llars amb consum 0 segons INE 2021) i pressió
|
||||
turística (102.597 places entre Airbnb i registres HUT). Fa
|
||||
visible la crisi residencial balear amb dades públiques.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
||||
<a href="https://casesbuides.itziarzameza.dev/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
||||
Visitar lloc
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+232
-10
@@ -644,6 +644,28 @@
|
||||
Real tools, not demos
|
||||
</h3>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Posidonia · Eivissa Environmental Watch -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="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 192Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Posidonia · Eivissa Environmental Watch
|
||||
</h4>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">Editorial microsite on the 8th anniversary of the decree protecting Posidonia oceánica in the Pitiusic archipelago.</p>
|
||||
</div>
|
||||
<footer class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
||||
<span class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded">Operational</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-slate-400">HTML • Tailwind • Open data GEN-GOB</span>
|
||||
<button onclick="openModal('project-4')" class="text-xs text-primary hover:underline font-bold">View details</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Eivissa Environmental Watch -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
@@ -700,14 +722,22 @@
|
||||
sit empty against the pressure of tourist rentals.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operational</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Next.js · Open data INE/Govern Balear</span
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-slate-400"
|
||||
>Astro • Open data INE</span
|
||||
>
|
||||
<button
|
||||
class="text-xs text-primary hover:underline font-bold"
|
||||
onclick="openModal('project-5')"
|
||||
>
|
||||
View details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1431,12 +1461,204 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
||||
onclick="closeModal('project-3')"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
||||
<a href="https://www.eivissaenvironmentalwatch.es/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
||||
Visit site
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal 4: Posidonia · Eivissa Environmental Watch -->
|
||||
<div
|
||||
id="project-4-modal"
|
||||
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="project-4-modal-title"
|
||||
onclick="closeModal('project-4')"
|
||||
>
|
||||
<div
|
||||
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
||||
onclick="event.stopPropagation()"
|
||||
>
|
||||
<div class="p-8 md:p-12">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<h2
|
||||
id="project-4-modal-title"
|
||||
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
||||
>
|
||||
Posidonia · Eivissa Environmental Watch
|
||||
</h2>
|
||||
<button
|
||||
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
onclick="closeModal('project-4')"
|
||||
aria-label="Close dialog"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/posidonia-eivissa-environmental-watch.webp"
|
||||
alt="Screenshot of the Posidonia microsite with green editorial header and station statistics"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Description
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Editorial microsite published on 26 July 2026 documenting the state of Posidonia oceánica eight years after the decree banning anchoring on this species. The page contrasts two sets of official data: the overall improvement in the Balearic Islands versus the specific deterioration in Eivissa.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Features
|
||||
</h3>
|
||||
<ul class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300">
|
||||
<li>Editorial article with official GEN-GOB (2025) data</li>
|
||||
<li>Key statistics visualization: 17% of Balearic stations in poor condition vs. 17/18 Eivissa stations in unfavourable condition</li>
|
||||
<li>Narrative timeline on the effects of the 2018 decree</li>
|
||||
<li>Responsive design optimized for mobile reading and accessibility</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Tech Stack
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">HTML</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Tailwind CSS</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Editorial typography</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Responsive design</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">GEN-GOB open data</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Outcome
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Editorial publication with verified data highlighting the divergence between the official Balearic Government's narrative and the real data on the state of the Posidonia meadow in Eivissa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
||||
<a href="https://posidonia.eivissaenvironmentalwatch.es/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
||||
Visit site
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal 5: Cases Tancades -->
|
||||
<div
|
||||
id="project-5-modal"
|
||||
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="project-5-modal-title"
|
||||
onclick="closeModal('project-5')"
|
||||
>
|
||||
<div
|
||||
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
||||
onclick="event.stopPropagation()"
|
||||
>
|
||||
<div class="p-8 md:p-12">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<h2
|
||||
id="project-5-modal-title"
|
||||
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
||||
>
|
||||
Cases Tancades
|
||||
</h2>
|
||||
<button
|
||||
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
onclick="closeModal('project-5')"
|
||||
aria-label="Close dialog"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/cases-tancades.webp"
|
||||
alt="Screenshot of the Cases Tancades microsite with the headline "Quants pisos tancats hi ha a les Balears" and action buttons"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Description
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Open housing diagnosis in the Balearic Islands that
|
||||
cross-references official INE data, Govern HUT registers, and
|
||||
Airbnb listings to evidence how many homes are closed or vacant
|
||||
against the pressure of tourist rentals.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Features
|
||||
</h3>
|
||||
<ul
|
||||
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<li>Cross-referencing of INE data, Govern HUT registers, and geo-localized Airbnb listings</li>
|
||||
<li>Interactive map by municipality and island (Mallorca, Menorca, Eivissa, Formentera)</li>
|
||||
<li>Electricity consumption data by census tract (2021 Census) as a vacancy proxy</li>
|
||||
<li>Open methodology with source code available on GitHub</li>
|
||||
<li>Comparative visualizations of tourist places vs. resident population</li>
|
||||
<li>No opaque estimates: each figure links to its public source</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Tech Stack
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Astro</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Open data INE</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">HUT Govern registers</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Interactive maps</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">CC BY-SA 4.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Outcome
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300">
|
||||
Verifiable analysis quantifying the gap between vacant housing
|
||||
(105,632 homes with 0 consumption per INE 2021) and tourist
|
||||
pressure (102,597 places across Airbnb and HUT registers).
|
||||
Makes the Balearic housing crisis visible through public data.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
||||
<a href="https://casesbuides.itziarzameza.dev/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
||||
Visit site
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+232
-10
@@ -644,6 +644,28 @@
|
||||
Herramientas reales, no demos
|
||||
</h3>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Posidonia · Eivissa Environmental Watch -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="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 192Z"/></svg>
|
||||
<h4 class="font-bold text-lg dark:text-white">
|
||||
Posidonia · Eivissa Environmental Watch
|
||||
</h4>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">Micrositio editorial sobre el 8º aniversario del decreto que protege la Posidonia oceánica en el archipiélago pitiuso.</p>
|
||||
</div>
|
||||
<footer class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
||||
<span class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded">Operativo</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-slate-400">HTML • Tailwind • Datos abiertos GEN-GOB</span>
|
||||
<button onclick="openModal('project-4')" class="text-xs text-primary hover:underline font-bold">Ver detalles</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Eivissa Environmental Watch -->
|
||||
<div
|
||||
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
||||
@@ -700,14 +722,22 @@
|
||||
a la presión del alquiler turístico.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
||||
>Operativo</span
|
||||
>
|
||||
<span class="text-xs text-slate-400"
|
||||
>Next.js · Datos abiertos INE/Govern Balear</span
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-slate-400"
|
||||
>Astro • Datos abiertos INE</span
|
||||
>
|
||||
<button
|
||||
class="text-xs text-primary hover:underline font-bold"
|
||||
onclick="openModal('project-5')"
|
||||
>
|
||||
Ver detalles
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1433,12 +1463,204 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
||||
onclick="closeModal('project-3')"
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
||||
<a href="https://www.eivissaenvironmentalwatch.es/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
||||
Visitar sitio
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal 4: Posidonia · Eivissa Environmental Watch -->
|
||||
<div
|
||||
id="project-4-modal"
|
||||
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="project-4-modal-title"
|
||||
onclick="closeModal('project-4')"
|
||||
>
|
||||
<div
|
||||
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
||||
onclick="event.stopPropagation()"
|
||||
>
|
||||
<div class="p-8 md:p-12">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<h2
|
||||
id="project-4-modal-title"
|
||||
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
||||
>
|
||||
Posidonia · Eivissa Environmental Watch
|
||||
</h2>
|
||||
<button
|
||||
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
onclick="closeModal('project-4')"
|
||||
aria-label="Close dialog"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/posidonia-eivissa-environmental-watch.webp"
|
||||
alt="Captura del micrositio Posidonia con cabecera editorial verde y estadísticas de estaciones"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Descripción
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Micrositio editorial periodístico publicado el 26 de julio de 2026 que documenta el estado de la Posidonia oceánica ocho años después del decreto que prohíbe el fondeo sobre esta especie. La página confronta dos conjuntos de datos oficiales: la mejora general en las Illes Balears frente al deterioro específico en Eivissa.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Funcionalidades
|
||||
</h3>
|
||||
<ul class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300">
|
||||
<li>Artículo editorial con datos oficiales del GEN-GOB (2025)</li>
|
||||
<li>Visualización de estadísticas clave: 17% de estaciones baleares en mal estado frente a 17/18 estaciones de Eivissa en situación desfavorable</li>
|
||||
<li>Línea temporal narrativa sobre los efectos del decreto de 2018</li>
|
||||
<li>Diseño responsive optimizado para lectura móvil y accesibilidad</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Stack Tecnológico
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">HTML</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Tailwind CSS</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Tipografía editorial</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Diseño responsive</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Datos abiertos GEN-GOB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Resultado
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Publicación editorial con datos verificados que evidencia la divergencia entre la narrativa oficial del Govern Balear y los datos reales sobre el estado de la pradera de Posidonia en Eivissa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
||||
<a href="https://posidonia.eivissaenvironmentalwatch.es/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
||||
Visitar sitio
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal 5: Cases Tancades -->
|
||||
<div
|
||||
id="project-5-modal"
|
||||
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="project-5-modal-title"
|
||||
onclick="closeModal('project-5')"
|
||||
>
|
||||
<div
|
||||
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
||||
onclick="event.stopPropagation()"
|
||||
>
|
||||
<div class="p-8 md:p-12">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<h2
|
||||
id="project-5-modal-title"
|
||||
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
||||
>
|
||||
Cases Tancades
|
||||
</h2>
|
||||
<button
|
||||
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
onclick="closeModal('project-5')"
|
||||
aria-label="Close dialog"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/cases-tancades.webp"
|
||||
alt="Captura del micrositio Cases Tancades con titular "Quants pisos tancats hi ha a les Balears" y botones de acción"
|
||||
class="w-full rounded-2xl mb-6 object-cover h-64"
|
||||
/>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Descripción
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
Diagnóstico abierto de la vivienda en Balears que cruza datos
|
||||
oficiales del INE, registros HUT del Govern y listados de
|
||||
Airbnb para evidenciar cuántos pisos están cerrados o vacíos
|
||||
frente a la presión del alquiler turístico.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Funcionalidades
|
||||
</h3>
|
||||
<ul
|
||||
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<li>Cruce de datos INE, registros HUT del Govern y listados geo-localizados de Airbnb</li>
|
||||
<li>Mapa interactivo por municipio y por isla (Mallorca, Menorca, Eivissa, Formentera)</li>
|
||||
<li>Datos de consumo eléctrico por sección censal (Cens 2021) como proxy de vivienda vacía</li>
|
||||
<li>Metodología abierta con código fuente disponible en GitHub</li>
|
||||
<li>Visualizaciones comparativas de plazas turísticas vs. población residente</li>
|
||||
<li>Sin estimaciones opacas: cada cifra enlaza a su fuente pública</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Stack Tecnológico
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Astro</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Datos abiertos INE</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Registros HUT del Govern</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Mapas interactivos</span>
|
||||
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">CC BY-SA 4.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Resultado
|
||||
</h3>
|
||||
<p class="text-slate-700 dark:text-slate-300">
|
||||
Análisis verificable que cuantifica el desajuste entre vivienda
|
||||
vacía (105.632 hogares con consumo 0 según INE 2021) y presión
|
||||
turística (102.597 plazas entre Airbnb y registros HUT).
|
||||
Visibiliza la crisis residencial balear con datos públicos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
||||
<a href="https://casesbuides.itziarzameza.dev/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
||||
Visitar sitio
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user