ADD: External Imprint

app.vue

@@ -1,13 +1,9 @@
 <style src="./Globals.css" />
 
 <template>
-  <div>
-    <Header />
-    <Intro />
-    <Skills />
-    <Customers />
-    <Services />
-  </div>
+  <section>
+    <NuxtPage />
+  </section>
 </template>
-<script setup lang="ts">
-</script>
+
+<script setup></script>

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">

pages/[...route].vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Header />
+    <Intro />
+    <Skills />
+    <Customers />
+    <Services />
+    <Footer />
+  </div>
+</template>
+
+<script setup></script>

pages/imp.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <Header :main-page="true" />
+    <section class="Imp flex-col default-gap content full">
+      <div>
+        <h3>Angaben gem&auml;&szlig; &sect; 5 TMG</h3>
+        <p>
+          Fiona Lena Toma<br/>
+          Fiona Toma aka webfussel<br/>
+          Teich&auml;ckerweg 39<br/>
+          76297 Stutensee
+        </p>
+      </div>
+
+      <div>
+        <h3>Kontakt</h3>
+        <p>
+          Telefon: 017631640961<br/>
+          E-Mail: fiona@webfussel.de
+        </p>
+      </div>
+
+      <div>
+        <h3>Umsatzsteuer-ID</h3>
+        <p>
+          Umsatzsteuer-Identifikationsnummer gem&auml;&szlig; &sect; 27 a Umsatzsteuergesetz:<br/>
+          DE348500161
+        </p>
+      </div>
+
+      <div>
+        <h3>Angaben zur Berufs&shy;haftpflicht&shy;versicherung</h3>
+        <p>
+          <strong>Name und Sitz des Versicherers:</strong><br/>
+          Hiscox SA<br/>
+          Arnulfstr. 31<br/>
+          80636 M&uuml;nchen
+        </p>
+        <p>
+          <strong>Geltungsraum der Versicherung:</strong><br/>
+          Bundesrepublik Deutschland
+        </p>
+      </div>
+
+      <div>
+        <h3>Redaktionell verantwortlich</h3>
+        <p>Fiona Lena Toma</p>
+      </div>
+
+      <div>
+        <h3>Verbraucher&shy;streit&shy;beilegung / Universal&shy;schlichtungs&shy;stelle</h3>
+        <p>
+          Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer
+          Verbraucherschlichtungsstelle teilzunehmen.
+        </p>
+      </div>
+
+      <p>Quelle: <a href="https://www.e-recht24.de">e-recht24.de</a></p>
+    </section>
+    <Footer :main-page="true" />
+  </div>
+</template>