Dynamisation

> Projects
> Contact
> Footer

src/components/ContactButton/ContactButton.js

@@ -9,13 +9,14 @@ export default class ContactButton extends Component {
     //     this.state = {};
     // }
     render() {
+      const data = this.props.data;
       return <div class="column is-3">
-              <a target="_blank" rel="noreferrer noopener" href={this.props.link} class="hide button is-large is-fullw-mobile"
-                  title={this.props.title}>
+              <a target="_blank" rel="noreferrer noopener" href={data.url} class="hide button is-large is-fullw-mobile"
+                  title={`Go to ${data.title}`}>
                   <span class="icon">
-                      <i class={"fab " + this.props.icon}></i>
+                      <i class={"fab " + data.icon}></i>
                   </span>
-                  <span>{this.props.name}</span>
+                  <span>{data.title}</span>
               </a>
           </div>;
     }

src/components/ContactCard/ContactCard.js

@@ -1,4 +1,6 @@
 import React, {Component} from '../../../node_modules/react';
+import { injectIntl } from 'react-intl';
+
 import './ContactCard.scss'
 
 import ContactButton from '../ContactButton/index';
@@ -6,46 +8,32 @@ import ContactButton from '../ContactButton/index';
 // import { connect } from "react-redux";
 // import { bindActionCreators } from "redux";
 // import * as contactCardActions from "../../store/contactCard/actions";
-export default class ContactCard extends Component {
+class ContactCard extends Component {
     // constructor(props) {
     //     super(props);
     //     this.state = {};
     // }
     render() {
+      const contactCardMessage = this.props.intl.messages.contactCard;
       return <section class="hero is-info dontPrint" id="contact">
       <div class="hero-body">
           <div class="container">
               <h1 class="title">
-                  Contact
+                {contactCardMessage.title}
               </h1>
               <h2 class="subtitle">
-                  Vous pouvez me contacter de nombreuses façons !
+                {contactCardMessage.subtitle}
               </h2>
               <div class="columns">
-                <ContactButton
-                  name="Courriel"
-                  title="Contactez moi par mail a anthony arobase dumas point cc !"
-                  link="mailto:anthony@dumas.cc"
-                  icon="icon-envelope-open"/>
-
-                <ContactButton
-                name="LinkedIn"
-                title="Page LinkedIn"
-                link="https://www.linkedin.com/in/anthonyyvondumas/"
-                icon="icon-linke-square"/>
-
-                <ContactButton
-                name="Telegram"
-                title="Contactez moi via Telegram!"
-                link="https://t.me/adamas_FR"
-                icon="icon-teleg"/>
+              {contactCardMessage.ways.map(function(button, index){
+                    return <ContactButton
+                    data={button}/>;
+                  })}
               </div>
           </div>
       </div>
   </section>;
     }
   }
-// export default connect(
-//     ({ ContactCard }) => ({ ...contactCard }),
-//     dispatch => bindActionCreators({ ...contactCardActions }, dispatch)
-//   )( contactCard );
+
+  export default injectIntl(ContactCard)

src/components/FooterCard/FooterCard.js

@@ -1,4 +1,6 @@
 import React, {Component} from '../../../node_modules/react';
+import { injectIntl } from 'react-intl';
+
 import './FooterCard.scss'
 
 import bulmaLogo from '../../images/made-with-bulma.png';
@@ -6,12 +8,13 @@ import bulmaLogo from '../../images/made-with-bulma.png';
 // import { connect } from "react-redux";
 // import { bindActionCreators } from "redux";
 // import * as FooterCardActions from "../../store/FooterCard/actions";
-export default class FooterCard extends Component {
+class FooterCard extends Component {
     // constructor(props) {
     //     super(props);
     //     this.state = {};
     // }
     render() {
+        const footerMessage = this.props.intl.messages.footer;
       return <footer class="footer has-text-centered dontPrint">
       <div class="container">
           <div class="columns">
@@ -23,7 +26,7 @@ export default class FooterCard extends Component {
                   </p>
                   <p>
                       <small class="sosumi">
-                          Copyright © 2014 - 2020 Anthony Dumas. Tous droits réservés.
+                          {footerMessage.legalNotice}
                       </small>
                   </p>
                   <p id="footer-credits">
@@ -39,7 +42,7 @@ export default class FooterCard extends Component {
                   </p>
                   <p class="dark-theme-only">
                       <small>
-                          (Ceci est le thème sombre !)
+                        {footerMessage.darkThemeNotice}
                       </small>
                   </p>
               </div>
@@ -48,7 +51,5 @@ export default class FooterCard extends Component {
   </footer>;
     }
   }
-// export default connect(
-//     ({ FooterCard }) => ({ ...FooterCard }),
-//     dispatch => bindActionCreators({ ...FooterCardActions }, dispatch)
-//   )( FooterCard );
+
+  export default injectIntl(FooterCard)

src/components/ProjectCard/ProjectCard.js

@@ -4,16 +4,17 @@ import './ProjectCard.scss'
 export default class ProjectCard extends Component {
 
     render() {
+        const data = this.props.data;
       return <div class="tile is-vertical is-4">
               <div class="tile">
                   <div class="tile is-parent">
                       <article class="tile is-child notification is-info">
-                          <p class="title">{this.props.title}</p>
-                          <a href={this.props.href} rel="noopener">
+                          <p class="title">{data.title}</p>
+                          <a href={data.url} rel="noopener">
                               <figure class="image is-4by3">
-                                  <img src={this.props.image}
-                                      alt={this.props.imgAlt}
-                                      title={this.props.imgTitle} />
+                                  <img src={data.image}
+                                      alt={data.imgAlt}
+                                      title={data.imgTitle} />
                               </figure>
                           </a>
                       </article>

src/components/ProjectsCard/ProjectsCard.js

@@ -1,45 +1,27 @@
 import React, {Component} from '../../../node_modules/react';
+import { injectIntl } from 'react-intl';
+
 import './ProjectsCard.scss'
 
 import ProjectCard from '../ProjectCard/index';
 
-import imagePortfolioDev from '../../images/portfolio/vinyls.jpg';
-import imageMichelin from '../../images/portfolio/computerNonSense.jpg';
-import imagePortfolioPhoto from '../../images/portfolio/admPhotos.jpg';
-
-export default class ProjectsCard extends Component {
-
+class ProjectsCard extends Component {
     render() {
+      const projectCardsMessage = this.props.intl.messages.projectCard;
       return <section id="projets" class="hero is-primary">
       <div class="hero-body">
           <div class="container">
               <div class="tile is-ancestor">
-                  <ProjectCard
-                    title="Portfolio Developpeur"
-                    href="//dev.dumas.cc"
-                    imgAlt="Des mains parcourant des vinyles sur un étalage"
-                    imgTitle="Photo by Florencia Viadana on Unsplash"
-                    image={imagePortfolioDev}
-                    />
-
-                    <ProjectCard
-                    title="IOT@Michelin"
-                    href="https://prezi.com/m/o8ey8mmpnkvp/"
-                    imgAlt="Une photo d'un micro ordinateur dans ma main"
-                    imgTitle="Une photo d'un micro ordinateur dans ma main"
-                    image={imageMichelin}
-                    />
-
-                    <ProjectCard
-                    title="adm.photos"
-                    href="//adm.photos"
-                    imgAlt="Une photo du village de mon enfance"
-                    imgTitle="Une photo du village de mon enfance"
-                    image={imagePortfolioPhoto}
-                    />
+                    {projectCardsMessage.projects.map(function(projects, index){
+                    return <ProjectCard
+                      data={projects}
+                    />;
+                  })}
               </div>
           </div>
       </div>
   </section>;
     }
-  }
+  }
+
+  export default injectIntl(ProjectsCard)

src/messages/en.json

@@ -6,7 +6,7 @@
         "experiences" : [
             {
                 "occupation" : "Full Stack Developer",
-                "logo" : "../../logos/harvest.fr.png",
+                "logo" : "../../images/logos/harvest.fr.png",
                 "url" : "https://www.harvest.fr",
                 "duration" : "(since 2016)",
                 "entreprise" : "Harvest",
@@ -22,7 +22,7 @@
             },
             {
                 "occupation" : "Internship as IOT Developer",
-                "logo" : "../../logos/michelin.png",
+                "logo" : "../../images/logos/michelin.png",
                 "url" : "https://www.michelin.fr",
                 "duration" : "2015",
                 "entreprise" : "Michelin",
@@ -39,7 +39,7 @@
         "education" : [
             {
                 "occupation" : "Associate's Degree in Computer Science / Digital Imaging *",
-                "logo" : "../../logos/www.iut-clermont.png",
+                "logo" : "../../images/logos/www.iut-clermont.png",
                 "url" : "https://www.iut-clermont.fr/",
                 "duration" : "Class of 2015",
                 "entreprise" : "University of Auvergne",
@@ -56,5 +56,55 @@
                 ]
             }
         ]
+    },
+    "projectCard" : {
+        "projects" : [
+            {
+                "title" : "Dev Portfolio",
+                "url" : "http://dev.dumas.cc/",
+                "image" : "../../images/portfolio/vinyls.jpg",
+                "imgAlt" : "Hands running accross vinyls in a shop.",
+                "imgTitle" : "Photo by Florencia Viadana on Unsplash"
+            },
+            {
+                "title" : "IOT@Michelin",
+                "url" : "https://prezi.com/m/o8ey8mmpnkvp/",
+                "image" : "../../images/portfolio/computerNonSense.jpg",
+                "imgAlt" : "An IOT prototype.",
+                "imgTitle" : "An IOT prototype."
+            },
+            {
+                "title" : "adm.photos",
+                "url" : "http://adm.photos/",
+                "image" : "../../images/portfolio/admPhotos.jpg",
+                "imgAlt" : "A picture of a beautiful town.",
+                "imgTitle" : "A picture of a beautiful town."
+            }
+        ]
+    },
+    "contactCard" : {
+        "title" : "Contact",
+        "subtitle" : "You can contact me in many different ways :",
+        "ways" : [
+            {
+                "title" : "Email",
+                "url" : "mailto:anthony@dumas.cc",
+                "icon" : "icon-envelope-open"
+            },
+            {
+                "title" : "LinkedIn",
+                "url" : "https://www.linkedin.com/in/anthonyyvondumas/",
+                "icon" : "icon-linke-square"
+            },
+            {
+                "title" : "Telegram",
+                "url" : "https://t.me/adamas_FR",
+                "icon" : "icon-teleg"
+            }
+        ]
+    },
+    "footer" : {
+        "legalNotice" : "Copyright © 2014 - 2021 Anthony Dumas. All rights reserved.",
+        "darkThemeNotice" : "(This is the dark theme)"
     }
 }

src/messages/fr.json

@@ -6,7 +6,7 @@
         "experiences" : [
             {
                 "occupation" : "Développeur Full Stack",
-                "logo" : "../../logos/harvest.fr.png",
+                "logo" : "../../images/logos/harvest.fr.png",
                 "url" : "https://www.harvest.fr",
                 "duration" : "(depuis 2016)",
                 "entreprise" : "Harvest",
@@ -22,7 +22,7 @@
             },
             {
                 "occupation" : "Stagiaire Développeur Internet des Objets",
-                "logo" : "../../logos/michelin.png",
+                "logo" : "../../images/logos/michelin.png",
                 "url" : "https://www.michelin.fr",
                 "duration" : "2015",
                 "entreprise" : "Michelin",
@@ -39,7 +39,7 @@
         "education" : [
             {
                 "occupation" : "DUT Informatique - Imagerie Numérique",
-                "logo" : "../../logos/www.iut-clermont.png",
+                "logo" : "../../images/logos/www.iut-clermont.png",
                 "url" : "https://www.iut-clermont.fr/",
                 "duration" : "Promotion 2015",
                 "entreprise" : "Université d'Auvergne",
@@ -55,5 +55,55 @@
                 ]
             }
         ]
+    },
+    "projectCard" : {
+        "projects" : [
+            {
+                "title" : "Portfolio Developpeur",
+                "url" : "http://dev.dumas.cc/",
+                "image" : "../../images/portfolio/vinyls.jpg",
+                "imgAlt" : "Des mains parcourant des vinyles sur un étalage",
+                "imgTitle" : "Photo by Florencia Viadana on Unsplash"
+            },
+            {
+                "title" : "IOT@Michelin",
+                "url" : "https://prezi.com/m/o8ey8mmpnkvp/",
+                "image" : "../../images/portfolio/computerNonSense.jpg",
+                "imgAlt" : "Une photo d'un micro ordinateur dans ma main",
+                "imgTitle" : "Une photo d'un micro ordinateur dans ma main"
+            },
+            {
+                "title" : "adm.photos",
+                "url" : "http://adm.photos/",
+                "image" : "../../images/portfolio/admPhotos.jpg",
+                "imgAlt" : "Une photo du village de mon enfance",
+                "imgTitle" : "Une photo du village de mon enfance"
+            }
+        ]
+    },
+    "contactCard" : {
+        "title" : "Contact",
+        "subtitle" : "Vous pouvez me contacter de nombreuses façons !",
+        "ways" : [
+            {
+                "title" : "Courriel",
+                "url" : "mailto:anthony@dumas.cc",
+                "icon" : "icon-envelope-open"
+            },
+            {
+                "title" : "LinkedIn",
+                "url" : "https://www.linkedin.com/in/anthonyyvondumas/",
+                "icon" : "icon-linke-square"
+            },
+            {
+                "title" : "Telegram",
+                "url" : "https://t.me/adamas_FR",
+                "icon" : "icon-teleg"
+            }
+        ]
+    },
+    "footer" : {
+        "legalNotice" : "Copyright © 2014 - 2021 Anthony Dumas. Tous droits réservés.",
+        "darkThemeNotice" : "(Ceci est le thème sombre)"
     }
 }