src/App.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import MyCv from "@/components/cv/MyCv.vue";
-import DownloadIcon from "@/components/icons/DownloadIcon.vue";
 </script>
 
 <template>
-  <MyCv />
   <div class="menu">
-    <button onclick="window.downloadPdf()">
+    <button onclick="window.downloadPdf()">Download</button>
-      <DownloadIcon width="32" height="32" />
-    </button>
   </div>
+  <MyCv />
 </template>
 
 <script lang="ts">
@@ -24,7 +21,6 @@ export default defineComponent({
 .menu {
   display: flex;
   flex-direction: column;
-  padding-left: 12px;
+  padding-right: 12px;
-  padding-top: 6px;
 }
 </style>

src/assets/main.css

@@ -8,6 +8,8 @@
 .main {
     display: flex;
     flex-direction: row;
+    width: 1024px;
+    height: 100%;
 }
 
 .main-title {

src/assets/sheets-of-paper.css

@@ -30,7 +30,7 @@ html, body {
     /* Styles for better appearance on screens only -- are reset to defaults in print styles later */
 
     /* Divide single pages with some space and center all pages horizontally */
-    margin: 0;
+    margin: 0cm auto;
     /* Define a white paper background that sticks out from the darker overall background */
     background: #fff;
     /* Show a drop shadow beneath each page */

src/components/icons/DownloadIcon.vue

@@ -1,56 +0,0 @@
-<template>
-  <svg :width="width" :height="height" x="0px" y="0px" viewBox="0 0 32 32">
-    <line
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      x1="16"
-      y1="3"
-      x2="16"
-      y2="19"
-    />
-    <polyline
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      points="20,15 16,19 12,15 "
-    />
-    <polyline
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      points="9,13 3,16.5 3,21.5 16,29 29,21.5 29,16.5 23,13 "
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "DownloadIcon",
-  props: {
-    width: {
-      type: [Number, String],
-      default: 16,
-    },
-    height: {
-      type: [Number, String],
-      default: 16,
-    },
-    color: {
-      type: String,
-      default: "#000000",
-    },
-  },
-};
-</script>
-
-<style scoped></style>

src/components/icons/EmailIcon.vue

@@ -1,104 +0,0 @@
-<template>
-  <svg x="0px" y="0px" viewBox="0 0 32 32" :width="width" :height="height">
-    <rect
-      x="4"
-      y="7"
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      width="24"
-      height="18"
-    />
-    <polyline
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      points="8,11 16,18 24,11 "
-    />
-    <line
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      x1="13.7"
-      y1="16"
-      x2="8"
-      y2="21"
-    />
-    <line
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      x1="24"
-      y1="21"
-      x2="18.3"
-      y2="16"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "EmailIcon",
-  props: {
-    width: {
-      type: [Number, String],
-      default: 16,
-    },
-    height: {
-      type: [Number, String],
-      default: 16,
-    },
-    color: {
-      type: String,
-      default: "#000000",
-    },
-  },
-};
-</script>
-
-<style scoped>
-.st0 {
-  fill: none;
-  stroke: #000000;
-  stroke-width: 2;
-  stroke-miterlimit: 10;
-}
-.st1 {
-  fill: none;
-  stroke: #000000;
-  stroke-width: 2;
-  stroke-linejoin: round;
-  stroke-miterlimit: 10;
-}
-.st2 {
-  fill: none;
-  stroke: #000000;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-miterlimit: 10;
-}
-.st3 {
-  fill: none;
-  stroke: #000000;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-miterlimit: 10;
-}
-.st4 {
-  fill: none;
-  stroke: #000000;
-  stroke-width: 2;
-  stroke-linejoin: round;
-  stroke-miterlimit: 10;
-  stroke-dasharray: 3;
-}
-</style>

src/components/icons/HouseIcon.vue

@@ -1,35 +0,0 @@
-<template>
-  <svg :width="width" :height="height" x="0px" y="0px" viewBox="0 0 32 32">
-    <polyline
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      points="13.3,11.9 16,9 23.3,17 28,17 16,4 4,17 8,17 8,28 24,28 24,21 "
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "HouseIcon",
-  props: {
-    width: {
-      type: [Number, String],
-      default: 16,
-    },
-    height: {
-      type: [Number, String],
-      default: 16,
-    },
-    color: {
-      type: String,
-      default: "#000000",
-    },
-  },
-};
-</script>
-
-<style scoped></style>

src/components/icons/LinkedInIcon.vue

@@ -1,41 +0,0 @@
-<template>
-  <svg viewBox="0 0 72 72" :width="width" :height="height">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-376.000000, -267.000000)">
-        <g transform="translate(376.000000, 267.000000)">
-          <path
-            d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z"
-            id="Rounded"
-            :fill="color"
-          ></path>
-          <path
-            d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"
-            fill="#FFFFFF"
-          ></path>
-        </g>
-      </g>
-    </g>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "LinkedInIcon",
-  props: {
-    width: {
-      type: [Number, String],
-      default: 16,
-    },
-    height: {
-      type: [Number, String],
-      default: 16,
-    },
-    color: {
-      type: String,
-      default: "#007EBB",
-    },
-  },
-};
-</script>
-
-<style scoped></style>

src/components/icons/PhoneIcon.vue

@@ -1,77 +0,0 @@
-<template>
-  <svg :width="width" :height="height" x="0px" y="0px" viewBox="0 0 32 32">
-    <circle
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      cx="16"
-      cy="19"
-      r="3"
-    />
-    <path
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      d="M12.7,12h6.6c1.2,0,2.1,0.4,2.1,1.7v0c0,1.3,1,2.3,2.2,2.3H29c0-4.4-3.4-8-7.6-8H10.6C6.4,8,3,11.6,3,16h5.4
-	c1.2,0,2.2-1.1,2.2-2.3v0C10.6,12.4,11.5,12,12.7,12z"
-    />
-    <line
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      x1="23"
-      y1="25"
-      x2="23"
-      y2="27"
-    />
-    <line
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      x1="9"
-      y1="25"
-      x2="9"
-      y2="27"
-    />
-    <path
-      fill="none"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      d="M9,16c-1.5,2.4-3,6.1-3,9v0h20v0c0-2.9-1.5-6.6-3-9"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "PhoneIcon",
-  props: {
-    width: {
-      type: [Number, String],
-      default: 16,
-    },
-    height: {
-      type: [Number, String],
-      default: 16,
-    },
-    color: {
-      type: String,
-      default: "#000000",
-    },
-  },
-};
-</script>
-
-<style scoped></style>

src/components/informations/MyInformations.vue

@@ -1,24 +1,21 @@
 <script setup lang="ts">
 import LeftSection from "@/components/common/LeftSection.vue";
-import EmailIcon from "@/components/icons/EmailIcon.vue";
-import HouseIcon from "@/components/icons/HouseIcon.vue";
-import PhoneIcon from "@/components/icons/PhoneIcon.vue";
 </script>
 
 <template>
   <LeftSection :title="$t('section.information')">
     <div class="my-informations-line">
-      <EmailIcon width="20" height="20" />
+      <font-awesome-icon icon="fa-solid fa-at" />
       <div>{{ infos.email }}</div>
     </div>
     <div class="my-informations-line">
-      <HouseIcon width="20" height="20" />
+      <font-awesome-icon icon="fa-solid fa-house-chimney" />
       <div class="my-informations-address">
         <div v-for="line in infos.address" :key="line">{{ line }}</div>
       </div>
     </div>
     <div class="my-informations-line">
-      <PhoneIcon width="20" height="20" />
+      <font-awesome-icon icon="fa-solid fa-phone" />
       <div>{{ infos.phoneNumber }}</div>
     </div>
     <div class="my-informations-line">