From 57ac58a2c91962a649e084bb329cfc6a9e2ba35b Mon Sep 17 00:00:00 2001
From: Hayden Bleasel <hello@haydenbleasel.com>
Date: Tue, 11 Jun 2024 19:46:04 +1000
Subject: [PATCH] Responsive fixes

---
 app/(pages)/(home)/cards/github.tsx    | 54 +++++++++++++-------------
 app/(pages)/(home)/cards/spotify.tsx   |  2 +-
 app/(pages)/(home)/cards/steam.tsx     | 49 ++++++++++++-----------
 app/(pages)/(home)/components/hero.tsx |  2 +-
 app/(pages)/(home)/page.tsx            | 10 +++--
 5 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/app/(pages)/(home)/cards/github.tsx b/app/(pages)/(home)/cards/github.tsx
index 0ff633e0..ba8abbb7 100644
--- a/app/(pages)/(home)/cards/github.tsx
+++ b/app/(pages)/(home)/cards/github.tsx
@@ -48,36 +48,34 @@ const GitHubCard: FC = () => {
   const [total, setTotal] = useState(0);
 
   return (
-    <div className="col-span-2">
-      <Card title="GitHub Activity" className="p-4">
-        <div className="flex flex-col gap-4">
-          <p className="text-neutral-500 dark:text-neutral-400 text-sm">
-            {total} contributions this year
-          </p>
-          <div className="flex flex-col gap-[3px]">
-            <GitHubCalendar
-              username="haydenbleasel"
-              hideMonthLabels
-              hideColorLegend
-              hideTotalCount
-              showWeekdayLabels={false}
-              colorScheme="light"
-              transformData={(data) => {
-                if (!total) {
-                  const commits = data.reduce(
-                    (newTotal, { count }) => newTotal + count,
-                    0
-                  );
-                  setTotal(commits);
-                }
+    <Card title="GitHub Activity" className="p-4">
+      <div className="flex flex-col gap-4">
+        <p className="text-neutral-500 dark:text-neutral-400 text-sm">
+          {total} contributions this year
+        </p>
+        <div className="flex flex-col gap-[3px]">
+          <GitHubCalendar
+            username="haydenbleasel"
+            hideMonthLabels
+            hideColorLegend
+            hideTotalCount
+            showWeekdayLabels={false}
+            colorScheme="light"
+            transformData={(data) => {
+              if (!total) {
+                const commits = data.reduce(
+                  (newTotal, { count }) => newTotal + count,
+                  0
+                );
+                setTotal(commits);
+              }
 
-                return getContributions(data, 0);
-              }}
-            />
-          </div>
+              return getContributions(data, 0);
+            }}
+          />
         </div>
-      </Card>
-    </div>
+      </div>
+    </Card>
   );
 };
 
diff --git a/app/(pages)/(home)/cards/spotify.tsx b/app/(pages)/(home)/cards/spotify.tsx
index f4239820..98c9104f 100644
--- a/app/(pages)/(home)/cards/spotify.tsx
+++ b/app/(pages)/(home)/cards/spotify.tsx
@@ -15,7 +15,7 @@ const SpotifyCard = async (): Promise<ReactElement> => {
   return (
     <Card
       title="Now Listening"
-      className="p-4 flex flex-col justify-between gap-4"
+      className="p-4 flex flex-row md:flex-col md:justify-between gap-4"
     >
       <Image
         src={song.image}
diff --git a/app/(pages)/(home)/cards/steam.tsx b/app/(pages)/(home)/cards/steam.tsx
index 5718106d..f21b88a5 100644
--- a/app/(pages)/(home)/cards/steam.tsx
+++ b/app/(pages)/(home)/cards/steam.tsx
@@ -13,33 +13,32 @@ const SteamCard = async (): Promise<ReactElement> => {
   }
 
   return (
-    <div className="col-span-2">
-      <Card title="Recently Played" className="p-4 flex justify-between gap-4">
-        <div className="text-sm flex flex-col justify-between gap-4">
-          <p>
-            <Link href={`https://store.steampowered.com/app/${game.id}`}>
-              {game.name}
-            </Link>
+    <Card
+      title="Recently Played"
+      className="p-4 flex flex-col sm:flex-row justify-between gap-4"
+    >
+      <div className="text-sm flex flex-col justify-between gap-4">
+        <p>
+          <Link href={`https://store.steampowered.com/app/${game.id}`}>
+            {game.name}
+          </Link>
+        </p>
+        <div>
+          <p className="truncate">🕦 {Math.round(game.playtime / 60)} hours</p>
+          <p className="truncate">
+            🏆 {game.completeAchievements} / {game.totalAchievements}
           </p>
-          <div>
-            <p className="truncate">
-              🕦 {Math.round(game.playtime / 60)} hours
-            </p>
-            <p className="truncate">
-              🏆 {game.completeAchievements} / {game.totalAchievements}
-            </p>
-          </div>
         </div>
-        <Image
-          src={game.image}
-          alt=""
-          width={300}
-          height={300}
-          unoptimized
-          className="rounded m-0 shrink-0"
-        />
-      </Card>
-    </div>
+      </div>
+      <Image
+        src={game.image}
+        alt=""
+        width={300}
+        height={300}
+        unoptimized
+        className="rounded m-0 shrink-0"
+      />
+    </Card>
   );
 };
 
diff --git a/app/(pages)/(home)/components/hero.tsx b/app/(pages)/(home)/components/hero.tsx
index 330c041d..386ffc5c 100644
--- a/app/(pages)/(home)/components/hero.tsx
+++ b/app/(pages)/(home)/components/hero.tsx
@@ -5,7 +5,7 @@ import { Avatar } from './avatar';
 import type { FC } from 'react';
 
 export const Hero: FC = () => (
-  <h1 className="tracking-tight leading-tight">
+  <h1 className="tracking-tight leading-tight text-3xl sm:text-4xl">
     Hello <Wave /> I’m Hayden Bleasel <Avatar />
     . I’m an Australian 🦘 Product Designer 🖼️ and Software Engineer <GitHub />{' '}
     currently based in <Location />.
diff --git a/app/(pages)/(home)/page.tsx b/app/(pages)/(home)/page.tsx
index 3340b9b7..26bfe1aa 100644
--- a/app/(pages)/(home)/page.tsx
+++ b/app/(pages)/(home)/page.tsx
@@ -17,11 +17,15 @@ const Home: FC = () => (
   <>
     <Hero />
     <Newsletter />
-    <div className="grid grid-cols-3 gap-3 prose-p:m-0 prose-img:m-0">
-      <GitHubCard />
+    <div className="grid md:grid-cols-3 gap-3 prose-p:m-0 prose-img:m-0">
+      <div className="md:col-span-2">
+        <GitHubCard />
+      </div>
       <AnnouncementCard />
       <SpotifyCard />
-      <SteamCard />
+      <div className="md:col-span-2">
+        <SteamCard />
+      </div>
     </div>
   </>
 );