Dynamisation du component ExperienceCard
> + Traduction
This commit is contained in:
parent
cb8dcd4c58
commit
8e2865cf19
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.0 KiB |
@ -11,18 +11,19 @@ export default class ExperienceCard extends Component {
|
|||||||
// this.state = {};
|
// this.state = {};
|
||||||
// }
|
// }
|
||||||
render() {
|
render() {
|
||||||
|
var imgSrc = this.props.logo;
|
||||||
return <div class="card-content">
|
return <div class="card-content">
|
||||||
<div class="media">
|
<div class="media">
|
||||||
<div class="media-left">
|
<div class="media-left">
|
||||||
<a href={this.props.lienLogo}>
|
<a href={this.props.lienLogo}>
|
||||||
<figure class="image is-48x48">
|
<figure class="image is-48x48">
|
||||||
<img src={this.props.logo} alt="Logo Entreprise"/>
|
<img src={imgSrc} alt="Logo Entreprise"/>
|
||||||
</figure>
|
</figure>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="media-content">
|
<div class="media-content">
|
||||||
<p class="title is-4">{this.props.title}</p>
|
<p class="title is-4">{this.props.title}</p>
|
||||||
<p class="subtitle is-6">{this.props.nomEntreprise} - {this.props.lieuEntreprise} - ({this.props.date})</p>
|
<p class="subtitle is-6">{this.props.nomEntreprise} - {this.props.lieuEntreprise} - {this.props.date}</p>
|
||||||
<div class="tags">
|
<div class="tags">
|
||||||
{this.props.tags.map(function(name, index){
|
{this.props.tags.map(function(name, index){
|
||||||
return <span key={ index } class="tag">{name}</span>;
|
return <span key={ index } class="tag">{name}</span>;
|
||||||
@ -33,6 +34,10 @@ export default class ExperienceCard extends Component {
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
{this.props.descriptionEmploi}
|
{this.props.descriptionEmploi}
|
||||||
</div>
|
</div>
|
||||||
|
{this.props.commentaire ? <div class="comment">
|
||||||
|
{this.props.commentaire}
|
||||||
|
</div> : ''}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
|
.comment{
|
||||||
.component-experienceCard-component{
|
font-style: italic;
|
||||||
|
margin-top: -25px;
|
||||||
}
|
}
|
@ -1,22 +1,21 @@
|
|||||||
import React, {Component} from '../../../node_modules/react';
|
import React, {Component} from '../../../node_modules/react';
|
||||||
|
import { injectIntl } from 'react-intl'
|
||||||
|
|
||||||
import ExperienceCard from '../ExperienceCard/index';
|
import ExperienceCard from '../ExperienceCard/index';
|
||||||
import ButtonIcon from '../ButtonIcon/index';
|
import ButtonIcon from '../ButtonIcon/index';
|
||||||
|
|
||||||
import './MainCard.scss'
|
import './MainCard.scss'
|
||||||
import photoProfil from '../../images/profile_opt.png';
|
import photoProfil from '../../images/profile_opt.png';
|
||||||
import michelinLogo from '../../images/logos/michelin.png';
|
|
||||||
import iutClermontLogo from '../../images/logos/www.iut-clermont.png';
|
|
||||||
import harvestLogo from '../../images/logos/harvest.fr.png';
|
|
||||||
|
|
||||||
// import { connect } from "react-redux";
|
// import { connect } from "react-redux";
|
||||||
// import { bindActionCreators } from "redux";
|
// import { bindActionCreators } from "redux";
|
||||||
// import * as mainCardActions from "../../store/mainCard/actions";
|
// import * as mainCardActions from "../../store/mainCard/actions";
|
||||||
export default class MainCard extends Component {
|
class MainCard extends Component {
|
||||||
// constructor(props) {
|
// constructor(props) {
|
||||||
// super(props);
|
// super(props);
|
||||||
// this.state = {};
|
// this.state = {};
|
||||||
// }
|
// }
|
||||||
render() {
|
render() {
|
||||||
|
const experienceCardMessage = this.props.intl.messages.experienceCard;
|
||||||
return <section id="idCard" class="hero is-medium is-primary-inverted is-bold">
|
return <section id="idCard" class="hero is-medium is-primary-inverted is-bold">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -63,46 +62,45 @@ export default class MainCard extends Component {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column is-7" id="experiences">
|
<div class="column is-7" id="experiences">
|
||||||
<span class="title">Experience</span>
|
<span class="title">{experienceCardMessage.title}</span>
|
||||||
<ExperienceCard
|
{experienceCardMessage.experiences.map(function(experience, index){
|
||||||
nomEntreprise="Harvest"
|
return <ExperienceCard
|
||||||
lieuEntreprise="Clermont-Ferrand"
|
nomEntreprise={experienceCardMessage.experiences[index].entreprise}
|
||||||
descriptionEmploi="Développement de simulateurs bancaires responsives."
|
lieuEntreprise={experienceCardMessage.experiences[index].location}
|
||||||
title="Développeur Full Stack"
|
descriptionEmploi={experienceCardMessage.experiences[index].description}
|
||||||
date="depuis 2016"
|
title={experienceCardMessage.experiences[index].ocupation}
|
||||||
lienLogo="https://www.harvest.fr"
|
date={experienceCardMessage.experiences[index].duration}
|
||||||
logo={harvestLogo}
|
lienLogo={experienceCardMessage.experiences[index].url}
|
||||||
tags={["Java EE","Angular","OpenAPI","jQuery","Spring"]}/>
|
logo={experienceCardMessage.experiences[index].logo}
|
||||||
|
tags={experienceCardMessage.experiences[index].tags}/>;
|
||||||
<ExperienceCard
|
})}
|
||||||
nomEntreprise="Michelin"
|
<span class="title">Education</span>
|
||||||
lieuEntreprise="Clermont-Ferrand"
|
{experienceCardMessage.education.map(function(experience, index){
|
||||||
descriptionEmploi="Stage de fin d'étude DUT, etude du marché des objets connectés, création d'un prototype embarqué."
|
return <ExperienceCard
|
||||||
title="Développeur Internet des Objets"
|
nomEntreprise={experienceCardMessage.education[index].entreprise}
|
||||||
date="2015"
|
lieuEntreprise={experienceCardMessage.education[index].location}
|
||||||
lienLogo="https://www.michelin.fr"
|
descriptionEmploi={experienceCardMessage.education[index].description}
|
||||||
logo={michelinLogo}
|
title={experienceCardMessage.education[index].ocupation}
|
||||||
tags={["MongoDB","Node.js","Word","Powerpoint"]}/>
|
date={experienceCardMessage.education[index].duration}
|
||||||
|
lienLogo={experienceCardMessage.education[index].url}
|
||||||
<span class="title">Education</span>
|
logo={experienceCardMessage.education[index].logo}
|
||||||
|
tags={experienceCardMessage.education[index].tags}
|
||||||
<ExperienceCard
|
commentaire={experienceCardMessage.education[index].commentaire}/>;
|
||||||
nomEntreprise="IUT du Puy en Velay"
|
})}
|
||||||
lieuEntreprise="Le Puy en Velay"
|
|
||||||
descriptionEmploi="Programmation 3D temps réel, Web, infographie 3D, retouche d'image."
|
|
||||||
title="DUT Informatique - Imagerie Numérique"
|
|
||||||
date="Promotion 2015"
|
|
||||||
lienLogo="https://www.iut-clermont.fr"
|
|
||||||
logo={iutClermontLogo}
|
|
||||||
tags={["Unity","3DSMax","Photoshop","C++","Python","Web Design"]}/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>;
|
</section>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default injectIntl(MainCard)
|
||||||
// export default connect(
|
// export default connect(
|
||||||
// ({ mainCard }) => ({ ...mainCard }),
|
// ({ mainCard }) => ({ ...mainCard }),
|
||||||
// dispatch => bindActionCreators({ ...mainCardActions }, dispatch)
|
// dispatch => bindActionCreators({ ...mainCardActions }, dispatch)
|
||||||
|
@ -1,4 +1,60 @@
|
|||||||
{
|
{
|
||||||
"title":"Anthony Dumas",
|
"title":"Anthony Dumas",
|
||||||
"subtitle":"Full Stack Developer @ Harvest"
|
"subtitle":"Full Stack Developer @ Harvest",
|
||||||
|
"experienceCard" : {
|
||||||
|
"title" : "Experience",
|
||||||
|
"experiences" : [
|
||||||
|
{
|
||||||
|
"ocupation" : "Full Stack Developer",
|
||||||
|
"logo" : "../../logos/harvest.fr.png",
|
||||||
|
"url" : "https://www.harvest.fr",
|
||||||
|
"duration" : "(since 2016)",
|
||||||
|
"entreprise" : "Harvest",
|
||||||
|
"location" : "Clermont-Ferrand",
|
||||||
|
"description" : "Development of responsive banking simulators and APIs.",
|
||||||
|
"tags" : [
|
||||||
|
"Java EE",
|
||||||
|
"Angular",
|
||||||
|
"OpenAPI",
|
||||||
|
"jQuery",
|
||||||
|
"Spring"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ocupation" : "Internship as IOT Developer",
|
||||||
|
"logo" : "../../logos/michelin.png",
|
||||||
|
"url" : "https://www.michelin.fr",
|
||||||
|
"duration" : "2015",
|
||||||
|
"entreprise" : "Michelin",
|
||||||
|
"location" : "Clermont-Ferrand",
|
||||||
|
"description" : "End of year internship, study of the Internet of Things Market, making of a IOT prototype.",
|
||||||
|
"tags" : [
|
||||||
|
"MongoDB",
|
||||||
|
"Node.js",
|
||||||
|
"Word",
|
||||||
|
"Powerpoint"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"education" : [
|
||||||
|
{
|
||||||
|
"ocupation" : "Associate's Degree in Computer Science / Digital Imaging *",
|
||||||
|
"logo" : "../../logos/www.iut-clermont.png",
|
||||||
|
"url" : "https://www.iut-clermont.fr/",
|
||||||
|
"duration" : "Class of 2015",
|
||||||
|
"entreprise" : "University of Auvergne",
|
||||||
|
"location" : "Le Puy-en-Velay",
|
||||||
|
"description" : "Real Time 3D development, Web, 3D computer graphic, image retouch.",
|
||||||
|
"commentaire" : "* Translation of DUT Informatique - Imagerie Numérique",
|
||||||
|
"tags" : [
|
||||||
|
"Unity",
|
||||||
|
"3DSMax",
|
||||||
|
"Photoshop",
|
||||||
|
"C++",
|
||||||
|
"Python",
|
||||||
|
"Web Design"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
@ -1,4 +1,59 @@
|
|||||||
{
|
{
|
||||||
"title":"Anthony Yvon Dumas",
|
"title":"Anthony Yvon Dumas",
|
||||||
"subtitle":"Développeur Full Stack @ Harvest"
|
"subtitle":"Développeur Full Stack @ Harvest",
|
||||||
|
"experienceCard" : {
|
||||||
|
"title" : "Experience",
|
||||||
|
"experiences" : [
|
||||||
|
{
|
||||||
|
"ocupation" : "Développeur Full Stack",
|
||||||
|
"logo" : "../../logos/harvest.fr.png",
|
||||||
|
"url" : "https://www.harvest.fr",
|
||||||
|
"duration" : "(depuis 2016)",
|
||||||
|
"entreprise" : "Harvest",
|
||||||
|
"location" : "Clermont-Ferrand",
|
||||||
|
"description" : "Développement de simulateurs bancaires responsives.",
|
||||||
|
"tags" : [
|
||||||
|
"Java EE",
|
||||||
|
"Angular",
|
||||||
|
"OpenAPI",
|
||||||
|
"jQuery",
|
||||||
|
"Spring"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ocupation" : "Stagiaire Développeur Internet des Objets",
|
||||||
|
"logo" : "../../logos/michelin.png",
|
||||||
|
"url" : "https://www.michelin.fr",
|
||||||
|
"duration" : "2015",
|
||||||
|
"entreprise" : "Michelin",
|
||||||
|
"location" : "Clermont-Ferrand",
|
||||||
|
"description" : "Stage de fin d'étude DUT, etude du marché des objets connectés, création d'un prototype embarqué.",
|
||||||
|
"tags" : [
|
||||||
|
"MongoDB",
|
||||||
|
"Node.js",
|
||||||
|
"Word",
|
||||||
|
"Powerpoint"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"education" : [
|
||||||
|
{
|
||||||
|
"ocupation" : "DUT Informatique - Imagerie Numérique",
|
||||||
|
"logo" : "../../logos/www.iut-clermont.png",
|
||||||
|
"url" : "https://www.iut-clermont.fr/",
|
||||||
|
"duration" : "Promotion 2015",
|
||||||
|
"entreprise" : "Université d'Auvergne",
|
||||||
|
"location" : "Le Puy-en-Velay",
|
||||||
|
"description" : "Programmation 3D temps réel, Web, infographie 3D, retouche d'image.",
|
||||||
|
"tags" : [
|
||||||
|
"Unity",
|
||||||
|
"3DSMax",
|
||||||
|
"Photoshop",
|
||||||
|
"C++",
|
||||||
|
"Python",
|
||||||
|
"Web Design"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user