Enhance deployment scripts and frontend components for improved functionality and styling

- Added dependency installation step in deploy-frontend.sh and update-frontend.sh to ensure all required packages are available before building the frontend.
- Updated AppNavigation.vue to change background color for better visual appeal.
- Refactored FamilyView.vue to include 3D character models for both the user and their relationships, enhancing the visual representation of family dynamics.
- Modified OverviewView.vue to switch from 3D character rendering to a 2D avatar display, improving loading performance and user experience.

frontend/src/views/falukant/OverviewView.vue

@@ -117,10 +117,11 @@
             </div>
         </div>
         <div v-if="falukantUser?.character" class="imagecontainer">
-            <div class="character-3d-wrapper">
-                <Character3D 
-                    :gender="falukantUser.character.gender" 
-                    :age="falukantUser.character.age" 
+            <div class="character-2d-wrapper">
+                <img 
+                    :src="`/images/falukant/avatar/${falukantUser.character.gender}.png`"
+                    :alt="falukantUser.character.gender"
+                    class="character-2d-image"
                 />
             </div>
             <div :style="getHouseStyle" class="house"></div>
@@ -130,7 +131,6 @@
 
 <script>
 import StatusBar from '@/components/falukant/StatusBar.vue';
-import Character3D from '@/components/Character3D.vue';
 import apiClient from '@/utils/axios.js';
 import { mapState } from 'vuex';
 
@@ -139,7 +139,6 @@ export default {
     name: 'FalukantOverviewView',
     components: {
         StatusBar,
-        Character3D,
     },
     data() {
         return {
@@ -337,7 +336,7 @@ export default {
     gap: 20px;
 }
 
-.character-3d-wrapper {
+.character-2d-wrapper {
     width: 300px;
     height: 400px;
     border: 1px solid #ccc;
@@ -346,6 +345,13 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
+}
+
+.character-2d-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
 }
 
 .house {