mirror of
https://github.com/Rakantor/personal-portfolio.git
synced 2025-12-17 11:36:32 +01:00
Add page transitions
This commit is contained in:
@@ -47,3 +47,26 @@ p a {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
|
||||
.slide-left-enter-active,
|
||||
.slide-left-leave-active,
|
||||
.slide-right-enter-active,
|
||||
.slide-right-leave-active {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.slide-left-enter-from {
|
||||
opacity: 0;
|
||||
transform: translate(50px, 0);
|
||||
}
|
||||
.slide-left-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate(-50px, 0);
|
||||
}
|
||||
.slide-right-enter-from {
|
||||
opacity: 0;
|
||||
transform: translate(-50px, 0);
|
||||
}
|
||||
.slide-right-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate(50px, 0);
|
||||
}
|
||||
8
middleware/transition.global.ts
Normal file
8
middleware/transition.global.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
export default defineNuxtRouteMiddleware((to, from) => {
|
||||
if (typeof to.meta.pageTransition === 'object' && typeof from.meta.pageTransition === 'object') {
|
||||
if (typeof to.meta.id !== 'number' || typeof from.meta.id !== 'number') return
|
||||
|
||||
const transition = to.meta.id > from.meta.id ? 'slide-left' : 'slide-right'
|
||||
to.meta.pageTransition.name = from.meta.pageTransition.name = transition
|
||||
}
|
||||
})
|
||||
@@ -59,6 +59,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
definePageMeta({
|
||||
id: 2,
|
||||
pageTransition: {
|
||||
name: 'slide',
|
||||
mode: 'out-in'
|
||||
}
|
||||
})
|
||||
|
||||
import _groupBy from 'lodash-es/groupBy'
|
||||
|
||||
export default {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-card class="mb-2">
|
||||
<v-card-item>
|
||||
<v-card-title>Offenlegung nach § 25 Mediengesetz</v-card-title>
|
||||
@@ -960,11 +961,17 @@
|
||||
</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
definePageMeta({
|
||||
id: 4,
|
||||
pageTransition: false
|
||||
})
|
||||
|
||||
export default {
|
||||
name: 'ImprintPage',
|
||||
name: 'ImprintPage'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -31,6 +31,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
definePageMeta({
|
||||
id: 1,
|
||||
pageTransition: {
|
||||
name: 'slide',
|
||||
mode: 'out-in'
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
name: 'IndexPage'
|
||||
}
|
||||
|
||||
@@ -1,89 +1,99 @@
|
||||
<template>
|
||||
<ImageCarousel ref="imageCarousel" />
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<span class="text-h5 font-weight-medium">
|
||||
{{ $t('portfolioTitle') }}
|
||||
</span>
|
||||
</v-col>
|
||||
<v-col v-for="(project, index) of projects" :key="index" cols="12" lg="4" md="6">
|
||||
<v-card height="100%" class="d-flex flex-column">
|
||||
<v-carousel
|
||||
v-model="carouselIndex[index]"
|
||||
:show-arrows="project.images.length > 1 ? 'hover' : false"
|
||||
:hide-delimiters="project.images.length <= 1"
|
||||
height="auto"
|
||||
>
|
||||
<v-carousel-item v-for="image of project.images" :key="image"
|
||||
:src="`${cdn}${image}`"
|
||||
:class="project.class"
|
||||
@click="showImageCarousel(project.images, carouselIndex[index])"
|
||||
></v-carousel-item>
|
||||
</v-carousel>
|
||||
<v-card-item>
|
||||
<v-card-title class="d-flex">
|
||||
<span>{{ project.title }}</span>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
v-if="project.repoUrl"
|
||||
variant="text"
|
||||
icon="mdi-github"
|
||||
density="comfortable"
|
||||
color="on-surface"
|
||||
:href="`https://${project.repoUrl}`"
|
||||
target="_blank"
|
||||
class="link"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="project.projectUrl"
|
||||
variant="text"
|
||||
icon="mdi-open-in-new"
|
||||
density="comfortable"
|
||||
color="on-surface"
|
||||
:href="`https://${project.projectUrl}`"
|
||||
target="_blank"
|
||||
class="link"
|
||||
/>
|
||||
</v-card-title>
|
||||
<v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
|
||||
</v-card-item>
|
||||
<v-card-text>{{ $t(project.description) }}</v-card-text>
|
||||
<v-spacer></v-spacer>
|
||||
<v-card-actions class="d-flex flex-row flex-wrap justify-center align-center">
|
||||
<img v-for="t of project.tech" :key="tech[t].title"
|
||||
:src="generateBadgen(tech[t].title, tech[t].icon)"
|
||||
:height="20"
|
||||
class="ma-1"
|
||||
/>
|
||||
|
||||
<!-- colored badges
|
||||
<img v-for="t of project.tech" :key="tech[t].title"
|
||||
:src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].icon}${tech[t].color}&label`"
|
||||
:height="20"
|
||||
class="ma-1"
|
||||
/>
|
||||
-->
|
||||
|
||||
<!-- colored badges w/ links to brand websites
|
||||
<a v-for="t of project.tech" :key="tech[t].title"
|
||||
:href="`https://${tech[t].projectUrl}`"
|
||||
target="_blank"
|
||||
<div>
|
||||
<ImageCarousel ref="imageCarousel" />
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<span class="text-h5 font-weight-medium">
|
||||
{{ $t('portfolioTitle') }}
|
||||
</span>
|
||||
</v-col>
|
||||
<v-col v-for="(project, index) of projects" :key="index" cols="12" lg="4" md="6">
|
||||
<v-card height="100%" class="d-flex flex-column">
|
||||
<v-carousel
|
||||
v-model="carouselIndex[index]"
|
||||
:show-arrows="project.images.length > 1 ? 'hover' : false"
|
||||
:hide-delimiters="project.images.length <= 1"
|
||||
height="auto"
|
||||
>
|
||||
<v-carousel-item v-for="image of project.images" :key="image"
|
||||
:src="`${cdn}${image}`"
|
||||
:class="project.class"
|
||||
@click="showImageCarousel(project.images, carouselIndex[index])"
|
||||
></v-carousel-item>
|
||||
</v-carousel>
|
||||
<v-card-item>
|
||||
<v-card-title class="d-flex">
|
||||
<span>{{ project.title }}</span>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
v-if="project.repoUrl"
|
||||
variant="text"
|
||||
icon="mdi-github"
|
||||
density="comfortable"
|
||||
color="on-surface"
|
||||
:href="`https://${project.repoUrl}`"
|
||||
target="_blank"
|
||||
class="link"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="project.projectUrl"
|
||||
variant="text"
|
||||
icon="mdi-open-in-new"
|
||||
density="comfortable"
|
||||
color="on-surface"
|
||||
:href="`https://${project.projectUrl}`"
|
||||
target="_blank"
|
||||
class="link"
|
||||
/>
|
||||
</v-card-title>
|
||||
<v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
|
||||
</v-card-item>
|
||||
<v-card-text>{{ $t(project.description) }}</v-card-text>
|
||||
<v-spacer></v-spacer>
|
||||
<v-card-actions class="d-flex flex-row flex-wrap justify-center align-center">
|
||||
<img v-for="t of project.tech" :key="tech[t].title"
|
||||
:src="generateBadgen(tech[t].title, tech[t].icon)"
|
||||
:height="20"
|
||||
class="ma-1"
|
||||
/>
|
||||
|
||||
<!-- colored badges
|
||||
<img v-for="t of project.tech" :key="tech[t].title"
|
||||
:src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].icon}${tech[t].color}&label`"
|
||||
:height="20"
|
||||
class="ma-1"
|
||||
/>
|
||||
</a>
|
||||
-->
|
||||
-->
|
||||
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- colored badges w/ links to brand websites
|
||||
<a v-for="t of project.tech" :key="tech[t].title"
|
||||
:href="`https://${tech[t].projectUrl}`"
|
||||
target="_blank"
|
||||
>
|
||||
<img v-for="t of project.tech" :key="tech[t].title"
|
||||
:src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].icon}${tech[t].color}&label`"
|
||||
:height="20"
|
||||
class="ma-1"
|
||||
/>
|
||||
</a>
|
||||
-->
|
||||
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
definePageMeta({
|
||||
id: 3,
|
||||
pageTransition: {
|
||||
name: 'slide',
|
||||
mode: 'out-in'
|
||||
}
|
||||
})
|
||||
|
||||
import { badgen } from 'badgen'
|
||||
import { siAndroid, siAmazonaws, siMicrosoftazure, siFirebase, siGithub,
|
||||
siHeroku, siCoffeescript, siYoutubegaming, siMysql, siNuxtdotjs, siPhp,
|
||||
|
||||
Reference in New Issue
Block a user