Use a dialog to display the LargePortraitCard.

package.json

@@ -25,11 +25,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",
@@ -47,8 +51,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",
     "sharp": "^0.34.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 key={index}>
-        <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/LargePortraitCardPage.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import { useHistory, useLocation } from '@docusaurus/router';
+import { useEffect } from 'react';
+import { Route } from 'react-router-dom';
+import { About } from '@site/src/components/about'
+import LargePortraitCard from '@site/src/components/about/LargePortraitCard';
+import { getTeamByPersonName } from '@site/src/components/about';
+import styles from "@site/src/components/about/styles.module.css";
+
+export default function LargePortraitCardPage() {
+  const location = useLocation();
+  const history = useHistory();
+
+  useEffect(() => {
+    if (location.state?.fromAbout) {
+      window.scrollTo({ top: location.state.scrollY ?? 0, behavior: 'auto' });
+    }
+  }, []);
+
+  const handleOverlayClick = () => {
+    const scrollY = location.state?.scrollY;
+    setTimeout(() => {
+      if (scrollY !== undefined) {
+        window.scrollTo({ top: scrollY, behavior: 'auto' });
+      }
+    }, 0);
+      history.replace('/about');
+  };
+
+  const handleClose = () => {
+    const scrollY = location.state?.scrollY;
+    if (location.state?.fromAbout) {
+      history.replace('/about');
+
+      setTimeout(() => {
+        if (scrollY !== undefined) {
+          window.scrollTo({ top: scrollY, behavior: 'auto' });
+        }
+      }, 0);
+    } else {
+      history.goBack();
+    }
+  }
+  return (
+    <Layout>
+      <About />
+      <Route
+        path="/about/:completeName"
+        render={({ history, match }) => {
+          const { completeName } = match.params; /* extract the dynamic part from the url i.e. the completeName*/
+          const teamMembers = getTeamByPersonName(completeName);
+          const person = teamMembers.find((person) => person.completeName.replace(/\s+/g, '').normalize("NFD").replace(/[\u0300-\u036f]/g, '') === completeName);
+          if (!person) return null;
+
+          return (
+            <div className={styles.modal_overlay} onClick={handleOverlayClick}>
+              <div
+                className={styles.modal_content}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <button
+                  className="close-button"
+                  style={{
+                    position: "absolute",
+                    top: "10px",
+                    right: "10px",
+                  }}
+                  onClick={handleClose}
+                />
+                <LargePortraitCard person={person} />
+              </div>
+            </div>
+          );
+        }}
+      />
+    </Layout>
+  )
+}
+

src/components/about/SmallPortraitCard.tsx

@@ -1,113 +1,42 @@
 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 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);
+  function openDialog() {
+    const completeName = person.completeName.replace(/\s+/g, '');
+    const completeNameWithoutAccents = completeName
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, '');
+    history.push({
+      pathname: `/about/${completeNameWithoutAccents}`,
+      state: { fromAbout: true, scrollY: window.scrollY, },
+    });
+  }
 
   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/SubTeam.tsx

@@ -1,21 +1,16 @@
 import styles from "./styles.module.css";
-import PopupPortrait from "./SmallPortraitCard";
+import { SmallPortraitCard } from "./SmallPortraitCard";
 
-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}
-                />
+                <SmallPortraitCard person={person} />
               </div>
             </li>
           ))}