responsiveness fixes

index.html

@@ -10,7 +10,6 @@
       href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
       rel="stylesheet"
     />
-    <link href="https://mst.fntz.net/@alex" rel="me" />
 
     <!-- opengraph tags -->
     <meta
@@ -55,10 +54,5 @@
   <body>
     <div id="root"><!--app-html--></div>
     <script type="module" src="/src/entry-client.tsx"></script>
-    <script
-      defer
-      data-domain="alexav.gg"
-      src="https://metrics.alexav.gg/js/script.js"
-    ></script>
   </body>
 </html>

src/components/Header.tsx

@@ -1,10 +1,10 @@
 export default function Header() {
   return (
-    <div className="flex justify-between py-4">
+    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-4">
       <h1 className="font-bold">
         Alex <span className="font-normal text-blue-500">/</span> dev + QA
       </h1>
-      <div className="space-x-2">
+      <div className="flex gap-3 text-sm sm:text-base">
         <a
           href="https://github.com/azpha"
           target="_blank"

src/components/Layout.tsx

@@ -3,7 +3,7 @@ import Header from "./Header";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <div className="bg-black text-white min-h-screen sm:w-[95%] md:w-[75%] lg:w-[50%] xl:w-[25%] mx-auto select-none px-4 md:px-0">
+    <div className="bg-black text-white min-h-screen w-full max-w-[42rem] 2xl:max-w-[48rem] mx-auto select-none px-5">
       <Header />
       <div className="relative">{children}</div>
     </div>

src/components/ProjectCard.tsx

@@ -16,7 +16,7 @@ export default function ProjectCard({
 }: ProjectCardProps) {
   const Pill = ({ name }: PillProps) => {
     return (
-      <div className="bg-zinc-500 rounded-lg max-w-fit text-xs p-1 inline-block font-semibold">
+      <div className="bg-zinc-500 rounded-lg text-xs p-1 font-semibold">
         {name}
       </div>
     );
@@ -24,18 +24,18 @@ export default function ProjectCard({
 
   return (
     <div className="bg-neutral-800 rounded-lg p-2 border border-white">
-      <div className="flex justify-between">
-        <h1 className="text-1xl font-bold">{title}</h1>
-        <a href={link} target="_blank">
-          <button className="bg-gray-500 border border-zinc-500 rounded-lg px-2 py-1 text-sm">
+      <div className="flex items-start justify-between gap-3">
+        <h1 className="text-base font-bold">{title}</h1>
+        <a href={link} target="_blank" className="shrink-0">
+          <button className="bg-gray-500 border border-zinc-500 rounded-lg px-2 py-1 text-sm whitespace-nowrap">
             View &gt;
           </button>
         </a>
       </div>
 
-      <div className="space-y-2 w-[75%]">
+      <div className="space-y-2">
         <p className="text-sm">{description}</p>
-        <div className="space-x-2">
+        <div className="flex flex-wrap gap-2">
           {pills.map((v, k) => {
             return <Pill key={k} name={v} />;
           })}

src/components/fantasy/PlayerCell.tsx

@@ -14,9 +14,9 @@ export default function PlayerCell({ player }: { player: NFLPlayer | null }) {
 
   if (player && player.full_name) {
     return (
-      <div className="flex-wrap flex space-x-2">
+      <div className="flex items-center gap-2">
         <div>
-          <h1 className="font-semibold text-1xl">{player.full_name}</h1>
+          <h1 className="font-semibold text-base">{player.full_name}</h1>
           <p>
             {player?.position} · {player?.team} {injuryStatus && "·"}{" "}
             {player?.injury_status && (

src/components/fantasy/TeamRow.tsx

@@ -24,7 +24,7 @@ export function TeamRow({
         </h1>
       </div>
 
-      <div className="space-y-2 space-x-2 whitespace-nowrap overflow-x-scroll">
+      <div className="space-x-2 whitespace-nowrap overflow-x-auto pb-2">
         {roster?.starters.map((v, k) => {
           return (
             <div className="inline-block" key={k}>

src/components/modules/PictureCarousel.tsx

@@ -15,19 +15,17 @@ const images = [
 
 export default function PictureCarousel() {
   return (
-    <div className="rounded-lg">
-      <div className="my-2 space-x-2 space-y-2 text-center">
-        {images.map((v, k) => {
-          return (
-            <img
-              key={k}
-              loading="lazy"
-              src={v}
-              className="inline w-[200px] max-h-[100px] object-cover"
-            />
-          );
-        })}
-      </div>
+    <div className="my-2 grid grid-cols-2 sm:grid-cols-3 gap-2">
+      {images.map((v, k) => {
+        return (
+          <img
+            key={k}
+            loading="lazy"
+            src={v}
+            className="w-full h-24 object-cover rounded-md"
+          />
+        );
+      })}
     </div>
   );
 }

src/pages/App.tsx

@@ -1,28 +1,16 @@
-import { useState } from "react";
 import Layout from "../components/Layout";
-import Clock from "../components/modules/Clock";
-import Button from "../components/Button";
-import Home from "./Home";
-import PicturesPage from "./Pictures";
-import Sports from "./Sports";
 import ProjectCard from "../components/ProjectCard";
 import FantasyStatus from "../components/FantasyStatus";
-import GameComponent from "../components/info/GameComponent";
-import MusicComponent from "../components/info/MusicComponent";
 import PictureCarousel from "../components/modules/PictureCarousel";
 import Footer from "../components/Footer";
 
 export default function App() {
-  const [tab, setTab] = useState<"home" | "scores" | "sports" | "pictures">(
-    "home",
-  );
-
   return (
     <Layout>
-      <main className="my-24">
+      <main className="my-12 sm:my-20">
         <div className="py-2">
           <p className="opacity-85 text-sm text-left">HI, I'M ALEX</p>
-          <h1 className="w-full whitespace-break-spaces text-4xl py-2">
+          <h1 className="text-3xl sm:text-4xl text-balance py-2">
             I write software sometimes, then I spend twice as long breaking it
           </h1>
         </div>
@@ -89,10 +77,12 @@ export default function App() {
             link="https://git.alexav.gg/alex/homelab"
             pills={["Docker", "Ansible", "Python", "Automation"]}
           />
+        </div>
 
-          <hr className="my-4 border-zinc-800" />
-          <p className="opacity-85 text-sm text-left pb-2">FUN STUFF</p>
+        <hr className="my-4 border-zinc-800" />
 
+        <p className="opacity-85 text-sm text-left pb-2">FUN STUFF</p>
+        <div className="my-2 space-y-6">
           <div>
             <h1 className="text-sm opacity-85 font-semibold">Fantasy</h1>
             <FantasyStatus />
@@ -103,9 +93,11 @@ export default function App() {
             </h1>
             <PictureCarousel />
           </div>
-
-          <Footer />
         </div>
+
+        <hr className="my-4 border-zinc-800" />
+
+        <Footer />
       </main>
     </Layout>
   );