Update the team data to include the avatarUrl and the BioComponent in…

… the objects describing members of teams.

Remove unused pages and components.
Keep on fixing style.

docusaurus.config.ts

@@ -138,7 +138,7 @@ const config: Config = {
           items: [
             {
               label: " ",
-              className: "quantstack-astronaut-footer",
+              className: "astronaut-footer",
               href: "/home",
             },
           ],
@@ -201,7 +201,7 @@ const config: Config = {
             {
               html: `
               
-               <div class="div .quantstack-address">
+                  <div class="div .address">
                       16, avenue Curti <br/>
                       94100 Saint-Maur-des-Fossés <br/>
                       France

src/components/about/Avatar.tsx

@@ -1,22 +1,18 @@
 import styles from "./styles.module.css";
-import Link from "@docusaurus/Link";
 
 export default function Avatar({ person }) {
-  return (
+    return (
     <div className="flex-full-centered">
-      <div className={styles.avatar}>
-        <img
-          src={require(person.avatarRoute).default}
-          width={"160px"}
-          height={"160px"}
-          alt={
-            "Avatar of " +
-            person.completeName +
-            "working at QuantStack as a " +
-            person.position
-          }
-        ></img>
+      <img
+        src={person.avatarUrl}
+        className={styles.avatar}
+        alt={
+          "Avatar of " +
+          person.completeName +
+          "working at QuantStack as a " +
+          person.position
+        }
+      />
       </div>
-    </div>
-  );
-}
+    );
+  }

src/components/about/FourValues.tsx

@@ -12,11 +12,7 @@ export default function FourValues() {
           </h1>
         </div>
       </div>
-      <ul
-        className={
-          "row padding-none flex-full-centered" + " " + styles.row_with_margins
-        }
-      >
+      <ul className="row padding-none flex-full-centered row-with-margins">
         {valuesDetails.map((value, index) => (
           <li className="cards-list" key={index}>
             <div className="col">

src/components/about/LargePortraitCard.tsx

@@ -2,23 +2,10 @@ import styles from "./styles.module.css";
 import SocialMediaContacts from "./SocialMediaContacts";
 import DistinctionIcon from "@site/static/img/icons/Distinction.svg";
 import Link from "@docusaurus/Link";
-import React, { useState } from "react";
+import React from "react";
+import Avatar from "./Avatar";
+
 
-export function Avatar({ person, avatarUrl }) {
-  return (
-      <img
-        src={avatarUrl}
-        className={styles.avatar}
-        alt={
-          "Avatar of " +
-          person.completeName +
-          "working at QuantStack as a " +
-          person.position
-        }
-      />
-
-  );
-}
 
 export function Distinction({ person }) {
   if (person.distinctionTitle.length !== 0) {
@@ -40,7 +27,7 @@ export function Distinction({ person }) {
     );
   } else return <div></div>;
 }
-export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
+export default function LargePortraitCard({ person }) {
   return (
     <div className={styles.large_portrait_card}>
       <div className={"container"}>
@@ -52,26 +39,17 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
             <div className={styles.large_card_position}>{person.position}</div>
           </div>
         </div>
-        <div className={"row" + " " + styles.row_with_margin_bottom}>
+        <div className="row">
           <div className={"col col--3 col--offset-1 flex-full-centered"}>
             <div className="flex-full-centered">
-              <div style={{marginBottom:"var(--ifm-spacing-lg)"}}>
-              <img
-                src={avatarUrl}
-                className={styles.avatar}
-                alt={
-                  "Avatar of " +
-                  person.completeName +
-                  "working at QuantStack as a " +
-                  person.position
-                }
-              />
+              <div style={{ marginBottom: "var(--ifm-spacing-md)" }}>
+                <Avatar person={person} />
               </div>
             </div>
           </div>
           <div className="col col--6 col--offset-1">
             <div className={styles.bio_container}>
-              <BioComponent />
+              <person.BioComponent />
             </div>
           </div>
         </div>

src/components/about/SmallPortraitCard.tsx

@@ -3,6 +3,7 @@ import Popup from "reactjs-popup";
 import SocialMediaContacts from "./SocialMediaContacts";
 import { useRef, useState } from "react";
 import LargePortraitCard from "./LargePortraitCard";
+import Avatar from "./Avatar";
 
 const contentStyle = {
   background: "white",
@@ -36,7 +37,7 @@ function calculateOffsets(elementRef) {
   return offsets;
 }
 
-export function SmallPortraitCard({ person, avatarUrl, setOffsets }) {
+export function SmallPortraitCard({ person, setOffsets }) {
   const elementRef = useRef(null);
 
   return (
@@ -48,36 +49,18 @@ export function SmallPortraitCard({ person, avatarUrl, setOffsets }) {
         setOffsets(calculateOffsets(elementRef));
       }}
     >
-      <div className="flex-full-centered">
-        <div className={styles.avatar}>
-          <img
-            src={avatarUrl}
-            width={"160px"}
-            height={"160px"}
-            alt={
-              "Avatar of " +
-              person.completeName +
-              "working at QuantStack as a " +
-              person.position
-            }
-          />
-        </div>
-      </div>
-      <div className={styles.small_card_complete_name}>
+      <Avatar person={person} />
+      <div className={"flex-full-centered" + " " + styles.small_card_complete_name}>
         {person.completeName}
       </div>
-      <div className={styles.small_card_position}>{person.position}</div>
+      <div className={"flex-full-centered" + " " + styles.small_card_position}>{person.position}</div>
       <div style={{ marginTop: "var(--ifm-spacing-xl)" }}>
         <SocialMediaContacts person={person}></SocialMediaContacts>
       </div>
     </div>
   );
 }
-export default function PopupPortrait({
-  person,
-  avatarUrl,
-  subTeamBioComponent,
-}) {
+export default function PopupPortrait({ person }) {
   const [offsets, setOffsets] = useState([0, 0]);
   let [isPopupOpen, setIsPopupOpen] = useState(false);
 
@@ -87,19 +70,14 @@ export default function PopupPortrait({
         open={isPopupOpen}
         closeOnEscape={true}
         closeOnDocumentClick={true}
-        onClose={()=>setIsPopupOpen(false)}
-
+        onClose={() => setIsPopupOpen(false)}
         trigger={
           <div>
-            <SmallPortraitCard
-              person={person}
-              avatarUrl={avatarUrl}
-              setOffsets={setOffsets}
-            />
+            <SmallPortraitCard person={person} setOffsets={setOffsets} />
           </div>
         }
         onOpen={() => {
-          setIsPopupOpen(true)
+          setIsPopupOpen(true);
         }}
         contentStyle={contentStyle}
         overlayStyle={overlayStyle}
@@ -108,15 +86,14 @@ export default function PopupPortrait({
         offsetY={offsets[1]}
       >
         <div>
-          <button className="close-button" style={{position: "absolute", right:"0px"}}
-          onClick={()=>{setIsPopupOpen(false)
-
-          }}></button>
-          <LargePortraitCard
-            person={person}
-            avatarUrl={avatarUrl}
-            BioComponent={subTeamBioComponent}
-          ></LargePortraitCard>
+          <button
+            className="close-button"
+            style={{ position: "absolute", right: "0px" }}
+            onClick={() => {
+              setIsPopupOpen(false);
+            }}
+          ></button>
+          <LargePortraitCard person={person}></LargePortraitCard>
         </div>
       </Popup>
     </div>

src/components/about/SocialMediaContacts.tsx

@@ -1,24 +1,22 @@
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
 import GHPicture from "@site/static/img/socialmedias/GH.svg";
-import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg"
+import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg";
 import XPicture from "@site/static/img/socialmedias/X.svg";
 
-
 export default function SocialMediaContacts({ person }) {
   return (
     <>
-      <div className = "flex-full-centered">
-        <Link href={person.githubLink}>{<GHPicture/>}</Link>
-        <Link href={person.LinkedInLink}>
-          {<LinkedInPicture/>}
+      <div className="flex-full-centered">
+        <Link href={person.githubLink}>{<GHPicture />}</Link>
+        <Link href={person.LinkedInLink}>{<LinkedInPicture />}</Link>
+        <Link href={person.XLink}>{<XPicture />}</Link>
+      </div>
+      <div className="flex-full-centered">
+        <Link href={person.githubLink} className={styles.githubname}>
+          {person.githubName}
         </Link>
-        <Link href={person.XLink}>{<XPicture/>}</Link>
       </div>
-      <Link href={person.githubLink} className={styles.githubname}>
-        {" "}
-        {person.githubName}
-      </Link>
     </>
   );
 }

src/components/about/SubTeam.tsx

@@ -3,28 +3,19 @@ import PopupPortrait from "./SmallPortraitCard";
 
 export default function SubTeam({
   subTeamName,
-  subTeam,
-  subTeamAvatarsUrls,
-  subTeamBioComponents,
+  subTeam
 }) {
   return (
     <div className={styles.subteam_container}>
       <h2 className={"text--center"}> {subTeamName}</h2>
       <div className={"container"}>
-        <ul
-          className={
-            "row padding-none flex-full-centered" +
-            " " +
-            styles.row_with_margin_top
-          }
-        >
+        <ul className="row padding-none flex-full-centered row-with-margin-top">
           {subTeam.map((person, index) => (
             <li className="cards-list" key={index}>
               <div className="col">
                 <PopupPortrait
                   person={person}
-                  avatarUrl={subTeamAvatarsUrls[index]}
-                  subTeamBioComponent={subTeamBioComponents[index]}
+
                 />
               </div>
             </li>

src/components/about/Team/QScollaborators.ts

@@ -1,11 +1,8 @@
-import Romain from "@site/src/components/about/Team/Romain.md";
+import RomainMD from "@site/src/components/about/Team/Romain.md";
 import RomainAvatarUrl from "@site/static/img/avatars/Romain.png";
-import Serge from "@site/src/components/about/Team/Serge.md";
+import SergeMD from "@site/src/components/about/Team/Serge.md";
 import SergeAvatarUrl from "@site/static/img/avatars/Serge.png";
 
-export const QSCollaboratorsBioComponents = [Serge, Romain];
-export const QSCollaboratorsAvatarsUrls = [SergeAvatarUrl, RomainAvatarUrl];
-
 export const QSCollaboratorsTeam = [
   {
     completeName: "Serge Guelton",
@@ -18,10 +15,11 @@ export const QSCollaboratorsTeam = [
     LinkedInLink: "",
     XLink: "",
     githubName: "@serge-sans-paille",
-    avatarRoute: "@site/static/img/avatars/Serge@2x.jpg",
+    avatarUrl: SergeAvatarUrl,
     distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "QSCollaboratorsTeam",
+    BioComponent: SergeMD,
   },
   {
     completeName: "Romain Menegaux",
@@ -34,10 +32,11 @@ export const QSCollaboratorsTeam = [
     LinkedInLink: "https://www.linkedin.com/in/romain-menegaux-88a147134/",
     XLink: "https://twitter.com/RomainMenegaux",
     githubName: "@trmenegaux",
-    avatarRoute: "@site/static/img/avatars/Romain@2x.jpg",
+    avatarUrl: RomainAvatarUrl,
     distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "QSCollaboratorsTeam",
+    BioComponent: RomainMD
   },
 ];
 export default QSCollaboratorsTeam;