made linting functional

Kahera · Dec 14, 2023 · b64aa3d · b64aa3d
1 parent 0d0f8b2
commit b64aa3d
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 84 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -14,53 +14,88 @@ const isDev = import.meta.env.DEV;
 
 <template>
   <!-- Under construction indicator for deployed version -->
-  <p v-if="!isDev" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-45
-  text-center text-danger opacity-90 font-bold text-6xl pointer-events-none">
+  <p
+    v-if="!isDev"
+    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-45
+  text-center text-danger opacity-90 font-bold text-6xl pointer-events-none"
+  >
     {{ $t('warnings.underConstruction') }}
   </p>
 
   <header class="flex items-center space-x-4 md:space-x-8 mx-4 md:mx-6 my-2 md:my-4">
     <!-- Logo home-link -->
-    <RouterLink to="/" class="flex sm:space-x-4 md:space-x-6 max-md:grow">
-      <img alt="{{ $t('common.JuneIcon') }}" src="@/assets/images/Kahera.webp" class="max-h-12 max-sm:hidden" />
+    <RouterLink
+      to="/"
+      class="flex sm:space-x-4 md:space-x-6 max-md:grow"
+    >
+      <img
+        alt="{{ $t('common.JuneIcon') }}"
+        src="@/assets/images/Kahera.webp"
+        class="max-h-12 max-sm:hidden"
+      >
       <h1 class="font-display font-bold text-center my-auto text-2xl sm:text-4xl text-primary dark:text-primary">
         {{ $t('common.JuneHansen') }}
       </h1>
     </RouterLink>
 
     <nav class="flex justify-center max-md:order-last md:grow">
       <!-- Dropdown on small screens, link list on larger -->
-      <Dropdown class="md:hidden focus:outline-1 focus:outline-primary-light" :position="'right'" :button-type="'solid'"
-        :links="$router.getRoutes()" />
+      <Dropdown
+        class="md:hidden focus:outline-1 focus:outline-primary-light"
+        :position="'right'"
+        :button-type="'solid'"
+        :links="$router.getRoutes()"
+      />
       <div class="max-md:hidden mx-auto space-x-6">
-        <RouterLink v-for="route in $router.getRoutes().filter(x => x.name != 'home')" :key="route.path" :to="route.path"
-          class="dark:text-primary-light text-primary-darker">
+        <RouterLink
+          v-for="route in $router.getRoutes().filter(x => x.name != 'home')"
+          :key="route.path"
+          :to="route.path"
+          class="dark:text-primary-light text-primary-darker"
+        >
           {{ $t('pages.' + route.name?.toString()) }}
         </RouterLink>
       </div>
     </nav>
 
     <div class="relative">
-      <label for="locale"
-        class="absolute text-sm -top-2 bg-primary-lightest dark:bg-accent-darkest left-3 px-1 transition-transform duration-200">
+      <label
+        for="locale"
+        class="absolute text-sm -top-2 bg-primary-lightest dark:bg-accent-darkest left-3 px-1 transition-transform duration-200"
+      >
         {{ $t('locale.select') }}
       </label>
       <!-- class="h-12 px-2 rounded-lg bg-transparent border border-primary dark:border-primary text-primary dark:text-primary"> -->
-      <select id="locale" v-model="$i18n.locale"
-        class="block h-12 py-0 px-6 border border-1 rounded-lg border-primary bg-transparent appearance-none">
-        <option v-for="(locale, index) in $i18n.availableLocales" :data-index="index" :key="`locale-${locale}`"
-          :value="locale" class="bg-primary-lightest dark:bg-accent-dark">
+      <select
+        id="locale"
+        v-model="$i18n.locale"
+        class="block h-12 py-0 px-6 border border-1 rounded-lg border-primary bg-transparent appearance-none"
+      >
+        <option
+          v-for="(locale, index) in $i18n.availableLocales"
+          :key="`locale-${locale}`"
+          :data-index="index"
+          :value="locale"
+          class="bg-primary-lightest dark:bg-accent-dark"
+        >
           {{ $t('locale.' + locale) }}
         </option>
       </select>
     </div>
-    <Button @click=" darkModeStore.toggle()" :icon-position="'right'" :type="'outline'" :size="'lg'"
-      class="focus:outline-1 focus:outline-primary-light">
-      <template #icon> {{ darkModeStore.darkMode ? 'light_mode' : 'dark_mode' }}</template>
+    <Button
+      :icon-position="'right'"
+      :type="'outline'"
+      :size="'lg'"
+      class="focus:outline-1 focus:outline-primary-light"
+      @click=" darkModeStore.toggle()"
+    >
+      <template #icon>
+        {{ darkModeStore.darkMode ? 'light_mode' : 'dark_mode' }} 
+      </template>
     </Button>
   </header>
 
-  <!-- Main page content -->
+  <!-- Main page content -->  
   <main class="mx-auto w-4/5 mt-6 lg:mt-20">
     <RouterView />
   </main>

diff --git a/src/components/ButtonComponent.vue b/src/components/ButtonComponent.vue
@@ -161,7 +161,7 @@ const buttonSize = computed(() => {
 
 const iconSize = computed(() => {
     switch (props.size) {
-        case 'sm':
+        case 'sm': 
             return 'text-xl';
         case 'md':
         case 'lg':
@@ -174,14 +174,23 @@ const iconSize = computed(() => {
 
 
 <template>
-    <button class="btn flex justify-center space-x-2"
-        :class="[{ 'flex-row-reverse space-x-reverse': iconPosition == 'right' }, background, textColor, border, buttonSize, rounded]">
-        <span v-if="$slots.icon" class="font-icon my-auto" :class="[iconSize]">
-            <slot name="icon"></slot>
-        </span>
-        <span v-if="$slots.text" class="my-auto">
-            <slot name="text"></slot>
-        </span>
-        <slot name="other"></slot>
-    </button>
+  <button
+    class="btn flex justify-center space-x-2"
+    :class="[{ 'flex-row-reverse space-x-reverse': iconPosition == 'right' }, background, textColor, border, buttonSize, rounded]"
+  >
+    <span
+      v-if="$slots.icon"
+      class="font-icon my-auto"
+      :class="[iconSize]"
+    >
+      <slot name="icon" />
+    </span>
+    <span
+      v-if="$slots.text"
+      class="my-auto"
+    >
+      <slot name="text" />
+    </span>
+    <slot name="other" />
+  </button>
 </template>
diff --git a/src/components/DropdownComponent.vue b/src/components/DropdownComponent.vue
@@ -19,7 +19,7 @@ const props = defineProps({
     buttonType: {
         type: String as PropType<'outline' | 'solid'>,
         default: 'outline'
-    }
+    } 
 });
 
 let dropdownOpen = ref(false);
@@ -63,29 +63,48 @@ function onLeave(el: any, done: any) {
 </script>
 
 <template>
-    <Button class="dropdown-btn" @click="dropdownOpen = !dropdownOpen" :type="'solid'" :size="'lg'">
-        <template #icon>menu</template>
-        <template #other>
-            <!-- Wrapper with position styling -->
-            <div class="dropdown absolute z-10 top-16 mb-2
+  <Button
+    class="dropdown-btn"
+    :type="'solid'"
+    :size="'lg'"
+    @click="dropdownOpen = !dropdownOpen"
+  >
+    <template #icon>
+      menu
+    </template>
+    <template #other>
+      <!-- Wrapper with position styling -->
+      <div
+        class="dropdown absolute z-10 top-16 mb-2
                         min-w-[12rem] leading-8
                         overflow-hidden rounded-lg"
-                :class="{ 'right-0': position == 'right', 'left-0': position == 'left' }">
-                <!-- Dropdown items (list content) -->
-                <TransitionGroup name="list" @enter="onEnter" @leave="onLeave">
-                    <a v-for="(link, index) in dropDownElements" :key="index" :href=link.path :data-index="index" class="block 
-                        bg-primary-lighter dark:bg-accent-dark">
-                        <span class="font-icon">
-                            <slot name="icon"></slot>
-                        </span>
-                        <span class="text-primary-darker dark:text-primary-light">
-                            {{ $t('pages.' + link.name?.toString()) }}
-                        </span>
-                    </a>
-                </TransitionGroup>
-            </div>
-        </template>
-    </Button>
+        :class="{ 'right-0': position == 'right', 'left-0': position == 'left' }"
+      >
+        <!-- Dropdown items (list content) -->
+        <TransitionGroup
+          name="list"
+          @enter="onEnter"
+          @leave="onLeave"
+        >
+          <a
+            v-for="(link, index) in dropDownElements"
+            :key="index"
+            :href="link.path"
+            :data-index="index"
+            class="block 
+                        bg-primary-lighter dark:bg-accent-dark"
+          >
+            <span class="font-icon">
+              <slot name="icon" />
+            </span>
+            <span class="text-primary-darker dark:text-primary-light">
+              {{ $t('pages.' + link.name?.toString()) }}
+            </span>
+          </a>
+        </TransitionGroup>
+      </div>
+    </template>
+  </Button>
 </template>
 
 
diff --git a/src/components/view-experience/CVItem.vue b/src/components/view-experience/CVItem.vue
@@ -5,47 +5,58 @@ defineProps({
         required: true,
     },
     endDate: {
-        type: Date
+        type: Date,
+        default: null
     },
     company: {
         type: String,
         required: true,
     },
-    url: {
+    url: { 
         type: String,
-        required: false
+        required: false, 
+        default: null
     },
     position: {
-        type: String,
+        type: String, 
         required: true,
     }
 });
 </script>
 
 
 <template>
-    <li class="bg-primary-lighter/90 dark:bg-accent-darker/30 
-            rounded-lg overflow-hidden">
-        <div class="flex justify-between mb-2 m-6">
-            <!-- Position/company -->
-            <div class="justify-between">
-                <p class="font-bold">{{ position }}</p>
-                <a :href="url" target="_blank" rel="noopener" tabindex="-1">
-                    <p class="italic opacity-80">{{ company }}</p>
-                </a>
-            </div>
+  <li
+    class="bg-primary-lighter/90 dark:bg-accent-darker/30 
+            rounded-lg overflow-hidden"
+  >
+    <div class="flex justify-between mb-2 m-6">
+      <!-- Position/company -->
+      <div class="justify-between">
+        <p class="font-bold">
+          {{ position }}
+        </p>
+        <a
+          :href="url"
+          target="_blank"
+          rel="noopener"
+          tabindex="-1"
+        >
+          <p class="italic opacity-80">{{ company }}</p>
+        </a>
+      </div>
 
-            <!-- Date(s) -->
-            <p class="text-right">
-                {{ $d(startDate, 'month') }} — {{ endDate ? $d(endDate, 'month') : $t('resume.present') }}
-            </p>
-        </div>
+      <!-- Date(s) -->
+      <p class="text-right">
+        {{ $d(startDate, 'month') }} — {{ endDate ? $d(endDate, 'month') : $t('resume.present') }}
+      </p>
+    </div>
 
-        <!-- Description -->
-        <p class="m-6 mt-0">
-            <slot name="description"></slot>
-        </p>
-    </li>
+    <!-- Description -->
+    <p class="m-6 mt-0">
+      <slot name="description" />
+    </p>
+  </li>
 </template>
 
 <style scoped></style>
diff --git a/src/components/view-experience/ListItem.vue b/src/components/view-experience/ListItem.vue
@@ -3,18 +3,19 @@
     <div class="flex space-x-4 mb-4 text-secondary-darker">
       <!-- Icon -->
       <span class="font-icon filled text-4xl">
-        <slot name="icon"></slot>
+        <slot name="icon" />
       </span>
 
       <!-- Heading -->
       <h2 class="my-auto font-display font-bold text-2xl">
-        <slot name="heading"></slot>
+        <slot name="heading" />
       </h2>
     </div>
 
     <!-- Additional -->
     <div>
-      <slot></slot>
+      <slot />
     </div>
   </section>
 </template>
+
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -131,7 +131,7 @@
             "At the heart of my professional journey is the art of crafting intuitive and accessible solutions. Whether it be a user-friendly frontend application with inclusive and accessible features, or a robust internal API offering a seamless developer experience, I thrive on creating meaningful solutions.",
             "Currently, my days are filled with the exciting challenges of front-end development using Angular and Vue, as well as resilient .NET backends. Embracing the cloud, I find myself in the azure skies of Azure, shaping scalable and efficient solutions. My toolkit also includes experience with various CI/CD solutions, lately with GitHub Actions as my current platform for automating processes such as testing, linting and deployments. No matter what challenge comes my way, I revel in finding robust solutions and relish the accompanying learning experience.",
             "Academically, I hold dual bachelor's degrees—one in Programming and another in Administration and Management. With fluency in both Norwegian and English, a solid understanding of the other Nordic languages, and some grasp of German, I possess a diverse set of skills and insights that provides me with a holistic perspective, allowing me to seamlessly bridge the gap between technology and business.",
-            "When I have time off, I switch gears to more hands-on creativity. I’m a maker at heart, and love messing with both electronics, IoT projects and smart home solutions (where coding comes in handy!). In addition, I love 3D printing, sewing, woodworking, or doing house renovations. And when my energy stores runs out, I love sitting down with a good book. I believe maintaining a balance between using both hands and mind, fosters creativity in both realms."
+            "When I have time off, I switch gears to more hands-on creativity. I'm a maker at heart, and love messing with both electronics, IoT projects and smart home solutions (where coding comes in handy!). In addition, I love 3D printing, sewing, woodworking, or doing house renovations. And when my energy stores runs out, I love sitting down with a good book or enjoy a video game. I believe maintaining a balance between using both hands and mind, fosters creativity in both realms."
         ]
     }
 }
diff --git a/src/i18n/no.json b/src/i18n/no.json
@@ -131,7 +131,7 @@
             "Kjernen av min yrkesreise er å skape intuitive og tilgjengelige løsninger. Enten det dreier seg om en brukervennlig frontend-applikasjon med inklusivt design, eller et solid internt API som gir en smidig utvikleropplevelse. Jeg er glad i å utvikle solide og meningsfylte løsninger.",
             "For tiden brukes dagene mine på spennende utfordringer innen frontend-utvikling hvor jeg bruker Angular og Vue, samt backend-utvikling hvor jeg bygger robuste .NET-backender. I skyverden bruker jeg Azure, hvor jeg skaper skalerbare og effektive løsninger. I verktøybeltet mitt har jeg i tillegg ulike CI/CD-verktøy, med GitHub Actions som nåværende hovedverktøy for å automatisere prosesser som testing, linting og deployments. Uansett hvilken utfordring som dukker opp, er jeg glad i veien til å finne gode løsninger, og digger læringen som følger med.",
             "Akademisk sett har jeg to bachelorgrader - en i programmering og en i administrasjon og ledelse. Dette, samt flytende engelsk og norsk, god forståelse for de andre nordiske språkene, og forståelse for tysk, har gitt meg et mangfoldig sett med ferdigheter og innsiketer, som gir meg et helhetlig perspektiv og lar meg gjøre sømløs brobygging mellom den teknologiske og den forretningsmessige verdenen.",
-            "På fritiden skifter jeg modus til mer praktisk krativitet. Jeg er en \"maker\", og elsker å eksprimentere med elektronikk, IoT og smarthjemløsninger (hvor koding kommer til nytte!). Jeg er også stor fan av 3D-printing, å søm, trearbeid og oppussing. Og når jeg går tom for energi, setter jeg meg gjerne med en god bok. Jeg tenker at å ha en balanse mellom å bruke både hendene og hodet fremmer kreativitet på begge områder."
+            "På fritiden skifter jeg modus til mer praktisk krativitet. Jeg er en \"maker\", og elsker å eksprimentere med elektronikk, IoT og smarthjemløsninger (hvor koding kommer til nytte!). Jeg er også stor fan av 3D-printing, å søm, trearbeid og oppussing. Og når jeg går tom for energi, setter jeg meg gjerne med en god bok eller et dataspill. Jeg tenker at å ha en balanse mellom å bruke både hendene og hodet fremmer kreativitet på begge områder."
         ]
     }
 }
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
@@ -18,10 +18,13 @@ function updateData() {
 
 </script>
 
-<template>
+<template> 
   <div class="space-y-4">
     <h2>{{ $t('about.heading') }}</h2>
-    <div v-for="(item, index) in aboutStrings" :key="index">
+    <div
+      v-for="(item, index) in aboutStrings"
+      :key="index"
+    >
       <p>{{ item }}</p>
     </div>
   </div>

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -3,8 +3,13 @@
 
 <template>
   <div class="flex w-full h-full justify-between">
-    <RouterLink v-for="route in $router.getRoutes()" :key="route.path" :to="route.path">
+    <RouterLink
+      v-for="route in $router.getRoutes()"
+      :key="route.path"
+      :to="route.path"
+    >
       {{ $t('pages.' + route.name?.toString()) }}
     </RouterLink>
   </div>
 </template> 
+
diff --git a/src/views/ResumeView.vue b/src/views/ResumeView.vue
@@ -18,7 +18,7 @@ import type { IEmployment } from '@/models/IEmployment';
 import type { IEducation } from '@/models/IEducation';
 import type { IResumeItem } from '@/models/IResumeItem';
 
-// i18n
+// i18n 
 import { useI18n } from "vue-i18n";
 const i18n = useI18n();