92 lines
2.0 KiB
Vue
92 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class="info__container">
|
||
|
|
<div class="info__box">
|
||
|
|
<h1 class="info__title">Know Your Teammates</h1>
|
||
|
|
<h2 class="info__subtitle">{{ $t('credits') }}</h2>
|
||
|
|
<table class="info__table">
|
||
|
|
<tr>
|
||
|
|
<td class="info__table-key">Settel</td>
|
||
|
|
<td>idea, code, add. design</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="info__table-key">Denis</td>
|
||
|
|
<td>design</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<h2 class="info__subtitle">{{ $t('technologies') }}</h2>
|
||
|
|
<table class="info__table">
|
||
|
|
<tr>
|
||
|
|
<td class="info__table-key">Frontend</td>
|
||
|
|
<td>Vue3 + Nuxt3</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="info__table-key">Backend</td>
|
||
|
|
<td>Go</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="info__table-key">Tools</td>
|
||
|
|
<td>Podman/Docker, GNU Make, VS Code, Figma</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<Button class="info__button" :border="true" @click="navigateTo('/')">{{ $t('back') }}</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { navigateTo } from '#app'
|
||
|
|
import useI18n from '@/composables/useI18n'
|
||
|
|
|
||
|
|
const { $t } = useI18n({
|
||
|
|
back: { en: 'back', de: 'zurück' },
|
||
|
|
credits: { en: 'Credits', de: 'Mitwirkende' },
|
||
|
|
technologies: { en: 'Technologies used', de: 'verwendete Technologien' },
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import '~/assets/css/components';
|
||
|
|
|
||
|
|
.info {
|
||
|
|
&__container {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-family: $font-primary;
|
||
|
|
color: $text-primary-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__box {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width: 600px;
|
||
|
|
margin: auto;
|
||
|
|
padding: 32px;
|
||
|
|
border: 1px solid white;
|
||
|
|
border-radius: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__title {
|
||
|
|
margin: 0 32px 32px 0;
|
||
|
|
font-size: 48px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__subtitle {
|
||
|
|
margin: 32px 0 8px 0;
|
||
|
|
font-size: 24px;
|
||
|
|
font-family: $font-secondary;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__table {
|
||
|
|
font-family: $font-secondary;
|
||
|
|
|
||
|
|
&-key {
|
||
|
|
width: 6em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__button {
|
||
|
|
margin: 64px 0 0 auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|