Merge pull request #45 from michaelfromyeg:music

Add a basic music tab
michaelfromyeg · Jul 14, 2024 · bdabe69 · bdabe69
2 parents 0afe6d1 + f8ed216
commit bdabe69
Show file tree

Hide file tree

Showing 6 changed files with 367 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
         "@fortawesome/free-brands-svg-icons": "^6.3.0",
         "@fortawesome/free-solid-svg-icons": "^6.3.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@notionhq/client": "^2.2.15",
         "dotenv": "^16.0.3",
         "gatsby": "^5.11.0",
         "gatsby-plugin-dark-mode": "^1.1.2",

diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx
@@ -23,6 +23,9 @@ export const Destinations = [
     {
         name: "travel",
     },
+    {
+        name: "music",
+    },
     {
         name: "about",
     },
@@ -36,25 +39,28 @@ const InnerLinks = (props: InnerLinksProps): ReactElement => {
     const { location } = props;
     const prefix = location === Locations.HOMEPAGE ? "homepage" : "";
 
-    const EMOJIS = ["🤠", "🐢", "👾", "🤖", "⚡", "🦅", "🦕", "🐧"]
+    const EMOJIS = ["🤠", "🐢", "👾", "🤖", "⚡", "🦅", "🦕", "🐧"];
     const emoji = EMOJIS[Math.floor(Math.random() * EMOJIS.length)];
 
     return (
         <div className={styles[`${prefix}Links`]}>
             <Link className={styles.headerLink} to={"/"}>
-                <h1 className={styles[`${prefix}Title`]}><span style={{ "marginRight": 5 }}>{emoji}</span>michaeldemar.co</h1>
+                <h1 className={styles[`${prefix}Title`]}>
+                    <span style={{ marginRight: 5 }}>{emoji}</span>
+                    michaeldemar.co
+                </h1>
             </Link>
             <div className={styles.linksAndLights}>
                 {Destinations.map((d, index) => {
-                        return (
-                            <Link
-                                key={index}
-                                className={styles[`${prefix}Link`]}
-                                to={`/${d.name}`}
-                            >
-                                [{d.name}]
-                            </Link>
-                        );
+                    return (
+                        <Link
+                            key={index}
+                            className={styles[`${prefix}Link`]}
+                            to={`/${d.name}`}
+                        >
+                            [{d.name}]
+                        </Link>
+                    );
                 })}
                 {location !== Locations.HOMEPAGE && <br />}
             </div>
@@ -68,7 +74,7 @@ interface LinksProps {
 }
 
 const Links = (props: LinksProps): ReactElement => {
-    const { location }  = props;
+    const { location } = props;
     switch (location) {
         case Locations.HOMEPAGE:
             return (

diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -9,74 +9,141 @@ import SEO from "../components/SEO/SEO";
 import { UNIVERSITY_YEAR_AS_STRING } from "../data/Constants";
 
 interface AboutBioProps {
-    universityYear: string
+    universityYear: string;
 }
 
 const AboutBio = ({ universityYear }: AboutBioProps): ReactElement => {
     return (
         <>
             <p>
-                Hey there! {`I'm`} Michael, a {universityYear} Honours Computer Science student from the <a href="https://ubc.ca" target="_blank" rel="noreferrer">University of British Columbia (UBC)</a> in Vancouver, Canada.
-                I am originally from Edmonton, Alberta; I made the leap one province over to pursue my undergraduate studies in the fall of 2019.
-                Alongside my major, I am working towards a <a href="https://datascience.ubc.ca/minor" target="_blank" rel="noreferrer">minor in Data Science</a> and am a participant in the <a href="https://sciencecoop.ubc.ca" target="_blank" rel="noreferrer">co-op program</a>. I also am completing a study abroad at the <a href="https://nus.edu.sg">National University of Singapore</a>.
+                Hey there! {`I'm`} Michael, a {universityYear} Honours Computer
+                Science student from the{" "}
+                <a href="https://ubc.ca" target="_blank" rel="noreferrer">
+                    University of British Columbia (UBC)
+                </a>{" "}
+                in Vancouver, Canada. I am originally from Edmonton, Alberta; I
+                made the leap one province over to pursue my undergraduate
+                studies in the fall of 2019. Alongside my major, I am working
+                towards a{" "}
+                <a
+                    href="https://datascience.ubc.ca/minor"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    minor in Data Science
+                </a>{" "}
+                and am a participant in the{" "}
+                <a
+                    href="https://sciencecoop.ubc.ca"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    co-op program
+                </a>
+                . I also am completing a study abroad at the{" "}
+                <a href="https://nus.edu.sg">
+                    National University of Singapore
+                </a>
+                .
             </p>
             <p>
-                In the past, {`I've`} worked at <a href="https://curo46.com" target="_blank" rel="noreferrer">General Genomics</a>, <a href="https://research.samsung.com/srca" target="_blank" rel="noreferrer">Samsung Electronics</a> in business-to-business (B2B) software, <a href="https://amazon.jobs/en/teams/scot" target="_blank" rel="noreferrer">Amazon</a> in {`"Supply Chain Optimization Technologies"`} or SCOT, <a href="https://tesla.com/supercharger" target="_blank" rel="noreferrer">Tesla</a> in Supercharging, and as an <a href="https://cs.ubc.ca/ta/" target="_blank" rel="noreferrer">Undergraduate Teaching Assistant (UTA)</a>.
-                To date, {`I've`} taught seven separate courses, including introductory programming in Python, introductory data science, computer systems, computer networking, and data structures and algorithms.
+                In the past, {`I've`} worked at{" "}
+                <a href="https://curo46.com" target="_blank" rel="noreferrer">
+                    General Genomics
+                </a>
+                ,{" "}
+                <a
+                    href="https://research.samsung.com/srca"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    Samsung Electronics
+                </a>{" "}
+                in business-to-business (B2B) software,{" "}
+                <a
+                    href="https://amazon.jobs/en/teams/scot"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    Amazon
+                </a>{" "}
+                in {`"Supply Chain Optimization Technologies"`} or SCOT,{" "}
+                <a
+                    href="https://tesla.com/supercharger"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    Tesla
+                </a>{" "}
+                in Supercharging, and as an{" "}
+                <a
+                    href="https://cs.ubc.ca/ta/"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    Undergraduate Teaching Assistant (UTA)
+                </a>
+                . To date, {`I've`} taught seven separate courses, including
+                introductory programming in Python, introductory data science,
+                computer systems, computer networking, and data structures and
+                algorithms.
+            </p>
+            <p>
+                This blog is my sandbox on the Internet. It has been a passion
+                project for a number of years. It showcases my writing,
+                projects, design, and travel expereinces.
+            </p>
+            <p>
+                I hope you enjoy your stay. To wrap up, here are some photos I
+                particularly enjoy.
             </p>
-            <p>This blog is my sandbox on the Internet. It has been a passion project for a number of years. It showcases my writing, projects, design, and travel expereinces.</p>
-            <p>I hope you enjoy your stay. To wrap up, here are some photos I particularly enjoy.</p>
         </>
-    )
-}
+    );
+};
 
 interface AboutProps {
     location: string;
 }
 
 const About = ({ location }: AboutProps): ReactElement => {
-    // Fetch bio, photos
-    const data = useStaticQuery(graphql`query AboutQuery {
-  site {
-    siteMetadata {
-      title
-    }
-  }
-  leo1: file(relativePath: {eq: "images/leo1.png" }) {
-    childImageSharp {
-        gatsbyImageData(
-          width: 600
-          layout: CONSTRAINED
-        )
-    }
-  }
-  collision: file(relativePath: {eq: "images/collision.jpg" }) {
-    childImageSharp {
-        gatsbyImageData(
-          width: 600
-          layout: CONSTRAINED
-        )
-    }
-  }
-  amazon3: file(relativePath: {eq: "images/amazon3.jpg" }) {
-    childImageSharp {
-        gatsbyImageData(
-          width: 600
-          layout: CONSTRAINED
-        )
-    }
-  }
-}
-`);
+    const query = graphql`
+        query AboutQuery {
+            site {
+                siteMetadata {
+                    title
+                }
+            }
+            leo1: file(relativePath: { eq: "images/leo1.png" }) {
+                childImageSharp {
+                    gatsbyImageData(width: 600, layout: CONSTRAINED)
+                }
+            }
+            collision: file(relativePath: { eq: "images/collision.jpg" }) {
+                childImageSharp {
+                    gatsbyImageData(width: 600, layout: CONSTRAINED)
+                }
+            }
+            amazon3: file(relativePath: { eq: "images/amazon3.jpg" }) {
+                childImageSharp {
+                    gatsbyImageData(width: 600, layout: CONSTRAINED)
+                }
+            }
+        }
+    `;
+    const data = useStaticQuery(query);
 
     const { title } = data.site.siteMetadata;
 
-    const leoImage = getImage(data.leo1.childImageSharp)
-    const collisionImage = getImage(data.collision.childImageSharp)
-    const amazonImage = getImage(data.amazon3.childImageSharp)
+    const leoImage = getImage(data.leo1.childImageSharp);
+    const collisionImage = getImage(data.collision.childImageSharp);
+    const amazonImage = getImage(data.amazon3.childImageSharp);
 
-    if (leoImage === undefined || collisionImage === undefined || amazonImage === undefined) {
-        throw new Error("Could not find image for /about page!")
+    if (
+        leoImage === undefined ||
+        collisionImage === undefined ||
+        amazonImage === undefined
+    ) {
+        throw new Error("Could not find image for /about page!");
     }
 
     return (
@@ -94,11 +161,24 @@ const About = ({ location }: AboutProps): ReactElement => {
                     justifyContent: "center",
                 }}
             >
-                <GatsbyImage alt={"A picture of my pet tortoise Leo."} image={leoImage} />
+                <GatsbyImage
+                    alt={"A picture of my pet tortoise Leo."}
+                    image={leoImage}
+                />
                 <p>My pet tortoise Leo! (Jun 2020)</p>
-                <GatsbyImage alt={"Sitting in front of the Collision logo at the 2022 edition of the conference."} image={collisionImage} />
+                <GatsbyImage
+                    alt={
+                        "Sitting in front of the Collision logo at the 2022 edition of the conference."
+                    }
+                    image={collisionImage}
+                />
                 <p>Volunteering at Collision 2022. (June 2022)</p>
-                <GatsbyImage alt={"Standing in front of the Amazon logo in the Toronto office."} image={amazonImage} />
+                <GatsbyImage
+                    alt={
+                        "Standing in front of the Amazon logo in the Toronto office."
+                    }
+                    image={amazonImage}
+                />
                 <p>Interning in Toronto, Ontario for the summer. (July 2022)</p>
             </div>
         </Format>