docusaurus.config.js

@@ -149,8 +149,8 @@ const config = {
             items: [
               {
                 label: 'L\'équipe',
-                to: '/#team',
-                activeBasePath: '/#'
+                to: '/equipe',
+                activeBasePath: '/equipe'
               },
               {
                 label: 'Nos réseaux',

src/components/HomepageTeam/styles.module.css

-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-  border-radius: 50%;
-  margin-bottom: 1rem;
-}
-
-.featureElement {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 12px auto;
-}
-
-.featureElement:hover {
-  text-decoration: none;
-}

src/components/HomepageTeam/index.js → src/components/TeamComponent/index.js

 import React from "react";
+import clsx from 'clsx';
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import styles from "./styles.module.css";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import { FaLinkedin } from "react-icons/fa";
 import Image from "@theme/IdealImage";
-import { useState } from "react";
 import Link from "@docusaurus/Link";
+import Slider from "react-slick";
 
 const FeatureList = [
   {
@@ -37,6 +38,7 @@ const FeatureList = [
     title: "Sylvain Viart",
     subtitle: "Sysadmin GNU/Linux | DevOps | mentor",
     img: "img/team/sviart_bkg.png",
+    url: "https://www.linkedin.com/in/sylvain-viart-a9a29915/",
     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.",
   },
@@ -56,23 +58,21 @@ const FeatureList = [
   },
   {
     title: 'Pourquoi pas toi ?',
-    subtitle: "Rejoins Lydra ",
-    img: 'img/team/hacker.png',
+    subtitle: "Rejoins Lydra",
+    description: "Rejoins Lydra et partage notre passion pour le logiciel libre et Open Source",
+    img: 'img/team/question-mark.png',
     link: "/contacts"
   }
 ];
 
 function Feature({ img, title, subtitle, description, url, link }) {
-  const [showMore, setShowMore] = useState(false);
-  const maxLength = 150;
 
   return (
-    <div className="col col--4 feature">
-      <div className={styles.featureElement}>
-        <div style={{ position: "relative" }}>
+    <div className={styles.teamElement}>
+      <div className={styles.teamPicture}>
           {url && (
             <a
-              className="linkedin-button"
+              className={styles.linkedinButton}
               href={url}
               target="_blank"
               rel="noreferrer"
@@ -85,45 +85,90 @@ function Feature({ img, title, subtitle, description, url, link }) {
             className={styles.featureSvg}
             role="img"
           />
-        </div>
-        <div className="text--center padding-horiz--md">
+      </div>
+      <div className={styles.teamDescription}>
           <h3>{title}</h3>
 
+          <p><b>{subtitle}</b></p>
 
-          {link ? <Link className="button button--sm button--secondary" href={link}> {subtitle} </Link> : <p><b>{subtitle}</b></p>}
+          <p>{description}</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>
-        )}
+          {link && <Link className="button button--sm button--secondary" href={link}> {subtitle} </Link>}
       </div>
     </div>
-  );
+);
 }
 
-export default function HomepageTeam() {
+export function Team() {
   return (
-    <section id="team">
+    <section>
       <h2 className="text--center margin-top--lg"> Notre Équipe </h2>
       <div className={styles.features + " team"}>
         <div className="container">
-          <div className="row">
             {FeatureList.map((props, idx) => (
               <Feature key={idx} {...props} />
             ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+
+function FeatureSlider({img, title, subtitle}) {
+    return (
+      <div className={styles.featureElement}>
+        <div style={{position:'relative'}}>
+          <Image img={useBaseUrl(img)} className={styles.featureSvg} style={{margin:'auto'}} role="img" />
+        </div>
+        <div className="text--center padding-horiz--md">
+          <h3>{title}</h3>
+          <p> <b>{subtitle}</b></p>
+          <Link className="button button--sm button--primary" href="/equipe"> Voir plus </Link>
+        </div>
+      </div>
+    )
+}
+
+
+export function TeamSlider() {
+  const settings = {
+    accessibility: true,
+    autoplay: true,
+    autoplaySpeed: 8500,
+    speed: 1500,
+    infinite: true,
+    rtl: true,
+    slidesToShow: 3,
+    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'}>
+        <div className="container">
+          <div className="row">
+            <div className={clsx('col')}>
+            <Slider {...settings}>
+            {FeatureList.map((props, idx) => (
+                <FeatureSlider key={idx} {...props} />
+              ))}
+            </Slider>
+            </div>
           </div>
         </div>
       </div>
     </section>
   );
 }
+

src/components/TeamComponent/styles.module.css

+.featureSvg {
+  height: 200px;
+  width: 200px;
+  border-radius: 50%;
+  margin-bottom: 1rem;
+  border: 6px solid var(--ifm-color-primary);
+  background-color: var(--alterning-bkg);
+}
+
+.teamElement {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 3rem;
+}
+
+.teamElement h3 {
+  color: var(--ifm-color-primary);
+}
+
+.teamElement:nth-child(even) {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.featureElement:hover {
+  text-decoration: none;
+}
+
+.teamPicture { 
+  position: relative;
+}
+
+.teamDescription {
+  margin-left: 5rem;
+}
+
+.teamDescription p, .teamDescription h3 {
+  text-align: left;
+  max-width: 860px;
+}
+
+.teamElement:nth-child(even) .teamDescription {
+  margin-right: 5rem;
+}
+
+.teamElement:nth-child(even) p, .teamElement:nth-child(even) h3 {
+  text-align: right;
+}
+
+.linkedinButton {
+  font-size: 3rem;
+  position: absolute;
+  top: 150px;
+  left: 0;
+  color: #0e76a8;
+}
+
+.linkedinButton:hover {
+  color: #5da8d0;
+}
+
+.teamElement:nth-last-child(1) .featureSvg {
+  border: 6px solid var(--ifm-color-success);
+}
+
+.teamElement:nth-last-child(1) h3 {
+  color: var(--ifm-color-success);
+}
+
+@media (max-width: 768px) {
+  .teamPicture {
+    margin: 0 auto;
+  }
+
+  .teamDescription {
+    margin: 0 auto;
+  }
+
+  .teamElement:nth-child(even) .teamDescription {
+    margin: 0 auto;
+  }
+
+  .teamDescription p, .teamDescription h3, .teamDescription:nth-child(even) p, .teamDescription:nth-child(even) h3 {
+    text-align: center;
+  }
+
+
+  .teamElement {
+    flex-direction: column;
+  }
+
+  .teamElement:nth-child(even) {
+    flex-direction: column;
+  }
+  
+  
+}

src/css/custom.css

@@ -40,6 +40,8 @@
   --ifm-h4-font-size: 2rem;
   --ifm-h5-font-size: 1.75rem;
   --ifm-h6-font-size: 1.5rem;
+
+  --ifm-container-width-xxl: 1400px;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -103,47 +105,6 @@ i, em {
   color: var(--ifm-color-primary) !important;
 }
 
-section:nth-child(even) {
-  background-color: var(--alterning-bkg);
-  padding: 2rem 0;
-}
-
-.linkedin-button {
-  font-size: 3rem;
-  position: absolute;
-  bottom: -1rem;
-  left: 0;
-  color: #0e76a8;
-}
-
-.linkedin-button:hover {
-  color: #5da8d0;
-}
-
-.team .feature:nth-child(4n+1) img {
-  background-color: var(--ifm-pastel-success)
-}
-
-.team .feature:nth-child(4n+1) h3 {
-  color: var(--ifm-color-success);
-}
-
-.team .feature:nth-child(4n+2) img {
-  background-color: var(--ifm-pastel-info);
-}
-
-.team .feature:nth-child(4n+2) h3 {
-  color: var(--ifm-color-info);
-}
-
-.team .feature:nth-child(4n+3) img, .team .feature:nth-child(4n+4) img {
-  background-color: var(--ifm-pastel-highlight);
-}
-
-.team .feature:nth-child(4n+3) h3, .team .feature:nth-child(4n+4) h3 {
-  color: var(--ifm-color-highlight);
-}
-
 .feature {
   margin: auto;
 }
@@ -156,6 +117,11 @@ section:nth-child(even) {
   text-align: center;
 }
 
+section:nth-child(even) {
+  background-color: var(--alterning-bkg);
+  padding: 2rem 0;
+}
+
 .notFound {
   position: absolute;
   top: -75px;
@@ -179,6 +145,12 @@ section:nth-child(even) {
   }
 }
 
+@media (min-width: 1440px) {
+  .container {
+    max-width: var(--ifm-container-width-xxl);
+  }
+}
+
 .tags-list li {
   white-space: nowrap;
   text-align: center;

src/pages/equipe.js

+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import { Team } from '@site/src/components/TeamComponent';
+
+const pageTitle = "Équipe"
+
+
+export default function Home() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`${pageTitle} - ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />">
+      <main>
+        <Team />
+      </main>
+    </Layout>
+  );
+}

src/pages/index.js

@@ -3,11 +3,10 @@ import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Image from '@theme/IdealImage';
-import HomepageTeam from '@site/src/components/HomepageTeam';
 import styles from './index.module.css';
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import TestimoniesCarousel from '@site/src/components/TestimoniesCarousel';
-
+import { TeamSlider } from '@site/src/components/TeamComponent';
 
 const pageTitle = "Home"
 
@@ -42,8 +41,8 @@ export default function Home() {
       description="Description will go into a meta tag in <head />">
       <HomepageHeader />
       <main>
-      <HomepageTeam />
-      <TestimoniesCarousel/>
+        <TeamSlider />
+        <TestimoniesCarousel/>
       </main>
     </Layout>
   );