Minor improvements

components/Section/SectionIntro/SectionIntro.vue

@@ -21,8 +21,8 @@ function onIntroTitleIntersect(isIntersecting: boolean) {
 <style scoped lang="scss">
 .dxlliv-secton-intro__inner {
   position: absolute;
-  top: 76px;
-  bottom: 76px;
+  top: 72px;
+  bottom: 72px;
   left: 66px;
   right: 0;
 

components/Section/SectionIntro/SectionIntroMarquee.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import {Vue3Marquee} from "vue3-marquee";
+
+defineProps<{
+  text: string
+}>()
+</script>
+
+<template>
+  <Vue3Marquee :duration="96">
+    <span v-html="text" />
+  </Vue3Marquee>
+</template>

components/Section/SectionIntro/SectionIntroSkills.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="dxlliv-section-intro-skills">
+    <SectionIntroMarquee :text="$t('skills') + '&nbsp;'" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.dxlliv-section-intro-skills {
+  position: absolute;
+  bottom: -1px;
+  right: -4px;
+  max-width: 280px;
+  word-spacing: 4px;
+  transition: opacity 0.2s ease-in-out;
+  opacity: 0.4;
+
+  &:hover {
+    opacity: 0.75;
+  }
+
+  .vue3-marquee.horizontal {
+    a {
+      color: inherit;
+      margin: 0 5px;
+    }
+
+    &:before, &:after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 24px;
+      content: "";
+      z-index: 5;
+    }
+
+    &:before {
+      left: 0;
+      background: linear-gradient(to right, #ffffff, transparent);
+    }
+
+    &:after {
+      right: 0;
+      background: linear-gradient(to left, #ffffff, transparent);
+    }
+  }
+
+  @media(max-width: 769px) {
+    display: none !important;
+  }
+}
+</style>

components/Section/SectionIntro/SectionIntroSpecialization.vue

@@ -20,11 +20,9 @@ import {NuxtdotjsIcon} from 'vue3-simple-icons'
 <style scoped lang="scss">
 .dxlliv-specialization {
   position: absolute;
-  top: 14px;
-  right: 23px;
+  top: 0;
+  right: 32px;
   width: 16px;
-  border-top: 4px solid white;
-  box-shadow: 0 -6px 0 0 black, 0 -9px 0 0 white, 0 -15px 0 0 black;
   font-weight: bold;
   font-size: 21px;
   word-spacing: 2px;
@@ -34,7 +32,6 @@ import {NuxtdotjsIcon} from 'vue3-simple-icons'
   @media(min-width: 700px) {
     zoom: 1.2;
   }
-  //display: none;
 
   &__inner {
     width: 72px;

components/Section/SectionIntro/SectionIntroTitle.vue

@@ -24,7 +24,7 @@ import {Vue3Marquee} from 'vue3-marquee'
 
       <a>
         <v-icon
-            icon="mdi-at" :size="30"
+            icon="mdi-at" :size="29"
             class="mx-2 cursor-pointer"
             style="vertical-align: 1px;"
         />
@@ -37,9 +37,8 @@ import {Vue3Marquee} from 'vue3-marquee'
       </a>
     </div>
 
-    <Vue3Marquee :duration="96">
-      {{$t('skills')}}&nbsp;
-    </Vue3Marquee>
+    <SectionIntroSkills />
+
   </div>
 </template>
 
@@ -109,48 +108,6 @@ import {Vue3Marquee} from 'vue3-marquee'
       line-height: 40px;
     }
   }
-
-  .vue3-marquee.horizontal {
-    position: absolute;
-    bottom: -1px;
-    right: -4px;
-    max-width: 280px;
-    word-spacing: 4px;
-    transition: opacity 0.2s ease-in-out;
-    opacity: 0.4;
-
-    a {
-      color: inherit;
-      margin: 0 5px;
-    }
-
-    &:hover {
-      opacity: 0.75;
-    }
-
-    &:before, &:after {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 24px;
-      content: "";
-      z-index: 5;
-    }
-
-    &:before {
-      left: 0;
-      background: linear-gradient(to right, #ffffff, transparent);
-    }
-
-    &:after {
-      right: 0;
-      background: linear-gradient(to left, #ffffff, transparent);
-    }
-
-    @media(max-width: 769px) {
-      display: none !important;
-    }
-  }
 }
 
 body.ios .dxlliv-section-intro-title h1 {

locales/index.ts

@@ -44,7 +44,7 @@ export const messages = {
                     action: "Get in touch"
                 },
                 dev: {
-                    title: "Crafting Digital Excellence",
+                    title: "Crafting Digital X-cellence",
                     description: {
                         p1: "As an independent developer<br class='hidden-sm-and-up' /> and <span class='hidden-sm-and-up'>web </span>designer,<br class='hidden-xs' /> I build modern<br class='hidden-sm-and-up' /> websites and web applications.",
                         p2: "If you need help or consultancy<br class='hidden-sm-and-up' /> for a project,<br class='hidden-xs' /> I can make a<br class='hidden-sm-and-up' /> difference. Feel free to reach me."