added about me content, updated format of image

Kahera · Dec 12, 2023 · 0d0f8b2 · 0d0f8b2
1 parent 164a23f
commit 0d0f8b2
Show file tree

Hide file tree

Showing 14 changed files with 554 additions and 489 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -3,12 +3,18 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': [
-    'plugin:vue/vue3-essential',
+  extends: [
     'eslint:recommended',
-    '@vue/eslint-config-typescript'
+    '@vue/eslint-config-typescript',
+    // "plugin:vue/base",
+    // "plugin:vue/vue3-essential",
+    // "plugin:vue/vue3-strongly-recommended",
+    "plugin:vue/vue3-recommended", // Covers the above 3
   ],
+  parser: "vue-eslint-parser",
   parserOptions: {
-    ecmaVersion: 'latest'
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 'latest',
+    sourceType: 'module'
   }
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,6 +10,13 @@
   "[css]": {
     "editor.defaultFormatter": "vscode.css-language-features"
   },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue"
+  ],
   "tailwindCSS.includeLanguages": {
     "vue": "html",
     "vue-html": "html",
@@ -19,4 +26,5 @@
     "src/i18n"
   ],
   "i18n-ally.keystyle": "nested",
+  "typescript.tsdk": "node_modules/typescript/lib",
 }
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
 - [ ] Add social links
 - [ ] Add landing page content
 - [ ] Add about content
-- [ ] Add i18n
+- [x] Add i18n
 - [ ] Make it look decent
 - [ ] ...
 

diff --git a/index.html b/index.html
@@ -3,9 +3,11 @@
 
 <head>
   <meta charset="UTF-8">
+  <meta name="description"
+    content="June Hansen, a fullstack developer from Norway, excels in Vue and Angular frontend, .NET backend, and Azure cloud services.">
   <link rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
-  <link rel="icon" href="/src/assets/images/Kahera.png">
+  <link rel="icon" href="/src/assets/images/Kahera.webp">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>June Hansen</title>
 </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,13 +29,14 @@
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
+    "eslint": "^8.55.0",
     "eslint-plugin-vue": "^9.15.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
     "typescript": "5.2",
     "vite": "^4.4.6",
+    "vue-eslint-parser": "^9.3.2",
     "vue-tsc": "^1.8.6"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -22,7 +22,7 @@ const isDev = import.meta.env.DEV;
   <header class="flex items-center space-x-4 md:space-x-8 mx-4 md:mx-6 my-2 md:my-4">
     <!-- Logo home-link -->
     <RouterLink to="/" class="flex sm:space-x-4 md:space-x-6 max-md:grow">
-      <img alt="{{ $t('common.JuneIcon') }}" src="@/assets/images/Kahera.png" class="max-h-12 max-sm:hidden" />
+      <img alt="{{ $t('common.JuneIcon') }}" src="@/assets/images/Kahera.webp" class="max-h-12 max-sm:hidden" />
       <h1 class="font-display font-bold text-center my-auto text-2xl sm:text-4xl text-primary dark:text-primary">
         {{ $t('common.JuneHansen') }}
       </h1>

diff --git a/src/assets/images/Kahera.png b/src/assets/images/Kahera.png
diff --git a/src/assets/images/Kahera.webp b/src/assets/images/Kahera.webp
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -124,18 +124,14 @@
             }
         ]
     },
-    "about": [
-        {
-            "heading": "About me",
-            "body": "hei"
-        },
-        {
-            "heading": "?",
-            "icon": "expand_more",
-            "body": "hei2"
-        },
-        {
-            "body": "hei3"
-        }
-    ]
+    "about": {
+        "heading": "About me",
+        "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.",
+            "Currently, my days are filled with the exciting challenges of front-end development using Angular and Vue, as well as resilient .NET backends. Embracing the cloud, I find myself in the azure skies of Azure, shaping scalable and efficient solutions. My toolkit also includes experience with various CI/CD solutions, lately with GitHub Actions as my current platform for automating processes such as testing, linting and deployments. No matter what challenge comes my way, I revel in finding robust solutions and relish the accompanying learning experience.",
+            "Academically, I hold dual bachelor's degrees—one in Programming and another in Administration and Management. With fluency in both Norwegian and English, a solid understanding of the other Nordic languages, and some grasp of German, I possess a diverse set of skills and insights that provides me with a holistic perspective, allowing me to seamlessly bridge the gap between technology and business.",
+            "When I have time off, I switch gears to more hands-on creativity. I’m a maker at heart, and love messing with both electronics, IoT projects and smart home solutions (where coding comes in handy!). In addition, I love 3D printing, sewing, woodworking, or doing house renovations. And when my energy stores runs out, I love sitting down with a good book. I believe maintaining a balance between using both hands and mind, fosters creativity in both realms."
+        ]
+    }
 }
diff --git a/src/i18n/no.json b/src/i18n/no.json
@@ -124,17 +124,14 @@
             }
         ]
     },
-    "about": [
-        {
-            "heading": "Om meg",
-            "body": "hei"
-        },
-        {
-            "heading": "?",
-            "body": "hei2"
-        },
-        {
-            "body": "hei3"
-        }
-    ]
+    "about": {
+        "heading": "Om meg",
+        "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.",
+            "For tiden brukes dagene mine på spennende utfordringer innen frontend-utvikling hvor jeg bruker Angular og Vue, samt backend-utvikling hvor jeg bygger robuste .NET-backender. I skyverden bruker jeg Azure, hvor jeg skaper skalerbare og effektive løsninger. I verktøybeltet mitt har jeg i tillegg ulike CI/CD-verktøy, med GitHub Actions som nåværende hovedverktøy for å automatisere prosesser som testing, linting og deployments. Uansett hvilken utfordring som dukker opp, er jeg glad i veien til å finne gode løsninger, og digger læringen som følger med.",
+            "Akademisk sett har jeg to bachelorgrader - en i programmering og en i administrasjon og ledelse. Dette, samt flytende engelsk og norsk, god forståelse for de andre nordiske språkene, og forståelse for tysk, har gitt meg et mangfoldig sett med ferdigheter og innsiketer, som gir meg et helhetlig perspektiv og lar meg gjøre sømløs brobygging mellom den teknologiske og den forretningsmessige verdenen.",
+            "På fritiden skifter jeg modus til mer praktisk krativitet. Jeg er en \"maker\", og elsker å eksprimentere med elektronikk, IoT og smarthjemløsninger (hvor koding kommer til nytte!). Jeg er også stor fan av 3D-printing, å søm, trearbeid og oppussing. Og når jeg går tom for energi, setter jeg meg gjerne med en god bok. Jeg tenker at å ha en balanse mellom å bruke både hendene og hodet fremmer kreativitet på begge områder."
+        ]
+    }
 }
diff --git a/src/models/IContent.ts b/src/models/IContent.ts
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
@@ -1,13 +1,28 @@
 <script setup lang="ts">
-import type { IContent } from '@/models/IContent';
+// Vue
+import { watchEffect } from 'vue';
+
+// i18n
+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">
-    <div v-for="(item, index) in ($tm('about') as IContent[])" :key="index">
-      <h2><span class="font-icon">{{ item.icon }}</span> {{ item.heading }}</h2>
-      <p>{{ item.body }}</p>
+    <h2>{{ $t('about.heading') }}</h2>
+    <div v-for="(item, index) in aboutStrings" :key="index">
+      <p>{{ item }}</p>
     </div>
   </div>
 </template>

diff --git a/src/views/ResumeView.vue b/src/views/ResumeView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 // Vue
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
 // Components
 import Button from '@/components/ButtonComponent.vue';
@@ -13,25 +13,23 @@ import gsap from 'gsap';
 import { usePrefersReducedMotion } from '@/utilities/prefers-reduced-motion';
 
 // Models
-import { type IEmployment } from '@/models/IEmployment';
-import { type IEducation } from '@/models/IEducation';
+// Models
+import type { IEmployment } from '@/models/IEmployment';
+import type { IEducation } from '@/models/IEducation';
+import type { IResumeItem } from '@/models/IResumeItem';
 
 // i18n
 import { useI18n } from "vue-i18n";
-import type { IResumeItem } from '@/models/IResumeItem';
 const i18n = useI18n();
 
 let educationRef = ref(<IEducation[]>[]);
 let jobsRef = ref(<IEmployment[]>[]);
 
-updateData();
-watch(() => i18n.locale.value, (newLocale, oldLocale) => {
-  updateData();
-});
+watchEffect(() => updateData());
 
 function updateData() {
-  jobsRef.value = i18n.tm('resume.jobs') as IEmployment[];
   educationRef.value = i18n.tm('resume.educations') as IEducation[];
+  jobsRef.value = i18n.tm('resume.jobs') as IEmployment[];
 }
 
 // Sort data by end date - most recent first, with current jobs at the top