Created basic hero banner

assets/css/global.css

@@ -9,7 +9,7 @@
 
 .dark-mode {
   --color: #ebf4f1;
-  --color-primary: #41b38a;
+  --color-primary: lightgreen;
   --color-secondary: #fdf9f3;
   --bg: #091a28;
   --bg-secondary: #071521;
@@ -53,10 +53,37 @@ p {
   flex-direction: row;
 }
 
-.container {
+.flex {
   display: flex;
 }
 
+.row {
+  display: flex;
+  flex-direction: row;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+}
+
+.center {
+  text-align: center;
+  align-items: center;
+}
+
+@media screen and (min-width: 768px) {
+  md:row {
+    flex-direction: row!important;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  md:row {
+    flex-direction: unset;
+  }
+}
+
 .row {
   flex-direction: row;
 }

components/MyFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <footer>
-    <div class="container row separate">
+    <div class="flex col  md:row separate center">
       <p class="copyright">
         {{ $t('Contenu sous licence') }}
         &nbsp;
@@ -10,6 +10,10 @@
           {{ year }}
         </span>.
       </p>
+      <p class="author">
+        🄯 2022 -
+        <a href="mailto:samuel+web@ortion.fr">Samuel ORTION</a>
+      </p>
       <p class="techno">
         {{ $t('Fait avec') }}
         <span class="love">
@@ -54,7 +58,12 @@ footer {
   align-self: baseline;
 }
 
-span, a {
+span,
+a {
   margin: 0 0.1em;
 }
+
+.love {
+  color: red;
+}
 </style>

components/MyHero.vue

@@ -1,3 +1,27 @@
 <template>
-  <div class="hero" />
+  <div class="hero">
+    <div class="flex row separate">
+      <h1 class="name large">
+        Samuel ORTION
+      </h1>
+      <p class="flex col">
+        <span class="studies">
+          {{ $t('Etudiant en BioInformatique') }} {{ $t('at') }}<span class="univ">{{ $t("Universite Evry - Paris-Saclay") }}.</span>
+        </span>
+      </p>
+    </div>
+  </div>
 </template>
+
+<style>
+  .hero .large {
+    font-size: 2rem;
+    font-weight: bolder;
+    padding: 2rem;
+  }
+
+  .hero div {
+    display: flex;
+    align-items: center;
+  }
+</style>

lang/en.json

@@ -19,5 +19,11 @@
   "Votre message a bien ete envoye": "Your message has been sent",
   "Changer de theme": "Switch color theme",
   "Mes Projets": "My Projects",
-  "Curriculum Vitae": "Resume"
+  "Curriculum Vitae": "Resume",
+  "Developpeur et Sysadmin junior": "Junior Developper and Sysadmin",
+  "Developeur et Sysadmin junior": "Junior Developer and Sysadmin",
+  "l": "Évry - Paris-Saclay University",
+  "Etudiant en BioInformatique": "BioInformatics Student",
+  "at": "at",
+  "Universite Evry - Paris-Saclay": "Évry - Paris-Saclay University"
 }

lang/fr.json

@@ -1,4 +1,8 @@
 {
   "Changer de theme": "Changer de thème",
-  "Contact": "Contact"
+  "Contact": "Contact",
+  "Developeur et Sysadmin junior": "Dévelopeur et Sysadmin Junior",
+  "Etudiant en BioInformatique": "Étudiant en BioInformatique",
+  "at": "à",
+  "Universite Evry - Paris-Saclay": "l'Université d'Évry - Paris-Saclay"
 }

layouts/default.vue

@@ -34,7 +34,12 @@ export default {
   }
 
   main {
-    width: 50%;
     margin: auto;
   }
+
+  @media only screen and (min-width: 750px) {
+    main {
+      width: 50%;
+    }
+  }
   </style>