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 App from './App';
+import React from 'react';
+import { IntlProvider } from 'react-intl';
 
-test('renders Anthony Yvon Dumas', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Anthony Yvon Dumas/i);
-  expect(linkElement).toBeInTheDocument();
+import { render, screen } from '@testing-library/react';
+
+import MenuComponent from './App';
+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">
-      <a target="_blank" rel="noreferrer noopener" href={data.url} class="hide button is-large is-fullw-mobile"
+    return <div className="column is-3">
+      <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,10 +1,11 @@
+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";
@@ -15,18 +16,18 @@ class ContactCard extends Component {
   // }
   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">
+    return <section className="hero is-info dontPrint" id="contact">
+      <div className="hero-body">
+        <div className="container">
+          <h1 className="title">
             {contactCardMessage.title}
           </h1>
-              <h2 class="subtitle">
+          <h2 className="subtitle">
             {contactCardMessage.subtitle}
           </h2>
-              <div class="columns">
+          <div className="columns">
             {contactCardMessage.ways.map(function (button, index) {
-                    return <ContactButton
+              return <ContactButton key={index}
                 data={button} />;
             })}
           </div>

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">
-            <div class="media">
-                <div class="media-left">
+        return <div className="card-content">
+            <div className="media">
+                <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">
-                    <p class="title is-4">{data.occupation}</p>
-                    <p class="subtitle is-6">{data.entreprise} - {data.location} - {data.duration}</p>
-                    <div class="tags">
+                <div className="media-content">
+                    <p className="title is-4">{data.occupation}</p>
+                    <p className="subtitle is-6">{data.entreprise} - {data.location} - {data.duration}</p>
+                    <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">
-            <div class="container">
-                <div class="columns">
-                    <div class="column is-8-desktop is-offset-2-desktop">
+        return <footer className="footer has-text-centered dontPrint">
+            <div className="container">
+                <div className="columns">
+                    <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]");
+        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">
-            <div class="hero-body">
-                <div class="container">
-                    <div class="columns">
-                        <div class="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 class="card">
-                                <div class="card-image">
-                                    <figure id="photoProfil" class="image" onMouseOver={this.glitching} >
-                                        <img fetchpriority="high" class="background" src={headshotFond} alt="Anthony Dumas" />
-                                        <img fetchpriority="high" class="actor" src={headshotMain} alt="Anthony Dumas" />
+        return <section id="idCard" className="hero is-medium is-info">
+            <div className="hero-body">
+                <div className="container">
+                    <div className="columns">
+                        <div className="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
+                        <div id="photosAndButtons" className="column is-3-widescreen is-4-tablet is-success">
+                            <div className="card">
+                                <div className="card-image">
+                                    <figure id="photoProfil" className="image" onMouseOver={this.glitching} >
+                                        <img fetchpriority="high" className="background" src={headshotFond} alt="Anthony Dumas" />
+                                        <img fetchpriority="high" className="actor" src={headshotMain} alt="Anthony Dumas" />
                                     </figure>
                                 </div>
-                                <div class="card-content">
-                                    <div class="media">
-                                        <div class="media-content">
-                                            <p id="buttonsUnderPhoto" class="field is-grouped">
-                                                <p class="control">
+                                <div className="card-content">
+                                    <div className="media">
+                                        <div className="media-content">
+                                            <div id="buttonsUnderPhoto" className="field is-grouped">
+                                                <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>
-                                            <p id="boutonCV" class="field">
+                                            </div>
+                                            <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æ">
-                                                        <span class="icon">
+                                                    <button className="button is-fullwidth" aria-label="Bouton Curriculum Vitæ">
+                                                        <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">
-                            <span class="title">{experienceCardMessage.title.experience}</span>
+                        <div className="column is-9-tablet is-7-widescreen" id="experiences">
+                            <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">
-      <div class="hero-body">
-        <div class="container">
-          <div class="columns">
-            <div class="column">
-              <h1 class="title">
+    const currentJob = this.props.intl.messages.experienceCard.experiences[0];
+    return <section id="menu" className="hero is-primary dontPrint">
+      <div className="hero-body">
+        <div className="container">
+          <div className="columns">
+            <div className="column">
+              <h1 className="title">
                 <FormattedMessage id="title" />
               </h1>
-              <h2 class="subtitle">
-                <FormattedMessage id="subtitle" />
+              <h2 className="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,17 +1,19 @@
+import './ProjectCard.scss';
+
 import React, { Component } from 'react';
-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">{data.title}</p>
+        return <div className="tile is-vertical is-4">
+            <div className="tile">
+                <div className="tile is-parent">
+                    <article className="tile is-child notification is-info">
+                        <p className="title">{data.title}</p>
                         <a href={data.url} rel="noopener noreferrer" target="_blank">
-                              <figure class="image is-4by3">
+                            <figure className="image is-4by3">
                                 <img src={data.image}
                                     alt={data.imgAlt}
                                     title={data.imgTitle} />

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">
-      <div class="hero-body">
-        <div class="container">
-          <div class="tile is-ancestor">
+    return <section id="projets" className="hero is-success">
+      <div className="hero-body">
+        <div className="container">
+          <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",
-        "logo": "../../images/logos/harvest.fr.webp",
-        "url": "https://www.harvest.fr",
-        "duration": "Juillet 2016 - Juin 2023",
-        "entreprise": "Harvest",
+        "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": "Développement de simulateurs dédiés au conseil et à la vente de produits bancaires.",
-        "tags": [
-          "Java EE",
-          "Angular",
-          "OpenAPI",
-          "jQuery",
-          "Spring",
-          "Environnement Scrum"
-        ]
+        "description": "",
+        "tags": ["Java EE"]
       },
       {
         "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,