profile achievements added

src/components/Achievement/Achievement.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import './achievement.scss'
+
+export const Achievement = ({ achievement }) => {
+  return (
+    <div className='achievement'>
+      <div className='achievement__icon'>
+        <img src={achievement.img} />
+      </div>
+      <div className='achievement__popup'>
+        <div className='achievement__title'>{achievement.title}</div>
+        <div className='achievement__description'>
+          {achievement.description}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Achievement/achievement.scss

@@ -0,0 +1,35 @@
+.achievement {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  margin: 0 1rem;
+
+  &__popup {
+    position: absolute;
+    top: 50px;
+    left: 0;
+    width: 140px;
+    height: 60px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    display: none;
+    text-align: left;
+  }
+
+  &__icon {
+    width: 50px;
+    height: 50px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:hover .achievement__popup {
+    display: block;
+  }
+}