personal-portfolio/app.vue at master · olaszm/personal-portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
  <UApp>
    <div id="app">
      <menu-overlay v-if="isOpen" :toggleModal='() => { toggleModal() }' :isOpen="isOpen" />
      <div class="container">

        <navigation :isOpen="isOpen" />

        <NuxtLoadingIndicator color="#fca523" />

        <UMain>
          <NuxtLayout name="default">
            <NuxtPage class="main" />
          </NuxtLayout>
        </UMain>

        <custom-footer />
      </div>
    </div>
  </UApp>
</template>


<script lang="ts" setup>
import { provide, computed } from "vue";
import { useTheme } from "@/composables/useTheme";
import { useLang } from "@/composables/useLang";
import { useToggleModal } from '@/composables/useToggleModal';
import { type IRoute } from '~/utils/types';

useHead({
  titleTemplate: (titleChunk) => { return titleChunk ? `${titleChunk} - Martin Olasz` : 'Martin Olasz'; },
  link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],
  meta: [
    { name: 'description', content: `Front-end developer building modern web applications with cutting edge technologies.` },
    {
      name: "keywords",
      content:
        "developer, freelance, front-end, website, vue, react, javascript, html, css, hungary, budapest",
    },
  ]
})

const { togglePreference, currentTheme } = useTheme();
const { toggleModal, isOpen } = useToggleModal()
const { currentLang, setLang } = useLang()

const routeNames = {
  en: { home: 'Home', about: 'About', projects: 'Projects' },
  hu: { home: 'Főoldal', about: 'Rólam', projects: 'Projektek' },
}

const routes = computed<IRoute[]>(() => {
  const n = routeNames[currentLang.value]
  return [
    { name: n.home, url: '/', icon: 'fa-solid fa-house', type: 'general' },
    { name: n.about, url: '/about', icon: 'fa-solid fa-address-card', type: 'general' },
    { name: n.projects, url: '/projects', icon: 'fa-solid fa-laptop-code', type: 'general' },
    { name: "LinkedIn", url: "https://www.linkedin.com/in/martin-o-a038671b5/", icon: "fa-brands fa-linkedin", type: 'social' },
    { name: "GitHub", url: "https://github.com/olaszm", icon: "fa-brands fa-github", type: 'social' },
  ]
})

provide('theme', { currentTheme, togglePreference })
provide('lang', { currentLang, setLang })
provide('nav-routes', routes)

</script>


<style>
#app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.main {
  min-height: 100vh;
}

body {
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
  position: relative;
}
</style>