feat: include cfp section (#348)

* feat: include cfp section

* feat: include cfp section

* test: include cfp section

* test: include CfpTrackComponent tests

* test: include Imma Valls info

* feat: optimize images.

reduce cumulative layout shift

* feat: optimize images.

reduce cumulative layout shift

* feat: optimize images.

reduce cumulative layout shift

Author: anyulled

public/images/cfp/alberto.jpg

@@ -16,6 +16,12 @@
       "src": "logo512.png",
       "type": "image/png",
       "sizes": "512x512"
+    },
+    {
+      "src": "maskable_icon_x192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "maskable"
     }
   ],
   "start_url": ".",

public/images/cfp/alienor.jpg

@@ -15,6 +15,7 @@ import {
   ROUTE_2023_TALKS,
   ROUTE_2023_WORKSHOPS,
   ROUTE_ABOUT_US,
+  ROUTE_CFP,
   ROUTE_CODE_OF_CONDUCT,
   ROUTE_CONDITIONS,
   ROUTE_COOKIES,
@@ -66,6 +67,7 @@ import Workshops2023 from "./2023/Workshops/Workshops2023";
 import JobOffers2023 from "./2023/JobOffers/JobOffers2023";
 import Sponsorship from "./views/sponsorship/Sponsorship";
 import Diversity2023 from "./2023/Diversity/Diversity2023";
+import CfpSection from "./views/Cfp/CfpSection";
 
 const StyledAppWrapper = styled.div`
   position: relative;
@@ -123,7 +125,7 @@ const App: FC<React.PropsWithChildren<unknown>> = () => {
           <Route path={ROUTE_SPEAKERS} element={<Speakers />} />
           <Route path={ROUTE_SPEAKER_INFO} element={<SpeakerInformation />} />
           <Route path={ROUTE_ABOUT_US} element={<About />} />
-          {/*<Route path={ROUTE_CFP} element={<CfpSection />} />*/}
+          <Route path={ROUTE_CFP} element={<CfpSection />} />
           <Route path={ROUTE_TRAVEL} element={<Travel />} />
           {/*<Route path={ROUTE_COMMUNITIES} element={<Communities />} />*/}
           {/*<Route path={ROUTE_ATTENDEE} element={<AttendeeInformation />} />*/}

public/images/cfp/ana_carmona.jpg

@@ -1,15 +1,19 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { StyledSocialMediaWrapper } from "./Twitter";
 
 interface ILinkedinIconProps {
   color: string;
   linkedinUrl: string;
 }
 
-const LinkedinIcon: FC<React.PropsWithChildren<ILinkedinIconProps>> = ({ color, linkedinUrl }) => {
+const LinkedinIcon: FC<React.PropsWithChildren<ILinkedinIconProps>> = ({
+  color,
+  linkedinUrl,
+}) => {
   return (
     <StyledSocialMediaWrapper href={linkedinUrl} target={"_blank"}>
       <svg
+        data-icon="linkedin-icon"
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"

public/images/cfp/ara.png

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import styled from "styled-components";
 
 interface ITwitterIconProps {
@@ -11,14 +11,18 @@ export const StyledSocialMediaWrapper = styled.a`
   max-width: 24px;
   margin-right: 0.5rem;
 `;
-const TwitterIcon: FC<React.PropsWithChildren<ITwitterIconProps>> = ({ color, twitterUrl }) => {
+const TwitterIcon: FC<React.PropsWithChildren<ITwitterIconProps>> = ({
+  color,
+  twitterUrl,
+}) => {
   return (
     <StyledSocialMediaWrapper
       href={twitterUrl}
       target="_blank"
       rel="noopener noreferrer"
     >
       <svg
+        data-icon="twitter-icon"
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"

public/images/cfp/carles_nunez.jpg

@@ -1,5 +1,6 @@
 import {
   ROUTE_ABOUT_US,
+  ROUTE_CFP,
   ROUTE_CODE_OF_CONDUCT,
   ROUTE_HOME,
   ROUTE_KCD,
@@ -32,7 +33,7 @@ export const navigationItems: NavigationItem[] = [
 
 export const subMenuItems: NavigationItem[] = [
   //{ id: "DIVERSITY", link: ROUTE_DIVERSITY },
-  //{ id: "Cfp Committee", link: ROUTE_CFP },
+  { id: "Cfp Committee", link: ROUTE_CFP },
   //{ id: "Attendee information", link: ROUTE_ATTENDEE },
   //{ id: "Speaker information", link: ROUTE_SPEAKER_INFO },
   //{ id: "Session feedback", link: ROUTE_SESSION_FEEDBACK },

public/images/cfp/celeste.png

@@ -9,6 +9,7 @@ export const StyledAboutCard = styled.div`
 export const StyledAboutImage = styled.img`
   width: 100%;
   max-height: 20rem;
+  aspect-ratio: 1/1;
   border-radius: 30% 70% 70% 30% / 30% 29% 71% 70%;
 `;
 export const StyledAboutName = styled.h4<{ color: string }>`

public/images/cfp/elena_tajadura.jpeg

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { Color } from "../../styles/colors";
+
+export const TrackName = styled.h2`
+  padding-top: 1.2rem;
+  padding-bottom: 0.8rem;
+  font-size: 1.5rem;
+  color: ${Color.DARK_BLUE};
+`;
+export const MemberName = styled.h5`
+  font-size: 0.8rem;
+  color: ${Color.DARK_BLUE};
+  text-align: left;
+`;

public/images/cfp/esther.png

@@ -6,23 +6,16 @@ interface CFpTrack {
 
 interface CfpMember {
   name: string;
-  photo: string;
-  linkedIn: string;
-  twitter: string;
+  photo?: string;
+  linkedIn?: string;
+  twitter?: string;
 }
 
 export const data: CFpTrack[] = [
   {
-    id: "656fece2-9447-4dbe-8a78-8dc6aa7124f2",
     name: "Java & JVM",
+    id: "656fece2-9447-4dbe-8a78-8dc6aa7124f2",
     members: [
-      {
-        name: "Alex Soto",
-        photo:
-          "https://cache.sessionize.com/image/fd7e-400o400o2-11-34e0-466e-a5cb-ea585688d106.4f3f7614-bc5e-4ccd-935a-1c3659eec5e8.jpg",
-        twitter: "https://twitter.com/alexsotob",
-        linkedIn: "https://www.linkedin.com/in/asotobu/",
-      },
       {
         name: "Ana Maria Mihalceanu",
         photo:
@@ -51,44 +44,6 @@ export const data: CFpTrack[] = [
       },
     ],
   },
-  {
-    name: "Native Languages",
-    id: "1c22cd3b-73e3-4161-9124-696f3e2f1249",
-    members: [
-      {
-        name: "Aliénor Latour",
-        twitter: "",
-        photo: "images/cfp/alienor.jpg",
-        linkedIn: "https://www.linkedin.com/in/alienor-latour/",
-      },
-      {
-        name: "Donia Chaiehloudj",
-        twitter: "https://twitter.com/doniacld",
-        photo:
-          "https://pbs.twimg.com/profile_images/1590642319589609472/zObYSeID_400x400.jpg",
-        linkedIn: "https://www.linkedin.com/in/donia-chaiehloudj",
-      },
-      {
-        name: "Gonzalo Serrano",
-        twitter: "https://twitter.com/gonzaloserrano",
-        photo: "images/cfp/gonzalo.jpg",
-        linkedIn: "https://www.linkedin.com/in/gonzaloserranorevuelta/",
-      },
-      {
-        name: "Mario Macías",
-        twitter: "https://twitter.com/MaciasUPC",
-        photo: "images/cfp/mario-macias.png",
-        linkedIn: "https://www.linkedin.com/in/mariomac/",
-      },
-      {
-        name: "Mario Vázquez",
-        twitter: "https://twitter.com/mvazce",
-        photo:
-          "https://pbs.twimg.com/profile_images/988297919009841152/h4eKlvUM_400x400.jpg",
-        linkedIn: "https://www.linkedin.com/in/mariovazquezcebrian/",
-      },
-    ],
-  },
   {
     name: "Frontend",
     id: "2684b568-2836-4713-99af-643f8a4d7972",
@@ -99,49 +54,41 @@ export const data: CFpTrack[] = [
         twitter: "https://twitter.com/iagolast",
         linkedIn: "https://www.linkedin.com/in/iagolast/",
       },
-      {
-        name: "Josue David Rios Diaz",
-        photo:
-          "https://pbs.twimg.com/profile_images/951236352049385472/6rRKHJsE_400x400.jpg",
-        twitter: "https://twitter.com/jdriosdiaz",
-        linkedIn: "https://www.linkedin.com/in/jdriosd/",
-      },
       {
         name: "Laura Rodriguez Castillo",
         photo: "images/cfp/laura.jpeg",
         twitter: "https://twitter.com/superpensando",
         linkedIn: "https://linkedin.com/in/laurarodriguezcastillo",
       },
+      {
+        name: "Carles Nuñez",
+        twitter: "https://twitter.com/carlesnunez",
+        linkedIn: "https://www.linkedin.com/in/carles-nunez-tomeo/",
+        photo: "images/cfp/carles_nunez.jpg",
+      },
+      {
+        name: "Phil Nash",
+        linkedIn: "https://www.linkedin.com/in/philnash/",
+      },
     ],
   },
   {
     name: "AI, ML, Python",
     id: "c1ec728d-03c1-4d8d-9f56-637bc97f5a5b",
     members: [
-      {
-        name: "Alberto Camara",
-        photo: "images/cfp/alberto.jpg",
-        twitter: "https://twitter.com/b3r2s",
-        linkedIn: "https://www.linkedin.com/in/alberto-camara/",
-      },
       {
         name: "Carmen Herrero",
-        photo: "",
-        twitter: "",
-        linkedIn: "",
+        linkedIn: "https://www.linkedin.com/in/carherrero/",
       },
       {
-        name: "Gema Parreño",
-        photo: "",
-        twitter: "",
-        linkedIn: "",
+        name: "Elena Tajadura",
+        photo: "images/cfp/elena_tajadura.jpeg",
+        linkedIn:
+          "https://www.linkedin.com/in/elena-tajadura-jim%C3%A9nez-9300a943/",
       },
       {
-        name: "Rubén Berenguel",
-        photo:
-          "https://pbs.twimg.com/profile_images/1393898544600342528/hghgDpMM_400x400.jpg",
-        twitter: "https://twitter.com/berenguel",
-        linkedIn: "https://www.linkedin.com/in/rberenguel/",
+        name: "Javier Menendez",
+        linkedIn: "https://www.linkedin.com/in/jamepa/",
       },
     ],
   },
@@ -150,30 +97,45 @@ export const data: CFpTrack[] = [
     id: "504cf03b-130d-4b70-a98c-c4faeb553b5e",
     members: [
       {
-        name: "Ara Pulido",
-        photo: "images/cfp/ara.png",
-        twitter: "https://twitter.com/arapulido",
-        linkedIn: "https://www.linkedin.com/in/arapulido/",
+        name: "Almudena Vivanco",
+        linkedIn: "https://www.linkedin.com/in/almudenavivanco/",
       },
       {
-        name: "Mario Macías",
-        twitter: "https://twitter.com/MaciasUPC",
-        photo: "images/cfp/mario-macias.png",
-        linkedIn: "https://www.linkedin.com/in/mariomac/",
+        name: "Ana Carmona",
+        photo: "images/cfp/ana_carmona.jpg",
+        twitter: "https://twitter.com/nhan_bcn",
+        linkedIn:
+          "https://www.linkedin.com/in/ana-carmona-ag?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app",
       },
       {
-        name: "Mario Vázquez",
-        twitter: "https://twitter.com/mvazce",
-        photo:
-          "https://pbs.twimg.com/profile_images/988297919009841152/h4eKlvUM_400x400.jpg",
-        linkedIn: "https://www.linkedin.com/in/mariovazquezcebrian/",
+        name: "Christian Polanco",
+        linkedIn: "https://www.linkedin.com/in/chrsalx/",
       },
       {
-        name: "Raquel Pau Fernández",
-        photo:
-          "https://pbs.twimg.com/profile_images/1253338486200909828/uBuKfSsj_400x400.jpg",
-        twitter: "https://twitter.com/raquelpau",
-        linkedIn: "https://www.linkedin.com/in/raquel-pau-4010069",
+        name: "David Ricordel",
+        linkedIn: "https://www.linkedin.com/in/davidricordel/",
+      },
+      {
+        name: "Jose Adan Ortiz",
+        photo: "images/cfp/jose-adan-ortiz-k8s-2024.JPG",
+        twitter: "https://twitter.com/joseadanof",
+        linkedIn: "https://www.linkedin.com/in/joseadan/",
+      },
+      {
+        name: "Pablo Chacin",
+        photo: "images/cfp/pablo_chacin.jpeg",
+        twitter: "https://twitter.com/pablochacin",
+        linkedIn: "https://www.linkedin.com/in/pablochacin/",
+      },
+      {
+        name: "Rael Garcia",
+        linkedIn: "https://www.linkedin.com/in/rael/",
+      },
+      {
+        name: "Imma Valls",
+        photo: "images/cfp/imma-valls.jpg",
+        twitter: "https://twitter.com/eyeveebee",
+        linkedIn: "https://www.linkedin.com/in/imma-valls",
       },
     ],
   },
@@ -182,22 +144,18 @@ export const data: CFpTrack[] = [
     id: "1d04d5bf-4b94-4e56-b0c6-ee93b3bb8c1f",
     members: [
       {
-        name: "Celeste Gamez",
-        photo: "images/cfp/celeste.png",
-        twitter: "https://images.app.goo.gl/39E8eisV8TiULPQk8",
-        linkedIn: "https://www.linkedin.com/in/celeste-g%C3%A1mez-73640460/",
+        name: "Elena Navarro",
+        linkedIn: "https://www.linkedin.com/in/elena-navarro-molina",
       },
       {
-        name: "Esther Gala",
-        photo: "images/cfp/esther.png",
-        twitter: "",
-        linkedIn: "https://www.linkedin.com/in/esthergala/",
+        name: "Jaume Jornet",
+        linkedIn: "https://www.linkedin.com/in/jaumejornet/",
       },
       {
-        name: "María Mira Herreros",
-        photo: "images/cfp/maria.png",
-        twitter: "",
-        linkedIn: "https://www.linkedin.com/in/miramaria",
+        name: "Julio César Pérez",
+        photo: "images/cfp/julio_cesar.jpg",
+        linkedIn: "https://www.linkedin.com/in/juliocesarperezarques/",
+        twitter: "https://twitter.com/jcesarperez",
       },
       {
         name: "Toni Tassani",

public/images/cfp/gonzalo.jpg

@@ -0,0 +1,28 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import CfpSection from "./CfpSection";
+import conferenceData from "../../data/2024.json";
+import { data } from "./CfpData";
+
+describe("CfpSection", () => {
+  it("sets document title on mount", () => {
+    render(<CfpSection />);
+    expect(document.title).toBe(
+      `CFP Committee — ${conferenceData.title}— ${conferenceData.edition}`,
+    );
+  });
+
+  it("renders TitleSection with correct props", () => {
+    render(<CfpSection />);
+    expect(screen.getByText(/CFP Committee/)).toBeInTheDocument();
+    expect(screen.getByText(/We're excited to announce/)).toBeInTheDocument();
+  });
+
+  it("renders a CfpTrackComponent for each track in data", () => {
+    render(<CfpSection />);
+    data.forEach((track) => {
+      expect(screen.getByText(track.name)).toBeInTheDocument();
+    });
+  });
+});