From 228f71b04989a17bc1a47bbb19d71a14fdc16545 Mon Sep 17 00:00:00 2001
From: Aidan <aidan@p0ntus.com>
Date: Tue, 7 Jan 2025 19:38:46 -0500
Subject: [PATCH] bug fixes and optomizations to yield successful build

---
 app/components/Music.tsx       | 24 ++++++++++++++++++++----
 app/components/pages/About.tsx |  5 +++--
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/app/components/Music.tsx b/app/components/Music.tsx
index 596dbfc..57f79ab 100644
--- a/app/components/Music.tsx
+++ b/app/components/Music.tsx
@@ -7,15 +7,31 @@ import { faPlay, faStepBackward, faStepForward, faArrowLeft, faArrowRight } from
 
 export default function Home() {
   const [timePeriod, setTimePeriod] = useState('2020s');
-  const [songs, setSongs] = useState([]);
+  interface Song {
+    albumArt: string;
+    name: string;
+    artist: string;
+    duration: string;
+    link?: string;
+  }
+  const [songs, setSongs] = useState<Song[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
 
   useEffect(() => {
     fetch('/data/music.json')
       .then(response => response.json())
       .then(data => {
-        const selectedPeriod = data.find(period => period.timePeriod === timePeriod);
-        const songsList = selectedPeriod ? selectedPeriod.songs : [];
+        interface Song {
+          albumArt: string;
+          name: string;
+          artist: string;
+          duration: string;
+        }
+        interface Period {
+          timePeriod: string;
+          songs: Song[];
+        }
+        const selectedPeriod = data.find((period: Period) => period.timePeriod === timePeriod);        const songsList = selectedPeriod ? selectedPeriod.songs : [];
         setSongs(songsList);
         setCurrentIndex(Math.floor(Math.random() * songsList.length));
       });
@@ -24,7 +40,7 @@ export default function Home() {
   useEffect(() => {
     const selectElement = document.getElementById('timePeriod');
     if (selectElement) {
-      setTimePeriod(selectElement.value);
+      setTimePeriod((selectElement as HTMLSelectElement).value);
     }
   }, []);
 
diff --git a/app/components/pages/About.tsx b/app/components/pages/About.tsx
index 0822135..dc9c7ed 100644
--- a/app/components/pages/About.tsx
+++ b/app/components/pages/About.tsx
@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
 import GitHubFeatured from '../GitHubFeatured'
+import Image from 'next/image'
 
 export default function About() {
     return (
@@ -29,8 +30,8 @@ export default function About() {
                 <h2 className="text-2xl font-semibold mb-4 text-gray-200">My GitHub Contributions</h2>
                 <p className="text-gray-300 mb-4">You can find me on GitHub as <a href="https://github.com/ihatenodejs/" className="text-blue-400 hover:underline">ihatenodejs</a>.</p>
                 <div className="flex flex-col md:flex-row justify-center gap-4">
-                    <img src="https://github-readme-stats.vercel.app/api?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&count_private=true" alt="ihatenodejs's Stats" className="w-full md:w-1/2" />
-                    <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&layout=compact" alt="ihatenodejs's Top Languages" className="w-full md:w-1/3" />
+                    <Image src="https://github-readme-stats.vercel.app/api?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&count_private=true" alt="ihatenodejs's Stats" width={500} height={200} className="w-full md:w-1/2" />
+                    <Image src="https://github-readme-stats.vercel.app/api/top-langs/?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&layout=compact" alt="ihatenodejs's Top Languages" width={500} height={200} className="w-full md:w-1/3" />
                 </div>
             </div>
             <div className="mt-12">