diff --git a/src/components/HomepageTeam/index.js b/src/components/HomepageTeam/index.js
index 1d307c9630f7f1f8eea4ff8c3c8ecfacecab7a68..c8fc1cdc14a0e77f48821b4aeaa2f040a3c0f1aa 100644
--- a/src/components/HomepageTeam/index.js
+++ b/src/components/HomepageTeam/index.js
@@ -1,132 +1,126 @@
-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>
diff --git a/src/components/HomepageTeam/styles.module.css b/src/components/HomepageTeam/styles.module.css
index 44039825da580785ecb417045987bc31bc718932..7b233dc8d6cf6d7ca06cde6ff4b88ba0e1cfeda5 100644
--- a/src/components/HomepageTeam/styles.module.css
+++ b/src/components/HomepageTeam/styles.module.css
@@ -2,6 +2,7 @@
display: flex;
align-items: center;
padding: 2rem 0;
+
width: 100%;
}
@@ -16,7 +17,7 @@
display: flex;
flex-direction: column;
align-items: center;
- margin: 0 auto;
+ margin: 12px auto;
}
.featureElement:hover {
diff --git a/src/css/custom.css b/src/css/custom.css
index 7a6e4df6bdb48532400f79cd9d4b2b3f02cf06e7..416c20ddd72beea1f12032dfc7d3ab61b9b1eea9 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -120,31 +120,34 @@ section:nth-child(even) {
color: #5da8d0;
}
-.team .slick-slide:nth-child(3n+1) img {
+.team .feature:nth-child(4n+1) img {
background-color: var(--ifm-pastel-success)
}
-.team .slick-slide:nth-child(3n+1) h3 {
+.team .feature:nth-child(4n+1) h3 {
color: var(--ifm-color-success);
}
-
-.team .slick-slide:nth-child(3n+2) img {
+.team .feature:nth-child(4n+2) img {
background-color: var(--ifm-pastel-info);
}
-.team .slick-slide:nth-child(3n+2) h3 {
+.team .feature:nth-child(4n+2) h3 {
color: var(--ifm-color-info);
}
-.team .slick-slide:nth-child(3n+3) img {
+.team .feature:nth-child(4n+3) img, .team .feature:nth-child(4n+4) img {
background-color: var(--ifm-pastel-highlight);
}
-.team .slick-slide:nth-child(3n+3) h3 {
+.team .feature:nth-child(4n+3) h3, .team .feature:nth-child(4n+4) h3 {
color: var(--ifm-color-highlight);
}
+.feature {
+ margin: auto;
+}
+
.pagination-nav__label {
font-size: 1rem;
}
diff --git a/static/img/team/aboudrault_bkg.png b/static/img/team/aboudrault_bkg.png
new file mode 100644
index 0000000000000000000000000000000000000000..e12dddf03c5e073ee922179ffcf31ad277240abb
Binary files /dev/null and b/static/img/team/aboudrault_bkg.png differ
diff --git a/static/img/team/crobert_bkg.png b/static/img/team/crobert_bkg.png
new file mode 100644
index 0000000000000000000000000000000000000000..100ca114351ca8de61b7b7a42711febf084d7415
Binary files /dev/null and b/static/img/team/crobert_bkg.png differ
diff --git a/static/img/team/dgoncalves_bkg2.png b/static/img/team/dgoncalves_bkg2.png
new file mode 100644
index 0000000000000000000000000000000000000000..8985ee24b7460c5d7055577ea206fd597903f570
Binary files /dev/null and b/static/img/team/dgoncalves_bkg2.png differ
diff --git a/static/img/team/sviart_bkg.png b/static/img/team/sviart_bkg.png
new file mode 100644
index 0000000000000000000000000000000000000000..5189ff7aef3485d5db5b81936ab6aaef1788a578
Binary files /dev/null and b/static/img/team/sviart_bkg.png differ