Redesign calendar

src/pages/Summary/Summary.jsx

@@ -119,6 +119,9 @@ export const Summary = () => {
                 {profileInfo?.fio || profileInfo?.username},{" "}
                 {profileInfo.specification} разработчик
               </p>
+              <hr />
+              <div className="summary__direction">Front End</div>
+              <div className="summary__level">Middle+</div>
             </div>
             {!openGit && (
               <button className="summary__git" onClick={() => setOpenGit(true)}>

src/pages/Summary/summary.scss

@@ -1,5 +1,5 @@
 .summary {
-  background: #f1f1f1;
+  background: #f4f7ff;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -62,7 +62,7 @@
   &__person {
     display: flex;
     align-items: center;
-    column-gap: 45px;
+    column-gap: 20px;
 
     @media (max-width: 825px) {
       column-gap: 20px;
@@ -74,8 +74,8 @@
   }
 
   &__avatar {
-    width: 88px;
-    height: 88px;
+    width: 50px;
+    height: 50px;
     border-radius: 100px;
 
     @media (max-width: 690px) {
@@ -97,9 +97,9 @@
   }
 
   &__name {
+    color: #1458dd;
+    font-size: 15px;
     font-weight: 500;
-    font-size: 16px;
-    line-height: 32px;
     position: relative;
 
     @media (max-width: 690px) {
@@ -118,17 +118,19 @@
     @media (max-width: 450px) {
       max-width: 160px;
     }
+  }
 
-    &:after {
-      content: "";
-      position: absolute;
-      background: #52b709;
-      border-radius: 12px;
-      width: 70%;
-      height: 8px;
-      bottom: -14px;
-      left: 0;
-    }
+  &__direction {
+    color: #6f6f6f;
+    font-size: 14px;
+  }
+
+  &__level {
+    background-color: #1458dd;
+    color: #ffffff;
+    border-radius: 44px;
+    font-size: 14px;
+    font-weight: 400;
   }
 
   &__git {