feat: better ui

src/assets/main.css

@@ -23,6 +23,7 @@
     border-right: 1px solid gray;
     display: flex;
     flex-direction: column;
+    padding-top: 12px;
 }
 
 .main-right {
@@ -32,10 +33,16 @@
     flex-direction: column;
 }
 
+.references {
+    padding-top: 12px;
+    font-size: 12px;
+    font-style: italic;
+    text-align: center;
+}
+
 .left-section-wrapper {
     display: flex;
     flex-direction: column;
-    /*margin-bottom: 14px;*/
 }
 .left-section-title {
     font-size: 24px;
@@ -183,7 +190,8 @@
 
 .my-experiences-mission-skills {
     flex: 1 1;
-    font-size: 11px
+    font-size: 11px;
+    margin-right: 10px;
 }
 
 .my-experiences-mission-description{
@@ -201,7 +209,11 @@
 }
 
 .hobby {
-    font-size: 16px;
+    font-size: 15px;
+}
+
+.hobby:nth-child(n + 2) {
+    padding-top: 8px;
 }
 
 .my-informations-line {
@@ -221,6 +233,11 @@
 }
 
 .my-languages-line {
+    font-size: 15px;
+}
+
+.my-languages-line:nth-child(n + 2) {
+    padding-top: 8px;
 }
 
 .my-presentation {

src/components/common/WordCloud.vue

@@ -48,7 +48,7 @@ export default defineComponent({
       hover: false,
       words: [] as cloud.Word[],
       minFontSize: 8,
-      maxFontSize: 40,
+      maxFontSize: 30,
       mouseX: undefined,
       mouseY: undefined,
     };

src/components/cv/MyCv.vue

@@ -11,32 +11,35 @@ import FirstNameAndLastName from "@/components/informations/FirstNameAndLastName
 </script>
 
 <template>
-  <div class="main page" id="element-to-print">
-    <div class="main-left">
-      <FirstNameAndLastName />
-      <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="main-right">
-      <div class="main-title">{{ informations.title }}</div>
-      <MyPresentation />
-      <MyExperiences />
+  <div class="page" id="element-to-print">
+    <div class="main">
+      <div class="main-left">
+        <FirstNameAndLastName />
+        <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="main-right">
+        <div class="main-title">{{ informations.title }}</div>
+        <MyPresentation />
+        <MyExperiences />
+      </div>
     </div>
+    <div class="references">Références sur demande.</div>
   </div>
 </template>
 

src/data/informations.ts

@@ -39,10 +39,8 @@ const informations = (): Information => {
       },
     ],
     hobbies: [
-      "Rhétorique",
-      "Biais Congnitifs",
-      "Domotique",
-      "Électronique",
+      "Rhétorique, Biais Congnitifs",
+      "Domotique, Électronique",
       "Conception/Impression 3D",
       "Roller",
     ],

src/data/skills.ts

@@ -47,7 +47,7 @@ export const Angular: Skill = {
   parent: [Typescript, UX],
 };
 export const React: Skill = {
-  name: "Angular",
+  name: "React",
   score: 17,
   parent: [Typescript, UX],
 };
@@ -58,7 +58,7 @@ export const ExtJS: Skill = {
 };
 export const Bash: Skill = { name: "Bash", score: 0 };
 export const HtmlCss: Skill = { name: "HtmlCss", score: 0 };
-export const Kotlin: Skill = { name: "Kotlin", score: 0 };
+export const Kotlin: Skill = { name: "Kotlin", score: 28 };
 export const Groovy: Skill = { name: "Groovy", score: 0 };
 
 export const DotNET: Skill = { name: ".NET", score: 0 };