a bunch of responsiveness fixes

src/components/Footer.tsx

@@ -13,7 +13,7 @@ export default function Footer() {
     }, [mailState])
 
     return (
-        <div className="lg:w-1/2 bg-gray-500 md:w-full mx-auto rounded-lg text-center text-white bottom-0 left-0 right-0 p-4 select-none">
+        <div className="lg:w-1/2 bg-gray-500 md:w-full mx-auto rounded-t-lg text-center p-4 select-none">
             <h1 className="font-bold">&copy; {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
             <p>All logos & images on this page belong to their respective owners.</p>
 
@@ -32,10 +32,10 @@ export default function Footer() {
 
             <div className="block space-x-2">
                 {/* socials */}
-                <a href="https://github.com/azpha" target="_blank">
+                <a href="https://github.com/azpha/website" target="_blank">
                     <GitHub />
                 </a>
-                <a href="https://twitter.com/avvex__" target="_blank">
+                <a href="https://twitter.com/carlgrimesdupe" target="_blank">
                     <Twitter />
                 </a>
                 <a href="https://last.fm/user/lulawex" target="_blank">

src/components/Header.tsx

@@ -1,7 +1,6 @@
 export default function Header() {
     return (
-
-        <div className="text-white pt-4 mx-auto w-full sm:w-1/2 text-center sm:text-left">
+        <div className="text-white mx-auto pt-4 w-full sm:w-1/2 text-center lg:text-left">
             <h1 className="text-2xl font-bold">Alex Frantz</h1>
             <p>Professional button clicker & word typer</p>
 

src/components/Layout.tsx

@@ -0,0 +1,16 @@
+import Header from "./Header"
+import Footer from "./Footer"
+
+export default function Layout({
+    children
+}: {
+    children: JSX.Element | JSX.Element[]
+}) {
+    return (
+        <main className="bg-black text-white min-h-screen">
+            <Header />
+            {children}
+            <Footer />
+        </main>
+    )
+}

src/components/ProjectCard.tsx

@@ -10,14 +10,12 @@ export default function Project({
     urlTo?: string,
 }) {
     return (
-        <a href={urlTo} target="_blank">
-            <div className="bg-white text-black max-w-fit mx-auto rounded-lg overflow-hidden">
+        <a href={urlTo} target="_blank" className="max-w-fit mx-auto">
+            <div className="bg-white text-black mx-auto rounded-lg max-w-fit lg:max-w-full overflow-hidden">
                 <img
                     src={image}
-                    width="400"
-                    height="300"
                     alt={name}
-                    className="w-full h-48 object-cover"
+                    className="w-full h-24 object-cover"
                 />
 
                 <div className="p-4 space-y-2">

src/components/ProjectComponent.tsx

@@ -12,14 +12,13 @@ export default function ProjectComponent({
     imageSize?: string
 }) {
     return (
-        <a href={url} target="_blank">
+        <a href={url} target="_blank" className="max-w-fit mx-auto">
             <div className="bg-white text-black max-w-fit mx-auto p-2">
                 <div className="flex items-center">
                     <img src={image} width={imageSize} />
 
                     <div className="flex flex-wrap mx-2">
-                        <h1 className="font-bold">{header}</h1>
-                        <div className="basis-10" />
+                        <h1 className="font-bold w-full">{header}</h1>
                         <h1>{subheader}</h1>
                     </div>
                 </div>

src/components/ProjectComponents/RecentListens.tsx

@@ -54,7 +54,7 @@ export default function RecentListens() {
     if (!loading && data) {
         return (
             <ProjectComponent 
-                url={data[0].url}
+                url={"https://last.fm/user/lulawex"}
                 header={data[0].name}
                 subheader={data[0].artist["#text"]}
                 image={data[0].image.filter((v) => v.size === "large")[0]["#text"]}