Take review comments into account.

Author: HaudinFlorence

package-lock.json

@@ -13,7 +13,7 @@ export function Distinction({ person }) {
       {HasPersonDistinction ? (
         <ul style={{paddingLeft: "0px"}}>
           {person.distinctionTitle.map((distinction, index) => (
-            <li className="items-list" key={person.firstName}>
+            <li className="items-list" key={person.pageName}>
               <div>
                 <Link href={person.distinctionLink[index]}>
                   <DistinctionIcon className={styles.distinction_icon} />

src/components/about/LargePortraitCard.tsx

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import { Route } from 'react-router-dom';
 import { About } from '@site/src/components/about'
 import LargePortraitCard from '@site/src/components/about/LargePortraitCard';
-import { getTeamByPersonName } from '@site/src/components/about';
+import { getTeamByPageName } from '@site/src/components/about';
 import styles from "@site/src/components/about/styles.module.css";
 
 export default function LargePortraitCardPage() {
@@ -46,11 +46,11 @@ export default function LargePortraitCardPage() {
     <Layout>
       <About />
       <Route
-        path="/about/:completeName"
-        render={({ history, match }) => {
-          const { completeName } = match.params; /* extract the dynamic part from the url i.e. the completeName*/
-          const teamMembers = getTeamByPersonName(completeName);
-          const person = teamMembers.find((person) => person.completeName.replace(/\s+/g, '').normalize("NFD").replace(/[\u0300-\u036f]/g, '') === completeName);
+        path="/about/:pageName"
+        render={({ match }) => {
+          const { pageName } = match.params; /* extract the dynamic part from the url i.e. the pageName*/
+          const teamMembers = getTeamByPageName(pageName);
+          const person = teamMembers.find((person) => person.pageName== pageName);
           if (!person) return null;
 
           return (

src/components/about/LargePortraitCardPage.tsx

@@ -8,7 +8,7 @@ export default function SubTeam({ subTeamName, subTeam }) {
       <div className={"container"}>
         <ul className="row padding-none flex-full-centered row-with-margin-top">
           {subTeam.map((person, index) => (
-            <li className="cards-list" key={person.firstName}>
+            <li className="cards-list" key={person.pageName}>
               <div className="col">
                 <SmallPortraitCard person={person} />
               </div>