feat: ui informations

4 years ago · 36ea4dde31
10 changed files with 214 additions and 19 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,11 @@
      "name": "marsal.cv",
      "version": "0.0.0",
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-brands-svg-icons": "^6.1.1",
+        "@fortawesome/free-regular-svg-icons": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "@fortawesome/vue-fontawesome": "^3.0.1",
        "pinia": "^2.0.14",
        "vue": "^3.2.37",
        "vue-i18n": "^9.1.10"
@ -509,6 +514,72 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.1.tgz",
+      "integrity": "sha512-CdXZJoCS+aEPec26ZP7hWWU3SaJlQPZSCGdgpQ2qGl2HUmtUUNrI3zC4XWdn1JUmh3t5OuDeRG1qB4eGRNSD4A==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.9.5",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@ -4677,6 +4748,49 @@
        }
      }
    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.1.tgz",
+      "integrity": "sha512-CdXZJoCS+aEPec26ZP7hWWU3SaJlQPZSCGdgpQ2qGl2HUmtUUNrI3zC4XWdn1JUmh3t5OuDeRG1qB4eGRNSD4A==",
+      "requires": {}
+    },
    "@humanwhocodes/config-array": {
      "version": "0.9.5",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
--- a/package.json
+++ b/package.json
@ -10,6 +10,11 @@
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
    "pinia": "^2.0.14",
    "vue": "^3.2.37",
    "vue-i18n": "^9.1.10"
--- a/src/App.vue
+++ b/src/App.vue
@ -34,7 +34,7 @@ import MyExperiences from "@/components/experiences/MyExperiences.vue";

 .left {
  margin: 8px;
-  flex-grow: 0.3;
+  width: 320px;
  flex-shrink: 0;
  border-right: 1px solid gray;
  display: flex;
@ -42,8 +42,8 @@ import MyExperiences from "@/components/experiences/MyExperiences.vue";
 }

 .right {
-  flex-grow: 0.7;
-  flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
  margin: 8px;
  display: flex;
  flex-direction: column;
--- a/src/components/common/LeftSection.vue
+++ b/src/components/common/LeftSection.vue
@ -19,16 +19,21 @@ defineProps<{
 .wrapper {
  display: flex;
  flex-direction: column;
-  margin-bottom: 12px;
+  margin-bottom: 14px;
 }
 .title {
-  font-size: 18px;
+  font-size: 24px;
  font-weight: bolder;
-  font-variant: titling-caps;
+  font-variant: small-caps;
  text-transform: capitalize;
  background-color: lightblue;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 8px;
+  text-align: center;
 }
 .body {
  flex: 1;
+  padding: 8px 16px;
 }
 </style>
--- a/src/components/education/EducationItem.vue
+++ b/src/components/education/EducationItem.vue
@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { Diploma } from "@/data/types";
+defineProps<{
+  data: Diploma;
+}>();
+</script>
+<template>
+  <div>
+    {{ data.degree }} - {{ data.title }}<br />
+    {{ data.year }} {{ data.location }}
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "EducationItem",
+};
+</script>
+
+<style scoped></style>
--- a/src/components/education/MyEducation.vue
+++ b/src/components/education/MyEducation.vue
@ -1,13 +1,15 @@
 <script setup lang="ts">
 import LeftSection from "@/components/common/LeftSection.vue";
+import EducationItem from "@/components/education/EducationItem.vue";
 </script>

 <template>
  <LeftSection :title="$t('section.education')">
-    <div v-for="info in infos.education" :key="info.year">
-      {{ info.degree }} {{ info.title }}<br />
-      {{ info.year }} {{ info.location }}
-    </div>
+    <EducationItem
+      v-for="item in infos.education"
+      :data="item"
+      :key="item.year"
+    />
  </LeftSection>
 </template>

--- a/src/components/informations/MyInformations.vue
+++ b/src/components/informations/MyInformations.vue
@ -4,9 +4,25 @@ import LeftSection from "@/components/common/LeftSection.vue";

 <template>
  <LeftSection :title="$t('section.information')">
-    <div v-for="line in infos.address" :key="line">{{ line }}</div>
-    <div>{{ infos.phoneNumber }}</div>
-    <div>{{ $t("age", { age: age() }) }}</div>
+    <div class="line">
+      <font-awesome-icon icon="fa-solid fa-at" />
+      <div>{{ infos.email }}</div>
+    </div>
+    <div class="line">
+      <font-awesome-icon icon="fa-solid fa-house-chimney" />
+      <div class="address">
+        <div v-for="line in infos.address" :key="line">{{ line }}</div>
+      </div>
+    </div>
+    <div class="line">
+      <font-awesome-icon icon="fa-solid fa-phone" />
+      <div>{{ infos.phoneNumber }}</div>
+    </div>
+    <div class="line">
+      <div></div>
+      <div>{{ $t("age", { age: age() }) }}</div>
+    </div>
+    <div class="line"></div>
  </LeftSection>
 </template>

@ -27,4 +43,20 @@ export default {
 };
 </script>

-<style scoped></style>
+<style scoped>
+.line {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  font-size: 18px;
+  margin-bottom: 6px;
+}
+
+.address {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-direction: column;
+}
+</style>
--- a/src/data/informations.ts
+++ b/src/data/informations.ts
@ -4,6 +4,7 @@ const informations = (): Information => {
  return {
    firstName: "Nicolas",
    lastName: "Marsal",
+    email: "nicolas.marsal@gmail.com",
    address: ["25 rue de la Moselle", "31100 Toulouse"],
    birthDay: new Date(1982, 11, 3),
    education: [
--- a/src/data/types.ts
+++ b/src/data/types.ts
@ -36,6 +36,7 @@ export interface Information {
  lastName: string;
  address: string[];
  phoneNumber: string;
+  email: string;
  birthDay: Date;
  education: Diploma[];
  hobbies: Hobby[];
--- a/src/main.ts
+++ b/src/main.ts
@ -5,6 +5,21 @@ import App from "./App.vue";

 import "./assets/main.css";

+import { library } from "@fortawesome/fontawesome-svg-core";
+
+/* import font awesome icon component */
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+/* import specific icons */
+import {
+  faAt,
+  faHouseChimney,
+  faPhone,
+} from "@fortawesome/free-solid-svg-icons";
+
+/* add icons to the library */
+library.add(faAt, faHouseChimney, faPhone);
+
 const i18n = createI18n({
  locale: "fr",
  messages: {
@ -23,8 +38,8 @@ const i18n = createI18n({
  },
 });

-const app = createApp(App);
-
-app.use(createPinia());
-app.use(i18n);
-app.mount("#app");
+createApp(App)
+  .use(createPinia())
+  .component("font-awesome-icon", FontAwesomeIcon)
+  .use(i18n)
+  .mount("#app");