diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index dc51c01..6f40582 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,15 +1,15 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
+require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript",
-    "@vue/eslint-config-prettier",
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
   ],
   parserOptions: {
-    ecmaVersion: "latest",
-  },
-};
+    ecmaVersion: 'latest'
+  }
+}
diff --git a/src/components/LocaleSwitcher.vue b/src/components/LocaleSwitcher.vue
index a87397d..ab21fbd 100644
--- a/src/components/LocaleSwitcher.vue
+++ b/src/components/LocaleSwitcher.vue
@@ -1,43 +1,42 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import CircleCheckIcon from "@/assets/icons/CircleCheckIcon.vue";
-import CircleIcon from "@/assets/icons/CircleIcon.vue";
+import { computed } from 'vue'
+import CircleCheckIcon from '@/assets/icons/CircleCheckIcon.vue'
+import CircleIcon from '@/assets/icons/CircleIcon.vue'
 
 interface LocaleOption {
-  code: string;
-  name: string;
-  flag: string;
+  code: string
+  name: string
+  flag: string
 }
 
 interface Props {
-  modelValue: string;
-  id: string;
-  locales: LocaleOption[];
+  modelValue: string
+  id: string
+  locales: LocaleOption[]
 }
 
-const props = defineProps<Props>();
-const emit = defineEmits(["update:modelValue"]);
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
 
 const selectModel = computed({
   get() {
-    return props.modelValue;
+    return props.modelValue
   },
   set(value) {
-    emit("update:modelValue", value);
-  },
-});
+    emit('update:modelValue', value)
+  }
+})
 </script>
 
 <template>
   <div class="localeselect">
-    <div v-for="locale in locales" class="localeselect__locale">
+    <div v-for="locale in locales" class="localeselect__locale" :key="`locale-${locale.code}`">
       <input
         type="radio"
         name="lang"
         class="localeselect__input"
         :id="`lang-${locale.code}`"
         :value="locale.code"
-        :key="`locale-${locale.code}`"
         v-model="selectModel"
       />
       <label class="localeselect__label" :for="`lang-${locale.code}`">
diff --git a/src/components/SiteNavigation.vue b/src/components/SiteNavigation.vue
index a8a894e..b2201c4 100644
--- a/src/components/SiteNavigation.vue
+++ b/src/components/SiteNavigation.vue
@@ -1,8 +1,3 @@
-<script setup lang="ts">
-import router from "@/router";
-import { RouterLink } from "vue-router";
-</script>
-
 <template>
   <nav class="navigation">
     <div class="navigation__list">
diff --git a/src/views/AnatomyView.vue b/src/views/AnatomyView.vue
index 142ccfb..3440cfa 100644
--- a/src/views/AnatomyView.vue
+++ b/src/views/AnatomyView.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import RefImage from "@/components/RefImage.vue";
-import ColorTable from "@/components/ColorTable.vue";
+import RefImage from '@/components/RefImage.vue'
+import ColorTable from '@/components/ColorTable.vue'
 
 const colors = [
-  { name: "data.colors.front", value: "#e7c7b1" },
-  { name: "data.colors.limbs", value: "#493428" },
-  { name: "data.colors.back", value: "#422322" },
-  { name: "data.colors.spine", value: "#341c1c" },
-  { name: "data.colors.tissue", value: "#6bb9db" },
-  { name: "data.colors.spikes", value: "#f8ebdd" },
-  { name: "data.colors.eyesPrimary", value: "#a7eef1" },
-  { name: "data.colors.eyesSecondary", value: "#6dabd1" },
-];
+  { name: 'data.colors.front', value: '#e7c7b1' },
+  { name: 'data.colors.limbs', value: '#493428' },
+  { name: 'data.colors.back', value: '#422322' },
+  { name: 'data.colors.spine', value: '#341c1c' },
+  { name: 'data.colors.tissue', value: '#6bb9db' },
+  { name: 'data.colors.spikes', value: '#f8ebdd' },
+  { name: 'data.colors.eyesPrimary', value: '#a7eef1' },
+  { name: 'data.colors.eyesSecondary', value: '#6dabd1' }
+]
 </script>
 
 <template>
@@ -71,14 +71,15 @@ const colors = [
     </template>
 
     <template #caption>
-      {{ $t('anatomy.images.back.caption') }} &copy; <a href="http://twitter.com/sabertoofs">sabertoofs</a>
+      {{ $t('anatomy.images.back.caption') }} &copy;
+      <a href="http://twitter.com/sabertoofs">sabertoofs</a>
     </template>
   </RefImage>
 
   <ColorTable :colors="colors"></ColorTable>
 
   <section>
-    <p v-for="p in $tm('anatomy.paragraphs[0]')">{{ p }}</p>
+    <p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p>
   </section>
 
   <RefImage dropshadow>
@@ -151,12 +152,12 @@ const colors = [
     </template>
 
     <template #caption>
-      {{ $t("anatomy.images.front.caption") }} &copy;
+      {{ $t('anatomy.images.front.caption') }} &copy;
       <a href="http://twitter.com/sabertoofs">sabertoofs</a>
     </template>
   </RefImage>
 
   <section>
-    <p v-for="p in $tm('anatomy.paragraphs[1]')">{{ p }}</p>
+    <p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
   </section>
 </template>
diff --git a/src/views/CareerPathView.vue b/src/views/CareerPathView.vue
index 799e10e..0762133 100644
--- a/src/views/CareerPathView.vue
+++ b/src/views/CareerPathView.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import TimelineList from "@/components/TimelineList.vue";
-import TimelineItem from "@/components/TimelineItem.vue";
-import WhiskeyGlassIcon from "@/assets/icons/WhiskeyGlassIcon.vue";
-import TreeIcon from "@/assets/icons/TreeIcon.vue";
-import CarIcon from "@/assets/icons/CarIcon.vue";
-import HelmetSafetyIcon from "@/assets/icons/HelmetSafetyIcon.vue";
-import IndustryIcon from "@/assets/icons/IndustryIcon.vue";
-import TruckIcon from "@/assets/icons/TruckIcon.vue";
-import BoxesIcon from "@/assets/icons/BoxesIcon.vue";
+import TimelineList from '@/components/TimelineList.vue'
+import TimelineItem from '@/components/TimelineItem.vue'
+import WhiskeyGlassIcon from '@/assets/icons/WhiskeyGlassIcon.vue'
+import TreeIcon from '@/assets/icons/TreeIcon.vue'
+import CarIcon from '@/assets/icons/CarIcon.vue'
+import HelmetSafetyIcon from '@/assets/icons/HelmetSafetyIcon.vue'
+import IndustryIcon from '@/assets/icons/IndustryIcon.vue'
+import TruckIcon from '@/assets/icons/TruckIcon.vue'
+import BoxesIcon from '@/assets/icons/BoxesIcon.vue'
 
 const jobIcons = [
   WhiskeyGlassIcon,
@@ -16,18 +16,18 @@ const jobIcons = [
   HelmetSafetyIcon,
   IndustryIcon,
   TruckIcon,
-  BoxesIcon,
-];
+  BoxesIcon
+]
 </script>
 
 <template>
   <section>
     <h1>{{ $t(`${$route.meta.title}`) }}</h1>
-    <p v-for="p in $tm('career.paragraphs')">{{ p }}</p>
+    <p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
   </section>
 
   <TimelineList>
-    <TimelineItem v-for="(job, idx) in $tm('career.jobs')">
+    <TimelineItem v-for="(job, idx) in $tm('career.jobs')" :key="idx">
       <template #icon>
         <component :is="jobIcons[idx as number]"></component>
       </template>
diff --git a/src/views/GeneralView.vue b/src/views/GeneralView.vue
index 09377fd..1248114 100644
--- a/src/views/GeneralView.vue
+++ b/src/views/GeneralView.vue
@@ -1,50 +1,50 @@
 <script setup lang="ts">
-import DataTable from "@/components/DataTable.vue";
+import DataTable from '@/components/DataTable.vue'
 
-const dob = new Date("1987-12-08");
-const locale = "en-US";
+const dob = new Date('1987-12-08')
+const locale = 'en-US'
 const dateFormat = new Intl.DateTimeFormat(locale, {
-  year: "numeric",
-  month: "long",
-  day: "2-digit",
-});
+  year: 'numeric',
+  month: 'long',
+  day: '2-digit'
+})
 
-const height = 227;
-const weight = 175;
+const height = 227
+const weight = 175
 
 const toImperial = (cm: number): string => {
-  const realFeet = (cm * 0.3937) / 12;
-  const feet = Math.floor(realFeet);
-  const inches = Math.round((realFeet - feet) * 12);
+  const realFeet = (cm * 0.3937) / 12
+  const feet = Math.floor(realFeet)
+  const inches = Math.round((realFeet - feet) * 12)
 
-  return `${feet}'${inches}"`;
-};
+  return `${feet}'${inches}"`
+}
 
 const toInch = (cm: number): string => {
-  return `${Math.round(cm / 2.45)} in`;
-};
+  return `${Math.round(cm / 2.45)} in`
+}
 
 const toLbs = (kg: number): number => {
-  const nearExact = kg / 0.45359237;
-  const lbs = Math.floor(nearExact);
+  const nearExact = kg / 0.45359237
+  const lbs = Math.floor(nearExact)
 
-  return lbs;
-};
+  return lbs
+}
 
-const heads = ["data.general.heading[0]", "data.general.heading[1]"];
+const heads = ['data.general.heading[0]', 'data.general.heading[1]']
 const data = [
-  ["data.general.fullName[0]", "data.general.fullName[1]"],
-  ["data.general.dob[0]", dateFormat.format(dob)],
-  ["data.general.gender[0]", "data.general.gender[1]"],
-  ["data.general.height[0]", `${height} cm (${toImperial(height)})`],
-  ["data.general.weight[0]", `${weight} kg (${toLbs(weight)} lbs)`],
-];
+  ['data.general.fullName[0]', 'data.general.fullName[1]'],
+  ['data.general.dob[0]', dateFormat.format(dob)],
+  ['data.general.gender[0]', 'data.general.gender[1]'],
+  ['data.general.height[0]', `${height} cm (${toImperial(height)})`],
+  ['data.general.weight[0]', `${weight} kg (${toLbs(weight)} lbs)`]
+]
 
-const sexHeads = ["data.sexuality.heading[0]", "data.sexuality.heading[1]"];
+const sexHeads = ['data.sexuality.heading[0]', 'data.sexuality.heading[1]']
 const sexData = [
-  ["data.sexuality.identifiesAs[0]", "data.sexuality.identifiesAs[1]"],
-  ["data.sexuality.preferredRole[0]", "data.sexuality.preferredRole[1]"],
-];
+  ['data.sexuality.identifiesAs[0]', 'data.sexuality.identifiesAs[1]'],
+  ['data.sexuality.preferredRole[0]', 'data.sexuality.preferredRole[1]']
+]
 </script>
 
 <template>
@@ -55,17 +55,17 @@ const sexData = [
   <DataTable :headings="heads" :data="data"></DataTable>
 
   <section>
-    <h2>{{ $t("general.personality.heading") }}</h2>
-    <p v-for="p in $tm('general.personality.paragraphs')">{{ p }}</p>
+    <h2>{{ $t('general.personality.heading') }}</h2>
+    <p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p>
   </section>
 
   <section>
-    <h2>{{ $t("general.sexuality.heading") }}</h2>
+    <h2>{{ $t('general.sexuality.heading') }}</h2>
   </section>
 
   <DataTable :headings="sexHeads" :data="sexData"></DataTable>
 
   <section>
-    <p v-for="p in $tm('general.sexuality.paragraphs')">{{ p }}</p>
+    <p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
   </section>
 </template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f2b8e07..8d7d629 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import WelcomeHeader from "@/components/WelcomeHeader.vue";
+import WelcomeHeader from '@/components/WelcomeHeader.vue'
 </script>
 
 <template>
   <WelcomeHeader>
-    <template #main>{{ $t("welcomeHeader.mainTitle") }}</template>
-    <template #sub>{{ $t("welcomeHeader.subTitle") }}</template>
+    <template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
+    <template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
   </WelcomeHeader>
 
   <section>
-    <h3>{{ $t("home.heading") }}</h3>
+    <h3>{{ $t('home.heading') }}</h3>
 
-    <p v-for="p in $tm('home.paragraphs')">{{ p }}</p>
+    <p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
   </section>
 </template>