From a9d3a3aa492768f6ee7c9710e1094802cb7707a4 Mon Sep 17 00:00:00 2001
From: Jesse Breuer-Penello <PenelloJ2@gmail.com>
Date: Mon, 18 Sep 2023 12:57:24 -0400
Subject: [PATCH 1/3] style: Fix anchors color contrast

---
 app/_components/cards/repo-card/repo-card.tsx | 6 +++++-
 app/_components/footer/footer.tsx             | 6 +++++-
 app/not-found.tsx                             | 9 ++++++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/_components/cards/repo-card/repo-card.tsx b/app/_components/cards/repo-card/repo-card.tsx
index 1f4ec52..4ab5be9 100644
--- a/app/_components/cards/repo-card/repo-card.tsx
+++ b/app/_components/cards/repo-card/repo-card.tsx
@@ -54,7 +54,11 @@ export function RepoCard(props: RepoCardProps) {
 
       <div className="flex flex-col items-center">
         <Link
-          className="text-blue-500 underline hover:text-blue-300"
+          className="
+            mt-6 text-blue-700
+            underline hover:text-blue-900
+          dark:text-purple-400 dark:hover:text-purple-600
+          "
           href={githubUrl}
           target="_blank"
         >
diff --git a/app/_components/footer/footer.tsx b/app/_components/footer/footer.tsx
index 98b3d9c..c100aed 100644
--- a/app/_components/footer/footer.tsx
+++ b/app/_components/footer/footer.tsx
@@ -15,7 +15,11 @@ export function Footer() {
       </li>
       <li>
         <Link
-          className="text-blue-500 underline hover:text-blue-300"
+          className="
+            mt-6 text-blue-700
+            underline hover:text-blue-900
+          dark:text-purple-400 dark:hover:text-purple-600
+          "
           href={githubRepoUrl}
           target="_blank"
         >
diff --git a/app/not-found.tsx b/app/not-found.tsx
index ac9c4af..87a1077 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -5,7 +5,14 @@ export default function NotFound() {
     <div className="flex flex-col items-center justify-center">
       <h2 className="mb-1 text-lg">This page doesn&apos;t exist!</h2>
       <p className="text-sm">I&apos;m not sure how you got here.</p>
-      <Link className="mt-6 text-2xl text-blue-500 underline hover:text-blue-300" href="/">
+      <Link
+        className="
+          mt-6 text-2xl text-blue-900
+          underline hover:text-blue-700
+          dark:text-purple-400 dark:hover:text-purple-600
+        "
+        href="/"
+      >
         Go back
       </Link>
     </div>

From f1a22cd136cb8c72b9fccd01f1c39829dc0198ba Mon Sep 17 00:00:00 2001
From: Jesse Breuer-Penello <PenelloJ2@gmail.com>
Date: Mon, 18 Sep 2023 13:01:07 -0400
Subject: [PATCH 2/3] fix: Add proper aria labels

---
 app/_components/cards/music-card/audio.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/_components/cards/music-card/audio.tsx b/app/_components/cards/music-card/audio.tsx
index 1a9f5ab..70db31c 100644
--- a/app/_components/cards/music-card/audio.tsx
+++ b/app/_components/cards/music-card/audio.tsx
@@ -39,7 +39,11 @@ export function Audio(props: AudioProps) {
         Your browser does not support the <code>audio</code> element.
       </audio>
       <div className="flex rounded border border-slate-400 px-2 py-1">
-        <button className="h-full border-r px-2" onClick={togglePlayPause}>
+        <button
+          className="h-full border-r px-2"
+          onClick={togglePlayPause}
+          aria-label={`${isPlaying ? 'Pause' : 'Play'} the audio`}
+        >
           {isPlaying ? <Pause size={16} /> : <Play size={16} />}
         </button>
         <div className="flex w-full items-center gap-x-1 px-3">
@@ -51,6 +55,7 @@ export function Audio(props: AudioProps) {
             min="0"
             value={volume}
             onChange={(e) => setVolume(Number(e.target.value))}
+            aria-label="Adjust the volume"
           />
         </div>
       </div>

From 8247e03e443881a53bab6654fdea450e0790105f Mon Sep 17 00:00:00 2001
From: Jesse Breuer-Penello <PenelloJ2@gmail.com>
Date: Mon, 18 Sep 2023 13:01:43 -0400
Subject: [PATCH 3/3] feat: Prioritize img to reduce LCP measurement

---
 app/_components/cards/profile-card/profile-card.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/_components/cards/profile-card/profile-card.tsx b/app/_components/cards/profile-card/profile-card.tsx
index 5c437d3..a678c0d 100644
--- a/app/_components/cards/profile-card/profile-card.tsx
+++ b/app/_components/cards/profile-card/profile-card.tsx
@@ -12,6 +12,7 @@ export function ProfileCard() {
     >
       <div className="flex h-full flex-col items-center justify-center">
         <Image
+          priority
           src="/primary.jpg"
           alt="A profile picture"
           width="128"