VizTitle.vue

<template>
  <header id="grid-container">
    <div id="title-container" :class="{ mobile: mobileView }">
      <img
        ref="heroImage"
        id="title-image"
        :class="{ mobile: mobileView }"
        src="@/assets/images/hero_img_cutout_less-stylized_feather.png"
        alt="Social vulnerability and water insecurity"
        @load="updateSvgDimensions"
      />
      <svg ref="overlay" id="overlay" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <filter id="blueOverlay">
            <feColorMatrix type="matrix" values="0 0 0 0 0
                                                  0 0 0 0 0
                                                  0 0 0 0 1
                                                  0 0 0 1 0"/>
          </filter>
        </defs>
        <circle class="animated-circle" cx="100" cy="100" r="50" fill="royalblue" filter="url(#blueOverlay)"/>
        <circle class="animated-circle" cx="200" cy="150" r="30" fill="royalblue" filter="url(#blueOverlay)"/>
        <circle class="animated-circle" cx="300" cy="200" r="70" fill="royalblue" filter="url(#blueOverlay)"/>
      </svg>
        <h1>Unequal access to water</h1>
        <h3>
          How societal factors shape exposure to water-related hazards, likelihood to suffer harm, and ability to cope and recover from losses
        </h3>
    </div>
  </header>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { isMobile } from 'mobile-device-detect';

const mobileView = ref(isMobile);
const heroImage = ref(null);
const overlay = ref(null);

const updateSvgDimensions = () => {
  if (heroImage.value && overlay.value) {
    const { width, height, top, left } = heroImage.value.getBoundingClientRect();
    overlay.value.setAttribute('width', width);
    overlay.value.setAttribute('height', height);
    overlay.value.style.width = `${width}px`;
    overlay.value.style.height = `${height}px`;
    overlay.value.style.top = `${top}px`;
    overlay.value.style.left = `${left}px`;
  }
};

onMounted(() => {
  updateSvgDimensions();
  window.addEventListener('resize', updateSvgDimensions);
});

watch(mobileView, () => {
  updateSvgDimensions();
});
</script>

<style lang="scss" scoped>

#grid-container {
  display: grid;
  padding: 0px 0;
  gap: 0px;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "title";
  width: 100vw;
  justify-content: center;
  margin: auto;
  @media screen and (max-width: 600px) {
    padding: 0 0 20px;
    grid-template-columns: 100%;
    grid-template-rows: max-content max-content;
  }
}

#title-container  {
  grid-area: title;
  text-align: center;
}

#title-image {
  width: 100vw;
  max-width: 100%;
  margin: auto;
}

h1, h3 {
  margin-left: 50px; 
  margin-right: 50px; 
  text-align: left;  
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Ensure the SVG overlay doesn't interfere with other interactions */
}
.animated-circle {
  fill-opacity: 0.5; /* Make the circles semi-transparent */
  animation: pulse 20s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

</style>