fixed code
This commit is contained in:
@ -1,24 +1,24 @@
|
||||
import React from 'react';
|
||||
import { useHistory, useParams } from 'react-router-dom';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectCandidates, currentCandidate, selectCurrentCandidate } from '../../redux/outstaffingSlice';
|
||||
import style from './Candidate.module.css';
|
||||
import arrow from '../../images/right-arrow.png';
|
||||
import rectangle from '../../images/rectangle_secondPage.png';
|
||||
import Sidebar from '../Sidebar/Sidebar';
|
||||
import SectionOne from './sections/SectionOne';
|
||||
import SectionTwo from './sections/SectionTwo';
|
||||
import SectionThree from './sections/SectionThree';
|
||||
import SectionFour from './sections/SectionFour';
|
||||
import SectionFive from './sections/SectionFive';
|
||||
import SectionSkills from './sections/SectionSkills';
|
||||
import SectionSkills from './SectionSkills';
|
||||
|
||||
const Candidate = ({ candidatesArr, getCandidateForCalendar }) => {
|
||||
const Candidate = () => {
|
||||
const history = useHistory();
|
||||
|
||||
const { id: candidateId } = useParams();
|
||||
|
||||
const currentCandidate = candidatesArr.find((el) => Number(el.id) === Number(candidateId));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { name, skillsName, img } = currentCandidate;
|
||||
const candidatesArr = useSelector(selectCandidates);
|
||||
dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId))));
|
||||
const currentCandidateObj = useSelector(selectCurrentCandidate);
|
||||
|
||||
const { name, skillsName, img, skills } = currentCandidateObj;
|
||||
|
||||
let classes;
|
||||
|
||||
@ -66,24 +66,67 @@ const Candidate = ({ candidatesArr, getCandidateForCalendar }) => {
|
||||
<div className={style.candidate__main}>
|
||||
<div className="row">
|
||||
<div className="col-12 col-xl-4">
|
||||
<Sidebar getCandidateForCalendar={getCandidateForCalendar} currentCandidateObj={currentCandidate} />
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-xl-8">
|
||||
<div className={style.candidate__main__description}>
|
||||
<h2>{name}</h2>
|
||||
<img src={rectangle} alt="" />
|
||||
<p># Описание опыта</p>
|
||||
<SectionOne />
|
||||
<div className={style.SectionOne}>
|
||||
<h3>SVM - сервис выездных менеджеров для банка ПСБ</h3>
|
||||
<p>
|
||||
Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их
|
||||
услуги своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое
|
||||
обслуживание или регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все
|
||||
необходимые бумаги ВМ подготовит заранее и принесет на согласование и подпись в удобное ему (клиент)
|
||||
время и место.
|
||||
</p>
|
||||
<h4>Senior PHP/JS Developer</h4>
|
||||
</div>
|
||||
<p># Средства и инструменты:</p>
|
||||
<SectionTwo />
|
||||
<div className={style.SectionTwo}>
|
||||
<p>
|
||||
- Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js,
|
||||
MySQL, JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP.
|
||||
Перевел существующую платформу с Laravel на современную архитектуру React/Redux и Node.
|
||||
</p>
|
||||
<p>
|
||||
- Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и
|
||||
JavaScript. - Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания
|
||||
всех основных компонентов и внедрения новой архетиктуры. - Разработал персональное APIs.
|
||||
</p>
|
||||
</div>
|
||||
<p># Описание опыта</p>
|
||||
<SectionThree />
|
||||
<div className={style.SectionThree}>
|
||||
<h3>Multitur - личный кабинет для сервиса поиска/подбора отелей</h3>
|
||||
<p>
|
||||
Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте.
|
||||
</p>
|
||||
<h4>Senior PHP/JS Developer</h4>
|
||||
</div>
|
||||
<p># Средства и инструменты:</p>
|
||||
<SectionFour />
|
||||
<div className={style.SectionFour}>
|
||||
<p>Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8</p>
|
||||
<p>Frontend - Vue.js</p>
|
||||
<p>БД - MYSQL</p>
|
||||
</div>
|
||||
<p># Функционал:</p>
|
||||
<SectionFive />
|
||||
<SectionSkills />
|
||||
<>
|
||||
<div className={style.SectionFive}>
|
||||
<p>Регистрации/авторизации;</p>
|
||||
<p>Управления правами менеджеров отеля, назначение поставщиков</p>
|
||||
<p>Управления описанием и профилем отелей;</p>
|
||||
<p>Управления финансами, ценообразованием, квотами;</p>
|
||||
<p>Переписки со своими менеджерами, а также с вышестоящими инстанциями;</p>
|
||||
<p>Управления новостями отеля;</p>
|
||||
<p>Просмотра расширенной статистики по заявкам и людям;</p>
|
||||
</div>
|
||||
<button type="submit" className={style.SectionFive__btn}>
|
||||
Выбрать к собеседованию
|
||||
</button>
|
||||
</>
|
||||
<SectionSkills skillsArr={skills} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -182,3 +182,162 @@
|
||||
text-align: left;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.SectionOne > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.2em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionOne > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionOne > h4 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionTwo > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionThree > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.2em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionThree > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionThree > h4 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionFour > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionFive > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (min-width: 576.98px) {
|
||||
.SectionFive__btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.SectionFive__btn {
|
||||
display: block;
|
||||
width: 221px;
|
||||
height: 49px;
|
||||
box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21);
|
||||
border-radius: 24px;
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
|
||||
linear-gradient(
|
||||
36deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.16) 47%,
|
||||
rgba(255, 255, 255, 0.17) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-size: 1.3em;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
border: none;
|
||||
text-align: center;
|
||||
margin: 28px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.SectionSkills {
|
||||
display: flex;
|
||||
border: 1px solid #69bf2c;
|
||||
padding: 28px 40px 16px 30px;
|
||||
margin-top: 60px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.SectionSkills {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.SectionSkills > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionSkills > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
15
src/components/Candidate/SectionSkills.js
Normal file
15
src/components/Candidate/SectionSkills.js
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import style from './Candidate.module.css';
|
||||
|
||||
const SectionSkills = ({ skillsArr }) => {
|
||||
return (
|
||||
<div className={style.SectionSkills}>
|
||||
<h3>Навыки:</h3>
|
||||
{skillsArr.map((skills) => (
|
||||
<p key={skills.id}>{skills.skill.name}</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionSkills;
|
@ -1,156 +0,0 @@
|
||||
.SectionOne > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.2em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionOne > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionOne > h4 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionTwo > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionThree > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.2em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionThree > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionThree > h4 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionFour > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionFive > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (min-width: 576.98px) {
|
||||
.SectionFive__btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.SectionFive__btn {
|
||||
display: block;
|
||||
width: 221px;
|
||||
height: 49px;
|
||||
box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21);
|
||||
border-radius: 24px;
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
|
||||
linear-gradient(
|
||||
36deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.16) 47%,
|
||||
rgba(255, 255, 255, 0.17) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-size: 1.3em;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
border: none;
|
||||
text-align: center;
|
||||
margin: 28px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.SectionSkills {
|
||||
border: 1px solid #69bf2c;
|
||||
padding: 28px 40px 16px 30px;
|
||||
margin-top: 60px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.SectionSkills {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.SectionSkills > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionSkills > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
@ -1,23 +0,0 @@
|
||||
import React from 'react';
|
||||
import style from './Section.module.css';
|
||||
|
||||
const SectionFive = () => {
|
||||
return (
|
||||
<>
|
||||
<div className={style.SectionFive}>
|
||||
<p>Регистрации/авторизации;</p>
|
||||
<p>Управления правами менеджеров отеля, назначение поставщиков</p>
|
||||
<p>Управления описанием и профилем отелей;</p>
|
||||
<p>Управления финансами, ценообразованием, квотами;</p>
|
||||
<p>Переписки со своими менеджерами, а также с вышестоящими инстанциями;</p>
|
||||
<p>Управления новостями отеля;</p>
|
||||
<p>Просмотра расширенной статистики по заявкам и людям;</p>
|
||||
</div>
|
||||
<button type="submit" className={style.SectionFive__btn}>
|
||||
Выбрать к собеседованию
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionFive;
|
@ -1,14 +0,0 @@
|
||||
import React from 'react';
|
||||
import style from './Section.module.css';
|
||||
|
||||
const SectionFour = () => {
|
||||
return (
|
||||
<div className={style.SectionFour}>
|
||||
<p>Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8</p>
|
||||
<p>Frontend - Vue.js</p>
|
||||
<p>БД - MYSQL</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionFour;
|
@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
import style from './Section.module.css';
|
||||
|
||||
const SectionOne = () => {
|
||||
return (
|
||||
<div className={style.SectionOne}>
|
||||
<h3>SVM - сервис выездных менеджеров для банка ПСБ</h3>
|
||||
<p>
|
||||
Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их услуги
|
||||
своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое обслуживание или
|
||||
регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все необходимые бумаги ВМ
|
||||
подготовит заранее и принесет на согласование и подпись в удобное ему (клиент) время и место.
|
||||
</p>
|
||||
<h4>Senior PHP/JS Developer</h4>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionOne;
|
@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
import style from './Section.module.css';
|
||||
|
||||
const SectionSkills = () => {
|
||||
return (
|
||||
<div className={style.SectionSkills}>
|
||||
<h3>Навыки:</h3>
|
||||
<p>
|
||||
PHP: Native, Laravel, Zend Framework, CodeIgniter, YII, Symfony. JavaScript: Native, jQuery, AngularJS, ExtJS,
|
||||
BackboneJS, ReactJS + Redux, VueJS. Search Engines: Sphinx, Elastic Search. Cache: Memcache, Redis. Profiling:
|
||||
Xdebug, XHProf. WebSockets: Ratchet, Socket.io. Очереди: RabbitMQ, Beanstalk. MySQL, PostgreSQL, Oracle, MsSQL,
|
||||
Vertica, HBase, Cassandra, MongoDB, Redis, Tarantool. CSS 2/3 (Sass, Less). HTML 4/5.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionSkills;
|
@ -1,14 +0,0 @@
|
||||
import React from 'react';
|
||||
import style from './Section.module.css';
|
||||
|
||||
const SectionThree = () => {
|
||||
return (
|
||||
<div className={style.SectionThree}>
|
||||
<h3>Multitur - личный кабинет для сервиса поиска/подбора отелей</h3>
|
||||
<p>Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте.</p>
|
||||
<h4>Senior PHP/JS Developer</h4>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionThree;
|
@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
import style from './Section.module.css';
|
||||
|
||||
const SectionTwo = () => {
|
||||
return (
|
||||
<div className={style.SectionTwo}>
|
||||
<p>
|
||||
- Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js, MySQL,
|
||||
JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP. Перевел существующую
|
||||
платформу с Laravel на современную архитектуру React/Redux и Node.
|
||||
</p>
|
||||
<p>
|
||||
- Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и JavaScript. -
|
||||
Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания всех основных компонентов
|
||||
и внедрения новой архетиктуры. - Разработал персональное APIs.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionTwo;
|
Reference in New Issue
Block a user