Add a capital letter at the beginning of the page name of the persons…

… of the team.

src/components/about/SmallPortraitCard.tsx

@@ -6,16 +6,22 @@ import LargePortraitCard from "./LargePortraitCard";
 import Avatar from "./Avatar";
 
 const contentStyle = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
   background: "white",
-  borderRadius: "10px",
-  opacity: 1.0
+  borderRadius: "20px",
+  opacity: 1.0,
+  zIndex: "4000"
 };
 
 const overlayStyle = {
   backgroundColor: "var(--ifm-background-color-popup-overlay)",
   opacity: 0.4,
   width: "100%",
   height: "100%",
+  zIndex: "1000",
 };
 
 function getCenterOfViewport() {
@@ -68,9 +74,7 @@ export function SmallPortraitCard({ person, setOffsets }) {
         >
           {person.position}
         </div>
-        <div style={{ marginTop: "var(--ifm-spacing-xl)" }}>
-          <SocialMediaContacts person={person}></SocialMediaContacts>
-        </div>
+
       </div>
     </div>
   );

src/components/about/SubTeam.tsx

@@ -4,7 +4,10 @@ import Link from "@docusaurus/Link";
 import { useLocation } from "@docusaurus/router";
 
 export default function SubTeam({ subTeamName, subTeam }) {
-  const firstName = useLocation().pathname.split("/about/")[1];
+  let firstName = useLocation().pathname.split("/about/")[1];
+  console.log('First name before transformation:', firstName);
+
+
   return (
     <div className={styles.subteam_container}>
       <h2 className={"text--center"}> {subTeamName}</h2>
@@ -15,11 +18,11 @@ export default function SubTeam({ subTeamName, subTeam }) {
               !void 0 && (
                 <li className="cards-list" key={index}>
                   <div className="col">
-                    <Link href={`/about/${person.firstName.toLowerCase()}`}>
+                    <Link href={`/about/${person.firstName}`}>
                       <PopupPortrait
                         person={person}
                         isPopupOpen={
-                          firstName === person.firstName.toLowerCase()
+                          firstName === person.firstName
                         }
                       />
                     </Link>

src/components/about/styles.module.css

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

src/pages/about/sylvain.tsx → src/pages/about/Trung.tsx

@@ -1,11 +1,8 @@
 import Layout from "@theme/Layout";
 import { About } from "@site/src/components/about";
 import BrowserOnly from "@docusaurus/BrowserOnly";
-import { useRef } from "react";
 
 export default function AboutPage(): JSX.Element {
-  const elementRef = useRef(null);
-  console.log('elementRef:', elementRef)
   return (
     <Layout>
       <BrowserOnly>{() => <About/>}</BrowserOnly>