refactor: migrate Clothing view
This commit is contained in:
Sebin Nyshkim
parent
a9b6b815e8
commit
7670634cda
2 changed files with 253 additions and 133 deletions
|
|
@ -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>
|
|
||||||
253
src/views/ClothingView.vue
Normal file
253
src/views/ClothingView.vue
Normal file
|
|
@ -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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue