From 05f7808842439677a2cffae0b425a8bff262a3b8 Mon Sep 17 00:00:00 2001
From: sebastian-noel <snoel.dev@gmail.com>
Date: Thu, 22 Oct 2026 23:21:54 -0400
Subject: [PATCH 1/2] fix: make hero layout responsive across screen sizes

---
 app/page.tsx               | 10 +++++-----
 components/AsciiHero.tsx   |  7 ++++---
 components/HeroSection.tsx | 26 ++++++++++++++------------
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 0787250..b667975 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,14 +7,14 @@ import ChallengesSection from "@/components/ChallengesSection"
 export default function Home() {
   return (
     <>
-      <main className="flex min-h-screen flex-col items-center justify-between px-24 pb-24 text-text-primary max-w-7xl w-full mx-auto">
+      <main className="flex min-h-screen flex-col items-center justify-between pb-24 text-text-primary max-w-7xl w-full mx-auto">
         {/* START OF THE HOME SECTION */}
-        <section id="home" className="min-h-screen w-full flex flex-col items-center">
+        <section id="home" className="min-h-[calc(100svh-4rem)] w-full flex flex-col items-center px-6 sm:px-10 lg:px-16">
           <HeroSection />
         </section>
 
         {/* START OF THE ABOUT SECTION */}
-        <section id="about" className="min-h-screen w-full flex flex-col items-center">
+        <section id="about" className="min-h-screen w-full flex flex-col items-center px-24">
           <h2 className="text-4xl font-bold p-16 m-16 h-16 gap-16">
             About Us
           </h2>
@@ -22,7 +22,7 @@ export default function Home() {
         </section>
 
         {/* START OF THE CHALLENGES SECTION */}
-        <section id="challenges" className="min-h-screen w-full flex flex-col items-center">
+        <section id="challenges" className="min-h-screen w-full flex flex-col items-center px-24">
           <h2 className="text-4xl font-bold p-16 m-16 h-16 gap-16">
             Monthly Challenges
           </h2>
@@ -30,7 +30,7 @@ export default function Home() {
         </section>
 
         {/* START OF THE TEAM SECTION */}
-        <section id="team" className="min-h-screen w-full flex flex-col items-center">
+        <section id="team" className="min-h-screen w-full flex flex-col items-center px-24">
           <h2 className="text-4xl font-bold p-16 m-16 h-16 gap-16">
             Team
           </h2>
diff --git a/components/AsciiHero.tsx b/components/AsciiHero.tsx
index c3b7c29..b1c14a9 100644
--- a/components/AsciiHero.tsx
+++ b/components/AsciiHero.tsx
@@ -6,17 +6,18 @@ import gpkTriangleLogo from "@/public/gpk_logo_new.webp";
 
 export default function AsciiHero() {
   return (
-    <div className="flex items-center justify-start w-full h-full -translate-y-15">
+    <div className="flex items-center justify-center w-full h-full overflow-hidden">
       <motion.div
         className="relative w-full h-full"
         initial={{ scale: 0 }}
-        animate={{ scale: 1 }}
+        animate={{ scale: 1.2 }}
         transition={{ type: "spring", stiffness: 100, damping: 10, mass: 1 }}
       >
         <Image
           src={gpkTriangleLogo}
           alt="Graphics Programming Knights logo"
-          className="w-full h-full object-fill"
+          className="w-full h-full object-contain"
+          sizes="(min-width: 1280px) 512px, (min-width: 1024px) 45vw, (min-width: 640px) 384px, 288px"
           priority
         />
 
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index a5b3eaa..8d2ed14 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -3,23 +3,23 @@ import AsciiHero from "./AsciiHero";
 
 export default function HeroSection() {
   return (
-    <section className="grid grid-cols-1 md:grid-cols-[1fr_1.2fr] gap-8 md:gap-36 items-center py-8 md:py-16 pr-8 md:pr-16 bg-page-background text-text-primary w-full flex-1">
+    <section className="grid w-full min-w-0 flex-1 grid-cols-1 content-center items-center gap-8 py-10 text-text-primary sm:py-14 lg:grid-cols-[1.1fr_1fr] lg:gap-12 lg:py-16">
       {/* Left Column: Heading, Subheading, Button, and Icons */}
-      <div className="flex flex-col gap-8 max-w-3xl -ml-24 md:-ml-36">
-        <h1 className="text-6xl md:text-8xl font-extrabold tracking-tight">
+      <div className="flex min-w-0 flex-col gap-6">
+        <h1 className="text-[clamp(2.4rem,5.4vw,5.4rem)] leading-[1.05] font-extrabold tracking-tight">
           Graphics Programming Knights
         </h1>
-        <p className="text-2xl md:text-3xl text-text-secondary">
+        <p className="max-w-xl text-lg leading-relaxed text-text-secondary sm:text-xl lg:text-2xl">
           University of Central Florida&apos;s Computer Graphics RSO
         </p>
 
         {/* Button and Icons Row */}
-        <div className="flex flex-row items-center gap-6 mt-2">
+        <div className="flex flex-wrap items-center gap-5 mt-2">
           <a
             href="https://discord.gg/XwDHkT3fRa"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center gap-2 bg-accent hover:bg-accent-light px-10 py-5 rounded-full text-text-primary text-xl font-medium transition-colors"
+            className="inline-flex shrink-0 items-center gap-2 rounded-full bg-accent px-6 py-3 text-lg font-medium text-text-primary transition-colors hover:bg-accent-light focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-light"
           >
             Join Us
             <FaDiscord size={28} />
@@ -29,26 +29,28 @@ export default function HeroSection() {
           <div className="flex flex-row items-center gap-5 text-text-secondary">
             <a
               href="https://www.instagram.com/gpknights_"
+              aria-label="Instagram"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-text-primary transition-colors"
+              className="inline-flex h-11 w-11 items-center justify-center hover:text-text-primary transition-colors focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-light"
             >
-              <FaInstagram className="w-10 h-10" />
+              <FaInstagram className="w-7 h-7" />
             </a>
             <a
               href="https://www.linkedin.com/company/graphics-programming-knights/"
+              aria-label="LinkedIn"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-text-primary transition-colors"
+              className="inline-flex h-11 w-11 items-center justify-center hover:text-text-primary transition-colors focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-light"
             >
-              <FaLinkedin className="w-10 h-10" />
+              <FaLinkedin className="w-7 h-7" />
             </a>
           </div>
         </div>
       </div>
 
-      {/* Right Column: Placeholder for ASCII render */}
-      <div className="flex justify-center items-center w-56 sm:w-64 md:w-56 lg:w-70 xl:w-[60rem] 2xl:w-165 max-w-full aspect-square">
+      {/* Keep the animated logo proportional to the available column width. */}
+      <div className="mx-auto aspect-square w-full max-w-72 sm:max-w-96 lg:max-w-lg">
         <AsciiHero />
       </div>
     </section>

From b9a6ed561de59619ef9858092f3b6a4279afa433 Mon Sep 17 00:00:00 2001
From: sebastian-noel <snoel.dev@gmail.com>
Date: Thu, 22 Oct 2026 23:48:52 -0400
Subject: [PATCH 2/2] fix: place hero logo above text on smaller screens

---
 components/HeroSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index 8d2ed14..508e08d 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -50,7 +50,7 @@ export default function HeroSection() {
       </div>
 
       {/* Keep the animated logo proportional to the available column width. */}
-      <div className="mx-auto aspect-square w-full max-w-72 sm:max-w-96 lg:max-w-lg">
+      <div className="order-first mx-auto aspect-square w-full max-w-72 sm:max-w-96 lg:order-last lg:max-w-lg">
         <AsciiHero />
       </div>
     </section>