diff --git a/package.json b/package.json index b0265de0..0aedbaa8 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "outstaffing", "version": "0.1.0", "private": true, + "homepage": "https://html.craft-group.xyz/outstaffing/", "dependencies": { "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.7", diff --git a/public/.htaccess b/public/.htaccess new file mode 100644 index 00000000..152dce1f --- /dev/null +++ b/public/.htaccess @@ -0,0 +1,4 @@ +Options -MultiViews +RewriteEngine On +RewriteCond %{REQUEST_FILENAME} !-f +RewriteRule ^ index.html [QSA,L] \ No newline at end of file diff --git a/src/App.js b/src/App.js index f976db9d..725ad72c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import React, { useState, useEffect, Suspense, lazy } from 'react'; -import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; +import { HashRouter as Router, Route, Switch } from 'react-router-dom'; import 'bootstrap/dist/css/bootstrap.min.css'; import './fonts/stylesheet.css'; diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js index 32bc333c..f581fc3a 100644 --- a/src/components/Candidate/Candidate.js +++ b/src/components/Candidate/Candidate.js @@ -2,7 +2,6 @@ import React from 'react'; import { useHistory, useParams } from 'react-router-dom'; import style from './Candidate.module.css'; import { candidatesList } from '../Home/Home'; -import icon from '../../images/front_end.png'; import arrow from '../../images/right-arrow.png'; import rectangle from '../../images/rectangle_secondPage.png'; import Sidebar from '../Sidebar/Sidebar'; @@ -17,10 +16,11 @@ const Candidate = () => { const history = useHistory(); const { id: candidateId } = useParams(); + console.log('candidateId', candidateId); const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId)); - const { name } = currentCandidate; + const { name, img } = currentCandidate; return (
@@ -44,7 +44,7 @@ const Candidate = () => {
- +
diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js index ab68e86a..42439e79 100644 --- a/src/components/Description/Description.js +++ b/src/components/Description/Description.js @@ -6,12 +6,12 @@ import arrowLeft from '../../images/arrow_left.png'; import arrowRight from '../../images/arrow_right.png'; import { Link } from 'react-router-dom'; -const Description = ({ arr }) => { +const Description = ({ candidatesListArr }) => { return (
- {arr.map((el) => ( + {candidatesListArr.map((el) => (
@@ -30,11 +30,7 @@ const Description = ({ arr }) => {
- - {' '} - JavaScript · Typescript · ReactJS · Vue.js · Redux · MobX · Storybook · Jest · Адаптивная верстка · - БЭМ - + {el.tags}
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 16ed1f32..fcb041b8 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -1,17 +1,37 @@ import React from 'react'; import Outstaffing from '../Outstaffing/Outstaffing'; import Description from '../Description/Description'; +import front from '../../images/front_end.png'; +import back from '../../images/back_end.png'; +import design from '../../images/design.png'; export const candidatesList = [ - { id: 1, name: 'Frontend' }, - { id: 2, name: 'Backend' }, + { + id: 1, + name: 'Frontend', + img: front, + tags: 'JavaScript · Html · Css · Vue.js · ReactJS · Angular · MobX', + }, + + { + id: 2, + name: 'Backend', + img: back, + tags: 'Node.js · Express · Php · Ruby on Rails · Python · Wordpress · Java', + }, + { + id: 3, + name: 'Design', + img: design, + tags: 'Figma · Avocode · PhotoShop · Xara · Pinegrow · Macaw · KompoZer', + }, ]; const Home = () => { return ( <> - + ); }; diff --git a/src/components/Outstaffing/Outstaffing.js b/src/components/Outstaffing/Outstaffing.js index 21c68c52..4cd4b570 100644 --- a/src/components/Outstaffing/Outstaffing.js +++ b/src/components/Outstaffing/Outstaffing.js @@ -14,18 +14,21 @@ const Outstaffing = () => { const tags = [ { name: 'front', - img: '../../images/front_end.png', - tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css'], + img: front, + header: '# Популярный стек', + tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'], }, { name: 'back', - img: '../../images/back_end.png', - tags: ['Ruby on Rails', 'Node.js', 'Express', 'Php', 'Python', 'Wordpress'], + img: back, + header: '# Популярный стек', + tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'], }, { name: 'design', - img: '../../images/design.png', - tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw'], + img: design, + header: '# Популярный стек', + tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw', 'KompoZer'], }, ]; @@ -66,25 +69,19 @@ const Outstaffing = () => {
item.name === 'front')} - header={'# Популярный стек'} onClick={(item) => handleBlockClick(item)} />
item.name === 'back')} - header={'# Популярный стек'} onClick={(item) => handleBlockClick(item)} />
item.name === 'design')} - header={'# Популярный стек'} onClick={(item) => handleBlockClick(item)} />
diff --git a/src/components/Outstaffing/Outstaffing.module.css b/src/components/Outstaffing/Outstaffing.module.css index a636df95..3541d51e 100644 --- a/src/components/Outstaffing/Outstaffing.module.css +++ b/src/components/Outstaffing/Outstaffing.module.css @@ -30,7 +30,7 @@ max-height: 120px; } - .outstaffing__box > p { + .outstaffing__box > p{ font-family: 'GT Eesti Pro Display'; font-size: 1.2em; font-weight: 300; @@ -40,9 +40,17 @@ text-align: left; margin-top: 60px; margin-bottom: 0; - margin-left: 16px; + /* margin-left: 40px; */ } + .outstaffing__box > ul{ + padding-left: 0; + + } + + + + .items > li { font-family: 'GT Eesti Pro Display - Thin'; font-size: 1.8em; diff --git a/src/components/Outstaffing/OutstaffingBlock.js b/src/components/Outstaffing/OutstaffingBlock.js index a7b0fd52..be082a2d 100644 --- a/src/components/Outstaffing/OutstaffingBlock.js +++ b/src/components/Outstaffing/OutstaffingBlock.js @@ -1,21 +1,21 @@ import React from 'react'; import style from './Outstaffing.module.css'; -const OutstaffingBlock = ({ text, image, data, onClick }) => { +const OutstaffingBlock = ({ data = {}, onClick }) => { + const { img, header, tags } = data; return (
- img -

{text}

-
    - {data && - data.tags && - data.tags.length && - data.tags.map((item) => ( + img +

    {header}

    + {tags && ( +
      + {tags.map((item) => (
    • onClick(item)}> {item}
    • ))} -
    +
+ )}
); };