From 7670634cdacd152c3775d40a318bdd8491e10c18 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:52:34 +0100
Subject: [PATCH] refactor: migrate Clothing view

---
 src/views/Clothing.vue     | 133 -------------------
 src/views/ClothingView.vue | 253 +++++++++++++++++++++++++++++++++++++
 2 files changed, 253 insertions(+), 133 deletions(-)
 delete mode 100644 src/views/Clothing.vue
 create mode 100644 src/views/ClothingView.vue

diff --git a/src/views/Clothing.vue b/src/views/Clothing.vue
deleted file mode 100644
index 58612ed..0000000
--- a/src/views/Clothing.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <prose>
-    <h2>Clothing Styles</h2>
-
-    <ref-gallery>
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img
-            src="@/assets/refs/clothes/casual/fullbody.png"
-            alt="Sebin in his casual outfit"
-          />
-        </template>
-
-        <template #caption>
-          <p>Sebin in his casual outfit</p>
-          <p>
-            Black tank top, flannell shirt, shorts (w/ dangling bands), sneakers
-          </p>
-        </template>
-
-        <template #copyright
-          ><a href="https://twitter.com/coffeerelated"
-            >coffeerelated</a
-          ></template
-        >
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img
-          ><img
-            src="@/assets/refs/clothes/cold/fullbody.png"
-            alt="Sebin in his cold weather outfit"
-        /></template>
-
-        <template #caption>
-          <p>Sebin in his cold weather outfit</p>
-          <p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
-        </template>
-
-        <template #copyright
-          ><a href="https://twitter.com/lara_belem_">Lara Belém</a></template
-        >
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img
-          ><img
-            src="@/assets/refs/clothes/workout/fullbody.png"
-            alt="Sebin in his workout outfit"
-        /></template>
-
-        <template #caption>
-          <p>Sebin in his workout outfit</p>
-          <p>
-            <strong>Full body:</strong> Snapback hat, tank top, fingerless
-            gloves, shorts, sneakers
-          </p>
-        </template>
-
-        <template #copyright
-          ><a href="https://twitter.com/turquoize_art">Atlas</a></template
-        >
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img
-          ><img
-            src="@/assets/refs/clothes/workout/closeup.jpg"
-            alt="Sebin in his workout outfit"
-        /></template>
-
-        <template #caption>
-          <p>Sebin in his workout outfit</p>
-          <p>
-            <strong>Close-up:</strong> Snapback hat, headphones, tank top,
-            fingerless gloves, shorts, smartwatch
-          </p>
-        </template>
-
-        <template #copyright
-          ><a href="https://twitter.com/purpledragonrei">Rei</a></template
-        >
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img
-          ><img
-            src="@/assets/refs/clothes/lazy/pants.jpg"
-            alt="Tracksuit pants"
-        /></template>
-
-        <template #caption>
-          <p>Tracksuit pants</p>
-          <p>
-            Sebin likes to wear comfortable clothes at home when he doesn't need
-            to leave the house or is enjoying some leisure time after work or on
-            weekends.
-          </p>
-        </template>
-
-        <!-- <template #copyright></template> -->
-      </ref-figure>
-
-      <ref-figure polaroidBorder>
-        <template #img>
-          <img src="@/assets/refs/clothes/lazy/undies.jpg" alt="Shorts"
-        /></template>
-
-        <template #caption>
-          <p>Topless w/ jockstrap/boxer briefs</p>
-          <p>
-            For even more comfort, Sebin tends to forgoe pants completely and
-            save on laundry by only wearing the absolute necessary.
-          </p>
-        </template>
-
-        <!-- <template #copyright></template> -->
-      </ref-figure>
-    </ref-gallery>
-  </prose>
-</template>
-
-<script>
-import Prose from "@/components/Prose.vue";
-import RefGallery from "@/components/Gallery.vue";
-import RefFigure from "@/components/Figure.vue";
-
-export default {
-  components: { Prose, RefGallery, RefFigure },
-};
-</script>
-
-<style lang="scss"></style>
diff --git a/src/views/ClothingView.vue b/src/views/ClothingView.vue
new file mode 100644
index 0000000..7b61f1f
--- /dev/null
+++ b/src/views/ClothingView.vue
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import RefFigure from "@/components/RefFigure.vue";
+import RefGallery from "@/components/RefGallery.vue";
+</script>
+
+<template>
+  <section>
+    <h1>Clothing Styles</h1>
+  </section>
+
+  <RefGallery>
+    <RefFigure id="casual-outfit" polaroidBorder>
+      <!-- max 1876px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/clothes/casual/fullbody.png?w=400;650;780;910;800;1300;1560;1820;1200;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/clothes/casual/fullbody.png?w=400;650;780;910;800;1300;1560;1820;1200;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/clothes/casual/fullbody.png?w=400;650;780;910;800;1300;1560;1820;1200;0&png&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
+            alt="Sebin in his casual outfit"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+
+      <template #caption>
+        <p>Sebin in his casual outfit</p>
+        <p>
+          Black tank top, flannell shirt, shorts (w/ dangling bands), sneakers
+        </p>
+      </template>
+
+      <template #copyright>
+        <a href="https://twitter.com/coffeerelated">coffeerelated</a>
+      </template>
+    </RefFigure>
+
+    <RefFigure id="sebin-winter-outfit" polaroidBorder>
+      <!-- max 1470px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/clothes/cold/fullbody.png?w=400;655;785;915;800;1310;1200;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
+          />
+          <source
+            srcset="
+              @/assets/refs/clothes/cold/fullbody.png?w=400;655;785;915;800;1310;1200;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
+          />
+          <img
+            srcset="
+              @/assets/refs/clothes/cold/fullbody.png?w=400;655;785;915;800;1310;1200;0&jpg&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
+            alt="Sebin in his cold weather outfit"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+
+      <template #caption>
+        <p>Sebin in his cold weather outfit</p>
+        <p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
+      </template>
+
+      <template #copyright>
+        <a href="https://twitter.com/lara_belem_">Lara Belém</a>
+      </template>
+    </RefFigure>
+
+    <RefFigure id="sebin-workout-outfit-fullbody" polaroidBorder>
+      <!-- max 1758px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/clothes/workout/fullbody.png?w=400;535;640;745;800;1070;1280;1490;1200;1605;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
+          />
+          <source
+            srcset="
+              @/assets/refs/clothes/workout/fullbody.png?w=400;535;640;745;800;1070;1280;1490;1200;1605;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
+          />
+          <img
+            srcset="
+              @/assets/refs/clothes/workout/fullbody.png?w=400;535;640;745;800;1070;1280;1490;1200;1605;0&jpg&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
+            alt="Sebin in his workout outfit (fullbody)"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+
+      <template #caption>
+        <p>Sebin in his workout outfit</p>
+        <p>
+          <strong>Full body:</strong> Snapback hat, tank top, fingerless gloves,
+          shorts, sneakers
+        </p>
+      </template>
+
+      <template #copyright>
+        <a href="https://twitter.com/turquoize_art">Atlas</a>
+      </template>
+    </RefFigure>
+
+    <RefFigure id="sebin-workout-outfit-close" polaroidBorder>
+      <!-- max 2480px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/clothes/workout/closeup.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500x, 400px"
+          />
+          <source
+            srcset="
+              @/assets/refs/clothes/workout/closeup.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+          />
+          <img
+            srcset="
+              @/assets/refs/clothes/workout/closeup.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            alt="Sebin in his workout outfit (close-up)"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+
+      <template #caption>
+        <p>Sebin in his workout outfit</p>
+        <p>
+          <strong>Close-up:</strong> Snapback hat, headphones, tank top,
+          fingerless gloves, shorts, smartwatch
+        </p>
+      </template>
+
+      <template #copyright>
+        <a href="https://twitter.com/purpledragonrei">Rei</a>
+      </template>
+    </RefFigure>
+
+    <RefFigure id="sebin-tracksuit-pants" polaroidBorder>
+      <!-- max 961px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/clothes/lazy/pants.jpg?w=400;500;600;700;0&avif&quality=75&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/clothes/lazy/pants.jpg?w=400;500;600;700;0&webp&quality=100&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/clothes/lazy/pants.jpg?w=400;500;600;700;0&jpg&quality=95&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            alt="Tracksuit pants"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+
+      <template #caption>
+        <p>Tracksuit pants</p>
+        <p>
+          Sebin likes to wear comfortable clothes at home when he doesn't need
+          to leave the house or is enjoying some leisure time after work or on
+          weekends.
+        </p>
+      </template>
+
+      <!-- <template #copyright></template> -->
+    </RefFigure>
+
+    <RefFigure id="sebin-topless" polaroidBorder>
+      <!-- max 333px -->
+      <template #img>
+        <picture>
+          <source
+            srcset="
+              @/assets/refs/clothes/lazy/undies.jpg?w=0&avif&withoutEnlargement&srcset
+            "
+            sizes="333px"
+            type="image/avif"
+          />
+          <source
+            srcset="
+              @/assets/refs/clothes/lazy/undies.jpg?w=0&webp&withoutEnlargement&srcset
+            "
+            sizes="333px"
+            type="image/webp"
+          />
+          <img
+            srcset="
+              @/assets/refs/clothes/lazy/undies.jpg?w=0&withoutEnlargement&srcset
+            "
+            sizes="333px"
+            alt="Shorts"
+            loading="lazy"
+          />
+        </picture>
+      </template>
+
+      <template #caption>
+        <p>Topless w/ jockstrap/boxer briefs</p>
+        <p>
+          For even more comfort, Sebin tends to forgoe pants completely and save
+          on laundry by only wearing the absolute necessary.
+        </p>
+      </template>
+
+      <!-- <template #copyright></template> -->
+    </RefFigure>
+  </RefGallery>
+</template>
+
+<style lang="scss"></style>