feat: add transitions between pages
This commit is contained in:
Sebin Nyshkim
parent
f2b408fce5
commit
68a43b6b9c
9 changed files with 269 additions and 227 deletions
|
|
@ -15,149 +15,151 @@ const colors = [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
</section>
|
||||
<article>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
</section>
|
||||
|
||||
<RefImage dropshadow>
|
||||
<template v-if="$route.query.nsfw">
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
alt="Viktor Ref by sabertoofs"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
<RefImage dropshadow>
|
||||
<template v-if="$route.query.nsfw">
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
alt="Viktor Ref by sabertoofs"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
:alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
:alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #caption>
|
||||
{{ $t('anatomy.images.back.caption') }} ©
|
||||
<a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
</template>
|
||||
</RefImage>
|
||||
<template #caption>
|
||||
{{ $t('anatomy.images.back.caption') }} ©
|
||||
<a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
</template>
|
||||
</RefImage>
|
||||
|
||||
<ColorTable :colors="colors"></ColorTable>
|
||||
<ColorTable :colors="colors"></ColorTable>
|
||||
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
|
||||
<RefImage dropshadow>
|
||||
<template v-if="$route.query.nsfw">
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
<RefImage dropshadow>
|
||||
<template v-if="$route.query.nsfw">
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
alt="Viktor frontal shot by sabertoofs"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
alt="Viktor frontal shot by sabertoofs"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
<template v-else>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
:alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
:alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #caption>
|
||||
{{ $t('anatomy.images.front.caption') }} ©
|
||||
<a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
</template>
|
||||
</RefImage>
|
||||
<template #caption>
|
||||
{{ $t('anatomy.images.front.caption') }} ©
|
||||
<a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
</template>
|
||||
</RefImage>
|
||||
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -25,73 +25,79 @@ const attributions = [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
<h2>{{ $t('attributions.artwork.heading') }}</h2>
|
||||
</section>
|
||||
<AttributionTable :attributions="attributions" />
|
||||
<section>
|
||||
<h2>{{ $t('attributions.other.heading') }}</h2>
|
||||
</section>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('attributions.other.headings[0]') }}</th>
|
||||
<th>{{ $t('attributions.other.headings[1]') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.icons[0]') }}</td>
|
||||
<td>
|
||||
<a href="https://fontawesome.com/license/free" target="_blank" rel="noopener noreferrer">
|
||||
Font Awesome
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.headingFont[0]') }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://github.com/MichalSahar/Secular"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Secular One
|
||||
</a>
|
||||
{{ $t('attributions.other.headingFont[1]') }}
|
||||
<a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
|
||||
Michal Sahar
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.copyFont[0]') }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://antonkoovit.com/typefaces/arvo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Arvo
|
||||
</a>
|
||||
{{ $t('attributions.other.copyFont[1]') }}
|
||||
<a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
|
||||
Anton Koovit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.background[0]') }}</td>
|
||||
<td>
|
||||
{{ $t('attributions.other.background[1][0]') }}
|
||||
<a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
|
||||
{{ $t('attributions.other.background[1][1]') }}
|
||||
<a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
|
||||
z creative labs
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<article>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
<h2>{{ $t('attributions.artwork.heading') }}</h2>
|
||||
</section>
|
||||
<AttributionTable :attributions="attributions" />
|
||||
<section>
|
||||
<h2>{{ $t('attributions.other.heading') }}</h2>
|
||||
</section>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('attributions.other.headings[0]') }}</th>
|
||||
<th>{{ $t('attributions.other.headings[1]') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.icons[0]') }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://fontawesome.com/license/free"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Font Awesome
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.headingFont[0]') }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://github.com/MichalSahar/Secular"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Secular One
|
||||
</a>
|
||||
{{ $t('attributions.other.headingFont[1]') }}
|
||||
<a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
|
||||
Michal Sahar
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.copyFont[0]') }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://antonkoovit.com/typefaces/arvo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Arvo
|
||||
</a>
|
||||
{{ $t('attributions.other.copyFont[1]') }}
|
||||
<a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
|
||||
Anton Koovit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.background[0]') }}</td>
|
||||
<td>
|
||||
{{ $t('attributions.other.background[1][0]') }}
|
||||
<a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
|
||||
{{ $t('attributions.other.background[1][1]') }}
|
||||
<a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
|
||||
z creative labs
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -26,20 +26,22 @@ const jobIcons = [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
<p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<article>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
<p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
|
||||
<TimelineList>
|
||||
<TimelineItem v-for="(job, idx) in ($tm('career.jobs') as Job[])" :key="idx">
|
||||
<template #icon>
|
||||
<component :is="jobIcons[idx as number]"></component>
|
||||
</template>
|
||||
<template #headline>{{ job.title }}</template>
|
||||
<template #content>
|
||||
<p>{{ job.desc }}</p>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
</TimelineList>
|
||||
<TimelineList>
|
||||
<TimelineItem v-for="(job, idx) in ($tm('career.jobs') as Job[])" :key="idx">
|
||||
<template #icon>
|
||||
<component :is="jobIcons[idx as number]"></component>
|
||||
</template>
|
||||
<template #headline>{{ job.title }}</template>
|
||||
<template #content>
|
||||
<p>{{ job.desc }}</p>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
</TimelineList>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -48,24 +48,26 @@ const sexData = [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
</section>
|
||||
<article>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
</section>
|
||||
|
||||
<DataTable :headings="heads" :data="data"></DataTable>
|
||||
<DataTable :headings="heads" :data="data"></DataTable>
|
||||
|
||||
<section>
|
||||
<h2>{{ $t('general.personality.heading') }}</h2>
|
||||
<p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>{{ $t('general.personality.heading') }}</h2>
|
||||
<p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>{{ $t('general.sexuality.heading') }}</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>{{ $t('general.sexuality.heading') }}</h2>
|
||||
</section>
|
||||
|
||||
<DataTable :headings="sexHeads" :data="sexData"></DataTable>
|
||||
<DataTable :headings="sexHeads" :data="sexData"></DataTable>
|
||||
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,16 @@ import WelcomeHeader from '@/components/WelcomeHeader.vue'
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeHeader>
|
||||
<template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
|
||||
<template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
|
||||
</WelcomeHeader>
|
||||
<article>
|
||||
<WelcomeHeader>
|
||||
<template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
|
||||
<template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
|
||||
</WelcomeHeader>
|
||||
|
||||
<section>
|
||||
<h3>{{ $t('home.heading') }}</h3>
|
||||
<section>
|
||||
<h3>{{ $t('home.heading') }}</h3>
|
||||
|
||||
<p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue