diff --git a/docusaurus.config.js b/docusaurus.config.js
index 8187beaa4ad51abf660662f8363d2bc339bee9f0..a96dfeb37bab49b26223668a1b5959217f1952e1 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -149,8 +149,8 @@ const config = {
items: [
{
label: 'L\'équipe',
- to: '/#team',
- activeBasePath: '/#'
+ to: '/equipe',
+ activeBasePath: '/equipe'
},
{
label: 'Nos réseaux',
diff --git a/src/components/HomepageTeam/styles.module.css b/src/components/HomepageTeam/styles.module.css
deleted file mode 100644
index 7b233dc8d6cf6d7ca06cde6ff4b88ba0e1cfeda5..0000000000000000000000000000000000000000
--- a/src/components/HomepageTeam/styles.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.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;
-}
diff --git a/src/components/HomepageTeam/index.js b/src/components/TeamComponent/index.js
similarity index 76%
rename from src/components/HomepageTeam/index.js
rename to src/components/TeamComponent/index.js
index 5853de07e7f306659cec34e92f33bd829346a663..d00686f5e65576303909a17daaf23ea04d881739 100644
--- a/src/components/HomepageTeam/index.js
+++ b/src/components/TeamComponent/index.js
@@ -1,12 +1,13 @@
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>
);
}
+
diff --git a/src/components/TeamComponent/styles.module.css b/src/components/TeamComponent/styles.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..c526577ce96188c398dbda23aab705efb019d490
--- /dev/null
+++ b/src/components/TeamComponent/styles.module.css
@@ -0,0 +1,97 @@
+.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;
+ }
+
+
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 416c20ddd72beea1f12032dfc7d3ab61b9b1eea9..326039b8794387e424193646a877b40f11ca5fc0 100644
--- a/src/css/custom.css
+++ b/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;
diff --git a/src/pages/equipe.js b/src/pages/equipe.js
new file mode 100644
index 0000000000000000000000000000000000000000..a96e7a3115395e40ca06d47698d592dcb31b14e0
--- /dev/null
+++ b/src/pages/equipe.js
@@ -0,0 +1,20 @@
+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>
+ );
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 99bd3dceab587199551ff9b7d0b5ce3ffcc5480d..39114b1203adfd4926289be53e8c1ae59069915c 100644
--- a/src/pages/index.js
+++ b/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>
);
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/hacker.png b/static/img/team/hacker.png
deleted file mode 100644
index 7509e2b26334f66a3f47bd6d6b0d206ef3e67222..0000000000000000000000000000000000000000
Binary files a/static/img/team/hacker.png and /dev/null differ
diff --git a/static/img/team/question-mark.png b/static/img/team/question-mark.png
new file mode 100644
index 0000000000000000000000000000000000000000..545f447a9978551d8fec33522d7552ec4d9b8f27
Binary files /dev/null and b/static/img/team/question-mark.png differ