Add the pages for the different persons of the team and update the style.

Author: HaudinFlorence

src/components/about/SmallPortraitCardWithDialog.tsx

@@ -23,8 +23,7 @@ const modalContent = {
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)",
-  padding: "20px",
-  backgroundColor: "var(--ifm-color-primary-p0)",
+  backgroundColor: "white",
   border: "1px solid #ccc",
   boxShadow: "0 8px 16px rgba(0,0,0,0.2)",
   borderRadius: "10px",

src/components/about/styles.module.css

@@ -1,4 +1,3 @@
-
 .small_portrait_card {
   width: 279px;
   height: 320px;
@@ -148,26 +147,6 @@ div .join_the_team_text {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
 
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000; /* Ensure it's above other content */
-}
-
-.popup {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-}
-
 @media only screen and (max-width: 996px) {
   /*Mobile*/
   .value_card {
@@ -196,29 +175,6 @@ div .join_the_team_text {
     padding: 0;
   }
 
-  .large_portrait_card {
-    width: 100%;
-    height: 100%;
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
-    
-  }
-  .modal_with_large_portrait_card {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: 20px;
-    background-color: var(--ifm-color-primary-p0);
-    border: 1px solid #ccc;
-    z-index: 1000;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    border-radius: 10px;
-  }
-
-  .large_portrait_card p {
-    text-align: justify;
-  }
-
   .subteam_container {
     margin: var(--ifm-spacing-3xl) var(--ifm-spacing-2xl);
   }
@@ -241,6 +197,24 @@ div .join_the_team_text {
   }
 }
 
+@media only screen and (max-width: 500px) {
+  /*Mobile*/
+  .large_portrait_card {
+    width: 90vw;
+    overflow: auto;
+    padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
+  }
+}
+
+@media (min-width: 500px) and (max-width: 996px) {
+  /*Tablet*/
+  .large_portrait_card {
+    width: 80vw;
+    overflow: auto;
+    padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
+  }
+}
+
 @media only screen and (min-width: 996px) {
   /*Desktop*/
   .value_card {
@@ -265,7 +239,7 @@ div .join_the_team_text {
   }
 
   .large_portrait_card {
-    width: 1000px;
+    width: 960px;
     padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
   }
 

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/Arjun.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>
+  );
+}