Add social icons to keynote speaker, updated bio (#58)

HydPy · Jan 9, 2025 · 3260019 · 3260019
1 parent bc6ef65
commit 3260019
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 18 deletions.
diff --git a/data/speakers.js b/data/speakers.js
@@ -3,4 +3,26 @@ export const KEYNOTE_SPEAKER = {
   title: 'Keynote Speaker',
   speakerImgUrl: '/images/speakers/anthony-shaw.svg',
   speakerImgAlt: "Anthony Shaw's picture",
+  socials: [
+    {
+      name: 'Blog',
+      url: 'https://tonybaloney.github.io/#blog',
+      ariaLabel: "Hyperlink to Anthony Shaw's blog.",
+    },
+    {
+      name: 'LinkedIn',
+      url: 'https://www.linkedin.com/in/anthonypshaw',
+      ariaLabel: "Hyperlink to Anthony Shaw's LinkedIn page.",
+    },
+    {
+      name: 'GitHub',
+      url: 'https://github.com/tonybaloney',
+      ariaLabel: "Hyperlink to Anthony Shaw's GitHub page.",
+    },
+    {
+      name: 'X',
+      url: 'https://x.com/anthonypjshaw',
+      ariaLabel: "Hyperlink to Anthony Shaw's X page.",
+    },
+  ]
 };
diff --git a/pages-content/keynotes/anthonyShaw.mdx b/pages-content/keynotes/anthonyShaw.mdx
@@ -1,12 +1 @@
-Anthony Shaw is an active contributor to open source projects and has been recognized as a fellow by the Python Software Foundation, Apache Software Foundation, and Macquarie University. He is the author of the book CPython Internals.
-
-Active Contributor
-  - Open Source Projects
-
-Fellow Recognition
-  - Python Software Foundation
-  - Apache Software Foundation
-  - Macquarie University
-
-Author
-  - CPython Internals
+Anthony Shaw is from Sydney, Australia. Anthony is a contributor to many open-source communities and tools for DevOps, Security, Automation and Code Quality. He has been recognised for his contribution to open source, including as Fellow of the Python Software Foundation, Fellow of Macquarie University, and member of the Apache Software Foundation. Anthony runs a Python blog and YouTube channel and has published a book on the Python compiler.
diff --git a/src/components/Icon.jsx b/src/components/Icon.jsx
@@ -7,6 +7,7 @@ import {
   FaEnvelope,
   FaHandHoldingHeart,
   FaDiscord,
+  FaBlog
 } from 'react-icons/fa6';
 import { MdLightMode, MdDarkMode } from 'react-icons/md';
 import { GiHamburgerMenu } from 'react-icons/gi';
@@ -26,6 +27,7 @@ const icons = {
   Moon: MdDarkMode,
   HandHoldingHeart: FaHandHoldingHeart,
   Discord: FaDiscord,
+  Blog: FaBlog,
 };
 
 export const Icon = ({ name, size = 36, className = '', padding = 0 }) => {

diff --git a/src/components/KeynoteSpeaker.jsx b/src/components/KeynoteSpeaker.jsx
@@ -3,9 +3,11 @@ import { KEYNOTE_SPEAKER } from '@/speakers';
 import { Heading } from './Typography';
 import MdxLayout from '@/components/MdxLayout';
 import AnthonyShawDescription from '@/keynotes/anthonyShaw.mdx';
+import Icon from '@/components/Icon';
+import Link from 'next/link';
 
 export function KeynoteSpeaker() {
-  const { name, title, speakerImgUrl, speakerImgAlt } = KEYNOTE_SPEAKER;
+  const { name, title, speakerImgUrl, speakerImgAlt, socials } = KEYNOTE_SPEAKER;
   return (
     <section
       id="keynote-speaker"
@@ -21,14 +23,14 @@ export function KeynoteSpeaker() {
       <div className="flex flex-col items-center">
         <div className="flex md:flex-row flex-col">
           {/* Left Section */}
-          <div className="flex flex-col md:w-1/2">
+          <div className="flex flex-col md:w-1/2 items-center">
             {/* Speaker Photo */}
-            <div className="md:w-100">
+            <div className="w-10/12 md:w-100">
               <Image
                 src={speakerImgUrl}
                 alt={speakerImgAlt}
-                width={400}
-                height={400}
+                width={240}
+                height={240}
                 className="w-full h-full object-cover"
               />
             </div>
@@ -42,12 +44,26 @@ export function KeynoteSpeaker() {
             </Heading>
           </div>
           {/* Right Section */}
-          <div className="bg-primary dark:bg-secondary md:mt-8 text-gray-50 md:w-1/2">
+          <div className="bg-primary dark:bg-secondary md:mt-8 text-gray-50 md:w-2/5">
             <div className="">
               <MdxLayout className="text-gray-600 dark:text-gray-400">
                 <AnthonyShawDescription />
               </MdxLayout>
             </div>
+            <div className="flex flex-row flex-wrap mt-8 justify-center">
+              {socials.map((item, index) => (
+                <Link
+                  key={index}
+                  className="text-secondary-600 hover:text-secondary-950 dark:text-secondary-400 dark:hover:text-gray-50 mr-2"
+                  href={item.url}
+                  target="_blank"
+                  aria-label={item.ariaLabel}
+                  rel="noopener noreferrer"
+                >
+                  <Icon name={item.name} />
+                </Link>
+              ))}
+            </div>
           </div>
         </div>
       </div>