SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add transitions between pages

Browse source
This commit is contained in:
Sebin Nyshkim 2023-09-04 22:11:34 +02:00
parent f2b408fce5
commit 68a43b6b9c
9 changed files with 269 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/App.vue
View file

@ -59,7 +59,11 @@ const close = () => {
<LanguageButton> <LanguageButton>
<LanguageIcon @click.prevent="showModal()" /> <LanguageIcon @click.prevent="showModal()" />
</LanguageButton> </LanguageButton>
<RouterView /> <RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" :key="$route.path" />
</Transition>
</RouterView>
</main> </main>
<SiteFooter>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</SiteFooter> <SiteFooter>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</SiteFooter>

6
src/router/index.ts
View file

@ -10,7 +10,11 @@ import CircleInfoIcon from '@/assets/icons/CircleInfoIcon.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
scrollBehavior: () => { scrollBehavior: () => {
return { top: 0 } return new Promise((resolve) => {
setTimeout(() => {
resolve({ top: 0 })
}, 500)
})
}, },
routes: [ routes: [
{ {

9
src/scss/base.scss
View file

@ -43,6 +43,8 @@
--page-background-image: url(@/assets/layered-waves-light.svg); --page-background-image: url(@/assets/layered-waves-light.svg);
--page-background-image-height: 100vw; --page-background-image-height: 100vw;
--page-background-image-max-height: 50vh; --page-background-image-max-height: 50vh;
--page-transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
--page-transform: translateY(5em);
--paragraph-margin: 1rem; --paragraph-margin: 1rem;
@ -286,3 +288,10 @@
--navigation-width-expanded: calc(var(--navigation-size) * 3.75 + env(safe-area-inset-left)); --navigation-width-expanded: calc(var(--navigation-size) * 3.75 + env(safe-area-inset-left));
} }
} }
@media (prefers-reduced-motion) {
:root {
--page-transition: opacity 0.5s ease;
--page-transform: none;
}
}

11
src/scss/main.scss
View file

@ -171,3 +171,14 @@ table {
} }
} }
} }
.fade-enter-active,
.fade-leave-active {
transition: var(--page-transition);
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: var(--page-transform);
}

238
src/views/AnatomyView.vue
View file

@ -15,149 +15,151 @@ const colors = [
</script> </script>
<template> <template>
<section> <article>
<h1>{{ $t(`${$route.meta.title}`) }}</h1> <section>
</section> <h1>{{ $t(`${$route.meta.title}`) }}</h1>
</section>
<RefImage dropshadow> <RefImage dropshadow>
<template v-if="$route.query.nsfw"> <template v-if="$route.query.nsfw">
<source <source
srcset=" srcset="
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=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" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
type="image/avif" type="image/avif"
/> />
<source <source
srcset=" srcset="
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=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" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
type="image/webp" type="image/webp"
/> />
<img <img
srcset=" srcset="
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=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" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
alt="Viktor Ref by sabertoofs" alt="Viktor Ref by sabertoofs"
loading="lazy" loading="lazy"
/> />
</template> </template>
<template v-else> <template v-else>
<source <source
srcset=" srcset="
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=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" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
type="image/avif" type="image/avif"
/> />
<source <source
srcset=" srcset="
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=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" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
type="image/webp" type="image/webp"
/> />
<img <img
srcset=" srcset="
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=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" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
:alt="`${$t('anatomy.images.back.caption')} by sabertoofs`" :alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
loading="lazy" loading="lazy"
/> />
</template> </template>
<template #caption> <template #caption>
{{ $t('anatomy.images.back.caption') }} &copy; {{ $t('anatomy.images.back.caption') }} &copy;
<a href="http://twitter.com/sabertoofs">sabertoofs</a> <a href="http://twitter.com/sabertoofs">sabertoofs</a>
</template> </template>
</RefImage> </RefImage>
<ColorTable :colors="colors"></ColorTable> <ColorTable :colors="colors"></ColorTable>
<section> <section>
<p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p> <p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p>
</section> </section>
<RefImage dropshadow> <RefImage dropshadow>
<template v-if="$route.query.nsfw"> <template v-if="$route.query.nsfw">
<source <source
srcset=" 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 @/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, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
(min-width: 27em) 530px, (min-width: 27em) 530px,
430px" 430px"
type="image/avif" type="image/avif"
/> />
<source <source
srcset=" 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 @/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, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
(min-width: 27em) 530px, (min-width: 27em) 530px,
430px" 430px"
type="image/webp" type="image/webp"
/> />
<img <img
srcset=" 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 @/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, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
(min-width: 27em) 530px, (min-width: 27em) 530px,
430px" 430px"
alt="Viktor frontal shot by sabertoofs" alt="Viktor frontal shot by sabertoofs"
loading="lazy" loading="lazy"
/> />
</template> </template>
<template v-else> <template v-else>
<source <source
srcset=" 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 @/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, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
(min-width: 27em) 530px, (min-width: 27em) 530px,
430px" 430px"
type="image/avif" type="image/avif"
/> />
<source <source
srcset=" 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 @/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, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
(min-width: 27em) 530px, (min-width: 27em) 530px,
430px" 430px"
type="image/webp" type="image/webp"
/> />
<img <img
srcset=" 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 @/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, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
(min-width: 27em) 530px, (min-width: 27em) 530px,
430px" 430px"
:alt="`${$t('anatomy.images.front.caption')} by sabertoofs`" :alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
loading="lazy" loading="lazy"
/> />
</template> </template>
<template #caption> <template #caption>
{{ $t('anatomy.images.front.caption') }} &copy; {{ $t('anatomy.images.front.caption') }} &copy;
<a href="http://twitter.com/sabertoofs">sabertoofs</a> <a href="http://twitter.com/sabertoofs">sabertoofs</a>
</template> </template>
</RefImage> </RefImage>
<section> <section>
<p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p> <p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
</section> </section>
</article>
</template> </template>

144
src/views/AttributionsView.vue
View file

@ -25,73 +25,79 @@ const attributions = [
</script> </script>
<template> <template>
<section> <article>
<h1>{{ $t(`${$route.meta.title}`) }}</h1> <section>
<h2>{{ $t('attributions.artwork.heading') }}</h2> <h1>{{ $t(`${$route.meta.title}`) }}</h1>
</section> <h2>{{ $t('attributions.artwork.heading') }}</h2>
<AttributionTable :attributions="attributions" /> </section>
<section> <AttributionTable :attributions="attributions" />
<h2>{{ $t('attributions.other.heading') }}</h2> <section>
</section> <h2>{{ $t('attributions.other.heading') }}</h2>
<table> </section>
<thead> <table>
<tr> <thead>
<th>{{ $t('attributions.other.headings[0]') }}</th> <tr>
<th>{{ $t('attributions.other.headings[1]') }}</th> <th>{{ $t('attributions.other.headings[0]') }}</th>
</tr> <th>{{ $t('attributions.other.headings[1]') }}</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>{{ $t('attributions.other.icons[0]') }}</td> <tr>
<td> <td>{{ $t('attributions.other.icons[0]') }}</td>
<a href="https://fontawesome.com/license/free" target="_blank" rel="noopener noreferrer"> <td>
Font Awesome <a
</a> href="https://fontawesome.com/license/free"
</td> target="_blank"
</tr> rel="noopener noreferrer"
<tr> >
<td>{{ $t('attributions.other.headingFont[0]') }}</td> Font Awesome
<td> </a>
<a </td>
href="https://github.com/MichalSahar/Secular" </tr>
target="_blank" <tr>
rel="noopener noreferrer" <td>{{ $t('attributions.other.headingFont[0]') }}</td>
> <td>
Secular One <a
</a> href="https://github.com/MichalSahar/Secular"
{{ $t('attributions.other.headingFont[1]') }} target="_blank"
<a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer"> rel="noopener noreferrer"
Michal Sahar >
</a> Secular One
</td> </a>
</tr> {{ $t('attributions.other.headingFont[1]') }}
<tr> <a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
<td>{{ $t('attributions.other.copyFont[0]') }}</td> Michal Sahar
<td> </a>
<a </td>
href="https://antonkoovit.com/typefaces/arvo" </tr>
target="_blank" <tr>
rel="noopener noreferrer" <td>{{ $t('attributions.other.copyFont[0]') }}</td>
> <td>
Arvo <a
</a> href="https://antonkoovit.com/typefaces/arvo"
{{ $t('attributions.other.copyFont[1]') }} target="_blank"
<a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer"> rel="noopener noreferrer"
Anton Koovit >
</a> Arvo
</td> </a>
</tr> {{ $t('attributions.other.copyFont[1]') }}
<tr> <a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
<td>{{ $t('attributions.other.background[0]') }}</td> Anton Koovit
<td> </a>
{{ $t('attributions.other.background[1][0]') }} </td>
<a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a> </tr>
{{ $t('attributions.other.background[1][1]') }} <tr>
<a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer"> <td>{{ $t('attributions.other.background[0]') }}</td>
z creative labs <td>
</a> {{ $t('attributions.other.background[1][0]') }}
</td> <a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
</tr> {{ $t('attributions.other.background[1][1]') }}
</tbody> <a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
</table> z creative labs
</a>
</td>
</tr>
</tbody>
</table>
</article>
</template> </template>

32
src/views/CareerPathView.vue
View file

@ -26,20 +26,22 @@ const jobIcons = [
</script> </script>
<template> <template>
<section> <article>
<h1>{{ $t(`${$route.meta.title}`) }}</h1> <section>
<p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p> <h1>{{ $t(`${$route.meta.title}`) }}</h1>
</section> <p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
</section>
<TimelineList> <TimelineList>
<TimelineItem v-for="(job, idx) in ($tm('career.jobs') as Job[])" :key="idx"> <TimelineItem v-for="(job, idx) in ($tm('career.jobs') as Job[])" :key="idx">
<template #icon> <template #icon>
<component :is="jobIcons[idx as number]"></component> <component :is="jobIcons[idx as number]"></component>
</template> </template>
<template #headline>{{ job.title }}</template> <template #headline>{{ job.title }}</template>
<template #content> <template #content>
<p>{{ job.desc }}</p> <p>{{ job.desc }}</p>
</template> </template>
</TimelineItem> </TimelineItem>
</TimelineList> </TimelineList>
</article>
</template> </template>

32
src/views/GeneralView.vue
View file

@ -48,24 +48,26 @@ const sexData = [
</script> </script>
<template> <template>
<section> <article>
<h1>{{ $t(`${$route.meta.title}`) }}</h1> <section>
</section> <h1>{{ $t(`${$route.meta.title}`) }}</h1>
</section>
<DataTable :headings="heads" :data="data"></DataTable> <DataTable :headings="heads" :data="data"></DataTable>
<section> <section>
<h2>{{ $t('general.personality.heading') }}</h2> <h2>{{ $t('general.personality.heading') }}</h2>
<p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p> <p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p>
</section> </section>
<section> <section>
<h2>{{ $t('general.sexuality.heading') }}</h2> <h2>{{ $t('general.sexuality.heading') }}</h2>
</section> </section>
<DataTable :headings="sexHeads" :data="sexData"></DataTable> <DataTable :headings="sexHeads" :data="sexData"></DataTable>
<section> <section>
<p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p> <p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
</section> </section>
</article>
</template> </template>

18
src/views/HomeView.vue
View file

@ -3,14 +3,16 @@ import WelcomeHeader from '@/components/WelcomeHeader.vue'
</script> </script>
<template> <template>
<WelcomeHeader> <article>
<template #main>{{ $t('welcomeHeader.mainTitle') }}</template> <WelcomeHeader>
<template #sub>{{ $t('welcomeHeader.subTitle') }}</template> <template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
</WelcomeHeader> <template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
</WelcomeHeader>
<section> <section>
<h3>{{ $t('home.heading') }}</h3> <h3>{{ $t('home.heading') }}</h3>
<p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p> <p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
</section> </section>
</article>
</template> </template>