feat: add popup image

app/app.vue

@@ -11,8 +11,7 @@
 }
 
 html, body, p, a, address, h2 {
-  font-family: 'Abbiocco Beta', system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', sans-serif;
+  font-family: 'Abbiocco Beta', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
 a {

app/assets/icons/times-bazaar-white.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.10, SVG Export Plug-In . SVG Version: 1.2.0 Build 236)  -->
+  <g>
+    <g id="Calque_1">
+      <path class="cls-1" d="M25.13,26.91c-1.08-1.04-2.79-2.79-4.62-4.71l-5,5.17c-.87.83-1.67.75-2.17.25-.67-.62-.5-1.42.13-2.21,1.17-1.42,3-3.54,4.83-5.58l-4.46-4.79c-.87-.96-.92-1.96-.25-2.63.58-.58,1.79-.58,2.54.21l4.33,4.79,3.08-3.33c.79-.87,1.88-1.08,2.67-.33.71.71.54,1.71-.37,2.67l-3.21,3.5,4.29,5c.75.87.75,1.75.25,2.25s-1.38.42-2.04-.25Z"/>
+      <path class="cls-1" d="M20,.7c10.64,0,19.3,8.66,19.3,19.3s-8.66,19.3-19.3,19.3S.7,30.64.7,20,9.36.7,20,.7M20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0h0Z"/>
+    </g>
+  </g>
+</svg>

app/components/VProject.vue

@@ -7,11 +7,20 @@ const props = defineProps<{
 
 const isMediumScreen = useMediaQuery('(min-width: 768px)')
 const descToggled = ref<boolean>(false)
+const popupImageToggled = ref<boolean>(false) 
 
 const hasDescription = computed(() => {
   return props.project.description && props.project.description.length > 0
 })
 
+const hasExternalLink = computed(() => {
+  return Boolean(props.project.toggleUrl)
+})
+
+const hasExtraImage = computed(() => {
+  return Boolean(props.project.popupImage)
+})
+
 function handleToggle() {
   descToggled.value = !descToggled.value
 }
@@ -34,8 +43,18 @@ function handleToggle() {
         <p v-if="descToggled">{{ project.description }}</p>
         <p v-else>{{ project.shortDescription }}</p>
       </div>
+      <a v-if="hasExternalLink" class="trigger-additional" :href="project.toggleUrl" target="_blank" rel="noopener noreferrer">
+        {{ project.toggleText }}
+      </a>
+      <button v-if="hasExtraImage && !popupImageToggled" type="button" class="trigger-additional" @click="popupImageToggled = true">
+        {{ project.toggleText }}
+      </button>
+      <img v-if="popupImageToggled" class="popup-close" src="~/assets/icons/times-bazaar-white.svg" alt="" @click="popupImageToggled = false"  />
     </header>
-    <img :src="project.image" :alt="project.title" />
+    <div class="image-wrap">
+      <img :src="project.image" :alt="project.title" />
+      <img v-if="popupImageToggled" :src="project.popupImage" :alt="project.title" />
+    </div>
   </article>
 </template>
 
@@ -54,6 +73,17 @@ h2 {
   align-items: center;
 }
 
+.image-wrap {
+  position: relative;
+}
+
+.image-wrap img:nth-child(2) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+
 h2 button {
   margin-left: auto;
   background: transparent;
@@ -64,7 +94,7 @@ h2 button img {
   width: 12px;
 }
 
-article > img {
+.image-wrap > img {
   width: 100%;
   margin-bottom: 1rem;
 }
@@ -72,4 +102,31 @@ article > img {
 article header > div {
   padding-left: 1.25rem;
 }
+
+header {
+  display: flex;
+  flex-direction: column;
+}
+
+.popup-close,
+.trigger-additional {
+  cursor: pointer;
+  align-self: flex-end;
+}
+
+.popup-close {
+  width: 28px;
+}
+
+.trigger-additional {
+  font-family: 'Bazaar', sans-serif;
+  background: transparent;
+  color: #FFFFFF;
+  border-radius: 10px;
+  border: 2px solid var(--primary-color);
+  padding: 0.25rem 0.5rem;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+  transform: rotate(-2.6deg);
+}
 </style>