Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 594acc67 authored by Christophe Chaudier's avatar Christophe Chaudier :rocket:
Browse files

Merge branch '106-style-revoir-le-style-de-la-section-equipe' into 'main'

Resolve "style: Revoir le style de la section équipe"

Closes #32 and #106

See merge request !89
parents f1dc4ae8 65f8ec98
No related branches found
No related tags found
1 merge request!89Resolve "style: Revoir le style de la section équipe"
Pipeline #62265 passed
...@@ -149,8 +149,8 @@ const config = { ...@@ -149,8 +149,8 @@ const config = {
items: [ items: [
{ {
label: 'L\'équipe', label: 'L\'équipe',
to: '/#team', to: '/equipe',
activeBasePath: '/#' activeBasePath: '/equipe'
}, },
{ {
label: 'Nos réseaux', label: 'Nos réseaux',
......
.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;
}
import React from "react"; import React from "react";
import clsx from 'clsx';
import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick-theme.css";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import useBaseUrl from "@docusaurus/useBaseUrl"; import useBaseUrl from "@docusaurus/useBaseUrl";
import { FaLinkedin } from "react-icons/fa"; 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"; import Link from "@docusaurus/Link";
import Slider from "react-slick";
const FeatureList = [ const FeatureList = [
{ {
...@@ -37,6 +38,7 @@ const FeatureList = [ ...@@ -37,6 +38,7 @@ const FeatureList = [
title: "Sylvain Viart", title: "Sylvain Viart",
subtitle: "Sysadmin GNU/Linux | DevOps | mentor", subtitle: "Sysadmin GNU/Linux | DevOps | mentor",
img: "img/team/sviart_bkg.png", img: "img/team/sviart_bkg.png",
url: "https://www.linkedin.com/in/sylvain-viart-a9a29915/",
description: 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.", "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 = [ ...@@ -56,23 +58,21 @@ const FeatureList = [
}, },
{ {
title: 'Pourquoi pas toi ?', title: 'Pourquoi pas toi ?',
subtitle: "Rejoins Lydra ", subtitle: "Rejoins Lydra",
img: 'img/team/hacker.png', description: "Rejoins Lydra et partage notre passion pour le logiciel libre et Open Source",
img: 'img/team/question-mark.png',
link: "/contacts" link: "/contacts"
} }
]; ];
function Feature({ img, title, subtitle, description, url, link }) { function Feature({ img, title, subtitle, description, url, link }) {
const [showMore, setShowMore] = useState(false);
const maxLength = 150;
return ( return (
<div className="col col--4 feature"> <div className={styles.teamElement}>
<div className={styles.featureElement}> <div className={styles.teamPicture}>
<div style={{ position: "relative" }}>
{url && ( {url && (
<a <a
className="linkedin-button" className={styles.linkedinButton}
href={url} href={url}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
...@@ -85,45 +85,90 @@ function Feature({ img, title, subtitle, description, url, link }) { ...@@ -85,45 +85,90 @@ function Feature({ img, title, subtitle, description, url, link }) {
className={styles.featureSvg} className={styles.featureSvg}
role="img" role="img"
/> />
</div> </div>
<div className="text--center padding-horiz--md"> <div className={styles.teamDescription}>
<h3>{title}</h3> <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 {link && <Link className="button button--sm button--secondary" href={link}> {subtitle} </Link>}
? 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>
</div> </div>
); );
} }
export default function HomepageTeam() { export function Team() {
return ( return (
<section id="team"> <section>
<h2 className="text--center margin-top--lg"> Notre Équipe </h2> <h2 className="text--center margin-top--lg"> Notre Équipe </h2>
<div className={styles.features + " team"}> <div className={styles.features + " team"}>
<div className="container"> <div className="container">
<div className="row">
{FeatureList.map((props, idx) => ( {FeatureList.map((props, idx) => (
<Feature key={idx} {...props} /> <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> </div>
</div> </div>
</section> </section>
); );
} }
.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;
}
}
...@@ -40,6 +40,8 @@ ...@@ -40,6 +40,8 @@
--ifm-h4-font-size: 2rem; --ifm-h4-font-size: 2rem;
--ifm-h5-font-size: 1.75rem; --ifm-h5-font-size: 1.75rem;
--ifm-h6-font-size: 1.5rem; --ifm-h6-font-size: 1.5rem;
--ifm-container-width-xxl: 1400px;
} }
/* For readability concerns, you should choose a lighter palette in dark mode. */ /* For readability concerns, you should choose a lighter palette in dark mode. */
...@@ -103,47 +105,6 @@ i, em { ...@@ -103,47 +105,6 @@ i, em {
color: var(--ifm-color-primary) !important; 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 { .feature {
margin: auto; margin: auto;
} }
...@@ -156,6 +117,11 @@ section:nth-child(even) { ...@@ -156,6 +117,11 @@ section:nth-child(even) {
text-align: center; text-align: center;
} }
section:nth-child(even) {
background-color: var(--alterning-bkg);
padding: 2rem 0;
}
.notFound { .notFound {
position: absolute; position: absolute;
top: -75px; top: -75px;
...@@ -179,6 +145,12 @@ section:nth-child(even) { ...@@ -179,6 +145,12 @@ section:nth-child(even) {
} }
} }
@media (min-width: 1440px) {
.container {
max-width: var(--ifm-container-width-xxl);
}
}
.tags-list li { .tags-list li {
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
......
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>
);
}
...@@ -3,11 +3,10 @@ import clsx from 'clsx'; ...@@ -3,11 +3,10 @@ import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import Image from '@theme/IdealImage'; import Image from '@theme/IdealImage';
import HomepageTeam from '@site/src/components/HomepageTeam';
import styles from './index.module.css'; import styles from './index.module.css';
import useBaseUrl from "@docusaurus/useBaseUrl"; import useBaseUrl from "@docusaurus/useBaseUrl";
import TestimoniesCarousel from '@site/src/components/TestimoniesCarousel'; import TestimoniesCarousel from '@site/src/components/TestimoniesCarousel';
import { TeamSlider } from '@site/src/components/TeamComponent';
const pageTitle = "Home" const pageTitle = "Home"
...@@ -42,8 +41,8 @@ export default function Home() { ...@@ -42,8 +41,8 @@ export default function Home() {
description="Description will go into a meta tag in <head />"> description="Description will go into a meta tag in <head />">
<HomepageHeader /> <HomepageHeader />
<main> <main>
<HomepageTeam /> <TeamSlider />
<TestimoniesCarousel/> <TestimoniesCarousel/>
</main> </main>
</Layout> </Layout>
); );
......
static/img/team/aboudrault_bkg.png

108 KiB

static/img/team/hacker.png

28.8 KiB

static/img/team/question-mark.png

15.7 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment