feat: better UI

src/App.vue

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

src/assets/main.css

@@ -8,8 +8,6 @@
 .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: 0cm auto;
+    margin: 0;
     /* 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

@@ -0,0 +1,56 @@
+<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

@@ -0,0 +1,104 @@
+<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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,41 @@
+<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

@@ -0,0 +1,77 @@
+<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,21 +1,24 @@
 <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">
-      <font-awesome-icon icon="fa-solid fa-at" />
+      <EmailIcon width="20" height="20" />
       <div>{{ infos.email }}</div>
     </div>
     <div class="my-informations-line">
-      <font-awesome-icon icon="fa-solid fa-house-chimney" />
+      <HouseIcon width="20" height="20" />
       <div class="my-informations-address">
         <div v-for="line in infos.address" :key="line">{{ line }}</div>
       </div>
     </div>
     <div class="my-informations-line">
-      <font-awesome-icon icon="fa-solid fa-phone" />
+      <PhoneIcon width="20" height="20" />
       <div>{{ infos.phoneNumber }}</div>
     </div>
     <div class="my-informations-line">