Resolve "Update team"

Closes #101 (closed)

src/components/HomepageTeam/index.js

-import React from 'react';
-import Link from "@docusaurus/Link";
-import Slider from "react-slick";
+import React from "react";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
-import clsx from 'clsx';
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import { FaLinkedin } from "react-icons/fa";
-import Image from '@theme/IdealImage'
+import Image from "@theme/IdealImage";
+import { useState } from "react";
+import Link from "@docusaurus/Link";
 
 const FeatureList = [
   {
-    title: 'Christophe Chaudier',
-    subtitle: 'Formateur et Consultant en méthodologies DevOps',
-    img: 'img/team/cchaudier_bkg.png',
-    url: 'https://www.linkedin.com/in/cchaudier/',
-    description: (
-      <>
-        Formateur et Consultant en méthodologies DevOps et expert en déploiement logiciel. Actif sur les réseaux sociaux @c_chaudier. Saint-Étienne, plus de 25 ans d’expérience. Étant expert en déploiements automatisés, Christophe a en charge la partie « R&D opérationnelle » dans le but d’automatiser la plateforme de service et le déploiement des logiciels. Christophe est également en charge de la coordination et de la formation des consultants Lydra. Ayant le plus d’expérience avec les hébergeurs de plateforme en ligne, Christophe est responsable de la relation commerciale et technique avec ces fournisseurs de solutions d’hébergement de serveurs.
-      </>
-    ),
+    title: "Christophe Chaudier",
+    subtitle: "Formateur et Consultant en méthodologies DevOps",
+    img: "img/team/cchaudier_bkg.png",
+    url: "https://www.linkedin.com/in/cchaudier/",
+    description:
+      "Christophe à développé au fil des années une expertise en déploiement logiciel. Actif sur les réseaux sociaux @c_chaudier. Saint-Étienne, plus de 25 ans d’expérience. Étant expert en déploiements automatisés, Christophe a en charge la partie « R&D opérationnelle » dans le but d’automatiser la plateforme de service et le déploiement des logiciels. Christophe est également en charge de la coordination et de la formation des consultants Lydra. Ayant le plus d’expérience avec les hébergeurs de plateforme en ligne, Christophe est responsable de la relation commerciale et technique avec ces fournisseurs de solutions d’hébergement de serveurs.",
   },
   {
-    title: 'Thomas Michel',
-    subtitle: 'Administrateur système et conseil en logiciels libres',
-    img: 'img/team/tmichel_bkg.png',
-    url: 'https://www.linkedin.com/in/thomas-michel-598818313',
-    description: (
-      <>
-        Administrateur système et conseil en logiciels libres. Rennes, plus de 20 ans d’expérience. Déjà opérationnel dans la recherche d’outils numériques libres pour les offres « clé en main », Thomas a en charge la partie « R&D fonctionnelle » consistant à identifier les logiciels les plus adaptés pour répondre à un besoin, et documenter leur processus de déploiement et de paramétrage. De part son expérience dans la mise à disposition de services en ligne « clé en main », Thomas est également au pilotage des travaux légaux et institutionnels. Thomas a aussi la responsabilité de coordonner les travaux de documentation utilisateur et de support à la clientèle.
-      </>
-    ),
+    title: "Thomas Michel",
+    subtitle: "Administrateur système et conseil en logiciels libres",
+    img: "img/team/tmichel_bkg.png",
+    url: "https://www.linkedin.com/in/thomas-michel-598818313",
+    description:
+      "Basé à Rennes, plus de 20 ans d’expérience. Thomas a en charge la partie « R&D fonctionnelle » consistant à identifier les logiciels les plus adaptés pour répondre à un besoin, et documenter leur processus de déploiement et de paramétrage. Thomas est également au pilotage des travaux légaux et institutionnels, et d’optimisation financière (FinOps). Thomas a aussi la responsabilité de coordonner les travaux de documentation utilisateur et de support à la clientèle.",
   },
   {
-    title: 'Daniel Gonçalves',
-      subtitle: 'Développeur et administrateur système',
-    img: 'img/team/dgoncalves_bkg.png',
-    url: 'https://www.linkedin.com/in/daniel-gon%C3%A7alves-8a635a146/',
-    description: (
-      <>
-          Développeur de formation devenu administrateur systèmes GNU/Linux. Lyon, plus de 15 ans d’expérience. Tombé dans le logiciel libre et la culture du hacking il y a 18 ans, Daniel est particulièrement intéressé par les questions d’outillages dans le but de faciliter la vie des administrateurs et développeurs d’un projet ou d’une équipe. Il opère aujourd’hui un savant mélange d’administration système combiné à des connaissances poussées en développement dans le but de maintenir en conditions opérationnelles les solutions de nos clients. Adepte convaincu par les solutions d’automatisation d’infrastructure, Daniel est particulièrement friand d’Ansible et AWX.
-      </>
-    ),
+    title: "Daniel Gonçalves",
+    subtitle: "Développeur et administrateur système",
+    img: "img/team/dgoncalves_bkg2.png",
+    url: "https://www.linkedin.com/in/daniel-gon%C3%A7alves-8a635a146/",
+    description:
+      "Développeur de formation devenu administrateur systèmes GNU/Linux. Lyon, plus de 15 ans d’expérience. Tombé dans le logiciel libre et la culture du hacking il y a 18 ans, Daniel est particulièrement intéressé par les questions d’outillages dans le but de faciliter la vie des administrateurs et développeurs d’un projet ou d’une équipe. Il opère aujourd’hui un savant mélange d’administration système combiné à des connaissances poussées en développement dans le but de maintenir en conditions opérationnelles les solutions de nos clients. Adepte convaincu par les solutions d’automatisation d’infrastructure, Daniel est particulièrement friand d’Ansible et AWX.",
   },
-
+  {
+    title: "Sylvain Viart",
+    subtitle: "Sysadmin GNU/Linux | DevOps | mentor",
+    img: "img/team/sviart_bkg.png",
+    description:
+      "Informaticien passionné, Sylvain adore apprendre et partager. Annecy, il est sysadmin GNU/Linux expert depuis plus de 20 ans et automatise tout. Il incarne le rôle DevOps, assurant la transition entre Sysadmin Ops et les développeurs. Sylvain est également un bon vulgarisateur, collaborant sur le code et la production afin de mener l’équipe à accomplir ses missions et à résoudre les défis humains et techniques. Enthousiaste et déterminé, il est très à l’aise avec les architectures complexes et les environnements datacenter ou cloud. Sylvain vous aidera à surmonter vos défis dans les logiciels libres et Open Source.",
+  },
+  {
+    title: "Arthur Boudrault",
+    subtitle: "Administrateur systèmes et réseaux spécialisé en Linux et adepte de la méthodologie DevOps",
+    img: "img/team/aboudrault_bkg.png",
+    description: 
+      "Passionné d'informatique depuis son adolescence et spécialiste des systèmes Linux, Arthur a rejoint Lydra en 2021, d'abord en stage, puis en alternance. Basé à Tours, son expertise couvre aussi bien le maintien en conditions opérationnelles (MCO) que la recherche et développement (R&D) pour le SaaS Froggit. Il a notamment contribué au déploiement d'une forge logicielle conçue pour 10 000 utilisateurs, ainsi qu'à l'intégration et l'optimisation de Portainer pour la gestion des outils internes de Lydra. Arthur allie rigueur et innovation pour garantir la performance, la résilience et la sécurité des infrastructures informatiques.",
+  },
+  {
+    title: "Céleste Robert",
+    subtitle: "Développeuse fullstack",
+    img: "img/team/crobert_bkg.png",
+    description:
+      "Basée à Besançon, Céleste a rejoint Lydra en 2022 dans le cadre de son alternance pour le titre de développeur/concepteur d'applications. Elle a travaillé depuis sur divers projets, en particulier le développement des sites statiques de nos marques. Elle a aussi en charge l’automatisation no/low-code avec des outils variés pour nos SaaS. Elle développe les portails clients de nos SaaS et travaille aussi à l'amélioration des chaînes d'intégration continue Gitlab-CI.",
+  },
+  {
+    title: 'Pourquoi pas toi ?',
+    subtitle: "Rejoins Lydra ",
+    img: 'img/team/hacker.png',
+    link: "/contacts"
+  }
 ];
 
-const Nouveau =   {
-  title: 'Pourquoi pas toi ?',
-  subtitle: "Rejoins Lydra ",
-  img: 'img/team/hacker.png',
-  link: "/contacts"
-}
+function Feature({ img, title, subtitle, description, url, link }) {
+  const [showMore, setShowMore] = useState(false);
+  const maxLength = 150;
 
-function Feature({img, title, subtitle, description, link, url}) {
-  if (link) {
-    return (
-      <Link className={styles.featureElement} to={link}>
-        <Image img={useBaseUrl(img)} className={styles.featureSvg} role="img" />
-        <div className="text--center padding-horiz--md">
-          <h3>{title}</h3>
-          <p> <b>{subtitle}</b></p>
-          {description && (
-            <p>{description}</p>
-          )
-          }
-          
-        </div>
-      </Link>
-    );
-  } else {
-    return (
+  return (
+    <div className="col col--4 feature">
       <div className={styles.featureElement}>
-        <div style={{position:'relative'}}>
-          {url && (<a className='linkedin-button' href={url} target='_blank' rel="noreferrer" ><FaLinkedin/></a>)}
-          <Image img={useBaseUrl(img)} className={styles.featureSvg} role="img" />
-
+        <div style={{ position: "relative" }}>
+          {url && (
+            <a
+              className="linkedin-button"
+              href={url}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <FaLinkedin />
+            </a>
+          )}
+          <Image
+            img={useBaseUrl(img)}
+            className={styles.featureSvg}
+            role="img"
+          />
         </div>
         <div className="text--center padding-horiz--md">
           <h3>{title}</h3>
 
-          <p> <b>{subtitle}</b></p>
-          {description && (
-            <p>{description}</p>
-          )
-          }
+
+          {link ? <Link className="button button--sm button--secondary" href={link}> {subtitle} </Link> : <p><b>{subtitle}</b></p>}
+
+          {description && description.length > maxLength
+            ? showMore
+              ? description
+              : `${description.substring(0, maxLength)}...`
+            : description}
         </div>
+        {description && description.length > maxLength && (
+          <button
+            className="button button--sm button--secondary"
+            onClick={() => setShowMore(!showMore)}
+          >
+            {showMore ? "Voir moins" : "Voir plus"}
+          </button>
+        )}
       </div>
-    );
-  }
-
+    </div>
+  );
 }
 
 export default function HomepageTeam() {
-  const settings = {
-    accessibility: true,
-    autoplay: true,
-    autoplaySpeed: 8500,
-    speed: 1500,
-    infinite: true,
-    rtl: true,
-    slidesToShow: 2,
-    slidesToScroll: 1,
-    responsive: [
-      {
-        breakpoint: 720,
-        settings: {
-          slidesToShow: 1,
-          slidesToScroll: 1,
-          initialSlide: 0
-        }
-      },
-    ]
-  };
   return (
     <section id="team">
-      <h2 className='text--center margin-top--lg'> Notre Équipe </h2>
-      <div className={styles.features + ' team'}>
+      <h2 className="text--center margin-top--lg"> Notre Équipe </h2>
+      <div className={styles.features + " team"}>
         <div className="container">
           <div className="row">
-            <div className={clsx('col col--8')}>
-            <Slider {...settings}>
             {FeatureList.map((props, idx) => (
-                <Feature key={idx} {...props} />
-              ))}
-            </Slider>
-            </div>
-            <Feature {...Nouveau}/>
+              <Feature key={idx} {...props} />
+            ))}
           </div>
         </div>
       </div>