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/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">