Style update & theme features

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="$t" class="resume-container">
-    <TopHeader @beforeChangeLang="resumeReady = false" @changedLang="onLanguageChanged" />
+    <TopHeader @beforeChange="resumeReady = false" @changed="onThemeChanged" />
 
     <section class="resume-profile">
       <div class="container">
@@ -76,7 +76,7 @@
                     >
                       <div class="text-verified">
                         <i class="bi bi-check-circle-fill text-success"></i><br />
-                        <div class="badge bg-success">Zweryfikowany odbiorca</div>
+                        <div class="text-success">Zweryfikowany odbiorca</div>
                       </div>
                     </li>
                   </template>
@@ -186,7 +186,7 @@
                     <em
                       v-motion
                       :delay="250 + 200 * c"
-                      :enter="{ x: 0, opacity: 1 }"
+                      :enter="{ x: 0, opacity: 0.75 }"
                       :initial="{ x: 100, opacity: 0 }"
                     >
                       {{ company.companyDate }}
@@ -198,17 +198,18 @@
                       <div
                         v-motion
                         :delay="350 + 100 * c + 200 * p"
-                        :enter="{ y: 0, opacity: 1 }"
-                        :initial="{ y: 50, opacity: 0 }"
+                        :class="{ 'date-current': position.positionDate?.current }"
+                        :enter="{ x: 0, opacity: position.positionDate?.current ? 1 : 0.75 }"
                         class="date-end"
+                        :initial="{ x: -50, opacity: 0 }"
                       >
                         {{ position.positionDate.end }}
                       </div>
                       <div
                         v-motion
                         :delay="400 + 100 * c + 200 * p"
-                        :enter="{ y: 0, opacity: 1 }"
-                        :initial="{ y: 50, opacity: 0 }"
+                        :enter="{ x: 0, opacity: 0.75 }"
+                        :initial="{ x: -50, opacity: 0 }"
                         class="date-start"
                       >
                         {{ position.positionDate.start }}
@@ -362,6 +363,7 @@ const data = reactive({
           positionName: 'Senior Frontend Developer',
           positionDesc: computed(() => t('jobs.raiffeisen.senior')),
           positionDate: {
+            current: true, // TODO: pls change that
             end: computed(() => `${t('dates.present')}`),
             start: computed(() => `${t('months.jun').slice(0, 3)} 2021`)
           }
@@ -441,10 +443,16 @@ const getRandColor = (brightness: number) => {
   return 'rgb(' + rgbMixed.join(',') + ')'
 }
 
-const onLanguageChanged = () => {
-  document.documentElement.style.setProperty('--brand-primary', getRandColor(3))
-  // document.documentElement.style.setProperty('--brand-secondary', getRandColor(0))
+const languageToggled = ref(false)
+
+const onThemeChanged = () => {
+  if (languageToggled.value) {
+    document.documentElement.style.removeProperty('--brand-primary')
+  } else {
+    document.documentElement.style.setProperty('--brand-primary', getRandColor(3))
+  }
 
+  languageToggled.value = !languageToggled.value
   resumeReady.value = true
 }
 

src/_fonts.scss

@@ -1,73 +1,51 @@
-@font-face {
-  font-display: swap;
-  font-family: GT Walsheim;
-  font-weight: 200;
-  src:
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Thin-subset.woff2) format('woff2'),
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Thin-subset.woff) format('woff');
-}
+$font-path: './assets/fonts/GT-Walsheim';
 
-@font-face {
-  font-display: swap;
-  font-family: GT Walsheim;
-  font-weight: 300;
-  src:
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Light-subset.woff2) format('woff2'),
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Light-subset.woff) format('woff');
+@mixin fontFace($font-name, $fontFile, $fontWeight: 400, $fontStyle: normal) {
+  @font-face {
+    font-display: swap;
+    font-family: #{$font-name};
+    src:
+      url('#{$font-path}/#{$fontFile}.woff') format('woff'),
+      url('#{$font-path}/#{$fontFile}.woff2') format('woff2');
+    font-weight: #{$fontWeight};
+    font-style: #{$fontStyle};
+  }
 }
 
-@font-face {
-  font-display: swap;
-  font-family: GT Walsheim;
-  font-weight: 400;
-  src:
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Regular-subset.woff2) format('woff2'),
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Regular-subset.woff) format('woff');
-}
+$font-name: 'GT Walsheim Pro';
 
-@font-face {
-  font-display: swap;
-  font-family: GT Walsheim;
-  font-weight: 400;
-  font-style: italic;
-  src:
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Regular-Oblique-subset.woff2) format('woff2'),
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Regular-Oblique-subset.woff) format('woff');
-}
+@include fontFace($font-name, 'GT-Walsheim-Pro-Ultra-Bold', '900');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Ultra-Bold-Oblique', '900', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Black', '800');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Black-Oblique', '800', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Bold', '700');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Bold-Oblique', '700', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Medium', '500');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Medium-Oblique', '500', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Regular', '400');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Regular-Oblique', '400', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Light', '300');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Light-Oblique', '300', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Thin', '200');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Thin-Oblique', '200', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Ultra-Light', '100');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Ultra-Light-Oblique', '100', 'italic');
 
-@font-face {
-  font-display: swap;
-  font-family: GT Walsheim;
-  font-weight: 500;
-  src:
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Medium-subset.woff2) format('woff2'),
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Medium-subset.woff) format('woff');
-}
+$font-name: 'GT Walsheim Pro Condensed';
 
-@font-face {
-  font-display: swap;
-  font-family: GT Walsheim;
-  font-weight: 500;
-  font-style: italic;
-  src:
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Medium-Oblique-subset.woff2) format('woff2'),
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Medium-Oblique-subset.woff) format('woff');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: GT Walsheim;
-  font-weight: 700;
-  src:
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Bold-subset.woff2) format('woff2'),
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Bold-subset.woff) format('woff');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: GT Walsheim;
-  font-weight: 800;
-  src:
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Black-subset.woff2) format('woff2'),
-    url(./assets/fonts/GT-Walsheim/GT-Walsheim-Black-subset.woff) format('woff');
-}
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Ultra-Bold', '900');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Ultra-Bold-Oblique', '900', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Black', '800');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Black-Oblique', '800', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Bold', '700');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Bold-Oblique', '700', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Medium', '500');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Medium-Oblique', '500', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Regular', '400');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Regular-Oblique', '400', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Light', '300');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Light-Oblique', '300', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Thin', '200');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Thin-Oblique', '200', 'italic');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Ultra-Light', '100');
+@include fontFace($font-name, 'GT-Walsheim-Pro-Condensed-Ultra-Light-Oblique', '100', 'italic');

src/_variables.scss

@@ -1,13 +1,14 @@
 // Default font family
-$font-base:
-  GT Walsheim,
-  sans-serif;
+$font-base: 'GT Walsheim Pro', sans-serif;
+
+// Slim font weight
+$font-condensed: 'GT Walsheim Pro Condensed', sans-serif;
 
 // Massive font weight
-$font-head: stolzl, sans-serif;
+$font-head: 'stolzl', sans-serif;
 
 // Serif font style
-$font-serif: proxima-sera, serif;
+$font-serif: 'proxima-sera', serif;
 
 $color-cyan-1: #1b5d7f;
 $color-cyan-2: #3e8599;

src/components/TopHeader.vue

@@ -1,29 +1,40 @@
 <template>
   <nav class="navbar navbar-expand fixed-top bg-body-gradient">
-    <div class="container">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-        <li class="nav-item dropdown">
+    <div class="container justify-content-between">
+      <strong class="navbar-text"> WIP <sup class="badge bg-dark fw-normal">90%</sup> </strong>
+      <ul class="navbar-nav align-items-center">
+        <template v-for="(lang, key) in $i18n.availableLocales" :key="key">
+          <li v-if="lang !== $i18n.locale" class="nav-item">
+            <button
+              v-motion
+              :enter="{ scale: 1, y: 0, opacity: 1 }"
+              :initial="{ scale: 0.5, y: 20 * (languageToggled ? -1 : 1), opacity: 0 }"
+              class="btn btn-link nav-link text-light text-decoration-none"
+              role="button"
+              @click.prevent="changeLanguage(lang)"
+            >
+              <span class="letter-spacing">
+                {{ lang.toString().toLocaleUpperCase() }}
+              </span>
+            </button>
+          </li>
+        </template>
+        <li class="nav-item align-self-center">
+          <div class="vr h-50 mx-2"></div>
+        </li>
+        <li class="nav-item">
           <button
-            aria-expanded="false"
-            class="btn btn-outline-light btn-sm dropdown-toggle"
-            data-bs-toggle="dropdown"
-            type="button"
+            v-if="themeReady"
+            v-motion
+            :enter="{ y: 0, opacity: 1 }"
+            :initial="{ y: 20 * (themeColorMode === ThemeColorMode.dark ? -1 : 1), opacity: 0 }"
+            class="btn btn-link nav-link text-light text-decoration-none"
+            role="button"
+            @click="toggleThemeColor"
           >
-            <i class="bi bi-globe2"></i>
-            {{ locale.toString().toLocaleUpperCase() }}
+            <i v-if="themeColorMode === ThemeColorMode.dark" class="bi bi-sun-fill"></i>
+            <i v-if="themeColorMode === ThemeColorMode.light" class="bi bi-moon-stars-fill"></i>
           </button>
-          <ul class="dropdown-menu">
-            <li v-for="(lang, key) in $i18n.availableLocales" :key="key">
-              <button
-                :class="{ active: lang === $i18n.locale }"
-                class="dropdown-item"
-                type="button"
-                @click.prevent="changeLanguage(lang)"
-              >
-                {{ lang.toString().toLocaleUpperCase() }}
-              </button>
-            </li>
-          </ul>
         </li>
       </ul>
     </div>
@@ -32,30 +43,58 @@
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { nextTick, onMounted } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
+import { ThemeColorMode, ThemeService } from '@/services/Theme.service'
+import { FactoryService } from '@/services/Factory.service'
+
+const themeReady = ref(false)
+const themeService = FactoryService.useService(ThemeService)
+const themeColorMode = ref(themeService.getColorMode())
 
-const defaultLanguage = window?.navigator?.language?.includes('pl') ? 'pl' : 'en'
-const selectedLanguage = localStorage.getItem('selectedLanguage')
-const { locale } = useI18n({ useScope: 'global' })
+const LocalStoreKey: string = 'szramLanguage'
+const getStoredLanguage = localStorage.getItem(LocalStoreKey)
+const getPreferredLanguage = window?.navigator?.language?.includes('pl') ? 'pl' : 'en'
+const { locale: language } = useI18n({ useScope: 'global' })
 
-const emit = defineEmits(['beforeChangeLang', 'changedLang'])
+const emit = defineEmits(['beforeChange', 'changed'])
+
+const languageToggled = ref(false)
 
 const changeLanguage = (lang: string) => {
   switch (lang) {
     default:
     case 'pl':
       break
   }
-  emit('beforeChangeLang')
-  localStorage.setItem('selectedLanguage', lang)
-  locale.value = lang
+  emit('beforeChange')
+  localStorage.setItem(LocalStoreKey, lang)
+  language.value = lang
   nextTick(() => {
-    emit('changedLang')
+    emit('changed')
+  })
+
+  languageToggled.value = !languageToggled.value
+}
+
+const toggleThemeColor = () => {
+  themeReady.value = false
+  themeService.toggleColorMode()
+
+  nextTick(() => {
+    themeColorMode.value = themeService.getColorMode()
+    themeReady.value = true
   })
 }
 
 onMounted(() => {
-  locale.value = selectedLanguage || defaultLanguage
+  language.value = getStoredLanguage || getPreferredLanguage
+
+  themeService.setup()
+
+  nextTick(() => {
+    themeColorMode.value = themeService.getColorMode()
+    themeReady.value = true
+  })
 })
 </script>
 

src/main.ts

@@ -1,23 +1,24 @@
 import './style.scss'
-import 'bootstrap/js/index.esm'
+import 'bootstrap/js/dist/dropdown'
 
 import { createApp } from 'vue'
 import { MotionPlugin } from '@vueuse/motion'
 
 import { i18n } from './lang'
 import { VueRecaptchaPlugin } from 'vue-recaptcha'
-import App from './App.vue'
+import AppComponent from './App.vue'
 import { createHead } from '@vueuse/head'
+import { ThemeService } from '@/services/Theme.service'
+import { FactoryService } from '@/services/Factory.service'
 
 // create and start the app
-const app = createApp(App)
+const app = createApp(AppComponent)
 const appHead = createHead()
 
-app.use(appHead)
-app.use(MotionPlugin)
-app.use(i18n)
-app.use(VueRecaptchaPlugin, {
+app.use(appHead).use(MotionPlugin).use(i18n).use(VueRecaptchaPlugin, {
   v3SiteKey: '6LecXh8pAAAAAIn9FeYPNt0JCt9hRz4054CIxIeM'
 })
 
+app.provide(ThemeService.getServiceKey(), FactoryService.createService(ThemeService))
+
 app.mount('#app')

src/services/Base.service.ts

@@ -0,0 +1,17 @@
+export class BaseService<StateType = any> {
+  static key: string
+  state: StateType = {} as StateType
+
+  constructor() {
+    BaseService.key = this.constructor.name
+    this.setServiceState({})
+  }
+
+  static getServiceKey() {
+    return BaseService.key
+  }
+
+  setServiceState(state: Partial<StateType>) {
+    this.state = { ...this.state, ...state } as StateType
+  }
+}