Add talks and workshops, and perosn photos (#36)

src/assets/people/speakers/index.js

@@ -0,0 +1,111 @@
+export default [
+  {
+    name: "Ameen Soleimani",
+    organization: {
+      name: "0xbow",
+      url: "https://www.0xbow.io/",
+    },
+    image: require("./ameen.jpeg"),
+    maskImage: require("./ameen-mask.jpeg"),
+    twitter: "https://twitter.com/ameensol",
+  },
+  {
+    name: "Nick Almond",
+    organization: {
+      name: "FactoryDAO",
+      url: "https://www.factorydao.org/",
+    },
+    image: require("./nick.jpeg"),
+    maskImage: require("./nick-mask.jpeg"),
+    twitter: "https://twitter.com/DrNickA",
+  },
+  {
+    name: "Fatemeh Fannizadeh",
+    organization: {
+      name: "Swarm",
+      url: "https://www.ethswarm.org/",
+    },
+    image: require("./fat.jpeg"),
+    maskImage: require("./fat-mask.jpeg"),
+    twitter: "https://twitter.com/Fatalmeh",
+  },
+  {
+    name: "Edmund Edgar",
+    organization: {
+      name: "RealityETH",
+      url: "https://reality.eth.limo/",
+    },
+    image: require("./edmundedgar.jpeg"),
+    maskImage: require("./edmundedgar-mask.jpeg"),
+    twitter: "https://twitter.com/edmundedgar",
+  },
+  {
+    name: "Puja Ohlhaver",
+    organization: {
+      name: "Lawyer & Researcher",
+    },
+    image: require("./puja.jpeg"),
+    maskImage: require("./puja-mask.jpeg"),
+    twitter: "https://twitter.com/pujaohlhaver",
+  },
+  {
+    name: "Mikhail Nikulin",
+    organization: {
+      name: "Idena",
+      url: "https://www.idena.io/",
+    },
+    image: require("./mikhail.jpeg"),
+    maskImage: require("./mikhail-mask.jpeg"),
+    twitter: "https://twitter.com/cryptoidentity",
+  },
+  {
+    name: "Peter Van Valkenburgh",
+    organization: {
+      name: "CoinCenter",
+      url: "https://www.coincenter.org/",
+    },
+    image: require("./peter.jpeg"),
+    maskImage: require("./peter-mask.jpeg"),
+    twitter: "https://twitter.com/valkenburgh",
+  },
+  {
+    name: "Matthew Hodgson",
+    organization: {
+      name: "Matrix",
+      url: "https://matrix.org/",
+    },
+    image: require("./matthew.jpeg"),
+    maskImage: require("./matthew-mask.jpeg"),
+    twitter: "https://twitter.com/ara4n",
+  },
+  {
+    name: "Josh",
+    organization: {
+      name: "The Blockchain Socialist",
+      url: "https://theblockchainsocialist.com/",
+    },
+    image: require("./josh.jpeg"),
+    maskImage: require("./josh-mask.jpeg"),
+    twitter: "https://twitter.com/TBSocialist",
+  },
+  {
+    name: "Kat Young",
+    organization: {
+      name: "EthEvacuations",
+      url: "https://ethevacuations.xyz/",
+    },
+    image: require("./kat.jpeg"),
+    maskImage: require("./kat-mask.jpeg"),
+    twitter: "https://twitter.com/katalunia030",
+  },
+  // {
+  //   name: "Christopher Goes",
+  //   organization: {
+  //     name: "Anoma",
+  //     url: "https://anoma.io/",
+  //   },
+  //   image: require("./chris.jpeg"),
+  //   maskImage: require("./chris-mask.jpeg"),
+  //   twitter: "https://twitter.com/cwgoes",
+  // },
+];

src/assets/people/workshops/index.js

@@ -1,60 +1,79 @@
 export default [
   {
-    name: "Alex Hansen",
+    name: "Austin Griffith",
     organization: {
-      name: "Fuel Labs",
-      url: "https://fuel.network/",
+      name: "Ethereum Foundation",
+      url: "https://ethereum.foundation/",
     },
-    image: require("./Fuel_Alex-Hansen.jpeg"),
-    twitter: "https://twitter.com/awleckss",
+    image: require("./austin.jpeg"),
+    maskImage: require("./austin-mask.jpeg"),
+    twitter: "https://twitter.com/austingriffith",
   },
   {
-    name: "Jeny Pollack",
+    name: "Sergei Tikhomirov",
     organization: {
-      name: "Lens",
-      url: "https://lens.xyz/",
+      name: "Waku",
+      url: "https://waku.network/",
     },
-    image: require("./Lens_JennyPollack_Head-of-Product.jpg"),
-    title: "Head of Product",
-    twitter: "https://twitter.com/Jenny_Pollack",
+    image: require("./sergei.jpeg"),
+    maskImage: require("./sergei-mask.jpeg"),
+    twitter: "https://twitter.com/serg_tikhomirov",
   },
   {
-    name: "Zannis Kalampoukis",
+    name: "Tino",
     organization: {
-      name: "Lens",
-      url: "https://lens.xyz/",
+      name: "HOPR",
+      url: "https://hoprprotocol.com/",
     },
-    image: require("./Lens_Zannis-Kalampoukis_Sr-Software-Eng.jpeg"),
-    github: "https://github.com/zannis",
-    title: "Sr. Software Engineer",
+    image: require("./tino.jpeg"),
+    maskImage: require("./tino-mask.jpeg"),
   },
   {
-    name: "Vladyslav Bochok",
+    name: "Odysseas",
     organization: {
-      name: "zkSync",
-      url: "https://zksync.io/",
+      name: "Phylax Systems",
+      url: "https://phylax.watch",
     },
-    image: require("./zkSync_VladyslavBochok_vladbochok1.jpg"),
-    github: "https://github.com/vladbochok",
+    image: require("./odysseas.jpeg"),
+    maskImage: require("./odysseas-mask.jpeg"),
+    twitter: "https://twitter.com/odysseas_eth",
   },
   {
-    name: "Chris Battenfield",
+    name: "GregTheGreek",
     organization: {
-      name: "Obol",
-      url: "https://obol.tech/",
+      name: "ChainSafe",
+      url: "https://chainsafe.io/",
     },
-    title: "Product Lead",
-    image: require("./Obol_Chris-Battenfield_Product-Lead.jpg"),
-    twitter: "https://twitter.com/Battenfield",
+    image: require("./greg.jpeg"),
+    maskImage: require("./greg-mask.jpeg"),
+    twitter: "https://twitter.com/gregthegreek",
   },
   {
-    name: "Oisin Kyne",
+    name: "Pedro Gomes",
     organization: {
-      name: "Obol",
-      url: "https://obol.tech/",
+      name: "WalletConnect",
+      url: "https://walletconnect.com/",
     },
-    title: "CTO",
-    image: require("./Obol_Oisin-Kyne_CTO.jpeg"),
-    twitter: "https://twitter.com/OisinKyne",
+    image: require("./pedro.jpeg"),
+    maskImage: require("./pedro-mask.jpeg"),
+    twitter: "https://twitter.com/pedrouid",
+  },
+  {
+    name: "Richard Liu",
+    organization: {
+      name: "0xPARC",
+      url: "https://0xparc.org/",
+    },
+    image: require("./richard.jpeg"),
+    maskImage: require("./richard-mask.jpeg"),
+  },
+  {
+    name: "Ivan Chub",
+    organization: {
+      name: "0xPARC",
+      url: "https://0xparc.org/",
+    },
+    image: require("./ivan.jpeg"),
+    maskImage: require("./ivan-mask.jpeg"),
   },
 ];

src/pages/contributors.jsx

@@ -5,7 +5,8 @@ import React, { useEffect } from "react";
 import twitterLogo from "../assets/twitter.png";
 import githubLogo from "../assets/github.png";
 import team from "../assets/people/team";
-// import keynotes from "../assets/people/keynotes";
+import speakers from "../assets/people/speakers";
+import workshopHosts from "../assets/people/workshops";
 import ETHBerlin from "../components/ETHBerlin";
 import { TbWorldWww } from "react-icons/tb";
 
@@ -33,7 +34,7 @@ const Person = ({
       </div>
       <div className="text-2xl text-center mt-2">{name}</div>
       {organization && (
-        <div className="text-center text-berlin-red text-lg">
+        <div className="text-center text-lg">
           <a href={organization.url} rel="noopener noreferrer" target="_blank">
             {organization.name}
           </a>{" "}
@@ -131,9 +132,14 @@ const Contributors = () => {
     setTitle("Team");
   };
 
-  const handleKeynotes = () => {
-    setPeople([]);
-    setTitle("Keynotes");
+  const handleSpeakers = () => {
+    setPeople(speakers);
+    setTitle("Speakers");
+  };
+
+  const handleWorkshops = () => {
+    setPeople(workshopHosts);
+    setTitle("Workshops");
   };
 
   return (
@@ -153,12 +159,30 @@ const Contributors = () => {
           <button
             className={`${
               title === "Team" ? "text-berlin-red underline" : ""
-            } text-xl md:text-2xl mx-4 my-2 
+            } text-lg md:text-xl mx-4 my-2 
           `}
             onClick={handleTeam}
           >
             {"<<Team<<<<<<"}
           </button>
+          <button
+            className={`${
+              title === "Speakers" ? "text-berlin-red underline" : ""
+            } text-lg md:text-xl mx-4 my-2 
+          `}
+            onClick={handleSpeakers}
+          >
+            {"<<Speakers<<<<<<"}
+          </button>
+          <button
+            className={`${
+              title === "Workshops" ? "text-berlin-red underline" : ""
+            } text-lg md:text-xl mx-4 my-2
+          `}
+            onClick={handleWorkshops}
+          >
+            {"<<Workshop<Hosts<<<<<"}
+          </button>
           {/* <button
             className={`${
               title === "Mentors" ? "text-berlin-red underline" : ""