From b32c044346bdf2f1d58e0621ff8ec3d9df0c3b47 Mon Sep 17 00:00:00 2001
From: Alejandro <alecoco09j@gmail.com>
Date: Sun, 30 Aug 2026 23:28:22 -0400
Subject: [PATCH 1/2] feat: animated logo v1

---
 components/AsciiHero.tsx | 60 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 53 insertions(+), 7 deletions(-)

diff --git a/components/AsciiHero.tsx b/components/AsciiHero.tsx
index c39f5d6..c8874d1 100644
--- a/components/AsciiHero.tsx
+++ b/components/AsciiHero.tsx
@@ -1,16 +1,62 @@
+"use client";
+
 import Image from "next/image";
+import { motion } from "motion/react";
 import gpkTriangleLogo from "@/public/gpk_logo_new.webp";
 
 export default function AsciiHero() {
   return (
     <div className="flex items-center justify-start w-225 max-w-full h-full -translate-y-15">
-      <Image
-        src={gpkTriangleLogo}
-        alt="Graphics Programming Knights logo"
-        
-        className="w-full h-full object-fill"
-        priority
-      />
+      {/* ── Entrance "swish" ──────────────────────────────────────────────
+          Starts at scale 0, springs past full size, settles back down.
+          Lower `damping` relative to `stiffness` = bigger overshoot/bounce;
+          raise `damping` for a softer landing. `mass` slows the whole thing
+          down if you want the swish to feel heavier. */}
+      <motion.div
+        className="relative w-full h-full"
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ type: "spring", stiffness: 100, damping: 10, mass: 1 }}
+      >
+        <Image
+          src={gpkTriangleLogo}
+          alt="Graphics Programming Knights logo"
+          className="w-full h-full object-fill"
+          priority
+        />
+
+        {/* ── Shine sweep ─────────────────────────────────────────────────
+            A soft white band that slides diagonally across the logo. It's
+            masked to the logo image's own alpha channel, so the glow only
+            ever lands on the logo's pixels rather than a rectangle around
+            it. To fire it on hover instead of automatically, delete
+            `animate`/`transition` here and drive it with `whileHover` on
+            the wrapping motion.div above instead. */}
+        <motion.div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0"
+          style={{
+            backgroundImage:
+            "linear-gradient(115deg, transparent 48%, rgba(255,255,255,0.15) 50%, transparent 52%)",
+            backgroundSize: "250% 250%",
+            WebkitMaskImage: `url(${gpkTriangleLogo.src})`,
+            maskImage: `url(${gpkTriangleLogo.src})`,
+            WebkitMaskSize: "100% 100%",
+            maskSize: "100% 100%",
+            WebkitMaskRepeat: "no-repeat",
+            maskRepeat: "no-repeat",
+          }}
+          initial={{ backgroundPosition: "0% 0%" }}
+          animate={{ backgroundPosition: "100% 100%" }}
+          transition={{
+            duration: 2.5,
+            ease: "easeInOut",
+            delay: 0.2,
+            repeat: Infinity,
+            repeatDelay: 8.0,
+          }}
+        />
+      </motion.div>
     </div>
   );
 }

From 8daf7c2475db4c403bf9e69fd79ebfa236f0cd6b Mon Sep 17 00:00:00 2001
From: Alejandro <alecoco09j@gmail.com>
Date: Mon, 31 Aug 2026 16:29:58 -0400
Subject: [PATCH 2/2] feat: animated logo v2 better size

---
 components/AsciiHero.tsx   | 14 +-------------
 components/HeroSection.tsx |  4 ++--
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/components/AsciiHero.tsx b/components/AsciiHero.tsx
index c8874d1..c3b7c29 100644
--- a/components/AsciiHero.tsx
+++ b/components/AsciiHero.tsx
@@ -6,12 +6,7 @@ import gpkTriangleLogo from "@/public/gpk_logo_new.webp";
 
 export default function AsciiHero() {
   return (
-    <div className="flex items-center justify-start w-225 max-w-full h-full -translate-y-15">
-      {/* ── Entrance "swish" ──────────────────────────────────────────────
-          Starts at scale 0, springs past full size, settles back down.
-          Lower `damping` relative to `stiffness` = bigger overshoot/bounce;
-          raise `damping` for a softer landing. `mass` slows the whole thing
-          down if you want the swish to feel heavier. */}
+    <div className="flex items-center justify-start w-full h-full -translate-y-15">
       <motion.div
         className="relative w-full h-full"
         initial={{ scale: 0 }}
@@ -25,13 +20,6 @@ export default function AsciiHero() {
           priority
         />
 
-        {/* ── Shine sweep ─────────────────────────────────────────────────
-            A soft white band that slides diagonally across the logo. It's
-            masked to the logo image's own alpha channel, so the glow only
-            ever lands on the logo's pixels rather than a rectangle around
-            it. To fire it on hover instead of automatically, delete
-            `animate`/`transition` here and drive it with `whileHover` on
-            the wrapping motion.div above instead. */}
         <motion.div
           aria-hidden="true"
           className="pointer-events-none absolute inset-0"
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index 445666c..a5b3eaa 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -3,7 +3,7 @@ import AsciiHero from "./AsciiHero";
 
 export default function HeroSection() {
   return (
-    <section className="grid grid-cols-1 md:grid-cols-2 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 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">
       {/* 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">
@@ -48,7 +48,7 @@ export default function HeroSection() {
       </div>
 
       {/* Right Column: Placeholder for ASCII render */}
-      <div className="flex justify-center items-center w-205 h-205">
+      <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">
         <AsciiHero />
       </div>
     </section>