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