Dynamisation du component ExperienceCard

> + Traduction

src/components/ExperienceCard/ExperienceCard.js

@@ -11,18 +11,19 @@ export default class ExperienceCard extends Component {
     //     this.state = {};
     // }
     render() {
+        var imgSrc = this.props.logo;
       return <div class="card-content">
       <div class="media">
           <div class="media-left">
               <a href={this.props.lienLogo}>
                   <figure class="image is-48x48">
-                      <img src={this.props.logo} alt="Logo Entreprise"/>
+                      <img src={imgSrc} alt="Logo Entreprise"/>
                   </figure>
               </a>
           </div>
           <div class="media-content">
               <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">
                 {this.props.tags.map(function(name, index){
                     return <span key={ index } class="tag">{name}</span>;
@@ -33,6 +34,10 @@ export default class ExperienceCard extends Component {
       <div class="content">
             {this.props.descriptionEmploi}
       </div>
+      {this.props.commentaire ? <div class="comment">
+            {this.props.commentaire}
+      </div> : ''}
+      
   </div>
     }
   }

src/components/ExperienceCard/ExperienceCard.scss

@@ -1,4 +1,4 @@
-
+.comment{
-.component-experienceCard-component{
+    font-style: italic;
-    
+    margin-top: -25px;
 }

src/components/MainCard/MainCard.js

@@ -1,22 +1,21 @@
 import React, {Component} from '../../../node_modules/react';
+import { injectIntl } from 'react-intl'
+
 import ExperienceCard from '../ExperienceCard/index';
 import ButtonIcon from '../ButtonIcon/index';
 
 import './MainCard.scss'
 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 { bindActionCreators } from "redux";
 // import * as mainCardActions from "../../store/mainCard/actions";
-export default class MainCard extends Component {
+class MainCard extends Component {
     // constructor(props) {
     //     super(props);
     //     this.state = {};
     // }
     render() {
+        const experienceCardMessage = this.props.intl.messages.experienceCard;
       return <section id="idCard" class="hero is-medium is-primary-inverted is-bold">
         <div class="hero-body">
           <div class="container">
@@ -63,46 +62,45 @@ export default class MainCard extends Component {
                           </div>
                       </div>
                   </div>
+                  
                   <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>
   </section>;
     }
   }
+
+
+export default injectIntl(MainCard)
 // export default connect(
 //     ({ mainCard }) => ({ ...mainCard }),
 //     dispatch => bindActionCreators({ ...mainCardActions }, dispatch)

src/messages/en.json

@@ -1,4 +1,60 @@
 {
     "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"
+                ]
+            }
+        ]
+    }
 }

src/messages/fr.json

@@ -1,4 +1,59 @@
 {
     "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"
+                ]
+            }
+        ]
+    }
 }