Try to render the popup portrait on a dedicated page.

src/components/about/SubTeam.tsx

@@ -1,10 +1,12 @@
 import styles from "./styles.module.css";
 import PopupPortrait from "./SmallPortraitCard";
+import Link from "@docusaurus/Link";
+import { useLocation } from "@docusaurus/router";
+import { IProps } from ".";
+
+export default function SubTeam({ subTeamName, subTeam}) {
+  const location = useLocation().pathname;
 
-export default function SubTeam({
-  subTeamName,
-  subTeam
-}) {
   return (
     <div className={styles.subteam_container}>
       <h2 className={"text--center"}> {subTeamName}</h2>
@@ -13,10 +15,9 @@ export default function SubTeam({
           {subTeam.map((person, index) => (
             <li className="cards-list" key={index}>
               <div className="col">
-                <PopupPortrait
-                  person={person}
-
-                />
+                <Link href={location + person.firstName}>
+                 <PopupPortrait person={person}/>
+                </Link>
               </div>
             </li>
           ))}

src/components/about/index.tsx

@@ -1,12 +1,18 @@
 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";
+import PopupPortrait from "./SmallPortraitCard";
+import { Interface } from "readline";
+
+export interface IProps {
+popup : React.JSX.Element | null
+}
 
 export function About() {
   return (
-    <div >
+    <div>
       <div className="main-container-with-margins">
         <div className="container upper-container-with-margin-top">
           <div className={"row"}>
@@ -29,11 +35,10 @@ export function About() {
               <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}

src/pages/about.tsx → src/pages/about/Johan/index.tsx

@@ -1,13 +1,13 @@
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import {About} from "../components/about";
+import { About } from "@site/src/components/about";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 
 export default function AboutPage(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout>
-      <BrowserOnly>{() => <About />}</BrowserOnly>
+      <BrowserOnly>{() => <About/>}</BrowserOnly>
     </Layout>
   );
 }

src/pages/about/Sylvain/index.tsx

@@ -0,0 +1,20 @@
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { About } from "@site/src/components/about";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import { useLocation } from "@docusaurus/router";
+
+
+
+
+export default function AboutPage(): JSX.Element {
+  const location = useLocation().pathname;
+  console.log("In components:", location);
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout>
+      <BrowserOnly>{() => <About/>
+    }</BrowserOnly>
+    </Layout>
+  );
+}

src/pages/about/index.tsx

@@ -0,0 +1,13 @@
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { About } from "@site/src/components/about";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function AboutPage(): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout>
+      <BrowserOnly>{() => <About/>}</BrowserOnly>
+    </Layout>
+  );
+}