Use a dialog to display the LargePortraitCard.

package.json

@@ -23,11 +23,15 @@
     "@coreui/react": "^5.0.0",
     "@docusaurus/core": "^3.4.0",
     "@docusaurus/preset-classic": "^3.4.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@formspree/core": "^3.0.1",
     "@formspree/react": "^2.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@mdx-js/react": "^3.0.0",
+    "@mui/material": "^6.1.5",
+    "@mui/styles": "^6.1.5",
     "autoprefixer": "^10.4.19",
     "canvas": "^2.11.2",
     "clsx": "^2.0.0",
@@ -45,8 +49,9 @@
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.0.0",
     "react-markdown": "^9.0.1",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
     "react-slick": "^0.30.2",
-    "reactjs-popup": "^2.0.6",
     "request": "^2.88.2",
     "slick-carousel": "^1.8.1"
   },

src/components/about/LargePortraitCard.tsx

@@ -6,17 +6,28 @@ import React from "react";
 import Avatar from "./Avatar";
 
 export function Distinction({ person }) {
-  if (person.distinctionTitle.length !== 0) {
-    return person.distinctionTitle.map((distinction, index) => (
-      <div>
-        <Link href={person.distinctionLink[index]}>
-          <DistinctionIcon className={styles.distinction_icon} />
-          {distinction}
-        </Link>
-      </div>
-    ));
-  } else return <div></div>;
+  const HasPersonDisctinction = person.distinctionTitle.length !== 0;
+
+  return (
+    <div>
+      {HasPersonDisctinction ? (
+        <ul style={{paddingLeft: "0px"}}>
+          {person.distinctionTitle.map((distinction, index) => (
+            <li className="items-list" key={person.firstName}>
+              <div>
+                <Link href={person.distinctionLink[index]}>
+                  <DistinctionIcon className={styles.distinction_icon} />
+                  {distinction}
+                </Link>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
 }
+
 export default function LargePortraitCard({ person }) {
   return (
     <div className={styles.large_portrait_card}>

src/components/about/SmallPortraitCard.tsx

@@ -1,113 +1,37 @@
 import styles from "./styles.module.css";
-import Popup from "reactjs-popup";
-import SocialMediaContacts from "./SocialMediaContacts";
-import { useRef, useState } from "react";
-import LargePortraitCard from "./LargePortraitCard";
+import { useHistory } from "@docusaurus/router";
 import Avatar from "./Avatar";
 
-const contentStyle = {
-  background: "white",
-  borderRadius: "10px",
-};
+export function SmallPortraitCard({ person }) {
+  const history = useHistory();
 
-const overlayStyle = {
-  backgroundColor: "var(--ifm-background-color-popup-overlay)",
-  opacity: "0.4",
-  width: "100%",
-  height: "100%",
-};
+  function openDialog () {
+    history.push("/about/");
+    history.push("/about/" + person.firstName);
 
-function getCenterOfViewport() {
-  let horizontalCenter = Math.floor(window.innerWidth / 2);
-  let verticalCenter = Math.floor(window.innerHeight / 2);
-  return [horizontalCenter, verticalCenter];
-}
-
-function calculateOffsets(elementRef) {
-  const rect = elementRef.current.getBoundingClientRect();
-  const [xViewportCenter, yViewportCenter] = getCenterOfViewport();
-  const [xCardCenter, yCardCenter] = [
-    rect.left + rect.width / 2,
-    rect.top + rect.height / 2,
-  ];
-  const offsets = [
-    xViewportCenter - xCardCenter,
-    yViewportCenter - yCardCenter,
-  ];
-  return offsets;
-}
-
-export function SmallPortraitCard({ person, setOffsets }) {
-  const elementRef = useRef(null);
+  };
 
   return (
-    <div
-      ref={elementRef}
-      className={"card" + " " + styles.small_portrait_card}
-      id={person.firstName}
-      onClick={() => {
-        setOffsets(calculateOffsets(elementRef));
-      }}
-    >
-      <div className="card__header">
-        <Avatar person={person} />
-        <div
-          className={
-            "flex-full-centered" + " " + styles.small_card_complete_name
-          }
-        >
-          {person.completeName}
-        </div>
-      </div>
-      <div className="card__body">
-        <div
-          className={"flex-full-centered" + " " + styles.small_card_position}
-        >
-          {person.position}
-        </div>
-        <div style={{ marginTop: "var(--ifm-spacing-xl)" }}>
-          <SocialMediaContacts person={person}></SocialMediaContacts>
+    <div onClick={openDialog}>
+      <div className={"card" + " " + styles.small_portrait_card}>
+        <div className="card__header">
+          <Avatar person={person} />
+          <div
+            className={
+              "flex-full-centered" + " " + styles.small_card_complete_name
+            }
+          >
+            {person.completeName}
+          </div>
         </div>
-      </div>
-    </div>
-  );
-}
-export default function PopupPortrait({ person }) {
-  const [offsets, setOffsets] = useState([0, 0]);
-  let [isPopupOpen, setIsPopupOpen] = useState(false);
-
-  return (
-    <div>
-      <Popup
-        open={isPopupOpen}
-        closeOnEscape={true}
-        closeOnDocumentClick={true}
-        onClose={() => setIsPopupOpen(false)}
-        trigger={
-          <div>
-            <SmallPortraitCard person={person} setOffsets={setOffsets} />
+        <div className="card__body">
+          <div
+            className={"flex-full-centered" + " " + styles.small_card_position}
+          >
+            {person.position}
           </div>
-        }
-        onOpen={() => {
-          setIsPopupOpen(true);
-        }}
-        contentStyle={contentStyle}
-        overlayStyle={overlayStyle}
-        position={"center center"}
-        offsetX={offsets[0]}
-        offsetY={offsets[1]}
-      >
-        <div>
-          <button
-            className="close-button"
-            style={{ position: "absolute", right: "0px" }}
-            onClick={() => {
-              setIsPopupOpen(false);
-            }}
-          ></button>
-          <LargePortraitCard person={person}></LargePortraitCard>
         </div>
-      </Popup>
+      </div>
     </div>
   );
 }

src/components/about/SmallPortraitCardWithDialog.tsx

@@ -0,0 +1,46 @@
+import styles from "./styles.module.css";
+import React from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { useHistory } from "@docusaurus/router";
+
+import LargePortraitCard from "./LargePortraitCard";
+import { SmallPortraitCard } from "./SmallPortraitCard";
+
+export function SmallPortraitCardWithDialog({ person }) {
+  const history = useHistory();
+
+  function closeDialog() {
+    history.goBack()
+  }
+
+  return (
+    <Router>
+      <div>
+        <SmallPortraitCard person={person} />
+        <Switch>
+          <Route
+            path={"/about/" + person.firstName}
+            render={() => (
+              <>
+                <div className={styles.modal_overlay} onClick={closeDialog}>
+                  <div className={styles.modal_content}>
+                    <button
+                      className="close-button"
+                      style={{
+                        position: "absolute",
+                        top: "10px",
+                        right: "10px",
+                      }}
+                      onClick={closeDialog}
+                    />
+                    <LargePortraitCard person={person} />
+                  </div>
+                </div>
+              </>
+            )}
+          />
+        </Switch>
+      </div>
+    </Router>
+  );
+}

src/components/about/SubTeam.tsx

@@ -1,21 +1,18 @@
 import styles from "./styles.module.css";
-import PopupPortrait from "./SmallPortraitCard";
+import Example from "./PortraitDialog";
+import { SmallPortraitCardWithDialog } from "./SmallPortraitCardWithDialog";
 
-export default function SubTeam({
-  subTeamName,
-  subTeam
-}) {
+
+export default function SubTeam({ subTeamName, subTeam }) {
   return (
     <div className={styles.subteam_container}>
       <h2 className={"text--center"}> {subTeamName}</h2>
       <div className={"container"}>
         <ul className="row padding-none flex-full-centered row-with-margin-top">
           {subTeam.map((person, index) => (
-            <li className="cards-list" key={index}>
+            <li className="cards-list" key={person.firstName}>
               <div className="col">
-                <PopupPortrait
-                  person={person}
-                />
+                <SmallPortraitCardWithDialog person={person} />
               </div>
             </li>
           ))}

src/components/about/index.tsx

@@ -1,19 +1,21 @@
 import styles from "./styles.module.css";
-import  { coreTeam, QSCollaboratorsTeam, leadershipTeam } from "./Team/team";
+import { coreTeam, QSCollaboratorsTeam, leadershipTeam } from "./Team/team";
 import FourValues from "./FourValues";
 import SubTeam from "./SubTeam";
 import LinkToContact from "../home/LinkToContact";
 
+
 export function About() {
   return (
-    <div >
+    <div>
       <div className="main-container-with-margins">
         <div className="container upper-container-with-margin-top">
           <div className={"row"}>
             <div className={"col flex-full-centered"}>
               <FourValues />
             </div>
           </div>
+
 
           <div className="row">
             <div className="col col--10 col--offset-1">
@@ -24,16 +26,14 @@ export function About() {
               </div>
             </div>
           </div>
+
           <div className="row">
             <div className="col">
               <SubTeam
                 subTeamName={"The leadership team"}
                 subTeam={leadershipTeam}
               />
-              <SubTeam
-                subTeamName={"The core team"}
-                subTeam={coreTeam}
-              />
+              <SubTeam subTeamName={"The core team"} subTeam={coreTeam} />
               <SubTeam
                 subTeamName={"QuantStack collaborators"}
                 subTeam={QSCollaboratorsTeam}