From 046026cbf8d0e7151c3ade351571c8c1f246d0de Mon Sep 17 00:00:00 2001
From: HaudinFlorence <haudin.florence@gmail.com>
Date: Tue, 16 Jul 2024 00:55:13 +0200
Subject: [PATCH] Update the team data to include the avatarUrl and the
 BioComponent in the objects describing members of teams. Remove unused pages
 and components. Keep on fixing style.

---
 docusaurus.config.ts                          |   4 +-
 src/components/about/ArrowLeftHeader.tsx      |  13 --
 src/components/about/Avatar.tsx               |  30 ++-
 src/components/about/FourValues.tsx           |   6 +-
 src/components/about/LargePortraitCard.tsx    |  38 +---
 src/components/about/SmallPortraitCard.tsx    |  57 ++---
 src/components/about/SocialMediaContacts.tsx  |  20 +-
 src/components/about/SubTeam.tsx              |  15 +-
 src/components/about/Team/QScollaborators.ts  |  13 +-
 src/components/about/Team/coreTeam.ts         | 177 +++++++---------
 src/components/about/Team/leadershipTeam.ts   |  61 ++----
 src/components/about/ValueCard.tsx            |   4 +-
 src/components/about/index.tsx                |  23 +-
 src/components/about/styles.module.css        | 107 ++++------
 src/components/blog/index.tsx                 |   7 +-
 src/components/blog/styles.module.css         |   3 +-
 src/components/careers/index.tsx              |   7 +-
 src/components/careers/styles.module.css      |  91 ++++----
 src/components/contact/index.tsx              |  27 ++-
 src/components/contact/styles.module.css      |  58 ++++--
 src/components/home/Hero/index.tsx            |  33 ++-
 src/components/home/Hero/styles.module.css    |   5 +-
 .../home/LearnMore/styles.module.css          |   9 +-
 .../home/ProjectsOverview/Computing.tsx       |   2 +-
 .../home/ProjectsOverview/Jupyter.tsx         |   2 +-
 .../home/ProjectsOverview/SpecialProjects.tsx |   2 +-
 .../home/ProjectsOverview/SupplyChain.tsx     |   4 +-
 src/components/home/WhatWeDo/Topics.tsx       |   2 +-
 src/components/home/WhatWeDo/TopicsCard.tsx   |   2 +-
 src/components/home/WhatWeDo/index.tsx        |  22 +-
 .../home/WhatWeDo/styles.module.css           |   4 +-
 src/components/projects/AllProjects.tsx       |   4 +-
 src/components/projects/Header.tsx            |  14 +-
 src/components/projects/ProjectCard.tsx       |  60 +++---
 src/components/projects/ProjectPage.tsx       |  30 ---
 src/components/projects/styles.module.css     |  15 +-
 src/components/services/Header.tsx            |   1 -
 src/components/services/SpecialProjects.tsx   |  17 +-
 src/components/services/Support.tsx           |  11 +-
 src/components/services/styles.module.css     |  20 +-
 src/css/custom.css                            | 197 +++++++++---------
 src/pages/about/Alexis.tsx                    |  15 --
 src/pages/about/Anastasiia.tsx                |  14 --
 src/pages/about/Andreas.tsx                   |  14 --
 src/pages/about/Anutosh.tsx                   |  14 --
 src/pages/about/Darian.tsx                    |  14 --
 src/pages/about/David.tsx                     |  14 --
 src/pages/about/Denisa.tsx                    |  14 --
 src/pages/about/Florence.tsx                  |  14 --
 src/pages/about/Gabriela.tsx                  |  14 --
 src/pages/about/Greg.tsx                      |  14 --
 src/pages/about/Hind.tsx                      |  14 --
 src/pages/about/Ian.tsx                       |  14 --
 src/pages/about/Isabel.tsx                    |  14 --
 src/pages/about/Jeremy.tsx                    |  14 --
 src/pages/about/Joel.tsx                      |  14 --
 src/pages/about/Johan.tsx                     |  14 --
 src/pages/about/Julien.tsx                    |  14 --
 src/pages/about/Kerim.tsx                     |  14 --
 src/pages/about/Martin.tsx                    |  14 --
 src/pages/about/Meriem.tsx                    |  14 --
 src/pages/about/Nicolas.tsx                   |  14 --
 src/pages/about/Nour.tsx                      |  14 --
 src/pages/about/Romain.tsx                    |  14 --
 src/pages/about/Serge.tsx                     |  14 --
 src/pages/about/Sylvain.tsx                   |  14 --
 src/pages/about/Thorsten.tsx                  |  14 --
 src/pages/about/Trung.tsx                     |  14 --
 src/pages/projects/condaforge.tsx             |   9 -
 src/pages/projects/jupyter.tsx                |   9 -
 src/pages/projects/robotics.tsx               |   9 -
 src/pages/projects/xtensorxsimd.tsx           |   9 -
 72 files changed, 535 insertions(+), 1097 deletions(-)
 delete mode 100644 src/components/about/ArrowLeftHeader.tsx
 delete mode 100644 src/components/projects/ProjectPage.tsx
 delete mode 100644 src/pages/about/Alexis.tsx
 delete mode 100644 src/pages/about/Anastasiia.tsx
 delete mode 100644 src/pages/about/Andreas.tsx
 delete mode 100644 src/pages/about/Anutosh.tsx
 delete mode 100644 src/pages/about/Darian.tsx
 delete mode 100644 src/pages/about/David.tsx
 delete mode 100644 src/pages/about/Denisa.tsx
 delete mode 100644 src/pages/about/Florence.tsx
 delete mode 100644 src/pages/about/Gabriela.tsx
 delete mode 100644 src/pages/about/Greg.tsx
 delete mode 100644 src/pages/about/Hind.tsx
 delete mode 100644 src/pages/about/Ian.tsx
 delete mode 100644 src/pages/about/Isabel.tsx
 delete mode 100644 src/pages/about/Jeremy.tsx
 delete mode 100644 src/pages/about/Joel.tsx
 delete mode 100644 src/pages/about/Johan.tsx
 delete mode 100644 src/pages/about/Julien.tsx
 delete mode 100644 src/pages/about/Kerim.tsx
 delete mode 100644 src/pages/about/Martin.tsx
 delete mode 100644 src/pages/about/Meriem.tsx
 delete mode 100644 src/pages/about/Nicolas.tsx
 delete mode 100644 src/pages/about/Nour.tsx
 delete mode 100644 src/pages/about/Romain.tsx
 delete mode 100644 src/pages/about/Serge.tsx
 delete mode 100644 src/pages/about/Sylvain.tsx
 delete mode 100644 src/pages/about/Thorsten.tsx
 delete mode 100644 src/pages/about/Trung.tsx
 delete mode 100644 src/pages/projects/condaforge.tsx
 delete mode 100644 src/pages/projects/jupyter.tsx
 delete mode 100644 src/pages/projects/robotics.tsx
 delete mode 100644 src/pages/projects/xtensorxsimd.tsx

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 880c9e7bd..254e2800f 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -138,7 +138,7 @@ const config: Config = {
           items: [
             {
               label: " ",
-              className: "quantstack-astronaut-footer",
+              className: "astronaut-footer",
               href: "/home",
             },
           ],
@@ -201,7 +201,7 @@ const config: Config = {
             {
               html: `
               
-               <div class="div .quantstack-address">
+                  <div class="div .address">
                       16, avenue Curti <br/>
                       94100 Saint-Maur-des-Fossés <br/>
                       France
diff --git a/src/components/about/ArrowLeftHeader.tsx b/src/components/about/ArrowLeftHeader.tsx
deleted file mode 100644
index 81972a597..000000000
--- a/src/components/about/ArrowLeftHeader.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Link from "@docusaurus/Link";
-
-import ArrowLeft from "@site/static/img/icons/ArrowLeft.svg"
-
-export default function ArrowLeftHeader({ route }) {
-  return (
-    <div className="header-page-mobile">
-      <Link href={route}>
-        <ArrowLeft />
-      </Link>
-    </div>
-  );
-}
diff --git a/src/components/about/Avatar.tsx b/src/components/about/Avatar.tsx
index ccfa12038..933b4ca30 100644
--- a/src/components/about/Avatar.tsx
+++ b/src/components/about/Avatar.tsx
@@ -1,22 +1,18 @@
 import styles from "./styles.module.css";
-import Link from "@docusaurus/Link";
 
 export default function Avatar({ person }) {
-  return (
+    return (
     <div className="flex-full-centered">
-      <div className={styles.avatar}>
-        <img
-          src={require(person.avatarRoute).default}
-          width={"160px"}
-          height={"160px"}
-          alt={
-            "Avatar of " +
-            person.completeName +
-            "working at QuantStack as a " +
-            person.position
-          }
-        ></img>
+      <img
+        src={person.avatarUrl}
+        className={styles.avatar}
+        alt={
+          "Avatar of " +
+          person.completeName +
+          "working at QuantStack as a " +
+          person.position
+        }
+      />
       </div>
-    </div>
-  );
-}
+    );
+  }
\ No newline at end of file
diff --git a/src/components/about/FourValues.tsx b/src/components/about/FourValues.tsx
index 1e126ad94..c34c1f266 100644
--- a/src/components/about/FourValues.tsx
+++ b/src/components/about/FourValues.tsx
@@ -12,11 +12,7 @@ export default function FourValues() {
           </h1>
         </div>
       </div>
-      <ul
-        className={
-          "row padding-none flex-full-centered" + " " + styles.row_with_margins
-        }
-      >
+      <ul className="row padding-none flex-full-centered row-with-margins">
         {valuesDetails.map((value, index) => (
           <li className="cards-list" key={index}>
             <div className="col">
diff --git a/src/components/about/LargePortraitCard.tsx b/src/components/about/LargePortraitCard.tsx
index 880928d43..0079d5a4f 100644
--- a/src/components/about/LargePortraitCard.tsx
+++ b/src/components/about/LargePortraitCard.tsx
@@ -2,23 +2,10 @@ 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";
+import React from "react";
+import Avatar from "./Avatar";
+
 
-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) {
@@ -40,7 +27,7 @@ export function Distinction({ person }) {
     );
   } else return <div></div>;
 }
-export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
+export default function LargePortraitCard({ person }) {
   return (
     <div className={styles.large_portrait_card}>
       <div className={"container"}>
@@ -52,26 +39,17 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
             <div className={styles.large_card_position}>{person.position}</div>
           </div>
         </div>
-        <div className={"row" + " " + styles.row_with_margin_bottom}>
+        <div className="row">
           <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 +
-                  "working at QuantStack as a " +
-                  person.position
-                }
-              />
+              <div style={{ marginBottom: "var(--ifm-spacing-md)" }}>
+                <Avatar person={person} />
               </div>
             </div>
           </div>
           <div className="col col--6 col--offset-1">
             <div className={styles.bio_container}>
-              <BioComponent />
+              <person.BioComponent />
             </div>
           </div>
         </div>
diff --git a/src/components/about/SmallPortraitCard.tsx b/src/components/about/SmallPortraitCard.tsx
index 8ae263617..3bc68a405 100644
--- a/src/components/about/SmallPortraitCard.tsx
+++ b/src/components/about/SmallPortraitCard.tsx
@@ -3,6 +3,7 @@ import Popup from "reactjs-popup";
 import SocialMediaContacts from "./SocialMediaContacts";
 import { useRef, useState } from "react";
 import LargePortraitCard from "./LargePortraitCard";
+import Avatar from "./Avatar";
 
 const contentStyle = {
   background: "white",
@@ -36,7 +37,7 @@ function calculateOffsets(elementRef) {
   return offsets;
 }
 
-export function SmallPortraitCard({ person, avatarUrl, setOffsets }) {
+export function SmallPortraitCard({ person, setOffsets }) {
   const elementRef = useRef(null);
 
   return (
@@ -48,36 +49,18 @@ export function SmallPortraitCard({ person, avatarUrl, setOffsets }) {
         setOffsets(calculateOffsets(elementRef));
       }}
     >
-      <div className="flex-full-centered">
-        <div className={styles.avatar}>
-          <img
-            src={avatarUrl}
-            width={"160px"}
-            height={"160px"}
-            alt={
-              "Avatar of " +
-              person.completeName +
-              "working at QuantStack as a " +
-              person.position
-            }
-          />
-        </div>
-      </div>
-      <div className={styles.small_card_complete_name}>
+      <Avatar person={person} />
+      <div className={"flex-full-centered" + " " + styles.small_card_complete_name}>
         {person.completeName}
       </div>
-      <div className={styles.small_card_position}>{person.position}</div>
+      <div className={"flex-full-centered" + " " + styles.small_card_position}>{person.position}</div>
       <div style={{ marginTop: "var(--ifm-spacing-xl)" }}>
         <SocialMediaContacts person={person}></SocialMediaContacts>
       </div>
     </div>
   );
 }
-export default function PopupPortrait({
-  person,
-  avatarUrl,
-  subTeamBioComponent,
-}) {
+export default function PopupPortrait({ person }) {
   const [offsets, setOffsets] = useState([0, 0]);
   let [isPopupOpen, setIsPopupOpen] = useState(false);
 
@@ -87,19 +70,14 @@ export default function PopupPortrait({
         open={isPopupOpen}
         closeOnEscape={true}
         closeOnDocumentClick={true}
-        onClose={()=>setIsPopupOpen(false)}
-        
+        onClose={() => setIsPopupOpen(false)}
         trigger={
           <div>
-            <SmallPortraitCard
-              person={person}
-              avatarUrl={avatarUrl}
-              setOffsets={setOffsets}
-            />
+            <SmallPortraitCard person={person} setOffsets={setOffsets} />
           </div>
         }
         onOpen={() => {
-          setIsPopupOpen(true)
+          setIsPopupOpen(true);
         }}
         contentStyle={contentStyle}
         overlayStyle={overlayStyle}
@@ -108,15 +86,14 @@ export default function PopupPortrait({
         offsetY={offsets[1]}
       >
         <div>
-          <button className="close-button" style={{position: "absolute", right:"0px"}}
-          onClick={()=>{setIsPopupOpen(false)
-          
-          }}></button>
-          <LargePortraitCard
-            person={person}
-            avatarUrl={avatarUrl}
-            BioComponent={subTeamBioComponent}
-          ></LargePortraitCard>
+          <button
+            className="close-button"
+            style={{ position: "absolute", right: "0px" }}
+            onClick={() => {
+              setIsPopupOpen(false);
+            }}
+          ></button>
+          <LargePortraitCard person={person}></LargePortraitCard>
         </div>
       </Popup>
     </div>
diff --git a/src/components/about/SocialMediaContacts.tsx b/src/components/about/SocialMediaContacts.tsx
index 8ba059aa4..399d4654f 100644
--- a/src/components/about/SocialMediaContacts.tsx
+++ b/src/components/about/SocialMediaContacts.tsx
@@ -1,24 +1,22 @@
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
 import GHPicture from "@site/static/img/socialmedias/GH.svg";
-import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg"
+import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg";
 import XPicture from "@site/static/img/socialmedias/X.svg";
 
-
 export default function SocialMediaContacts({ person }) {
   return (
     <>
-      <div className = "flex-full-centered">
-        <Link href={person.githubLink}>{<GHPicture/>}</Link>
-        <Link href={person.LinkedInLink}>
-          {<LinkedInPicture/>}
+      <div className="flex-full-centered">
+        <Link href={person.githubLink}>{<GHPicture />}</Link>
+        <Link href={person.LinkedInLink}>{<LinkedInPicture />}</Link>
+        <Link href={person.XLink}>{<XPicture />}</Link>
+      </div>
+      <div className="flex-full-centered">
+        <Link href={person.githubLink} className={styles.githubname}>
+          {person.githubName}
         </Link>
-        <Link href={person.XLink}>{<XPicture/>}</Link>
       </div>
-      <Link href={person.githubLink} className={styles.githubname}>
-        {" "}
-        {person.githubName}
-      </Link>
     </>
   );
 }
diff --git a/src/components/about/SubTeam.tsx b/src/components/about/SubTeam.tsx
index 19f72cc4d..93cbca3ad 100644
--- a/src/components/about/SubTeam.tsx
+++ b/src/components/about/SubTeam.tsx
@@ -3,28 +3,19 @@ import PopupPortrait from "./SmallPortraitCard";
 
 export default function SubTeam({
   subTeamName,
-  subTeam,
-  subTeamAvatarsUrls,
-  subTeamBioComponents,
+  subTeam
 }) {
   return (
     <div className={styles.subteam_container}>
       <h2 className={"text--center"}> {subTeamName}</h2>
       <div className={"container"}>
-        <ul
-          className={
-            "row padding-none flex-full-centered" +
-            " " +
-            styles.row_with_margin_top
-          }
-        >
+        <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}
-                  avatarUrl={subTeamAvatarsUrls[index]}
-                  subTeamBioComponent={subTeamBioComponents[index]}
+                 
                 />
               </div>
             </li>
diff --git a/src/components/about/Team/QScollaborators.ts b/src/components/about/Team/QScollaborators.ts
index 60231596e..4723d90c0 100644
--- a/src/components/about/Team/QScollaborators.ts
+++ b/src/components/about/Team/QScollaborators.ts
@@ -1,11 +1,8 @@
-import Romain from "@site/src/components/about/Team/Romain.md";
+import RomainMD from "@site/src/components/about/Team/Romain.md";
 import RomainAvatarUrl from "@site/static/img/avatars/Romain.png";
-import Serge from "@site/src/components/about/Team/Serge.md";
+import SergeMD from "@site/src/components/about/Team/Serge.md";
 import SergeAvatarUrl from "@site/static/img/avatars/Serge.png";
 
-export const QSCollaboratorsBioComponents = [Serge, Romain];
-export const QSCollaboratorsAvatarsUrls = [SergeAvatarUrl, RomainAvatarUrl];
-
 export const QSCollaboratorsTeam = [
   {
     completeName: "Serge Guelton",
@@ -18,10 +15,11 @@ export const QSCollaboratorsTeam = [
     LinkedInLink: "",
     XLink: "",
     githubName: "@serge-sans-paille",
-    avatarRoute: "@site/static/img/avatars/Serge@2x.jpg",
+    avatarUrl: SergeAvatarUrl,
     distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "QSCollaboratorsTeam",
+    BioComponent: SergeMD,
   },
   {
     completeName: "Romain Menegaux",
@@ -34,10 +32,11 @@ export const QSCollaboratorsTeam = [
     LinkedInLink: "https://www.linkedin.com/in/romain-menegaux-88a147134/",
     XLink: "https://twitter.com/RomainMenegaux",
     githubName: "@trmenegaux",
-    avatarRoute: "@site/static/img/avatars/Romain@2x.jpg",
+    avatarUrl: RomainAvatarUrl,
     distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "QSCollaboratorsTeam",
+    BioComponent: RomainMD
   },
 ];
 export default QSCollaboratorsTeam;
diff --git a/src/components/about/Team/coreTeam.ts b/src/components/about/Team/coreTeam.ts
index 9ed9c4180..be97e41b7 100644
--- a/src/components/about/Team/coreTeam.ts
+++ b/src/components/about/Team/coreTeam.ts
@@ -1,86 +1,42 @@
-import Alexis from "@site/src/components/about/Team/Alexis.md";
+import AlexisMD from "@site/src/components/about/Team/Alexis.md";
 import AlexisAvatarUrl from "@site/static/img/avatars/Alexis.png";
-import Anastasiaa from "@site/src/components/about/Team/Anastasiia.md";
+import AnastasiiaMD from "@site/src/components/about/Team/Anastasiia.md";
 import AnastasiiaAvatarUrl from "@site/static/img/avatars/Anastasiia.png";
-import Andreas from "@site/src/components/about/Team/Andreas.md";
+import AndreasMD from "@site/src/components/about/Team/Andreas.md";
 import AndreasAvatarUrl from "@site/static/img/avatars/Andreas.png";
-import Anutosh from "@site/src/components/about/Team/Anutosh.md";
+import AnutoshMD from "@site/src/components/about/Team/Anutosh.md";
 import AnutoshAvatarUrl from "@site/static/img/avatars/Anutosh.png";
-import Denisa from "@site/src/components/about/Team/Denisa.md";
+import DenisaMD from "@site/src/components/about/Team/Denisa.md";
 import DenisaAvatarUrl from "@site/static/img/avatars/Denisa.png";
-import Florence from "@site/src/components/about/Team/Florence.md";
+import FlorenceMD from "@site/src/components/about/Team/Florence.md";
 import FlorenceAvatarUrl from "@site/static/img/avatars/Florence.png";
-import Gabriela from "@site/src/components/about/Team/Gabriela.md";
+import GabrielaMD from "@site/src/components/about/Team/Gabriela.md";
 import GabrielaAvatarUrl from "@site/static/img/avatars/Gabriela.png";
-import Greg from "@site/src/components/about/Team/Greg.md";
+import GregMD from "@site/src/components/about/Team/Greg.md";
 import GregAvatarUrl from "@site/static/img/avatars/Greg.png";
-import Hind from "@site/src/components/about/Team/Hind.md";
+import HindMD from "@site/src/components/about/Team/Hind.md";
 import HindAvatarUrl from "@site/static/img/avatars/Hind.png";
-import Ian from "@site/src/components/about/Team/Ian.md";
+import IanMD from "@site/src/components/about/Team/Ian.md";
 import IanAvatarUrl from "@site/static/img/avatars/Ian.png";
-import Isabel from "@site/src/components/about/Team/Isabel.md";
+import IsabelMD from "@site/src/components/about/Team/Isabel.md";
 import IsabelAvatarUrl from "@site/static/img/avatars/Isabel.png";
-import Joel from "@site/src/components/about/Team/Joel.md";
+import JoelMD from "@site/src/components/about/Team/Joel.md";
 import JoelAvatarUrl from "@site/static/img/avatars/Joel.png";
-import Julien from "@site/src/components/about/Team/Julien.md";
+import JulienMD from "@site/src/components/about/Team/Julien.md";
 import JulienAvatarUrl from "@site/static/img/avatars/Julien.png";
-import Kerim from "@site/src/components/about/Team/Kerim.md";
+import KerimMD from "@site/src/components/about/Team/Kerim.md";
 import KerimAvatarUrl from "@site/static/img/avatars/Kerim.png";
-import Meriem from "@site/src/components/about/Team/Meriem.md";
+import MeriemMD from "@site/src/components/about/Team/Meriem.md";
 import MeriemAvatarUrl from "@site/static/img/avatars/Meriem.png";
-import Nicolas from "@site/src/components/about/Team/Nicolas.md";
+import NicolasMD from "@site/src/components/about/Team/Nicolas.md";
 import NicolasAvatarUrl from "@site/static/img/avatars/Nicolas.png";
-import Nour from "@site/src/components/about/Team/Nour.md";
+import NourMD from "@site/src/components/about/Team/Nour.md";
 import NourAvatarUrl from "@site/static/img/avatars/Nour.png";
-import Thorsten from "@site/src/components/about/Team/Thorsten.md";
+import ThorstenMD from "@site/src/components/about/Team/Thorsten.md";
 import ThorstenAvatarUrl from "@site/static/img/avatars/Thorsten.png";
-import Trung from "@site/src/components/about/Team/Trung.md";
+import TrungMD from "@site/src/components/about/Team/Trung.md";
 import TrungAvatarUrl from "@site/static/img/avatars/Trung.png";
 
-export const coreBioComponents = [
-  Thorsten,
-  Trung,
-  Andreas,
-  Denisa,
-  Joel,
-  Florence,
-  Nicolas,
-  Isabel,
-  Gabriela,
-  Hind,
-  Julien,
-  Anutosh,
-  Greg,
-  Ian,
-  Nour,
-  Meriem,
-  Alexis,
-  Anastasiaa,
-  Kerim,
-];
-
-export const coreAvatarsUrls = [
-  ThorstenAvatarUrl,
-  TrungAvatarUrl,
-  AndreasAvatarUrl,
-  DenisaAvatarUrl,
-  JoelAvatarUrl,
-  FlorenceAvatarUrl,
-  NicolasAvatarUrl,
-  IsabelAvatarUrl,
-  GabrielaAvatarUrl,
-  HindAvatarUrl,
-  JulienAvatarUrl,
-  AnutoshAvatarUrl,
-  GregAvatarUrl,
-  IanAvatarUrl,
-  NourAvatarUrl,
-  MeriemAvatarUrl,
-  AlexisAvatarUrl,
-  AnastasiiaAvatarUrl,
-  KerimAvatarUrl,
-];
-
 export const coreTeam = [
   {
     completeName: "Thorsten Beier",
@@ -93,10 +49,11 @@ export const coreTeam = [
     XLink: "https://twitter.com/ThorstenBeier",
     LinkedInLink: "https://www.linkedin.com/in/thorsten-beier-95b121189/",
     githubName: "@derthorsten",
-    avatarRoute: "@site/static/img/avatars/Thorsten@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: ThorstenAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: ThorstenMD,
   },
   {
     completeName: "Le Duc Trung",
@@ -109,10 +66,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/ductrung-le/",
     XLink: "",
     githubName: "@trungleduc",
-    avatarRoute: "@site/static/img/avatars/Trung@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: TrungAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: TrungMD,
   },
   {
     completeName: " Andreas Trawöger",
@@ -125,10 +83,11 @@ export const coreTeam = [
     LinkedInLink: "",
     XLink: "",
     githubName: "@atrawog",
-    avatarRoute: "@site/static/img/avatars/Andreas@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: AndreasAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: AndreasMD,
   },
   {
     completeName: "Denisa Checiu",
@@ -141,10 +100,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/denisa-checiu-georgiana/",
     XLink: "https://twitter.com/DenisaCheciu",
     githubName: "DenisaCheciu",
-    avatarRoute: "@site/static/img/avatars/Denisa@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: DenisaAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: DenisaMD,
   },
   {
     completeName: "Joël Lamotte",
@@ -157,10 +117,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/a-jo%C3%ABl-lamotte-a5b09b85/",
     XLink: "",
     githubName: "@Klaim",
-    avatarRoute: "@site/static/img/avatars/Joel@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: JoelAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: JoelMD,
   },
   {
     completeName: "Florence Haudin",
@@ -173,10 +134,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/florence-haudin-fr/",
     XLink: "",
     githubName: "@HaudinFlorence",
-    avatarRoute: "@site/static/img/avatars/Florence@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: FlorenceAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: FlorenceMD,
   },
   {
     completeName: "Nicolas Brichet",
@@ -189,10 +151,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/nicolas-brichet-a26369150/",
     XLink: "",
     githubName: "@brichet",
-    avatarRoute: "@site/static/img/avatars/Nicolas@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: NicolasAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: NicolasMD,
   },
   {
     completeName: "Isabel Paredes",
@@ -205,10 +168,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/isabel-paredes/",
     XLink: "",
     githubName: "@ihuicatl",
-    avatarRoute: "@site/static/img/avatars/Isabel@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: IsabelAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: IsabelMD,
   },
   {
     completeName: "Gabriela Vives",
@@ -221,10 +185,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/gabriela-vives-831ba853/",
     XLink: "",
     githubName: "@GabrielaVives",
-    avatarRoute: "@site/static/img/avatars/Gabriela@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: GabrielaAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: GabrielaMD,
   },
   {
     completeName: "Hind Montassif",
@@ -237,10 +202,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/hindmontassif/",
     XLink: "",
     githubName: "@Hind-M",
-    avatarRoute: "@site/static/img/avatars/Hind@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: HindAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: HindMD,
   },
   {
     completeName: "Julien Jerphanion",
@@ -253,10 +219,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/jjerphan/",
     XLink: "https://twitter.com/jjerphan",
     githubName: "@jjerphan",
-    avatarRoute: "@site/static/img/avatars/Julien@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: JulienAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: JulienMD,
   },
   {
     completeName: "Anutosh Bhat",
@@ -269,10 +236,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/anutosh-bhat-66ba961a8/",
     XLink: "",
     githubName: "@anutosh491",
-    avatarRoute: "@site/static/img/avatars/Anutosh@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: AnutoshAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: AnutoshMD,
   },
   {
     completeName: "Greg Mooney",
@@ -285,10 +253,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/gjmooney/",
     XLink: "",
     githubName: "@gjmooney",
-    avatarRoute: "@site/static/img/avatars/Greg@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: GabrielaAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: GregMD,
   },
   {
     completeName: "Ian Thomas",
@@ -301,10 +270,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/ian-thomas-796814240/",
     XLink: "",
     githubName: "@ianthomas23",
-    avatarRoute: "@site/static/img/avatars/Ian@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: IanAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: IanMD,
   },
   {
     completeName: "Nour Cheour",
@@ -317,10 +287,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/nour-cheour-606143206/",
     XLink: "",
     githubName: "@Nour-Cheour10",
-    avatarRoute: "@site/static/img/avatars/Nour@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: NourAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: NourMD,
   },
   {
     completeName: "Meriem Ben Ismail",
@@ -333,10 +304,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/meriem-ben-ismail-163042230/",
     XLink: "",
     githubName: "@Meriem-BenIsmail",
-    avatarRoute: "@site/static/img/avatars/Meriem@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: MeriemAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: MeriemMD,
   },
   {
     completeName: "Alexis Placet",
@@ -349,10 +321,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/alexisplacet/",
     XLink: "",
     githubName: "@Alex-PLACET",
-    avatarRoute: "@site/static/img/avatars/Alexis@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: AlexisAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: AlexisMD,
   },
   {
     completeName: "Anastasiia Sliusar",
@@ -365,10 +338,11 @@ export const coreTeam = [
     LinkedInLink: "https://www.linkedin.com/in/anastasiiasliusar-bellis/",
     XLink: "",
     githubName: "@AnastasiaSliusar",
-    avatarRoute: "@site/static/img/avatars/Anastasiia@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: AnastasiiaAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: AnastasiiaMD,
   },
   {
     completeName: "Kerim Birgi",
@@ -382,10 +356,11 @@ export const coreTeam = [
       "https://www.linkedin.com/in/kerim-gregory-birgi/?originalSubdomain=ch",
     XLink: "",
     githubName: "@kgb99",
-    avatarRoute: "@site/static/img/avatars/Kerim@2x.jpg",
-    distinctionTitle:[],
+    avatarUrl: KerimAvatarUrl,
+    distinctionTitle: [],
     distinctionLink: [],
     subTeamName: "coreTeam",
+    BioComponent: KerimMD,
   },
 ];
 
diff --git a/src/components/about/Team/leadershipTeam.ts b/src/components/about/Team/leadershipTeam.ts
index fa2528693..37f498024 100644
--- a/src/components/about/Team/leadershipTeam.ts
+++ b/src/components/about/Team/leadershipTeam.ts
@@ -1,34 +1,16 @@
-import Darian from "@site/src/components/about/Team/Darian.md";
+import DarianMD from "@site/src/components/about/Team/Darian.md";
 import DarianAvatarUrl from "@site/static/img/avatars/Darian.png";
-import David from "@site/src/components/about/Team/David.md";
+import DavidMD from "@site/src/components/about/Team/David.md";
 import DavidAvatarUrl from "@site/static/img/avatars/David.png";
-import Jeremy from "@site/src/components/about/Team/Jeremy.md";
+import JeremyMD from "@site/src/components/about/Team/Jeremy.md";
 import JeremyAvatarUrl from "@site/static/img/avatars/Jeremy.png";
-import Johan from "@site/src/components/about/Team/Johan.md";
+import JohanMD from "@site/src/components/about/Team/Johan.md";
 import JohanAvatarUrl from "@site/static/img/avatars/Johan.png";
-import Martin from "@site/src/components/about/Team/Martin.md";
+import MartinMD from "@site/src/components/about/Team/Martin.md";
 import MartinAvatarUrl from "@site/static/img/avatars/Martin.png";
-import Sylvain from "@site/src/components/about/Team/Sylvain.md";
+import SylvainMD from "@site/src/components/about/Team/Sylvain.md";
 import SylvainAvatarUrl from "@site/static/img/avatars/Sylvain.png";
 
-export const leadershipBioComponents = [
-  Sylvain,
-  Johan,
-  Martin,
-  Jeremy,
-  Darian,
-  David,
-];
-
-export const leadershipAvatarsUrls = [
-  SylvainAvatarUrl,
-  JohanAvatarUrl,
-  MartinAvatarUrl,
-  JeremyAvatarUrl,
-  DarianAvatarUrl,
-  DavidAvatarUrl,
-];
-
 export const leadershipTeam = [
   {
     completeName: "Sylvain Corlay",
@@ -41,10 +23,11 @@ export const leadershipTeam = [
     LinkedInLink: "https://www.linkedin.com/sylvaincorlay/?locale=en_US",
     XLink: "https://twitter.com/SylvainCorlay",
     githubName: "@SylvainCorlay",
-    avatarRoute: "@site/static/img/avatars/Sylvain@2x.png",
+    avatarUrl: SylvainAvatarUrl,
     distinctionTitle: ["ACM Software System Award"],
-    distinctionLink: ["https://awards.acm.org/award_winners/corlay_8324973"],  
+    distinctionLink: ["https://awards.acm.org/award_winners/corlay_8324973"],
     subTeamName: "LeadershipTeam",
+    BioComponent: SylvainMD,
   },
   {
     completeName: "Johan Mabille",
@@ -57,11 +40,11 @@ export const leadershipTeam = [
     LinkedInLink: "https://www.linkedin.com/in/johan-mabille/",
     XLink: "https://twitter.com/JohanMabille",
     githubName: "@JohanMabille",
-    avatarRoute: "@site/static/img/avatars/Johan@2x.png",
+    avatarUrl: JohanAvatarUrl,
     distinctionTitle: ["Jupyter distinguished contributor"],
-    distinctionLink:
-      ["https://jupyter.org/about#distinguished-contributors"],
+    distinctionLink: ["https://jupyter.org/about#distinguished-contributors"],
     subTeamName: "LeadershipTeam",
+    BioComponent: JohanMD,
   },
   {
     completeName: "Martin Renou",
@@ -74,11 +57,11 @@ export const leadershipTeam = [
     LinkedInLink: "https://www.linkedin.com/in/martin-renou",
     XLink: "https://twitter.com/martinRenou",
     githubName: "@martinRenou",
-    avatarRoute: "@site/static/img/avatars/Martin@2x.png",
+    avatarUrl: MartinAvatarUrl,
     distinctionTitle: ["Jupyter distinguished contributor"],
-    distinctionLink:
-      ["https://jupyter.org/about#distinguished-contributors"],
+    distinctionLink: ["https://jupyter.org/about#distinguished-contributors"],
     subTeamName: "LeadershipTeam",
+    BioComponent: MartinMD,
   },
   {
     completeName: "Jeremy Tuloup",
@@ -91,11 +74,11 @@ export const leadershipTeam = [
     LinkedInLink: "https://www.linkedin.com/in/jtuloup/",
     XLink: "https://twitter.com/jtpio",
     githubName: "@jtpio",
-    avatarRoute: "@site/static/img/avatars/Jeremy@2x.png",
+    avatarUrl: JeremyAvatarUrl,
     distinctionTitle: ["Jupyter distinguished contributor"],
-    distinctionLink:
-      ["https://jupyter.org/about#distinguished-contributors"],
+    distinctionLink: ["https://jupyter.org/about#distinguished-contributors"],
     subTeamName: "LeadershipTeam",
+    BioComponent: JeremyMD,
   },
 
   {
@@ -109,10 +92,11 @@ export const leadershipTeam = [
     LinkedInLink: "https://www.linkedin.com/in/afshindarian/",
     XLink: "",
     githubName: "@afshin",
-    avatarRoute: "@site/static/img/avatars/Darian@2x.png",
+    avatarUrl: DarianAvatarUrl,
     distinctionTitle: ["Jupyter distinguished contributor"],
-    distinctionLink:[ "https://jupyter.org/about#distinguished-contributors"],
+    distinctionLink: ["https://jupyter.org/about#distinguished-contributors"],
     subTeamName: "LeadershipTeam",
+    BioComponent: DarianMD,
   },
   {
     completeName: "David Brochart",
@@ -125,10 +109,11 @@ export const leadershipTeam = [
     LinkedInLink: "https://www.linkedin.com/in/david-brochart-4208721/",
     XLink: "https://twitter.com/davidbrochart",
     githubName: "@davidbrochart",
-    avatarRoute: "@site/static/img/avatars/David@2x.png",
+    avatarUrl: DavidAvatarUrl,
     distinctionTitle: ["Jupyter distinguished contributor"],
     distinctionLink: ["https://jupyter.org/about#distinguished-contributors"],
     subTeamName: "LeadershipTeam",
+    BioComponent: DavidMD,
   },
 ];
 export default leadershipTeam;
diff --git a/src/components/about/ValueCard.tsx b/src/components/about/ValueCard.tsx
index 61ca6caad..1507c2633 100644
--- a/src/components/about/ValueCard.tsx
+++ b/src/components/about/ValueCard.tsx
@@ -12,7 +12,9 @@ export function ValueCard({ value }) {
 
       <div className={"card__body"}>
         <div className={styles.value_header}>{value.name}</div>
-        <value.DescriptionMD className={styles.value_value_text} />
+        <div className={styles.value_text}>
+          <value.DescriptionMD />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx
index be6d2c089..0542efd8e 100644
--- a/src/components/about/index.tsx
+++ b/src/components/about/index.tsx
@@ -1,27 +1,18 @@
 import styles from "./styles.module.css";
-import {
-  leadershipTeam,
-  leadershipBioComponents,
-  leadershipAvatarsUrls,
-} from "./Team/leadershipTeam";
-import { coreTeam, coreBioComponents, coreAvatarsUrls } from "./Team/coreTeam";
-import {
-  QSCollaboratorsTeam,
-  QSCollaboratorsBioComponents,
-  QSCollaboratorsAvatarsUrls,
-} from "./Team/QScollaborators";
+import { leadershipTeam } from "./Team/leadershipTeam";
+import { coreTeam } from "./Team/coreTeam";
+import { QSCollaboratorsTeam } from "./Team/QScollaborators";
 import FourValues from "./FourValues";
 import SubTeam from "./SubTeam";
 import LinkToContact from "../home/LinkToContact";
 
-
 export function About() {
   return (
     <div>
       <div className="main-container-with-margins">
         <div className="container upper-container-with-margin-top">
           <div className={"row"}>
-            <div className={"col" + " " + "flex-full-centered"}>
+            <div className={"col flex-full-centered"}>
               <FourValues />
             </div>
           </div>
@@ -40,20 +31,14 @@ export function About() {
               <SubTeam
                 subTeamName={"The leadership team"}
                 subTeam={leadershipTeam}
-                subTeamAvatarsUrls={leadershipAvatarsUrls}
-                subTeamBioComponents={leadershipBioComponents}
               />
               <SubTeam
                 subTeamName={"The core team"}
                 subTeam={coreTeam}
-                subTeamAvatarsUrls={coreAvatarsUrls}
-                subTeamBioComponents={coreBioComponents}
               />
               <SubTeam
                 subTeamName={"QuantStack collaborators"}
                 subTeam={QSCollaboratorsTeam}
-                subTeamAvatarsUrls={QSCollaboratorsAvatarsUrls}
-                subTeamBioComponents={QSCollaboratorsBioComponents}
               />
             </div>
           </div>
diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
index 1091552ee..67ea87837 100644
--- a/src/components/about/styles.module.css
+++ b/src/components/about/styles.module.css
@@ -1,35 +1,12 @@
 .small_portrait_card {
   width: 279px;
-   height: 388px;
-   background-color: white;
-   color: var(--ifm-color-primary-p2);
-   border-radius: 8px;
-   box-shadow: 0px 0px 8px 1px #c8c8c7;
-   padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
-   text-align: center;
-   margin-bottom: var(--ifm-spacing-xl);
- }
-
-.avatar {
-  filter: grayscale(1);
-  border-radius: 50%;
-  overflow: hidden;
-  height: 160px;
-  width: 160px;
-}
-
-
-
-
-.value_header {
-  font-family: var(--ifm-font-family-rubik-one);
-  font-size: var(--ifm-font-size-secondary-title);
-  font-style: normal;
-  font-weight: 600;
-  line-height: 28px;
-  text-align: center;
+  height: 388px;
+  background-color: white;
+  color: var(--ifm-color-primary-p2);
+  border-radius: 8px;
+  box-shadow: 0px 0px 8px 1px #c8c8c7;
+  padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
   margin-bottom: var(--ifm-spacing-xl);
-  color: var(--ifm-text-color-on-primary-p1);
 }
 
 .value_text p {
@@ -40,9 +17,9 @@
   line-height: 20px;
   letter-spacing: 0.25px;
   color: var(--ifm-text-color-on-primary-p1);
+  text-align: center;
 }
 
-
 div .row {
   margin-left: 0;
   margin-right: 0;
@@ -75,7 +52,7 @@ div .row {
   color: var(---ifm-text-color);
   font-style: normal;
   font-weight: 600;
-  line-height: 24px; 
+  line-height: 24px;
   letter-spacing: 0.5px;
   color: var(--ifm-color-primary-p2);
 }
@@ -89,9 +66,7 @@ div .row {
   line-height: 40px;
   color: var(--ifm-color-primary-p2);
 }
-s
-
-.large_card_position {
+s .large_card_position {
   font-size: var(--ifm--font-size-normal);
   font-family: var(--ifm-font-family-roboto);
   color: var(--ifm-color-primary-p2);
@@ -136,7 +111,13 @@ div .join_the_team_text {
   color: var(--ifm-color-secondary-s2);
 }
 
-
+.avatar {
+  filter: grayscale(1);
+  border-radius: 50%;
+  overflow: hidden;
+  height: 160px;
+  width: 160px;
+}
 
 @media only screen and (max-width: 996px) {
   /*Mobile*/
@@ -150,28 +131,27 @@ div .join_the_team_text {
     margin-bottom: var(--ifm-spacing-xl);
   }
 
-  .large_portrait_card {
-    width: 100%;
-    height: 200%;
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
-  }
-
-  .row_with_margin_top {
-    margin-top: var(--ifm-spacing-xl);
-  }
-
-  .row_with_margin_bottom {
+  .value_header {
+    font-family: var(--ifm-font-family-rubik-one);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    text-align: center;
     margin-bottom: var(--ifm-spacing-xl);
+    color: var(--ifm-text-color-on-primary-p1);
   }
 
-  .row_with_margins {
-    margin: var(--ifm-spacing-xl) 0;
+  .large_portrait_card {
+    width: 100%;
+    height: 100%;
+    padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
   }
 
   .subteam_container {
     margin: var(--ifm-spacing-3xl) var(--ifm-spacing-2xl);
   }
-  
+
   .team_description {
     font-family: var(--ifm-font-family-roboto);
     font-size: 18px;
@@ -194,30 +174,26 @@ div .join_the_team_text {
     margin-bottom: var(--ifm-spacing-xl);
   }
 
-
+  .value_header {
+    font-family: var(--ifm-font-family-rubik-one);
+    font-size: var(--ifm-font-size-secondary-title);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+    text-align: center;
+    margin-bottom: var(--ifm-spacing-xl);
+    color: var(--ifm-text-color-on-primary-p1);
+  }
 
   .large_portrait_card {
     width: 1000px;
     padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
   }
 
-  .row_with_margin_top {
-    margin-top: var(--ifm-spacing-2xl);
-  }
-
-  .row_with_margin_bottom {
-    margin-bottom: var(--ifm-spacing-2xl);
-  }
-
-
-  .row_with_margins {
-    margin: var(--ifm-spacing-2xl) 0;
-  }
-
   .subteam_container {
     margin: var(--ifm-spacing-5xl) var(--ifm-spacing-6xl);
   }
-  
+
   .team_description {
     font-family: var(--ifm-font-family-roboto);
     font-size: 22px;
@@ -226,5 +202,4 @@ div .join_the_team_text {
     line-height: 28px;
     text-align: center;
   }
-  
-}
\ No newline at end of file
+}
diff --git a/src/components/blog/index.tsx b/src/components/blog/index.tsx
index 470541d11..6dc19e87d 100644
--- a/src/components/blog/index.tsx
+++ b/src/components/blog/index.tsx
@@ -4,7 +4,6 @@ import BlogpostCard from "./BlogpostCard";
 
 export default function BlogsComponent({ blogpostsDetails }) {
   const numberOfBlogs = blogpostsDetails.length;
-  console.log("numberOfBlogs:", numberOfBlogs);
   const [searchField, setSearchField] = useState("");
 
   const filteredBlogPosts = blogpostsDetails.filter((blogpost) => {
@@ -15,7 +14,6 @@ export default function BlogsComponent({ blogpostsDetails }) {
       blogpost.summary.toLowerCase().includes(searchField.toLowerCase())
     );
   });
-  //const filteredBlogPosts = blogpostsDetails;
 
   const handleChange = (event) => {
     setSearchField(event.target.value);
@@ -24,12 +22,11 @@ export default function BlogsComponent({ blogpostsDetails }) {
   return (
     <div className="main-container-with-margins">
       <div className="container upper-container-with-margin-top">
-        <div className={"row"}>
+        <div className={"row row-with-margin-bottom"}>
           <div
             className={"col col--8 col--offset-2"}
-            style={{ marginBottom: "var(--ifm-spacing-5xl)" }}
           >
-            <h1 className="padding-none">
+            <h1 className="padding-none margin-none">
               Featured Posts by QuantStack Contributors
             </h1>
             <div>
diff --git a/src/components/blog/styles.module.css b/src/components/blog/styles.module.css
index 1c2bd06e8..ba5b20b18 100644
--- a/src/components/blog/styles.module.css
+++ b/src/components/blog/styles.module.css
@@ -88,6 +88,5 @@ div .blogpost_date {
   border-radius: 8px;
   padding: var(--ifm-spacing-xs) var(--ifm-spacing-lg) var(--ifm-spacing-xs)
     var(--ifm-spacing-lg);
+  margin: var(--ifm-spacing-lg) 0;
 }
-
-
diff --git a/src/components/careers/index.tsx b/src/components/careers/index.tsx
index f0626cd37..09e00b3a3 100644
--- a/src/components/careers/index.tsx
+++ b/src/components/careers/index.tsx
@@ -34,11 +34,10 @@ export default function Careers() {
           </div>
           <div
             className={
-              "row" +
+              "row flex-full-centered" +
               " " +
-              styles.join_the_team_container +
-              " " +
-              "flex-full-centered"
+              styles.join_the_team_container
+        
             }
           >
             <div className="col col--10 col--offset-1">
diff --git a/src/components/careers/styles.module.css b/src/components/careers/styles.module.css
index 1026ffdff..98a797c84 100644
--- a/src/components/careers/styles.module.css
+++ b/src/components/careers/styles.module.css
@@ -33,58 +33,79 @@
   font-weight: 700;
 }
 
-  .interview_card {
-    width: 280px;
-    height: 300px;
-    background-color: var(--ifm-background-color);
-    border-radius: 10px;
-    box-shadow: 0px 0px 8px 1px #c8c8c7;
-    padding: var(--ifm-spacing-sm);
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-xl);
-  }
+.interview_card {
+  width: 280px;
+  height: 300px;
+  background-color: var(--ifm-background-color);
+  border-radius: 10px;
+  box-shadow: 0px 0px 8px 1px #c8c8c7;
+  padding: var(--ifm-spacing-sm);
+  text-align: center;
+  margin-bottom: var(--ifm-spacing-xl);
+}
+
+.interview_picture {
+  width: 284px;
+}
+
+.interviews_container {
+  margin: var(--ifm-spacing-2xl) 0;
+}
 
+.interview_name {
+  color: var(--ifm-text-color);
+  text-align: center;
+  font-family: var(--ifm-font-family-roboto);
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 36px; /* 128.571% */
+}
+
+.interview_position {
+  color: var(--ifm-text-color);
+  text-align: center;
+  font-family: var(--ifm-font-family-roboto);
+  font-size: var(--ifm-font-size-normal);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 133.333% */
+  letter-spacing: 0.5px;
+}
+
+@media only screen and (max-width: 996px) {
+  /*Mobile*/
   .join_the_team_text {
     text-align: center;
-    font-size: 28px;
+    font-size: 18px;
     font-family: var(--ifm-font-family-roboto);
     color: var(--ifm-color-primary-p2);
     text-align: center;
     font-style: normal;
     font-weight: 400;
-    line-height: 36px; /* 128.571% */
+    line-height: 36px;
   }
 
   .join_the_team_container {
-    padding: var(--ifm-spacing-4xl) 0;
-    margin: var(--ifm-spacing-2xl) 0;
-  }
-
-  .interview_picture {
-    width: 284px;
-  }
-
-  .interviews_container {
-    margin: var(--ifm-spacing-2xl) 0;
+    margin-top: var(--ifm-spacing-xl);
   }
+}
 
-  .interview_name {
-    color: var(--ifm-text-color);
+@media only screen and (min-width: 996px) {
+  /*Desktop*/
+  .join_the_team_text {
     text-align: center;
-    font-family: var(--ifm-font-family-roboto);
     font-size: 28px;
+    font-family: var(--ifm-font-family-roboto);
+    color: var(--ifm-color-primary-p2);
+    text-align: center;
     font-style: normal;
     font-weight: 400;
-    line-height: 36px; /* 128.571% */
+    line-height: 36px;
+    margin-bottom: var(--ifm-spacing-3xl);
   }
 
-  .interview_position {
-    color: var(--ifm-text-color);
-    text-align: center;
-    font-family: var(--ifm-font-family-roboto);
-    font-size: var(--ifm-font-size-normal);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: 0.5px;
+  .join_the_team_container {
+    margin-top: var(--ifm-spacing-5xl);
   }
+}
diff --git a/src/components/contact/index.tsx b/src/components/contact/index.tsx
index cade0e638..a5d13c041 100644
--- a/src/components/contact/index.tsx
+++ b/src/components/contact/index.tsx
@@ -1,34 +1,33 @@
 import styles from "./styles.module.css";
 import ContactForm from "./ContactForm";
 import { useEffect, useState } from "react";
-import ContactIllustration from "/img/illustrations/contact.svg"
-
+import ContactIllustration from "/img/illustrations/contact.svg";
 
 export function Contact() {
   return (
     <div className="container upper-container-with-margin-top">
+      <h1 className={"padding-none text--center"}> Contact us</h1>
       <div className={"row"}>
         <div
-          className={
-            "col col--6 col--offset-1" + " " + "flex-full-centered" + " "
-          }
+          className="col col--5 col--offset-1 flex-full-centered"
           style={{
-            margin: "var(--ifm-spacing-2xl) 0",
-            padding: "var(--ifm-spacing-2xl)",
+            padding: "var(--ifm-spacing-xl)",
           }}
         >
-          <ContactIllustration alt={"Illustration for the contact page with a woman, a mobile phone and an enveloppe."} />
+          <ContactIllustration
+            height={"460px"}
+            alt={
+              "Illustration for the contact page with a woman, a mobile phone and an enveloppe."
+            }
+          />
         </div>
         <div
-          className={"col col--5" + " " + "padding-none" + " " + "margin-none"}
+          className={"col col--5 flex-full-centered padding-none margin-none"}
         >
-          <h1 className={"padding-none"}> Contact us</h1>
-          <div>
-            <ContactForm />
-          </div>
+          <ContactForm />
         </div>
       </div>
     </div>
   );
 }
- export default Contact;
\ No newline at end of file
+export default Contact;
diff --git a/src/components/contact/styles.module.css b/src/components/contact/styles.module.css
index 7319b82d0..ef330c1fb 100644
--- a/src/components/contact/styles.module.css
+++ b/src/components/contact/styles.module.css
@@ -4,11 +4,7 @@
   background: var(--ifm-color-blue-jupyter);
 }
 
-.send_button_container {
-  height: 59px;
-  width: 508px;
-  margin-top: var(--ifm-spacing-2xl);
-}
+
 
 .contact_form {
   margin-top: var(--ifm-spacing-xl);
@@ -19,14 +15,46 @@
   color: var(--ifm-text-color);
   background-color: var(--ifm-background-color);
 }
-.small_input {
-  width: 508px;
-  height: 56px;
-  border-radius: 4px;
-}
 
-.large_input {
-  width: 508px;
-  height: 220px;
-  border-radius: 4px;
-}
+
+
+@media only screen and (max-width: 996px) {
+  /*Mobile*/
+  .small_input {
+    width: 300px;
+    height: 56px;
+    border-radius: 4px;
+  }
+  
+  .large_input {
+    width: 300px;
+    height: 220px;
+    border-radius: 4px;
+  }
+  .send_button_container {
+    height: 59px;
+    width: 300px;
+    margin: var(--ifm-spacing-2xl) 0;
+  }
+  
+  }
+
+  @media only screen and (min-width: 996px) {
+    /*Desktop*/
+    .small_input {
+      width: 508px;
+      height: 56px;
+      border-radius: 4px;
+    }
+    
+    .large_input {
+      width: 508px;
+      height: 220px;
+      border-radius: 4px;
+    }
+    .send_button_container {
+      height: 59px;
+      width: 508px;
+      margin: var(--ifm-spacing-2xl) 0;
+    }
+    }
\ No newline at end of file
diff --git a/src/components/home/Hero/index.tsx b/src/components/home/Hero/index.tsx
index ab42e5e71..ffcf95301 100644
--- a/src/components/home/Hero/index.tsx
+++ b/src/components/home/Hero/index.tsx
@@ -7,28 +7,25 @@ export function Hero() {
     <div>
       <div className="main-container-with-margins">
         <div className="container upper-container-with-margin-top">
-          <div className={"row row--no-gutters" + " " + "flex-full-centered"}>
+          <div className={"row row--no-gutters flex-full-centered"}>
             <div className="col col--6 col--offset-1">
-    
-                <h1 className="padding-none">
-                  Open-source for discovery, science, and education
-                </h1>
-                <p className={styles.subheader}>
-                  A team behind major open-source projects of the scientific
-                  computing ecosystem
-                </p>
-                <h2 className={styles.h2_custom}>
-                  Jupyter, Conda-forge, Mamba, Voilà, Xtensor and more.
-                </h2>
-              </div>
-            
+              <h1 className="padding-none">
+                Open-source for discovery, science, and education
+              </h1>
+              <p className={styles.subheader}>
+                A team behind major open-source projects of the scientific
+                computing ecosystem
+              </p>
+              <h2 className={styles.h2_custom}>
+                Jupyter, Conda-forge, Mamba, Voilà, Xtensor and more.
+              </h2>
+            </div>
+
             <div
               className={
-                "col col--3 col--offset-1" +
-                " " +
-                styles.astronaut_column +
+                "col col--3 col--offset-1 flex-full-centered" +
                 " " +
-                "flex-full-centered"
+                styles.astronaut_column
               }
             >
               <div className={styles.astronaut_container}>
diff --git a/src/components/home/Hero/styles.module.css b/src/components/home/Hero/styles.module.css
index f5a151b02..c2b1a4334 100644
--- a/src/components/home/Hero/styles.module.css
+++ b/src/components/home/Hero/styles.module.css
@@ -28,7 +28,4 @@
 
 .sub_header {
   text-align: left;
-}
-.astronaut_container {
-  width: 300px;
-}
+}
\ No newline at end of file
diff --git a/src/components/home/LearnMore/styles.module.css b/src/components/home/LearnMore/styles.module.css
index b0e623c6d..838b19f99 100644
--- a/src/components/home/LearnMore/styles.module.css
+++ b/src/components/home/LearnMore/styles.module.css
@@ -3,11 +3,4 @@
   .learn_more_container {
     display: none;
   }
-}
-
-@media only screen and (max-width: 996px) {
-    /*Desktop*/
-    .learn_more_container {
-     
-    }
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/home/ProjectsOverview/Computing.tsx b/src/components/home/ProjectsOverview/Computing.tsx
index 8e9ca5f67..0dac1f148 100644
--- a/src/components/home/ProjectsOverview/Computing.tsx
+++ b/src/components/home/ProjectsOverview/Computing.tsx
@@ -17,7 +17,7 @@ export default function ComputingProjects() {
 
           <ComputingMD />
         </div>
-        <div className={"col col--5" + " " + "flex-full-centered"+ " " + styles.col_project_overview_with_padding}>
+        <div className={"col col--5 flex-full-centered"+ " " + styles.col_project_overview_with_padding}>
           <XTensorXSIMDPicture width={"500px"}/>
         </div>
       </div>
diff --git a/src/components/home/ProjectsOverview/Jupyter.tsx b/src/components/home/ProjectsOverview/Jupyter.tsx
index 62604ab30..e6c7c379d 100644
--- a/src/components/home/ProjectsOverview/Jupyter.tsx
+++ b/src/components/home/ProjectsOverview/Jupyter.tsx
@@ -18,7 +18,7 @@ export default function JupyterProject() {
         </div>
 
         <div
-          className={"col col--5" + " " + "flex-full-centered"+" " +styles.col_project_overview_with_padding}
+          className={"col col--5 flex-full-centered"+" " +styles.col_project_overview_with_padding}
         >
           <img src={JupyterPictureUrl} width={"540px"} alt={"Picture showing two jupyterlab user interfaces"}/>
         </div>
diff --git a/src/components/home/ProjectsOverview/SpecialProjects.tsx b/src/components/home/ProjectsOverview/SpecialProjects.tsx
index c0af6ab18..0bc409d69 100644
--- a/src/components/home/ProjectsOverview/SpecialProjects.tsx
+++ b/src/components/home/ProjectsOverview/SpecialProjects.tsx
@@ -15,7 +15,7 @@ export default function SpecialProjects() {
             
              <SpecialProjectsMD/> 
           </div>
-          <div className={"col col--5" + " " + "flex-full-centered"+ " "+ styles.col_project_overview_with_padding}>
+          <div className={"col col--5 flex-full-centered"+ " "+ styles.col_project_overview_with_padding}>
             <img src={SpecialProjectsPictureUrl} width={"540px"} alt={"Picture showing examples of Jupyter CAD projects in Jupyterlab."} />
           </div>
         </div>
diff --git a/src/components/home/ProjectsOverview/SupplyChain.tsx b/src/components/home/ProjectsOverview/SupplyChain.tsx
index 599579e70..d1f7694fe 100644
--- a/src/components/home/ProjectsOverview/SupplyChain.tsx
+++ b/src/components/home/ProjectsOverview/SupplyChain.tsx
@@ -21,9 +21,7 @@ export default function SupplyChainProjects() {
         </div>
         <div
           className={
-            "col col--5" +
-            " " +
-            "flex-full-centered" +
+            "col col--5 flex-full-centered" +
             " " +
             styles.col_project_overview_with_padding
           }
diff --git a/src/components/home/WhatWeDo/Topics.tsx b/src/components/home/WhatWeDo/Topics.tsx
index 299818d2c..4c1e8e8a4 100644
--- a/src/components/home/WhatWeDo/Topics.tsx
+++ b/src/components/home/WhatWeDo/Topics.tsx
@@ -9,7 +9,7 @@ const TopicsDescriptions = [JupyterMD, SupplyChainMD, ComputingMD];
 export function Topics() {
   return (
     <div>
-      <div className={"container flex-full-centered"}>
+      <div className="container flex-full-centered">
         <ul className="row flex-full-centered">
           {topicsDetails.map((topics, index) => (
             <li className="cards-list" key={index}>
diff --git a/src/components/home/WhatWeDo/TopicsCard.tsx b/src/components/home/WhatWeDo/TopicsCard.tsx
index 435fc2bdb..d1557e3c0 100644
--- a/src/components/home/WhatWeDo/TopicsCard.tsx
+++ b/src/components/home/WhatWeDo/TopicsCard.tsx
@@ -6,7 +6,7 @@ export function TopicsCard({ topics, TopicsDescriptionMD }) {
       <div className={"card__header" + " " + styles.topics_header}>
         {topics.name}
       </div>
-      <div className={"card__body"}>
+      <div className="card__body">
         <TopicsDescriptionMD />
       </div>
     </div>
diff --git a/src/components/home/WhatWeDo/index.tsx b/src/components/home/WhatWeDo/index.tsx
index 264bdd39a..29a1e1db6 100644
--- a/src/components/home/WhatWeDo/index.tsx
+++ b/src/components/home/WhatWeDo/index.tsx
@@ -6,29 +6,29 @@ import LinkToProjects from "../LinkToProjects";
 export function WhatWeDo() {
   return (
     <div className={"container" + " " + styles.whatwedo_container}>
-      <div className={"row"}>
-        <div className={"col flex-full-centered"}>
-          <div className={styles.services_link_container_mobile}>
+      <div className="row">
+        <div className="col flex-full-centered">
+          <div className={styles.services_link_mobile}>
             <LinkToServices label={"DISCOVER OUR SERVICES"} />
           </div>
         </div>
       </div>
-      <div className={"row"}>
-        <div className={"col flex-full-centered"}>
+      <div className="row">
+        <div className="col flex-full-centered">
           <h1 className={styles.header}> What we do </h1>
         </div>
       </div>
-      <div className={"row"}>
-        <div className={"col flex-full-centered"}>
+      <div className="row">
+        <div className="col flex-full-centered">
           <Topics />
         </div>
       </div>
-      <div className={"row"}>
-        <div className={"col flex-full-centered"}>
-          <div className={styles.projects_link_container}>
+      <div className="row">
+        <div className="col flex-full-centered">
+          <div className={styles.projects_link}>
             <LinkToProjects label={"DISCOVER ALL OF OUR PROJECTS"} />
           </div>
-          <div className={styles.services_link_container_desktop}>
+          <div className={styles.services_link_desktop}>
             <LinkToServices label={"DISCOVER OUR SERVICES"} />
           </div>
         </div>
diff --git a/src/components/home/WhatWeDo/styles.module.css b/src/components/home/WhatWeDo/styles.module.css
index f5cbeed1a..85ca2b5c1 100644
--- a/src/components/home/WhatWeDo/styles.module.css
+++ b/src/components/home/WhatWeDo/styles.module.css
@@ -30,7 +30,7 @@ div .topics_header {
     padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
   }
 
-  .services_link_container_desktop {
+  .services_link_desktop {
     display: none;
    }
 }
@@ -45,7 +45,7 @@ div .topics_header {
    display: none;
   }
 
-  .services_link_container_mobile {
+  .services_link_mobile {
     display: none;
    }
 
diff --git a/src/components/projects/AllProjects.tsx b/src/components/projects/AllProjects.tsx
index a815593a7..472594026 100644
--- a/src/components/projects/AllProjects.tsx
+++ b/src/components/projects/AllProjects.tsx
@@ -4,8 +4,8 @@ import ProjectCard from "./ProjectCard"
 
 export default function AllProjects() {
   return (
-    <div className={"container"}>
-      <ul className={"row"}>
+    <div className="container">
+      <ul className="row">
         {projectsDetails.map((project, index) => (
           <li className="cards-list" key={index}>
             <div className="col">
diff --git a/src/components/projects/Header.tsx b/src/components/projects/Header.tsx
index a52e6418a..836c8d77a 100644
--- a/src/components/projects/Header.tsx
+++ b/src/components/projects/Header.tsx
@@ -2,16 +2,18 @@ import styles from "./styles.module.css";
 import HeaderMD from "./descriptions/Header.md";
 
 export default function Header() {
-    return (
-      <div className={"container upper-container-with-margin-top"}>
+  return (
+    <div className={styles.header_container}>
+      <div className="container">
         <div className="row">
-          <div className={"col padding-none"+ " " + styles.header_container}>
+          <div className="col padding-none">
             <h1 className={styles.header_title}>Working in the open</h1>
             <div className={styles.header_text}>
-             <HeaderMD/>
+              <HeaderMD />
             </div>
           </div>
         </div>
       </div>
-    );
-  }
\ No newline at end of file
+    </div>
+  );
+}
diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
index 09e9b34aa..5d2abc97d 100644
--- a/src/components/projects/ProjectCard.tsx
+++ b/src/components/projects/ProjectCard.tsx
@@ -2,39 +2,37 @@ import styles from "./styles.module.css";
 
 export default function ProjectCard({ project }): JSX.Element {
   /*if (project.reverse === "false") {*/
-    return (
-      <div className="container">
-        <div className={"row row--no-gutters horizontally-centered"}>
-          <div className={"col col--6 col--offset-1" + " " + styles.col_project_text}>
-            <div className={styles.project_title}>{project.title}</div>
-            <div className={styles.project_description}>
-              <project.ProjectMD />
-            </div>
-          </div>
-          <div
-            className={
-              "col col--4" +
-              " " +
-              "flex-full-centered" +
-              " " +
-              "padding-none" +
-              " " +
-              styles.col_project_picture_right
-            }
-            style={{ border: project.pictureBorder }}
-          >
-            <div className={styles.col_project_picture}></div>
-            <img
-              src={project.pictureRoute}
-              width={project.pictureWidth}
-              height={project.pictureHeight}
-              alt={project.pictureAltText}
-            />
+  return (
+    <div className="container">
+      <div className="row row--no-gutters horizontally-centered">
+        <div
+          className={"col col--6 col--offset-1" + " " + styles.col_project_text}
+        >
+          <div className={styles.project_title}>{project.title}</div>
+          <div className={styles.project_description}>
+            <project.ProjectMD />
           </div>
         </div>
+        <div
+          className={
+            "col col--4 flex-full-centered padding-none" +
+            " " +
+            styles.col_project_picture_right
+          }
+          style={{ border: project.pictureBorder }}
+        >
+          <div className={styles.col_project_picture}></div>
+          <img
+            src={project.pictureRoute}
+            width={project.pictureWidth}
+            height={project.pictureHeight}
+            alt={project.pictureAltText}
+          />
+        </div>
       </div>
-    );
- /* } else if (project.reverse === "true") {
+    </div>
+  );
+  /* } else if (project.reverse === "true") {
     return (
       <div className="container">
         <div className={"row horizontally-centered"}>
@@ -66,4 +64,4 @@ export default function ProjectCard({ project }): JSX.Element {
       </div>
     );
   }*/
-}
\ No newline at end of file
+}
diff --git a/src/components/projects/ProjectPage.tsx b/src/components/projects/ProjectPage.tsx
deleted file mode 100644
index f62228132..000000000
--- a/src/components/projects/ProjectPage.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import styles from "@site/src/components/projects/styles.module.css";
-import ArrowLeftHeader from "../about/ArrowLeftHeader";
-
-export default function ProjectPage({
-  projectDetails,
-  name,
-  ProjectDescription,
-}) {
-  let project: any;
-  projectDetails.map((item) => {
-    if (item.name === name) {
-      project = { ...item };
-    }
-  });
-
-  return (
-    <div>
-      <ArrowLeftHeader route={"/projects/"}/>
-      <div className="padding-none">
-        <div className={styles.project_title_popup}>{project.name}</div>
-      </div>
-      <div className={styles.project_image_container}>
-        <img src={project.pictureRoute} width={"138px"} />
-      </div>
-      <div className={styles.project_description_container}>
-        <ProjectDescription />
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/projects/styles.module.css b/src/components/projects/styles.module.css
index 6a8b116ae..bff7362d9 100644
--- a/src/components/projects/styles.module.css
+++ b/src/components/projects/styles.module.css
@@ -29,17 +29,16 @@ div .project_title {
 @media only screen and (max-width: 996px) {
   /*Mobile*/
 
-  .header_container {
+  .header_container{
+    padding-top: var(--ifm-spacing-2xl);
     background-color: var(--ifm-color-primary-p1);
   }
-  
   .header_title {
     padding-left: none;
   }
 
   .header_text {
     font-family: var(--ifm-font-family-roboto);
-  
     color: var(--ifm-color-primary-p2);
     font-size: 14px;
     font-style: normal;
@@ -61,6 +60,9 @@ div .project_title {
 
 @media only screen and (min-width: 996px) {
   /*Desktop*/
+  .header_container{
+    margin-top: var(--ifm-spacing-6xl);
+  }
   .header_title {
     padding-left: var(--ifm-spacing-4xl);
   }
@@ -71,12 +73,15 @@ div .project_title {
     font-size: 22px;
     font-style: normal;
     font-weight: 400;
-    line-height: 28px; /* 142.857% */
-    text-align: center;
+    line-height: 28px; 
     margin-bottom: var(--ifm-spacing-6xl);
     padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl);
   }
 
+  .header_text p {
+    text-align: center;
+  }
+
   .col_project_text {
     background-color: var(--ifm-color-orange-light);
     padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
diff --git a/src/components/services/Header.tsx b/src/components/services/Header.tsx
index 49254c495..0bc1d7aba 100644
--- a/src/components/services/Header.tsx
+++ b/src/components/services/Header.tsx
@@ -1,6 +1,5 @@
 import styles from "./styles.module.css";
 
-
 export default function Header() {
   return (
     <div className="main-container-with-margins">
diff --git a/src/components/services/SpecialProjects.tsx b/src/components/services/SpecialProjects.tsx
index a5da4f7d1..2715653d7 100644
--- a/src/components/services/SpecialProjects.tsx
+++ b/src/components/services/SpecialProjects.tsx
@@ -1,10 +1,7 @@
-import styles from "./styles.module.css";
 import SpecialProjectsMD from "./descriptions/SpecialProjects.md";
-import { useEffect, useState } from "react";
-import SpecialProjectsIllustration from "@site/static/img/illustrations/special_projects.svg"
+import SpecialProjectsIllustration from "@site/static/img/illustrations/special_projects.svg";
 
-
-export function SpecialProjects() {
+export default function SpecialProjects() {
   return (
     <div className="main-container-with-margins">
       <div className="container upper-container-with-margin-top">
@@ -13,12 +10,12 @@ export function SpecialProjects() {
             <h2>Special projects</h2>
             <SpecialProjectsMD />
           </div>
-          <div className={"col col--5" + " " + "flex-full-centered"}>
+          <div className={"col col--5 flex-full-centered"}>
             <SpecialProjectsIllustration
               alt={
-                "Picture showing an illustration of a group of people working together in an office."}
-                width={"360px"}
-              
+                "Picture showing an illustration of a group of people working together in an office."
+              }
+              height={"300px"}
             />
           </div>
         </div>
@@ -26,5 +23,3 @@ export function SpecialProjects() {
     </div>
   );
 }
-
-export default SpecialProjects;
\ No newline at end of file
diff --git a/src/components/services/Support.tsx b/src/components/services/Support.tsx
index e897e32ed..2bfc68adf 100644
--- a/src/components/services/Support.tsx
+++ b/src/components/services/Support.tsx
@@ -1,15 +1,14 @@
-import styles from "./styles.module.css";
 import SupportMD from "./descriptions/Support.md";
 import SupportIllustration from "/img/illustrations/support.svg";
 
-export function Support() {
+export default function Support() {
   return (
     <div className="main-container-with-margins">
       <div className="container upper-container-with-margin-top">
         <div className="row">
           <div className="col col--4 col--offset-1">
-            <div className="flex-full-centered">
-              <SupportIllustration   width={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
+            <div className="flex-full-centered" style={{marginBottom:"var(--ifm-spacing-xl)"}}>
+              <SupportIllustration  height={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
             </div>
           </div>
           <div className={"col col--6"}>
@@ -20,6 +19,4 @@ export function Support() {
       </div>
     </div>
   );
-}
-
-export default Support;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/services/styles.module.css b/src/components/services/styles.module.css
index ae5caa7b5..33b070250 100644
--- a/src/components/services/styles.module.css
+++ b/src/components/services/styles.module.css
@@ -1,15 +1,31 @@
+.h2_custom {
+  color: var(--ifm-color-indigo-i1);
+}
 
-  .h2_custom {
+@media only screen and (max-width: 996px) {
+  /*Mobile*/
+  .transition {
+    font-family: var(--ifm-font-family-bebas-neue);
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 150%;
+    text-align: center;
+    margin-top: var(--ifm-spacing-2xl);
     color: var(--ifm-color-indigo-i1);
   }
+}
 
+@media only screen and (min-width: 996px) {
+  /*Desktop*/
   .transition {
     font-family: var(--ifm-font-family-bebas-neue);
     font-size: 40px;
     font-style: normal;
-    font-weight: bolder;
+    font-weight: 600;
     line-height: 150%;
     text-align: center;
     margin-top: var(--ifm-spacing-4xl);
     color: var(--ifm-color-indigo-i1);
   }
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 65f90b590..cb15e4387 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -73,7 +73,7 @@
 }
 
 .margin-none {
-  margin: none;
+  margin: 0;
 }
 
 .padding-none {
@@ -93,6 +93,67 @@ ul {
   padding: 0;
 }
 
+/***footer*****/
+.address {
+  color: var(--ifm-text-color-footer);
+}
+
+.footer__item {
+  color: var(--ifm-text-color-footer);
+}
+
+.footer__copyright {
+  color: var(--ifm-text-color-footer);
+}
+
+.footer {
+  background-color: var(--ifm-background-color-footer);
+  color: var(--ifm-text-color-footer);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  max-width: none;
+  padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
+}
+
+.footer__col {
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  height: 240px;
+}
+
+.row.footer__links {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  color: var(--ifm-text-color-footer);
+}
+
+.footer__title {
+  color: var(--ifm-text-color-footer);
+}
+
+.footer__bottom {
+  margin-top: var(--ifm-spacing-xl);
+}
+
+.footer__link-item {
+  color: var(--ifm-text-color-footer);
+}
+
+.footer-astronaut {
+  display: flex;
+  text-align: left;
+  margin-right: var(--ifm-spacing-lg);
+  width: 200px;
+  height: 200px;
+  padding: 10px;
+}
+
 @media (min-width: 1440px) {
   .container {
     max-width: none;
@@ -113,7 +174,19 @@ ul {
   }
 
   .upper-container-with-margin-top {
-    margin-top: var(--ifm-spacing-2xl)
+    margin-top: var(--ifm-spacing-2xl);
+  }
+
+  .row-with-margin-top {
+    margin-top: var(--ifm-spacing-xl);
+  }
+
+  .row-with-margin-bottom {
+    margin-bottom: var(--ifm-spacing-xl);
+  }
+
+  .row-with-margins {
+    margin: var(--ifm-spacing-xl) 0;
   }
 
   h1 {
@@ -156,7 +229,7 @@ ul {
     font-size: 16px;
     font-weight: 500;
     color: var(--ifm-color-secondary-s2);
-    padding-top: var(--ifm-spacing-2xl);
+    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg) 0 var(--ifm-spacing-lg);
     background-color: var(--ifm-color-secondary-s1);
     line-height: 20px;
     letter-spacing: 0.1px;
@@ -174,6 +247,7 @@ ul {
     background-color: var(--ifm-color-secondary-s1);
     color: var(--ifm-color-secondary-s2);
   }
+
   .link-to-button {
     width: 258px;
     height: 56px;
@@ -192,7 +266,7 @@ ul {
     margin-top: var(--ifm-spacing-lg);
     margin-bottom: var(--ifm-spacing-lg);
   }
-  
+
   .link-box {
     height: 59px;
     width: auto;
@@ -201,7 +275,6 @@ ul {
     justify-content: center;
   }
 }
-/***************************************************/
 
 /******  Class that are specific to larger screens*/
 @media (min-width: 996px) {
@@ -213,9 +286,22 @@ ul {
   }
 
   .upper-container-with-margin-top {
-    margin-top: var(--ifm-spacing-6xl)
+    margin-top: var(--ifm-spacing-6xl);
+  }
+
+  .row-with-margin-top {
+    margin-top: var(--ifm-spacing-2xl);
+  }
+
+  .row-with-margin-bottom {
+    margin-bottom: var(--ifm-spacing-2xl);
+  }
+
+  .row-with-margins {
+    margin: var(--ifm-spacing-2xl) 0;
   }
 
+
   h1 {
     color: var(--ifm-color-primary-p2);
     font-family: var(--ifm-font-family-bebas-neue);
@@ -254,7 +340,8 @@ ul {
     line-height: 150%;
     background-color: var(--ifm-color-secondary-s1);
     color: var(--ifm-color-secondary-s2);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-4xl) 0 var(--ifm-spacing-4xl);
+    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-4xl) 0
+      var(--ifm-spacing-4xl);
   }
 
   .blue-banner-header {
@@ -267,7 +354,7 @@ ul {
     letter-spacing: 2.112px;
     background-color: var(--ifm-color-secondary-s1);
     color: var(--ifm-color-secondary-s2);
-    margin-bottom:var(--ifm-spacing-2xl);
+    margin-bottom: var(--ifm-spacing-2xl);
   }
 
   .link-to-button {
@@ -288,7 +375,7 @@ ul {
     margin-top: var(--ifm-spacing-2xl);
     margin-bottom: var(--ifm-spacing-2xl);
   }
-  
+
   .link-box {
     height: 59px;
     width: auto;
@@ -296,7 +383,6 @@ ul {
     align-items: center;
     justify-content: center;
   }
-  
 }
 /***********************************************************/
 
@@ -388,65 +474,6 @@ ul {
   justify-content: center;
 }
 
-.quantstack-address {
-  color: var(--ifm-text-color-footer);
-}
-
-.footer__item {
-  color: var(--ifm-text-color-footer);
-}
-
-.footer__copyright {
-  color: var(--ifm-text-color-footer);
-}
-
-.footer {
-  background-color: var(--ifm-background-color-footer);
-  color: var(--ifm-text-color-footer);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  max-width: none;
-}
-
-.row.footer__links {
-  display: flex;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  color: var(--ifm-text-color-footer);
-}
-
-.footer__title {
-  color: var(--ifm-text-color-footer);
-}
-
-.footer__bottom {
-  margin-top: var(--ifm-spacing-xl);
-}
-
-.footer__col {
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  height: 240px;
-}
-
-.footer__link-item {
-  color: var(--ifm-text-color-footer);
-}
-
-.footer-astronaut {
-  display: flex;
-  text-align: left;
-  margin-right: var(--ifm-spacing-lg);
-  width: 200px;
-  height: 200px;
-  padding: 10px;
-}
-
 .social-media-links {
   margin-left: var(--ifm-spacing-3xl);
   text-align: start;
@@ -554,35 +581,7 @@ a.menu__link:active {
   color: black;
 }
 
-/*.quantstack-icon-white {
-  background: url(@site/static/img/quantstack/logo-website-white.svg);
-  content: "";
-  display: flex;
-  height: 40px;
-  width: 40px;
-  background-repeat: no-repeat;
-}
-
-
-.quantstack-icon-black {
-  background: url(@site/static/img/quantstack/logo-website-black.svg);
-  content: "";
-  display: flex;
-  height: 40px;
-  width: 40px;
-  background-repeat: no-repeat;
-}*/
-
-.quantstack-astronaut {
-  background: url(@site/static/img/quantstack/astronaut.svg);
-  content: "";
-  display: flex;
-  height: 100px;
-  width: 100px;
-  background-repeat: no-repeat;
-}
-
-.quantstack-astronaut-footer {
+.astronaut-footer {
   background: url(@site/static/img/quantstack/astronaut-footer.svg);
   content: "";
   display: flex;
@@ -630,7 +629,7 @@ a.menu__link:active {
   background-repeat: no-repeat;
 }
 
-.close-button { 
+.close-button {
   background: url(@site/static/img/icons/CloseButton.svg);
   content: "";
   display: flex;
diff --git a/src/pages/about/Alexis.tsx b/src/pages/about/Alexis.tsx
deleted file mode 100644
index 49152a325..000000000
--- a/src/pages/about/Alexis.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import AlexisMD from "@site/src/components/about/Team/Alexis.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-import PortraitPopup from "@site/src/components/about/mobile/PortraitPopup";
-
-export default function Alexis() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <AlexisMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Anastasiia.tsx b/src/pages/about/Anastasiia.tsx
deleted file mode 100644
index 41cfe8c12..000000000
--- a/src/pages/about/Anastasiia.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import AnastasiiaMD from "@site/src/components/about/Team/Anastasiia.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Anastasiia() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <AnastasiiaMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Andreas.tsx b/src/pages/about/Andreas.tsx
deleted file mode 100644
index 7ffc43e93..000000000
--- a/src/pages/about/Andreas.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import AndreasMD from "@site/src/components/about/Team/Andreas.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Andreas() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <AndreasMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Anutosh.tsx b/src/pages/about/Anutosh.tsx
deleted file mode 100644
index 7518a683a..000000000
--- a/src/pages/about/Anutosh.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import AnutoshMD from "@site/src/components/about/Team/Anutosh.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Anutosh() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <AnutoshMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Darian.tsx b/src/pages/about/Darian.tsx
deleted file mode 100644
index a0df105aa..000000000
--- a/src/pages/about/Darian.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import DarianMD from "@site/src/components/about/Team/Darian.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Darian() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <DarianMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/David.tsx b/src/pages/about/David.tsx
deleted file mode 100644
index 6429adf56..000000000
--- a/src/pages/about/David.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import DavidMD from "@site/src/components/about/Team/David.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function David() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <DavidMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Denisa.tsx b/src/pages/about/Denisa.tsx
deleted file mode 100644
index 98bb4e40d..000000000
--- a/src/pages/about/Denisa.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import DenisaMD from "@site/src/components/about/Team/Denisa.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Denisa() {
-  return (
-    <div>
-     <ArrowLeftHeader route={"/about"}/>
-      <div className={styles.bio_container}>
-      <DenisaMD  />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Florence.tsx b/src/pages/about/Florence.tsx
deleted file mode 100644
index dc956e35a..000000000
--- a/src/pages/about/Florence.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import FlorenceMD from "@site/src/components/about/Team/Florence.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Florence() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <FlorenceMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Gabriela.tsx b/src/pages/about/Gabriela.tsx
deleted file mode 100644
index 420bd43f0..000000000
--- a/src/pages/about/Gabriela.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import GabrielaMD from "@site/src/components/about/Team/Gabriela.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Gabriela() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <GabrielaMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Greg.tsx b/src/pages/about/Greg.tsx
deleted file mode 100644
index 8e28a6388..000000000
--- a/src/pages/about/Greg.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import GregMD from "@site/src/components/about/Team/Greg.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Greg() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <GregMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Hind.tsx b/src/pages/about/Hind.tsx
deleted file mode 100644
index bb392eea0..000000000
--- a/src/pages/about/Hind.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import HindMD from "@site/src/components/about/Team/Hind.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Hind() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <HindMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Ian.tsx b/src/pages/about/Ian.tsx
deleted file mode 100644
index 4470eda02..000000000
--- a/src/pages/about/Ian.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import IanMD from "@site/src/components/about/Team/Ian.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Ian() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <IanMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Isabel.tsx b/src/pages/about/Isabel.tsx
deleted file mode 100644
index f6063333b..000000000
--- a/src/pages/about/Isabel.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import IsabelMD from "@site/src/components/about/Team/Isabel.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Isabel() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <IsabelMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Jeremy.tsx b/src/pages/about/Jeremy.tsx
deleted file mode 100644
index a829362e8..000000000
--- a/src/pages/about/Jeremy.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import JeremyMD from "@site/src/components/about/Team/Jeremy.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Jeremy() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <JeremyMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Joel.tsx b/src/pages/about/Joel.tsx
deleted file mode 100644
index 66b57cf18..000000000
--- a/src/pages/about/Joel.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import JoelMD from "@site/src/components/about/Team/Joel.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Joel() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <JoelMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Johan.tsx b/src/pages/about/Johan.tsx
deleted file mode 100644
index 62e293199..000000000
--- a/src/pages/about/Johan.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import JohanMD from "@site/src/components/about/Team/Johan.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Johan() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <JohanMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Julien.tsx b/src/pages/about/Julien.tsx
deleted file mode 100644
index 2a01100cf..000000000
--- a/src/pages/about/Julien.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import JulienMD from "@site/src/components/about/Team/Julien.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Julien() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <JulienMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Kerim.tsx b/src/pages/about/Kerim.tsx
deleted file mode 100644
index 9f946c1f3..000000000
--- a/src/pages/about/Kerim.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import KerimMD from "@site/src/components/about/Team/Kerim.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Kerim() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <KerimMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Martin.tsx b/src/pages/about/Martin.tsx
deleted file mode 100644
index 75362bc54..000000000
--- a/src/pages/about/Martin.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import MartinMD from "@site/src/components/about/Team/Martin.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Martin() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <MartinMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Meriem.tsx b/src/pages/about/Meriem.tsx
deleted file mode 100644
index 104dc2495..000000000
--- a/src/pages/about/Meriem.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import MeriemMD from "@site/src/components/about/Team/Meriem.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Meriem() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <MeriemMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Nicolas.tsx b/src/pages/about/Nicolas.tsx
deleted file mode 100644
index 4fff29c4a..000000000
--- a/src/pages/about/Nicolas.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import NicolasMD from "@site/src/components/about/Team/Nicolas.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Nicolas() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <NicolasMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Nour.tsx b/src/pages/about/Nour.tsx
deleted file mode 100644
index 2a4314dcc..000000000
--- a/src/pages/about/Nour.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import NourMD from "@site/src/components/about/Team/Nour.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Nour() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <NourMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Romain.tsx b/src/pages/about/Romain.tsx
deleted file mode 100644
index 478138f63..000000000
--- a/src/pages/about/Romain.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import RomainMD from "@site/src/components/about/Team/Romain.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Romain() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <RomainMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Serge.tsx b/src/pages/about/Serge.tsx
deleted file mode 100644
index 31fa1a25b..000000000
--- a/src/pages/about/Serge.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import SergeMD from "@site/src/components/about/Team/Serge.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Serge() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <SergeMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Sylvain.tsx b/src/pages/about/Sylvain.tsx
deleted file mode 100644
index 041890fbb..000000000
--- a/src/pages/about/Sylvain.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import SylvainMD from "@site/src/components/about/Team/Sylvain.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Sylvain() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <SylvainMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Thorsten.tsx b/src/pages/about/Thorsten.tsx
deleted file mode 100644
index 24cbd3ea2..000000000
--- a/src/pages/about/Thorsten.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import ThorstenMD from "@site/src/components/about/Team/Thorsten.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Thorsten() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <ThorstenMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/about/Trung.tsx b/src/pages/about/Trung.tsx
deleted file mode 100644
index c9350b8bf..000000000
--- a/src/pages/about/Trung.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import TrungMD from "@site/src/components/about/Team/Trung.md";
-import styles from "@site/src/components/about/styles.module.css";
-import ArrowLeftHeader from "@site/src/components/about/ArrowLeftHeader";
-
-export default function Trung() {
-  return (
-    <div>
-      <ArrowLeftHeader route={"/about/"} />
-      <div className={styles.bio_container}>
-        <TrungMD />
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/projects/condaforge.tsx b/src/pages/projects/condaforge.tsx
deleted file mode 100644
index 082910de1..000000000
--- a/src/pages/projects/condaforge.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import CondaForgeDescription from "@site/src/components/projects/descriptions/CondaForge.md";
-import ProjectPopup from "@site/src/components/projects/ProjectPage";
-import { projectsDetails } from "@site/src/components/projects/descriptions/projectsDetails";
-
-export default function CondaForge() {
-  return (
-    <ProjectPopup name="condaforge" projectDetails={projectsDetails} ProjectDescription={CondaForgeDescription}/>
-  )
-}
diff --git a/src/pages/projects/jupyter.tsx b/src/pages/projects/jupyter.tsx
deleted file mode 100644
index 855f82496..000000000
--- a/src/pages/projects/jupyter.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import JupyterDescription from "@site/src/components/projects/descriptions/Jupyter.md";
-import ProjectPopup from "@site/src/components/projects/ProjectPage";
-import { projectsDetails } from "@site/src/components/projects/descriptions/projectsDetails";
-
-export default function Jupyter() {
-  return (
-    <ProjectPopup name="jupyter" projectDetails={projectsDetails} ProjectDescription={JupyterDescription}/>
-  )
-}
\ No newline at end of file
diff --git a/src/pages/projects/robotics.tsx b/src/pages/projects/robotics.tsx
deleted file mode 100644
index d22fedd3b..000000000
--- a/src/pages/projects/robotics.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import RoboticsDescription from "@site/src/components/projects/descriptions/Robotics.md";
-import ProjectPopup from "@site/src/components/projects/ProjectPage";
-import { projectsDetails } from "@site/src/components/projects/descriptions/projectsDetails";
-
-export default function Robotics() {
-  return (
-    <ProjectPopup name="robotics" projectDetails={projectsDetails} ProjectDescription={RoboticsDescription}/>
-  )
-}
\ No newline at end of file
diff --git a/src/pages/projects/xtensorxsimd.tsx b/src/pages/projects/xtensorxsimd.tsx
deleted file mode 100644
index a70298872..000000000
--- a/src/pages/projects/xtensorxsimd.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import XtensorXsimdDescription from "@site/src/components/projects/descriptions/XTensorXSIMD.md";
-import ProjectPopup from "@site/src/components/projects/ProjectPage";
-import { projectsDetails } from "@site/src/components/projects/descriptions/projectsDetails";
-
-export default function XTensorXSIMD() {
-  return (
-    <ProjectPopup name="xtensorxsimd" projectDetails={projectsDetails} ProjectDescription={XtensorXsimdDescription}/>
-  )
-}
\ No newline at end of file