Feature/2024 speakers (#47)

* feat(2024): add 2 speakers

* feat(2024): add placeholder

* feat(2024): add ticket link

* feat(2024): add ticket link

* feat(2024): minor changes

components/Speaker.tsx

@@ -9,6 +9,7 @@ export interface SpeakerProps {
   speakerName?: string;
   text: ReactNode;
   video: string | null;
+  image: string | undefined;
   focusedPage: number;
 }
 const Speaker = ({
@@ -17,6 +18,7 @@ const Speaker = ({
   speakerName,
   text,
   video,
+  image,
   focusedPage,
 }: SpeakerProps) => {
   const [showVideo, setShowVideo] = useState(false);
@@ -154,6 +156,11 @@ const Speaker = ({
             <source src={video} type="video/mp4" />
           </video>
         ) : null}
+        {image ? (
+          <div className="mx-auto max-h-full w-72 rounded-sm shadow-xl">
+            <img src={image} alt="" />
+          </div>
+        ) : null}
       </aside>
       <Transition show={showVideo} as={Fragment}>
         <Dialog

components/Speakers/Atlassian24.tsx

@@ -0,0 +1,34 @@
+const Placeholder = () => {
+  return (
+    <>
+      <p>
+        Nick is a Software Engineer with a passion for education and helping
+        others learn and grow. After growing up in Perth, Nick moved to Sydney
+        to study Engineering at the University of New South Wales where he went
+        on to work as a casual academic.{" "}
+      </p>
+      <p>
+        Nick overhauled multiple undergraduate computing courses to improve
+        student experience which has impacted thousands of students. While at
+        university, Nick also worked at WiseTech Global, Channel Nine and
+        Atlassian developing his craft as a Software Engineer. Nick now works as
+        a Software Engineer at Atlassian and oversees the software development
+        at a Perth-based startup called The Growth Hunting Company.{" "}
+      </p>
+      <p>
+        At Atlassian, Nick works on Post Office, Atlassian’s new unified
+        messaging platform to power emails, notifications and in-product
+        messaging. He works day-to-day with TypeScript, React and BitBucket CI
+        pipelines in Atlassian’s Monorepo.
+      </p>
+      <p>
+        Nick’s talk is titled “Why you should pay more attention to
+        non-functional requirements” and discusses how we focus on the wrong
+        thing - what we’re building - when we should be focusing on how we’re
+        building it, in software engineering.
+      </p>
+    </>
+  );
+};
+
+export default Placeholder;

components/Speakers/Macquarie24.tsx

@@ -0,0 +1,26 @@
+const Placeholder = () => {
+  return (
+    <>
+      <p>
+        Chris Peters is an Associate Director in Personal Technology Automation
+        at Macquarie Group. He is passionate about automation, and for the past
+        10 years has been involved in creating restAPIs with .net core and
+        various front-end frameworks, automating common business reporting and
+        IT support tasks. Chris has over 20 years of professional work
+        experience having worked as a Senior System Analyst at Abbott
+        Laboratories and a Primary Developer at Menoko, prior to joining
+        Macquarie Group 6 years ago. He now leads a team of passionate
+        developers who he enjoys working with to deliver modern applications and
+        new automation opportunities, helping to drive dramatic business growth.
+      </p>
+      <p>
+        Chris is excited to be speaking at this year’s Techspire event. His
+        speech will explore how “you are already becoming the leader you will be
+        in 30 years”, and will draw on his own learnings from his career to
+        date.
+      </p>
+    </>
+  );
+};
+
+export default Placeholder;

components/Speakers/Placeholder.tsx

@@ -4,6 +4,13 @@ const Placeholder = () => {
       <p style={{ width: "80vw" }}>
         Check back later for more updates to the list of speakers for this year.
       </p>
+      <p>Ticket sales begin Friday October 18 starting from $5</p>
+      <a
+        className="underline"
+        href="https://events.humanitix.com/techspire-2024"
+      >
+        Click here for ticketing information
+      </a>
     </>
   );
 };

components/Thingy.tsx

@@ -8,6 +8,7 @@ interface Props {
       speakerName?: string;
       text: ReactNode;
       video: string | null;
+      image?: string;
     };
   };
   focusedPage: number;
@@ -23,14 +24,15 @@ const Thingy = ({ speakers, focusedPage, setFocusedPage }: Props) => {
       />
       <main id="info-section" className={`flex-1`}>
         {Object.entries(speakers).map(
-          ([speaker, { speakerName, text, video }], idx) => (
+          ([speaker, { speakerName, text, video, image }], idx) => (
             <Speaker
               key={speaker}
               idx={idx}
               speaker={speaker}
               speakerName={speakerName}
               text={text}
               video={video}
+              image={image}
               focusedPage={focusedPage}
             />
           )

pages/index.tsx

@@ -22,7 +22,7 @@ import Select from "@mui/joy/Select";
 import Option from "@mui/joy/Option";
 
 const Home: NextPage = () => {
-  const [year, setYear] = useState("2022");
+  const [year, setYear] = useState("2024");
   const router = useRouter();
   const [completed, setCompleted] = useState(false);
   const techPrefixRef = useRef<HTMLDivElement>(null);
@@ -258,10 +258,22 @@ const Home: NextPage = () => {
           {finishDate ? (
             <BasedCountdown date={finishDate} setCompleted={setCompleted} />
           ) : null}
-          <h3 className={`z-10 mt-12 text-2xl`}>
+          <h3 className={`z-10 mt-12 text-center text-2xl`}>
             Find out more about the {year} Techspire
           </h3>
-          <div className="absolute bottom-32 justify-center">
+          {year === "2024" ? (
+            <a
+              className="mt-8 flex pb-8 underline"
+              href="https://events.humanitix.com/techspire-2024"
+            >
+              Tickets
+            </a>
+          ) : null}
+          <div
+            className={`absolute ${
+              year === "2024" ? "bottom-24" : "bottom-32"
+            } justify-center`}
+          >
             <Arrow onClick={() => setFocusedPage(1)} />
           </div>
         </LandingLayout>

public/data.tsx

@@ -5,6 +5,8 @@ import CanvaText from "../components/Speakers/CanvaText";
 import MarcCheeText from "../components/Speakers/MarcCheeText";
 import JobsboardText from "../components/Speakers/JobsboardText";
 import AmazonText from "../components/Speakers/AmazonText";
+import Macquarie24 from "../components/Speakers/Macquarie24";
+import Atlassian24 from "../components/Speakers/Atlassian24";
 import Placeholder from "../components/Speakers/Placeholder";
 
 export const siteData: {
@@ -13,6 +15,7 @@ export const siteData: {
       speakerName?: string;
       text: ReactElement;
       video: string | null;
+      image?: string;
     };
   };
 } = {
@@ -48,8 +51,20 @@ export const siteData: {
     },
   },
   "2024": {
-    "Under Construction": {
-      speakerName: "",
+    "Chris Peters": {
+      speakerName: "Macquarie",
+      text: <Macquarie24 />,
+      video: null,
+      image: "./images/2024/chris.JPG",
+    },
+    "Nick Patrikeos": {
+      speakerName: "Atlassian",
+      text: <Atlassian24 />,
+      video: null,
+      image: "./images/2024/nick.JPG",
+    },
+    "More speakers": {
+      speakerName: "To be announced",
       text: <Placeholder />,
       video: null,
     },