From cabd01ca436c99f1137b2653e7af4c19d4c0eb0a Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Wed, 28 Dec 2022 09:45:26 +0300
Subject: [PATCH] profilePage

---
 public/index.html                         |   4 +-
 src/components/Candidate/Candidate.js     |   9 +-
 src/components/Profile/ProfileHeader.js   |  56 +++-
 src/components/Profile/profile.scss       | 322 +++++++++++++++++-----
 src/components/Profile/profileHeader.scss |  83 ++++++
 src/helper.js                             |  14 +
 src/images/arrowRight.png                 | Bin 0 -> 240 bytes
 src/images/gitItemImg.png                 | Bin 0 -> 1028 bytes
 src/pages/Profile.js                      | 180 ++++++++----
 src/server/server.js                      |   1 +
 10 files changed, 531 insertions(+), 138 deletions(-)
 create mode 100644 src/components/Profile/profileHeader.scss
 create mode 100644 src/helper.js
 create mode 100644 src/images/arrowRight.png
 create mode 100644 src/images/gitItemImg.png
diff --git a/public/index.html b/public/index.html
index 0a18b703..d2ecac05 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="height: 100%">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -14,7 +14,7 @@
     <link rel="shortcut icon" href="favicon.ico" />
   </head>
 
-  <body>
+  <body style="min-height: 100%">
     <!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
     <div id="root"></div>
     <!-- <script type="text/javascript">
diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js
index 31347f30..498b6a36 100644
--- a/src/components/Candidate/Candidate.js
+++ b/src/components/Candidate/Candidate.js
@@ -6,6 +6,9 @@ import {
   selectCurrentCandidate,
   auth
 } from '../../redux/outstaffingSlice'
+import {getRole} from '../../redux/roleSlice'
+import {useState} from 'react'
+import {createMarkup} from "../../helper";
 import arrow from '../../images/right-arrow.png'
 import rectangle from '../../images/rectangle_secondPage.png'
 import Sidebar from '../CandidateSidebar/CandidateSidebar'
@@ -17,8 +20,6 @@ import {fetchGet} from '../../server/server'
 import {Footer} from '../Footer/Footer'
 
 import './candidate.scss'
-import {getRole} from '../../redux/roleSlice'
-import {useState} from 'react'
 
 const Candidate = () => {
   const history = useHistory();
@@ -79,10 +80,6 @@ const Candidate = () => {
     return styles
   };
 
-  function createMarkup(text) {
-    return {__html: text.split('</p>').join('</p>')}
-  }
-
   const {header, img, classes} = setStyles();
 
   return (
diff --git a/src/components/Profile/ProfileHeader.js b/src/components/Profile/ProfileHeader.js
index b652078c..b1487ddd 100644
--- a/src/components/Profile/ProfileHeader.js
+++ b/src/components/Profile/ProfileHeader.js
@@ -1,11 +1,59 @@
-import React from 'react';
-import {LogoutButton} from "../LogoutButton/LogoutButton";
+import React, {useEffect, useState} from 'react';
+import {auth, getProfileInfo, setProfileInfo} from "../../redux/outstaffingSlice";
+import {useDispatch, useSelector} from "react-redux";
+import {Loader} from '../Loader/Loader'
+import {getRole} from "../../redux/roleSlice";
+import {useHistory} from "react-router-dom";
+import {fetchGet} from "../../server/server";
+
+import './profileHeader.scss'
 
 export const ProfileHeader = () => {
+    const [isLoggingOut, setIsLoggingOut] = useState(false);
+    const dispatch = useDispatch();
+    const userRole = useSelector(getRole);
+    const profileInfo = useSelector(getProfileInfo)
+    const history = useHistory();
+
+    useEffect(() => {
+        fetchGet({
+            link: `${process.env.REACT_APP_API_URL}/api/profile/${localStorage.getItem('cardId')}`,
+        }).then((profileInfo) => {
+            dispatch(setProfileInfo(profileInfo))
+        })
+    }, [])
     return(
         <header className='profileHeader'>
-            <h2 className='profileHeader__title'>Аутстаффинг <span>Personal Profile</span></h2>
-            <LogoutButton/>
+            <div className='profileHeader__head'>
+                <div className='profileHeader__container'>
+                    <h2 className='profileHeader__title'>itguild.<span>для разработчиков</span></h2>
+                    <button onClick={() => {
+                        setIsLoggingOut(true);
+                        localStorage.clear();
+                        dispatch(auth(false));
+                        setIsLoggingOut(false);
+                        history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
+                    }}
+                        className='profileHeader__logout'>
+                        {isLoggingOut ? <Loader/> : 'Выйти'}{' '}
+                    </button>
+                </div>
+            </div>
+            <div className='profileHeader__info'>
+                <div className='profileHeader__container'>
+                    <nav className='profileHeader__nav'>
+                        <a className='active'>Резюме</a>
+                        <a>Отчетность</a>
+                        <a>Трекер</a>
+                        <a>Выплаты</a>
+                        <a>Настройки</a>
+                    </nav>
+                    <div className='profileHeader__personalInfo'>
+                        <h3 className='profileHeader__personalInfoName'>{profileInfo.fio}</h3>
+                        <img src={profileInfo.photo} className='profileHeader__personalInfoAvatar' />
+                    </div>
+                </div>
+            </div>
         </header>
     )
 }
diff --git a/src/components/Profile/profile.scss b/src/components/Profile/profile.scss
index bac0c7fa..6ffe8acc 100644
--- a/src/components/Profile/profile.scss
+++ b/src/components/Profile/profile.scss
@@ -1,98 +1,276 @@
 .profile {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
 
   &__container {
-    max-width: 1140px;
-    margin: 0 auto;
+    max-width: 1160px;
+    padding: 0 10px;
+    margin: 20px auto;
     position: relative;
     display: flex;
     flex-direction: column;
   }
 
-  &Header {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 60px;
-
-    &__title {
-      text-align: center;
-      font-family: "GT Eesti Pro Display", sans-serif;
-      font-size: 5em;
-      font-weight: 700;
-      font-style: normal;
-      letter-spacing: normal;
-      line-height: 77.81px;
-
-      span {
-        color: #52b709;
-      }
-    }
-
-    .logout-button {
-      top: auto;
-    }
-  }
-
   &__content {
     display: flex;
-    margin-top: 20px;
+    flex-direction: column;
+  }
 
-    &__info {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding-left: 45px;
+  &__title {
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 32px;
+    margin-bottom: 0;
+
+    span {
+      color: #52B709;
     }
   }
 
-  &__sideBar {
+  &__back {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    padding: 10px;
-    border: 2px solid whitesmoke;
-    max-width: 34%;
-    row-gap: 12px;
+    column-gap: 30px;
+    margin-top: 20px;
+    cursor: pointer;
 
-    &__position {
-      font-size: 3rem;
-      font-family: "GT Eesti Pro Display", sans-serif;
-      font-weight: 700;
-      font-style: normal;
-      letter-spacing: normal;
-      line-height: 36px;
-      text-align: center;
+    p {
+      margin-bottom: 0;
+      font-size: 14px;
+      line-height: 32px;
+      font-weight: 500;
     }
+  }
 
-    &__experience {
-      font-family: "GT Eesti Pro Display", sans-serif;
-      font-size: 18px;
-      font-weight: normal;
-      font-style: normal;
-      letter-spacing: normal;
-      line-height: 36px;
-      margin-top: 20px;
-      display: flex;
-      flex-direction: column;
+  &__info {
+    min-height: 128px;
+    background: white;
+    border-radius: 12px;
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    padding: 0 130px 0 45px;
+    justify-content: space-between;
+  }
 
-      span {
-        font-size: 30px;
-        font-weight: 700;
-        text-align: center;
-      }
-    }
-
-    &-name {
-      font-size: 30px;
-      font-weight: 700;
-      text-align: center;
-    }
+  &__person {
+    display: flex;
+    align-items: center;
+    column-gap: 45px;
   }
 
   &__avatar {
-    width: 180px;
-    height: 180px;
+    width: 88px;
+    height: 88px;
     border-radius: 100px;
   }
+
+  &__name {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 32px;
+    position: relative;
+
+    &: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;
+  }
+
+  &__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;
+
+    h3 {
+      font-style: normal;
+      font-size: 18px;
+      line-height: 32px;
+    }
+
+    button {
+      background: #FFFFFF;
+      border-radius: 44px;
+      border: none;
+      min-width: 190px;
+      height: 42px;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 32px;
+    }
+  }
+
+  .skills__section {
+    &__items {
+      padding: 25px 35px 25px 50px;
+
+      &__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;
+    margin-top: 30px;
+
+    .experience {
+      &__block {
+        background: #FFFFFF;
+        border-radius: 12px;
+      }
+
+      &__content {
+        padding: 15px 35px 15px 50px;
+
+        h2 {
+          font-weight: 700;
+          font-size: 16px;
+          line-height: 32px;
+          margin-bottom: 0;
+        }
+
+        p {
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 32px;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &__sectionGit {
+    margin-top: 25px;
+
+    &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;
+
+        &__info {
+          display: flex;
+          flex-direction: column;
+          max-width: 350px;
+          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;
+            }
+          }
+
+          &__specification {
+            margin-top: 30px;
+            display: flex;
+            align-items: center;
+            padding-left: 10px;
+            column-gap: 25px;
+
+            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;
+          width: 48px;
+          height: 48px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  .container {
+    max-width: 1160px;
+    padding: 0 10px;
+    margin-top: 70px;
+  }
 }
diff --git a/src/components/Profile/profileHeader.scss b/src/components/Profile/profileHeader.scss
new file mode 100644
index 00000000..87d802ae
--- /dev/null
+++ b/src/components/Profile/profileHeader.scss
@@ -0,0 +1,83 @@
+.profileHeader {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &__head {
+    background: #E1FCCF;
+  }
+
+  &__container {
+    max-width: 1160px;
+    padding: 0 10px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 50px;
+  }
+
+  &__title {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 32px;
+    margin-bottom: 0;
+
+    span {
+      color: #52B709;
+    }
+  }
+
+  &__logout {
+    background: none;
+    border: none;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 32px;
+    color: #000000;
+  }
+
+  &__info {
+    background: #FFFFFF;
+  }
+
+  &__nav {
+    display: flex;
+    column-gap: 30px;
+
+    .active {
+      color: #000000 !important;
+    }
+
+    a {
+      text-decoration: none;
+      cursor: pointer;
+      font-weight: 700;
+      font-size: 18px;
+      line-height: 32px;
+      color: #807777 !important;
+    }
+  }
+
+  &__personalInfo {
+    display: flex;
+    column-gap: 20px;
+    align-items: center;
+
+    &Name {
+      margin-bottom: 0;
+      font-size: 12px;
+      line-height: 32px;
+      max-width: 150px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &Avatar {
+      width: 37px;
+      height: 37px;
+      border-radius: 100px;
+    }
+  }
+}
diff --git a/src/helper.js b/src/helper.js
new file mode 100644
index 00000000..0a3c8f51
--- /dev/null
+++ b/src/helper.js
@@ -0,0 +1,14 @@
+export function createMarkup(text) {
+    return {__html: text.split('</p>').join('</p>')}
+}
+
+export function transformHtml(text) {
+    let startHtml = {__html: text.split('<h2>').join('<br><h2>').split('<br>')}
+    startHtml = startHtml.__html.filter((el)=> {
+        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 {__html: finalHtml.join('')}
+}
diff --git a/src/images/arrowRight.png b/src/images/arrowRight.png
new file mode 100644
index 0000000000000000000000000000000000000000..fab8d93922dcded80bd38713eb54be73c3236cf5
GIT binary patch
literal 240
zcmeAS@N?(olHy`uVBq!ia0vp^LO{&L!3HFEdh;y=Qk(@Ik;M!Q+`=Ht$S`Y;1W=H%
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFKz^&Ii(^Oy<JwCbIh!3AS|5sU<yhi9-Oe{C
zt=Yjt@&wmRg{G-<tux+7C`H_O!4MVsQ@)D1;yM5PqmBH0ez)#P*Ry<j(=2vUE?NIe
zN8yBY{}PY05l5c4ci+jHkZ9tZe&^{m&V_&P-!UvGaP4JsxBTYNdMEwKw!SGHZxUC$
itu@T3oHE&V4&yIQff@dM+YNvYV(@hJb6Mw<&;$Ti&s0?a

literal 0
HcmV?d00001

diff --git a/src/images/gitItemImg.png b/src/images/gitItemImg.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef703e316a807e9148305064b1678c2cfb907938
GIT binary patch
literal 1028
zcmV+f1pE7mP)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1DQ!gK~#7FtyfJ*
zRY4T~vL6lmk<>*{`KaeoigZ!5ag!2}Zfeycgf>ZJMGz6DwMi*L2rH~`SM6LBQCUbx
zX%zHBL6D`8Ewbn(S!qAk`J8jP_uV)5zWaRdgO7V>=FFKhGiT16nS<yk5N;6G3M+->
z!eU{e@Tc&z@Qv_=@RqO_IYg20nDB$}pNAiX!@{@v{pxFHU6Zf`S)xIhP^II-E@8c}
zEI@v>uuj-5obnjch*=<Ccp2`j+F({B6RZ?=2>+^%PT{<$ojKTmb{rB`AUniiR)hK;
zA;M(ls~|h{3zs4{pkLfoy_{fvm~f{G(z6$P>aPoXggcQQrNUNWAB<x<SOPOK>c14!
zxe=}-c|Cd+lD+;FjDrrUEIFiu(jgNb*{i-Wid2?u4SoYkR2iKp?rV$tjL3xjNJWLV
zCE)Xq{o2rB=|sWbvozu!>}b>WW^W}|f#*7A>Cie$103#vePWC|qcD*eH7eX~5vG$(
zXKBPk*l|(YtMg#)0;0zvxJft%*<qt_xuyPwersvOS}nY^2o@tZSY)ZYuir`<LGS1O
zyt4>SBR8<ECNI2C!g3nH<CzHP{2sZ%SU~-E;W8Sr5WzEk0%LJD7zok9aSQX*n!ErZ
zc0PgZ&=%6haVPo17%_%$w7|WRqjCbtcZUu1#S#AWYNs-vK$UQdryLWWg}F1r2B*?9
z2u^$)l&U;$SDe&By-z3xvr0!T3J$?+qjzx5>M)|CPWzo^p;`-F7QywxA3o*#5WW&y
z5e?lcznKM|j!~V7E$eAfVJ5UsJ%c%6w@SZ^xIF3?kRD9^e!;BtjCV3!=PEGiIAZB=
zTzCLx`B%W4m=WP~ZU3X+*TQE=lQk*0oy_8rZtWtt$w<1K@|4bCugb5}FMX>I_KVO9
zMrg)|5oq${#0Spqp#JwDJQ<xpI0{1AI4Dme!+1N)gDELUaRyAs*1+VHLAPg2_(ixt
z%Ur=J)%6V~9khY^u4(^s!t()gGyCbpfnKD(o_53Bw%gU{L9M?dya}^44`6)A3$Cn_
z<T9I2`~E0`oAz_>;{kF_aJP*oY?pAZMUFn^B)0>|;1Na7b<%%^YkF}EnSq0~!#&bh
z5bfloU=NHJQwjH-Td)nmk6aGS$jcZq4mYcAK$hTuT>4?8hH2J0uktZpI|E=dA}oKV
y`D2Ze4j5Mh=?^@%JTct+$HLn%el;0EC;kJxiAc)fv@|~e0000<MNUMnLSTY?4Bkxu

literal 0
HcmV?d00001

diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index 31fd3a39..078a29c1 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -1,70 +1,142 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import { ProfileHeader } from "../components/Profile/ProfileHeader";
-import { setProfileInfo, getProfileInfo } from "../redux/outstaffingSlice";
-import {useDispatch, useSelector} from "react-redux";
-import { fetchGet } from '../../src/server/server'
-import {Link} from "react-router-dom";
+import { getProfileInfo } from "../redux/outstaffingSlice";
+import { useSelector } from "react-redux";
+import {transformHtml} from "../helper";
+import { Footer } from '../components/Footer/Footer'
+
+import arrow from "../images/right-arrow.png";
+import rightArrow from "../images/arrowRight.png"
+import gitImgItem from "../images/gitItemImg.png"
 
 import './../components/Profile/profile.scss'
+
 export const Profile = () => {
-    const dispatch = useDispatch();
     const profileInfo = useSelector(getProfileInfo)
-    useEffect(() => {
-        fetchGet({
-            link: `${process.env.REACT_APP_API_URL}/api/profile/get-main-data?user_id=${localStorage.getItem('id')}`,
-        }).then((profileInfo) => {
-            dispatch(setProfileInfo(profileInfo))
-        })
-    }, [dispatch, localStorage.getItem('id')])
+    const [openGit, setOpenGit] = useState(false);
     return(
         <div className='profile'>
+            <ProfileHeader/>
             <div className='profile__container'>
-                <ProfileHeader/>
                 <div className='profile__content'>
-                    <div className='profile__sideBar'>
-                        <h2 className='profile__sideBar__position'>{profileInfo.position_name} {profileInfo.specification}</h2>
-                        <img className='profile__avatar' src={profileInfo.photo} />
-                        <span className='profile__sideBar-name'>{profileInfo.fio}</span>
-                        <p className='profile__sideBar__experience'>Опыт работы: <span>{profileInfo.years_of_exp}года</span></p>
-                    </div>
-                    <div className='profile__content__info'>
-                        <div className="works__body">
-                            <div className="works__item item-works">
-                                <div className="item-works__body">
-                                    <Link to="/" className="item-works__link">Vuetifyis.com</Link>
-                                    <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
-                                        documentation
-                                    </div>
-                                    <div className="item-works__mark">Angular</div>
-                                </div>
-                            </div>
-                            <div className="works__item item-works">
-                                <div className="item-works__body">
-                                    <Link to="/" className="item-works__link">Vuetifyis.com</Link>
-                                    <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
-                                        documentation
-                                    </div>
-                                    <div className="item-works__mark">Angular</div>
-                                </div>
-                            </div>
-                            <div className="works__item item-works">
-                                <div className="item-works__body">
-                                    <Link to="/" className="item-works__link">Vuetifyis.com</Link>
-                                    <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
-                                        documentation
-                                    </div>
-                                    <div className="item-works__mark item-works__mark_yellow">Laravel</div>
-                                </div>
-                            </div>
+                    <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>
-                        <Link to={`/ProfileCalendar`}>
-                            <button className='candidate-sidebar__select'>
-                                Отчёты
-                            </button>
-                        </Link>
+                        {!openGit &&
+                        <button className='profile__git' onClick={()=> setOpenGit(true)}>Git</button>
+                        }
                     </div>
                 </div>
+                {!openGit &&
+                    <div className='profile__skills skills__section'>
+                        <div className='profile__sections__head'>
+                            <h3>Основной стек</h3>
+                            <button>Редактировать раздел</button>
+                        </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>
+                        </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>
+                        </div>
+                        <div className='profile__sectionGitItems'>
+                            <div className='profile__sectionGitItem gitItem'>
+                                <div className='gitItem__info'>
+                                    <div className='gitItem__info__about'>
+                                        <img src={gitImgItem} alt='gitImg' />
+                                        <div className='gitItem__info__name'>
+                                            <h4>cybershop-api</h4>
+                                            <p>Реактивная социальная сеть</p>
+                                        </div>
+                                    </div>
+                                    <div className='gitItem__info__specification'>
+                                        <span></span>
+                                        <p>JavaScript</p>
+                                    </div>
+                                </div>
+                                <a className='gitItem__link'>
+                                    <img src={rightArrow} alt='arrowRight' />
+                                </a>
+                            </div>
+                            <div className='profile__sectionGitItem gitItem'>
+                                <div className='gitItem__info'>
+                                    <div className='gitItem__info__about'>
+                                        <img src={gitImgItem} alt='gitImg' />
+                                        <div className='gitItem__info__name'>
+                                            <h4>cybershop-api</h4>
+                                            <p>Реактивная социальная сеть</p>
+                                        </div>
+                                    </div>
+                                    <div className='gitItem__info__specification'>
+                                        <span></span>
+                                        <p>JavaScript</p>
+                                    </div>
+                                </div>
+                                <a className='gitItem__link'>
+                                    <img src={rightArrow} alt='arrowRight' />
+                                </a>
+                            </div>
+                            <div className='profile__sectionGitItem gitItem'>
+                                <div className='gitItem__info'>
+                                    <div className='gitItem__info__about'>
+                                        <img src={gitImgItem} alt='gitImg' />
+                                        <div className='gitItem__info__name'>
+                                            <h4>cybershop-api</h4>
+                                            <p>Реактивная социальная сеть</p>
+                                        </div>
+                                    </div>
+                                    <div className='gitItem__info__specification'>
+                                        <span></span>
+                                        <p>JavaScript</p>
+                                    </div>
+                                </div>
+                                <a className='gitItem__link'>
+                                    <img src={rightArrow} alt='arrowRight' />
+                                </a>
+                            </div>
+                            <div className='profile__sectionGitItem gitItem'>
+                                <div className='gitItem__info'>
+                                    <div className='gitItem__info__about'>
+                                        <img src={gitImgItem} alt='gitImg' />
+                                        <div className='gitItem__info__name'>
+                                            <h4>cybershop-api</h4>
+                                            <p>Реактивная социальная сеть</p>
+                                        </div>
+                                    </div>
+                                    <div className='gitItem__info__specification'>
+                                        <span></span>
+                                        <p>JavaScript</p>
+                                    </div>
+                                </div>
+                                <a className='gitItem__link'>
+                                    <img src={rightArrow} alt='arrowRight' />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                }
             </div>
+            <Footer/>
         </div>
     )
 }
diff --git a/src/server/server.js b/src/server/server.js
index 7e46446d..601bbce6 100644
--- a/src/server/server.js
+++ b/src/server/server.js
@@ -49,6 +49,7 @@ export const fetchAuth = async ({
     response.json().then((resJSON) => {
       localStorage.setItem('auth_token', resJSON.access_token)
       localStorage.setItem('id', resJSON.id)
+      localStorage.setItem('cardId', resJSON.card_id)
       localStorage.setItem(
         'access_token_expired_at',
         resJSON.access_token_expired_at
