gitadmin/AlfaPrentice
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

profile ppages implemented

Browse Source
This commit is contained in:
frits000000 2020-11-21 11:33:58 +01:00
parent 02852cc5b1
commit b51f82cd3a
17 changed files with 336 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ReactJS/alfaprentice/package-lock.json generated
View File

@ -3129,6 +3129,14 @@
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.1.0.tgz",
"integrity": "sha512-9atDIOTDLsWL+1GbBec6omflaT5Cxh88J0GtJtGfCVIXpI02rXHkju59W5mMqWa7eiC5OR168v3TK3kUKBW98g=="
},
"axios": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
"integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
"requires": {
"follow-redirects": "^1.10.0"
}
},
"axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@ -12516,6 +12524,14 @@
"warning": "^4.0.3"
}
},
"react-paginate": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-6.5.0.tgz",
"integrity": "sha512-H7xSi9jyiJzgfaj+2nNhQcjZfwzJ/Mxb64V2RiyDctjZyCWojwsaGwMqhLBpQ58iAuMVtBMRQ7ECqMcUKG9QSQ==",
"requires": {
"prop-types": "^15.6.1"
}
},
"react-refresh": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

2
ReactJS/alfaprentice/package.json
View File

@ -6,10 +6,12 @@
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.1",
"@testing-library/user-event": "^12.2.2",
"axios": "^0.21.0",
"react": "^17.0.1",
"react-cookie": "^4.0.3",
"react-dom": "^17.0.1",
"react-modal": "^3.11.2",
"react-paginate": "^6.5.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-toggle-display": "^2.2.1",

16
ReactJS/alfaprentice/src/Components/Cards/CompanyResult.js
View File

@ -4,6 +4,14 @@ import React from 'react';
//Style
import "./Cards.css";
//Components
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
class CompanyResult extends React.Component {
render() {
return(
@ -17,7 +25,7 @@ class CompanyResult extends React.Component {
Wij bij bedrijf 1 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …….
</div>
<div className="col-md-4 CompantResultBtn">
<a className="AP-Btn-Primary">Bekijk bedrijf</a>
<Link to="/bedrijfsprofiel" className="AP-Btn-Primary">Bekijk bedrijf</Link>
</div>
</div>
<div className="row mt-4">
@ -49,7 +57,7 @@ class CompanyResult extends React.Component {
Wij bij bedrijf 2 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …….
</div>
<div className="col-md-4 CompantResultBtn">
<a className="AP-Btn-Primary">Bekijk bedrijf</a>
<Link to="/bedrijfsprofiel" className="AP-Btn-Primary">Bekijk bedrijf</Link>
</div>
</div>
<div className="row mt-4">
@ -81,7 +89,7 @@ class CompanyResult extends React.Component {
Wij bij bedrijf 3 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …….
</div>
<div className="col-md-4 CompantResultBtn">
<a className="AP-Btn-Primary">Bekijk bedrijf</a>
<Link to="/bedrijfsprofiel" className="AP-Btn-Primary">Bekijk bedrijf</Link>
</div>
</div>
<div className="row mt-4">
@ -113,7 +121,7 @@ class CompanyResult extends React.Component {
Wij bij bedrijf 4 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …….
</div>
<div className="col-md-4 CompantResultBtn">
<a className="AP-Btn-Primary">Bekijk bedrijf</a>
<Link to="/bedrijfsprofiel" className="AP-Btn-Primary">Bekijk bedrijf</Link>
</div>
</div>
<div className="row mt-4">

28
ReactJS/alfaprentice/src/Components/Cards/FinishedInternCard.js Normal file
View File

@ -0,0 +1,28 @@
//Modules
import React from 'react';
//Stlyes
import "./Cards.css";
class FinishedInternShip extends React.Component {
render() {
return (
<div className="col-md-6">
<div className="finished-intership-card px-5">
<h4 className="AP-h4 my-4">Bedrijf 1</h4>
<p>Wij bij bedrijf 1 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …….</p>
<div className="row my-4">
<div className="col-md-6">
Gespecialiseerd in ICT communicatie
</div>
<div className="col-md-6">
<a className="AP-Btn-Primary">Bekijk bedrijf</a>
</div>
</div>
</div>
</div>
)
}
}
export default FinishedInternShip;

8
ReactJS/alfaprentice/src/Components/Footer/Footer.js
View File

@ -6,6 +6,12 @@ import "./Footer.css";
//Components
import Logo from "../images/logo-licht.png";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
class Footer extends React.Component {
render(){
@ -15,7 +21,7 @@ class Footer extends React.Component {
<div className="row">
<div className="col-md-4">
<div className="FooterColumn">
<img className="FooterLogo" src={Logo} />
<Link to="/"><img className="FooterLogo" src={Logo} /></Link>
</div>
</div>
<div className="col-md-4">

29
ReactJS/alfaprentice/src/Components/GlobalStyles.css
View File

@ -41,3 +41,32 @@
.GlobalHR{
border: 2px solid #DE0000;
}
.AP-h1{
font-size: 3.5rem;
}
.AP-h1-l{
color:#ffffff;
font-size: 3.5rem !important;
font-weight: 350 !important;
}
.AP-h1, .AP-h2, .AP-h3, .AP-h4, .AP-h5{
color:#DE0000;
font-weight: 350 !important;
}
.hr-1{
border: 1px solid #DE0000;
margin-left: 0px !important;
}
.hr-2{
border: 2px solid #DE0000;
margin-left: 0px !important;
}
.p0{
padding: 0px !important;
}

9
ReactJS/alfaprentice/src/Components/Header/Header.css
View File

@ -20,3 +20,12 @@
opacity: 0.7;
color: #DE0000;
}
.Nav-link{
color: black;
}
.Nav-link:hover{
color: #DE0000;
text-decoration: none;
}

12
ReactJS/alfaprentice/src/Components/Header/Header.js
View File

@ -8,6 +8,12 @@ import "./Header.css";
//Components
import Logo from '../images/logo.png';
import LogoLight from '../images/logo-licht.png'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
class Header extends React.Component {
@ -26,14 +32,14 @@ class Header extends React.Component {
return (
<header id="Header">
<div className="d-flex Header px-4 py-3">
<div className="logo">
<Link to="/" className="logo">
<img src={Logo} alt="Logo" />
</div>
</Link>
<ToggleDisplay hide={this.state.show} tag="section">
<div className="NavBar d-flex">
<div className="NavItem mx-2">
<a>Home</a>
<Link to="/" className="Nav-link">Home</Link>
</div>
<div className="NavItem mx-2">
<a>Contact</a>

4
ReactJS/alfaprentice/src/Components/Pages/HomePage.css → ReactJS/alfaprentice/src/Components/Pages/Home/HomePage.css
View File

@ -1,6 +1,6 @@
.HomeHero{
position: relative;
background-image: url("../images/Stock.png");
background-image: url("../../images/Stock.png");
padding: 150px 50px;
background-size: cover;
}
@ -48,7 +48,7 @@
}
.OpleidingItemInner{
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("../images/stock2.png");
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("../../images/stock2.png");
background-size: cover;
background-position: center;
height: 300px;

63
ReactJS/alfaprentice/src/Components/Pages/Home/HomePage.js Normal file
View File

@ -0,0 +1,63 @@
//Modules
import React from 'react';
//Style
import "./HomePage.css";
//Components
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import {
HeroOne,
CTA,
} from "../../";
class HomePage extends React.Component {
render() {
return(
<div className="HomePage">
<HeroOne title="AlfaPrentice" content="De plek om je ideale stageplek te vinden"/>
<div className="container mt-5">
<h2 className="color-p2 text-center">klik op je opleding en kijk welk bedrijf het meest bij jou past</h2>
<div className="row mt-4">
<Link to="/zoeken" className="col-md-3 OpleidingItem">
<a className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</a>
</Link>
<Link to="/zoeken" className="col-md-3 OpleidingItem">
<a className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</a>
</Link>
<Link to="/zoeken" className="col-md-3 OpleidingItem">
<a className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</a>
</Link>
<Link to="/zoeken" className="col-md-3 OpleidingItem">
<a className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</a>
</Link>
</div>
</div>
<CTA title="ALfaPrentice is ontwikkeld om jou te helpen met het zoeken naar de beste match tussen jou en een bedrijf" BtnText="Login en begin met soliciteren"/>
</div>
)
}
}
export default HomePage;

57
ReactJS/alfaprentice/src/Components/Pages/HomePage.js
View File

@ -1,57 +0,0 @@
//Modules
import React from 'react';
//Style
import "./HomePage.css";
//Components
import {
HeroOne,
CTA,
} from "../";
class HomePage extends React.Component {
render() {
return(
<div className="HomePage">
<HeroOne title="AlfaPrentice" content="De plek om je ideale stageplek te vinden"/>
<div className="container mt-5">
<h2 className="color-p2 text-center">klik op je opleding en kijk welk bedrijf het meest bij jou past</h2>
<div className="row mt-4">
<div className="col-md-3 OpleidingItem">
<div className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</div>
</div>
<div className="col-md-3 OpleidingItem">
<div className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</div>
</div>
<div className="col-md-3 OpleidingItem">
<div className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</div>
</div>
<div className="col-md-3 OpleidingItem">
<div className="OpleidingItemInner d-flex">
<div className="m-auto color-white">
Opleiding 1
</div>
</div>
</div>
</div>
</div>
<CTA title="ALfaPrentice is ontwikkeld om jou te helpen met het zoeken naar de beste match tussen jou en een bedrijf" BtnText="Login en begin met soliciteren"/>
</div>
)
}
}
export default HomePage;

58
ReactJS/alfaprentice/src/Components/Pages/Profile/CompanyProfile.js Normal file
View File

@ -0,0 +1,58 @@
//Modules
import React from 'react';
//Styles
import "./Profile.css";
//Images
import Image from "../../images/doos.jpg";
//Components
import {HeroOne} from "../../";
class CompanyProfile extends React.Component {
render() {
return (
<div className="CompanyProfile">
<HeroOne title="Bedrijf 1" content="ICT ontwikkeling"/>
<div className="container my-5">
<div className="row">
<div className="col-md-7">
<h1 className="AP-h1 mb-4">Wie zijn wij</h1>
<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
<h1 className="AP-h1 mt-4">Eisen</h1>
<p> . Kan koprol maken <br/>
. kan hoger dan 10 cm springen <br/>
. drinkt graag koffie <br/>
. heet een hekel aan Nederlandse rap
</p>
<h1 className="AP-h1 my-4">Heb je intresse</h1>
<a className="AP-Btn-Primary">Soliciteer nu</a>
</div>
<div className="col-md-5 text-center">
<h2 className="AP-h1 mb-5">Contactpersoon</h2>
<div className="ProfilePictureContainer mx-auto my-3">
<img src={Image} />
</div>
<h3 className="AP-h3 mb-4">Frits Haringa</h3>
<div className="ContactPersonContent mx-auto">
<p className="text-left">
Functie: CEO <br/>
Email: flappie@bedrijf1.nl <br/>
Tel: 0192883746
</p>
<p className="text-left">
Adres: ergends
</p>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default CompanyProfile;

24
ReactJS/alfaprentice/src/Components/Pages/Profile/Profile.css Normal file
View File

@ -0,0 +1,24 @@
.AP-h1{
font-size: 3rem !important;
}
.ProfilePictureContainer{
width: 250px;
height: 250px;
}
.ProfilePictureContainer img{
object-fit: cover;
height: 100%;
width: 100%;
border-radius: 50%;
}
.ContactPersonContent, .ContactPersonContent p{
width: fit-content !important;
}
.finished-intership-card{
border: 1px solid #DE0000;
}

65
ReactJS/alfaprentice/src/Components/Pages/Profile/UserProfile.js Normal file
View File

@ -0,0 +1,65 @@
//Modules
import React from 'react';
//Images
import Image from "../../images/doos.jpg";
//Styles
import "./Profile.css";
//Components
import { HeroOne, FinishedInternShip } from "../../";
class UserProfile extends React.Component {
render() {
return (
<div className="CompanyProfile">
<HeroOne title="Frits Haringa" content="Student Applicatie en Mediaontwikkeling jaar 3"/>
<div className="container my-5">
<div className="row">
<div className="col-md-7">
<h1 className="AP-h1 mb-4">Wie ben ik</h1>
<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
<h1 className="AP-h1 mt-4">Beheersde talen</h1>
<p> . Javascript <br/>
. html <br/>
. php <br/>
. ReactJs
</p>
<h1 className="AP-h1 my-4">Mijn CV</h1>
<a className="AP-Btn-Primary">Bekijk Mijn cv</a>
</div>
<div className="col-md-5 text-center">
<div className="ProfilePictureContainer mx-auto my-3">
<img src={Image} />
</div>
<h3 className="AP-h3 mb-4">Frits Haringa</h3>
<div className="ContactPersonContent mx-auto">
<p className="text-left">
Opleiding: AO <br/>
Email: flappie@bedrijf1.nl <br/>
Tel: 0192883746
</p>
<p className="text-left">
Github: githublink
</p>
</div>
</div>
</div>
</div>
<div className="container p0 mb-5">
<hr className="hr-1"/>
<h1 className="AP-h2 my-4">Heeft ook stage gelopen bij</h1>
<div className="row">
<FinishedInternShip/>
<FinishedInternShip/>
</div>
</div>
</div>
)
}
}
export default UserProfile;

6
ReactJS/alfaprentice/src/Components/Routing/Router.js
View File

@ -13,7 +13,9 @@ import { DefaultLayout } from '../';
//Main routes
import {
HomePage,
InternSearch
InternSearch,
CompanyProfile,
UserProfile,
} from '../';
//Sub routes
@ -37,6 +39,8 @@ class GlobalRouter extends React.Component {
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/zoeken" component={InternSearch} />
<Route path="/bedrijfsprofiel" component={CompanyProfile} />
<Route path="/gebruikersprofiel" component={UserProfile} />
</Switch>
</DefaultLayout>
</Router>

BIN
ReactJS/alfaprentice/src/Components/images/doos.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

8
ReactJS/alfaprentice/src/Components/index.js
View File

@ -6,13 +6,16 @@ import CTA from "./CTA/CTA"
import Footer from "./Footer/Footer";
import Dropdown from "./Dropdown/Dropdown";
import CompanyResults from "./Cards/CompanyResult";
import FinishedInternShip from "./Cards/FinishedInternCard";
//Layout imports
import DefaultLayout from "./Layouts/DefaultLayout";
//Pages imports
import HomePage from './Pages/HomePage';
import HomePage from './Pages/Home/HomePage';
import InternSearch from "./Pages/Search/InternSearchPage";
import CompanyProfile from "./Pages/Profile/CompanyProfile";
import UserProfile from "./Pages/Profile/UserProfile";
//Style
import "./GlobalStyles.css";
@ -26,6 +29,7 @@ export {
Footer,
Dropdown,
CompanyResults,
FinishedInternShip,
}
@ -39,4 +43,6 @@ export {
export {
HomePage,
InternSearch,
CompanyProfile,
UserProfile,
}