Skip to content

Commit 99ebd4e

Browse files
HaudinFlorenceSylvainCorlay
HaudinFlorence
authored and
SylvainCorlay
committed
Fix style issues and add some logics to have 2 alternating colors for the topics and the values card for the mobile design.
1 parent ac8dbfb commit 99ebd4e

44 files changed

Lines changed: 1495 additions & 477 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.docusaurus/client-manifest.json‎

Lines changed: 105 additions & 105 deletions
Large diffs are not rendered by default.

‎package-lock.json‎

Lines changed: 794 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"curl": "^0.1.4",
3535
"fs": "^0.0.1-security",
3636
"image-size": "^1.1.1",
37+
"jimp": "^0.22.12",
3738
"js-yaml": "^4.1.0",
3839
"nodejs": "^0.0.0",
3940
"postcss": "^8.4.38",

‎src/components/about/FourValues.tsx‎

Lines changed: 64 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styles from "./styles.module.css";
2-
import ValueCard from "@site/src/components/about/ValueCard";
2+
33
import OpennessMD from "@site/src/components/about/Values/openness.md";
44
import ScienceMD from "@site/src/components/about/Values/science.md";
55
import IntegrityMD from "@site/src/components/about/Values/integrity.md";
@@ -8,30 +8,74 @@ import OpennessPicture from "@site/static/img/values/openness.svg";
88
import SciencePicture from "@site/static/img/values/science.svg";
99
import OptimismPicture from "@site/static/img/values/optimism.svg";
1010
import IntegrityPicture from "@site/static/img/values/integrity.svg";
11+
import { ValueCardMobile } from "@site/src/components/about/ValueCard";
12+
import { ValueCardDesktop } from "@site/src/components/about/ValueCard";
13+
import { useEffect, useState } from "react";
1114

1215
const valuesDescriptions = [OpennessMD, ScienceMD, IntegrityMD, OptimismMD];
13-
const valuesPictures = [OpennessPicture, SciencePicture, OptimismPicture, IntegrityPicture]
14-
const valuesNames = [ "Openness", "Science", "Optimism", "Integrity"]
16+
const valuesPictures = [
17+
OpennessPicture,
18+
SciencePicture,
19+
OptimismPicture,
20+
IntegrityPicture,
21+
];
22+
const valuesNames = ["Openness", "Science", "Optimism", "Integrity"];
23+
const cardColors = ["yellow", "white", "yellow", "white"];
1524

25+
export function FourValuesMobile() {
26+
return (
27+
<div className="four_values_container">
28+
<ul className={"row" + " " + styles.row_custom}>
29+
{valuesNames.map((value, index) => (
30+
<li className="cards_list" key={index}>
31+
<div className="col">
32+
<ValueCardMobile
33+
value={value}
34+
ValuePicture={valuesPictures[index]}
35+
ValueComponent={valuesDescriptions[index]}
36+
color={cardColors[index]}
37+
/>
38+
</div>
39+
</li>
40+
))}
41+
</ul>
42+
</div>
43+
);
44+
}
1645

17-
export default function FourValues() {
46+
export function FourValuesDesktop() {
1847
return (
19-
<div className="main-container-with-margins">
20-
<div className="four_values_container">
21-
<ul className={"row" + " " + styles.row_custom}>
22-
{valuesNames.map((value, index) => (
23-
<li className="cards_list" key={index}>
24-
<div className="col">
25-
<ValueCard
26-
value={value}
27-
ValuePicture={valuesPictures[index]}
28-
ValueComponent={valuesDescriptions[index]}
29-
/>
30-
</div>
31-
</li>
32-
))}
33-
</ul>
34-
</div>
48+
<div className="four_values_container">
49+
<ul className={"row" + " " + styles.row_custom}>
50+
{valuesNames.map((value, index) => (
51+
<li className="cards_list" key={index}>
52+
<div className="col">
53+
<ValueCardDesktop
54+
value={value}
55+
ValuePicture={valuesPictures[index]}
56+
ValueComponent={valuesDescriptions[index]}
57+
/>
58+
</div>
59+
</li>
60+
))}
61+
</ul>
3562
</div>
3663
);
3764
}
65+
66+
const breakpointValue: number = 996;
67+
68+
export default function FourValues() {
69+
const [isDesktop, setDesktop] = useState(window.innerWidth > breakpointValue);
70+
71+
const updateMedia = () => {
72+
setDesktop(window.innerWidth > breakpointValue);
73+
};
74+
75+
useEffect(() => {
76+
window.addEventListener("resize", updateMedia);
77+
return () => window.removeEventListener("resize", updateMedia);
78+
});
79+
80+
return <div>{isDesktop ? <FourValuesDesktop /> : <FourValuesMobile />}</div>;
81+
}

‎src/components/about/ValueCard.tsx‎

Lines changed: 77 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,79 @@
11
import styles from "./styles.module.css";
2+
import { useEffect, useState } from "react";
23

3-
export default function ValueCard({ value, ValuePicture, ValueComponent }) {
4-
return (
5-
<div className={"card " + styles.value_card}>
6-
<div className={styles.value_image}>
7-
<ValuePicture/>
8-
</div>
9-
<div className={styles.value_header}>{value}</div>
10-
<div className={styles.value_text}>
11-
<ValueComponent />
12-
</div>
13-
</div>
14-
);
15-
}
4+
export function ValueCardDesktop({ value, ValuePicture, ValueComponent }) {
5+
return (
6+
<div className={"card " + styles.value_card}>
7+
<div className={styles.value_image}>
8+
<ValuePicture />
9+
</div>
10+
<div className={styles.value_header}>{value}</div>
11+
<div className={styles.value_text}>
12+
<ValueComponent />
13+
</div>
14+
</div>
15+
);
16+
}
17+
18+
export function ValueCardMobile({
19+
value,
20+
ValuePicture,
21+
ValueComponent,
22+
color,
23+
}) {
24+
return (
25+
<div
26+
className={
27+
"card " +
28+
" " +
29+
styles.value_card +
30+
" " +
31+
(color === "yellow"
32+
? styles.value_card_yellow
33+
: styles.value_card_white)
34+
}
35+
>
36+
<div className={styles.value_image}>
37+
<ValuePicture />
38+
</div>
39+
<div className={styles.value_header}>{value}</div>
40+
<div className={styles.value_text}>
41+
<ValueComponent />
42+
</div>
43+
</div>
44+
);
45+
}
46+
47+
const breakpointValue: number = 996;
48+
49+
export default function ValueCard(value, ValuePicture, ValueComponent, color) {
50+
const [isDesktop, setDesktop] = useState(window.innerWidth > breakpointValue);
51+
52+
const updateMedia = () => {
53+
setDesktop(window.innerWidth > breakpointValue);
54+
};
55+
56+
useEffect(() => {
57+
window.addEventListener("resize", updateMedia);
58+
return () => window.removeEventListener("resize", updateMedia);
59+
});
60+
61+
return (
62+
<div>
63+
{isDesktop ? (
64+
<ValueCardDesktop
65+
value={value}
66+
ValuePicture={ValuePicture}
67+
ValueComponent={ValueComponent}
68+
/>
69+
) : (
70+
<ValueCardMobile
71+
value={value}
72+
ValuePicture={ValuePicture}
73+
ValueComponent={ValueComponent}
74+
color={color}
75+
/>
76+
)}
77+
</div>
78+
);
79+
}

‎src/components/about/index.tsx‎

Lines changed: 49 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -34,48 +34,56 @@ export default function About() {
3434

3535
export function AboutDesktop() {
3636
return (
37-
<div className={"container" + " " + styles.about_container}>
38-
<div className="row">
39-
<div className="col">
40-
<h1 className={styles.h1_margin}>Our values </h1>
41-
</div>
42-
</div>
43-
<div className="row">
44-
<div className="col">
45-
<FourValues />
46-
<h1 className={styles.h1_custom}>Meet the QuantStack team</h1>
47-
<h4>
48-
A team of outliers, leaders in software projects adopted at the
49-
global scale, benefiting millions of people worldwide.
50-
</h4>
51-
<SubTeamDesktop
52-
description={"The leadership team"}
53-
subTeam={leadershipTeam}
54-
subTeamAvatarsUrls={leadershipAvatarsUrls}
55-
subTeamBioComponents={leadershipBioComponents}
56-
/>
57-
<SubTeamDesktop
58-
description={"The core team"}
59-
subTeam={coreTeam}
60-
subTeamAvatarsUrls={coreAvatarsUrls}
61-
subTeamBioComponents={coreBioComponents}
62-
/>
63-
<SubTeamDesktop
64-
description={"QuantStack collaborators"}
65-
subTeam={QSCollaboratorsTeam}
66-
subTeamAvatarsUrls={QSCollaboratorsAvatarsUrls}
67-
subTeamBioComponents={QSCollaboratorsBioComponents}
68-
/>
69-
<div className={styles.join_the_team_container}>
70-
<h1 className={styles.h1_custom}>Join the team</h1>
71-
<div className={styles.join_the_team_text}>
72-
QuantStack is seeking talents in the open-source scientific
73-
computing community. Join a team committed to open-science and
74-
free software.
37+
<div>
38+
<div className="main-container-with-margins">
39+
<div className={"container" + " " + styles.about_container}>
40+
<div className="row">
41+
<div className="col col--10 col--offset-1">
42+
<h1 className="h1-padding-none">Our values </h1>
43+
</div>
44+
</div>
45+
<div className="row">
46+
<div className="col col--10 col--offset-1">
47+
<FourValues />
48+
49+
<h1 className="h1-centered">Meet the QuantStack team</h1>
50+
<h4>
51+
A team of outliers, leaders in software projects adopted at the
52+
global scale, benefiting millions of people worldwide.
53+
</h4>
7554
</div>
76-
<LinkToContact label={"JOIN THE TEAM!"} />
7755
</div>
56+
<div className="row">
57+
<div className="col">
58+
<SubTeamDesktop
59+
description={"The leadership team"}
60+
subTeam={leadershipTeam}
61+
subTeamAvatarsUrls={leadershipAvatarsUrls}
62+
subTeamBioComponents={leadershipBioComponents}
63+
/>
64+
<SubTeamDesktop
65+
description={"The core team"}
66+
subTeam={coreTeam}
67+
subTeamAvatarsUrls={coreAvatarsUrls}
68+
subTeamBioComponents={coreBioComponents}
69+
/>
70+
<SubTeamDesktop
71+
description={"QuantStack collaborators"}
72+
subTeam={QSCollaboratorsTeam}
73+
subTeamAvatarsUrls={QSCollaboratorsAvatarsUrls}
74+
subTeamBioComponents={QSCollaboratorsBioComponents}
75+
/>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
<div className={styles.join_the_team_container}>
81+
<h1 className="h1-centered">Join the team</h1>
82+
<div className={styles.join_the_team_text}>
83+
QuantStack is seeking talents in the open-source scientific computing
84+
community. Join a team committed to open-science and free software.
7885
</div>
86+
<LinkToContact label={"JOIN THE TEAM!"} />
7987
</div>
8088
</div>
8189
);
@@ -85,15 +93,15 @@ export function AboutMobile() {
8593
return (
8694
<div className={"container" + " " + styles.about_container}>
8795
<div className={"row" + " " + styles.row_custom}>
88-
<div className={"col col--12" + " " + styles.col_custom}>
96+
<div className={"col col--12" + " " + "col--padding-none"}>
8997
<h2 className={styles.h2_custom}>
9098
A team of outliers, leaders in software projects adopted at the
9199
global scale, benefiting millions of people worldwide.
92100
</h2>
93101
</div>
94102
</div>
95103
<div className="row">
96-
<div className={"col col--10 col--offset-1" + " " + styles.col_custom}>
104+
<div className={"col col--10 col--offset-1" + " " + "col-padding-none"}>
97105
<div className={styles.four_values_div}>
98106
<FourValues />
99107
</div>

0 commit comments

Comments
 (0)