Keep on working on style and css classes.

Add svg pictures for the mobile menu.
Fix portrait pop up for mobile screen sizes.

Author: HaudinFlorence

package-lock.json

@@ -42,6 +42,7 @@
     "probe-image-size": "^7.2.3",
     "python": "^0.0.4",
     "react": "^18.0.0",
+    "react-bootstrap": "^2.10.4",
     "react-dom": "^18.0.0",
     "react-markdown": "^9.0.1",
     "react-slick": "^0.30.2",

package.json

@@ -11,7 +11,7 @@ export default function Avatar({ person }) {
           height={"160px"}
           alt={
             "Avatar of " +
-            person.CompleteName +
+            person.completeName +
             "working at QuantStack as a " +
             person.position
           }

src/components/about/Avatar.tsx

@@ -4,7 +4,7 @@ import { valuesDetails } from "./Values/valuesDetails";
 
 export default function FourValues() {
   return (
-    <div className={styles.four_values_container}>
+    <div>
       <div className="row">
         <div className="col">
           <h1 className={"padding-none" + " " + "full-flex-centered"}>
@@ -14,21 +14,13 @@ export default function FourValues() {
       </div>
       <ul
         className={
-          "row" +
-          " " +
-          "padding-none" +
-          " " +
-          styles.row_with_margins +
-          " " +
-          "flex-full-centered"
+          "row padding-none flex-full-centered" + " " + styles.row_with_margins
         }
       >
         {valuesDetails.map((value, index) => (
           <li className="cards-list" key={index}>
             <div className="col">
-              <div className={styles.value_card_container}>
-                <ValueCard value={value} />
-              </div>
+              <ValueCard value={value} />
             </div>
           </li>
         ))}

src/components/about/FourValues.tsx

@@ -2,6 +2,23 @@ import styles from "./styles.module.css";
 import SocialMediaContacts from "./SocialMediaContacts";
 import DistinctionIcon from "@site/static/img/icons/Distinction.svg";
 import Link from "@docusaurus/Link";
+import React, { useState } from "react";
+
+export function Avatar({ person, avatarUrl }) {
+  return (
+      <img
+        src={avatarUrl}
+        className={styles.avatar}
+        alt={
+          "Avatar of " +
+          person.completeName +
+          "working at QuantStack as a " +
+          person.position
+        }
+      />
+   
+  );
+}
 
 export function Distinction({ person }) {
   if (person.distinctionTitle.length !== 0) {
@@ -27,33 +44,29 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
   return (
     <div className={styles.large_portrait_card}>
       <div className={"container"}>
-        <div
-          className={
-            "row" + " " + "padding-none" + " " + styles.row_with_margins
-          }
-        >
+        <div className={"row padding-none"}>
           <div className="col col--12 col--offset-1">
             <div className={styles.large_card_complete_name}>
               {person.completeName}
             </div>
             <div className={styles.large_card_position}>{person.position}</div>
           </div>
         </div>
-        <div className="row" style={{ marginBottom: "var(--ifm-spacing-4xl)" }}>
-          <div
-            className={"col col--3 col--offset-1" + " " + "flex-full-centered"}
-          >
+        <div className={"row" + " " + styles.row_with_margin_bottom}>
+          <div className={"col col--3 col--offset-1 flex-full-centered"}>
             <div className="flex-full-centered">
+              <div style={{marginBottom:"var(--ifm-spacing-lg)"}}>
               <img
                 src={avatarUrl}
                 className={styles.avatar}
                 alt={
                   "Avatar of " +
-                  person.CompleteName +
+                  person.completeName +
                   "working at QuantStack as a " +
                   person.position
                 }
               />
+              </div>
             </div>
           </div>
           <div className="col col--6 col--offset-1">