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 }}

docusaurus.config.ts

@@ -12,11 +12,11 @@ const config: Config = {
   url: "https://quantstack.net/",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/",
+  baseUrl: "/quantstack.github.io/",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: "/QuantStack/", // Usually your GitHub org/user name.
+  organizationName: "/HaudinFlorence/", // Usually your GitHub org/user name.
   projectName: "quantstack.github.io", // Usually your repo name.
 
   onBrokenLinks: "throw",
@@ -64,7 +64,7 @@ const config: Config = {
       title: "",
       logo: {
         alt: "QuantStack Logo",
-        src: "img/quantstack/logo-website.svg"
+        src: "img/quantstack/logo-website.svg",
       },
 
       items: [
@@ -131,96 +131,10 @@ const config: Config = {
       ],
     },
 
-    footer: {
-      links: [
-        {
-          title: " ",
-          items: [
-            {
-              label: " ",
-              className: "astronaut-footer",
-              href: "/home",
-            },
-          ],
-        },
-
-        {
-          title: "Follow QuantStack on",
-          items: [
-            {
-              label: "GitHub",
-              className: "github-icon",
-              href: "https://github.com/QuantStack",
-            },
-            {
-              label: "LinkedIn",
-              className: "linkedin-icon",
-              href: "https://www.linkedin.com/company/quantstack/mycompany/",
-            },
-            {
-              label: "X",
-              className: "x-icon",
-              href: "https://twitter.com/QuantStack",
-            },
-          ],
-        },
-        {
-          title: "Menu ",
-          items: [
-            {
-              label: "Home",
-              href: "/home/",
-            },
-            {
-              label: "Projects",
-              href: "/projects/",
-            },
-            {
-              label: "Services",
-              href: "/services/",
-            },
-            {
-              label: "About",
-              href: "/about/",
-            },
-            {
-              label: "Careers",
-              href: "/careers/",
-            },
-            {
-              label: "Blog",
-              href: "/blog/",
-            },
-          ],
-        },
-
-
-        {
-          title: "QuantStack office ",
-          items: [
-            {
-              html: `
-
-                  <div class="div .address">
-                      16, avenue Curti <br/>
-                      94100 Saint-Maur-des-Fossés <br/>
-                      France
-                  </div>
-
-                    `,
-            },
-          ],
-        },
-      ],
-
-      copyright: copyright,
-    },
-
-      colorMode: {
-        defaultMode: 'light',
-        disableSwitch: true,
-        respectPrefersColorScheme: false,
-
+    colorMode: {
+      defaultMode: "light",
+      disableSwitch: true,
+      respectPrefersColorScheme: false,
     },
 
     prism: {

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

@@ -4,23 +4,24 @@ import SocialMediaContacts from "./SocialMediaContacts";
 import { useRef, useState } from "react";
 import LargePortraitCard from "./LargePortraitCard";
 import Avatar from "./Avatar";
-import Link from "@docusaurus/Link";
 
 const contentStyle = {
   background: "white",
   borderRadius: "10px",
+  opacity: 1.0
 };
 
 const overlayStyle = {
   backgroundColor: "var(--ifm-background-color-popup-overlay)",
-  opacity: "0.4",
+  opacity: 0.4,
   width: "100%",
   height: "100%",
 };
 
 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];
 }
 
@@ -35,6 +36,7 @@ function calculateOffsets(elementRef) {
     xViewportCenter - xCardCenter,
     yViewportCenter - yCardCenter,
   ];
+  console.log("Offsets are:", offsets);
   return offsets;
 }
 
@@ -73,23 +75,21 @@ export function SmallPortraitCard({ person, setOffsets }) {
     </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

@@ -8,14 +8,14 @@ export default function SocialMediaContacts({ person }) {
   return (
     <>
       <div className="flex-full-centered">
-        <Link href={person.githubLink}>{<GHPicture />}</Link>
+        {/* <Link href={person.githubLink}>{<GHPicture />}</Link>
         <Link href={person.LinkedInLink}>{<LinkedInPicture />}</Link>
-        <Link href={person.XLink}>{<XPicture />}</Link>
+        <Link href={person.XLink}>{<XPicture />}</Link> */}
       </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,25 +1,32 @@
 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
-}) {
+export default function SubTeam({ subTeamName, subTeam }) {
+  const firstName = useLocation().pathname.split("/about/")[1];
   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.toLowerCase()}`}>
+                      <PopupPortrait
+                        person={person}
+                        isPopupOpen={
+                          firstName === person.firstName.toLowerCase()
+                        }
+                      />
+                    </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

@@ -210,6 +210,7 @@ div .join_the_team_text {
   .large_portrait_card {
     width: 1000px;
     padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
+    background-color: orange;
   }
 
   .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>
+  );
+}