show project loading more gracefully

src/components/Header.tsx

@@ -9,7 +9,9 @@ export default function Header() {
         "Professional Production Tester",
         "I break hearts to save lives.",
         "go bills",
-        "josh allen is my goat"
+        "josh allen is my goat",
+        "lets go buffalo",
+        "oorah"
     ]
     const [ quote, setQuote ] = useState<string>(quoteArray[Math.floor(Math.random() * quoteArray.length)]);
 
@@ -31,7 +33,6 @@ export default function Header() {
                 <p className="opacity-50 italic select-none" onClick={drawNewQuote}>{quote}</p>
             </div>
             <div className="space-x-2 items-center justify-center flex select-none">
-                <a className="hover:underline" href="#about">About</a>
                 <a className="hover:underline" href="#projects">Projects</a>
                 <a className="hover:underline" href="#data">Data</a>
                 <a className="hover:underline" href="#contact">Contact</a>

src/components/ProjectComponent.tsx

@@ -10,7 +10,7 @@ export default function ProjectComponent({
     header: string,
     projectHeader: string,
     projectSubheader: string,
-    projectImage: string,
+    projectImage?: string,
     projectImageSize?: string
 }) {
     return (
@@ -20,7 +20,9 @@ export default function ProjectComponent({
 
                 <div className="block">
                     <div className="flex items-center">
-                        <img src={projectImage} width={projectImageSize} className="flex-shrink-0" />
+                        {
+                            projectImage && <img src={projectImage} width={projectImageSize} className="flex-shrink-0" />
+                        }
 
                         <div className="flex flex-col mx-2 min-w-0 flex-grow">
                             <h1 className="font-bold text-left truncate">{projectHeader}</h1>

src/components/ProjectComponents/RecentBook.tsx

@@ -67,11 +67,12 @@ export default function RecentBook() {
         )
     } else {
         return (
-            <>
+            <ProjectComponent 
-                <h1 className="font-bold text-2xl">No data :(</h1>
+                header={"What I'm reading"}
-                <p>Check out <a className="underline" href="https://tracker.alexav.gg" target="_blank">tracker.alexav.gg</a> if this isn't working.</p>
+                projectHeader={"No data :("}
-                <p className="text-sm italic">{errorState}</p>
+                projectSubheader={loading ? "Loading data.." : "Something went wrong fetching data! " + errorState}
-            </> 
+                url={"/"}
+            />
         )
     }
 }

src/components/ProjectComponents/RecentClip.tsx

@@ -61,10 +61,11 @@ export default function RecentClip() {
             />
         )
     } else {
-       <>
+        return <ProjectComponent 
-        <h1 className="font-bold text-2xl">No data :(</h1>
+            header={"Clips I've taken"}
-        <p>Check out <a className="underline" href="https://medal.tv/u/alexav" target="_blank">medal.tv/u/alexav</a> if this isn't working.</p>
+            projectHeader={"No data :("}
-        <p className="text-sm italic">{errorState}</p>
+            projectSubheader={loading ? "Loading data.." : "Something went wrong fetching data! " + errorState}
-       </> 
+            url={"/"}
+        />
     }
 }

src/components/ProjectComponents/RecentGame.tsx

@@ -54,10 +54,11 @@ export default function RecentGame() {
             />
         )
     } else {
-       <>
+        return <ProjectComponent 
-        <h1 className="font-bold text-2xl">No data :(</h1>
+            header={"Games I'm playing"}
-        <p>Check out <a className="underline" href="https://steamcommunity.com/id/luvxavierr" target="_blank">steamcommunity.com/id/luvxavierr</a> if this isn't working.</p>
+            projectHeader={"No data :("}
-        <p className="text-sm italic">{errorState}</p>
+            projectSubheader={loading ? "Loading data.." : "Something went wrong fetching data! " + errorState}
-       </> 
+            url={"/"}
+        />
     }
 }

src/components/ProjectComponents/RecentListens.tsx

@@ -38,10 +38,11 @@ export default function RecentListens() {
             />
         )
     } else {
-       <>
+        return <ProjectComponent 
-        <h1 className="font-bold text-2xl">No data :(</h1>
+            header={"Music I'm listening to"}
-        <p>Check out <a className="underline" href="https://last.fm/user/lulawex" target="_blank">last.fm/lulawex</a> if this isn't working.</p>
+            projectHeader={"No data :("}
-        <p className="text-sm italic">{errorState}</p>
+            projectSubheader={loading ? "Loading data.." : "Something went wrong fetching data! " + errorState}
-       </> 
+            url={"/"}
+        />
     }
 }

src/components/ProjectComponents/RecentPhoto.tsx

@@ -57,11 +57,12 @@ export default function RecentPhoto() {
         )
     } else {
         return (
-            <>
+            <ProjectComponent 
-                <h1 className="font-bold text-2xl">No data :(</h1>
+                header={"Photos I've captured"}
-                <p>Check out <a className="underline" href="https://photos.alexav.gg" target="_blank">photos.alexav.gg</a> if this isn't working.</p>
+                projectHeader={"No data :("}
-                <p className="text-sm italic">{errorState}</p>
+                projectSubheader={loading ? "Loading data.." : "Something went wrong fetching data! " + errorState}
-            </> 
+                url={"/"}
+            />
         )
     }
 

src/components/ProjectComponents/RecentWatch.tsx

@@ -71,11 +71,12 @@ export default function RecentWatch() {
         )
     } else {
         return (
-            <>
+            <ProjectComponent 
-                <h1 className="font-bold text-2xl">No data :(</h1>
+                header={"What I'm watching"}
-                <p>Check out <a className="underline" href="https://tracker.alexav.gg" target="_blank">tracker.alexav.gg</a> if this isn't working.</p>
+                projectHeader={"No data :("}
-                <p className="text-sm italic">{errorState}</p>
+                projectSubheader={loading ? "Loading data.." : "Something went wrong fetching data! " + errorState}
-            </> 
+                url={"/"}
+            />
         )
     }
 }

src/pages/index.tsx

@@ -18,7 +18,7 @@ export default function Home() {
                 <div className="w-full mx-auto text-center p-10">
                     <div className="my-1">
                         <h1 className="text-3xl font-bold">Hi, I'm Alex</h1>
-                        <p>I'm a junior developer working as QA + sometimes writing questionable code at <a className="hover:underline text-yellow-400" href="https://medal.tv" target="_blank">Medal.tv</a></p>
+                        <p>I'm a junior developer primarily working as QA, but sometimes writing questionable code at <a className="hover:underline text-yellow-400" href="https://medal.tv" target="_blank">Medal.tv</a></p>
                     </div>
 
                     <div className="block space-x-2">
@@ -39,10 +39,6 @@ export default function Home() {
                             <LinkedIn />
                         </a>
                     </div>
-
-                    <div className="my-4">
-                        <a className="p-2 bg-white text-black rounded-lg" href="#projects">View My Work</a>
-                    </div>
                 </div>
             </section>