From 76c24c768b70c617aebe343df5d8afe496c0b536 Mon Sep 17 00:00:00 2001
From: Monica Powell <monica@aboutmonica.com>
Date: Tue, 29 Sep 2020 21:16:39 -0400
Subject: [PATCH 1/3] add speaker page

---
 site/src/components/header.js       |  1 +
 site/src/components/speakerCards.js |  9 +++---
 site/src/pages/speakers.js          | 49 +++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 site/src/pages/speakers.js

diff --git a/site/src/components/header.js b/site/src/components/header.js
index 4bd03e9..4845d92 100644
--- a/site/src/components/header.js
+++ b/site/src/components/header.js
@@ -9,6 +9,7 @@ function Header({ siteTitle }) {
     { href: "/", name: "Home" },
     { href: "/tickets", name: "Tickets" },
     { href: "/#schedule", name: "Schedule" },
+    { href: "/speakers", name: "Speakers" },
   ];
 
   return (
diff --git a/site/src/components/speakerCards.js b/site/src/components/speakerCards.js
index c2f7ffd..335e57b 100644
--- a/site/src/components/speakerCards.js
+++ b/site/src/components/speakerCards.js
@@ -1,18 +1,17 @@
 import React from "react";
 import { Link } from "gatsby";
-import Avatar from "../images/woman-generated-avatar-1.png";
 
 export default function speakerCard({ speakers }) {
   return (
     <div className="flex items-center flex-wrap ">
-      {speakers.map(({ name, link }) => (
+      {speakers.map(({ node }) => (
         <div className="w-1/3 p-2">
           <img
             className="rounded-full "
-            src={Avatar}
-            alt={`Avatar of ${name}`}
+            src={node.avatar}
+            alt={`Avatar of ${node.name}`}
           />
-          <Link to={link ? link : ""}> {name} </Link>
+          <Link to={node.link ? node.link : ""}> {node.name} </Link>
         </div>
       ))}
     </div>
diff --git a/site/src/pages/speakers.js b/site/src/pages/speakers.js
new file mode 100644
index 0000000..6050de0
--- /dev/null
+++ b/site/src/pages/speakers.js
@@ -0,0 +1,49 @@
+import { useStaticQuery } from "gatsby";
+import React from "react";
+
+import Layout from "../components/layout";
+import SpeakerCard from "../components/speakerCards";
+import SEO from "../components/seo";
+import sketchnoting from "../images/taking-notes.svg";
+
+const Hero = ({ speakers }) => (
+  <div className="text-center">
+    <h2 className="text-5xl font-extrabold text-blue-500 leading-9 tracking-tight font-inter p-4">
+      Speakers
+    </h2>
+    <SpeakerCard speakers={speakers} />;
+  </div>
+);
+
+function SpeakerPage() {
+  const data = useStaticQuery(graphql`
+    query FetchSpeakerData {
+      allSpeakersYaml {
+        edges {
+          node {
+            id
+            avatar
+            name
+            title
+            time
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <Layout>
+      <SEO
+        title="Home"
+        keywords={[`gatsby`, `tailwind`, `react`, `tailwindcss`]}
+      />
+      <Hero speakers={data.allSpeakersYaml.edges} />
+    </Layout>
+  );
+}
+
+export default SpeakerPage;

From 2e03176b34413224e30fdb42cad0cce75ed4bd29 Mon Sep 17 00:00:00 2001
From: Monica Powell <monica@aboutmonica.com>
Date: Tue, 29 Sep 2020 21:32:31 -0400
Subject: [PATCH 2/3] link to individual speaker page from speaker card

---
 site/src/components/speakerCards.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/speakerCards.js b/site/src/components/speakerCards.js
index 335e57b..442e441 100644
--- a/site/src/components/speakerCards.js
+++ b/site/src/components/speakerCards.js
@@ -11,7 +11,7 @@ export default function speakerCard({ speakers }) {
             src={node.avatar}
             alt={`Avatar of ${node.name}`}
           />
-          <Link to={node.link ? node.link : ""}> {node.name} </Link>
+          <Link to={`/${node.fields.slug}`}>{node.name} </Link>
         </div>
       ))}
     </div>

From fe084201544a353a319cbe4d16e821c141a0069c Mon Sep 17 00:00:00 2001
From: Monica Powell <monica@aboutmonica.com>
Date: Tue, 29 Sep 2020 21:37:56 -0400
Subject: [PATCH 3/3] reformat how link renders in speaker card

---
 site/src/components/speakerCards.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/site/src/components/speakerCards.js b/site/src/components/speakerCards.js
index 442e441..12836d9 100644
--- a/site/src/components/speakerCards.js
+++ b/site/src/components/speakerCards.js
@@ -5,14 +5,16 @@ export default function speakerCard({ speakers }) {
   return (
     <div className="flex items-center flex-wrap ">
       {speakers.map(({ node }) => (
-        <div className="w-1/3 p-2">
-          <img
-            className="rounded-full "
-            src={node.avatar}
-            alt={`Avatar of ${node.name}`}
-          />
-          <Link to={`/${node.fields.slug}`}>{node.name} </Link>
-        </div>
+        <Link to={`/${node.fields.slug}`} className="w-1/3 p-2">
+          <div>
+            <img
+              className="rounded-full inline"
+              src={node.avatar}
+              alt={`Avatar of ${node.name}`}
+            />
+            {node.name}
+          </div>
+        </Link>
       ))}
     </div>
   );