Try to render the popup portrait on a dedicated page.

.github/workflows/static.yml

@@ -4,10 +4,10 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["master"]
+    branches: "open_the_popup_portrait_on_a_specific_page"
   pull_request:
     branches:
-      - '*'
+      - "open_the_popup_portrait_on_a_specific_page"
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 
@@ -19,6 +19,24 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
+replace_string:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set environment variable for branch name
+        env:
+          BRANCH_NAME: ${{ github.ref_name }}
+          REPO_NAME: ${{github.repository_name}}
+
+        run: echo "Branch name is $BRANCH_NAME"
+
+      - name: Replace 'BaseUrl' with branch name in file
+        run: |
+          sed -i "s/BaseUrl/${BRANCH_NAME}/g" docusaurus.config.ts
+
   build:
     runs-on: ubuntu-latest
     steps:
@@ -38,8 +56,8 @@ jobs:
           path: ./build
 
   deploy:
-    needs: build
-    if: github.ref == 'refs/heads/master'
+    needs: build, replace_string
+    if: github.ref == 'refs/heads/open_the_popup_portrait_on_a_specific_page'
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}

src/components/about/LargePortraitCard.tsx

@@ -8,7 +8,7 @@ import Avatar from "./Avatar";
 export function Distinction({ person }) {
   if (person.distinctionTitle.length !== 0) {
     return person.distinctionTitle.map((distinction, index) => (
-      <div>
+      <div key={index}>
         <Link href={person.distinctionLink[index]}>
           <DistinctionIcon className={styles.distinction_icon} />
           {distinction}

src/components/about/SmallPortraitCard.tsx

@@ -6,20 +6,28 @@ import LargePortraitCard from "./LargePortraitCard";
 import Avatar from "./Avatar";
 
 const contentStyle = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
   background: "white",
-  borderRadius: "10px",
+  borderRadius: "20px",
+  opacity: 1.0,
+  zIndex: "4000"
 };
 
 const overlayStyle = {
   backgroundColor: "var(--ifm-background-color-popup-overlay)",
-  opacity: "0.4",
+  opacity: 0.4,
   width: "100%",
   height: "100%",
+  zIndex: "1000",
 };
 
 function getCenterOfViewport() {
   let horizontalCenter = Math.floor(window.innerWidth / 2);
   let verticalCenter = Math.floor(window.innerHeight / 2);
+  console.log("Center of viewport:", [horizontalCenter, verticalCenter]);
   return [horizontalCenter, verticalCenter];
 }
 
@@ -34,6 +42,7 @@ function calculateOffsets(elementRef) {
     xViewportCenter - xCardCenter,
     yViewportCenter - yCardCenter,
   ];
+  console.log("Offsets are:", offsets);
   return offsets;
 }
 
@@ -65,30 +74,26 @@ export function SmallPortraitCard({ person, setOffsets }) {
         >
           {person.position}
         </div>
-        <div style={{ marginTop: "var(--ifm-spacing-xl)" }}>
-          <SocialMediaContacts person={person}></SocialMediaContacts>
-        </div>
+
       </div>
     </div>
   );
 }
-export default function PopupPortrait({ person }) {
+export default function PopupPortrait({ person, ...props }) {
   const [offsets, setOffsets] = useState([0, 0]);
-  let [isPopupOpen, setIsPopupOpen] = useState(false);
-
+  let [isPopupOpen, setIsPopupOpen] = useState(props.isPopupOpen);
   return (
     <div>
+      <div>
+        <SmallPortraitCard person={person} setOffsets={setOffsets} />
+      </div>
       <Popup
         open={isPopupOpen}
         closeOnEscape={true}
         closeOnDocumentClick={true}
         onClose={() => setIsPopupOpen(false)}
-        trigger={
-          <div>
-            <SmallPortraitCard person={person} setOffsets={setOffsets} />
-          </div>
-        }
         onOpen={() => {
+          props.isPopupOpen = true;
           setIsPopupOpen(true);
         }}
         contentStyle={contentStyle}

src/components/about/SocialMediaContacts.tsx

@@ -27,9 +27,9 @@ export default function SocialMediaContacts({ person }) {
         )}
       </div>
       <div className="flex-full-centered">
-        <Link href={person.githubLink} className={styles.githubname}>
+        {/* <Link href={person.githubLink} className={styles.githubname}>
           {person.githubName}
-        </Link>
+        </Link> */}
       </div>
     </>
   );

src/components/about/SubTeam.tsx

@@ -1,24 +1,35 @@
 import styles from "./styles.module.css";
 import PopupPortrait from "./SmallPortraitCard";
+import Link from "@docusaurus/Link";
+import { useLocation } from "@docusaurus/router";
+
+export default function SubTeam({ subTeamName, subTeam }) {
+  let firstName = useLocation().pathname.split("/about/")[1];
+  console.log('First name before transformation:', firstName);
+
 
-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}>
-              <div className="col">
-                <PopupPortrait
-                  person={person}
-                />
-              </div>
-            </li>
-          ))}
+          {subTeam.map(
+            (person, index) =>
+              !void 0 && (
+                <li className="cards-list" key={index}>
+                  <div className="col">
+                    <Link href={`/about/${person.firstName}`}>
+                      <PopupPortrait
+                        person={person}
+                        isPopupOpen={
+                          firstName === person.firstName
+                        }
+                      />
+                    </Link>
+                  </div>
+                </li>
+              )
+          )}
         </ul>
       </div>
     </div>

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/components/about/styles.module.css

@@ -217,6 +217,8 @@ div .join_the_team_text {
   .large_portrait_card {
     width: 1000px;
     padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
+    border-radius: 10px;
+
   }
 
   .subteam_container {

src/pages/about/Alexis.tsx

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

src/pages/about/Anastasiia.tsx

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

src/pages/about/Andreas.tsx

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

src/pages/about/Antoine.tsx

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

src/pages/about/Anutosh.tsx

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

src/pages/about/Darian.tsx

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

src/pages/about/David.tsx

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

src/pages/about/Denisa.tsx

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

src/pages/about/Florence.tsx

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

src/pages/about/Gabriela.tsx

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

src/pages/about/Greg.tsx

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

src/pages/about/Hind.tsx

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

src/pages/about/Ian.tsx

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