New Job :party: (#55)

* New Job :party:

* Fix du test
+ petits fixes React
+ fix La Clameur

src/App.test.js

@@ -1,8 +1,18 @@
-import { render, screen } from '@testing-library/react';
+import React from 'react';
-import App from './App';
+import { IntlProvider } from 'react-intl';
 
-test('renders Anthony Yvon Dumas', () => {
+import { render, screen } from '@testing-library/react';
-  render(<App />);
+
-  const linkElement = screen.getByText(/Anthony Yvon Dumas/i);
+import MenuComponent from './App';
-  expect(linkElement).toBeInTheDocument();
+import { getTexts } from './services/message.service';
+
+
+test('renders Anthony Yvon Dumas', async () => {
+  render(<IntlProvider locale={"fr"}
+    defaultLocale={"fr"}
+    messages={getTexts("fr")}>
+    <MenuComponent />
+  </IntlProvider>);
+  expect(await screen.findByText("Anthony Yvon Dumas")).toBeInTheDocument();
 });
+

src/components/ButtonIcon/ButtonIcon.js

@@ -11,7 +11,7 @@ export default class ButtonIcon extends Component {
   render() {
     return <a rel="noopener noreferrer me" href={this.props.lien} target="_blank">
       <button className="button" aria-label="Bouton {this.props.aria-label}">
-        <span class="icon">
+        <span className="icon">
           <ion-icon name={this.props.icon}></ion-icon>
         </span>
       </button>

src/components/ContactButton/ContactButton.js

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

src/components/ContactCard/ContactCard.js

@@ -1,39 +1,40 @@
-import React, {Component} from 'react';
+import './ContactCard.scss';
+
+import React, { Component } from 'react';
 import { injectIntl } from 'react-intl';
 
-import './ContactCard.scss'
-
 import ContactButton from '../ContactButton/index';
 
+
 // import { connect } from "react-redux";
 // import { bindActionCreators } from "redux";
 // import * as contactCardActions from "../../store/contactCard/actions";
 class ContactCard extends Component {
-    // constructor(props) {
+  // constructor(props) {
-    //     super(props);
+  //     super(props);
-    //     this.state = {};
+  //     this.state = {};
-    // }
+  // }
-    render() {
+  render() {
-      const contactCardMessage = this.props.intl.messages.contactCard;
+    const contactCardMessage = this.props.intl.messages.contactCard;
-      return <section class="hero is-info dontPrint" id="contact">
+    return <section className="hero is-info dontPrint" id="contact">
-      <div class="hero-body">
+      <div className="hero-body">
-          <div class="container">
+        <div className="container">
-              <h1 class="title">
+          <h1 className="title">
-                {contactCardMessage.title}
+            {contactCardMessage.title}
-              </h1>
+          </h1>
-              <h2 class="subtitle">
+          <h2 className="subtitle">
-                {contactCardMessage.subtitle}
+            {contactCardMessage.subtitle}
-              </h2>
+          </h2>
-              <div class="columns">
+          <div className="columns">
-              {contactCardMessage.ways.map(function(button, index){
+            {contactCardMessage.ways.map(function (button, index) {
-                    return <ContactButton
+              return <ContactButton key={index}
-                    data={button}/>;
+                data={button} />;
-                  })}
+            })}
-              </div>
           </div>
+        </div>
       </div>
-  </section>;
+    </section>;
-    }
   }
+}
 
-  export default injectIntl(ContactCard)
+export default injectIntl(ContactCard)

src/components/ExperienceCard/ExperienceCard.js

@@ -1,5 +1,7 @@
+import './ExperienceCard.scss';
+
 import React, { Component } from 'react';
-import './ExperienceCard.scss'
+
 
 // import { connect } from "react-redux";
 // import { bindActionCreators } from "redux";
@@ -13,29 +15,29 @@ export default class ExperienceCard extends Component {
     render() {
         var data = this.props.data;
         var imgSrc = data.logo;
-        return <div class="card-content">
+        return <div className="card-content">
-            <div class="media">
+            <div className="media">
-                <div class="media-left">
+                <div className="media-left">
                     <a href={data.url} target="_blank" rel="noreferrer">
-                        <figure class="image is-48x48">
+                        <figure className="image is-48x48">
                             <img src={imgSrc} alt="Logo Entreprise" />
                         </figure>
                     </a>
                 </div>
-                <div class="media-content">
+                <div className="media-content">
-                    <p class="title is-4">{data.occupation}</p>
+                    <p className="title is-4">{data.occupation}</p>
-                    <p class="subtitle is-6">{data.entreprise} - {data.location} - {data.duration}</p>
+                    <p className="subtitle is-6">{data.entreprise} - {data.location} - {data.duration}</p>
-                    <div class="tags">
+                    <div className="tags">
                         {data.tags.map(function (name, index) {
-                            return <span key={index} class="tag">{name}</span>;
+                            return <span key={index} className="tag">{name}</span>;
                         })}
                     </div>
                 </div>
             </div>
-            <div class="content">
+            <div className="content">
                 {data.description}
             </div>
-            {data.commentaire ? <div class="comment">
+            {data.commentaire ? <div className="comment">
                 {data.commentaire}
             </div> : ''}
 

src/components/FooterCard/FooterCard.js

@@ -1,8 +1,8 @@
 import './FooterCard.scss';
 
+import React, { Component } from 'react';
 import { injectIntl } from 'react-intl';
 
-import React, { Component } from 'react';
 import bulmaLogo from '../../images/made-with-bulma.webp';
 
 
@@ -16,17 +16,17 @@ class FooterCard extends Component {
     // }
     render() {
         const footerMessage = this.props.intl.messages.footer;
-        return <footer class="footer has-text-centered dontPrint">
+        return <footer className="footer has-text-centered dontPrint">
-            <div class="container">
+            <div className="container">
-                <div class="columns">
+                <div className="columns">
-                    <div class="column is-8-desktop is-offset-2-desktop">
+                    <div className="column is-8-desktop is-offset-2-desktop">
                         <p>
-                            <strong class="has-text-weight-semibold">
+                            <strong className="has-text-weight-semibold">
                                 anthony-dumas.fr
                             </strong>
                         </p>
                         <p>
-                            <small class="sosumi">
+                            <small className="sosumi">
                                 {footerMessage.legalNotice}
                             </small>
                         </p>

src/components/MainCard/MainCard.js

@@ -43,50 +43,52 @@ class MainCard extends Component {
     }
     render() {
         var metaThemeColor = document.querySelector("meta[name=theme-color]");
-        metaThemeColor.setAttribute("content", window.matchMedia('(prefers-color-scheme: dark)').matches ? "#25444b" : "#5c9ead");
+        if (metaThemeColor !== null) {
+            metaThemeColor.setAttribute("content", window.matchMedia('(prefers-color-scheme: dark)').matches ? "#25444b" : "#5c9ead");
+        }
         const experienceCardMessage = this.props.intl.messages.experienceCard;
 
-        return <section id="idCard" class="hero is-medium is-info">
+        return <section id="idCard" className="hero is-medium is-info">
-            <div class="hero-body">
+            <div className="hero-body">
-                <div class="container">
+                <div className="container">
-                    <div class="columns">
+                    <div className="columns">
-                        <div class="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
+                        <div className="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
-                        <div id="photosAndButtons" class="column is-3-widescreen is-4-tablet is-success">
+                        <div id="photosAndButtons" className="column is-3-widescreen is-4-tablet is-success">
-                            <div class="card">
+                            <div className="card">
-                                <div class="card-image">
+                                <div className="card-image">
-                                    <figure id="photoProfil" class="image" onMouseOver={this.glitching} >
+                                    <figure id="photoProfil" className="image" onMouseOver={this.glitching} >
-                                        <img fetchpriority="high" class="background" src={headshotFond} alt="Anthony Dumas" />
+                                        <img fetchpriority="high" className="background" src={headshotFond} alt="Anthony Dumas" />
-                                        <img fetchpriority="high" class="actor" src={headshotMain} alt="Anthony Dumas" />
+                                        <img fetchpriority="high" className="actor" src={headshotMain} alt="Anthony Dumas" />
                                     </figure>
                                 </div>
-                                <div class="card-content">
+                                <div className="card-content">
-                                    <div class="media">
+                                    <div className="media">
-                                        <div class="media-content">
+                                        <div className="media-content">
-                                            <p id="buttonsUnderPhoto" class="field is-grouped">
+                                            <div id="buttonsUnderPhoto" className="field is-grouped">
-                                                <p class="control">
+                                                <p className="control">
                                                     <ButtonIcon
                                                         icon="logo-github"
                                                         aria-label="Github"
                                                         lien="https://github.com/AdamasFR" />
                                                 </p>
-                                                <p class="control">
+                                                <p className="control">
                                                     <ButtonIcon
                                                         icon="logo-linkedin"
                                                         aria-label="Linkedin"
                                                         lien="https://www.linkedin.com/in/anthonyyvondumas/" />
                                                 </p>
-                                                <p class="control">
+                                                <p className="control">
                                                     <ButtonIcon
                                                         icon="logo-mastodon"
                                                         aria-label="Mastodon"
                                                         lien="https://imaginair.es/@adamas" />
                                                 </p>
-                                            </p>
+                                            </div>
-                                            <p id="boutonCV" class="field">
+                                            <p id="boutonCV" className="field">
                                                 <a rel="noreferrer noopener" target="_blank"
                                                     href="https://files.adm.ink/anthony-dumas-cv.pdf" >
-                                                    <button class="button is-fullwidth" aria-label="Bouton Curriculum Vitæ">
+                                                    <button className="button is-fullwidth" aria-label="Bouton Curriculum Vitæ">
-                                                        <span class="icon">
+                                                        <span className="icon">
                                                             <ion-icon name="document-attach-outline"></ion-icon>
                                                         </span>
                                                         <span><FormattedMessage id="curriculumVitaeLink" /></span>
@@ -96,22 +98,22 @@ class MainCard extends Component {
                                         </div>
                                     </div>
 
-                                    <div class="content">
+                                    <div className="content">
 
                                     </div>
                                 </div>
                             </div>
                         </div>
 
-                        <div class="column is-9-tablet is-7-widescreen" id="experiences">
+                        <div className="column is-9-tablet is-7-widescreen" id="experiences">
-                            <span class="title">{experienceCardMessage.title.experience}</span>
+                            <span className="title">{experienceCardMessage.title.experience}</span>
                             {experienceCardMessage.experiences.map(function (experience, index) {
-                                return <ExperienceCard
+                                return <ExperienceCard key={index}
                                     data={experience} />;
                             })}
-                            <span class="title">{experienceCardMessage.title.education}</span>
+                            <span className="title">{experienceCardMessage.title.education}</span>
                             {experienceCardMessage.education.map(function (education, index) {
-                                return <ExperienceCard
+                                return <ExperienceCard key={index}
                                     data={education} />;
                             })}
                         </div>

src/components/MenuComponent/MenuComponent.js

@@ -1,8 +1,8 @@
 import './MenuComponent.scss';
 
+import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
-import React, { Component } from 'react';
 import { URL_add_parameter } from '../../services/parameters.service';
 
 
@@ -22,21 +22,22 @@ class MenuComponent extends Component {
 
   render() {
     const buttonsLanguagesMessage = this.props.intl.messages.global.buttons.languages;
-    return <section id="menu" class="hero is-primary dontPrint">
+    const currentJob = this.props.intl.messages.experienceCard.experiences[0];
-      <div class="hero-body">
+    return <section id="menu" className="hero is-primary dontPrint">
-        <div class="container">
+      <div className="hero-body">
-          <div class="columns">
+        <div className="container">
-            <div class="column">
+          <div className="columns">
-              <h1 class="title">
+            <div className="column">
+              <h1 className="title">
                 <FormattedMessage id="title" />
               </h1>
-              <h2 class="subtitle">
+              <h2 className="subtitle">
-                <FormattedMessage id="subtitle" />
+                {currentJob.occupation} @ {currentJob.entreprise}
               </h2>
             </div>
-            <div class="column is-hidden-touch">
+            <div className="column is-hidden-touch">
               <div id="langButtons">
-                <div class="buttons">
+                <div className="buttons">
                   <span className="button is-light" onClick={this.honhonhon} aria-label="Visiter le site en Français">
                     {buttonsLanguagesMessage.fr}
                   </span>

src/components/ProjectCard/ProjectCard.js

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

src/components/ProjectsCard/ProjectsCard.js

@@ -1,20 +1,20 @@
 import './ProjectsCard.scss';
 
+import React, { Component } from 'react';
 import { injectIntl } from 'react-intl';
 
-import React, { Component } from 'react';
 import ProjectCard from '../ProjectCard/index';
 
 
 class ProjectsCard extends Component {
   render() {
     const projectCardsMessage = this.props.intl.messages.projectCard;
-    return <section id="projets" class="hero is-success">
+    return <section id="projets" className="hero is-success">
-      <div class="hero-body">
+      <div className="hero-body">
-        <div class="container">
+        <div className="container">
-          <div class="tile is-ancestor">
+          <div className="tile is-ancestor">
             {projectCardsMessage.projects.map(function (projects, index) {
-              return <ProjectCard
+              return <ProjectCard key={index}
                 data={projects}
               />;
             })}

src/messages/en.json

@@ -1,6 +1,5 @@
 {
   "title": "Anthony Yvon Dumas",
-  "subtitle": "Software Developer @ Harvest",
   "curriculumVitaeLink": "CV (in .pdf)",
   "experienceCard": {
     "title": {
@@ -8,6 +7,26 @@
       "education": "Education"
     },
     "experiences": [
+      {
+        "occupation": "Software Engineer",
+        "logo": "../../images/logos/soprasteria.co.uk.webp",
+        "url": "https://www.soprasteria.com/",
+        "duration": "since June 2023",
+        "entreprise": "Sopra Steria",
+        "location": "Clermont-Ferrand",
+        "description": "",
+        "tags": ["Java"]
+      },
+      {
+        "occupation": "Event Coordinator",
+        "logo": "../../images/logos/laclameur.org.webp",
+        "url": "https://www.laclameur.org",
+        "duration": "since 2021",
+        "entreprise": "La Clameur (Non-Profit Law 1901)",
+        "location": "remote",
+        "description": "",
+        "tags": ["Notion", "CPanel", "Wordpress", "RSS"]
+      },
       {
         "occupation": "Software Developer",
         "logo": "../../images/logos/harvest.fr.webp",
@@ -25,16 +44,6 @@
           "Scrum Environment"
         ]
       },
-      {
-        "occupation": "Event Coordinator",
-        "logo": "../../images/logos/laclameur.org.webp",
-        "url": "https://www.laclameur.org",
-        "duration": "since 2021",
-        "entreprise": "La Clameur (Non-Profit Law 1901)",
-        "location": "remote",
-        "description": "",
-        "tags": ["Notion", "CPanel", "Wordpress", "RSS"]
-      },
       {
         "occupation": "Internship as IOT Developer",
         "logo": "../../images/logos/michelin.webp",

src/messages/fr.json

@@ -1,6 +1,5 @@
 {
   "title": "Anthony Yvon Dumas",
-  "subtitle": "Software Developer @ Harvest",
   "curriculumVitaeLink": "CV (.pdf)",
   "experienceCard": {
     "title": {
@@ -9,21 +8,14 @@
     },
     "experiences": [
       {
-        "occupation": "Software Developer",
+        "occupation": "Ingénieur Logiciel",
-        "logo": "../../images/logos/harvest.fr.webp",
+        "logo": "../../images/logos/soprasteria.co.uk.webp",
-        "url": "https://www.harvest.fr",
+        "url": "https://www.soprasteria.com/",
-        "duration": "Juillet 2016 - Juin 2023",
+        "duration": "depuis Juin 2023",
-        "entreprise": "Harvest",
+        "entreprise": "Sopra Steria",
         "location": "Clermont-Ferrand",
-        "description": "Développement de simulateurs dédiés au conseil et à la vente de produits bancaires.",
+        "description": "",
-        "tags": [
+        "tags": ["Java EE"]
-          "Java EE",
-          "Angular",
-          "OpenAPI",
-          "jQuery",
-          "Spring",
-          "Environnement Scrum"
-        ]
       },
       {
         "occupation": "Coordinateur événementiel",
@@ -35,6 +27,23 @@
         "description": "Coordination des événements de l'association, maintenance du site Internet et des fluxs RSS.",
         "tags": ["Notion", "CPanel", "Wordpress", "RSS"]
       },
+      {
+        "occupation": "Software Developer",
+        "logo": "../../images/logos/harvest.fr.webp",
+        "url": "https://www.harvest.fr",
+        "duration": "Juillet 2016 - Juin 2023",
+        "entreprise": "Harvest Groupe",
+        "location": "Clermont-Ferrand",
+        "description": "Développement de simulateurs dédiés au conseil et à la vente de produits bancaires.",
+        "tags": [
+          "Java EE",
+          "Angular",
+          "OpenAPI",
+          "jQuery",
+          "Spring",
+          "Environnement Scrum"
+        ]
+      },
       {
         "occupation": "Stagiaire Développeur Internet des Objets",
         "logo": "../../images/logos/michelin.webp",

src/messages/test.json

@@ -0,0 +1,138 @@
+{
+  "title": "Anthony Yvon Dumas",
+  "curriculumVitaeLink": "CV (.pdf)",
+  "experienceCard": {
+    "title": {
+      "experience": "Expériences professionnelles",
+      "education": "Études et diplômes"
+    },
+    "experiences": [
+      {
+        "occupation": "Ingénieur Logiciel",
+        "logo": "../../images/logos/soprasteria.co.uk.webp",
+        "url": "https://www.soprasteria.com/",
+        "duration": "depuis Juin 2023",
+        "entreprise": "Sopra Steria",
+        "location": "Clermont-Ferrand",
+        "description": "",
+        "tags": ["Java EE"]
+      },
+      {
+        "occupation": "Software Developer",
+        "logo": "../../images/logos/harvest.fr.webp",
+        "url": "https://www.harvest.fr",
+        "duration": "Juillet 2016 - Juin 2023",
+        "entreprise": "Harvest Groupe",
+        "location": "Clermont-Ferrand",
+        "description": "Développement de simulateurs dédiés au conseil et à la vente de produits bancaires.",
+        "tags": [
+          "Java EE",
+          "Angular",
+          "OpenAPI",
+          "jQuery",
+          "Spring",
+          "Environnement Scrum"
+        ]
+      },
+      {
+        "occupation": "Coordinateur événementiel",
+        "logo": "../../images/logos/laclameur.org.webp",
+        "url": "https://www.laclameur.org",
+        "duration": "depuis 2021",
+        "entreprise": "La Clameur (Association Loi 1901)",
+        "location": "en distanciel",
+        "description": "Coordination des événements de l'association, maintenance du site Internet et des fluxs RSS.",
+        "tags": ["Notion", "CPanel", "Wordpress", "RSS"]
+      },
+      {
+        "occupation": "Stagiaire Développeur Internet des Objets",
+        "logo": "../../images/logos/michelin.webp",
+        "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",
+          "Environnement Scrum"
+        ]
+      }
+    ],
+    "education": [
+      {
+        "occupation": "DUT Informatique - Imagerie Numérique",
+        "logo": "../../images/logos/www.iut-clermont.webp",
+        "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"]
+      },
+      {
+        "occupation": "L2 Informatique",
+        "logo": "../../images/logos/www.uca.fr.webp",
+        "url": "https://www.uca.fr",
+        "duration": "2016",
+        "entreprise": "Université Clermont-Auvergne",
+        "location": "Clermont-Ferrand",
+        "description": "",
+        "tags": ["Python", "Linux"]
+      }
+    ]
+  },
+  "projectCard": {
+    "projects": [
+      {
+        "title": "IOT@Michelin",
+        "url": "https://prezi.com/m/o8ey8mmpnkvp/",
+        "image": "../../images/portfolio/computerNonSense.webp",
+        "imgAlt": "Une photo d'un micro ordinateur dans ma main",
+        "imgTitle": "Une photo d'un micro ordinateur dans ma main"
+      },
+      {
+        "title": "ADM Photographie",
+        "url": "https://photos.adm.ink/",
+        "image": "../../images/portfolio/admPhotos.webp",
+        "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": "mail-outline",
+        "aria-label": "Email"
+      },
+      {
+        "title": "LinkedIn",
+        "url": "https://www.linkedin.com/in/anthonyyvondumas/",
+        "icon": "logo-linkedin",
+        "aria-label": "LinkedIn"
+      },
+      {
+        "title": "Telegram",
+        "url": "https://t.me/adamas_FR",
+        "icon": "call-outline",
+        "aria-label": "Telegram"
+      },
+      {
+        "title": "Mastodon",
+        "url": "https://imaginair.es/@adamas",
+        "icon": "logo-mastodon",
+        "aria-label": "Mastodon"
+      }
+    ]
+  },
+  "footer": {
+    "legalNotice": "© 2014 - 2023 Anthony Dumas."
+  }
+}

src/services/message.service.js

@@ -23,7 +23,11 @@ export const language = function () {
 };
 
 export const langJson = function () {
-  const messageLocalized = i18nConfig.messages[language()];
+  return getTexts(language());
+};
+
+export const getTexts = function (lang) {
+  const messageLocalized = i18nConfig.messages[lang];
   const messageGlobal = i18nConfig.messages[GLOBAL_MESSAGE_KEY];
   const messageMerged = {
     ...messageLocalized,