diff --git a/index.html b/index.html
index 11603f8..f76f28c 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>
-  <body>
-    <div id="app"></div>
+  <body class="document">
+    <div id="app" class="page"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index 87b10cb..3a320f6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,37 +6,53 @@ import MyHobbies from "@/components/informations/MyHobbies.vue";
 import MySkills from "@/components/skills/MySkills.vue";
 import MyExperiences from "@/components/experiences/MyExperiences.vue";
 import WordCloud from "@/components/common/WordCloud.vue";
+import LeftSection from "@/components/common/LeftSection.vue";
+import MyPresentation from "@/components/informations/MyPresentation.vue";
 </script>
 
 <template>
   <div class="main">
     <div class="left">
-      <div
-        style="
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 100%;
-        "
-      >
-        <WordCloud :width="250" :height="200"></WordCloud>
-      </div>
+      <div class="first-name">{{ informations.firstName }}</div>
+      <div class="last-name">{{ informations.lastName }}</div>
       <MyInformations />
+      <LeftSection :title="$t('section.skills')">
+        <div
+          style="
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 250px;
+            margin: -16px -20px;
+          "
+        >
+          <WordCloud :width="240" :height="200"></WordCloud>
+        </div>
+      </LeftSection>
       <MyEducation />
       <MyLanguages />
       <MyHobbies />
     </div>
     <div class="right">
-      <MySkills />
+      <div class="title">{{ informations.title }}</div>
+      <MyPresentation />
       <MyExperiences />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-export default {
+import { defineComponent } from "vue";
+import informations from "@/data/informations";
+
+export default defineComponent({
   name: "app",
-};
+  data() {
+    return {
+      informations: informations,
+    };
+  },
+});
 </script>
 <style scoped>
 .main {
@@ -46,11 +62,27 @@ export default {
   height: 100%;
 }
 
+.first-name {
+  font-size: 36px;
+  text-align: left;
+  padding-left: 16px;
+}
+.last-name {
+  font-size: 40px;
+  text-align: right;
+  margin-right: 16px;
+}
+
+.title {
+  font-size: 40px;
+  text-align: center;
+}
+
 .left {
   margin: 0;
   width: 250px;
   flex-shrink: 0;
-  border-right: 3px solid gray;
+  border-right: 1px solid gray;
   display: flex;
   flex-direction: column;
 }
diff --git a/src/assets/sheets-of-paper-a4.css b/src/assets/sheets-of-paper-a4.css
new file mode 100644
index 0000000..e360357
--- /dev/null
+++ b/src/assets/sheets-of-paper-a4.css
@@ -0,0 +1,33 @@
+/*!
+ * HTML-Sheets-of-Paper (https://github.com/delight-im/HTML-Sheets-of-Paper)
+ * Copyright (c) delight.im (https://www.delight.im/)
+ * Licensed under the MIT License (https://opensource.org/licenses/MIT)
+ */
+
+.page {
+    /* Styles for better appearance on screens only -- are reset to defaults in print styles later */
+
+    /* Reflect the paper width in the screen rendering (must match size from @page rule) */
+    width: 21cm;
+    /* Reflect the paper height in the screen rendering (must match size from @page rule) */
+    min-height: 29.7cm;
+
+    /* Reflect the actual page margin/padding on paper in the screen rendering (must match margin from @page rule) */
+    padding-left: 0cm;
+    padding-top: 0cm;
+    padding-right: 0cm;
+    padding-bottom: 0cm;
+}
+/* Use CSS Paged Media to switch from continuous documents to sheet-like documents with separate pages */
+@page {
+    /* You can only change the size, margins, orphans, widows and page breaks here */
+
+    /* Paper size and page orientation */
+    size: A4 portrait;
+
+    /* Margin per single side of the page */
+    margin-left: 2cm;
+    margin-top: 2cm;
+    margin-right: 2cm;
+    margin-bottom: 2cm;
+}
diff --git a/src/assets/sheets-of-paper.css b/src/assets/sheets-of-paper.css
new file mode 100644
index 0000000..20c4039
--- /dev/null
+++ b/src/assets/sheets-of-paper.css
@@ -0,0 +1,140 @@
+/*!
+ * HTML-Sheets-of-Paper (https://github.com/delight-im/HTML-Sheets-of-Paper)
+ * Copyright (c) delight.im (https://www.delight.im/)
+ * Licensed under the MIT License (https://opensource.org/licenses/MIT)
+ */
+
+html, body {
+    /* Reset the document's margin values */
+    margin: 0;
+    /* Reset the document's padding values */
+    padding: 0;
+    /* Use the platform's native font as the default */
+    font-family: "Roboto", -apple-system, "San Francisco", "Segoe UI", "Helvetica Neue", sans-serif;
+    /* Define a reasonable base font size */
+    font-size: 12pt;
+
+    /* Styles for better appearance on screens only -- are reset to defaults in print styles later */
+
+    /* Use a non-white background color to make the content areas stick out from the full page box */
+    background-color: #eee;
+}
+/* Styles that are shared by all elements */
+* {
+    /* Include the content box as well as padding and border for precise definitions */
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+.page {
+    /* 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: 1cm auto;
+    /* Define a white paper background that sticks out from the darker overall background */
+    background: #fff;
+    /* Show a drop shadow beneath each page */
+    box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2);
+    /* Override outline from user agent stylesheets */
+    outline: 0;
+}
+/* Defines a class for manual page breaks via inserted .page-break element */
+div.page-break {
+    page-break-after: always;
+}
+/* Simulates the behavior of manual page breaks from `print` mode in `screen` mode */
+@media screen {
+    /* Renders the border and shadow at the bottom of the upper virtual page */
+    div.page-break::before {
+        content: "";
+        display: block;
+        /* Give a sufficient height to this element so that its drop shadow is properly rendered */
+        height: 0.8cm;
+        /* Offset the negative extra margin at the left of the non-pseudo element */
+        margin-left: 0.5cm;
+        /* Offset the negative extra margin at the right of the non-pseudo element */
+        margin-right: 0.5cm;
+        /* Make the bottom area appear as a part of the page margins of the upper virtual page */
+        background-color: #fff;
+        /* Show a drop shadow beneath the upper virtual page */
+        box-shadow: 0 6px 5px rgba(75, 75, 75, 0.2);
+    }
+    /* Renders the empty space as a divider between the two virtual pages that are actually two parts of the same page */
+    div.page-break {
+        display: block;
+        /* Assign the intended height plus the height of the pseudo element */
+        height: 1.8cm;
+        /* Apply a negative margin at the left to offset the page margins of the page plus some negative extra margin to paint over the border and shadow of the page */
+        margin-left: -2.5cm;
+        /* Apply a negative margin at the right to offset the page margins of the page plus some negative extra margin to paint over the border and shadow of the page */
+        margin-right: -2.5cm;
+        /* Create the bottom page margin on the upper virtual page (minus the height of the pseudo element) */
+        margin-top: 1.2cm;
+        /* Create the top page margin on the lower virtual page */
+        margin-bottom: 2cm;
+        /* Let this page appear as empty space between the virtual pages */
+        background: #eee;
+    }
+}
+/* For top-level headings only */
+h1 {
+    /* Force page breaks after */
+    page-break-before: always;
+}
+/* For all headings */
+h1, h2, h3, h4, h5, h6 {
+    /* Avoid page breaks immediately */
+    page-break-after: avoid;
+}
+/* For all paragraph tags */
+p {
+    /* Reset the margin so that the text starts and ends at the expected marks */
+    margin: 0;
+}
+/* For adjacent paragraph tags */
+p + p {
+    /* Restore the spacing between the paragraphs */
+    margin-top: 0.5cm;
+}
+/* For links in the document */
+a {
+    /* Prevent colorization or decoration */
+    text-decoration: none;
+    color: black;
+}
+/* For tables in the document */
+table {
+    /* Avoid page breaks inside */
+    page-break-inside: avoid;
+}
+/* Use CSS Paged Media to switch from continuous documents to sheet-like documents with separate pages */
+@page {
+    /* You can only change the size, margins, orphans, widows and page breaks here */
+
+    /* Require that at least this many lines of a paragraph must be left at the bottom of a page */
+    orphans: 4;
+    /* Require that at least this many lines of a paragraph must be left at the top of a new page */
+    widows: 2;
+}
+/* When the document is actually printed */
+@media print {
+    html, body {
+        /* Reset the document's background color */
+        background-color: #fff;
+    }
+    .page {
+        /* Reset all page styles that have been for better screen appearance only */
+        /* Break cascading by using the !important rule */
+        /* These resets are absolute must-haves for the print styles and the specificity may be higher elsewhere */
+        width: initial !important;
+        min-height: initial !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        border: initial !important;
+        border-radius: initial !important;
+        background: initial !important;
+        box-shadow: initial !important;
+
+        /* Force page breaks after each .page element of the document */
+        page-break-after: always;
+    }
+}
diff --git a/src/components/common/LeftSection.vue b/src/components/common/LeftSection.vue
index b997174..8740062 100644
--- a/src/components/common/LeftSection.vue
+++ b/src/components/common/LeftSection.vue
@@ -19,7 +19,7 @@ defineProps<{
 .wrapper {
   display: flex;
   flex-direction: column;
-  margin-bottom: 14px;
+  /*margin-bottom: 14px;*/
 }
 .title {
   font-size: 24px;
@@ -39,7 +39,7 @@ defineProps<{
 .title::before,
 .title::after {
   content: "";
-  border-top: 3px solid gray;
+  border-top: 1px solid gray;
   width: 100%;
 }
 
diff --git a/src/components/common/RightSection.vue b/src/components/common/RightSection.vue
index 5f925a5..50caec4 100644
--- a/src/components/common/RightSection.vue
+++ b/src/components/common/RightSection.vue
@@ -38,7 +38,7 @@ defineProps<{
 .title::before,
 .title::after {
   content: "";
-  border-top: 3px solid gray;
+  border-top: 1px solid gray;
   width: 100%;
 }
 
diff --git a/src/components/common/WordCloud.vue b/src/components/common/WordCloud.vue
index e2b17d7..1f2c848 100644
--- a/src/components/common/WordCloud.vue
+++ b/src/components/common/WordCloud.vue
@@ -71,7 +71,7 @@ export default defineComponent({
       console.log(text);
     },
     computeWords() {
-      let words: (cloud.Word & { size: number; fixed?: boolean })[] =
+      const words: (cloud.Word & { size: number; fixed?: boolean })[] =
         Object.keys(skills)
           .map((p) => skills[p])
           .map((s) => ({ text: s.name, size: s.score }));
@@ -99,18 +99,18 @@ export default defineComponent({
         const range = 120 * (1 - ((s - min) / (max - min)) * 0.7);
         return Math.random() * range - range / 2;
       };
-      words = [
-        {
-          size: 30,
-          fixed: true,
-          text: "Nicolas Marsal",
-          rotate: -30,
-          padding: 6,
-          x: 0,
-          y: 0,
-        },
-        ...words,
-      ];
+      // words = [
+      //   {
+      //     size: 30,
+      //     fixed: true,
+      //     text: "Nicolas Marsal",
+      //     rotate: -30,
+      //     padding: 6,
+      //     x: 0,
+      //     y: 0,
+      //   },
+      //   ...words,
+      // ];
       cloud<{ size: number } & cloud.Word>()
         .size([this.width!, this.height!])
         .words(words)
diff --git a/src/components/experiences/MyExperiences.vue b/src/components/experiences/MyExperiences.vue
index 4e1fc14..a4f34f0 100644
--- a/src/components/experiences/MyExperiences.vue
+++ b/src/components/experiences/MyExperiences.vue
@@ -11,12 +11,12 @@ import RightSection from "@/components/common/RightSection.vue";
         :key="experience.company"
       >
         <div class="header">
-          <div class="role">{{ experience.role }}</div>
           <div class="company">
             {{ experience.company }}
-            <div class="date">
-              {{ experience.startAt }} - {{ experience.endAt }}
-            </div>
+          </div>
+          <div class="role">{{ experience.role }}</div>
+          <div class="date">
+            {{ experience.startAt }} - {{ experience.endAt }}
           </div>
         </div>
         <div class="missions">
@@ -57,6 +57,9 @@ export default defineComponent({
 .experience {
   margin-left: 20px;
 }
+.experience:first-child {
+  padding-top: 10px;
+}
 .experience:nth-child(n + 2) {
   padding-top: 20px;
 }
@@ -68,22 +71,30 @@ export default defineComponent({
 }
 .header {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: space-between;
   align-items: baseline;
+  border-bottom: 1px solid lightgray;
 }
 .role {
   font-size: larger;
+  flex-basis: 0;
+  flex-grow: 2;
+  text-align: center;
+  font-size: 22px;
 }
 .company {
   font-size: large;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
+  margin-right: auto;
+  flex-basis: 0;
+  flex-grow: 1;
 }
 .date {
   font-style: italic;
   font-size: small;
-  padding-left: 20px;
+  margin-left: auto;
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: right;
 }
 </style>
diff --git a/src/components/informations/MyPresentation.vue b/src/components/informations/MyPresentation.vue
new file mode 100644
index 0000000..c41f630
--- /dev/null
+++ b/src/components/informations/MyPresentation.vue
@@ -0,0 +1,21 @@
+<template>
+  <div style="padding-left: 20px; padding-top: 20px; padding-bottom: 8px">
+    {{ presentation }}
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import informations from "@/data/informations";
+
+export default defineComponent({
+  name: "MyPresentation",
+  data() {
+    return {
+      presentation: informations.presentation,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/data/informations.ts b/src/data/informations.ts
index 6ed6f5c..789ebe1 100644
--- a/src/data/informations.ts
+++ b/src/data/informations.ts
@@ -4,6 +4,14 @@ const informations = (): Information => {
   return {
     firstName: "Nicolas",
     lastName: "Marsal",
+    title: "Développeur Sénior",
+    presentation:
+      "Développeur avec plus de 14 années d'expériences dans la réalisation de\n" +
+      "projets s'appuyant sur Java et son écosystème, j'ai rajouté une dimension full\n" +
+      "stack à mes compétences ces dernières années.\n" +
+      "Adepte du clean code et du refactoring, j'ai à cœur d'écrire du code de qualité\n" +
+      "et maintenable, si possible en pair programming.\n" +
+      "La communication est clé dans mes échanges avec mes pairs.",
     email: "nicolas.marsal@gmail.com",
     address: ["25 rue de la Moselle", "31100 Toulouse"],
     birthDay: new Date(1982, 11, 3),
diff --git a/src/data/types.ts b/src/data/types.ts
index 1176bee..25f37e2 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -35,6 +35,8 @@ export type Hobby = string;
 export interface Information {
   firstName: string;
   lastName: string;
+  presentation: string;
+  title: string;
   address: string[];
   phoneNumber: string;
   email: string;
diff --git a/src/main.ts b/src/main.ts
index 73a1fde..f984d60 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,8 @@ import { createPinia } from "pinia";
 import App from "./App.vue";
 
 import "./assets/main.css";
+import "./assets/sheets-of-paper.css";
+import "./assets/sheets-of-paper-a4.css";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 
