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

style: run formatter

Browse source
This commit is contained in:
Sebin Nyshkim 2023-09-04 20:06:56 +02:00
parent b5eae39f89
commit 35f5343149
20 changed files with 207 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/App.vue
View file

@ -1,49 +1,45 @@
<script setup lang="ts">
import { ref } from "vue";
import { RouterView } from "vue-router";
import { version } from "../package.json";
import router from "@/router";
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import { version } from '../package.json'
import router from '@/router'
import ModalDialog from "@/components/ModalDialog.vue";
import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
import LinkButton from "@/components/LinkButton.vue";
import SiteNavigation from "@/components/SiteNavigation.vue";
import NavigationItem from "@/components/NavigationItem.vue";
import LanguageButton from "@/components/LanguageButton.vue";
import SiteFooter from "@/components/SiteFooter.vue";
import ModalDialog from '@/components/ModalDialog.vue'
import LocaleSwitcher from '@/components/LocaleSwitcher.vue'
import LinkButton from '@/components/LinkButton.vue'
import SiteNavigation from '@/components/SiteNavigation.vue'
import NavigationItem from '@/components/NavigationItem.vue'
import LanguageButton from '@/components/LanguageButton.vue'
import SiteFooter from '@/components/SiteFooter.vue'
import LanguageIcon from "@/assets/icons/LanguageIcon.vue";
import LanguageIcon from '@/assets/icons/LanguageIcon.vue'
const locales = [
{ code: "en", name: "English", flag: "🇬🇧" },
{ code: "de", name: "Deutsch", flag: "🇩🇪" },
];
{ code: 'en', name: 'English', flag: '🇬🇧' },
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' }
]
const langswitcher = ref<InstanceType<typeof ModalDialog>>();
const langswitcher = ref<InstanceType<typeof ModalDialog>>()
const showModal = () => {
langswitcher.value?.showModal();
};
langswitcher.value?.showModal()
}
const close = () => {
langswitcher.value?.close();
};
langswitcher.value?.close()
}
</script>
<template>
<ModalDialog id="lang-select" ref="langswitcher">
<template #heading>{{ $t("langswitcher.title") }}</template>
<template #heading>{{ $t('langswitcher.title') }}</template>
<template #message>
<p>{{ $t("langswitcher.prompt") }}</p>
<LocaleSwitcher
id="locale-switch"
v-model="$i18n.locale"
:locales="locales"
/>
<p>{{ $t('langswitcher.prompt') }}</p>
<LocaleSwitcher id="locale-switch" v-model="$i18n.locale" :locales="locales" />
</template>
<template #buttons>
<LinkButton @click.prevent="close()">
{{ $t("langswitcher.buttonClose") }}
{{ $t('langswitcher.buttonClose') }}
</LinkButton>
</template>
</ModalDialog>
@ -54,7 +50,9 @@ const close = () => {
:key="idx"
:icon="route.meta?.icon"
:href="route.path"
>{{ $t(`${route.meta?.title}`) }}</NavigationItem>
>
{{ $t(`${route.meta?.title}`) }}
</NavigationItem>
</SiteNavigation>
<main>
@ -64,7 +62,5 @@ const close = () => {
<RouterView />
</main>
<SiteFooter>
v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim
</SiteFooter>
<SiteFooter>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</SiteFooter>
</template>

28
src/components/AttributionTable.vue
View file

@ -1,23 +1,23 @@
<script setup lang="ts">
import FAIcon from "@/assets/icons/FurAffinityIcon.vue";
import TwitterIcon from "@/assets/icons/TwitterIcon.vue";
import FAIcon from '@/assets/icons/FurAffinityIcon.vue'
import TwitterIcon from '@/assets/icons/TwitterIcon.vue'
interface ArtistLink {
furaffinity?: string;
twitter?: string;
furaffinity?: string
twitter?: string
}
interface Attribution {
artwork: string;
artist: string;
links: ArtistLink;
artwork: string
artist: string
links: ArtistLink
}
interface Props {
attributions: Attribution[];
attributions: Attribution[]
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
@ -25,19 +25,15 @@ defineProps<Props>();
<thead class="attribution-table__head">
<tr class="attribution-table__row">
<th class="attribution-table__heading artwork">
{{ $t("attributions.artwork.headings[0]") }}
{{ $t('attributions.artwork.headings[0]') }}
</th>
<th class="attribution-table__heading artist">
{{ $t("attributions.artwork.headings[1]") }}
{{ $t('attributions.artwork.headings[1]') }}
</th>
</tr>
</thead>
<tbody class="attribution-table__body">
<tr
class="attribution-table__row"
v-for="(attrib, idx) in attributions"
:key="idx"
>
<tr class="attribution-table__row" v-for="(attrib, idx) in attributions" :key="idx">
<td class="attribution-table__cell artwork">
<img :src="attrib.artwork" alt="Image attribution" />
</td>

31
src/components/ColorTable.vue
View file

@ -1,33 +1,30 @@
<script setup lang="ts">
interface ColorDict {
name: string;
value: string;
name: string
value: string
}
interface Props {
colors: ColorDict[];
colors: ColorDict[]
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
<table class="color-table">
<thead class="color-table__head">
<tr class="color-table__row">
<th class="color-table__heading name">{{ $t("data.colors.headings[0]") }}</th>
<th class="color-table__heading value">{{ $t("data.colors.headings[1]") }}</th>
<th class="color-table__heading color">{{ $t("data.colors.headings[2]") }}</th>
<th class="color-table__heading name">{{ $t('data.colors.headings[0]') }}</th>
<th class="color-table__heading value">{{ $t('data.colors.headings[1]') }}</th>
<th class="color-table__heading color">{{ $t('data.colors.headings[2]') }}</th>
</tr>
</thead>
<tbody class="color-table__body">
<tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
<td class="color-table__cell name">{{ $t(color.name) }}</td>
<td class="color-table__cell value">{{ color.value }}</td>
<td
class="color-table__cell color"
:style="{ 'background-color': color.value }"
></td>
<td class="color-table__cell color" :style="{ 'background-color': color.value }"></td>
</tr>
</tbody>
</table>
@ -47,8 +44,16 @@ defineProps<Props>();
}
&.value {
font-family: Menlo, JetBrains Mono, Source Code Pro, Monaco, Ubuntu Mono,
Roboto Mono, Cascadia Code, Consolas, monospace;
font-family:
Menlo,
JetBrains Mono,
Source Code Pro,
Monaco,
Ubuntu Mono,
Roboto Mono,
Cascadia Code,
Consolas,
monospace;
text-align: center;
}
}

12
src/components/DataTable.vue
View file

@ -1,21 +1,17 @@
<script setup lang="ts">
interface Props {
headings: string[];
data: string[][];
headings: string[]
data: string[][]
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
<table class="data-table">
<thead class="data-table__head">
<tr class="data-table__row">
<th
class="data-table__heading"
v-for="(heading, idx) in headings"
:key="idx"
>
<th class="data-table__heading" v-for="(heading, idx) in headings" :key="idx">
{{ $t(heading) }}
</th>
</tr>

2
src/components/LanguageButton.vue
View file

@ -15,7 +15,7 @@
&:before {
position: absolute;
inset: 0.325rem 0 0.7rem 0;
content: "";
content: '';
background-color: var(--color-background);
border-radius: 0.3rem;
}

6
src/components/LinkButton.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts">
interface Props {
href?: string;
download?: boolean | any;
href?: string
download?: boolean | any
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>

26
src/components/ModalDialog.vue
View file

@ -1,27 +1,27 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref } from 'vue'
interface Props {
id: string;
id: string
}
defineProps<Props>();
defineProps<Props>()
const modal = ref<HTMLDialogElement>();
const modal = ref<HTMLDialogElement>()
const showModal = () => {
modal.value?.showModal();
document.body.inert = true;
document.body.classList.add("scroll-lock");
};
modal.value?.showModal()
document.body.inert = true
document.body.classList.add('scroll-lock')
}
const close = () => {
modal.value?.close();
document.body.inert = false;
document.body.classList.remove("scroll-lock");
};
modal.value?.close()
document.body.inert = false
document.body.classList.remove('scroll-lock')
}
defineExpose({ showModal, close });
defineExpose({ showModal, close })
</script>
<template>

8
src/components/NavigationItem.vue
View file

@ -1,12 +1,12 @@
<script setup lang="ts">
import { RouterLink } from "vue-router";
import { RouterLink } from 'vue-router'
interface Props {
icon: unknown | object;
href: string;
icon: unknown | object
href: string
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>

9
src/components/RefImage.vue
View file

@ -1,17 +1,14 @@
<script setup lang="ts">
interface Props {
dropshadow?: boolean;
dropshadow?: boolean
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
<figure class="figure">
<picture
class="figure__image"
:class="{ 'figure__image--dropshadow': dropshadow }"
>
<picture class="figure__image" :class="{ 'figure__image--dropshadow': dropshadow }">
<slot></slot>
</picture>

8
src/components/TimelineItem.vue
View file

@ -26,12 +26,11 @@
position: relative;
&:not(:last-child):before {
content: "";
content: '';
position: absolute;
inset: var(--timeline-stroke-position-odd);
height: var(--timeline-stroke-length);
border-left: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color);
border-left: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
}
&:nth-child(odd) {
@ -58,8 +57,7 @@
background-color: var(--timeline-circle-background);
margin: 0;
border: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color);
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
border-radius: 100%;
padding: var(--timeline-circle-padding);

3
src/components/TimelineList.vue
View file

@ -10,8 +10,7 @@
position: relative;
margin: 0 auto;
padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
list-style: none;

8
src/components/WelcomeHeader.vue
View file

@ -2,12 +2,8 @@
<header class="welcome">
<div class="welcome__image">
<picture>
<source
srcset="@/assets/viktor-avatar.png?w=400;800&format=avif&quality=75&as=srcset"
/>
<source
srcset="@/assets/viktor-avatar.png?w=400;800&format=webp&quality=100&as=srcset"
/>
<source srcset="@/assets/viktor-avatar.png?w=400;800&format=avif&quality=75&as=srcset" />
<source srcset="@/assets/viktor-avatar.png?w=400;800&format=webp&quality=100&as=srcset" />
<img src="@/assets/viktor-avatar.png?w=400&format=png" alt="Viktor Avatar" />
</picture>
</div>

8
src/lang/index.ts
View file

@ -1,7 +1,7 @@
import en from "./translations/en.json";
import de from "./translations/de.json";
import en from './translations/en.json'
import de from './translations/de.json'
export default {
en,
de,
};
de
}

30
src/main.ts
View file

@ -1,21 +1,21 @@
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createI18n } from "vue-i18n";
import messages from "./lang";
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createI18n } from 'vue-i18n'
import messages from './lang'
import "normalize.css";
import "@/scss/main.scss";
import 'normalize.css'
import '@/scss/main.scss'
const i18n = createI18n({
locale: "en",
fallbackLocale: "en",
messages,
});
locale: 'en',
fallbackLocale: 'en',
messages
})
const app = createApp(App);
const app = createApp(App)
app.use(router);
app.use(i18n);
app.use(router)
app.use(i18n)
app.mount("body");
app.mount('body')

82
src/router/index.ts
View file

@ -1,64 +1,64 @@
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import HomeIcon from "@/assets/icons/HomeIcon.vue";
import IdCardIcon from "@/assets/icons/IdCardIcon.vue";
import PaletteIcon from "@/assets/icons/PaletteIcon.vue";
import BriefcaseIcon from "@/assets/icons/BriefcaseIcon.vue";
import CircleInfoIcon from "@/assets/icons/CircleInfoIcon.vue";
import HomeIcon from '@/assets/icons/HomeIcon.vue'
import IdCardIcon from '@/assets/icons/IdCardIcon.vue'
import PaletteIcon from '@/assets/icons/PaletteIcon.vue'
import BriefcaseIcon from '@/assets/icons/BriefcaseIcon.vue'
import CircleInfoIcon from '@/assets/icons/CircleInfoIcon.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
scrollBehavior: () => {
return { top: 0 };
return { top: 0 }
},
routes: [
{
path: "/",
name: "home",
path: '/',
name: 'home',
component: HomeView,
meta: {
title: "nav.home",
icon: HomeIcon,
},
title: 'nav.home',
icon: HomeIcon
}
},
{
path: "/general",
name: "general",
component: () => import("@/views/GeneralView.vue"),
path: '/general',
name: 'general',
component: () => import('@/views/GeneralView.vue'),
meta: {
title: "nav.general",
icon: IdCardIcon,
},
title: 'nav.general',
icon: IdCardIcon
}
},
{
path: "/anatomy",
name: "anatomy",
component: () => import("@/views/AnatomyView.vue"),
path: '/anatomy',
name: 'anatomy',
component: () => import('@/views/AnatomyView.vue'),
meta: {
title: "nav.anatomy",
icon: PaletteIcon,
},
title: 'nav.anatomy',
icon: PaletteIcon
}
},
{
path: "/career-path",
name: "career-path",
component: () => import("@/views/CareerPathView.vue"),
path: '/career-path',
name: 'career-path',
component: () => import('@/views/CareerPathView.vue'),
meta: {
title: "nav.careerPath",
icon: BriefcaseIcon,
},
title: 'nav.careerPath',
icon: BriefcaseIcon
}
},
{
path: "/attributions",
name: "attributions",
component: () => import("@/views/AttributionsView.vue"),
path: '/attributions',
name: 'attributions',
component: () => import('@/views/AttributionsView.vue'),
meta: {
title: "nav.attributions",
icon: CircleInfoIcon,
},
},
],
});
title: 'nav.attributions',
icon: CircleInfoIcon
}
}
]
})
export default router;
export default router

47
src/scss/base.scss
View file

@ -1,4 +1,4 @@
@import "fontfaces";
@import 'fontfaces';
/* theme colors */
:root {
@ -33,8 +33,8 @@
/* general purpose variables */
:root {
--font-family-copy: "Arvo", sans-serif;
--font-family-headings: "Secular One", serif;
--font-family-copy: 'Arvo', sans-serif;
--font-family-headings: 'Secular One', serif;
--font-size: 18px;
--text-line-height: 1.5;
@ -54,8 +54,7 @@
--container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
--container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
--textblock-padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
--textblock-padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
--welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
var(--container-spacing-left-safe);
@ -75,19 +74,14 @@
--navigation-height: auto;
--navigation-padding: 0 0 0 env(safe-area-inset-left);
--navigation-cutout: 0 0
calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
--navigation-cutout-page-background: calc(
var(--navigation-size) + env(safe-area-inset-bottom)
);
--navigation-cutout: 0 0 calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
--navigation-cutout-page-background: calc(var(--navigation-size) + env(safe-area-inset-bottom));
--navigation-cutout-main: 0;
--navigation-link-display: none;
--navigation-link-flex: 1 0 var(--navigation-size);
--navigation-link-justify: center;
--navigation-link-height: calc(
var(--navigation-size) + env(safe-area-inset-bottom)
);
--navigation-link-height: calc(var(--navigation-size) + env(safe-area-inset-bottom));
--navigation-link-padding: 0 0 env(safe-area-inset-bottom) 0;
--navigation-link-icon-size: calc(var(--navigation-size) / 2);
--navigation-link-icon-spacing: calc(var(--navigation-size) * 0.25);
@ -118,13 +112,10 @@
--timeline-item-margin-even: var(--timeline-item-margin);
--timeline-item-text-align-even: left;
--timeline-item-content-padding-odd: 0 0 0 var(--container-spacing-left-safe);
--timeline-item-content-padding-even: var(
--timeline-item-content-padding-odd
);
--timeline-item-content-padding-even: var(--timeline-item-content-padding-odd);
--table-border-radius: 1rem;
--table-outer-spacing: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
--table-outer-spacing: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
--table-cell-padding: 0.25rem 0.5rem;
}
@ -225,11 +216,9 @@
--page-background-image-max-height: 100vh;
--color-table-color-cell-width: 10rem;
--textblock-padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
--textblock-padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
--navigation-cutout: 0 0 0
calc(var(--navigation-size) + env(safe-area-inset-left));
--navigation-cutout: 0 0 0 calc(var(--navigation-size) + env(safe-area-inset-left));
--navigation-cutout-page-background: 0;
--navigation-cutout-main: var(--navigation-cutout);
@ -238,9 +227,7 @@
--navigation-align: stretch;
--navigation-position: 0 auto 0 0;
--navigation-width: calc(
var(--navigation-size) + env(safe-area-inset-left)
);
--navigation-width: calc(var(--navigation-size) + env(safe-area-inset-left));
--navigation-width-expanded: var(--navigation-width);
--navigation-link-display: block;
@ -271,10 +258,8 @@
--timeline-stroke-length: calc(100% - var(--timeline-circle-size));
--timeline-stroke-position-even: var(--timeline-stroke-position-top)
var(--timeline-stroke-position-horizontal) auto auto;
--timeline-item-margin-odd: 0 0 0
calc(50% - var(--timeline-circle-size) / 2);
--timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0
0;
--timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2);
--timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0;
--timeline-item-flex-order: 1;
--timeline-item-content-margin-odd: 0 0 0 1rem;
--timeline-item-content-margin-even: 0 1rem 0 0;
@ -298,8 +283,6 @@
@media (hover: hover) and (min-width: 50em) {
:root {
--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));
}
}

4
src/scss/fontfaces.scss
View file

@ -1,2 +1,2 @@
@import "@/assets/fonts/arvo/arvo";
@import "@/assets/fonts/secular-one/secular-one";
@import '@/assets/fonts/arvo/arvo';
@import '@/assets/fonts/secular-one/secular-one';

11
src/scss/main.scss
View file

@ -1,4 +1,4 @@
@import "@/scss/base";
@import '@/scss/base';
:root {
font-family: var(--font-family-copy);
@ -19,7 +19,9 @@ body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background-body);
transition: color 0.5s, background-color 0.5s;
transition:
color 0.5s,
background-color 0.5s;
line-height: var(--text-line-height);
text-rendering: optimizeLegibility;
@ -41,7 +43,7 @@ main {
&:after {
display: block;
content: "";
content: '';
position: sticky;
inset: auto 0 var(--navigation-cutout-page-background) 0;
@ -95,8 +97,7 @@ a {
&:hover {
color: var(--color-link-text-hover);
box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0
var(--color-link-text-underline);
box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0 var(--color-link-text-underline);
}
}

84
src/views/AttributionsView.vue
View file

@ -1,60 +1,56 @@
<script setup lang="ts">
import AttributionTable from "@/components/AttributionTable.vue";
import AttributionTable from '@/components/AttributionTable.vue'
import ViktorRefAlpha from "@/assets/viktor-ref-SFW-alpha.png?w=400&format=webp&quality=100&imagetools";
import ViktorFront from "@/assets/viktor-front-SFW-alpha.png?w=400&format=webp&quality=100&imagetools";
import ViktorRefAlpha from '@/assets/viktor-ref-SFW-alpha.png?w=400&format=webp&quality=100&imagetools'
import ViktorFront from '@/assets/viktor-front-SFW-alpha.png?w=400&format=webp&quality=100&imagetools'
const attributions = [
{
artwork: ViktorRefAlpha,
artist: "sabertoofs",
artist: 'sabertoofs',
links: {
furaffinity: "https://www.furaffinity.net/user/sabertoofs",
twitter: "https://twitter.com/sabertoofs",
},
furaffinity: 'https://www.furaffinity.net/user/sabertoofs',
twitter: 'https://twitter.com/sabertoofs'
}
},
{
artwork: ViktorFront,
artist: "sabertoofs",
artist: 'sabertoofs',
links: {
furaffinity: "https://www.furaffinity.net/user/sabertoofs",
twitter: "https://twitter.com/sabertoofs",
},
},
];
furaffinity: 'https://www.furaffinity.net/user/sabertoofs',
twitter: 'https://twitter.com/sabertoofs'
}
}
]
</script>
<template>
<section>
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
<h2>{{ $t("attributions.artwork.heading") }}</h2>
<h2>{{ $t('attributions.artwork.heading') }}</h2>
</section>
<AttributionTable :attributions="attributions" />
<section>
<h2>{{ $t("attributions.other.heading") }}</h2>
<h2>{{ $t('attributions.other.heading') }}</h2>
</section>
<table>
<thead>
<tr>
<th>{{ $t("attributions.other.headings[0]") }}</th>
<th>{{ $t("attributions.other.headings[1]") }}</th>
<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>{{ $t('attributions.other.icons[0]') }}</td>
<td>
<a
href="https://fontawesome.com/license/free"
target="_blank"
rel="noopener noreferrer"
>
<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>{{ $t('attributions.other.headingFont[0]') }}</td>
<td>
<a
href="https://github.com/MichalSahar/Secular"
@ -63,18 +59,14 @@ const attributions = [
>
Secular One
</a>
{{ $t("attributions.other.headingFont[1]") }}
<a
href="https://github.com/MichalSahar"
target="_blank"
rel="noopener noreferrer"
>
{{ $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>{{ $t('attributions.other.copyFont[0]') }}</td>
<td>
<a
href="https://antonkoovit.com/typefaces/arvo"
@ -83,33 +75,19 @@ const attributions = [
>
Arvo
</a>
{{ $t("attributions.other.copyFont[1]") }}
<a
href="https://antonkoovit.com/"
target="_blank"
rel="noopener noreferrer"
>
{{ $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[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"
>
{{ $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>
@ -117,5 +95,3 @@ const attributions = [
</tbody>
</table>
</template>
<style lang="scss"></style>

4
src/views/CareerPathView.vue
View file

@ -10,8 +10,8 @@ import TruckIcon from '@/assets/icons/TruckIcon.vue'
import BoxesIcon from '@/assets/icons/BoxesIcon.vue'
interface Job {
title: string;
desc: string;
title: string
desc: string
}
const jobIcons = [