created the avatar and user ribbon

frontend/public/icons/logout.svg

+<svg width="53" height="48" viewBox="0 0 53 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.9998 2.66669H34.4998C34.4998 1.28598 33.3805 0.166687 31.9998 0.166687V2.66669ZM31.9998 45.3333V47.8333C33.3805 47.8333 34.4998 46.7141 34.4998 45.3333H31.9998ZM2.6665 45.3333H0.166504C0.166504 46.7141 1.28579 47.8333 2.6665 47.8333L2.6665 45.3333ZM2.6665 2.66669V0.166687C1.28579 0.166687 0.166504 1.28598 0.166504 2.66669L2.6665 2.66669ZM25.3333 21.5C23.9525 21.5 22.8333 22.6193 22.8333 24C22.8333 25.3807 23.9525 26.5 25.3333 26.5V21.5ZM49.3332 24L51.101 25.7678L52.8688 24L51.101 22.2322L49.3332 24ZM39.5655 30.2322C38.5892 31.2085 38.5892 32.7915 39.5655 33.7678C40.5418 34.7441 42.1247 34.7441 43.101 33.7678L39.5655 30.2322ZM43.101 14.2322C42.1247 13.2559 40.5418 13.2559 39.5655 14.2322C38.5892 15.2085 38.5892 16.7915 39.5655 17.7678L43.101 14.2322ZM29.4998 2.66669V45.3333H34.4998V2.66669H29.4998ZM31.9998 42.8333H2.6665V47.8333H31.9998V42.8333ZM5.1665 45.3333V2.66669H0.166504V45.3333H5.1665ZM2.6665 5.16669H31.9998V0.166687H2.6665V5.16669ZM25.3333 26.5H49.3332V21.5H25.3333V26.5ZM43.101 33.7678L51.101 25.7678L47.5655 22.2322L39.5655 30.2322L43.101 33.7678ZM51.101 22.2322L43.101 14.2322L39.5655 17.7678L47.5655 25.7678L51.101 22.2322Z" fill="#CCCCCC"/>
+</svg>
\ No newline at end of file

frontend/src/components/Avatar.vue

+<template>
+  <div :style="style" aria-hidden="true">
+    <!-- this img is not displayed; it is used to detect failure-to-load of div background image -->
+    <img v-if="this.isImage" style="display: none" :src="this.src"/>
+    <span v-show="!this.isImage">{{ userInitial }}</span>
+  </div>
+</template>
+
+
+<script>
+const getInitials = (username) => {
+  let parts = username.split(/[ -]/)
+  let initials = ''
+
+  for (var i = 0; i < parts.length; i++) {
+    initials += parts[i].charAt(0)
+  }
+
+  if (initials.length > 3 && initials.search(/[A-Z]/) !== -1) {
+    initials = initials.replace(/[a-z]+/g, '')
+  }
+
+  initials = initials.substr(0, 3).toUpperCase()
+
+  return initials
+}
+
+export default {
+  name: 'avatar',
+  props: {
+    username: {
+      type: String
+    },
+    inline: {
+      type: Boolean
+    },
+    size: {
+      type: Number,
+      default: 50
+    },
+    src: {
+      type: String
+    },
+    rounded: {
+      type: Boolean,
+      default: true
+    },
+    lighten: {
+      type: Number,
+      default: 80
+    },
+    parser: {
+      type: Function,
+      default: getInitials,
+      validator: (parser) => typeof parser('John', getInitials) === 'string'
+    }
+  },
+
+  data () {
+    return {
+      backgroundColor: 
+        '#CCCCCC',
+      imgError: false
+    }
+  },
+
+  mounted () {
+    if (!this.isImage) {
+      this.$emit('avatar-initials', this.username, this.userInitial)
+    }
+  },
+
+  computed: {
+    background () {
+      if (!this.isImage) {
+        return this.backgroundColor || this.randomBackgroundColor(this.username.length, this.backgroundColors)
+      }
+      else {
+        return "";
+      }
+    },
+    isImage () {
+      console.log("caca");
+      return !this.imgError && Boolean(this.src)
+    },
+
+    style () {
+      const style = {
+        display: 'flex',
+        width: `${this.size}px`,
+        height: `${this.size}px`,
+        borderRadius: this.rounded ? '50%' : 0,
+        lineHeight: `${(this.size + Math.floor(this.size / 20))}px`,
+        fontWeight: 'bold',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+        userSelect: 'none'
+      }
+
+      const imgBackgroundAndFontStyle = {
+        background: `transparent url('${this.src}') no-repeat scroll 0% 0% / ${this.size}px ${this.size}px content-box border-box`
+      }
+
+      const initialBackgroundAndFontStyle = {
+        backgroundColor: this.background,
+        font: `${Math.floor(this.size / 2.5)}px/${this.size}px Helvetica, Arial, sans-serif`,
+        color: this.fontColor
+      }
+
+      const backgroundAndFontStyle = (this.isImage)
+        ? imgBackgroundAndFontStyle
+        : initialBackgroundAndFontStyle
+
+      Object.assign(style, backgroundAndFontStyle)
+
+      return style
+    },
+
+    userInitial () {
+      if (!this.isImage) {
+        const initials = this.initials || this.parser(this.username, getInitials)
+        return initials
+      }
+      return ''
+    }
+  },
+
+  methods: {
+    initial: getInitials,
+
+    onImgError () {
+      this.imgError = true
+    },
+
+    randomBackgroundColor (seed, colors) {
+      return colors[seed % (colors.length)]
+    },
+
+    lightenColor (hex, amt) {
+      // From https://css-tricks.com/snippets/javascript/lighten-darken-color/
+      var usePound = false
+
+      if (hex[0] === '#') {
+        hex = hex.slice(1)
+        usePound = true
+      }
+
+      var num = parseInt(hex, 16)
+      var r = (num >> 16) + amt
+
+      if (r > 255) r = 255
+      else if (r < 0) r = 0
+
+      var b = ((num >> 8) & 0x00FF) + amt
+
+      if (b > 255) b = 255
+      else if (b < 0) b = 0
+
+      var g = (num & 0x0000FF) + amt
+
+      if (g > 255) g = 255
+      else if (g < 0) g = 0
+
+      return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
+    }
+  }
+}
+</script>

frontend/src/components/UserRibbon.vue

+<template>
+  <div class="vue-user-ribon--wrap" aria-hidden="true">
+    <p>Vous êtres connecté <strong>{{username}}</strong>.</p>
+    <avatar :username="this.username" :src="this.pathToImage"/>
+    <img src="icons/logout.svg" height="40"/>
+  </div>
+</template>
+
+
+<script>
+// @ is an alias to /src
+import Avatar from '@/components/Avatar.vue'
+
+export default {
+  name: 'Home',
+  props: {
+    username: {
+      type: String
+    },
+    
+    pathToImage: {
+      type: String
+    }
+  },
+  components: {
+    Avatar
+  }
+}
+</script>
+
+<style>
+.vue-user-ribon--wrap{
+    display: flex;
+    right: 0;
+    position: absolute;
+}
+
+.vue-user-ribon--wrap *{
+    align-self: center;
+    margin: 5px;
+}
+.vue-user-ribon--wrap strong{
+    margin: 0;
+}
+p{
+    
+    color: white;
+}
+</style>
\ No newline at end of file

frontend/src/views/Home.vue

 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <user-ribbon username="Josie Péritel" pathToImage="avatar/criquette.jpg"/>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import UserRibbon from '@/components/UserRibbon.vue'
 
 export default {
   name: 'Home',
   components: {
-    HelloWorld
+    UserRibbon
   }
 }
 </script>
+
+<style>
+.home{
+  display: flex;
+  flex-direction: column;
+}
+</style>