Added language toggle feature and English component variants

src/App.vue

@@ -1,27 +1,53 @@
 <script setup>
-  import CertComponent from './components/CertComponent.vue';
-  import ExpComponent from './components/ExpComponent.vue';
-  import InfoComp from './components/InfoComponent.vue';
-  import VoluntaryWorkComponent from './components/VoluntaryWorkComponent.vue';
-  import { useColorMode, useDark, useToggle } from '@vueuse/core';
+import CertComponent from './components/CertComponent.vue';
+import CertComponentEng from './components/CertComponentEng.vue';
+import ExpComponent from './components/ExpComponent.vue';
+import ExpComponentEng from './components/ExpComponentEng.vue';
+import InfoComp from './components/InfoComponent.vue';
+import VoluntaryWorkComponent from './components/VoluntaryWorkComponent.vue';
+import VoluntaryWorkComponentEng from './components/VoluntaryWorkComponentEng.vue';
+import { useColorMode, useDark, useToggle } from '@vueuse/core';
+import { ref } from 'vue';
 
-  const isDark = useDark();
-  const toggleDark = useToggle(isDark);
-  const colorMode = useColorMode();
+const isDark = useDark();
+const toggleDark = useToggle(isDark);
+const colorMode = useColorMode();
+
+const sweLang = ref(true);
+function toggleLanguage() {
+  sweLang.value = !sweLang.value;
+};
 </script>
 <template>
   <div class="darkButton">
+    <button @click="toggleLanguage" class="button">
+      <span v-if="sweLang">Swe</span>
+      <span v-else>Eng</span>
+    </button>
     <button @click="toggleDark()" class="button">
       <span v-if="isDark">Light mode</span>
       <span v-else>Dark mode</span>
     </button>
+
   </div>
   <InfoComp myName="Amin Yassin" />
-  <ExpComponent></ExpComponent>
-  <br />
-  <VoluntaryWorkComponent></VoluntaryWorkComponent>
-  <br />
-  <CertComponent></CertComponent>
+  <div v-if="sweLang">
+
+    <ExpComponent></ExpComponent>
+    <br />
+    <VoluntaryWorkComponent></VoluntaryWorkComponent>
+    <br />
+    <CertComponent></CertComponent>
+  </div>
+  <div v-else>
+    <ExpComponentEng></ExpComponentEng>
+    <br />
+    <VoluntaryWorkComponentEng></VoluntaryWorkComponentEng>
+    <br />
+    <CertComponentEng></CertComponentEng>
+
+  </div>
+
 </template>
 
 <style>

src/components/CertComponentEng.vue

@@ -0,0 +1,56 @@
+<template>
+    <h3 id="section">Certificates</h3>
+    <div id="certSection">
+        <ol>
+            <li id="certItems" v-for="item in certItems">
+                {{ item.role }} - {{ item.organisation }} - {{ item.date }}
+            <li id="desc" v-for="r in item.desc">
+                {{ r }}
+            </li>
+            </li>
+        </ol>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'certifications',
+    data() {
+        return {
+            certItems: [
+                {
+                    role: 'Azure Fundamentals Certificate',
+                    organisation: 'Microsoft',
+                    date: '2022',
+                    desc: [
+                        'Able to demonstrate foundational knowledge of cloud concepts in general and Microsoft Azure in particular.'
+                    ],
+                }
+            ],
+        }
+    }
+};
+
+</script>
+
+<style>
+#section {
+    font-size: xx-large;
+    text-align: left;
+    padding-left: 15px;
+}
+
+#certItems {
+    font-weight: bold;
+    list-style-type: none;
+}
+
+#desc {
+    font-weight: normal;
+    list-style-type: square;
+}
+
+#certSection {
+    padding: 25px;
+}
+</style>

src/components/ExpComponentEng.vue

@@ -0,0 +1,79 @@
+<template>
+    <h3 id="section">Work Experience</h3>
+    <div id="workSection">
+        <ol>
+            <li id="workItems" v-for="item in workItems">
+                {{ item.role }} - {{ item.company }} - {{ item.date }}
+            <li id="responsibilities" v-for="r in item.responsibilities">
+                {{ r }}
+            </li>
+            <br />
+            </li>
+        </ol>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'exp',
+    data() {
+        return {
+            workItems: [
+                {
+                    role: 'IT Consultant',
+                    company: 'Experis AB',
+                    date: '2023-04 - Current',
+                    responsibilities: [
+                    'Introduced, implemented and until today maintaining an attendance web app (Vue.js, .NET Core web API, Azure SQL DB, Azure Web App Service) to facilitate co-working at the office',
+                    'Competence development within design, development, and life cycle management of REST APIs',
+                    'Parental leave between Aug - Dec 2023'
+                    ],
+                },
+                {
+                    role: 'Software developer',
+                    company: 'Formpipe Software AB',
+                    date: '2019-03 - 2023-04',
+                    responsibilities: [
+                        'Developed and maintained custom controls using C# and Javascript (in ASP.NET)',
+                        'Maintained case and document management systems',
+                        'Investigated the feasibility of using new product in market',
+                        'Wrote and maintained over a dozen database scripts for data visualization',
+                        'Mentored two colleagues'
+                    ],
+                },
+                {
+                    role: 'Technical support',
+                    company: 'Barkfors Fleet AB',
+                    date: '2020-05 - 2020-11',
+                    responsibilities: [
+                    'Investigated reported issues on Barkfors’ transportation application for several customers',
+                    'Assisted and solved reported incidents from customers',
+                    'Deployed newer versions of T5 to customers’ environments'
+                    ],
+                },
+            ],
+        }
+    }
+};
+
+</script>
+
+<style>
+#section {
+    font-size: xx-large;
+}
+
+#workItems {
+    font-weight: bold;
+    list-style-type: none;
+}
+
+#responsibilities {
+    font-weight: normal;
+    list-style-type: square;
+}
+
+#workSection {
+    padding: 25px;
+}
+</style>

src/components/VoluntaryWorkComponentEng.vue

@@ -0,0 +1,54 @@
+<template>
+    <h3 id="section">Volunteering work</h3>
+    <div id="voluntarySection">
+        <ol>
+            <li id="volItems" v-for="item in voluntaryItems">
+                {{ item.role }} - {{ item.organisation }} - {{ item.date }}
+            <li id="responsibilities" v-for="r in item.responsibilities">
+                {{ r }}
+            </li>
+            </li>
+        </ol>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'voluntaryWork',
+    data() {
+        return {
+            voluntaryItems: [
+                {
+                    role: 'Soccer coach',
+                    organisation: 'VSK',
+                    date: '2013 - 2019',
+                    responsibilities: [
+                        'Planned and executed training sessions and coordinated car pooling to soccer matches for teenagers aged 10 - 12 years old.'
+                    ],
+                }
+            ],
+        }
+    }
+};
+
+</script>
+
+<style>
+#section {
+    font-size: xx-large;
+}
+
+#volItems {
+    font-weight: bold;
+    list-style-type: none;
+}
+
+#responsibilities {
+    font-weight: normal;
+    list-style-type: square;
+}
+
+#voluntarySection {
+    padding: 25px;
+}
+</style>