Merge branch '5-add-testimony-section' into 'main'

Resolve "add testimony section" Closes #5 See merge request lydra/www/compagnons-devops.fr!12

Merge branch '5-add-testimony-section' into 'main'
9de44cea · Christophe Chaudier · 40161846 · c96655bd · 9de44cea · 9de44cea
Commit 9de44cea authored 2 years ago by Christophe Chaudier
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,8 @@
        "prism-react-renderer": "^1.3.5",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
+        "react-slick": "^0.29.0",
+        "slick-carousel": "^1.8.1",
        "trim": "^0.0.3"
      },
      "devDependencies": {
@@ -4765,6 +4767,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
    "node_modules/clean-css": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -5951,6 +5958,11 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
    "node_modules/entities": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
@@ -8481,6 +8493,14 @@
      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
      "dev": true
    },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
    "node_modules/json5": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -10745,6 +10765,22 @@
        "react": ">=15"
      }
    },
+    "node_modules/react-slick": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz",
+      "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-textarea-autosize": {
      "version": "8.4.0",
      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz",
@@ -11236,6 +11272,11 @@
      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
    "node_modules/resolve": {
      "version": "1.22.1",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -11766,6 +11807,14 @@
        "node": ">=8"
      }
    },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
    "node_modules/sockjs": {
      "version": "0.3.24",
      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -11887,6 +11936,11 @@
        "safe-buffer": "~5.2.0"
      }
    },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
    "node_modules/string-width": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -17156,6 +17210,11 @@
      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.7.1.tgz",
      "integrity": "sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w=="
    },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
    "clean-css": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -17999,6 +18058,11 @@
        "tapable": "^2.2.0"
      }
    },
+    "enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
    "entities": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
@@ -19825,6 +19889,14 @@
      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
      "dev": true
    },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
    "json5": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -21397,6 +21469,18 @@
        "tiny-warning": "^1.0.0"
      }
    },
+    "react-slick": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz",
+      "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
    "react-textarea-autosize": {
      "version": "8.4.0",
      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz",
@@ -21772,6 +21856,11 @@
      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
    },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
    "resolve": {
      "version": "1.22.1",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -22182,6 +22271,11 @@
      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
    },
+    "slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
+    },
    "sockjs": {
      "version": "0.3.24",
      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -22279,6 +22373,11 @@
        "safe-buffer": "~5.2.0"
      }
    },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
    "string-width": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",

--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
    "prism-react-renderer": "^1.3.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
    "trim": "^0.0.3"
  },
  "devDependencies": {

--- a/src/components/TestimoniesCarousel/index.js
+++ b/src/components/TestimoniesCarousel/index.js
+import React from 'react';
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Card from '../TestimonyCard'
+import testimoniesList from '@site/static/testimoniesList.json'
+import styles from './styles.module.css'
+
+function SampleNextArrow(props) {
+  const { onClick } = props;
+  return (
+    <div
+      className={styles.arrow + ' ' + styles.right}
+      onClick={onClick}
+    />
+  );
+}
+
+function SamplePrevArrow(props) {
+  const { onClick } = props;
+  return (
+    <div
+      className={styles.arrow + ' ' + styles.left}
+      onClick={onClick}
+    />
+  );
+}
+
+export default function TestimoniesCarousel() {
+  //https://react-slick.neostack.com/docs/api/
+  const settings = {
+    accessibility: true,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 2,
+    slidesToScroll: 1,
+    nextArrow: <SampleNextArrow />,
+    prevArrow: <SamplePrevArrow />,
+    responsive: [
+      {
+        breakpoint: 720,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          initialSlide: 0
+        }
+      },
+    ]
+  };
+
+  return (
+    <div>
+      <Slider {...settings}>
+        {testimoniesList.map((props, idx) => (
+        <Card key={idx} {...props} />
+      ))}
+      </Slider>
+    </div>
+  );
+}
--- a/src/components/TestimoniesCarousel/styles.module.css
+++ b/src/components/TestimoniesCarousel/styles.module.css
+.right {
+  right: 0;
+}
+
+.left {
+  left: 0;
+}
+
+
+.arrow {
+  z-index: 5;
+  cursor: pointer;
+  border: none;
+  width: 32px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  position: absolute;
+  top: 64px;
+  margin: 0 18px;
+  background-color: var(--ifm-card-background-color);
+}
+
+.left::after, .right::after {
+  opacity: 0.8;
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  border: solid var(--ifm-color-secondary);
+  border-width: 0 5px 5px 0;
+}
+
+.left::after {
+  transform: translate(-50%, -50%) rotate(135deg);
+}
+
+.right::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.disabled {
+  opacity: 0.3;
+}
+
+.position {
+  position: relative;
+}
--- a/src/components/TestimonyCard/index.js
+++ b/src/components/TestimonyCard/index.js
+import React from 'react';
+import styles from './styles.module.css'
+export default function HomepageList(props) {
+  return (
+    <div className={styles.wholeCard +" avatar avatar--vertical"}>
+      <a href={props.url} className={styles.avatarSegment + " text--center margin-bottom--md"} target="_blank" rel="noreferrer"> 
+        <img
+          className="avatar__photo avatar__photo--xl margin--sm"
+          src={props.img} />
+        <div className={styles.underline + " avatar__name"}> 
+          {props.name} 
+        </div>
+      </a>
+      <div className="avatar__intro card padding--md padding-top--xl">
+        <h3 className="avatar__name"> {props.title} </h3>
+        <p className="avatar__subtitle" style={{ whiteSpace: 'pre-wrap' }}>
+          {props.text}
+        </p>
+      </div>
+    </div>
+  ) 
+}
--- a/src/components/TestimonyCard/styles.module.css
+++ b/src/components/TestimonyCard/styles.module.css
+.wholeCard {
+  max-width: 730px;
+  --ifm-avatar-intro-alignment: left;  
+  position: relative;
+  filter: drop-shadow(-1px 4px 3px rgba(32, 32, 32, 0.4));
+  margin: 1rem;
+  margin-top: 0;
+}
+
+.avatarSegment {
+  transform: translateY(55%);
+}
+
+.avatarSegment img {
+  outline: solid 8px var(--ifm-card-background-color);
+}
+ 
+.avatarSegment:hover {
+  text-decoration: none !important;
+}
+
+
+
+.avatarSegment::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 50%;
+  aspect-ratio: 1;
+  transition: 0.3s;
+  opacity: 0.6;
+  transform-origin: center;
+  border: 8px solid transparent;
+  border-right: 8px solid var(--ifm-color-secondary);
+}
+
+.avatarSegment:hover::after,
+.avatarSegment:focus::after {
+  transform: rotate(-180deg);
+  opacity: 0.8;
+}
+
+.avatarSegment:hover .underline::after,
+.avatarSegment:focus .underline::after {
+  transform: scaleX(0.8);
+  opacity: 0.8;
+
+}
+
+.underline {
+  display: block;
+  position: relative;
+  padding-bottom: 0.2em;
+}
+
+
+
+.underline::after {
+  content: '';
+  position: absolute;
+  bottom: 0.1rem;
+  left: 0;
+  border-radius: 2px;
+  width: 100%;
+  height: 0.1em;
+  background-color: var(--ifm-color-secondary);
+  opacity: 0.6;
+  transition: 0.3s;
+  transform: scaleX(0.3);
+  transform-origin: center;
+}
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -69,6 +69,7 @@
 }


+
 a, .table-of-contents__link--active {
  color: var(--reversed-global);
 }

--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -17,8 +17,8 @@
  --ifm-link-hover-color: var(--reversed-global-light);
  --ifm-menu-color-active: var(--reversed-global);
  --ifm-breadcrumb-color-active: var(--reversed-global);
-  --ifm-card-background-color: #fafafa;
-  
+  --ifm-card-background-color: #f8f8f8;
+
  /* Fonts */ 
  --ifm-font-family-base: 'roboto', sans;
  --ifm-font-family-titles: 'venryn_medium', sans;

--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -6,6 +6,7 @@ import YoutubeEmbed from '@site/src/components/YoutubeEmbed';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import RegisterForm from '../components/RegisterForm';
 import HomepageList from '../components/HomepageList'
+import TestimoniesCarousel from '../components/TestimoniesCarousel'



@@ -28,6 +29,9 @@ export default function Home() {
          <YoutubeEmbed embedId="pg3M3LeaP-k?start=30" />
          <HomepageList/>
        </section>
+        <section>
+          <TestimoniesCarousel />
+        </section>
        <section className="text--center margin-vert--xl">
          <HomepageFeatures/>
          <RegisterForm/>

--- a/static/testimoniesList.json
+++ b/static/testimoniesList.json
+[
+  {
+    "name": "Nicolas B.",
+    "url" : "https://www.linkedin.com/in/kaizendo/",
+    "title": "Christophe m'a fait gagner du temps !",
+    "text" : "J’ai fais appel à Christophe pour m’aider à appréhender les différentes solutions de passage à l’échelle d’un service qui sera hébergé sur un cluster K8S, dont les ressources sort gérées par Terraform. \nÉtant spécialiste de l’approche DevOps, il était tout à fait indiqué pour répondre à mes questions. \nGrâce à lui, j’ai pu avancer dans mon projet, mettre de côté les solutions qui n’étaient pas les meilleurs et repartir avec plusieurs options très pertinentes, et tout ça en très peu de temps !",
+    "img" : "https://media.licdn.com/dms/image/C4D03AQHFvTyUONV8mA/profile-displayphoto-shrink_800_800/0/1595179848120?e=1678320000&v=beta&t=i_EcwMsVtAO6yxhV8htW_5GfR0RNamyrcV4-XvxEv7E"
+  },
+  {
+    "name": "Moussadia S.",
+    "url": "https://www.linkedin.com/in/moussadia-soumahoro-555169152/",
+    "title": "Christophe m'a orienté dans ma carrière professionnelle !",
+    "text" : "Il m'a aidé en tant que mentor sur les problématiques DevOps. Il a une bonne compréhension sur les méthodes d'automatisation. \nGrâce à lui j'ai pu avoir d'autres formateurs pour ma montée en compétence sur ces problématiques. \nIl continue toujours de m'assister et il est disponible à tout moment pour répondre à tes nombreuses questions.",
+    "img" : "https://media.licdn.com/dms/image/C4E03AQEDTwYpvNT0Ww/profile-displayphoto-shrink_800_800/0/1646745763801?e=1678320000&v=beta&t=LrAoaDwmIVvbyHjUoQD2y5EZOMQ_DRbjuYt5NwQ_KCo"
+  },
+  {
+    "name": "Valentin B.",
+    "url": "https://www.linkedin.com/in/valentin-bibaud-286a7773/",
+    "title": "Christophe est un modèle à suivre !",
+    "text" : "C'est une source d'inspiration dans le domaine informatique de part les valeurs qu'il partage ainsi que son investissement pour ce domaine. Christophe est une personne très à l'écoute avec une excellente motivation.",
+    "img" : "https://media.licdn.com/dms/image/C4D03AQEcxCZf9J-rMA/profile-displayphoto-shrink_800_800/0/1561019887155?e=1678924800&v=beta&t=MJn7AokoTRFNypYcCah4211TWM7FVGzxKow9T7iUTUQ"
+  },
+  {
+    "name": "Chakib H.",
+    "url": "https://www.linkedin.com/in/chakib-houd-io/",
+    "title": "Christophe est une personne passionné !",
+    "text" : "Il connaît vraiment son sujet, et répond toujours présent pour aiguiller, aider des profils juniors comme moi. \n À deux reprises, il m'a conseillé : la première sur l’utilisation d'une librairie de test pour du bash, j'ai pus par la suite présenter cet outil à mon équipe. L'autre fois, il a optimisé une commande complexe sous Linux qui m'a permis de diviser par 2,5 le CPU system. \n Toujours un plaisir de suivre ses conversations autour du devops.",
+    "img" : "https://media.licdn.com/dms/image/C4E03AQEs7oL0pCTTmw/profile-displayphoto-shrink_800_800/0/1620340857730?e=1678924800&v=beta&t=wNMw9PxXGdsVQlxAD-MlXRbtaRrfpKejMPelGk1AvzA"
+  },
+  {
+    "name": "Pierre M.",
+    "url": "https://www.linkedin.com/in/pierremichon",
+    "img" : "https://media.licdn.com/dms/image/C5603AQGf6G15UGfNRw/profile-displayphoto-shrink_200_200/0/1570779076021?e=1678924800&v=beta&t=OlsfLsf_k96vHU2RkETFk_Osy_jzbl29YDK1lWNF4Is",
+    "title": "J'ai eu la chance de collaborer avec Christophe durant mon stage de Web Designer.",
+    "text" : "Avec son associé Thomas nous avons ensemble dans le contexte sanitaire que nous vivons su atteindre dans dans un espace temps limité l'ensemble des objectifs fixés (Création d'une identité visuelle). J'ai vraiment apprécié nos échanges, sa vision éthique et collaborative du monde de demain. Les enjeux pour acquérir de l'information numérique sur chacun de nous sont énormes et sur ce marché l'acquisition et la protection de notre souveraineté numérique face aux géants américains est vital. Christophe est investi à 200% dans cette mission. Avec Thomas et leur équipe ils construisent pour les entreprises un univers numérique dans lequel l'entreprise et les hommes s'épanouissent de façon souveraine. Christophe est une personne passionnée, curieuse, il sait se fixer des objectifs ambitieux et fédérer son équipe pour les atteindre. "
+  },
+  {
+    "name": "William G.",
+    "url": "https://www.linkedin.com/in/williamgathoye/",
+    "img" : "https://media.licdn.com/dms/image/D4E03AQG1Zhjmz8QVGQ/profile-displayphoto-shrink_200_200/0/1668984429872?e=1678924800&v=beta&t=dI6kncG_H6hqF7zG1QU0Ky9q6gKdGNNNRSJp5WfxtEU",
+    "title": "Christophe est intervenue dans notre live Twitch MattermostFR !",
+    "text" : "Avec MattermostFR, la communauté francophone de Mattermost, nous avons eu l'occasion d'inviter Christophe à l'un de nos lives du Jeudredi. Il nous a fait part de son expérience DevOps pour nous présenter les avantages du SaaS libre via un projet sur lequel il travaille : Froggit. Depuis lors, nos interactions avec Christophe ont continué à évoluer et nous avons continué à échanger sur le canal francophone. En tant que contributeurs, il a soulevé des questions intéressantes vis-à-vis de Mattermost afin d’améliorer son déploiement comme solution locale et souveraine. A titre personnel, il nous a également permis de nous aiguiller via son expertise DevOps mais aussi son sens de la pédagogie via les vidéos et lives qu'il donne depuis un certain temps déjà. Je me réjouis déjà de pouvoir à nouveau échanger avec lui dès que l'opportunité s'offrira."
+  },
+  {
+    "name": "Walid D.",
+    "url": "https://www.linkedin.com/in/walid-debbech-902b74172/",
+    "img" : "https://media.licdn.com/dms/image/C4D03AQF3XZ1ggUc3Iw/profile-displayphoto-shrink_200_200/0/1572644500254?e=1678924800&v=beta&t=80i7KDgTl-rXno0XEM9wqOibhQWeS_Zizw-CJIx1BGg",
+    "title": "Christophe est super serviable !",
+    "text" : "Il prend le temps d'écouter tes problèmes et propose toujours des solutions pertinentes. Il m'a rapidement débloqué sur mes problèmes de déploiement. \n J'aimerais toujours avoir Christophe dans les parages !"
+  },
+  {
+    "name": "Baptiste F.",
+    "url": "https://www.linkedin.com/in/baptiste-fotia-611030103/",
+    "img" : "https://media.licdn.com/dms/image/C4E03AQGhL-hQyA19-A/profile-displayphoto-shrink_200_200/0/1657095147548?e=1678924800&v=beta&t=BXBIqATJrc1yg5N7N27lyBtK_LSBC4D2L3dUVd6iLPM",
+    "title": "J'admire le travaille de Christophe !",
+    "text" : "Il réalise des vidéos sur la tech (SysAdmin DevOps) et n'hésite pas à mettre en avant son engagement politique. C'est vraiment impressionnant et pas commun chez les influenceurs ! Ce n'est pas la même chose que si c'était sur Twitter et ça change. \n Avant qu'il se soit exprimé sur son orientation politique, on sentait déjà qu'il avait des engagements bien précis depuis qu'il a commencé à faire des podcasts et vidéos ;) \n Le format est super pour être honnête :)"
+  }
+]