Update README.md

.prettierignore

@@ -1,96 +0,0 @@
-###
-# Place your Prettier ignore content here
-
-###
-# .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506
-
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-/logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# Nuxt generate
-dist
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
-
-# Service worker
-sw.*
-
-# macOS
-.DS_Store
-
-# Vim swap files
-*.swp

.prettierrc

@@ -1,4 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true
-}

README.md

@@ -1,3 +1,8 @@
-# mave.dev
+# Personal Portfolio v1
 
-My personal website/portfolio. Built with [Nuxt](https://nuxt.com) and [Vuetify](https://vuetifyjs.com). Hosted with [GitHub Pages](https://pages.github.com/).
+My first personal website/portfolio. Built with [Nuxt](https://nuxt.com) and [Vuetify](https://vuetifyjs.com). Hosted with [GitHub Pages](https://pages.github.com/).
+
+## Newer Iterations
+
+- [v3](https://github.com/Rakantor/personal-portfolio-v3)
+- [v2](https://github.com/Rakantor/personal-portfolio-v2)

assets/variables.scss

@@ -33,6 +33,17 @@ p a {
     }
 }
 
+.page-content {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.v-overlay__scrim {
+    background: rgb(var(--v-theme-background)) !important;
+    opacity: 0.9 !important;
+}
+
 .link {
     color: inherit;
     text-decoration: none;
@@ -42,3 +53,26 @@ p a {
         color: rgb(var(--v-theme-primary));
     }
 }
+
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.2s;
+}
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translate(50px, 0);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(50px, 0);
+}

components/ImageCarousel.vue

@@ -1,13 +1,21 @@
 <template>
-  <v-dialog v-model="show" class="d-flex align-center justify-center">
+  <v-dialog v-model="show">
+    <v-btn
+      position="absolute"
+      location="top right"
+      icon="mdi-close"
+      @click.prevent="show = false"
+      style="z-index: 5000;"
+    ></v-btn>
     <v-carousel
       :model-value="index"
       :show-arrows="images.length > 1"
-      hide-delimiters
+      class="ma-auto"
+      height="90vh"
     >
       <v-carousel-item v-for="image of images" :key="image"
         :src="image"
-        class="ma-auto"
+        class="img-height"
       ></v-carousel-item>
     </v-carousel>
   </v-dialog>
@@ -23,3 +31,11 @@ export default {
   })
 }
 </script>
+
+<style scoped lang="scss">
+  @use 'vuetify/settings';
+
+  .img-height {
+    height: calc(90vh - settings.$carousel-controls-size);
+  }
+</style>

components/ProjectCard.vue

@@ -0,0 +1,209 @@
+<template>
+  <ImageCarousel ref="imageCarousel" />
+
+  <!-- HORIZONTAL VIEW CARD -->
+  <v-card v-if="view === 'horizontal' && $vuetify.display.smAndUp" class="page-content">
+    <div class="d-flex flex-no-wrap justify-space-between">
+      <v-card-text class="my-auto">
+        <v-avatar size="200" rounded="lg">
+          <v-carousel
+            v-model="carouselIndex"
+            :show-arrows="images.length > 1 ? 'hover' : false"
+            hide-delimiters
+            width="200"
+            height="200"
+          >
+            <v-carousel-item v-for="image of images" :key="image"
+              :src="`https://${$config.public.cdn}${image}`"
+              cover
+              @click="showImageCarousel"
+            ></v-carousel-item>
+          </v-carousel>
+        </v-avatar>
+      </v-card-text>
+      <div class="d-flex flex-column" style="width: 100%;">
+        <v-card-item>
+          <span v-if="overline" class="text-overline text-primary">{{ $t(overline) }}</span>
+          <v-card-title class="d-flex font-weight-bold">
+            <span v-if="links.length > 0">
+              <a :href="`https://${links[0].url}`" target="_blank" class="link">
+                {{ title }}
+              </a>
+            </span>
+            <span v-else>{{ title }}</span>
+            <v-spacer></v-spacer>
+            <v-btn
+              v-for="link in [...links].reverse()" :key="link.url"
+              variant="text"
+              :icon="link.icon"
+              density="comfortable"
+              color="on-surface"
+              :href="`https://${link.url}`"
+              target="_blank"
+              class="link"
+            />
+          </v-card-title>
+          <v-card-subtitle>{{ subtitle }}</v-card-subtitle>
+        </v-card-item>
+        <v-card-text>{{ $t(description) }}</v-card-text>
+        <v-spacer></v-spacer>
+        <v-card-actions class="d-flex flex-row flex-wrap justify-left align-center">
+          <img v-for="t of tech" :key="technologies[t].title"
+            :src="generateBadgen(technologies[t].title, technologies[t].icon)"
+            :height="20"
+            class="ma-1"
+          />
+        </v-card-actions>
+      </div>
+    </div>
+  </v-card>
+
+  <!-- VERTICAL VIEW CARD -->
+  <v-card v-else height="100%" class="d-flex flex-column">
+    <v-carousel
+      v-model="carouselIndex"
+      :show-arrows="images.length > 1 ? 'hover' : false"
+      :hide-delimiters="images.length <= 1"
+      height="auto"
+    >
+      <v-carousel-item v-for="image of images" :key="image"
+        :src="`https://${$config.public.cdn}${image}`"
+        @click="showImageCarousel"
+      ></v-carousel-item>
+    </v-carousel>
+    <v-card-item>
+      <span v-if="overline" class="text-overline text-primary">{{ $t(overline) }}</span>
+      <v-card-title class="d-flex font-weight-bold">
+        <span v-if="links.length > 0">
+          <a :href="`https://${links[0].url}`" target="_blank" class="link">
+            {{ title }}
+          </a>
+        </span>
+        <span v-else>{{ title }}</span>
+        <v-spacer></v-spacer>
+        <v-btn
+          v-for="link in [...links].reverse()" :key="link.url"
+          variant="text"
+          :icon="link.icon"
+          density="comfortable"
+          color="on-surface"
+          :href="`https://${link.url}`"
+          target="_blank"
+          class="link"
+        />
+      </v-card-title>
+      <v-card-subtitle>{{ subtitle }}</v-card-subtitle>
+    </v-card-item>
+    <v-card-text>{{ $t(description) }}</v-card-text>
+    <v-spacer></v-spacer>
+    <v-card-actions class="d-flex flex-row flex-wrap justify-center align-center">
+      <img v-for="t of tech" :key="technologies[t].title"
+        :src="generateBadgen(technologies[t].title, technologies[t].icon)"
+        :height="20"
+        class="ma-1"
+      />
+
+      <!-- colored badges
+      <img v-for="t of tech" :key="technologies[t].title"
+        :src="`https://badgen.net/badge/icon/${technologies[t].title}?icon=${technologies[t].icon}${technologies[t].color}&label`"
+        :height="20"
+        class="ma-1"
+      />
+      -->
+
+      <!-- colored badges w/ links to brand websites
+      <a v-for="t of tech" :key="technologies[t].title"
+        :href="`https://${technologies[t].projectUrl}`"
+        target="_blank"
+      >
+        <img v-for="t of tech" :key="technologies[t].title"
+          :src="`https://badgen.net/badge/icon/${technologies[t].title}?icon=${technologies[t].icon}${technologies[t].color}&label`"
+          :height="20"
+          class="ma-1"
+        />
+      </a>
+      -->
+
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import { badgen } from 'badgen'
+import { siAndroid, siAmazonaws, siMicrosoftazure, siFirebase, siGithub,
+  siHeroku, siCoffeescript, siYoutubegaming, siMysql, siNuxtdotjs, siPhp,
+  siJavascript, siVuedotjs, siVuetify, siIbmwatson, siWordpress, siTypescript } from 'simple-icons'
+
+export default {
+  name: 'PortfolioPage',
+  props: {
+    view: {
+      type: String,
+      required: true
+    },
+    title: String,
+    subtitle: String,
+    description: String,
+    overline: String,
+    tech: {
+      type: Array,
+      default: []
+    },
+    images: {
+      type: Array,
+      default: []
+    },
+    links: {
+      type: Array,
+      default: []
+    }
+  },
+  data: () => ({
+    technologies: {
+      android: { title: 'Android', color: '3DDC84', icon: siAndroid },
+      aws: { title: 'AWS', color: '232F3E', icon: siAmazonaws },
+      azure: { title: 'Azure', color: '0078D4', icon: siMicrosoftazure },
+      firebase: { title: 'Firebase', color: 'FFCA28', icon: siFirebase },
+      ghpages: { title: 'GH Pages', color: '222222', icon: siGithub },
+      heroku: { title: 'Heroku', color: '430098', icon: siHeroku },
+      java: { title: 'Java', color: 'FF7800', icon: siCoffeescript },
+      js: { title: 'JavaScript', color: 'F7DF1E', icon: siJavascript },
+      libgdx: { title: 'libGDX', color: '990000', icon: siYoutubegaming },
+      mysql: { title: 'MySQL', color: '4479A1', icon: siMysql },
+      nuxt: { title: 'Nuxt', color: '00DC82', icon: siNuxtdotjs },
+      php: { title: 'PHP', color: '777BB4', icon: siPhp },
+      ts: { title: 'TypeScript', color: '3178C6', icon: siTypescript },
+      vue: { title: 'Vue', color: '4FC08D', icon: siVuedotjs },
+      vuetify: { title: 'Vuetify', color: '1867C0', icon: siVuetify },
+      watson: { title: 'Watson', color: 'BE95FF', icon: siIbmwatson },
+      wordpress: { title: 'WordPress', color: '21759B', icon: siWordpress }
+    },
+    carouselIndex: []
+  }),
+  methods: {
+    /*
+     * https://github.com/badgen/badgen
+     */
+    generateBadgen (label, icon) {
+      // const iconColor = icon.hex
+      const iconColor = 'FFFFFF' // white
+      const iconSvg = icon.svg.replace('<path ', `<path fill="#${iconColor}" `) // Change SVG icon color
+      const svg = badgen({
+        label: '',
+        status: label,
+        // color: iconColor,
+        color: this.$vuetify.theme.current.colors.backgroundTertiary.slice(1), // Remove leading '#' from hex string
+        style: 'classic', // Can be 'classic' or 'flat'
+        icon: `data:image/svg+xml;utf8,${encodeURIComponent(iconSvg)}`
+      })
+
+      return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
+    },
+    showImageCarousel () {
+      this.$refs.imageCarousel.images = this.images.map(i => `https://${this.$config.public.cdn+i}`)
+      this.$refs.imageCarousel.index = this.carouselIndex
+      this.$refs.imageCarousel.show = true
+    }
+  }
+}
+</script>

i18n.config.ts

@@ -1,42 +1,119 @@
-export default defineI18nConfig(nuxt => ({
+export default defineI18nConfig(() => ({
   legacy: false,
   locale: 'en',
   messages: {
     en: {
+      bi: 'BI', // Business Informatics
+      bioBody: 'My passion for programming ignited in 2007, as I delved into SQL in an attempt to set up\
+        a private server for my favorite {mmorpg} - a venture that proved successful.\
+        Eager to dive deeper into the world of coding, I attended a {htl}\
+        specializing in IT in 2009, where I learned the basics of C, Java, HTML and CSS.\
+        Some years later, I took my passion further by heading to university, where I got my degree in {bi},\
+        specializing in web and mobile app development.\
+        Over the past {yearsOfExp} years, self-study and hands-on experience with personal projects\
+        have been the cornerstone of my learning journey.',
+      bioTitle: 'My Journey as a Developer',
+      bioSubtitle: 'Here\'s some of the tech that I\'ve worked with before:',
+      getInTouch: 'Get in touch',
       greeting: 'Hey. I\'m Manuel.',
-      iuGamerApp: `An Android app designed to help a group of board game enthusiasts\
+      headerAbout: 'About',
+      headerContact: 'Contact',
+      headerHome: 'Home',
+      headerWork: 'Projects',
+      introduction: 'I\'m a Software Developer from Vienna, Austria.\
+        I have a passion for crafting a wide range of applications.\
+        Feel free to explore my {portfolio} to see some of my projects.',
+      imprint: 'Imprint',
+      iuGamerApp: 'An Android app designed to help a group of board game enthusiasts\
         better organize their regular evening game sessions.\
         Users will be reliably informed about the time and location of the next appointment.\
         They can suggest games, vote on suggested games, rate past appointments,\
-        and communicate with each other via an integrated chat feature.`,
-      iuQuizApp: 'An online quiz system that supports distance learning students at IU in solidifying their learning content in preparation for the exam. It enables students to cooperatively and collaboratively find answers to subject-related questions. The focus is particularly on working together and playing/learning together. Similar to the popular app Quizduel, students can, but do not have to, play against each other.',
+        and communicate with each other via an integrated chat feature.',
+      iuQuizApp: 'An online quiz system that supports distance learning students at IU\
+        in solidifying their learning content in preparation for the exam.\
+        It enables students to cooperatively and collaboratively find answers to subject-related questions.\
+        The focus is particularly on working together and playing/learning together.\
+        Similar to the popular app Quizduel, students can, but do not have to, play against each other.',
+      lang: 'Languages',
+      languagesFrameworks: 'Languages, Frameworks & Libraries',
+      os: 'Operating Systems',
       personalWebsite: 'My first portfolio website.',
-      pmb: 'A 2D game inspired by the 2000s Pokémon games. Built from scratch! Features include animated battles (online multiplayer), overworld sprites, custom maps built with Tiled, game sound, 3 difficulty levels and so much more.',
-      toriiJava: 'A Japanese vocabulary learning tool that harnesses the power of spaced repetition to make memorizing new words a breeze.',
-      toriiWeb: `Version 2 of my Japanese vocabulary learning tool brings significant enhancements\
-        over its predecessor. New features include offline functionality (thanks to utilizing IndexedDB),\
-        an integrated dictionary for single-click word addition,\
-        additional review methods for learned words,\
-        a review forecast chart for planning study sessions,\
-        and improved word search and statistics for better user insights.`
+      pmb: 'A 2D game inspired by the 2000s Pokémon games. Built from scratch!\
+        Features include animated NPCs, objects and battles (including online multiplayer),\
+        custom maps built in Tiled, game sound, 3 difficulty levels and so much more.',
+      portfolio: 'portfolio',
+      portfolioTitle: 'Featured Projects',
+      toolsPlatforms: 'Technologies & Tools',
+      toriiInfo: '25,000+ registered users!',
+      toriiJava: 'A Japanese vocabulary learning tool that harnesses the power of spaced repetition\
+        to make memorizing new words a breeze. It combines a straightforward interface with robust features.\
+        Designed for both casual learners and those preparing for the Japanese Language Proficiency Test (JLPT),\
+        Torii offers specialized vocabulary lists and review methods.\
+        Key features include audio reviews, font randomization, progress tracking,\
+        and automatic cloud synchronization.',
+      toriiWeb: 'Version 2 of my Japanese vocabulary learning tool introduces significant enhancements.\
+        Offline functionality is now available (through the utilization of IndexedDB).\
+        The web app features an integrated dictionary for efficient word addition,\
+        expanded review methods for enhancing vocabulary retention,\
+        a review forecast chart for effective study session planning,\
+        and enhancements to the word search and statistics functions for improved user insights.'
     },
     de: {
+      bi: 'WI', // Wirtschaftsinformatik
+      bioBody: 'Den Einstieg in die Programmierung habe ich 2007 gemacht, als ich mich mit SQL beschäftigt habe,\
+        in dem Versuch, einen Privatserver für mein Lieblings-{mmorpg} aufzusetzen - mit Erfolg.\
+        Nach dem Gymnasium habe ich mich 2009 dazu entschlossen, eine auf IT spezialisierte {htl} zu besuchen,\
+        wo ich die Grundlagen in C, Java, HTML and CSS gelernt habe.\
+        Ein paar Jahre später habe ich {bi} studiert - Wahlpflichtfächer Web- und Mobile-App-Development.\
+        Den Großteil meines Wissens habe ich mir im Zuge persönlicher Projekte in den letzten {yearsOfExp} Jahren\
+        autodidaktisch angeeignet.',
+      bioTitle: 'Mein Werdegang als Developer',
+      bioSubtitle: 'Einige der Technologien, mit denen ich gearbeitet habe:',
+      getInTouch: 'Kontaktieren',
       greeting: 'Hey. Ich bin Manuel.',
+      headerAbout: 'Über mich',
+      headerContact: 'Kontakt',
+      headerHome: 'Home',
+      headerWork: 'Projekte',
+      introduction: 'Ich bin ein Software Developer aus Wien, Österreich.\
+        Ich entwickle ganz unterschiedliche Applikationen.\
+        Die wichtigsten Projekte habe ich in meinem {portfolio} aufgelistet.',
+      imprint: 'Impressum',
       iuGamerApp: `Eine Android App, die einer Gruppe von Brettspielfans dabei helfen soll,\
         ihre regelmäßigen abendlichen Spieltermine besser zu organisieren.\
         Benutzer werden zuverlässig über Zeit & Ort des nächsten Termins informiert.\
         Sie können Spiele vorschlagen und über Vorschläge abstimmen, vergangene Termine bewerten\
         und sich über einen integrierten Chat gegenseitig Nachrichten zukommen lassen.`,
-      iuQuizApp: 'Ein Online-Quizsystem, das Studierende des Fernstudiums der IU bei der Festigung der Lerninhalte zur Vorbereitung auf die Klausur unterstützt. Es ermöglicht Studierenden, kooperativ und kollaborativ Antworten zu fachlichen Fragen zu finden. Das miteinander bzw. das gemeinsame Spielen/Erarbeiten steht dabei besonders im Fokus. Ähnlich wie bei der populären App Quizduell kann, jedoch muss nicht gegeneinander gespielt werden.',
+      iuQuizApp: 'Ein Online-Quizsystem, das Fernstudenten der IU bei\
+        der Festigung der Lerninhalte zur Vorbereitung auf die Klausur unterstützt.\
+        Es ermöglicht Studierenden, kooperativ und kollaborativ Antworten zu fachlichen Fragen zu finden.\
+        Das miteinander bzw. das gemeinsame Spielen/Erarbeiten steht dabei besonders im Fokus.\
+        Ähnlich wie bei der populären App Quizduell kann, jedoch muss nicht gegeneinander gespielt werden.',
+      lang: 'Sprachen',
+      languagesFrameworks: 'Sprachen, Frameworks & Bibliotheken',
+      os: 'Betriebssysteme',
       personalWebsite: 'Meine erste Portfolio-Website.',
-      pmb: 'A 2D game inspired by the 2000s Pokémon games. Built from scratch! Features animated battles (online multiplayer), overworld sprites, custom maps, sound, 3 difficulty levels and so much more.',
-      toriiJava: 'DEU',
-      toriiWeb: `Version 2 meiner Vokabeltrainer-App bringt bedeutende Verbesserungen\
-        gegenüber seinem Vorgänger. Neue Funktionen umfassen Offline-Funktionalität (dank der Nutzung von IndexedDB),\
-        ein integriertes Wörterbuch für das Hinzufügen neuer Wörter mit nur einem Klick,\
-        zusätzliche Überprüfungsmethoden für gelernte Vokabeln,\
-        ein Vorschau-Diagramm zur Planung von Lernsitzungen sowie\
-        verbesserte Wortsuche und Statistiken.`
+      pmb: 'Ein 2D Game, inspiriert von den Pokémon Game Boy Spielen der 2000er.\
+        Funktionen umfassen animierte NPCs, Objekte und Kämpfe (inklusive Online-Multiplayer),\
+        einzigartige Maps erstellt mit Tiled, Sound, 3 Schwierigkeitsstufen und jede Menge mehr.',
+      portfolio: 'Portfolio',
+      portfolioTitle: 'Ausgewählte Projekte',
+      toolsPlatforms: 'Technologien & Tools',
+      toriiInfo: '25.000+ registrierte Benutzer!',
+      toriiJava: 'Eine japanische Vokabeltrainer-App, die die Spaced Repetition Lernmethode nutzt, um\
+        den Lernprozess neuer Wörter so effektiv und effizient wie möglich zu gestalten.\
+        Die App verbindet eine simple Benutzeroberfläche mit leistungsstarken Funktionen.\
+        Torii eignet sich dank spezialisierter Vokabellisten und verschiedenen Wiederholungsmethoden\
+        sowohl für Casual-Learners als auch zur Vorbereitung auf den\
+        Japanese Language Proficiency Test (JLPT).\
+        Zu den wichtigsten Funktionen zählen Audio-Reviews, Font-Randomization, Progress-Tracking,\
+        und automatische Cloud-Synchronisation.',
+      toriiWeb: `Version 2 meiner Vokabeltrainer-App bietet deutliche Verbesserungen im Vergleich zur\
+        vorherigen Version. Zu den neuen Funktionen zählen die Offline-Nutzung durch Einsatz von IndexedDB,\
+        ein integriertes Wörterbuch, das das Hinzufügen neuer Wörter mit einem einzigen Klick ermöglicht,\
+        erweiterte Überprüfungsoptionen für bereits gelernte Vokabeln,\
+        ein Vorschau-Diagramm zur effektiven Planung von Lerneinheiten sowie optimierte Funktionen für\
+        die Wortsuche und Statistiken zur besseren Nachverfolgung des Lernfortschritts.`
     }
   }
 }))

layouts/default.vue

@@ -18,7 +18,7 @@
           <template v-slot:prepend>
             <v-icon :icon="page.icon"></v-icon>
           </template>
-          <v-list-item-title v-text="page.title" />
+          <v-list-item-title v-text="$t(page.title)" />
         </v-list-item>
       </v-list>
       <template #append>
@@ -28,7 +28,7 @@
             outlined
             color="primary"
             prepend-icon="mdi-email-outline"
-            :href="`mailto:<${$myEmail}>`"
+            :href="`mailto:<${$config.public.myEmail}>`"
           >
             Contact
           </v-btn>
@@ -43,20 +43,20 @@
           style="cursor: pointer"
           @click.native="$router.push('/')"
         >
-          <img src="~/assets/avatar_transparent.png" width="55" />
+          <img src="~/assets/avatar_blueish.png" width="55" />
         </v-avatar>
       </template>
-      <!-- v-app-bar-title class="text-subtitle-1" v-text="$myName" /-->
+      <!-- v-app-bar-title class="text-subtitle-1" v-text="$config.public.myName" /-->
       <v-spacer />
       <v-app-bar-nav-icon
         v-if="smAndDown"
         @click.stop="drawer = !drawer"
       />
       <v-btn-toggle v-else :model-value="0" mandatory variant="plain" selected-class="link-active">
-        <v-btn :ripple="false" to="/">Home</v-btn>
-        <v-btn :ripple="false" to="/bio">About</v-btn>
-        <v-btn :ripple="false" to="/portfolio">Work</v-btn>
-        <v-btn :ripple="false" :href="`mailto:<${$myEmail}>`">Contact</v-btn>
+        <v-btn :ripple="false" to="/">{{ $t('headerHome') }}</v-btn>
+        <v-btn :ripple="false" to="/bio">{{ $t('headerAbout') }}</v-btn>
+        <v-btn :ripple="false" to="/portfolio">{{ $t('headerWork') }}</v-btn>
+        <v-btn :ripple="false" :href="`mailto:<${$config.public.myEmail}>`">{{ $t('headerContact') }}</v-btn>
       </v-btn-toggle>
     </v-app-bar>
     <v-main>
@@ -64,14 +64,72 @@
         <slot />
       </v-container>
     </v-main>
-    <v-footer app absolute color="transparent">
-      <v-row justify="center" no-gutters>
-        <v-col cols="12" class="text-center">
-          <span class="text-caption">
-            &copy; {{ new Date().getFullYear() }} {{ $myName }}
+    <v-footer
+      app absolute
+      color="transparent"
+      style="border-top: 1px solid rgba(var(--v-theme-on-surface), 0.1);"
+    >
+      <v-container class="d-flex py-0 my-0">
+        <v-row no-gutters>
+          <v-col cols="4" class="my-auto" :class="$vuetify.display.mobile ? 'text-left' : 'text-center'">
+            <v-btn
+              variant="plain"
+              size="x-small"
+              density="compact"
+              color="on-surface"
+              :ripple="false"
+              class="link"
+              to="/imprint"
+            >
+              {{ $t('imprint') }}
+            </v-btn>
+          </v-col>
+          <v-col cols="4" class="text-center my-auto">
+            <span class="text-caption text-no-wrap">
+              &copy; {{ new Date().getFullYear() }} {{ $config.public.myName }}
             </span>
           </v-col>
+          <v-col cols="4" class="my-auto" :class="$vuetify.display.mobile ? 'text-right' : 'text-center'">
+            <v-btn
+              variant="plain"
+              icon="mdi-github"
+              density="comfortable"
+              color="on-surface"
+              :ripple="false"
+              class="link"
+              :href="projectUrl"
+              target="_blank"
+            />
+            <v-menu location="top right" :close-on-content-click="false">
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  variant="plain"
+                  icon="mdi-translate"
+                  density="comfortable"
+                  color="on-surface"
+                  :ripple="false"
+                  class="link"
+                />
+              </template>
+              <v-list nav min-width="150">
+                <v-list-subheader>{{ $t('lang').toUpperCase() }}</v-list-subheader>
+                <v-list-item
+                  v-for="locale in availableLocales"
+                  :key="locale.code"
+                  :value="locale"
+                  :active="locale.code == $i18n.locale"
+                  active-color="primary"
+                >
+                  <v-list-item-title @click="changeLocale(locale.code)">
+                    {{ locale.name }}
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-col>
         </v-row>
+      </v-container>
     </v-footer>
   </v-app>
 </template>
@@ -86,25 +144,40 @@ export default {
     return { smAndDown }
   },
   data: () => ({
-    drawer: false,
+    projectUrl: 'https://github.com/Rakantor/personal-portfolio',
+    availableLocales: [
+      { code: 'en', name: 'English' },
+      { code: 'de', name: 'Deutsch' }
+    ],
     pages: [
       {
         icon: 'mdi-home',
-        title: 'Home',
+        title: 'headerHome',
         url: '/',
       },
       {
         icon: 'mdi-text-account',
-        title: 'About',
+        title: 'headerAbout',
         url: '/bio',
       },
       {
         icon: 'mdi-briefcase',
-        title: 'Work',
+        title: 'headerWork',
         url: '/portfolio',
       }
-    ]
-  })
+    ],
+    drawer: false,
+  }),
+  methods: {
+    changeLocale (langCode) {
+      this.$i18n.setLocale(langCode)
+      localStorage.setItem('lang', langCode)
+    }
+  },
+  created () {
+    const locale = localStorage.getItem('lang') || this.$i18n.locale
+    if (locale != this.$i18n.locale) this.$i18n.setLocale(locale)
+  }
 }
 </script>
 

middleware/transition.global.ts

@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  if (typeof to.meta.pageTransition === 'object' && typeof from.meta.pageTransition === 'object') {
+    if (typeof to.meta.id !== 'number' || typeof from.meta.id !== 'number') return
+    
+    const transition = to.meta.id > from.meta.id ? 'slide-left' : 'slide-right'
+    to.meta.pageTransition.name = from.meta.pageTransition.name = transition
+  }
+})

nuxt.config.ts

@@ -2,23 +2,26 @@ import vuetify from 'vite-plugin-vuetify'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      cdn: 'd29l6egdxvgg9c.cloudfront.net/',
+      myName: 'Manuel Veigel',
+      myEmail: 'maveigel@gmail.com',
+    }
+  },
   ssr: false,
-
   css: [
     'vuetify/styles',
     '~/assets/variables.scss'
   ],
-
   vite: {
     ssr: {
       noExternal: ['vuetify'] // add the vuetify vite plugin
     }
   },
-
   build: {
     transpile: ['vuetify']
   },
-
   app: {
     head: {
       // titleTemplate: '%s | Home',
@@ -40,66 +43,19 @@ export default defineNuxtConfig({
       ],
     }
   },
-
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [],
-
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
-    [
     '@nuxtjs/i18n',
-      // { vueI18n: './i18n.config.ts' }
-      // TODO: Revert to config file once the bug in 8.0.0-beta.11 has been fixed
-      // https://github.com/nuxt-modules/i18n/issues/1990
-      { vueI18n: {
-        legacy: false,
-        locale: 'en',
-        messages: {
-          en: {
-            greeting: 'Hey. I\'m Manuel.',
-            iuGamerApp: `An Android app designed to help a group of board game enthusiasts\
-              better organize their regular evening game sessions.\
-              Users will be reliably informed about the time and location of the next appointment.\
-              They can suggest games, vote on suggested games, rate past appointments,\
-              and communicate with each other via an integrated chat feature.`,
-            iuQuizApp: 'An online quiz system that supports distance learning students at IU in solidifying their learning content in preparation for the exam. It enables students to cooperatively and collaboratively find answers to subject-related questions. The focus is particularly on working together and playing/learning together. Similar to the popular app Quizduel, students can, but do not have to, play against each other.',
-            personalWebsite: 'My first portfolio website.',
-            pmb: 'A 2D game inspired by the 2000s Pokémon games. Built from scratch! Features include animated battles (online multiplayer), overworld sprites, custom maps built with Tiled, game sound, 3 difficulty levels and so much more.',
-            toriiJava: 'A Japanese vocabulary learning tool that harnesses the power of spaced repetition to make memorizing new words a breeze.',
-            toriiWeb: `Version 2 of my Japanese vocabulary learning tool brings significant enhancements\
-              over its predecessor. New features include offline functionality (thanks to utilizing IndexedDB),\
-              an integrated dictionary for single-click word addition,\
-              additional review methods for learned words,\
-              a review forecast chart for planning study sessions,\
-              and improved word search and statistics for better user insights.`
-          },
-          de: {
-            greeting: 'Hey. Ich bin Manuel.',
-            iuGamerApp: `Eine Android App, die einer Gruppe von Brettspielfans dabei helfen soll,\
-              ihre regelmäßigen abendlichen Spieltermine besser zu organisieren.\
-              Benutzer werden zuverlässig über Zeit & Ort des nächsten Termins informiert.\
-              Sie können Spiele vorschlagen und über Vorschläge abstimmen, vergangene Termine bewerten\
-              und sich über einen integrierten Chat gegenseitig Nachrichten zukommen lassen.`,
-            iuQuizApp: 'Ein Online-Quizsystem, das Studierende des Fernstudiums der IU bei der Festigung der Lerninhalte zur Vorbereitung auf die Klausur unterstützt. Es ermöglicht Studierenden, kooperativ und kollaborativ Antworten zu fachlichen Fragen zu finden. Das miteinander bzw. das gemeinsame Spielen/Erarbeiten steht dabei besonders im Fokus. Ähnlich wie bei der populären App Quizduell kann, jedoch muss nicht gegeneinander gespielt werden.',
-            personalWebsite: 'Meine erste Portfolio-Website.',
-            pmb: 'A 2D game inspired by the 2000s Pokémon games. Built from scratch! Features animated battles (online multiplayer), overworld sprites, custom maps, sound, 3 difficulty levels and so much more.',
-            toriiJava: 'DEU',
-            toriiWeb: `Version 2 meiner Vokabeltrainer-App bringt bedeutende Verbesserungen\
-              gegenüber seinem Vorgänger. Neue Funktionen umfassen Offline-Funktionalität (dank der Nutzung von IndexedDB),\
-              ein integriertes Wörterbuch für das Hinzufügen neuer Wörter mit nur einem Klick,\
-              zusätzliche Überprüfungsmethoden für gelernte Vokabeln,\
-              ein Vorschau-Diagramm zur Planung von Lernsitzungen sowie\
-              verbesserte Wortsuche und Statistiken.`
-          }
-        }
-      } }
-    ],
-    // https://go.nuxtjs.dev/axios
-    // ['@nuxtjs/axios', { proxyHeaders: false }],
-    // this adds the vuetify vite plugin
-    // also produces type errors in the current beta release
     async (options, nuxt) => {
-      nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(vuetify()))
+      nuxt.hooks.hook('vite:extendConfig', config =>
+        // @ts-ignore
+        config.plugins.push(vuetify())
+      )
+    }
+  ],
+  i18n: {
+    vueI18n: './i18n.config.ts'
   }
-  ]
 })

package.json

@@ -2,6 +2,7 @@
   "name": "personal-portfolio",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -11,11 +12,10 @@
   },
   "devDependencies": {
     "@mdi/font": "^7.0.96",
-    "@nuxtjs/i18n": "8.0.0-beta.10",
-    "nuxt": "^3.4.0"
+    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge",
+    "nuxt": "^3.4.3"
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.13.6",
     "badgen": "^3.2.2",
     "lodash-es": "^4.17.21",
     "sass": "^1.56.0",

pages/bio.vue

@@ -1,61 +1,74 @@
 <template>
+  <div class="page-content">
     <v-row>
       <v-col cols="12">
-      <span class="text-h4 text-high-emphasis">My Journey as a Developer</span>
+        <span class="text-h5 text-md-h4 text-high-emphasis">
+          {{ $t('bioTitle') }}
+        </span>
       </v-col>
       <v-col cols="12">
         <v-sheet color="transparent" class="text-medium-emphasis">
-        <p>
-          My interest in programming was sparked in 2007 when I began tinkering with SQL
-          in an attempt to setup a private server for my favorite
-          <a :href="mmorpgWikiUrl" target="_blank">MMORPG</a>
-          (it was a success!)
-          Eager to dive deeper into the world of coding, I attended a
-          <a :href="htlWikiUrl" target="_blank">HTL</a>
-          specializing in IT in 2009, where I learned C, Java, HTML and CSS.
-          Some years later, I pursued a degree in
-          <a :href="biWikiUrl" target="_blank">BI</a>
-          with a specialization in Web and App development.
-        </p>
+          <i18n-t keypath="bioBody" tag="p">
+            <template v-slot:mmorpg>
+              <NuxtLink :href="mmorpgWikiUrl" target="_blank">MMORPG</NuxtLink>
+            </template>
+            <template v-slot:htl>
+              <NuxtLink :href="htlWikiUrl" target="_blank">HTL</NuxtLink>
+            </template>
+            <template v-slot:bi>
+              <NuxtLink :href="biWikiUrl" target="_blank">{{ $t('bi') }}</NuxtLink>
+            </template>
+            <template v-slot:yearsOfExp>
+              {{ yearsOfExp }}
+            </template>
+          </i18n-t>
           <br/>
-        <p>
-          Here's some of the tech that I've used and worked with before:
-        </p>
+          <p>{{ $t('bioSubtitle') }}</p>
         </v-sheet>
       </v-col>
       <v-col v-for="set, ind in sets" :key="ind" cols="12">
         <v-card>
           <v-card-item>
-          <v-card-title>{{ set.title }}</v-card-title>
+            <v-card-title>{{ $t(set.title) }}</v-card-title>
           </v-card-item>
           <v-card-text class="text-center">
             <v-row>
               <v-col v-for="(v, i) in set.data" :key="i" cols="12">
-              <v-tooltip v-for="(value, index) in v" :key="index" location="bottom" :text="value.title">
-                <template #activator="{ props }">
+                <v-row justify="center">
+                  <v-col cols="auto" v-for="(value, index) in v" :key="index">
                     <v-btn
                       variant="text"
-                    :icon="value.icon"
-                    :size="getButtonSize(value.level)"
+                      :size="brandIconSize(value.emphasis)"
                       color="primary"
                       class="mx-1"
                       :href="`https://${value.url}`"
                       target="_blank"
-                    v-bind="props"
                     >
-                    <v-icon :icon="value.icon" :size="getButtonSize(value.level) - 10"></v-icon>
+                      <v-icon :icon="value.icon" :size="brandIconSize(value.emphasis) - 10"></v-icon>
                     </v-btn>
-                </template>
-              </v-tooltip>
+                    <span class="text-overline text-primary d-flex flex-column ma-0 pa-0">
+                      {{ value.title }}
+                    </span>
+                  </v-col>
+                </v-row>
               </v-col>
             </v-row>
           </v-card-text>
         </v-card>
       </v-col>
     </v-row>
+  </div>
 </template>
 
 <script>
+definePageMeta({
+  id: 2,
+  pageTransition: {
+    name: 'slide',
+    mode: 'out-in'
+  }
+})
+
 import _groupBy from 'lodash-es/groupBy'
 
 export default {
@@ -65,76 +78,92 @@ export default {
     htlWikiUrl: 'https://en.wikipedia.org/wiki/H%C3%B6here_Technische_Lehranstalt',
     biWikiUrl: 'https://en.wikipedia.org/wiki/Business_informatics',
     languages: [
-      { title: 'Java', icon: 'mdi-language-java', url: 'java.com', level: 3 },
-      { title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 1 },
-      { title: 'Python', icon: 'mdi-language-python', url: 'python.org', level: 1 },
-      { title: 'JavaScript (ES6+)', icon: 'mdi-language-javascript', url: 'javascript.com', level: 3 },
-      { title: 'TypeScript', icon: 'mdi-language-typescript', url: 'typescriptlang.org/', level: 1 },
-      { title: 'HTML', icon: 'mdi-language-html5', url: 'html.spec.whatwg.org/multipage', level: 2 },
-      { title: 'CSS', icon: 'mdi-language-css3', url: 'w3.org/Style/CSS', level: 2 },
-      { title: 'PHP', icon: 'mdi-language-php', url: 'php.net', level: 2 },
-      { title: 'SQL', icon: 'mdi-database', url: 'iso.org/standard/63555.html', level: 2 },
-      { title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 }
+      { title: 'Java', icon: 'mdi-language-java', url: 'java.com', emphasis: 'high' },
+      { title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.org', emphasis: 'low' },
+      { title: 'Python', icon: 'mdi-language-python', url: 'python.org', emphasis: 'low' },
+      { title: 'JavaScript (ES6+)', icon: 'mdi-language-javascript', url: 'javascript.com', emphasis: 'high' },
+      { title: 'TypeScript', icon: 'mdi-language-typescript', url: 'typescriptlang.org/', emphasis: 'low' },
+      { title: 'HTML', icon: 'mdi-language-html5', url: 'html.spec.whatwg.org/multipage', emphasis: 'medium' },
+      { title: 'CSS', icon: 'mdi-language-css3', url: 'w3.org/Style/CSS', emphasis: 'medium' },
+      { title: 'PHP', icon: 'mdi-language-php', url: 'php.net', emphasis: 'medium' },
+      { title: 'SQL', icon: 'mdi-database', url: 'iso.org/standard/63555.html', emphasis: 'medium' },
+      { title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', emphasis: 'medium' }
     ],
     frameworks: [
-      { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 2 },
-      { title: 'Vue.js', icon: 'mdi-vuejs', url: 'vuejs.org', level: 3 },
-      { title: 'Nuxt.js', icon: 'mdi-nuxt', url: 'nuxt.com', level: 3 },
-      { title: 'Vuetify.js', icon: 'mdi-vuetify', url: 'vuetifyjs.com', level: 3 },
-      { title: 'BootstrapVue', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', level: 1 },
-      { title: 'libGDX', icon: 'mdi-alpha-l-box-outline', url: 'libgdx.com', level: 1 }
+      { title: 'Android', icon: 'mdi-android', url: 'android.com', emphasis: 'medium' },
+      { title: 'Vue.js', icon: 'mdi-vuejs', url: 'vuejs.org', emphasis: 'high' },
+      { title: 'Nuxt', icon: 'mdi-nuxt', url: 'nuxt.com', emphasis: 'high' },
+      { title: 'Vuetify', icon: 'mdi-vuetify', url: 'vuetifyjs.com', emphasis: 'high' },
+      { title: 'Bootstrap', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', emphasis: 'low' },
+      { title: 'libGDX', icon: 'mdi-alpha-l-box-outline', url: 'libgdx.com', emphasis: 'low' }
     ],
     tech: [
-      { title: 'Amazon Web Services', icon: 'mdi-aws', url: 'aws.amazon.com', level: 3 },
-      { title: 'Google Firebase', icon: 'mdi-firebase', url: 'firebase.google.com', level: 3 },
-      { title: 'Microsoft Azure', icon: 'mdi-microsoft-azure', url: 'azure.microsoft.com', level: 1 },
-      { title: 'Heroku', icon: 'brands:heroku', url: 'heroku.com', level: 1 },
-      { title: 'WordPress', icon: 'mdi-wordpress', url: 'wordpress.com', level: 1 },
-      { title: 'Unity', icon: 'mdi-unity', url: 'unity.com', level: 1 },
-      { title: 'Unreal Engine', icon: 'mdi-unreal', url: 'unrealengine.com', level: 1 }
+      { title: 'Amazon Web Services', icon: 'mdi-aws', url: 'aws.amazon.com', emphasis: 'high' },
+      { title: 'Firebase', icon: 'mdi-firebase', url: 'firebase.google.com', emphasis: 'high' },
+      { title: 'Node.js', icon: 'mdi-nodejs', url: 'nodejs.org', emphasis: 'medium' },
+      { title: 'Docker', icon: 'mdi-docker', url: 'docker.com', emphasis: 'medium' },
+      { title: 'Azure', icon: 'mdi-microsoft-azure', url: 'azure.microsoft.com', emphasis: 'low' },
+      { title: 'Heroku', icon: 'brands:heroku', url: 'heroku.com', emphasis: 'low' },
+      // { title: 'WordPress', icon: 'mdi-wordpress', url: 'wordpress.com', emphasis: 'low' },
+      { title: 'Unity', icon: 'mdi-unity', url: 'unity.com', emphasis: 'low' },
+      { title: 'Unreal Engine', icon: 'mdi-unreal', url: 'unrealengine.com', emphasis: 'low' }
     ],
     os: [
-      { title: 'Microsoft Windows', icon: 'mdi-microsoft-windows', url: 'microsoft.com/windows', level: 3 },
-      { title: 'Apple macOS', icon: 'brands:apple', url: 'apple.com/macos', level: 3 },
-      { title: 'Linux Mint', icon: 'mdi-linux-mint', url: 'linuxmint.com', level: 3 },
-      { title: 'Fedora Workstation', icon: 'mdi-fedora', url: 'getfedora.org', level: 3 },
-      { title: 'Arch Linux', icon: 'mdi-arch', url: 'archlinux.org', level: 1 },
-      { title: 'Ubuntu', icon: 'mdi-ubuntu', url: 'ubuntu.com', level: 1 },
-      { title: 'Apple iOS', icon: 'mdi-apple-ios', url: 'apple.com/ios', level: 1 },
-      { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 1 },
+      { title: 'Windows', icon: 'mdi-microsoft-windows', url: 'microsoft.com/windows', emphasis: 'medium' },
+      { title: 'macOS', icon: 'brands:apple', url: 'apple.com/macos', emphasis: 'medium' },
+      { title: 'Linux Mint', icon: 'mdi-linux-mint', url: 'linuxmint.com', emphasis: 'medium' },
+      { title: 'Fedora', icon: 'mdi-fedora', url: 'getfedora.org', emphasis: 'medium' },
+      { title: 'Arch Linux', icon: 'mdi-arch', url: 'archlinux.org', emphasis: 'low' },
+      { title: 'Ubuntu', icon: 'mdi-ubuntu', url: 'ubuntu.com', emphasis: 'low' },
+      { title: 'iOS', icon: 'mdi-apple-ios', url: 'apple.com/ios', emphasis: 'low' },
+      { title: 'Android', icon: 'mdi-android', url: 'android.com', emphasis: 'low' },
     ]
   }),
   computed: {
     sets () {
-      const languages = _groupBy([...this.languages, ...this.frameworks], e => e.level)
-      // const frameworks = _groupBy(this.frameworks, e => e.level)
-      const tech = _groupBy(this.tech, e => e.level)
-      const os = _groupBy(this.os, e => e.level)
+      const languages = _groupBy([...this.languages, ...this.frameworks], e => e.emphasis)
+      // const frameworks = _groupBy(this.frameworks, e => e.emphasis)
+      const tech = _groupBy(this.tech, e => e.emphasis)
+      const os = _groupBy(this.os, e => e.emphasis)
+      
+      function compareEmphasis (x, y) {
+        const map = { low: 1, medium: 2, high: 3 }
+        return map[y] - map[x]
+      }
+
       return [
         {
-          title: "Languages & Frameworks",
-          data: Object.keys(languages).sort().reverse().map(e => languages[e])
+          title: 'languagesFrameworks',
+          data: Object.keys(languages).sort(compareEmphasis).map(e => languages[e])
         },
         {
-          title: "Tools & Platforms",
-          data: Object.keys(tech).sort().reverse().map(e => tech[e])
+          title: 'toolsPlatforms',
+          data: Object.keys(tech).sort(compareEmphasis).map(e => tech[e])
         },
         {
-          title: "Operating Systems",
-          data: Object.keys(os).sort().reverse().map(e => os[e])
+          title: 'os',
+          data: Object.keys(os).sort(compareEmphasis).map(e => os[e])
         }
       ]
     },
-    skills () {
-      return [...this.languages, ...this.frameworks, ...this.tech, ...this.os]
+    yearsOfExp () {
+      // startingYear = The year I started my first truly personal project (predecessor of Menacing Blue).
+      // Fun fact: I used Notepad++ and javac in cmd for coding rather than an IDE for like the first 6-12 months.
+      const startingYear = 2011
+      const currentYear = new Date().getFullYear()
+      return currentYear - startingYear
     }
   },
   methods: {
-    getButtonSize (level) {
-      switch (level) {
-        case 1: return 48
-        case 2: return 64
-        default: return 96
+    brandIconSize (emphasis) {
+      const large = this.$vuetify.display.smAndDown ? 64 : 96
+      const medium = this.$vuetify.display.smAndDown ? 48 : 64
+      const small = this.$vuetify.display.smAndDown ? 32 : 48
+
+      switch (emphasis) {
+        case 'low': return small
+        case 'medium': return medium
+        default: return large
       }
     }
   }

pages/imprint.vue

@@ -0,0 +1,991 @@
+<template>
+  <div>
+  <v-card class="mb-2">
+    <v-card-item>
+      <v-card-title>Offenlegung nach § 25 Mediengesetz</v-card-title>
+    </v-card-item>
+    <v-card-text>
+      <strong>Medieninhaber:</strong><br />
+      {{ $config.public.myName }}<br />
+      Wien, Österreich<br />
+      {{ $config.public.myEmail }}<br />
+    </v-card-text>
+    <v-card-text>
+      Zweck dieser Website: Präsentation des Medieninhabers.
+    </v-card-text>
+  </v-card>
+  <v-card>
+    <v-card-text>
+    <h1>Datenschutzerklärung</h1>
+    <h2 id="einleitung-ueberblick">Einleitung und Überblick</h2>
+    <p>Wir haben diese Datenschutzerklärung (Fassung 26.04.2023-112487332) verfasst, um Ihnen gemäß der Vorgaben der <a
+        href="https://eur-lex.europa.eu/legal-content/DE/TXT/HTML/?uri=CELEX:32016R0679&amp;from=DE&amp;tid=112487332#d1e2269-1-1"
+        target="_blank" rel="noopener">Datenschutz-Grundverordnung (EU) 2016/679</a> und anwendbaren nationalen Gesetzen
+      zu
+      erklären, welche personenbezogenen Daten (kurz Daten) wir als Verantwortliche &#8211; und die von uns beauftragten
+      Auftragsverarbeiter (z. B. Provider) &#8211; verarbeiten, zukünftig verarbeiten werden und welche rechtmäßigen
+      Möglichkeiten Sie haben. Die verwendeten Begriffe sind geschlechtsneutral zu verstehen.<br />
+      <strong>Kurz gesagt:</strong> Wir informieren Sie umfassend über Daten, die wir über Sie
+      verarbeiten.
+    </p>
+    <p>Datenschutzerklärungen klingen für gewöhnlich sehr technisch und verwenden juristische Fachbegriffe. Diese
+      Datenschutzerklärung soll Ihnen hingegen die wichtigsten Dinge so einfach und transparent wie möglich beschreiben.
+      Soweit es der Transparenz förderlich ist, werden technische <strong>Begriffe
+        leserfreundlich erklärt</strong>, Links zu weiterführenden Informationen geboten und <strong>Grafiken</strong> zum
+      Einsatz gebracht. Wir informieren damit in klarer und einfacher
+      Sprache, dass wir im Rahmen unserer Geschäftstätigkeiten nur dann personenbezogene Daten verarbeiten, wenn eine
+      entsprechende gesetzliche Grundlage gegeben ist. Das ist sicher nicht möglich, wenn man möglichst knappe, unklare
+      und
+      juristisch-technische Erklärungen abgibt, so wie sie im Internet oft Standard sind, wenn es um Datenschutz geht. Ich
+      hoffe, Sie finden die folgenden Erläuterungen interessant und informativ und vielleicht ist die eine oder andere
+      Information dabei, die Sie noch nicht kannten.<br />
+      Wenn trotzdem Fragen bleiben, möchten wir Sie bitten, sich an die unten bzw. im Impressum genannte verantwortliche
+      Stelle zu wenden, den vorhandenen Links zu folgen und sich weitere Informationen auf Drittseiten anzusehen. Unsere
+      Kontaktdaten finden Sie selbstverständlich auch im Impressum.</p>
+    <h2 id="kontaktdaten-verantwortliche">Kontaktdaten des Verantwortlichen</h2>
+    <p>Sollten Sie Fragen zum Datenschutz oder zur Verarbeitung personenbezogener Daten haben, finden Sie nachfolgend die
+      Kontaktdaten der verantwortlichen Person bzw. Stelle:<br />
+      <span style="font-weight: 400">
+        {{ $config.public.myName }}<br />
+        Wien, Österreich
+      </span>
+      <br />
+      E-Mail: <a :href="`mailto:${$config.public.myEmail}`">{{ $config.public.myEmail }}</a>
+    </p>
+    <h2 id="rechte-dsgvo">Rechte laut Datenschutz-Grundverordnung</h2>
+    <p>Gemäß Artikel 13, 14 DSGVO informieren wir Sie über die folgenden Rechte, die Ihnen zustehen, damit es zu einer
+      fairen und transparenten Verarbeitung von Daten kommt:</p>
+    <ul>
+      <li>Sie haben laut Artikel 15 DSGVO ein Auskunftsrecht darüber, ob wir Daten von Ihnen
+        verarbeiten. Sollte das zutreffen, haben Sie Recht darauf eine Kopie der Daten zu erhalten und die folgenden
+        Informationen zu erfahren:
+        <ul>
+          <li>zu welchem Zweck wir die Verarbeitung durchführen;</li>
+          <li>die Kategorien, also die Arten von Daten, die verarbeitet werden;</li>
+          <li>wer diese Daten erhält und wenn die Daten an Drittländer übermittelt werden, wie
+            die Sicherheit garantiert werden kann;</li>
+          <li>wie lange die Daten gespeichert werden;</li>
+          <li>das Bestehen des Rechts auf Berichtigung, Löschung oder Einschränkung der
+            Verarbeitung und dem Widerspruchsrecht gegen die Verarbeitung;</li>
+          <li>dass Sie sich bei einer Aufsichtsbehörde beschweren können (Links zu diesen
+            Behörden finden Sie weiter unten);</li>
+          <li>die Herkunft der Daten, wenn wir sie nicht bei Ihnen erhoben haben;</li>
+          <li>ob Profiling durchgeführt wird, ob also Daten automatisch ausgewertet werden, um zu
+            einem persönlichen Profil von Ihnen zu gelangen.</li>
+        </ul>
+      </li>
+      <li>Sie haben laut Artikel 16 DSGVO ein Recht auf Berichtigung der Daten, was bedeutet,
+        dass wir Daten richtig stellen müssen, falls Sie Fehler finden.</li>
+      <li>Sie haben laut Artikel 17 DSGVO das Recht auf Löschung („Recht auf Vergessenwerden“),
+        was konkret bedeutet, dass Sie die Löschung Ihrer Daten verlangen dürfen.</li>
+      <li>Sie haben laut Artikel 18 DSGVO das Recht auf Einschränkung der Verarbeitung, was
+        bedeutet, dass wir die Daten nur mehr speichern dürfen aber nicht weiter verwenden.</li>
+      <li>Sie haben laut Artikel 20 DSGVO das Recht auf Datenübertragbarkeit, was bedeutet, dass
+        wir Ihnen auf Anfrage Ihre Daten in einem gängigen Format zur Verfügung stellen.</li>
+      <li>Sie haben laut Artikel 21 DSGVO ein Widerspruchsrecht, welches nach Durchsetzung eine
+        Änderung der Verarbeitung mit sich bringt.
+        <ul>
+          <li>Wenn die Verarbeitung Ihrer Daten auf Artikel 6 Abs. 1 lit. e (öffentliches
+            Interesse, Ausübung öffentlicher Gewalt) oder Artikel 6 Abs. 1 lit. f (berechtigtes Interesse) basiert, können
+            Sie gegen die Verarbeitung Widerspruch einlegen. Wir prüfen danach so rasch wie möglich, ob wir diesem
+            Widerspruch rechtlich nachkommen können.</li>
+          <li>Werden Daten verwendet, um Direktwerbung zu betreiben, können Sie jederzeit gegen
+            diese Art der Datenverarbeitung widersprechen. Wir dürfen Ihre Daten danach nicht mehr für Direktmarketing
+            verwenden.</li>
+          <li>Werden Daten verwendet, um Profiling zu betreiben, können Sie jederzeit gegen diese
+            Art der Datenverarbeitung widersprechen. Wir dürfen Ihre Daten danach nicht mehr für Profiling verwenden.</li>
+        </ul>
+      </li>
+      <li>Sie haben laut Artikel 22 DSGVO unter Umständen das Recht, nicht einer ausschließlich
+        auf einer automatisierten Verarbeitung (zum Beispiel Profiling) beruhenden Entscheidung unterworfen zu werden.
+      </li>
+      <li>Sie haben laut Artikel 77 DSGVO das Recht auf Beschwerde. Das heißt, Sie können sich
+        jederzeit bei der Datenschutzbehörde beschweren, wenn Sie der Meinung sind, dass die Datenverarbeitung von
+        personenbezogenen Daten gegen die DSGVO verstößt.</li>
+    </ul>
+    <p>
+      <strong>Kurz gesagt:</strong> Sie haben Rechte &#8211; zögern Sie nicht, die oben gelistete
+      verantwortliche Stelle bei uns zu kontaktieren!
+    </p>
+    <p>Wenn Sie glauben, dass die Verarbeitung Ihrer Daten gegen das Datenschutzrecht verstößt oder Ihre
+      datenschutzrechtlichen Ansprüche in sonst einer Weise verletzt worden sind, können Sie sich bei der Aufsichtsbehörde
+      beschweren. Diese ist für Österreich die Datenschutzbehörde, deren Website Sie unter <a
+        href="https://www.dsb.gv.at/?tid=112487332" target="_blank" rel="noopener">https://www.dsb.gv.at/</a> finden. In
+      Deutschland gibt es für jedes Bundesland einen Datenschutzbeauftragten. Für nähere Informationen können Sie sich an
+      die <a href="https://www.bfdi.bund.de/DE/Home/home_node.html" target="_blank" rel="noopener">Bundesbeauftragte für
+        den
+        Datenschutz und die Informationsfreiheit (BfDI)</a> wenden. Für unser
+      Unternehmen ist die folgende lokale Datenschutzbehörde zuständig:</p>
+    <h2 id="oesterreich-datenschutzbehoerde">Österreich Datenschutzbehörde</h2>
+    <p>
+      <strong>Leiterin: </strong>Mag. Dr. Andrea Jelinek<strong>
+        <br />
+        Adresse: </strong>Barichgasse 40-42, 1030 Wien<strong>
+        <br />
+        Telefonnr.: </strong>+43 1 52 152-0<strong>
+        <br />
+        E-Mail-Adresse: </strong>
+      <a href="mailto:dsb@dsb.gv.at" target="_blank" rel="noopener">dsb@dsb.gv.at</a>
+      <strong>
+        <br />
+        Website: </strong>
+      <a href="https://www.dsb.gv.at/" target="_blank" rel="noopener">https://www.dsb.gv.at/</a>
+    </p>
+    <h2 id="datenuebertragung-drittlaender">Datenübertragung in Drittländer</h2>
+    <p>Wir übertragen oder verarbeiten Daten nur dann in Länder außerhalb der EU (Drittländer), wenn Sie dieser
+      Verarbeitung
+      zustimmen, dies gesetzlich vorgeschrieben ist oder vertraglich notwendig und in jedem Fall nur soweit dies generell
+      erlaubt ist. Ihre Zustimmung ist in den meisten Fällen der wichtigste Grund, dass wir Daten in Drittländern
+      verarbeiten lassen. Die Verarbeitung personenbezogener Daten in Drittländern wie den USA, wo viele
+      Softwarehersteller
+      Dienstleistungen anbieten und Ihre Serverstandorte haben, kann bedeuten, dass personenbezogene Daten auf unerwartete
+      Weise verarbeitet und gespeichert werden.</p>
+    <p>Wir weisen ausdrücklich darauf hin, dass nach Meinung des Europäischen Gerichtshofs derzeit kein angemessenes
+      Schutzniveau für den Datentransfer in die USA besteht. Die Datenverarbeitung durch US-Dienste (wie beispielsweise
+      Google Analytics) kann dazu führen, dass gegebenenfalls Daten nicht anonymisiert verarbeitet und gespeichert werden.
+      Ferner können gegebenenfalls US-amerikanische staatliche Behörden Zugriff auf einzelne Daten nehmen. Zudem kann es
+      vorkommen, dass erhobene Daten mit Daten aus anderen Diensten desselben Anbieters, sofern Sie ein entsprechendes
+      Nutzerkonto haben, verknüpft werden. Nach Möglichkeit versuchen wir Serverstandorte innerhalb der EU zu nutzen,
+      sofern
+      das angeboten wird.</p>
+    <p>Wir informieren Sie an den passenden Stellen dieser Datenschutzerklärung genauer über Datenübertragung in
+      Drittländer, sofern diese zutrifft.</p>
+    <h2 id="sicherheit-datenverarbeitung">Sicherheit der Datenverarbeitung</h2>
+    <p>Um personenbezogene Daten zu schützen, haben wir sowohl technische als auch organisatorische Maßnahmen umgesetzt.
+      Wo
+      es uns möglich ist, verschlüsseln oder pseudonymisieren wir personenbezogene Daten. Dadurch machen wir es im Rahmen
+      unserer Möglichkeiten so schwer wie möglich, dass Dritte aus unseren Daten auf persönliche Informationen schließen
+      können.</p>
+    <p>Art. 25 DSGVO spricht hier von &#8220;Datenschutz durch Technikgestaltung und durch datenschutzfreundliche
+      Voreinstellungen&#8221; und meint damit, dass man sowohl bei Software (z. B. Formularen) also auch Hardware (z. B.
+      Zugang zum Serverraum) immer an Sicherheit denkt und entsprechende Maßnahmen setzt. Im Folgenden gehen wir, falls
+      erforderlich, noch auf konkrete Maßnahmen ein.</p>
+    <h2 id="tls-verschluesselung-https">TLS-Verschlüsselung mit https</h2>
+    <p>TLS, Verschlüsselung und https klingen sehr technisch und sind es auch. Wir verwenden HTTPS (das Hypertext Transfer
+      Protocol Secure steht für „sicheres Hypertext-Übertragungsprotokoll“), um Daten abhörsicher im Internet zu
+      übertragen.<br />
+      Das bedeutet, dass die komplette Übertragung aller Daten von Ihrem Browser zu unserem Webserver abgesichert ist
+      &#8211; niemand kann &#8220;mithören&#8221;.</p>
+    <p>Damit haben wir eine zusätzliche Sicherheitsschicht eingeführt und erfüllen den Datenschutz durch Technikgestaltung
+      (<a href="https://eur-lex.europa.eu/legal-content/DE/TXT/HTML/?uri=CELEX:32016R0679&amp;from=DE&amp;tid=112487332"
+        target="_blank" rel="noopener">Artikel 25 Absatz 1 DSGVO</a>). Durch den Einsatz von TLS (Transport Layer
+      Security),
+      einem Verschlüsselungsprotokoll zur sicheren Datenübertragung im Internet, können wir den Schutz vertraulicher Daten
+      sicherstellen.<br />
+      Sie erkennen die Benutzung dieser Absicherung der Datenübertragung am kleinen Schlosssymbol <img role="img"
+        src="https://www.adsimple.at/wp-content/uploads/2018/03/schlosssymbol-https.svg" width="17" height="18" /> links
+      oben im Browser, links von der Internetadresse (z. B. beispielseite.de) und der Verwendung des Schemas https
+      (anstatt
+      http) als Teil unserer Internetadresse.<br />
+      Wenn Sie mehr zum Thema Verschlüsselung wissen möchten, empfehlen wir die Google Suche nach &#8220;Hypertext
+      Transfer
+      Protocol Secure wiki&#8221; um gute Links zu weiterführenden Informationen zu erhalten.</p>
+    <h2 id="cookies">Cookies</h2>
+    <table border="1" cellpadding="15">
+      <tbody>
+        <tr>
+          <td>
+            <strong>Cookies Zusammenfassung</strong>
+            <br />
+            &#x1f465; Betroffene: Besucher der Website<br />
+            &#x1f91d; Zweck: abhängig vom jeweiligen Cookie. Mehr Details dazu finden Sie weiter unten bzw. beim
+            Hersteller
+            der Software, der das Cookie setzt.<br />
+            &#x1f4d3; Verarbeitete Daten: Abhängig vom jeweils eingesetzten Cookie. Mehr Details dazu finden Sie weiter
+            unten bzw. beim Hersteller der Software, der das Cookie setzt.<br />
+            &#x1f4c5; Speicherdauer: abhängig vom jeweiligen Cookie, kann von Stunden bis hin zu Jahren variieren<br />
+            &#x2696;&#xfe0f; Rechtsgrundlagen: Art. 6 Abs. 1 lit. a DSGVO (Einwilligung), Art. 6 Abs. 1 lit.f DSGVO
+            (Berechtigte Interessen)
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>Was sind Cookies?</h3>
+    <p>Unsere Website verwendet HTTP-Cookies, um nutzerspezifische Daten zu speichern.<br />
+      Im Folgenden erklären wir, was Cookies sind und warum Sie genutzt werden, damit Sie die folgende
+      Datenschutzerklärung
+      besser verstehen.</p>
+    <p>Immer wenn Sie durch das Internet surfen, verwenden Sie einen Browser. Bekannte Browser sind beispielsweise Chrome,
+      Safari, Firefox, Internet Explorer und Microsoft Edge. Die meisten Websites speichern kleine Text-Dateien in Ihrem
+      Browser. Diese Dateien nennt man Cookies.</p>
+    <p>Eines ist nicht von der Hand zu weisen: Cookies sind echt nützliche Helferlein. Fast alle Websites verwenden
+      Cookies.
+      Genauer gesprochen sind es HTTP-Cookies, da es auch noch andere Cookies für andere Anwendungsbereiche gibt.
+      HTTP-Cookies sind kleine Dateien, die von unserer Website auf Ihrem Computer gespeichert werden. Diese
+      Cookie-Dateien
+      werden automatisch im Cookie-Ordner, quasi dem &#8220;Hirn&#8221; Ihres Browsers, untergebracht. Ein Cookie besteht
+      aus einem Namen und einem Wert. Bei der Definition eines Cookies müssen zusätzlich ein oder mehrere Attribute
+      angegeben werden.</p>
+    <p>Cookies speichern gewisse Nutzerdaten von Ihnen, wie beispielsweise Sprache oder persönliche Seiteneinstellungen.
+      Wenn Sie unsere Seite wieder aufrufen, übermittelt Ihr Browser die „userbezogenen“ Informationen an unsere Seite
+      zurück. Dank der Cookies weiß unsere Website, wer Sie sind und bietet Ihnen die Einstellung, die Sie gewohnt sind.
+      In
+      einigen Browsern hat jedes Cookie eine eigene Datei, in anderen wie beispielsweise Firefox sind alle Cookies in
+      einer
+      einzigen Datei gespeichert.</p>
+    <p>Es gibt sowohl Erstanbieter Cookies als auch Drittanbieter-Cookies. Erstanbieter-Cookies werden direkt von unserer
+      Seite erstellt, Drittanbieter-Cookies werden von Partner-Websites (z.B. Google Analytics) erstellt. Jedes Cookie ist
+      individuell zu bewerten, da jedes Cookie andere Daten speichert. Auch die Ablaufzeit eines Cookies variiert von ein
+      paar Minuten bis hin zu ein paar Jahren. Cookies sind keine Software-Programme und enthalten keine Viren, Trojaner
+      oder andere „Schädlinge“. Cookies können auch nicht auf Informationen Ihres PCs zugreifen.</p>
+    <p>So können zum Beispiel Cookie-Daten aussehen:</p>
+    <p>
+      <strong>Name:</strong> _ga<br />
+      <strong>Wert:</strong> GA1.2.1326744211.152112487332-9<br />
+      <strong>Verwendungszweck:</strong> Unterscheidung der Websitebesucher<br />
+      <strong>Ablaufdatum:</strong> nach 2 Jahren
+    </p>
+    <p>Diese Mindestgrößen sollte ein Browser unterstützen können:</p>
+    <ul>
+      <li>Mindestens 4096 Bytes pro Cookie</li>
+      <li>Mindestens 50 Cookies pro Domain</li>
+      <li>Mindestens 3000 Cookies insgesamt</li>
+    </ul>
+    <h3>Welche Arten von Cookies gibt es?</h3>
+    <p>Die Frage welche Cookies wir im Speziellen verwenden, hängt von den verwendeten Diensten ab und wird in den
+      folgenden
+      Abschnitten der Datenschutzerklärung geklärt. An dieser Stelle möchten wir kurz auf die verschiedenen Arten von
+      HTTP-Cookies eingehen.</p>
+    <p>Man kann 4 Arten von Cookies unterscheiden:</p>
+    <p>
+      <strong>Unerlässliche Cookies<br />
+      </strong>Diese Cookies sind nötig, um grundlegende Funktionen der Website sicherzustellen. Zum Beispiel braucht es
+      diese Cookies, wenn ein User ein Produkt in den Warenkorb legt, dann auf anderen Seiten weitersurft und später erst
+      zur Kasse geht. Durch diese Cookies wird der Warenkorb nicht gelöscht, selbst wenn der User sein Browserfenster
+      schließt.
+    </p>
+    <p>
+      <strong>Zweckmäßige Cookies<br />
+      </strong>Diese Cookies sammeln Infos über das Userverhalten und ob der User etwaige Fehlermeldungen bekommt. Zudem
+      werden mithilfe dieser Cookies auch die Ladezeit und das Verhalten der Website bei verschiedenen Browsern gemessen.
+    </p>
+    <p>
+      <strong>Zielorientierte Cookies<br />
+      </strong>Diese Cookies sorgen für eine bessere Nutzerfreundlichkeit. Beispielsweise werden eingegebene Standorte,
+      Schriftgrößen oder Formulardaten gespeichert.
+    </p>
+    <p>
+      <strong>Werbe-Cookies<br />
+      </strong>Diese Cookies werden auch Targeting-Cookies genannt. Sie dienen dazu dem User individuell angepasste
+      Werbung
+      zu liefern. Das kann sehr praktisch, aber auch sehr nervig sein.
+    </p>
+    <p>Üblicherweise werden Sie beim erstmaligen Besuch einer Website gefragt, welche dieser Cookiearten Sie zulassen
+      möchten. Und natürlich wird diese Entscheidung auch in einem Cookie gespeichert.</p>
+    <p>Wenn Sie mehr über Cookies wissen möchten und technische Dokumentationen nicht scheuen, empfehlen wir <a
+        href="https://datatracker.ietf.org/doc/html/rfc6265">https://datatracker.ietf.org/doc/html/rfc6265</a>, dem
+      Request
+      for Comments der Internet Engineering Task Force (IETF) namens &#8220;HTTP State Management Mechanism&#8221;.</p>
+    <h3>Zweck der Verarbeitung über Cookies</h3>
+    <p>Der Zweck ist letztendlich abhängig vom jeweiligen Cookie. Mehr Details dazu finden Sie weiter unten bzw. beim
+      Hersteller der Software, die das Cookie setzt.</p>
+    <h3>Welche Daten werden verarbeitet?</h3>
+    <p>Cookies sind kleine Gehilfen für eine viele verschiedene Aufgaben. Welche Daten in Cookies gespeichert werden, kann
+      man leider nicht verallgemeinern, aber wir werden Sie im Rahmen der folgenden Datenschutzerklärung über die
+      verarbeiteten bzw. gespeicherten Daten informieren.</p>
+    <h3>Speicherdauer von Cookies</h3>
+    <p>Die Speicherdauer hängt vom jeweiligen Cookie ab und wird weiter unter präzisiert. Manche Cookies werden nach
+      weniger
+      als einer Stunde gelöscht, andere können mehrere Jahre auf einem Computer gespeichert bleiben.</p>
+    <p>Sie haben außerdem selbst Einfluss auf die Speicherdauer. Sie können über ihren Browser sämtliche Cookies jederzeit
+      manuell löschen (siehe auch unten &#8220;Widerspruchsrecht&#8221;). Ferner werden Cookies, die auf einer
+      Einwilligung
+      beruhen, spätestens nach Widerruf Ihrer Einwilligung gelöscht, wobei die Rechtmäßigkeit der Speicherung bis dahin
+      unberührt bleibt.</p>
+    <h3>Widerspruchsrecht &#8211; wie kann ich Cookies löschen?</h3>
+    <p>Wie und ob Sie Cookies verwenden wollen, entscheiden Sie selbst. Unabhängig von welchem Service oder welcher
+      Website
+      die Cookies stammen, haben Sie immer die Möglichkeit Cookies zu löschen, zu deaktivieren oder nur teilweise
+      zuzulassen. Zum Beispiel können Sie Cookies von Drittanbietern blockieren, aber alle anderen Cookies zulassen.</p>
+    <p>Wenn Sie feststellen möchten, welche Cookies in Ihrem Browser gespeichert wurden, wenn Sie Cookie-Einstellungen
+      ändern oder löschen wollen, können Sie dies in Ihren Browser-Einstellungen finden:</p>
+    <p>
+      <a href="https://support.google.com/chrome/answer/95647?tid=112487332" target="_blank"
+        rel="noopener noreferrer">Chrome: Cookies in Chrome löschen, aktivieren und verwalten</a>
+    </p>
+    <p>
+      <a href="https://support.apple.com/de-at/guide/safari/sfri11471/mac?tid=112487332" target="_blank"
+        rel="noopener noreferrer">Safari: Verwalten von Cookies und Websitedaten mit Safari</a>
+    </p>
+    <p>
+      <a href="https://support.mozilla.org/de/kb/cookies-und-website-daten-in-firefox-loschen?tid=112487332"
+        target="_blank" rel="noopener noreferrer">Firefox: Cookies löschen, um Daten zu entfernen, die Websites auf Ihrem
+        Computer abgelegt
+        haben</a>
+    </p>
+    <p>
+      <a
+        href="https://support.microsoft.com/de-de/windows/l%C3%B6schen-und-verwalten-von-cookies-168dab11-0753-043d-7c16-ede5947fc64d?tid=112487332">Internet
+        Explorer: Löschen und Verwalten von Cookies</a>
+    </p>
+    <p>
+      <a
+        href="https://support.microsoft.com/de-de/microsoft-edge/cookies-in-microsoft-edge-l%C3%B6schen-63947406-40ac-c3b8-57b9-2a946a29ae09?tid=112487332">Microsoft
+        Edge: Löschen und Verwalten von Cookies</a>
+    </p>
+    <p>Falls Sie grundsätzlich keine Cookies haben wollen, können Sie Ihren Browser so einrichten, dass er Sie immer
+      informiert, wenn ein Cookie gesetzt werden soll. So können Sie bei jedem einzelnen Cookie entscheiden, ob Sie das
+      Cookie erlauben oder nicht. Die Vorgangsweise ist je nach Browser verschieden. Am besten Sie suchen die Anleitung in
+      Google mit dem Suchbegriff “Cookies löschen Chrome” oder &#8220;Cookies deaktivieren Chrome&#8221; im Falle eines
+      Chrome Browsers.</p>
+    <h3>Rechtsgrundlage</h3>
+    <p>Seit 2009 gibt es die sogenannten „Cookie-Richtlinien“. Darin ist festgehalten, dass das Speichern von Cookies eine
+      <strong>Einwilligung</strong> (Artikel 6 Abs. 1 lit. a DSGVO) von Ihnen verlangt. Innerhalb
+      der EU-Länder gibt es allerdings noch sehr unterschiedliche Reaktionen auf diese Richtlinien. In Österreich erfolgte
+      aber die Umsetzung dieser Richtlinie in § 96 Abs. 3 des Telekommunikationsgesetzes (TKG). In Deutschland wurden die
+      Cookie-Richtlinien nicht als nationales Recht umgesetzt. Stattdessen erfolgte die Umsetzung dieser Richtlinie
+      weitgehend in § 15 Abs.3 des Telemediengesetzes (TMG).
+    </p>
+    <p>Für unbedingt notwendige Cookies, auch soweit keine Einwilligung vorliegt, bestehen <strong>berechtigte
+        Interessen</strong> (Artikel 6 Abs. 1 lit. f DSGVO), die in den meisten
+      Fällen wirtschaftlicher Natur sind. Wir möchten den Besuchern der Website eine angenehme Benutzererfahrung bescheren
+      und dafür sind bestimmte Cookies oft unbedingt notwendig.</p>
+    <p>Soweit nicht unbedingt erforderliche Cookies zum Einsatz kommen, geschieht dies nur im Falle Ihrer Einwilligung.
+      Rechtsgrundlage ist insoweit Art. 6 Abs. 1 lit. a DSGVO.</p>
+    <p>In den folgenden Abschnitten werden Sie genauer über den Einsatz von Cookies informiert, sofern eingesetzte
+      Software
+      Cookies verwendet.</p>
+    <h2 id="webhosting-einleitung">Webhosting Einleitung</h2>
+    <table border="1" cellpadding="15">
+      <tbody>
+        <tr>
+          <td>
+            <strong>Webhosting Zusammenfassung</strong>
+            <br />
+            &#x1f465; Betroffene: Besucher der Website<br />
+            &#x1f91d; Zweck: professionelles Hosting der Website und Absicherung des Betriebs<br />
+            &#x1f4d3; Verarbeitete Daten: IP-Adresse, Zeitpunkt des Websitebesuchs, verwendeter Browser und weitere Daten.
+            Mehr Details dazu finden Sie weiter unten bzw. beim jeweils eingesetzten Webhosting Provider.<br />
+            &#x1f4c5; Speicherdauer: abhängig vom jeweiligen Provider, aber in der Regel 2 Wochen<br />
+            &#x2696;&#xfe0f; Rechtsgrundlagen: Art. 6 Abs. 1 lit.f DSGVO (Berechtigte Interessen)
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>Was ist Webhosting?</h3>
+    <p>Wenn Sie heutzutage Websites besuchen, werden gewisse Informationen &#8211; auch personenbezogene Daten &#8211;
+      automatisch erstellt und gespeichert, so auch auf dieser Website. Diese Daten sollten möglichst sparsam und nur mit
+      Begründung verarbeitet werden. Mit Website meinen wir übrigens die Gesamtheit aller Webseiten auf einer Domain, d.h.
+      alles von der Startseite (Homepage) bis hin zur aller letzten Unterseite (wie dieser hier). Mit Domain meinen wir
+      zum
+      Beispiel beispiel.de oder musterbeispiel.com.</p>
+    <p>Wenn Sie eine Website auf einem Computer, Tablet oder Smartphone ansehen möchten, verwenden Sie dafür ein Programm,
+      das sich Webbrowser nennt. Sie kennen vermutlich einige Webbrowser beim Namen: Google Chrome, Microsoft Edge,
+      Mozilla
+      Firefox und Apple Safari. Wir sagen kurz Browser oder Webbrowser dazu.</p>
+    <p>Um die Website anzuzeigen, muss sich der Browser zu einem anderen Computer verbinden, wo der Code der Website
+      gespeichert ist: dem Webserver. Der Betrieb eines Webservers ist eine komplizierte und aufwendige Aufgabe, weswegen
+      dies in der Regel von professionellen Anbietern, den Providern, übernommen wird. Diese bieten Webhosting an und
+      sorgen
+      damit für eine verlässliche und fehlerfreie Speicherung der Daten von Websites. Eine ganze Menge Fachbegriffe, aber
+      bitte bleiben Sie dran, es wird noch besser!</p>
+    <p>Bei der Verbindungsaufnahme des Browsers auf Ihrem Computer (Desktop, Laptop, Tablet oder Smartphone) und während
+      der
+      Datenübertragung zu und vom Webserver kann es zu einer Verarbeitung personenbezogener Daten kommen. Einerseits
+      speichert Ihr Computer Daten, andererseits muss auch der Webserver Daten eine Zeit lang speichern, um einen
+      ordentlichen Betrieb zu gewährleisten.</p>
+    <h3>Warum verarbeiten wir personenbezogene Daten?</h3>
+    <p>Die Zwecke der Datenverarbeitung sind:</p>
+    <ol>
+      <li>Professionelles Hosting der Website und Absicherung des Betriebs</li>
+      <li>zur Aufrechterhaltung der Betriebs- und IT-Sicherheit</li>
+      <li>Anonyme Auswertung des Zugriffsverhaltens zur Verbesserung unseres Angebots und ggf.
+        zur Strafverfolgung bzw. Verfolgung von Ansprüchen</li>
+    </ol>
+    <h3>Welche Daten werden verarbeitet?</h3>
+    <p>Auch während Sie unsere Website jetzt gerade besuchen, speichert unser Webserver, das ist der Computer auf dem
+      diese
+      Webseite gespeichert ist, in der Regel automatisch Daten wie</p>
+    <ul>
+      <li>die komplette Internetadresse (URL) der aufgerufenen Webseite</li>
+      <li>Browser und Browserversion (z. B. Chrome 87)</li>
+      <li>das verwendete Betriebssystem (z. B. Windows 10)</li>
+      <li>die Adresse (URL) der zuvor besuchten Seite (Referrer URL) (z. B. <a
+          href="https://www.beispielquellsite.de/vondabinichgekommen/" target="_blank"
+          rel="follow noopener">https://www.beispielquellsite.de/vondabinichgekommen/</a>)</li>
+      <li>den Hostnamen und die IP-Adresse des Geräts von welchem aus zugegriffen wird (z. B.
+        COMPUTERNAME und 194.23.43.121)</li>
+      <li>Datum und Uhrzeit</li>
+      <li>in Dateien, den sogenannten Webserver-Logfiles</li>
+    </ul>
+    <h3>Wie lange werden Daten gespeichert?</h3>
+    <p>In der Regel werden die oben genannten Daten zwei Wochen gespeichert und danach automatisch gelöscht. Wir geben
+      diese
+      Daten nicht weiter, können jedoch nicht ausschließen, dass diese Daten beim Vorliegen von rechtswidrigem Verhalten
+      von
+      Behörden eingesehen werden.</p>
+    <p>
+      <strong>Kurz gesagt:</strong> Ihr Besuch wird durch unseren Provider (Firma, die unsere
+      Website auf speziellen Computern (Servern) laufen lässt), protokolliert, aber wir geben Ihre Daten nicht ohne
+      Zustimmung weiter!
+    </p>
+    <h3>Rechtsgrundlage</h3>
+    <p>Die Rechtmäßigkeit der Verarbeitung personenbezogener Daten im Rahmen des Webhosting ergibt sich aus Art. 6 Abs. 1
+      lit. f DSGVO (Wahrung der berechtigten Interessen), denn die Nutzung von professionellem Hosting bei einem Provider
+      ist notwendig, um das Unternehmen im Internet sicher und nutzerfreundlich präsentieren und Angriffe und Forderungen
+      hieraus gegebenenfalls verfolgen zu können.</p>
+    <p>Zwischen uns und dem Hosting-Provider besteht in der Regel ein Vertrag über die Auftragsverarbeitung gemäß Art. 28
+      f.
+      DSGVO, der die Einhaltung von Datenschutz gewährleistet und Datensicherheit garantiert.
+    </p>
+    <h2 style="--fontSize: 27; line-height: 1.5;" data-fontsize="27" data-lineheight="40.5px"
+      class="fusion-responsive-typography-calculated">GitHub Pages Datenschutzerklärung</h2>
+    <p>Wir verwenden für unsere Website den Webhosting-Dienst GitHub Pages. Dienstanbieter ist das amerikanische
+      Unternehmen GitHub Inc., 88 Colin P. Kelly Jr. St.,San Francisco, CA 94107, USA.</p>
+    <p>GitHub verarbeitet Daten von Ihnen u.a. auch in den USA. Wir weisen darauf hin, dass nach Meinung des
+      Europäischen Gerichtshofs derzeit kein angemessenes Schutzniveau für den Datentransfer in die USA besteht. Dies
+      kann mit verschiedenen Risiken für die Rechtmäßigkeit und Sicherheit der Datenverarbeitung einhergehen.</p>
+    <p>Als Grundlage der Datenverarbeitung bei Empfängern mit Sitz in Drittstaaten (außerhalb der Europäischen Union,
+      Island, Liechtenstein, Norwegen, also insbesondere in den USA) oder einer Datenweitergabe dorthin verwendet GitHub
+      sogenannte Standardvertragsklauseln (= Art. 46. Abs. 2 und 3 DSGVO). Standardvertragsklauseln (Standard
+      Contractual Clauses – SCC) sind von der EU-Kommission bereitgestellte Mustervorlagen und sollen sicherstellen,
+      dass Ihre Daten auch dann den europäischen Datenschutzstandards entsprechen, wenn diese in Drittländer (wie
+      beispielsweise in die USA) überliefert und dort gespeichert werden. Durch diese Klauseln verpflichtet sich GitHub,
+      bei der Verarbeitung Ihrer relevanten Daten, das europäische Datenschutzniveau einzuhalten, selbst wenn die Daten
+      in den USA gespeichert, verarbeitet und verwaltet werden. Diese Klauseln basieren auf einem Durchführungsbeschluss
+      der EU-Kommission. Sie finden den Beschluss und die entsprechenden Standardvertragsklauseln u.a. hier: <a
+        href="https://eur-lex.europa.eu/eli/dec_impl/2021/914/oj?locale=de">https://eur-lex.europa.eu/eli/dec_impl/2021/914/oj?locale=de</a>
+    </p>
+    <p>Die GitHub Datenverarbeitungsbedingungen (Processing Terms), welche den Standardvertragsklauseln entsprechen,
+      finden Sie unter <a href="https://docs.github.com/en/site-policy/privacy-policies/github-data-protection-agreement"
+        target="_blank"
+        rel="follow noopener">https://docs.github.com/en/site-policy/privacy-policies/github-data-protection-agreement</a>.
+    </p>
+    <p>Mehr über die Daten, die durch die Verwendung von GitHub verarbeitet werden, erfahren Sie in der Privacy Policy
+      auf <a
+        href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement?tid=132527841">https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement</a>.
+    </p>
+    <h2 id="content-delivery-networks-einleitung">Content Delivery Networks Einleitung</h2>
+    <table border="1" cellpadding="15">
+      <tbody>
+        <tr>
+          <td>
+            <strong>Content Delivery Networks Datenschutzerklärung Zusammenfassung</strong>
+            <br />
+            &#x1f465; Betroffene: Besucher der Website<br />
+            &#x1f91d; Zweck: Optimierung unserer Serviceleistung (um die Website schneller laden zu können)<br />
+            &#x1f4d3; Verarbeitete Daten: Daten wie etwa Ihre IP-Adresse<br />
+            Mehr Details dazu finden Sie weiter unten und den einzelnen Datenschutztexten.<br />
+            &#x1f4c5; Speicherdauer: meisten werden die Daten solange gespeichert, bis sie zur Erfüllung der
+            Dienstleistung
+            nicht mehr benötigt werden<br />
+            &#x2696;&#xfe0f; Rechtsgrundlagen: Art. 6 Abs. 1 lit. a DSGVO (Einwilligung), Art. 6 Abs. 1 lit. f DSGVO
+            (Berechtigte Interessen)
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>Was ist ein Content Delivery Network?</h3>
+    <p>Wir nutzen auf unserer Website ein sogenanntes Content Delivery Network. Meistens wird ein solchen Netzwerk nur CDN
+      genannt. Ein CDN hilft uns, unsere Website, unabhängig von Ihrem Standort, schnell und problemlos zu laden. Dabei
+      werden auch personenbezogene Daten von Ihnen auf den Servern des eingesetzten CDN-Anbieters gespeichert, verwaltet
+      und
+      verarbeitet. Nachfolgend gehen wir allgemein näher auf den Dienst und dessen Datenverarbeitung ein. Genaue
+      Informationen über den Umgang mit Ihren Daten finden Sie in der jeweiligen Datenschutzerklärung des Anbieters.</p>
+    <p>Jedes Content Delivery Network (CDN) ist ein Netzwerk regional verteilter Server, die alle über das Internet
+      miteinander verbunden sind. Über dieses Netzwerk können Inhalte von Websites (speziell auch sehr große Dateien) auch
+      bei großen Lastspitzen schnell und reibungslos ausgeliefert werden. Das CDN legt dafür eine Kopie unserer Website
+      auf
+      Ihren Servern an. Da diese Server weltweit verteilt sind, kann die Website schnell ausgeliefert werden. Die
+      Datenübertragung zu Ihrem Browser wird folglich durch das CDN deutlich verkürzt.</p>
+    <h3>Warum verwenden wir ein Content Delivery Network für unsere Website?</h3>
+    <p>Eine schnell ladende Website ist Teil unserer Dienstleistung. Wir wissen natürlich, wie nervig es ist, wenn eine
+      Website im Schneckentempo lädt. Meist verliert man sogar die Geduld und sucht das Weite, bevor die Website
+      vollständig
+      geladen ist. Das wollen wir natürlich vermeiden. Daher gehört eine schnell ladende Website ganz selbstverständlich
+      zu
+      unserem Websiteangebot. Mit einem Content Delivery Network wird in Ihrem Browser unsere Website deutlich schneller
+      geladen. Besonders hilfreich ist der Einsatz des CDNs wenn Sie im Ausland sind, weil die Website von einem Server in
+      Ihrer Nähe ausgeliefert wird.</p>
+    <h3>Welche Daten werden verarbeitet?</h3>
+    <p>Wenn Sie eine Website bzw. die Inhalte einer Website anfordern und diese in einem CDN zwischengespeichert sind,
+      leitet das CDN die Anforderung an den von Ihnen am nächsten gelegenen Server und dieser liefert die Inhalte aus.
+      Content Delivery Networks sind so aufgebaut, dass JavaScript-Bibliotheken heruntergeladen werden können und auf npm-
+      und Github-Servern gehostet werden. Alternativ können bei den meisten CDNs auch WordPress-Plugins geladen werden,
+      wenn
+      diese auf <a href="https://wordpress.org/" target="_blank" rel="noopener">WordPress.org</a>
+      gehostet werden. Ihr Browser kann personenbezogene Daten an das von uns eingesetzte Content Delivery Network senden.
+      Dabei handelt es sich etwa um Daten wie IP-Adresse, Browsertyp, Browserversion, welche Webseite geladen wird oder
+      Uhrzeit und Datum des Seitenbesuchs. Diese Daten werden vom CDN gesammelt und auch gespeichert. Ob zur
+      Datenspeicherung Cookies verwendet werden, hängt von dem eingesetzten Network ab. Bitte lesen Sie sich dafür die
+      Datenschutztexte des jeweiligen Dienstes durch.</p>
+    <h3>Widerspruchsrecht</h3>
+    <p>Falls Sie diese Datenübertragung vollkommen unterbinden wollen, können Sie einen JavaScript-Blocker (siehe
+      beispielsweise <a href="https://noscript.net/" target="_blank" rel="noopener">https://noscript.net/</a>) auf Ihrem
+      PC
+      installieren. Natürlich kann dann unsere Website nicht mehr
+      das gewohnte Service (wie beispielsweise eine schnelle Ladegeschwindigkeit) bieten.</p>
+    <h3>Rechtsgrundlage</h3>
+    <p>Wenn Sie eingewilligt haben, dass ein Content Delivery Network eingesetzt werden darf, ist die Rechtsgrundlage der
+      entsprechenden Datenverarbeitung diese Einwilligung. Diese Einwilligung stellt laut <strong>Art. 6 Abs. 1 lit. a
+        DSGVO
+        (Einwilligung)</strong> die Rechtsgrundlage für die
+      Verarbeitung personenbezogener Daten, wie sie bei der Erfassung durch ein Content Delivery Network vorkommen kann,
+      dar.</p>
+    <p>Von unserer Seite besteht zudem ein berechtigtes Interesse, ein Content Delivery Network zu verwenden, um unser
+      Online-Service zu optimieren und sicherer zu machen. Die dafür entsprechende Rechtsgrundlage ist <strong>Art. 6 Abs.
+        1
+        lit. f DSGVO (Berechtigte Interessen)</strong>. Wir setzen das Tool
+      gleichwohl nur ein, soweit Sie eine Einwilligung erteilt haben.</p>
+    <p>Informationen zu speziellen Content Delivery Network erhalten Sie &#8211; sofern vorhanden &#8211; in den folgenden
+      Abschnitten.</p>
+      <div class="fusion-text"><h2 style="--fontSize: 27; line-height: 1.5;" data-fontsize="27" data-lineheight="40.5px">Amazon CloudFront CDN Datenschutzerklärung</h2>
+<p>Wir nutzen für unsere Website das Content Delivery Network Amazon CloudFront CDN. Dienstanbieter ist das amerikanische Unternehmen Amazon Web Services, Inc., 410 Terry Avenue North, Seattle WA 98109, USA.</p>
+<p>Amazon verarbeitet Daten von Ihnen u.a. auch in den USA. Wir weisen darauf hin, dass nach Meinung des Europäischen Gerichtshofs derzeit kein angemessenes Schutzniveau für den Datentransfer in die USA besteht. Dies kann mit verschiedenen Risiken für die Rechtmäßigkeit und Sicherheit der Datenverarbeitung einhergehen.</p>
+<p>Als Grundlage der Datenverarbeitung bei Empfängern mit Sitz in Drittstaaten (außerhalb der Europäischen Union, Island, Liechtenstein, Norwegen, also insbesondere in den USA) oder einer Datenweitergabe dorthin verwendet Amazon sogenannte Standardvertragsklauseln (= Art. 46. Abs. 2 und 3 DSGVO). Standardvertragsklauseln (Standard Contractual Clauses – SCC) sind von der EU-Kommission bereitgestellte Mustervorlagen und sollen sicherstellen, dass Ihre Daten auch dann den europäischen Datenschutzstandards entsprechen, wenn diese in Drittländer (wie beispielsweise in die USA) überliefert und dort gespeichert werden. Durch diese Klauseln verpflichtet sich Amazon, bei der Verarbeitung Ihrer relevanten Daten, das europäische Datenschutzniveau einzuhalten, selbst wenn die Daten in den USA gespeichert, verarbeitet und verwaltet werden. Diese Klauseln basieren auf einem Durchführungsbeschluss der EU-Kommission. Sie finden den Beschluss und die entsprechenden Standardvertragsklauseln u.a. hier: <a href="https://eur-lex.europa.eu/eli/dec_impl/2021/914/oj?locale=de" target="_blank" rel="noopener">https://eur-lex.europa.eu/eli/dec_impl/2021/914/oj?locale=de</a></p>
+<p>Die Amazon Datenverarbeitungsbedingung (AWS GDPR DATA PROCESSING), welche auf die Standardvertragsklauseln verweisen, finden Sie unter <a href="https://d1.awsstatic.com/legal/aws-gdpr/AWS_GDPR_DPA.pdf" target="_blank" rel="noopener">https://d1.awsstatic.com/legal/aws-gdpr/AWS_GDPR_DPA.pdf</a>.</p>
+<p>Mehr über die Daten, die durch die Verwendung von Amazon CloudFront CDN verarbeitet werden, erfahren Sie in der Datenschutzerklärung auf <a href="https://aws.amazon.com/de/privacy/" target="_blank" rel="noopener">https://aws.amazon.com/de/privacy/</a>.</p>
+</div>
+    <h2 id="webdesign-einleitung">Webdesign Einleitung</h2>
+    <table border="1" cellpadding="15">
+      <tbody>
+        <tr>
+          <td>
+            <strong>Webdesign Datenschutzerklärung Zusammenfassung</strong>
+            <br />
+            &#x1f465; Betroffene: Besucher der Website<br />
+            &#x1f91d; Zweck: Verbesserung der Nutzererfahrung<br />
+            &#x1f4d3; Verarbeitete Daten: Welche Daten verarbeitet werden, hängt stark von den verwendeten Diensten ab.
+            Meist handelt es sich etwa um IP-Adresse, technische Daten, Spracheinstellungen,  Browserversion,
+            Bildschirmauflösung und Name des Browsers. Mehr Details dazu finden Sie bei den jeweils eingesetzten
+            Webdesign-Tools.<br />
+            &#x1f4c5; Speicherdauer: abhängig von den eingesetzten Tools<br />
+            &#x2696;&#xfe0f; Rechtsgrundlagen: Art. 6 Abs. 1 lit. a DSGVO (Einwilligung), Art. 6 Abs. 1 lit. f DSGVO
+            (Berechtigte Interessen)
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>Was ist Webdesign?</h3>
+    <p>Wir verwenden auf unserer Website verschiedene Tools, die unserem Webdesign dienen. Bei Webdesign geht es nicht,
+      wie
+      oft angenommen, nur darum, dass unsere Website hübsch aussieht, sondern auch um Funktionalität und Leistung. Aber
+      natürlich ist die passende Optik einer Website auch eines der großen Ziele professionellen Webdesigns. Webdesign ist
+      ein Teilbereich des Mediendesigns und beschäftigt sich sowohl mit der visuellen als auch der strukturellen und
+      funktionalen Gestaltung einer Website. Ziel ist es mit Hilfe von Webdesign Ihre Erfahrung auf unserer Website zu
+      verbessern. Im Webdesign-Jargon spricht man in diesem Zusammenhang von User-Experience (UX) und Usability. Unter
+      User
+      Experience versteht man alle Eindrücke und Erlebnisse, die der Websitebesucher auf einer Website erfährt. Ein
+      Unterpunkt der User Experience ist die Usability. Dabei geht es um die Nutzerfreundlichkeit einer Website. Wert
+      gelegt
+      wird hier vor allem darauf, dass Inhalte, Unterseiten oder Produkte klar strukturiert sind und Sie leicht und
+      schnell
+      finden, wonach Sie suchen. Um Ihnen die bestmögliche Erfahrung auf unserer Website zu bieten, verwenden wir auch
+      sogenannte Webdesign-Tools von Drittanbietern. Unter die Kategorie „Webdesign“ fallen in dieser Datenschutzerklärung
+      also alle Dienste, die unsere Website gestalterisch verbessern. Das können beispielsweise Schriftarten, diverse
+      Plugins oder andere eingebundene Webdesign-Funktionen sein.</p>
+    <h3>Warum verwenden wir Webdesign-Tools?</h3>
+    <p>Wie Sie Informationen auf einer Website aufnehmen, hängt sehr stark von der Struktur, der Funktionalität und der
+      visuellen Wahrnehmung der Website ab. Daher wurde auch für uns ein gutes und professionelles Webdesign immer
+      wichtiger. Wir arbeiten ständig an der Verbesserung unserer Website und sehen dies auch als erweiterte
+      Dienstleistung
+      für Sie als Websitebesucher. Weiters hat eine schöne und funktionierende Website auch wirtschaftliche Vorteile für
+      uns. Schließlich werden Sie uns nur besuchen und unsere Angebote in Anspruch nehmen, wenn Sie sich rundum wohl
+      fühlen.
+    </p>
+    <h3>Welche Daten werden durch Webdesign-Tools gespeichert?</h3>
+    <p>Wenn Sie unsere Website besuchen, können Webdesign-Elemente in unseren Seiten eingebunden sein, die auch Daten
+      verarbeiten können. Um welche Daten es sich genau handelt, hängt natürlich stark von den verwendeten Tools ab.
+      Weiter
+      unter sehen Sie genau, welche Tools wir für unsere Website verwenden. Wir empfehlen Ihnen für nähere Informationen
+      über die Datenverarbeitung auch die jeweilige Datenschutzerklärung der verwendeten Tools durchzulesen. Meistens
+      erfahren Sie dort, welche Daten verarbeitet werden, ob Cookies eingesetzt werden und wie lange die Daten aufbewahrt
+      werden. Durch Schriftarten wie etwa Google Fonts werden beispielsweise auch Informationen wie Spracheinstellungen,
+      IP-Adresse, Version des Browsers, Bildschirmauflösung des Browsers und Name des Browsers automatisch an die
+      Google-Server übertragen.</p>
+    <h3>Dauer der Datenverarbeitung</h3>
+    <p>Wie lange Daten verarbeitet werden, ist sehr individuell und hängt von den eingesetzten Webdesign-Elementen ab.
+      Wenn
+      Cookies beispielsweise zum Einsatz kommen, kann die Aufbewahrungsdauer nur eine Minute, aber auch ein paar Jahre
+      dauern. Machen Sie sich diesbezüglich bitte schlau. Dazu empfehlen wir Ihnen einerseits unseren allgemeinen
+      Textabschnitt über Cookies sowie die Datenschutzerklärungen der eingesetzten Tools. Dort erfahren Sie in der Regel,
+      welche Cookies genau eingesetzt werden, und welche Informationen darin gespeichert werden. Google-Font-Dateien
+      werden
+      zum Beispiel ein Jahr gespeichert. Damit soll die Ladezeit einer Website verbessert werden. Grundsätzlich werden
+      Daten
+      immer nur so lange aufbewahrt, wie es für die Bereitstellung des Dienstes nötig ist. Bei gesetzlichen
+      Vorschreibungen
+      können Daten auch länger gespeichert werden.</p>
+    <h3>Widerspruchsrecht</h3>
+    <p>Sie haben auch jederzeit das Recht und die Möglichkeit Ihre Einwilligung zur Verwendung von Cookies bzw.
+      Drittanbietern zu widerrufen. Das funktioniert entweder über unser Cookie-Management-Tool oder über andere
+      Opt-Out-Funktionen. Sie können auch die Datenerfassung durch Cookies verhindern, indem Sie in Ihrem Browser die
+      Cookies verwalten, deaktivieren oder löschen. Unter Webdesign-Elementen (meistens bei Schriftarten) gibt es
+      allerdings
+      auch Daten, die nicht ganz so einfach gelöscht werden können. Das ist dann der Fall, wenn Daten direkt bei einem
+      Seitenaufruf automatisch erhoben und an einen Drittanbieter (wie z. B. Google) übermittelt werden. Wenden Sie sich
+      dann bitte an den Support des entsprechenden Anbieters. Im Fall von Google erreichen Sie den Support unter <a
+        href="https://support.google.com/?hl=de">https://support.google.com/?hl=de</a>.</p>
+    <h3>Rechtsgrundlage</h3>
+    <p>Wenn Sie eingewilligt haben, dass Webdesign-Tools eingesetzt werden dürfen, ist die Rechtsgrundlage der
+      entsprechenden Datenverarbeitung diese Einwilligung. Diese Einwilligung stellt laut Art. 6 Abs. 1 lit. a DSGVO
+      (Einwilligung) die Rechtsgrundlage für die Verarbeitung personenbezogener Daten, wie sie bei der Erfassung durch
+      Webdesign-Tools vorkommen kann, dar. Von unserer Seite besteht zudem ein berechtigtes Interesse, das Webdesign auf
+      unserer Website zu verbessern. Schließlich können wir Ihnen nur dann ein schönes und professionelles Webangebot
+      liefern. Die dafür entsprechende Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO (Berechtigte Interessen). Wir setzen
+      Webdesign-Tools gleichwohl nur ein, soweit Sie eine Einwilligung erteilt haben. Das wollen wir hier auf jeden Fall
+      nochmals betonen.</p>
+    <p>Informationen zu speziellen Webdesign-Tools erhalten Sie &#8211; sofern vorhanden &#8211; in den folgenden
+      Abschnitten.</p>
+    <h2 id="google-fonts-datenschutzerklaerung">Google Fonts Datenschutzerklärung</h2>
+    <table border="1" cellpadding="15">
+      <tbody>
+        <tr>
+          <td>
+            <strong>Google Fonts Datenschutzerklärung Zusammenfassung</strong>
+            <br />
+            &#x1f465; Betroffene: Besucher der Website<br />
+            &#x1f91d; Zweck: Optimierung unserer Serviceleistung<br />
+            &#x1f4d3; Verarbeitete Daten: Daten wie etwa IP-Adresse und CSS- und Schrift-Anfragen<br />
+            Mehr Details dazu finden Sie weiter unten in dieser Datenschutzerklärung.<br />
+            &#x1f4c5; Speicherdauer: Font-Dateien werden bei Google ein Jahr gespeichert<br />
+            &#x2696;&#xfe0f; Rechtsgrundlagen: Art. 6 Abs. 1 lit. a DSGVO (Einwilligung), Art. 6 Abs. 1 lit. f DSGVO
+            (Berechtigte Interessen)
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>Was sind Google Fonts?</h3>
+    <p>Auf unserer Website verwenden wir Google Fonts. Das sind die &#8220;Google-Schriften&#8221; der Firma Google Inc.
+      Für
+      den europäischen Raum ist das Unternehmen Google Ireland Limited (Gordon House, Barrow Street Dublin 4, Irland) für
+      alle Google-Dienste verantwortlich.</p>
+    <p>Für die Verwendung von Google-Schriftarten müssen Sie sich nicht anmelden bzw. ein Passwort hinterlegen. Weiters
+      werden auch keine Cookies in Ihrem Browser gespeichert. Die Dateien (CSS, Schriftarten/Fonts) werden über die
+      Google-Domains fonts.googleapis.com und fonts.gstatic.com angefordert. Laut Google sind die Anfragen nach CSS und
+      Schriften vollkommen getrennt von allen anderen Google-Diensten. Wenn Sie ein Google-Konto haben, brauchen Sie keine
+      Sorge haben, dass Ihre Google-Kontodaten, während der Verwendung von Google Fonts, an Google übermittelt werden.
+      Google erfasst die Nutzung von CSS (Cascading Style Sheets) und der verwendeten Schriftarten und speichert diese
+      Daten
+      sicher. Wie die Datenspeicherung genau aussieht, werden wir uns noch im Detail ansehen.</p>
+    <p>Google Fonts (früher Google Web Fonts) ist ein Verzeichnis mit über 800 Schriftarten, die <a
+        href="https://de.wikipedia.org/wiki/Google_LLC?tid=112487332">Google</a> Ihren Nutzern
+      kostenlos zu Verfügung stellen.</p>
+    <p>Viele dieser Schriftarten sind unter der SIL Open Font License veröffentlicht, während andere unter
+      der Apache-Lizenz veröffentlicht wurden. Beides sind freie Software-Lizenzen.</p>
+    <h3>Warum verwenden wir Google Fonts auf unserer Website?</h3>
+    <p>Mit Google Fonts können wir auf der eigenen Webseite Schriften nutzen, und müssen sie nicht auf unserem eigenen
+      Server hochladen. Google Fonts ist ein wichtiger Baustein, um die Qualität unserer Webseite hoch zu halten. Alle
+      Google-Schriften sind automatisch für das Web optimiert und dies spart Datenvolumen und ist speziell für die
+      Verwendung bei mobilen Endgeräten ein großer Vorteil. Wenn Sie unsere Seite besuchen, sorgt die niedrige Dateigröße
+      für eine schnelle Ladezeit. Des Weiteren sind Google Fonts sichere Web Fonts. Unterschiedliche Bildsynthese-Systeme
+      (Rendering) in verschiedenen Browsern, Betriebssystemen und mobilen Endgeräten können zu Fehlern führen. Solche
+      Fehler
+      können teilweise Texte bzw. ganze Webseiten optisch verzerren. Dank des schnellen Content Delivery Network (CDN)
+      gibt
+      es mit Google Fonts keine plattformübergreifenden Probleme. Google Fonts unterstützt alle gängigen Browser (Google
+      Chrome, Mozilla Firefox, Apple Safari, Opera) und funktioniert zuverlässig auf den meisten modernen mobilen
+      Betriebssystemen, einschließlich Android 2.2+ und iOS 4.2+ (iPhone, iPad, iPod). Wir verwenden die Google Fonts
+      also,
+      damit wir unser gesamtes Online-Service so schön und einheitlich wie möglich darstellen können.</p>
+    <h3>Welche Daten werden von Google gespeichert?</h3>
+    <p>Wenn Sie unsere Webseite besuchen, werden die Schriften über einen Google-Server nachgeladen. Durch diesen externen
+      Aufruf werden Daten an die Google-Server übermittelt. So erkennt Google auch, dass Sie bzw. Ihre IP-Adresse unsere
+      Webseite besucht. Die Google Fonts API wurde entwickelt, um Verwendung, Speicherung und Erfassung von Endnutzerdaten
+      auf das zu reduzieren, was für eine ordentliche Bereitstellung von Schriften nötig ist. API steht übrigens für
+      „Application Programming Interface“ und dient unter anderem als Datenübermittler im Softwarebereich.</p>
+    <p>Google Fonts speichert CSS- und Schrift-Anfragen sicher bei Google und ist somit geschützt. Durch die gesammelten
+      Nutzungszahlen kann Google feststellen, wie gut die einzelnen Schriften ankommen. Die Ergebnisse veröffentlicht
+      Google
+      auf internen Analyseseiten, wie beispielsweise Google Analytics. Zudem verwendet Google auch Daten des eigenen
+      Web-Crawlers, um festzustellen, welche Webseiten Google-Schriften verwenden. Diese Daten werden in der
+      BigQuery-Datenbank von Google Fonts veröffentlicht. Unternehmer und Entwickler nützen das
+      Google-Webservice BigQuery,
+      um große Datenmengen untersuchen und bewegen zu können.</p>
+    <p>Zu bedenken gilt allerdings noch, dass durch jede Google Font Anfrage auch Informationen wie Spracheinstellungen,
+      IP-Adresse, Version des Browsers, Bildschirmauflösung des Browsers und Name des Browsers automatisch an die
+      Google-Server übertragen werden. Ob diese Daten auch gespeichert werden, ist nicht klar feststellbar bzw. wird von
+      Google nicht eindeutig kommuniziert.</p>
+    <h3>Wie lange und wo werden die Daten gespeichert?</h3>
+    <p>Anfragen für CSS-Assets speichert Google einen Tag lang auf seinen Servern, die hauptsächlich außerhalb der EU
+      angesiedelt sind. Das ermöglicht uns, mithilfe eines Google-Stylesheets die Schriftarten zu nutzen. Ein Stylesheet
+      ist
+      eine Formatvorlage, über die man einfach und schnell z.B. das Design bzw. die Schriftart einer Webseite ändern kann.
+    </p>
+    <p>Die Font-Dateien werden bei Google ein Jahr gespeichert. Google verfolgt damit das Ziel, die Ladezeit von Webseiten
+      grundsätzlich zu verbessern. Wenn Millionen von Webseiten auf die gleichen Schriften verweisen, werden sie nach dem
+      ersten Besuch zwischengespeichert und erscheinen sofort auf allen anderen später besuchten Webseiten wieder.
+      Manchmal
+      aktualisiert Google Schriftdateien, um die Dateigröße zu reduzieren, die Abdeckung von Sprache zu erhöhen und das
+      Design zu verbessern.</p>
+    <h3>Wie kann ich meine Daten löschen bzw. die Datenspeicherung verhindern?</h3>
+    <p>Jene Daten, die Google für einen Tag bzw. ein Jahr speichert können nicht einfach gelöscht werden. Die Daten werden
+      beim Seitenaufruf automatisch an Google übermittelt. Um diese Daten vorzeitig löschen zu können, müssen Sie den
+      Google-Support auf <a
+        href="https://support.google.com/?hl=de&amp;tid=112487332">https://support.google.com/?hl=de&amp;tid=112487332</a>
+      kontaktieren. Datenspeicherung verhindern Sie in diesem Fall nur, wenn Sie unsere Seite nicht besuchen.</p>
+    <p>Anders als andere Web-Schriften erlaubt uns Google uneingeschränkten Zugriff auf alle Schriftarten. Wir können also
+      unlimitiert auf ein Meer an Schriftarten zugreifen und so das Optimum für unsere Webseite rausholen. Mehr zu Google
+      Fonts und weiteren Fragen finden Sie auf <a
+        href="https://developers.google.com/fonts/faq?tid=112487332">https://developers.google.com/fonts/faq?tid=112487332</a>.
+      Dort geht zwar Google auf datenschutzrelevante Angelegenheiten ein, doch wirklich detaillierte Informationen über
+      Datenspeicherung sind nicht enthalten. Es ist relativ schwierig, von Google wirklich präzise Informationen über
+      gespeicherten Daten zu bekommen.</p>
+    <h3>Rechtsgrundlage</h3>
+    <p>Wenn Sie eingewilligt haben, dass Google Fonts eingesetzt werden darf, ist die Rechtsgrundlage der entsprechenden
+      Datenverarbeitung diese Einwilligung. Diese Einwilligung stellt laut<strong> Art. 6 Abs. 1
+        lit. a DSGVO (Einwilligung)</strong> die Rechtsgrundlage für die Verarbeitung personenbezogener Daten, wie sie bei
+      der Erfassung durch Google Fonts vorkommen kann, dar.</p>
+    <p>Von unserer Seite besteht zudem ein berechtigtes Interesse, Google Font zu verwenden, um unser Online-Service zu
+      optimieren. Die dafür entsprechende Rechtsgrundlage ist <strong>Art. 6 Abs. 1 lit. f DSGVO
+        (Berechtigte Interessen)</strong>. Wir setzen Google Font gleichwohl nur ein, soweit Sie eine Einwilligung erteilt
+      haben.</p>
+    <p>Google verarbeitet Daten von Ihnen u.a. auch in den USA. Wir weisen darauf hin, dass nach Meinung des Europäischen
+      Gerichtshofs derzeit kein angemessenes Schutzniveau für den Datentransfer in die USA besteht. Dies kann mit
+      verschiedenen Risiken für die Rechtmäßigkeit und Sicherheit der Datenverarbeitung einhergehen.</p>
+    <p>Als Grundlage der Datenverarbeitung bei Empfängern mit Sitz in Drittstaaten (außerhalb der Europäischen Union,
+      Island, Liechtenstein, Norwegen, also insbesondere in den USA) oder einer Datenweitergabe dorthin verwendet Google
+      sogenannte Standardvertragsklauseln (= Art. 46. Abs. 2 und 3 DSGVO). Standardvertragsklauseln (Standard Contractual
+      Clauses – SCC) sind von der EU-Kommission bereitgestellte Mustervorlagen und sollen sicherstellen, dass Ihre Daten
+      auch dann den europäischen Datenschutzstandards entsprechen, wenn diese in Drittländer (wie beispielsweise in die
+      USA)
+      überliefert und dort gespeichert werden. Durch diese Klauseln verpflichtet sich Google, bei der Verarbeitung Ihrer
+      relevanten Daten, das europäische Datenschutzniveau einzuhalten, selbst wenn die Daten in den USA gespeichert,
+      verarbeitet und verwaltet werden. Diese Klauseln basieren auf einem Durchführungsbeschluss der EU-Kommission. Sie
+      finden den Beschluss und die entsprechenden Standardvertragsklauseln u.a. hier: <a
+        href="https://eur-lex.europa.eu/eli/dec_impl/2021/914/oj?locale=de" target="_blank"
+        rel="noopener">https://eur-lex.europa.eu/eli/dec_impl/2021/914/oj?locale=de</a>
+    </p>
+    <p>Die Google Ads Datenverarbeitungsbedingungen (Google Ads Data Processing Terms), welche auch den
+      Standardvertragsklauseln für Google Fonts entsprechen, finden Sie unter <a
+        href="https://business.safety.google/adsprocessorterms/" target="_blank"
+        rel="noopener">https://business.safety.google/adsprocessorterms/</a>.</p>
+    <p>Welche Daten grundsätzlich von Google erfasst werden und wofür diese Daten verwendet werden, können Sie auch auf <a
+        href="https://policies.google.com/privacy?hl=de&amp;tid=112487332">https://www.google.com/intl/de/policies/privacy/</a>
+      nachlesen.</p>
+    <h2 id="erklaerung-verwendeter-begriffe">Erklärung verwendeter Begriffe</h2>
+    <p>Wir sind stets bemüht unsere Datenschutzerklärung so klar und verständlich wie möglich zu verfassen. Besonders bei
+      technischen und rechtlichen Themen ist das allerdings nicht immer ganz einfach. Es macht oft Sinn juristische
+      Begriffe
+      (wie z. B. personenbezogene Daten) oder bestimmte technische Ausdrücke (wie z. B. Cookies, IP-Adresse) zu verwenden.
+      Wir möchte diese aber nicht ohne Erklärung verwenden. Nachfolgend finden Sie nun eine alphabetische Liste von
+      wichtigen verwendeten Begriffen, auf die wir in der bisherigen Datenschutzerklärung vielleicht noch nicht
+      ausreichend
+      eingegangen sind. Falls diese Begriffe der DSGVO entnommen wurden und es sich um Begriffsbestimmungen handelt,
+      werden
+      wir hier auch die DSGVO-Texte anführen und gegebenenfalls noch eigene Erläuterungen hinzufügen.</p>
+    <h2 id="auftragsverarbeiter">Auftragsverarbeiter</h2>
+    <p>
+      <strong>Begriffsbestimmung nach Artikel 4 der DSGVO</strong>
+    </p>
+    <p>Im Sinne dieser Verordnung bezeichnet der Ausdruck:</p>
+    <blockquote>
+      <p>
+        <em>
+          <strong>„Auftragsverarbeiter“</strong> eine natürliche oder juristische Person,
+          Behörde, Einrichtung oder andere Stelle, die personenbezogene Daten im Auftrag des Verantwortlichen
+          verarbeitet;</em>
+      </p>
+    </blockquote>
+    <p>
+      <strong>Erläuterung:</strong> Wir sind als Unternehmen und Websiteinhaber für alle Daten,
+      die wir von Ihnen verarbeiten verantwortlich. Neben den Verantwortlichen kann es auch sogenannte Auftragsverarbeiter
+      geben. Dazu zählt jedes Unternehmen bzw. jede Person, die in unserem Auftrag personenbezogene Daten verarbeitet.
+      Auftragsverarbeiter können folglich, neben Dienstleistern wie Steuerberater, etwa auch Hosting- oder Cloudanbieter,
+      Bezahlungs- oder Newsletter-Anbieter oder große Unternehmen wie beispielsweise Google oder Microsoft sein.
+    </p>
+    <h2 id="einwilligung">Einwilligung</h2>
+    <p>
+      <strong>Begriffsbestimmung nach Artikel 4 der DSGVO</strong>
+    </p>
+    <p>Im Sinne dieser Verordnung bezeichnet der Ausdruck:</p>
+    <blockquote>
+      <p>
+        <em>
+          <strong>„Einwilligung“</strong> der betroffenen Person jede freiwillig für den
+          bestimmten Fall, in informierter Weise und unmissverständlich abgegebene Willensbekundung in Form einer
+          Erklärung
+          oder einer sonstigen eindeutigen bestätigenden Handlung, mit der die betroffene Person zu verstehen gibt, dass
+          sie
+          mit der Verarbeitung der sie betreffenden personenbezogenen Daten einverstanden ist;</em>
+      </p>
+    </blockquote>
+    <p>
+      <strong>Erläuterung: </strong>In der Regel erfolgt bei Websites eine solche Einwilligung
+      über ein Cookie-Consent-Tool. Sie kennen das bestimmt. Immer wenn Sie erstmals eine Website besuchen, werden Sie
+      meist
+      über einen Banner gefragt, ob Sie der Datenverarbeitung zustimmen bzw. einwilligen. Meist können Sie auch
+      individuelle
+      Einstellungen treffen und so selbst entscheiden, welche Datenverarbeitung Sie erlauben und welche nicht. Wenn Sie
+      nicht einwilligen, dürfen auch keine personenbezogene Daten von Ihnen verarbeitet werden. Grundsätzlich kann eine
+      Einwilligung natürlich auch schriftlich, also nicht über ein Tool, erfolgen.
+    </p>
+    <h2 id="personenbezogene-daten">Personenbezogene Daten</h2>
+    <p>
+      <strong>Begriffsbestimmung nach Artikel 4 der DSGVO</strong>
+    </p>
+    <p>Im Sinne dieser Verordnung bezeichnet der Ausdruck:</p>
+    <blockquote>
+      <p>
+        <strong>
+          <em>„personenbezogene Daten“</em>
+        </strong>
+        <em> alle Informationen, die sich auf eine identifizierte oder identifizierbare natürliche Person (im Folgenden
+          „betroffene Person“) beziehen; als identifizierbar wird eine natürliche Person angesehen, die direkt oder
+          indirekt, insbesondere mittels Zuordnung zu einer Kennung wie einem Namen, zu einer Kennnummer, zu
+          Standortdaten,
+          zu einer Online-Kennung oder zu einem oder mehreren besonderen Merkmalen, die Ausdruck der physischen,
+          physiologischen, genetischen, psychischen, wirtschaftlichen, kulturellen oder sozialen Identität dieser
+          natürlichen Person sind, identifiziert werden kann;</em>
+      </p>
+    </blockquote>
+    <p>
+      <strong>Erläuterung:</strong> Personenbezogene Daten sind also all jene Daten, die Sie als
+      Person identifizieren können. Das sind in der Regel Daten wie etwa:
+    </p>
+    <ul>
+      <li>Name</li>
+      <li>Adresse</li>
+      <li>E-Mail-Adresse</li>
+      <li>Post-Anschrift</li>
+      <li>Telefonnummer</li>
+      <li>Geburtsdatum</li>
+      <li>Kennnummern wie Sozialversicherungsnummer, Steueridentifikationsnummer,
+        Personalausweisnummer oder Matrikelnummer</li>
+      <li>Bankdaten wie Kontonummer, Kreditinformationen, Kontostände uvm.</li>
+    </ul>
+    <p>Laut Europäischem Gerichtshof (EuGH) zählt auch Ihre <strong>IP-Adresse zu den
+        personenbezogenen Daten</strong>. IT-Experten können anhand Ihrer IP-Adresse zumindest den ungefähren Standort
+      Ihres
+      Geräts und in weiterer Folge Sie als Anschlussinhabers feststellen. Daher benötigt auch das Speichern einer
+      IP-Adresse
+      eine Rechtsgrundlage im Sinne der DSGVO. Es gibt auch noch sogenannte <strong>„besondere
+        Kategorien“</strong> der personenbezogenen Daten, die auch besonders schützenswert sind. Dazu zählen:</p>
+    <ul>
+      <li>rassische und ethnische Herkunft</li>
+      <li>politische Meinungen</li>
+      <li>religiöse bzw. weltanschauliche Überzeugungen</li>
+      <li>die Gewerkschaftszugehörigkeit</li>
+      <li>genetische Daten wie beispielsweise Daten, die aus Blut- oder Speichelproben entnommen
+        werden</li>
+      <li>biometrische Daten (das sind Informationen zu psychischen, körperlichen oder
+        verhaltenstypischen Merkmalen, die eine Person identifizieren können).<br />
+        Gesundheitsdaten</li>
+      <li>Daten zur sexuellen Orientierung oder zum Sexualleben</li>
+    </ul>
+    <h2 id="profiling">Profiling</h2>
+    <p>
+      <strong>Begriffsbestimmung nach Artikel 4 der DSGVO</strong>
+    </p>
+    <p>Im Sinne dieser Verordnung bezeichnet der Ausdruck:</p>
+    <blockquote>
+      <p>
+        <em>
+          <strong>„Profiling“</strong> jede Art der automatisierten Verarbeitung
+          personenbezogener Daten, die darin besteht, dass diese personenbezogenen Daten verwendet werden, um bestimmte
+          persönliche Aspekte, die sich auf eine natürliche Person beziehen, zu bewerten, insbesondere um Aspekte
+          bezüglich
+          Arbeitsleistung, wirtschaftliche Lage, Gesundheit, persönliche Vorlieben, Interessen, Zuverlässigkeit,
+          Verhalten,
+          Aufenthaltsort oder Ortswechsel dieser natürlichen Person zu analysieren oder vorherzusagen;</em>
+      </p>
+    </blockquote>
+    <p>
+      <strong>Erläuterung:</strong> Beim Profiling werden verschiedene Informationen über eine
+      Person zusammengetragen, um daraus mehr über diese Person zu erfahren. Im Webbereich wird Profiling häufig für
+      Werbezwecke oder auch für Bonitätsprüfungen angewandt. Web- bzw. Werbeanalyseprogramme sammeln zum Beispiel Daten
+      über
+      Ihre Verhalten und Ihre Interessen auf einer Website. Daraus ergibt sich ein spezielles Userprofil, mit dessen Hilfe
+      Werbung gezielt an eine Zielgruppe ausgespielt werden kann.
+    </p>
+
+    <h2 id="verantwortlicher">Verantwortlicher</h2>
+    <p>
+      <strong>Begriffsbestimmung nach Artikel 4 der DSGVO</strong>
+    </p>
+    <p>Im Sinne dieser Verordnung bezeichnet der Ausdruck:</p>
+    <blockquote>
+      <p>
+        <em>
+          <strong>„Verantwortlicher“</strong> die natürliche oder juristische Person, Behörde,
+          Einrichtung oder andere Stelle, die allein oder gemeinsam mit anderen über die Zwecke und Mittel der
+          Verarbeitung
+          von personenbezogenen Daten entscheidet; sind die Zwecke und Mittel dieser Verarbeitung durch das Unionsrecht
+          oder
+          das Recht der Mitgliedstaaten vorgegeben, so kann der Verantwortliche beziehungsweise können die bestimmten
+          Kriterien seiner Benennung nach dem Unionsrecht oder dem Recht der Mitgliedstaaten vorgesehen werden;</em>
+      </p>
+    </blockquote>
+    <p>
+      <strong>Erläuterung:</strong> In unserem Fall sind wir für die Verarbeitung Ihrer
+      personenbezogenen Daten verantwortlich und folglich der &#8220;Verantwortliche&#8221;. Wenn wir erhobene Daten zur
+      Verarbeitung an andere Dienstleister weitergeben, sind diese &#8220;Auftragsverarbeiter&#8221;. Dafür muss ein
+      &#8220;Auftragsverarbeitungsvertrag (AVV)&#8221; unterzeichnet werden.
+    </p>
+
+    <h2 id="verarbeitung">Verarbeitung</h2>
+    <p>
+      <strong>Begriffsbestimmung nach Artikel 4 der DSGVO</strong>
+    </p>
+    <p>Im Sinne dieser Verordnung bezeichnet der Ausdruck:</p>
+    <blockquote>
+      <p>
+        <strong>
+          <em>„Verarbeitung“</em>
+        </strong>
+        <em> jeden mit oder ohne Hilfe automatisierter Verfahren ausgeführten Vorgang oder jede solche Vorgangsreihe im
+          Zusammenhang mit personenbezogenen Daten wie das Erheben, das Erfassen, die Organisation, das Ordnen, die
+          Speicherung, die Anpassung oder Veränderung, das Auslesen, das Abfragen, die Verwendung, die Offenlegung durch
+          Übermittlung, Verbreitung oder eine andere Form der Bereitstellung, den Abgleich oder die Verknüpfung, die
+          Einschränkung, das Löschen oder die Vernichtung;</em>
+      </p>
+    </blockquote>
+    <p>
+      <strong>Anmerkung: </strong>Wenn wir in unserer Datenschutzerklärung von Verarbeitung
+      sprechen, meinen wir damit jegliche Art von Datenverarbeitung. Dazu zählt, wie oben in der originalen
+      DSGVO-Erklärung
+      erwähnt, nicht nur das Erheben sondern auch das Speichern und Verarbeiten von Daten.
+    </p>
+    <h2 id="schlusswort">Schlusswort</h2>
+    <p>Herzlichen Glückwunsch! Wenn Sie diese Zeilen lesen, haben Sie sich wirklich durch unsere gesamte
+      Datenschutzerklärung „gekämpft“ oder zumindest bis hier hin gescrollt. Wie Sie am Umfang unserer
+      Datenschutzerklärung
+      sehen, nehmen wir den Schutz Ihrer persönlichen Daten, alles andere als auf die leichte Schulter.<br />
+      Uns ist es wichtig, Sie nach bestem Wissen und Gewissen über die Verarbeitung personenbezogener Daten zu
+      informieren.
+      Dabei wollen wir Ihnen aber nicht nur mitteilen, welche Daten verarbeitet werden, sondern auch die Beweggründe für
+      die
+      Verwendung diverser Softwareprogramme näherbringen. In der Regel klingen Datenschutzerklärung sehr technisch und
+      juristisch. Da die meisten von Ihnen aber keine Webentwickler oder Juristen sind, wollten wir auch sprachlich einen
+      anderen Weg gehen und den Sachverhalt in einfacher und klarer Sprache erklären. Immer ist dies natürlich aufgrund
+      der
+      Thematik nicht möglich. Daher werden die wichtigsten Begriffe am Ende der Datenschutzerklärung näher
+      erläutert.<br />
+      Bei Fragen zum Thema Datenschutz auf unserer Website zögern Sie bitte nicht, uns oder die verantwortliche Stelle zu
+      kontaktieren. Wir wünschen Ihnen noch eine schöne Zeit und hoffen, Sie auf unserer Website bald wieder begrüßen zu
+      dürfen.</p>
+    <p>Alle Texte sind urheberrechtlich geschützt.</p>
+    <p>Quelle: Erstellt mit dem <a href="https://www.adsimple.at/datenschutz-generator/"
+        title="Datenschutz Generator von AdSimple für Österreich">
+      Datenschutz Generator</a> von AdSimple
+    </p>
+    </v-card-text>
+  </v-card>
+  </div>
+</template>
+
+<script>
+definePageMeta({
+  id: 4,
+  pageTransition: false
+})
+
+export default {
+  name: 'ImprintPage'
+}
+</script>
+
+<style scoped>
+ul, h1, h2, h3, h4, h5, h6 {
+  margin-bottom: 1rem;
+}
+
+p,
+table {
+  margin-bottom: 2rem;
+}
+
+li {
+  margin-left: 2rem;
+}
+</style>

pages/index.vue

@@ -6,26 +6,39 @@
       </span>
     </v-col>
     <v-col cols="12" class="my-6">
-      <p class="text-body-1 text-md-h6 text-medium-emphasis" style="max-width: 550px;">
-        I'm a Software Developer based in Vienna, Austria.<br/>
-        I develop various types of applications.
-        Explore my <NuxtLink to="/portfolio">portfolio</NuxtLink> to view a showcase of my projects.
-      </p>
+      <i18n-t
+        keypath="introduction"
+        tag="p"
+        class="text-body-1 text-md-h6 text-medium-emphasis"
+        style="max-width: 550px;"
+      >
+        <template v-slot:portfolio>
+          <NuxtLink to="/portfolio">{{ $t('portfolio') }}</NuxtLink>
+        </template>
+      </i18n-t>
     </v-col>
     <v-col cols="12">
       <v-btn
         variant="outlined"
         color="primary"
         prepend-icon="mdi-email-outline"
-        :href="`mailto:<${$myEmail}>`"
+        :href="`mailto:<${$config.public.myEmail}>`"
       >
-        Get in touch
+        {{ $t('getInTouch') }}
       </v-btn>
     </v-col>
   </v-row>
 </template>
 
 <script>
+definePageMeta({
+  id: 1,
+  pageTransition: {
+    name: 'slide',
+    mode: 'out-in'
+  }
+})
+
 export default {
   name: 'IndexPage'
 }

pages/portfolio.vue

@@ -1,104 +1,81 @@
 <template>
-  <ImageCarousel ref="imageCarousel" />
+  <div>
     <v-row>
       <v-col cols="12">
-      <span class="text-h5 font-weight-medium">Some of my projects</span>
+        <v-sheet
+          width="100%"
+          color="transparent"
+          class="d-flex flex-no-wrap justify-space-between"
+          :class="view === 'horizontal' ? 'page-content' : ''"
+        >
+          <span class="text-h5 font-weight-medium">
+            {{ $t('portfolioTitle') }}
+          </span>
+          <v-btn-toggle
+            v-model="selectedViewIndex"
+            mandatory
+            density="compact"
+            color="primary"
+          >
+            <v-btn>
+              <v-icon icon="mdi-view-sequential" color="white"></v-icon>
+            </v-btn>
+            <v-btn>
+              <v-icon icon="mdi-view-column" color="white"></v-icon>
+            </v-btn>
+          </v-btn-toggle>
+        </v-sheet>
       </v-col>
-    <v-col v-for="(project, index) of projects" :key="index" cols="12" lg="4" md="6">
-      <v-card height="100%" class="d-flex flex-column">
-        <v-carousel
-          v-model="carouselIndex[index]"
-          :show-arrows="project.images.length > 1 ? 'hover' : false"
-          :hide-delimiters="project.images.length <= 1"
-          hide-delimiter-background
-          height="auto"
+      <v-col v-for="(project, index) of projects" :key="index"
+        :cols="viewCols.cols"
+        :sm="viewCols.sm"
+        :md="viewCols.md"
+        :lg="viewCols.lg"
+        :xl="viewCols.xl"
       >
-          <v-carousel-item v-for="image of project.images" :key="image"
-            :src="`${cdn}${image}`"
-            @click="showImageCarousel(project.images, carouselIndex[index])"
-          ></v-carousel-item>
-        </v-carousel>
-        <v-card-item>
-          <v-card-title class="d-flex">
-            <span>{{ project.title }}</span>
-            <v-spacer></v-spacer>
-            <v-btn
-              v-if="project.repoUrl"
-              variant="text"
-              icon="mdi-github"
-              density="comfortable"
-              color="on-surface"
-              :href="`https://${project.repoUrl}`"
-              target="_blank"
-              class="link"
+        <ProjectCard
+          :view="view"
+          :title="project.title"
+          :subtitle="project.subtitle"
+          :description="project.description"
+          :overline="project.overline"
+          :tech="project.tech"
+          :images="project.images"
+          :links="project.links"
         />
-            <v-btn
-              v-if="project.projectUrl"
-              variant="text"
-              icon="mdi-open-in-new"
-              density="comfortable"
-              color="on-surface"
-              :href="`https://${project.projectUrl}`"
-              target="_blank"
-              class="link"
-            />
-          </v-card-title>
-          <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
-        </v-card-item>
-        <v-spacer></v-spacer>
-        <v-card-text>{{ $t(project.description) }}</v-card-text>
-        <v-spacer></v-spacer>
-        <v-card-actions class="d-flex flex-row flex-wrap justify-center align-center">
-          <img v-for="t of project.tech" :key="tech[t].title"
-            :src="generateBadgen(tech[t].title, tech[t].iconUrl)"
-            :height="20"
-            class="ma-1"
-          />
-
-          <!-- colored badges
-          <img v-for="t of project.tech" :key="tech[t].title"
-            :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].iconUrl}${tech[t].color}&label`"
-            :height="20"
-            class="ma-1"
-          />
-          -->
-
-          <!-- colored badges w/ links to brand websites
-          <a v-for="t of project.tech" :key="tech[t].title"
-            :href="`https://${tech[t].projectUrl}`"
-            target="_blank"
-          >
-            <img v-for="t of project.tech" :key="tech[t].title"
-              :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].iconUrl}${tech[t].color}&label`"
-              :height="20"
-              class="ma-1"
-            />
-          </a>
-          -->
-
-        </v-card-actions>
-      </v-card>
       </v-col>
     </v-row>
+  </div>
 </template>
 
 <script>
-import { badgen } from 'badgen'
-import { siAndroid, siAmazonaws, siMicrosoftazure, siFirebase, siGithub,
-  siHeroku, siCoffeescript, siYoutubegaming, siMysql, siNuxtdotjs, siPhp,
-  siVuedotjs, siVuetify, siIbmwatson, siWordpress } from 'simple-icons'
+definePageMeta({
+  id: 3,
+  pageTransition: {
+    name: 'slide',
+    mode: 'out-in'
+  }
+})
+
+const runtimeConfig = useRuntimeConfig()
 
 export default {
-  name: 'PortfolioComponent',
+  name: 'PortfolioPage',
   data: () => ({
-    cdn: 'https://d29l6egdxvgg9c.cloudfront.net/',
+    selectedViewIndex: 0,
+    views: {
+      horizontal: 0,
+      vertical: 1
+    },
     projects: [
       {
-        title: 'Torii SRS (v2-beta)',
-        subtitle: 'Progressive Web App',
+        title: 'Torii SRS (v2)',
+        subtitle: 'Progressive Web App (SPA)',
         description: 'toriiWeb',
-        tech: ['vue2', 'vuetify2', 'mysql', 'php', 'aws', 'azure', 'watson', 'heroku'],
-        projectUrl: 'beta.torii-srs.com',
+        tech: ['js', 'vue', 'vuetify', 'mysql', 'php', 'aws', 'azure', 'watson', 'heroku'],
+        links: [
+          { url: 'beta.torii-srs.com', icon: 'mdi-open-in-new' }
+        ],
         images: [
           'torii-v2-01.jpg', 'torii-v2-03.jpg', 'torii-v2-04.jpg',
           'torii-v2-05.jpg', 'torii-v2-06.jpg', 'torii-v2-07.jpg',
@@ -107,10 +84,13 @@ export default {
       },
       {
         title: 'Torii SRS (v1)',
-        subtitle: 'Cross-platform app',
+        subtitle: 'Cross-Platform App',
         description: 'toriiJava',
+        overline: 'toriiInfo',
         tech: ['java', 'libgdx', 'mysql', 'php', 'aws', 'wordpress'],
-        projectUrl: 'torii-srs.com',
+        links: [
+          { url: 'torii-srs.com', icon: 'mdi-open-in-new' }
+        ],
         images: [
           'torii-v1-1.jpg', 'torii-v1-2.png', 'torii-v1-3.png',
           'torii-v1-4.png', 'torii-v1-5.png', 'torii-v1-6.png'
@@ -118,154 +98,70 @@ export default {
       },
       {
         title: 'IU Quiz App',
-        subtitle: 'Web App',
+        subtitle: 'Web App (SPA)',
         description: 'iuQuizApp',
-        tech: ['nuxt2', 'vuetify2', 'firebase'],
-        repoUrl: 'github.com/Rakantor/iu-quiz-app',
-        projectUrl: 'iu-quiz-app.web.app',
+        tech: ['js', 'vue', 'nuxt', 'vuetify', 'firebase'],
+        links: [
+          { url: 'iu-quiz-app.web.app', icon: 'mdi-open-in-new' },
+          { url: 'github.com/Rakantor/iu-quiz-app', icon: 'mdi-github' },
+          { url: `${runtimeConfig.public.cdn}iu-quiz-app-projektbericht.pdf`, icon: 'mdi-file-pdf-box' }
+        ],
         images: ['iu-quiz-app-2.jpg']
       },
       {
         title: 'Menacing Blue',
-        subtitle: 'Cross-platform app',
+        subtitle: 'Cross-Platform App',
         description: 'pmb',
         tech: ['java', 'libgdx'],
         images: ['pmb-6.png', 'pmb-1.png', 'pmb-2.png', 'pmb-3.png', 'pmb-4.png', 'pmb-5.png', 'pmb-7.jpg']
       },
       {
         title: 'Personal Website',
-        subtitle: 'Web App',
+        subtitle: 'Web App (SPA)',
         description: 'personalWebsite',
-        tech: ['nuxt3', 'vuetify3', 'ghpages'],
-        repoUrl: 'github.com/Rakantor/personal-portfolio',
-        projectUrl: 'mave.dev',
-        images: ['personal-website-1.jpg']
+        tech: ['ts', 'vue', 'nuxt', 'vuetify', 'ghpages'],
+        links: [
+          { url: 'mave.dev', icon: 'mdi-open-in-new' },
+          { url: 'github.com/Rakantor/personal-portfolio', icon: 'mdi-github' }
+        ],
+        images: ['personal-website-1.jpg'],
       },
       {
         title: 'IU Gamer App',
-        subtitle: 'Android app',
+        subtitle: 'Android App',
         description: 'iuGamerApp',
-        tech: ['android', 'firebase'],
-        repoUrl: 'github.com/Rakantor/iubh-gamer-app',
-        images: []
-      }
+        tech: ['java', 'android', 'firebase'],
+        links: [
+          { url: 'github.com/Rakantor/iubh-gamer-app', icon: 'mdi-github' }
         ],
-    tech: {
-      android: {
-        title: 'Android',
-        color: '3DDC84',
-        iconUrl: siAndroid,
-      },
-      aws: {
-        title: 'AWS',
-        color: '232F3E',
-        iconUrl: siAmazonaws,
-      },
-      azure: {
-        title: 'Azure',
-        color: '0078D4',
-        iconUrl: siMicrosoftazure,
-      },
-      firebase: {
-        title: 'Firebase',
-        color: 'FFCA28',
-        iconUrl: siFirebase,
-      },
-      ghpages: {
-        title: 'GH Pages',
-        color: '222222',
-        iconUrl: siGithub,
-      },
-      heroku: {
-        title: 'Heroku',
-        color: '430098',
-        iconUrl: siHeroku,
-      },
-      java: {
-        title: 'Java',
-        color: 'FF7800',
-        iconUrl: siCoffeescript,
-      },
-      libgdx: {
-        title: 'libGDX',
-        color: '990000',
-        iconUrl: siYoutubegaming,
-      },
-      mysql: {
-        title: 'MySQL',
-        color: '4479A1',
-        iconUrl: siMysql,
-      },
-      nuxt2: {
-        title: 'Nuxt 2',
-        color: '00DC82',
-        iconUrl: siNuxtdotjs,
-      },
-      nuxt3: {
-        title: 'Nuxt 3',
-        color: '00DC82',
-        iconUrl: siNuxtdotjs,
-      },
-      php: {
-        title: 'PHP',
-        color: '777BB4',
-        iconUrl: siPhp,
-      },
-      vue2: {
-        title: 'Vue 2',
-        color: '4FC08D',
-        iconUrl: siVuedotjs,
-      },
-      vuetify2: {
-        title: 'Vuetify 2',
-        color: '1867C0',
-        iconUrl: siVuetify,
-      },
-      vuetify3: {
-        title: 'Vuetify 3',
-        color: '1867C0',
-        iconUrl: siVuetify,
-      },
-      watson: {
-        title: 'Watson',
-        color: 'BE95FF',
-        iconUrl: siIbmwatson,
-      },
-      wordpress: {
-        title: 'WordPress',
-        color: '21759B',
-        iconUrl: siWordpress,
+        images: ['iu-gamer-app-1.jpg', 'iu-gamer-app-2.jpg']
       }
-    },
-    carouselIndex: []
+    ]
   }),
-  methods: {
-    generateBadgen (label, iconUrl) {
-      // const iconColor = iconUrl.hex
-      const iconColor = 'FFFFFF'
-      const iconSvg = iconUrl.svg.replace('<path ', `<path fill="#${iconColor}" `)
-      const svg = badgen({
-        label: '',
-        status: label,
-        // color: iconColor,
-        color: this.$vuetify.theme.current.colors.backgroundTertiary.slice(1),
-        style: 'classic',
-        icon: `data:image/svg+xml;utf8,${encodeURIComponent(iconSvg)}`
-      })
-
-      return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
+  computed: {
+    cdn () {
+      return this.$config.public.cdn
     },
-    showImageCarousel (images, carouselIndex) {
-      this.$refs.imageCarousel.images = images.map(i => this.cdn+i)
-      this.$refs.imageCarousel.index = carouselIndex
-      this.$refs.imageCarousel.show = true
+    viewCols () {
+      const horizontal = {
+        cols: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+        xl: 12
+      }
+      const vertical = {
+        cols: 12,
+        sm: 6,
+        md: 6,
+        lg: 4,
+        xl: 4
+      }
+      return this.view === 'horizontal' ? horizontal : vertical
+    },
+    view () {
+      return this.selectedViewIndex === this.views.horizontal && this.$vuetify.display.smAndUp ? 'horizontal' : 'vertical'
     }
   }
 }
 </script>
-
-<style>
-path {
-    fill: #fff !IMPORTANT;
-}
-</style>

plugins/vuetify.ts

@@ -47,8 +47,12 @@ export default defineNuxtPlugin(nuxtApp => {
     blueprint: md3,
     defaults: {
       VCard: {
+        border: 'sm',
         elevation: 0
       },
+      VCarousel: {
+        color: 'primary'
+      }
     },
     theme: {
       // customVariables: ['~/assets/variables.scss'],
@@ -67,8 +71,4 @@ export default defineNuxtPlugin(nuxtApp => {
   })
 
   nuxtApp.vueApp.use(vuetify)
-
-  // Define global variables
-  nuxtApp.provide('myName', 'Manuel Veigel')
-  nuxtApp.provide('myEmail', 'maveigel@gmail.com')
 })