From 4c636c424ae7b315255f73168d4c7f73d047b545 Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Mon, 9 Jan 2023 18:04:06 +0300
Subject: [PATCH] profilePage

---
 src/components/Profile/ProfileHeader.js |   4 +-
 src/components/Profile/profile.scss     | 393 ++++--------------------
 src/components/Profile/summary.scss     | 390 +++++++++++++++++++----
 src/helper.js                           |   2 +-
 src/pages/Profile.js                    | 151 +++++----
 src/pages/Summary.js                    | 151 ++++-----
 6 files changed, 548 insertions(+), 543 deletions(-)

diff --git a/src/components/Profile/ProfileHeader.js b/src/components/Profile/ProfileHeader.js
index 95d8ca0d..843a440a 100644
--- a/src/components/Profile/ProfileHeader.js
+++ b/src/components/Profile/ProfileHeader.js
@@ -42,8 +42,8 @@ export const ProfileHeader = () => {
             <div className='profileHeader__info'>
                 <div className='profileHeader__container'>
                     <nav className='profileHeader__nav'>
-                        <NavLink to={'/profile'}>Резюме</NavLink>
-                        <NavLink to={'/profileCalendar'}>Отчетность</NavLink>
+                        <NavLink to={'/summary'}>Резюме</NavLink>
+                        <NavLink to={'/profile'}>Отчетность</NavLink>
                         <a>Трекер</a>
                         <a>Выплаты</a>
                         <a>Настройки</a>
diff --git a/src/components/Profile/profile.scss b/src/components/Profile/profile.scss
index 31766b5d..d8bde747 100644
--- a/src/components/Profile/profile.scss
+++ b/src/components/Profile/profile.scss
@@ -2,44 +2,19 @@
   background: #F1F1F1;
   height: 100%;
   min-height: 100vh;
-  //
-  //&__container {
-  //  max-width: 1160px;
-  //  padding: 0 10px;
-  //  margin: 20px auto;
-  //  position: relative;
-  //  display: flex;
-  //  flex-direction: column;
-  //}
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-  }
 
   &__title {
     font-weight: 700;
     font-size: 22px;
     line-height: 32px;
-    margin-bottom: 0;
-
+    color: #000000;
     span {
       color: #52B709;
     }
-  }
 
-  &__back {
-    display: flex;
-    align-items: center;
-    column-gap: 30px;
-    margin-top: 20px;
-    cursor: pointer;
-
-    p {
-      margin-bottom: 0;
-      font-size: 14px;
-      line-height: 32px;
-      font-weight: 500;
+    @media (max-width: 560px) {
+      font-size: 17px;
+      margin-top: 20px;
     }
   }
 
@@ -52,327 +27,93 @@
     align-items: center;
     padding: 0 130px 0 45px;
     justify-content: space-between;
-
-    @media (max-width: 930px) {
-      padding: 0 40px;
-    }
-
-    @media (max-width: 690px) {
-      padding: 0 20px;
-      min-height: 80px;
-    }
   }
 
-  &__person {
+  &__items {
     display: flex;
-    align-items: center;
-    column-gap: 45px;
-
-    @media (max-width: 690px) {
-      column-gap: 20px;
-    }
-  }
-
-  &__avatar {
-    width: 88px;
-    height: 88px;
-    border-radius: 100px;
-
-    @media (max-width: 690px) {
-      width: 44px;
-      height: 44px;
-      min-width: 44px;
-      min-height: 44px;
-    }
-  }
-
-  &__name {
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 32px;
-    position: relative;
-
-    @media (max-width: 690px) {
-      font-size: 14px;
-      margin-right: 10px;
-      line-height: 15px;
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      background: #52B709;
-      border-radius: 12px;
-      width: 70%;
-      height: 8px;
-      bottom: -14px;
-      left: 0;
-    }
-  }
-
-  &__git {
-    background: #52B709;
-    border-radius: 44px;
-    width: 177px;
-    height: 50px;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 32px;
-    color: white;
-    border: none;
-
-    @media (max-width: 690px) {
-      width: 120px;
-    }
-  }
-
-  &__skills {
-    background: #FFFFFF;
-    border-radius: 12px;
-    margin-top: 35px;
-  }
-
-  &__sections__head {
-    display: flex;
-    min-height: 69px;
-    background: #E1FCCF;
-    border-radius: 12px 12px 0px 0px;
-    align-items: center;
-    padding: 0 35px 0 50px;
-    justify-content: space-between;
-
-    @media (max-width: 550px) {
-      padding: 0 15px;
-    }
-
-    h3 {
-      font-style: normal;
-      font-size: 18px;
-      line-height: 32px;
-
-      @media (max-width: 660px) {
-        line-height: 20px;
-      }
-    }
-
-    button {
-      background: #FFFFFF;
-      border-radius: 44px;
-      padding: 10px 20px;
-      display: flex;
-      align-items: center;
-      border: none;
-      height: 42px;
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 32px;
-      white-space: nowrap;
-
-      @media (max-width: 520px) {
-        font-size: 12px;
-        padding: 10px;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .skills__section {
-    &__items {
-      padding: 25px 35px 25px 50px;
-
-      @media (max-width: 550px) {
-        padding: 15px 15px 20px;
-      }
-
-      &__wrapper {
-        max-width: 630px;
-        display: flex;
-        flex-wrap: wrap;
-        column-gap: 5px;
-
-        .skill_item {
-          font-weight: 700;
-          font-size: 16px;
-          line-height: 32px;
-          white-space: nowrap;
-          text-transform: uppercase;
-        }
-      }
-    }
-  }
-
-  &__experience {
-    display: flex;
-    flex-direction: column;
-    row-gap: 20px;
+    flex-wrap: wrap;
     margin-top: 30px;
+    row-gap: 25px;
+    column-gap: 35px;
 
-    .experience {
-      &__block {
-        background: #FFFFFF;
-        border-radius: 12px;
+    @media (max-width: 1175px) {
+      justify-content: center;
+    }
+
+    .item {
+      max-width: 353px;
+      width: 100%;
+      padding: 35px 45px 15px 30px;
+      background: #FFFFFF;
+      border-radius: 12px;
+      text-decoration: none;
+      cursor: pointer;
+
+      @media (max-width: 1175px) {
+        width: 48%;
+        max-width: none;
       }
 
-      &__content {
-        padding: 15px 35px 15px 50px;
+      @media (max-width: 925px) {
+        width: 100%;
+      }
 
-        @media (max-width: 550px) {
-          padding: 15px 15px 20px;
-        }
+      &__about {
+        display: flex;
+        column-gap: 20px;
+        align-items: center;
+        margin-bottom: 30px;
 
-        h2 {
-          font-weight: 700;
-          font-size: 16px;
-          line-height: 32px;
+        h3 {
+          color: #000000;
+          font-weight: 500;
+          font-size: 18px;
+          line-height: 22px;
+          max-width: 125px;
           margin-bottom: 0;
         }
+      }
+
+      &__info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
         p {
-          font-weight: 400;
-          font-size: 16px;
-          line-height: 32px;
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 20px;
+          color: #000000;
           margin-bottom: 0;
+
+          span {
+            color: #52B709;
+            font-weight: 700;
+          }
+        }
+        &Link {
+          width: 48px;
+          height: 48px;
+          background: #DDEEC6;
+          border-radius: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
         }
       }
     }
   }
 
-  &__sectionGit {
-    margin-top: 25px;
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
 
-    &Items {
-      margin-top: 25px;
-      display: flex;
-      flex-wrap: wrap;
-      row-gap: 20px;
-      column-gap: 25px;
-      justify-content: space-between;
-
-      .gitItem {
-        width: 48%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        background: #FFFFFF;
-        border-radius: 12px;
-        padding: 35px 30px 30px 45px;
-
-        @media (max-width: 825px) {
-          width: 100%;
-        }
-
-        @media (max-width: 470px) {
-          padding: 15px;
-        }
-
-        &__info {
-          display: flex;
-          flex-direction: column;
-          max-width: 350px;
-          width: 100%;
-
-          @media (max-width: 825px) {
-            max-width: 100%;
-          }
-
-          &__about {
-            display: flex;
-            align-items: center;
-            column-gap: 15px;
-          }
-
-          &__name {
-            h4 {
-              font-weight: 700;
-              font-size: 18px;
-              line-height: 32px;
-              margin-bottom: 0;
-            }
-
-            p {
-              font-weight: 300;
-              font-size: 16px;
-              line-height: 32px;
-              margin-bottom: 0;
-              white-space: nowrap;
-              max-width: 300px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-
-              @media (max-width: 1040px) {
-                max-width: 250px;
-              }
-
-              @media (max-width: 890px) {
-                max-width: 200px;
-              }
-
-              @media (max-width: 825px) {
-                max-width: 500px;
-              }
-
-              @media (max-width: 720px) {
-                max-width: 250px;
-              }
-
-              @media (max-width: 470px) {
-                max-width: 200px;
-              }
-            }
-          }
-
-          &__specification {
-            margin-top: 30px;
-            display: flex;
-            align-items: center;
-            padding-left: 10px;
-            column-gap: 25px;
-
-            @media (max-width: 470px) {
-              margin-top: 0;
-            }
-
-            span {
-              background: #D4F123;
-              border-radius: 12px;
-              max-width: 260px;
-              width: 100%;
-              height: 8px;
-            }
-
-            p {
-              margin-bottom: 0;
-              font-weight: 400;
-              font-size: 14px;
-              line-height: 32px;
-            }
-          }
-        }
-
-        &__link {
-          border-radius: 50%;
-          background: #DDEEC6;
-          min-width: 48px;
-          height: 48px;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
+    @media (max-width: 570px) {
+      margin-top: 0;
     }
   }
 
   footer {
     margin-top: 70px;
   }
-
-  .container {
-       max-width: 1160px;
-       margin-top: 23px;
-
-        @media (max-width: 570px) {
-          margin-top: 0;
-        }
-     }
 }
diff --git a/src/components/Profile/summary.scss b/src/components/Profile/summary.scss
index 794950b3..fc2ed3b4 100644
--- a/src/components/Profile/summary.scss
+++ b/src/components/Profile/summary.scss
@@ -2,17 +2,47 @@
   background: #F1F1F1;
   height: 100%;
   min-height: 100vh;
+  //
+  //&__container {
+  //  max-width: 1160px;
+  //  padding: 0 10px;
+  //  margin: 20px auto;
+  //  position: relative;
+  //  display: flex;
+  //  flex-direction: column;
+  //}
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
 
   &__title {
     font-weight: 700;
     font-size: 22px;
     line-height: 32px;
-    color: #000000;
+    margin-bottom: 0;
+
     span {
       color: #52B709;
     }
   }
 
+  &__back {
+    display: flex;
+    align-items: center;
+    column-gap: 30px;
+    margin-top: 20px;
+    cursor: pointer;
+
+    p {
+      margin-bottom: 0;
+      font-size: 14px;
+      line-height: 32px;
+      font-weight: 500;
+    }
+  }
+
   &__info {
     min-height: 128px;
     background: white;
@@ -22,93 +52,327 @@
     align-items: center;
     padding: 0 130px 0 45px;
     justify-content: space-between;
-  }
 
-  &__items {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 30px;
-    row-gap: 25px;
-    column-gap: 35px;
-
-    @media (max-width: 1175px) {
-      justify-content: center;
+    @media (max-width: 930px) {
+      padding: 0 40px;
     }
 
-    .item {
-      max-width: 353px;
-      width: 100%;
-      padding: 35px 45px 15px 30px;
-      background: #FFFFFF;
+    @media (max-width: 690px) {
+      padding: 0 20px;
+      min-height: 80px;
+    }
+  }
+
+  &__person {
+    display: flex;
+    align-items: center;
+    column-gap: 45px;
+
+    @media (max-width: 690px) {
+      column-gap: 20px;
+    }
+  }
+
+  &__avatar {
+    width: 88px;
+    height: 88px;
+    border-radius: 100px;
+
+    @media (max-width: 690px) {
+      width: 44px;
+      height: 44px;
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+
+  &__name {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 32px;
+    position: relative;
+
+    @media (max-width: 690px) {
+      font-size: 14px;
+      margin-right: 10px;
+      line-height: 15px;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      background: #52B709;
       border-radius: 12px;
-      text-decoration: none;
-      cursor: pointer;
+      width: 70%;
+      height: 8px;
+      bottom: -14px;
+      left: 0;
+    }
+  }
 
-      @media (max-width: 1175px) {
-        width: 48%;
-        max-width: none;
+  &__git {
+    background: #52B709;
+    border-radius: 44px;
+    width: 177px;
+    height: 50px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 32px;
+    color: white;
+    border: none;
+
+    @media (max-width: 690px) {
+      width: 120px;
+    }
+  }
+
+  &__skills {
+    background: #FFFFFF;
+    border-radius: 12px;
+    margin-top: 35px;
+  }
+
+  &__sections__head {
+    display: flex;
+    min-height: 69px;
+    background: #E1FCCF;
+    border-radius: 12px 12px 0px 0px;
+    align-items: center;
+    padding: 0 35px 0 50px;
+    justify-content: space-between;
+
+    @media (max-width: 550px) {
+      padding: 0 15px;
+    }
+
+    h3 {
+      font-style: normal;
+      font-size: 18px;
+      line-height: 32px;
+
+      @media (max-width: 660px) {
+        line-height: 20px;
+      }
+    }
+
+    button {
+      background: #FFFFFF;
+      border-radius: 44px;
+      padding: 10px 20px;
+      display: flex;
+      align-items: center;
+      border: none;
+      height: 42px;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 32px;
+      white-space: nowrap;
+
+      @media (max-width: 520px) {
+        font-size: 12px;
+        padding: 10px;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .skills__section {
+    &__items {
+      padding: 25px 35px 25px 50px;
+
+      @media (max-width: 550px) {
+        padding: 15px 15px 20px;
       }
 
-      @media (max-width: 925px) {
-        width: 100%;
-      }
-
-      &__about {
+      &__wrapper {
+        max-width: 630px;
         display: flex;
-        column-gap: 20px;
-        align-items: center;
-        margin-bottom: 30px;
+        flex-wrap: wrap;
+        column-gap: 5px;
 
-        h3 {
-          color: #000000;
-          font-weight: 500;
-          font-size: 18px;
-          line-height: 22px;
-          max-width: 125px;
-          margin-bottom: 0;
+        .skill_item {
+          font-weight: 700;
+          font-size: 16px;
+          line-height: 32px;
+          white-space: nowrap;
+          text-transform: uppercase;
         }
       }
+    }
+  }
 
-      &__info {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+  &__experience {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    margin-top: 30px;
+
+    .experience {
+      &__block {
+        background: #FFFFFF;
+        border-radius: 12px;
+      }
+
+      &__content {
+        padding: 15px 35px 15px 50px;
+
+        @media (max-width: 550px) {
+          padding: 15px 15px 20px;
+        }
+
+        h2 {
+          font-weight: 700;
+          font-size: 16px;
+          line-height: 32px;
+          margin-bottom: 0;
+        }
 
         p {
-          font-weight: 700;
-          font-size: 12px;
-          line-height: 20px;
-          color: #000000;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 32px;
           margin-bottom: 0;
-
-          span {
-            color: #52B709;
-            font-weight: 700;
-          }
-        }
-        &Link {
-          width: 48px;
-          height: 48px;
-          background: #DDEEC6;
-          border-radius: 50px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
         }
       }
     }
   }
 
-  .container {
-    max-width: 1160px;
-    margin-top: 23px;
+  &__sectionGit {
+    margin-top: 25px;
 
-    @media (max-width: 570px) {
-      margin-top: 0;
+    &Items {
+      margin-top: 25px;
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: 20px;
+      column-gap: 25px;
+      justify-content: space-between;
+
+      .gitItem {
+        width: 48%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: #FFFFFF;
+        border-radius: 12px;
+        padding: 35px 30px 30px 45px;
+
+        @media (max-width: 825px) {
+          width: 100%;
+        }
+
+        @media (max-width: 470px) {
+          padding: 15px;
+        }
+
+        &__info {
+          display: flex;
+          flex-direction: column;
+          max-width: 350px;
+          width: 100%;
+
+          @media (max-width: 825px) {
+            max-width: 100%;
+          }
+
+          &__about {
+            display: flex;
+            align-items: center;
+            column-gap: 15px;
+          }
+
+          &__name {
+            h4 {
+              font-weight: 700;
+              font-size: 18px;
+              line-height: 32px;
+              margin-bottom: 0;
+            }
+
+            p {
+              font-weight: 300;
+              font-size: 16px;
+              line-height: 32px;
+              margin-bottom: 0;
+              white-space: nowrap;
+              max-width: 300px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+
+              @media (max-width: 1040px) {
+                max-width: 250px;
+              }
+
+              @media (max-width: 890px) {
+                max-width: 200px;
+              }
+
+              @media (max-width: 825px) {
+                max-width: 500px;
+              }
+
+              @media (max-width: 720px) {
+                max-width: 250px;
+              }
+
+              @media (max-width: 470px) {
+                max-width: 200px;
+              }
+            }
+          }
+
+          &__specification {
+            margin-top: 30px;
+            display: flex;
+            align-items: center;
+            padding-left: 10px;
+            column-gap: 25px;
+
+            @media (max-width: 470px) {
+              margin-top: 0;
+            }
+
+            span {
+              background: #D4F123;
+              border-radius: 12px;
+              max-width: 260px;
+              width: 100%;
+              height: 8px;
+            }
+
+            p {
+              margin-bottom: 0;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 32px;
+            }
+          }
+        }
+
+        &__link {
+          border-radius: 50%;
+          background: #DDEEC6;
+          min-width: 48px;
+          height: 48px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
     }
   }
 
   footer {
     margin-top: 70px;
   }
+
+  .container {
+       max-width: 1160px;
+       margin-top: 23px;
+
+        @media (max-width: 570px) {
+          margin-top: 0;
+        }
+     }
 }
diff --git a/src/helper.js b/src/helper.js
index 0a3c8f51..125dac68 100644
--- a/src/helper.js
+++ b/src/helper.js
@@ -8,7 +8,7 @@ export function transformHtml(text) {
         return (el != null && el != "" || el === 0)
     })
     const finalHtml = startHtml.map((item) => {
-        return `<div class='experience__block'><div class="profile__sections__head"><h3>Описание опыта работы</h3><button>Редактировать раздел</button></div><div class="experience__content">${item.split('<h3>')[0]}</div></div>`
+        return `<div class='experience__block'><div class="summary__sections__head"><h3>Описание опыта работы</h3><button>Редактировать раздел</button></div><div class="experience__content">${item.split('<h3>')[0]}</div></div>`
     })
     return {__html: finalHtml.join('')}
 }
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index eacb2f30..8923aa91 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -1,101 +1,96 @@
-import React, {useEffect, useState} from 'react';
-import { ProfileHeader } from "../components/Profile/ProfileHeader";
+import React from 'react';
+import {useSelector} from "react-redux";
 import {getProfileInfo} from "../redux/outstaffingSlice";
-import { useSelector } from "react-redux";
-import {transformHtml} from "../helper";
-import { Footer } from '../components/Footer/Footer'
+import {ProfileHeader} from "../components/Profile/ProfileHeader";
+import {NavLink} from "react-router-dom";
+import {Footer} from "../components/Footer/Footer";
 
-import arrow from "../images/right-arrow.png";
+import reportsIcon from "../images/reports.png"
+import summaryIcon from "../images/summaryIcon.png"
+import timerIcon from "../images/timerIcon.png"
+import paymentIcon from "../images/paymentIcon.png"
+import settingIcon from "../images/settingIcon.png"
 import rightArrow from "../images/arrowRight.png"
-import gitImgItem from "../images/gitItemImg.png"
 
-import './../components/Profile/profile.scss'
-import {fetchGet} from "../server/server";
+import '../components/Profile/profile.scss'
 
 export const Profile = () => {
     const profileInfo = useSelector(getProfileInfo)
-    const [openGit, setOpenGit] = useState(false);
-    const [gitInfo, setGitInfo] = useState([])
-    useEffect(() => {
-        fetchGet({
-            link: `${process.env.REACT_APP_API_URL}/api/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`,
-        }).then((responseGit) => {
-            setGitInfo(responseGit)
-        })
-    }, [])
     return(
         <div className='profile'>
             <ProfileHeader/>
             <div className='container'>
-                <div className='profile__content'>
-                    <h2 className='profile__title'>Ваше резюме {openGit &&  <span>- Git</span>}</h2>
-                    {openGit && <div className='profile__back' onClick={() => setOpenGit(false)}>
-                        <img src={arrow} alt='arrow'/>
-                        <p>Вернуться</p>
-                    </div>}
-                    <div className='profile__info'>
-                        <div className='profile__person'>
-                            <img src={profileInfo.photo} className='profile__avatar' />
-                            <p className='profile__name'>{profileInfo.fio} {profileInfo.specification}</p>
-                        </div>
-                        {!openGit &&
-                        <button className='profile__git' onClick={()=> setOpenGit(true)}>Git</button>
-                        }
+                <h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
+                <div className='summary__info'>
+                    <div className='summary__person'>
+                        <img src={profileInfo.photo} className='summary__avatar' />
+                        <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
                     </div>
                 </div>
-                {!openGit &&
-                    <div className='profile__skills skills__section'>
-                        <div className='profile__sections__head'>
-                            <h3>Основной стек</h3>
-                            <button>Редактировать раздел</button>
+                <div className='profile__items'>
+                    <NavLink to={'/ProfileCalendar'} className='item'>
+                        <div className='item__about'>
+                            <img src={reportsIcon} />
+                            <h3>Ваша отчетность</h3>
                         </div>
-                        <div className='skills__section__items'>
-                            <div className='skills__section__items__wrapper'>
-                                {profileInfo.skillValues && profileInfo.skillValues.map((skill) => {
-                                    return <span key={skill.id} className='skill_item'>{skill.skill.name}</span>
-                                })}
+                        <div className='item__info'>
+                            <p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
+                            <div className='item__infoLink'>
+                                <img src={rightArrow} />
                             </div>
                         </div>
-                    </div>
-                }
-                {profileInfo.vc_text && !openGit &&
-                    <div className='profile__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}>
-                    </div>
-                }
-                {openGit &&
-                    <div className='profile__sectionGit'>
-                        <div className='profile__sections__head'>
-                            <h3>Страница портфолио кода разработчика</h3>
-                            <button>Редактировать раздел</button>
+                    </NavLink>
+                    <NavLink to={'/summary'} className='item'>
+                        <div className='item__about'>
+                            <img src={summaryIcon} />
+                            <h3>Данные и резюме</h3>
                         </div>
-                        <div className='profile__sectionGitItems'>
-                            {gitInfo.length && gitInfo.map((itemGit) => {
-                                return <div key={itemGit.id} className='profile__sectionGitItem gitItem'>
-                                            <div className='gitItem__info'>
-                                                <div className='gitItem__info__about'>
-                                                    <img src={gitImgItem} alt='gitImg' />
-                                                    <div className='gitItem__info__name'>
-                                                        <h4>{itemGit.title}</h4>
-                                                        <p>{itemGit.description}</p>
-                                                    </div>
-                                                </div>
-                                                <div className='gitItem__info__specification'>
-                                                    <span></span>
-                                                    <p>{itemGit.main_stack}</p>
-                                                </div>
-                                            </div>
-                                            <a className='gitItem__link' href={itemGit.link} target="_blank">
-                                                <img src={rightArrow} alt='arrowRight' />
-                                            </a>
-                                        </div>
-                                })
-                            }
+                        <div className='item__info'>
+                            <p>Ваше резюме<br/><span>заполнено</span></p>
+                            <div className='item__infoLink'>
+                                <img src={rightArrow} />
+                            </div>
                         </div>
-                    </div>
-                }
+                    </NavLink>
+                    <NavLink to={'/profile'} className='item'>
+                        <div className='item__about'>
+                            <img src={timerIcon} />
+                            <h3>Трекер времени</h3>
+                        </div>
+                        <div className='item__info'>
+                            <p>Сколько времени занимает<br/> выполнение задач</p>
+                            <div className='item__infoLink'>
+                                <img src={rightArrow} />
+                            </div>
+                        </div>
+                    </NavLink>
+                    <NavLink to={'/profile'} className='item'>
+                        <div className='item__about'>
+                            <img src={paymentIcon} />
+                            <h3>Выплаты</h3>
+                        </div>
+                        <div className='item__info'>
+                            <p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
+                            <div className='item__infoLink'>
+                                <img src={rightArrow} />
+                            </div>
+                        </div>
+                    </NavLink>
+                    <NavLink to={'/profile'} className='item'>
+                        <div className='item__about'>
+                            <img src={settingIcon} />
+                            <h3>Настройки аккаунта</h3>
+                        </div>
+                        <div className='item__info'>
+                            <p>Перейдите чтобы начать<br/> редактирование</p>
+                            <div className='item__infoLink'>
+                                <img src={rightArrow} />
+                            </div>
+                        </div>
+                    </NavLink>
+                </div>
             </div>
             <Footer/>
         </div>
     )
 }
-
diff --git a/src/pages/Summary.js b/src/pages/Summary.js
index 7f94b3db..cb3694a2 100644
--- a/src/pages/Summary.js
+++ b/src/pages/Summary.js
@@ -1,96 +1,101 @@
-import React from 'react';
-import {useSelector} from "react-redux";
+import React, {useEffect, useState} from 'react';
+import { ProfileHeader } from "../components/Profile/ProfileHeader";
 import {getProfileInfo} from "../redux/outstaffingSlice";
-import {ProfileHeader} from "../components/Profile/ProfileHeader";
-import {NavLink} from "react-router-dom";
-import {Footer} from "../components/Footer/Footer";
+import { useSelector } from "react-redux";
+import {transformHtml} from "../helper";
+import { Footer } from '../components/Footer/Footer'
 
-import reportsIcon from "../images/reports.png"
-import summaryIcon from "../images/summaryIcon.png"
-import timerIcon from "../images/timerIcon.png"
-import paymentIcon from "../images/paymentIcon.png"
-import settingIcon from "../images/settingIcon.png"
+import arrow from "../images/right-arrow.png";
 import rightArrow from "../images/arrowRight.png"
+import gitImgItem from "../images/gitItemImg.png"
 
-import './../components/Profile/summary.scss'
+import '../components/Profile/summary.scss'
+import {fetchGet} from "../server/server";
 
 export const Summary = () => {
     const profileInfo = useSelector(getProfileInfo)
+    const [openGit, setOpenGit] = useState(false);
+    const [gitInfo, setGitInfo] = useState([])
+    useEffect(() => {
+        fetchGet({
+            link: `${process.env.REACT_APP_API_URL}/api/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`,
+        }).then((responseGit) => {
+            setGitInfo(responseGit)
+        })
+    }, [])
     return(
         <div className='summary'>
             <ProfileHeader/>
             <div className='container'>
-                <h2 className='summary__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
-                <div className='summary__info'>
-                    <div className='profile__person'>
-                        <img src={profileInfo.photo} className='profile__avatar' />
-                        <p className='profile__name'>{profileInfo.fio} {profileInfo.specification}</p>
+                <div className='summary__content'>
+                    <h2 className='summary__title'>Ваше резюме {openGit &&  <span>- Git</span>}</h2>
+                    {openGit && <div className='summary__back' onClick={() => setOpenGit(false)}>
+                        <img src={arrow} alt='arrow'/>
+                        <p>Вернуться</p>
+                    </div>}
+                    <div className='summary__info'>
+                        <div className='summary__person'>
+                            <img src={profileInfo.photo} className='summary__avatar' />
+                            <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
+                        </div>
+                        {!openGit &&
+                        <button className='summary__git' onClick={()=> setOpenGit(true)}>Git</button>
+                        }
                     </div>
                 </div>
-                <div className='summary__items'>
-                    <NavLink to={'/profile'} className='item'>
-                        <div className='item__about'>
-                            <img src={reportsIcon} />
-                            <h3>Ваша отчетность</h3>
+                {!openGit &&
+                    <div className='summary__skills skills__section'>
+                        <div className='summary__sections__head'>
+                            <h3>Основной стек</h3>
+                            <button>Редактировать раздел</button>
                         </div>
-                        <div className='item__info'>
-                            <p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
-                            <div className='item__infoLink'>
-                                <img src={rightArrow} />
+                        <div className='skills__section__items'>
+                            <div className='skills__section__items__wrapper'>
+                                {profileInfo.skillValues && profileInfo.skillValues.map((skill) => {
+                                    return <span key={skill.id} className='skill_item'>{skill.skill.name}</span>
+                                })}
                             </div>
                         </div>
-                    </NavLink>
-                    <NavLink to={'/profile'} className='item'>
-                        <div className='item__about'>
-                            <img src={summaryIcon} />
-                            <h3>Данные и резюме</h3>
+                    </div>
+                }
+                {profileInfo.vc_text && !openGit &&
+                    <div className='summary__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}>
+                    </div>
+                }
+                {openGit &&
+                    <div className='summary__sectionGit'>
+                        <div className='summary__sections__head'>
+                            <h3>Страница портфолио кода разработчика</h3>
+                            <button>Редактировать раздел</button>
                         </div>
-                        <div className='item__info'>
-                            <p>Ваше резюме<br/><span>заполнено</span></p>
-                            <div className='item__infoLink'>
-                                <img src={rightArrow} />
-                            </div>
+                        <div className='summary__sectionGitItems'>
+                            {gitInfo.length && gitInfo.map((itemGit) => {
+                                return <div key={itemGit.id} className='summary__sectionGitItem gitItem'>
+                                            <div className='gitItem__info'>
+                                                <div className='gitItem__info__about'>
+                                                    <img src={gitImgItem} alt='gitImg' />
+                                                    <div className='gitItem__info__name'>
+                                                        <h4>{itemGit.title}</h4>
+                                                        <p>{itemGit.description}</p>
+                                                    </div>
+                                                </div>
+                                                <div className='gitItem__info__specification'>
+                                                    <span></span>
+                                                    <p>{itemGit.main_stack}</p>
+                                                </div>
+                                            </div>
+                                            <a className='gitItem__link' href={itemGit.link} target="_blank">
+                                                <img src={rightArrow} alt='arrowRight' />
+                                            </a>
+                                        </div>
+                                })
+                            }
                         </div>
-                    </NavLink>
-                    <NavLink to={'/profile'} className='item'>
-                        <div className='item__about'>
-                            <img src={timerIcon} />
-                            <h3>Трекер времени</h3>
-                        </div>
-                        <div className='item__info'>
-                            <p>Сколько времени занимает<br/> выполнение задач</p>
-                            <div className='item__infoLink'>
-                                <img src={rightArrow} />
-                            </div>
-                        </div>
-                    </NavLink>
-                    <NavLink to={'/profile'} className='item'>
-                        <div className='item__about'>
-                            <img src={paymentIcon} />
-                            <h3>Выплаты</h3>
-                        </div>
-                        <div className='item__info'>
-                            <p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
-                            <div className='item__infoLink'>
-                                <img src={rightArrow} />
-                            </div>
-                        </div>
-                    </NavLink>
-                    <NavLink to={'/profile'} className='item'>
-                        <div className='item__about'>
-                            <img src={settingIcon} />
-                            <h3>Настройки аккаунта</h3>
-                        </div>
-                        <div className='item__info'>
-                            <p>Перейдите чтобы начать<br/> редактирование</p>
-                            <div className='item__infoLink'>
-                                <img src={rightArrow} />
-                            </div>
-                        </div>
-                    </NavLink>
-                </div>
+                    </div>
+                }
             </div>
             <Footer/>
         </div>
     )
 }
+