added fun animated profile pic on the about me page

src/App.vue

@@ -61,11 +61,10 @@ const isDev = import.meta.env.DEV;
     <div class="relative">
       <label
         for="locale"
-        class="absolute text-sm -top-2 bg-primary-lightest dark:bg-accent-darkest left-3 px-1 transition-transform duration-200"
+        class="absolute text-sm text-primary-darker dark:text-primary-light -top-2 bg-primary-lightest dark:bg-accent-darkest left-3 px-1 transition-transform duration-200"
       >
         {{ $t('locale.select') }}
       </label>
-      <!-- class="h-12 px-2 rounded-lg bg-transparent border border-primary dark:border-primary text-primary dark:text-primary"> -->
       <select
         id="locale"
         v-model="$i18n.locale"

src/assets/base.css

@@ -48,7 +48,6 @@
     --color-secondary: 117 204 132;
     --color-secondary-darker: 79 158 110;
     --color-secondary-darkest: 41 112 88;
-    /* --color-secondary-darkest: 117 204 132; */
 
     --color-accent-lightest: 209 239 244;
     --color-accent-light: 110 186 201;

src/i18n/en.json

@@ -126,6 +126,7 @@
     },
     "about": {
         "heading": "About me",
+        "imageAlt": "June smiling broadly in front of a colorful background",
         "body": [
             "Hi there! I'm June, born in the cold winter months north in Norway, but with a summery name. I am a passionate full-stack developer, and as a woman in tech, I navigate the ever-evolving world of programming with an insatiable curiosity and a determination to break barriers.",
             "At the heart of my professional journey is the art of crafting intuitive and accessible solutions. Whether it be a user-friendly frontend application with inclusive and accessible features, or a robust internal API offering a seamless developer experience, I thrive on creating meaningful solutions.",

src/i18n/no.json

@@ -126,6 +126,7 @@
     },
     "about": {
         "heading": "Om meg",
+        "imageAlt": "June som smiler bredt forran en fargerik bakgrunn",
         "body": [
             "Heihei! Jeg heter June - født i de kalde vitermånedene i Nord-Norge, men med et navn som iallefall på englesk er varmt og sommerlig. Jeg er en engasjert fullstack-utvikler, og som kvinne innen tech er navigerer jeg den raskt utviklende verden av programmering med masse nysgjerrighet, er opptatt av å bryte ned barrierer.",
             "Kjernen av min yrkesreise er å skape intuitive og tilgjengelige løsninger. Enten det dreier seg om en brukervennlig frontend-applikasjon med inklusivt design, eller et solid internt API som gir en smidig utvikleropplevelse. Jeg er glad i å utvikle solide og meningsfylte løsninger.",

src/views/AboutView.vue

@@ -7,20 +7,32 @@ import { useI18n } from "vue-i18n";
 const i18n = useI18n();
 
 let aboutStrings: string[] = [];
-// TODO: Figure out ESLint Identifier Expected error
+
 updateData();
 watchEffect(() => updateData());
 
 function updateData() {
   aboutStrings = i18n.tm('about.body') as string[];
 }
-
-
 </script>
 
-<template> 
-  <div class="space-y-4">
-    <h2>{{ $t('about.heading') }}</h2>
+<template>
+  <div class="w-1/5">
+    <div class="image-container m-6 float-left relative w-full aspect-[1/1.15] flex items-end rounded-b-full overflow-hidden transform transition-transform duration-250 ease-linear hover:scale-105">
+      <img
+        alt="" 
+        src="@/assets/images/background-1.webp"
+        class="absolute rounded-full aspect-square w-full object-cover"
+      >  
+      <img
+        alt="{{ $t('about.imageAlt') }}"
+        src="@/assets/images/june-smily.webp"
+        class="primary-image relative z-[2] transform transition-transform duration-200 w-full translate-y-[33%] hover:translate-y-[30%]"
+      >
+    </div>
+  </div>
+  <h2>{{ $t('about.heading') }}</h2>
+  <div class="space-y-4 mt-4">
     <div
       v-for="(item, index) in aboutStrings"
       :key="index"
@@ -30,4 +42,8 @@ function updateData() {
   </div>
 </template>
 
-<style></style>
+<style scoped>
+.image-container {
+	shape-outside: polygon(0 0, 65% 0, 70% 15%, 85% 25%, 100% 50%, 95% 75%, 75% 95%, 50% 100%, 0 100%);
+}
+</style>