ADD: External Imprint

components/Footer/Footer.css

@@ -0,0 +1,8 @@
+.Footer {
+    align-items: center;
+    padding: 1rem 15vw;
+
+    & .sitemap {
+        align-items: center;
+    }
+}

components/Footer/Footer.vue

@@ -0,0 +1,22 @@
+<style scoped src="./Footer.css"/>
+
+<template>
+  <footer class="Footer flex-col default-gap">
+      <ul class="sitemap default-gap">
+        <li><a :href="`${mainPage ? '/' : ''}#intro`">Über mich</a></li>
+        <li><a :href="`${mainPage ? '/' : ''}#skills`">Meine Expertise</a></li>
+        <li><a :href="`${mainPage ? '/' : ''}#customers`">Kunden & Projekte</a></li>
+        <li><a :href="`${mainPage ? '/' : ''}#services`">Services</a></li>
+        <li><a :href="`${mainPage ? '/' : ''}#network`">Mein Netzwerk</a></li>
+        <li><a href="/imp">Impressum</a></li>
+      </ul>
+  </footer>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  mainPage ?: boolean
+}
+
+defineProps<Props>()
+</script>

components/Header/Header.vue

@@ -49,6 +49,12 @@
 import LinkedInIcon from 'iconoir/icons/regular/linkedin.svg'
 import MastodonIcon from 'iconoir/icons/regular/mastodon.svg'
 
+type Props = {
+  mainPage ?: boolean
+}
+
+const { mainPage } = defineProps<Props>()
+
 let observer: IntersectionObserver
 const header = ref<HTMLElement | null>(null)
 const headerWrapper = ref<HTMLElement | null>(null)
@@ -61,15 +67,15 @@ const burgerLabel = computed(() => isBurgerOpen.value ? burgerCloseLabel : burge
 
 const nav = [
   {
-    href: '#intro',
+    href: `${mainPage ? '/' : ''}#intro`,
     label: 'Über mich',
     'aria-label': 'Link dieser Seite: About'
   }, {
-    href: '#customers',
+    href: `${mainPage ? '/' : ''}#customers`,
     label: 'Kunden',
     'aria-label': 'Link dieser Seite: Kunden'
   }, {
-    href: '#services',
+    href: `${mainPage ? '/' : ''}#services`,
     label: 'Services',
     'aria-label': 'Link dieser Seite: Services'
   }

components/Person/Person.vue

@@ -8,7 +8,7 @@
       <span v-for="tag in tags">{{tag}}</span>
     </p>
     <p>{{flavour}}</p>
-    <Button :href="link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" />
+    <Button :href="link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" :aria-label="`Externer Link zur Homepage von ${name}`" />
   </article>
 </template>
 

components/Services/Services.vue

@@ -14,7 +14,7 @@
         </h3>
         <span class="chip">{{service.availability}}</span>
         <p>{{service.smallClaim}}</p>
-        <Button :href="service.link" class="cta" :label="service.button" />
+        <Button :href="service.link" class="cta" :label="service.button" aria-label="Zur externen Seite von zur Terminbuchung" />
         <ul class="flex-col">
           <li v-for="point in service.list">
             <img class="color-icon" :src="check" aria-hidden="true" alt="checkmark icon" />
@@ -23,7 +23,7 @@
         </ul>
       </article>
     </div>
-    <h3 class="margin-top-big">Mein Netzwerk</h3>
+    <h3 id="network" class="margin-top-big">Mein Netzwerk</h3>
     <p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge!
       Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen.
     </p>

components/Skills/Skills.vue

@@ -1,7 +1,7 @@
 <style scoped src="./Skills.css"/>
 
 <template>
-  <section class="Skills content">
+  <section id="skills" class="Skills content">
     <h2>Meine Expertise.</h2>
     <h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
     <div class="skill-list margin-top default-gap">